/* ========================================================================
   Post Sport USA — recreation
   Fonts: Barlow (body), Syne (display)
   ======================================================================== */

:root{
    --bg:        #1C1C1A;
    --bg-2:      #232321;
    --bg-3:      #2F2F2C;
    --red:       #ee2d38;
    --orange:    #FC5830;
    --teal:      #49BEAA;
    --white:     #FFFFFF;
    --gray:      #BCBDBF;
    --gray-dark: #595959;
    --black:     #0d0d0c;

    --font-body: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-head: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --container: 1300px;
    --header-h: 90px;
}

/* ----------------------------- Reset -------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:hidden; }
body{
    margin:0;
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    color:var(--white);
    background:var(--bg);
    overflow-x:hidden;
    width:100%;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,h5,h6{ margin:0; font-family:var(--font-head); font-weight:800; }
p{ margin:0 0 1em; }

.container{
    width:100%;
    max-width:var(--container);
    margin:0 auto;
    padding:0 24px;
}
section[id]{ scroll-margin-top:80px; }

/* ----------------------------- Buttons ------------------------------ */
.btn{
    display:inline-block;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    padding:18px 32px;
    border:none;
    cursor:pointer;
    transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn-dark{
    background:var(--black);
    color:var(--white);
}
.btn-dark:hover{
    background:var(--red);
    color:var(--white);
}

/* ========================================================================
   HEADER
   ======================================================================== */
.site-header{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    height:var(--header-h);
    display:flex;
    align-items:center;
    transition:background .3s ease, height .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{
    height:72px;
    background:var(--bg);
    box-shadow:0 8px 30px rgba(0,0,0,.35);
}
.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.logo img{ width:150px; height:auto; }

.nav-list{
    display:flex;
    align-items:center;
    gap:34px;
}
.nav-list a{
    font-size:15px;
    font-weight:500;
    letter-spacing:.3px;
    color:var(--white);
    transition:color .2s ease;
}
.nav-list a:hover{ color:var(--red); }
.nav-list a.is-active{ color:var(--red); }

/* Hamburger (mobile) */
.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:44px; height:44px;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:0;
    z-index:60;
}
.nav-toggle span{
    display:block;
    width:26px; height:2px;
    background:var(--white);
    transition:transform .3s ease, opacity .3s ease;
}

/* ========================================================================
   HERO
   ======================================================================== */
.hero{
    position:relative;
    min-height:100vh;
    padding:calc(var(--header-h) + 40px) 0 60px;
    display:flex;
    align-items:center;
    background:var(--bg) url("../../media/personaltrainer3-section-bg1.webp") no-repeat;
    background-position:center right -40px;
    background-size:auto 92%;
}
.hero-inner{
    position:relative;
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:40px;
}

/* --- left text --- */
.eyebrow{
    font-family:var(--font-body);
    font-size:15px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--white);
    margin:0 0 26px;
}
.hero-title{
    font-size:clamp(2.8rem, 4.9vw, 4.5rem);
    line-height:.97;
    text-transform:uppercase;
    color:var(--red);
    letter-spacing:-.5px;
    margin:0 0 40px;
}
.hero-lead{ max-width:440px; }
.hero-lead p{
    color:var(--gray);
    font-size:17px;
    line-height:1.75;
    margin:0 0 34px;
}

/* --- right media (quote + charts) --- */
.hero-media{
    position:relative;
    min-height:520px;
}
.hero-quote{
    position:absolute;
    top:4%;
    right:0;
    max-width:200px;
    margin:0;
    text-align:left;
}
.hero-quote .quote-mark{ width:34px; margin:0 0 14px; }
.hero-quote blockquote{
    margin:0;
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.5;
    color:var(--white);
}

.hero-charts{
    position:absolute;
    left:-6%;
    bottom:0;
    display:flex;
    gap:22px;
}
.chart-card{
    background:var(--bg-2);
    border-radius:20px;
    padding:34px 30px 30px;
    width:210px;
    text-align:center;
}
.chart{
    position:relative;
    width:130px; height:130px;
    margin:0 auto 18px;
}
.chart svg{
    width:100%; height:100%;
    transform:rotate(-90deg);
}
.chart .ring-track{
    fill:none;
    stroke:#3a3a37;
    stroke-width:6;
}
.chart .ring-fill{
    fill:none;
    stroke:var(--ring);
    stroke-width:6;
    stroke-linecap:round;
    stroke-dasharray:339.29;         /* 2πr, r=54 */
    stroke-dashoffset:339.29;        /* animated by JS */
    transition:stroke-dashoffset 1.4s cubic-bezier(.2,.7,.2,1);
}
.chart-num{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-head);
    font-weight:700;
    font-size:30px;
    color:var(--white);
}
.chart-label{
    margin:0;
    font-size:15px;
    line-height:1.4;
    color:var(--gray);
}

/* ========================================================================
   GOALS
   ======================================================================== */
.goals{
    position:relative;
    padding:100px 0 70px;
    background:var(--bg) url("../../media/personaltrainer3-section-bg2.webp") no-repeat top right;
    background-size:auto 420px;
}
.section-title{
    font-size:clamp(3rem, 5.6vw, 5.4rem);
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-1px;
    color:var(--gray-dark);
    margin:0 0 70px;
}
.section-title .is-white{ color:var(--white); }

.goals-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}
.goal-card{
    position:relative;
    display:flex;
    min-height:650px;
    border-radius:30px;
    overflow:hidden;
    isolation:isolate;
}
.goal-card::before{      /* image layer */
    content:"";
    position:absolute;
    inset:0;
    z-index:-2;
    background-image:var(--img);
    background-size:cover;
    background-position:center;
    transition:transform .6s ease, background-image .3s ease;
}
.goal-card::after{       /* gradient for legibility */
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:linear-gradient(to top, rgba(14,14,12,.92) 8%, rgba(14,14,12,.35) 42%, rgba(14,14,12,0) 70%);
}
.goal-card:hover::before{
    background-image:var(--img-hover);
    transform:scale(1.06);
}
.goal-card-body{
    margin-top:auto;
    padding:0 40px 40px;
    width:100%;
}
.goal-tag{
    display:inline-block;
    font-family:var(--font-body);
    font-size:21px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--white);
    margin:0 0 26px;
}
.goal-tag span{
    color:var(--orange);
    padding-bottom:12px;
    border-bottom:3px solid var(--red);
}
.goal-name{
    font-size:clamp(2.1rem, 2.6vw, 2.9rem);
    line-height:.98;
    text-transform:uppercase;
    color:var(--white);
    margin:0 0 28px;
}

/* ========================================================================
   EFFECTS
   ======================================================================== */
.effects{
    background:linear-gradient(0deg, var(--bg-2) 85%, var(--bg) 85%);
    padding:0 0 70px;
}
.effects-panel{
    position:relative;
    border-radius:40px;
    padding:70px 70px 44px;
    overflow:hidden;
    background:
        linear-gradient(180deg, rgba(14,14,12,0) 35%, rgba(14,14,12,.28) 100%),
        url("../../media/personaltrainer3-wrap-bg1.webp") no-repeat center 40%,
        linear-gradient(180deg, #bcbdbf 0%, #a6a7a5 55%, #8c8d8b 100%);
    background-size:auto, 78% auto, auto;
}
.effects-title{
    position:relative;
    font-size:clamp(2.6rem, 5vw, 5rem);
    line-height:.92;
    text-transform:uppercase;
    letter-spacing:-1px;
    color:#4a4a48;
    margin:0 0 40px;
}
.effects-title .is-white{ color:var(--white); }
.effects-sub{
    position:relative;
    font-family:var(--font-body);
    font-size:19px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--white);
    margin:0 0 10px;
}
.effects-chart{ position:relative; }
.effects-chart img{ width:100%; height:auto; display:block; }
.effects-plus{
    position:absolute;
    top:-6px;
    right:4%;
    font-family:var(--font-head);
    font-weight:700;
    font-size:clamp(2rem,3.4vw,3.2rem);
    color:var(--white);
    z-index:2;
}
.effects-note{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:26px 0 0;
    text-align:center;
    color:var(--white);
    font-size:15px;
}
.info-ico{ flex:none; width:20px; height:20px; color:var(--white); }
.info-ico svg{ width:100%; height:100%; display:block; }

/* ========================================================================
   ABOUT
   ======================================================================== */
.about{
    position:relative;
    padding:calc(var(--header-h) + 10px) 0 60px;
    background:var(--bg) url("../../media/personaltrainer3-section-bg3.webp") no-repeat top center;
    background-size:auto 100%;
}
.about-inner{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:center;
    gap:40px;
    min-height:78vh;
}
.about-name{
    font-size:clamp(3.4rem, 8vw, 7rem);
    line-height:.9;
    text-transform:uppercase;
    color:var(--red);
    letter-spacing:-1px;
    margin:0 0 36px;
}
.about-lead{
    max-width:430px;
    color:var(--white);
    font-size:16px;
    line-height:1.75;
    margin:0 0 40px;
}
.about-social{
    display:flex;
    align-items:center;
    gap:14px;
}
.about-social-label{
    font-weight:600;
    letter-spacing:.5px;
    margin-right:6px;
}
.social{ display:block; width:46px; height:46px; transition:transform .2s ease; }
.social img{ width:100%; height:100%; }
.social:hover{ transform:translateY(-3px); }

.about-charts{
    position:relative;
    display:flex;
    gap:22px;
    justify-content:flex-end;
    align-self:end;
    margin-bottom:6%;
}

/* ========================================================================
   SERVICES
   ======================================================================== */
.services{
    background:var(--bg);
    padding:70px 0;
}
.services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}
.service-card{
    background:linear-gradient(180deg, #232321 0%, #1e1e1c 100%);
    border-radius:18px;
    padding:48px 34px 42px;
    text-align:center;
    transition:transform .3s ease, background .3s ease;
}
.service-card:hover{
    transform:translateY(-6px);
    background:linear-gradient(180deg, #2b2b28 0%, #232321 100%);
}
.service-ico{
    width:60px; height:60px;
    margin:0 auto 26px;
}
.service-name{
    font-size:clamp(1.5rem, 1.8vw, 1.9rem);
    line-height:1;
    text-transform:uppercase;
    color:var(--white);
    margin:0 0 20px;
}
.service-desc{
    color:var(--gray);
    font-size:15.5px;
    line-height:1.55;
    margin:0;
}

/* ========================================================================
   OPINIONS
   ======================================================================== */
.opinions{ background:var(--bg); padding:40px 0 80px; }
.opinions-panel{
    background:#f0303b;
    border-radius:34px;
    padding:70px 60px;
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:50px;
    align-items:center;
}
.opinions-count{
    font-size:clamp(4rem, 7vw, 6.5rem);
    line-height:.9;
    color:var(--black);
    letter-spacing:-1px;
    margin:0 0 6px;
}
.opinions-head{
    font-size:clamp(2rem, 3.2vw, 3rem);
    line-height:.98;
    text-transform:uppercase;
    color:var(--black);
    margin:0 0 26px;
}
.opinions-lead{
    max-width:380px;
    color:rgba(20,15,15,.85);
    font-size:16px;
    line-height:1.6;
    margin:0;
}
.opinions-cards{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.testimonial{
    position:relative;
    background:var(--white);
    border-radius:18px;
    padding:46px 30px 34px;
    margin:0;
    text-align:center;
}
.testimonial .t-quote{
    position:absolute;
    top:-18px; right:26px;
    width:40px; height:auto;
}
.testimonial .t-avatar{
    width:74px; height:75px;
    border-radius:50%;
    object-fit:cover;
    margin:6px auto 22px;
}
.testimonial blockquote{
    margin:0 0 26px;
    color:#4a4a48;
    font-size:15.5px;
    line-height:1.6;
}
.testimonial figcaption{ display:flex; flex-direction:column; gap:12px; }
.t-name{
    font-family:var(--font-head);
    font-weight:700;
    font-size:21px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--black);
}
.t-age{ color:var(--red); font-weight:600; font-size:15px; }

/* ========================================================================
   CLIENTS
   ======================================================================== */
.clients{ background:var(--bg); padding:70px 0; }
.clients-title{ color:var(--white); margin-bottom:60px; }
.clients-title .is-gray{ color:var(--gray-dark); }
.clients-row{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:30px;
    align-items:start;
}
.clients-badge{ display:flex; justify-content:center; padding-top:30px; }
.clients-badge img{ width:230px; height:auto; animation:spin 26s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.clients-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.client-photo{
    border-radius:20px;
    overflow:hidden;
    aspect-ratio:3/4;
}
.client-photo img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.client-card:hover .client-photo img{ transform:scale(1.05); }
.client-name{
    font-size:1.7rem;
    line-height:1;
    text-transform:uppercase;
    color:var(--white);
    margin:22px 0 14px;
}
.client-desc{ color:var(--gray); font-size:15px; margin:0; }

/* ========================================================================
   PLANS (pricing)
   ======================================================================== */
.plans{
    position:relative;
    background:var(--bg) url("../../media/personaltrainer3-section-bg5.webp") no-repeat top right;
    background-size:auto 92%;
    padding:70px 0 90px;
}
.plans-title{ color:var(--white); margin-bottom:60px; }
.plans-title .is-gray{ color:var(--gray-dark); }
.plans-grid{
    position:relative;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:26px;
    max-width:1040px;
}
.plan-card{
    border-radius:22px;
    padding:46px 40px 44px;
}
.plan-dark{ background:var(--bg-2); }
.plan-featured{ background:#f0303b; }
.plan-gray{ background:#8a8b89; }
.plan-name{
    font-family:var(--font-body);
    font-weight:600;
    font-size:26px;
    color:var(--white);
    margin:0 0 20px;
}
.plan-price{
    display:flex;
    align-items:flex-start;
    gap:4px;
    font-family:var(--font-head);
    font-weight:700;
    font-size:clamp(2.6rem,3.6vw,3.4rem);
    color:var(--white);
    line-height:1;
    margin:0 0 14px;
    padding-bottom:22px;
    border-bottom:2px solid rgba(255,255,255,.35);
}
.plan-price .cur{ font-size:.5em; margin-top:.25em; }
.plan-featured .plan-price{ border-bottom-color:rgba(20,10,10,.3); }
.plan-gray .plan-price{ border-bottom-color:rgba(20,10,10,.3); }
.plan-desc{
    color:rgba(255,255,255,.82);
    font-size:15.5px;
    line-height:1.55;
    margin:0 0 32px;
    min-height:48px;
}
.plan-card .btn{ display:inline-block; }

/* ========================================================================
   FAQ
   ======================================================================== */
.faq{ background:var(--bg); }
.faq-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;
    min-height:88vh;
}
.faq-media{
    align-self:stretch;
    background:var(--bg) url("../../media/personaltrainer3-section-bg4.webp") no-repeat center right;
    background-size:cover;
}
.faq-content{ padding:60px 60px 60px 0; max-width:760px; }
.faq-title{
    font-size:clamp(4rem, 8vw, 7.5rem);
    line-height:.9;
    color:var(--red);
    letter-spacing:-1px;
    margin:0 0 44px;
}
.accordion{ display:flex; flex-direction:column; gap:14px; }
.acc-item{
    background:var(--bg-2);
    border-radius:10px;
    overflow:hidden;
}
.acc-head{
    display:flex;
    align-items:center;
    gap:22px;
    width:100%;
    background:none;
    border:none;
    cursor:pointer;
    padding:24px 26px;
    text-align:left;
    color:var(--white);
    font-family:var(--font-body);
}
.acc-num{ color:var(--red); font-weight:700; font-size:16px; flex:none; }
.acc-q{ flex:1; font-size:16px; font-weight:500; line-height:1.4; }
.acc-toggle{ position:relative; width:18px; height:18px; flex:none; }
.acc-toggle::before,
.acc-toggle::after{
    content:"";
    position:absolute;
    background:var(--gray);
    transition:transform .3s ease, opacity .3s ease;
}
.acc-toggle::before{ left:0; top:8px; width:18px; height:2px; }
.acc-toggle::after{ left:8px; top:0; width:2px; height:18px; }
.acc-item.is-open .acc-toggle::after{ transform:scaleY(0); }
.acc-body{
    max-height:0;
    overflow:hidden;
    transition:max-height .35s ease;
}
.acc-body p{
    margin:0;
    padding:0 26px 26px 66px;
    color:var(--gray);
    font-size:15px;
    line-height:1.6;
}

/* ========================================================================
   CONTACT + FOOTER
   ======================================================================== */
.contact{
    position:relative;
    background:#ee2d38 url("../../media/personaltrainer3-section-bg6.webp") no-repeat top right;
    background-size:auto 70%;
    color:var(--white);
}
.contact-inner{
    position:relative;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:50px;
    padding:90px 24px 70px;
    align-items:start;
}
.contact-title{
    font-size:clamp(3rem, 6vw, 5.4rem);
    line-height:.95;
    text-transform:uppercase;
    letter-spacing:-1px;
    margin:0 0 44px;
}
.contact-address{
    display:flex;
    align-items:flex-start;
    gap:26px;
    margin:0 0 40px;
}
.contact-logo{ width:120px; height:auto; flex:none; margin-top:4px; }
.contact-address address{
    font-style:normal;
    font-size:16px;
    line-height:1.6;
    color:rgba(255,255,255,.95);
}
.contact-big{
    display:block;
    font-family:var(--font-head);
    font-weight:700;
    font-size:clamp(1.8rem, 3vw, 2.9rem);
    line-height:1.25;
    color:var(--white);
    transition:opacity .2s ease;
}
.contact-big:hover{ opacity:.8; }

.contact-form-title{
    font-size:clamp(1.3rem, 1.9vw, 1.7rem);
    text-transform:uppercase;
    letter-spacing:.5px;
    line-height:1.15;
    margin:6px 0 30px;
}
.contact-big{ overflow-wrap:anywhere; }
.contact-form{ display:flex; flex-direction:column; gap:20px; max-width:460px; }
.contact-form input,
.contact-form textarea{
    background:transparent;
    border:none;
    border-bottom:2px solid rgba(255,255,255,.55);
    padding:12px 2px;
    color:var(--white);
    font-family:var(--font-body);
    font-size:16px;
    resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{ color:rgba(255,255,255,.75); }
.contact-form input:focus,
.contact-form textarea:focus{ outline:none; border-bottom-color:var(--white); }
.contact-form .btn{ align-self:flex-start; margin-top:8px; }
.contact-form .btn:hover{ background:#111; }

.site-footer{
    position:relative;
    border-top:1px solid rgba(255,255,255,.25);
}
.footer-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:30px 24px 36px;
    text-align:center;
}
.copy{ margin:0; font-size:15px; color:rgba(255,255,255,.95); }
.copy a{ font-weight:600; }
.copy a:hover{ text-decoration:underline; }
.footer-social{ display:flex; gap:20px; align-items:center; }
.footer-social a{
    display:inline-flex;
    color:var(--white);
    opacity:.9;
    transition:transform .2s ease, opacity .2s ease;
}
.footer-social a:hover{ transform:translateY(-3px); opacity:1; }
.footer-social svg{ width:17px; height:17px; fill:currentColor; display:block; }

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width:1100px){
    .hero{ background-position:center right -120px; background-size:auto 70%; }
    .hero-charts{ left:0; }
    .chart-card{ width:185px; padding:28px 22px 24px; }

    .goal-card{ min-height:560px; }
    .goal-card-body{ padding:0 28px 32px; }
    .goals-grid{ gap:18px; }
}

@media (max-width:860px){
    .goals-grid{
        grid-template-columns:1fr;
        gap:26px;
        max-width:460px;
        margin:0 auto;
    }
    .goal-card{ min-height:480px; }
    .goals{ padding:70px 0 50px; background-size:auto 260px; }
    .goals-title{ text-align:center; }
}

@media (max-width:900px){
    .nav-list{
        position:fixed;
        inset:0 0 0 auto;
        width:min(80vw,320px);
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:28px;
        padding:80px 40px;
        background:var(--bg-2);
        transform:translateX(100%);
        transition:transform .35s ease, visibility .35s ease;
        box-shadow:-20px 0 60px rgba(0,0,0,.5);
        visibility:hidden;
    }
    .main-nav.is-open .nav-list{ transform:translateX(0); visibility:visible; }
    .nav-list a{ font-size:20px; }
    .nav-toggle{ display:flex; }
    body.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
    body.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .hero{
        min-height:auto;
        padding:0 0 56px;
        background-position:66% calc(var(--header-h) - 6px);
        background-size:auto 44vh;
        text-align:center;
    }
    .hero-inner{
        grid-template-columns:minmax(0,1fr);
        gap:0;
    }
    .hero-text{
        padding-top:calc(44vh + var(--header-h) - 10px);   /* room for athlete banner on top */
    }
    .hero-title{ font-size:clamp(2.2rem,9vw,3.4rem); }
    .hero-lead{ margin:0 auto; }
    .hero-media{ min-width:0; min-height:auto; margin-top:44px; }
    .hero-quote{ display:none; }
    .hero-charts{
        position:static;
        left:auto; bottom:auto;
        justify-content:center;
        flex-wrap:wrap;
    }
    .chart-card{ width:min(260px,80vw); }
}

@media (max-width:560px){
    .container{ padding:0 18px; }
    .hero{ background-size:auto 36vh; background-position:66% calc(var(--header-h) - 6px); }
    .hero-text{ padding-top:calc(36vh + var(--header-h)); }
    .hero-title{ font-size:clamp(2rem,10.5vw,2.8rem); }
    .hero-lead p{ font-size:16px; }
    .btn{ padding:16px 28px; }

    .section-title{ font-size:clamp(1.9rem,9vw,2.8rem); margin-bottom:46px; }
    .goals{ background-size:auto 180px; }
    .goal-card{ min-height:430px; }
}

/* ---------- RESPONSIVE: sections Effects → Plans ---------- */
@media (max-width:1100px){
    .effects-panel{ padding:50px 40px 36px; }
    .services-grid{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .plans-grid{ max-width:none; }
    .plans{ background-size:auto 60%; }
}

@media (max-width:980px){
    /* About stacks like hero */
    .about{
        padding:0 0 60px;
        background-position:top calc(var(--header-h) - 6px) center;
        background-size:auto 46vh;
        text-align:center;
    }
    .about-inner{
        grid-template-columns:minmax(0,1fr);
        gap:0;
        min-height:auto;
    }
    .about-text{ padding-top:calc(46vh + var(--header-h) - 20px); min-width:0; }
    .about-lead{ margin:0 auto 34px; }
    .about-social{ justify-content:center; flex-wrap:wrap; }
    .about-charts{ justify-content:center; flex-wrap:wrap; margin:40px 0 0; min-width:0; }

    /* Opinions stacks */
    .opinions-panel{ grid-template-columns:minmax(0,1fr); gap:40px; padding:50px 36px; text-align:center; }
    .opinions-intro{ min-width:0; }
    .opinions-lead{ margin:0 auto; }
    .opinions-cards{ max-width:620px; margin:0 auto; min-width:0; }

    /* Clients: badge on top, cards below */
    .clients-row{ grid-template-columns:minmax(0,1fr); gap:36px; }
    .clients-badge{ padding-top:0; }
    .clients-grid{ min-width:0; }
}

@media (max-width:860px){
    .plans{ background-image:none; }
    .plans-grid{ grid-template-columns:minmax(0,1fr); max-width:420px; margin:0 auto; }
    .clients-grid{ grid-template-columns:minmax(0,1fr); max-width:420px; margin:0 auto; }
    .client-photo{ aspect-ratio:16/12; }
    .client-name,.clients-title,.plans-title{ text-align:center; }
    .client-card{ text-align:center; }
    .effects-title{ text-align:left; }
}

@media (max-width:620px){
    .services-grid{ grid-template-columns:minmax(0,1fr); max-width:360px; margin:0 auto; }
    .opinions-cards{ grid-template-columns:minmax(0,1fr); max-width:340px; }
    .about-name{ font-size:clamp(2rem,10.5vw,2.7rem); }
    .effects-panel{ padding:40px 22px 30px; border-radius:26px; }
    .effects-title{ font-size:clamp(1.5rem,7vw,2.2rem); margin-bottom:26px; }
    .effects-sub{ font-size:16px; }
    .effects-chart{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .effects-chart img{ min-width:520px; }
    .effects-plus{ right:2%; font-size:1.7rem; }
    .effects-note{ font-size:13.5px; }
}

/* ---------- RESPONSIVE: FAQ + Contact ---------- */
@media (max-width:980px){
    .faq-inner{ grid-template-columns:1fr; min-height:auto; gap:0; }
    .faq-media{
        min-height:300px;
        background-position:center right;
        background-size:cover;
    }
    .faq-content{ padding:50px 24px 60px; max-width:none; }
    .faq-title{ text-align:center; }

    .contact-inner{ grid-template-columns:minmax(0,1fr); gap:46px; padding:70px 24px 54px; }
    .contact{ background-image:none; }
    .contact-title{ text-align:center; }
    .contact-info{ text-align:center; }
    .contact-address{ justify-content:center; text-align:left; }
    .contact-form{ margin:0 auto; width:100%; }
    .contact-form-title{ text-align:center; }
    .contact-form .btn{ align-self:center; }
}

@media (max-width:620px){
    .faq-title{ font-size:clamp(3rem,16vw,4.5rem); }
    .acc-head{ gap:14px; padding:20px; }
    .acc-q{ font-size:15px; }
    .acc-body p{ padding-left:48px; }
    .contact-address{ flex-direction:column; align-items:center; gap:14px; text-align:center; }
    .contact-title{ font-size:clamp(2rem,10vw,2.8rem); }
    .contact-big{ font-size:clamp(1.15rem,5.8vw,1.7rem); }
    .contact-form-title{ font-size:clamp(1.05rem,4.6vw,1.4rem); }
}