/* =========================================================
   GIDDUP V3
   ENERGIA · MOVIMENTO · MASSIMA LEGGIBILITÀ
========================================================= */

:root{
    --blue:#2962ff;
    --blue-deep:#1648db;
    --blue-dark:#0b39b8;
    --lime:#79ff91;
    --lime-hot:#59f77a;

    --ink:#0d1424;
    --ink-soft:#172238;
    --text:#182235;
    --muted:#4d5b70;

    --white:#ffffff;
    --off:#f5f7fb;
    --line:#dfe5ef;

    --wa:#25d366;
    --tg:#229ed9;

    --max:1320px;
}


/* =========================================================
   RESET
========================================================= */

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    color:var(--text);
    background:var(--white);

    /*
       BASE VOLUTAMENTE GRANDE.
       Il sito deve essere leggibile senza sforzo.
    */
    font-size:24px;
    line-height:1.62;

    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    color:inherit;
    text-decoration:none;
}

strong{
    color:var(--ink);
    font-weight:850;
}

.giddup{
    font-style:italic !important;
    font-weight:800;
    letter-spacing:-.025em;
}

.container{
    width:min(calc(100% - 80px),var(--max));
    margin:auto;
}

section{
    position:relative;
    overflow:hidden;
}

.section{
    padding:150px 0;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

h1,
h2,
h3{
    color:var(--ink);
    line-height:.98;
    letter-spacing:-.055em;
}

h1{
    font-size:clamp(5rem,8.5vw,8rem);
    font-weight:900;
}

h2{
    font-size:clamp(3.8rem,6vw,6rem);
    font-weight:900;
}

h3{
    font-size:2rem;
    font-weight:850;
}

p{
    font-size:1rem;
}

.blue{
    color:var(--blue);
}

.lime{
    color:var(--lime);
}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow{
    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:30px;

    color:var(--blue);

    font-size:18px;
    font-weight:900;

    letter-spacing:.12em;
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";

    width:12px;
    height:12px;

    flex:none;

    border-radius:50%;

    background:var(--lime-hot);

    box-shadow:
        0 0 0 8px rgba(89,247,122,.13);
}


/* =========================================================
   NAV
========================================================= */

nav{
    position:absolute;
    z-index:50;

    top:0;
    left:0;

    width:100%;

    padding:34px 0;
}

.brand{
    display:inline-flex;
    align-items:center;
    gap:18px;
}

.brand-arrow{
    width:78px;
    height:65px;
}

.brand-word{
    display:block;

    color:var(--ink);

    font-size:3.2rem;
    line-height:.8;

    font-weight:900;
    font-style:italic;

    letter-spacing:-.08em;
}

.brand-tag{
    display:block;

    margin-top:14px;

    color:var(--muted);

    font-size:18px;
    line-height:1;

    font-weight:800;

    letter-spacing:.06em;
    text-transform:uppercase;
}


/* =========================================================
   HERO
========================================================= */

.hero{
    min-height:100vh;

    display:flex;
    align-items:center;

    padding:205px 0 130px;

    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(121,255,145,.40),
            transparent 21%
        ),
        radial-gradient(
            circle at 76% 37%,
            rgba(41,98,255,.18),
            transparent 31%
        ),
        #fff;
}

.hero::before{
    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-100px;
    top:130px;

    border:2px solid rgba(41,98,255,.08);
    border-radius:50%;

    box-shadow:
        0 0 0 90px rgba(41,98,255,.025),
        0 0 0 180px rgba(121,255,145,.025);
}

.hero::after{
    content:"↗";

    position:absolute;

    right:3%;
    bottom:-12%;

    color:rgba(41,98,255,.035);

    font-size:36rem;
    font-weight:900;

    line-height:1;

    transform:rotate(-7deg);
}

.hero-inner{
    position:relative;
    z-index:5;

    max-width:1180px;
}

.hero-kicker{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-bottom:34px;

    padding:13px 21px;

    border:1px solid rgba(41,98,255,.14);
    border-radius:999px;

    color:var(--blue);
    background:#f5f8ff;

    font-size:18px;
    font-weight:850;

    letter-spacing:.06em;
    text-transform:uppercase;
}

.hero-kicker span{
    width:10px;
    height:10px;

    border-radius:50%;
    background:var(--lime-hot);
}

.hero h1{
    max-width:1150px;
}

.hero h1 .hero-blue{
    display:block;
    color:var(--blue);
}

.hero-copy{
    max-width:900px;

    margin:42px 0;

    color:var(--muted);

    font-size:27px;
    line-height:1.58;
}


/* =========================================================
   CHANNEL BUTTONS
========================================================= */

.channels{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.channel{
    min-height:76px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:15px;

    padding:0 35px;

    border-radius:20px;

    color:white;

    font-size:21px;
    font-weight:850;

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.channel:hover{
    transform:translateY(-5px) rotate(-1deg);
}

.channel.wa{
    background:var(--wa);

    box-shadow:
        0 18px 40px rgba(37,211,102,.23);
}

.channel.tg{
    background:var(--tg);

    box-shadow:
        0 18px 40px rgba(34,158,217,.23);
}

.channel svg{
    width:32px;
    height:32px;
}

.micro-proof{
    display:flex;
    flex-wrap:wrap;

    gap:25px;

    margin-top:30px;

    color:#5e6a7e;

    font-size:19px;
    font-weight:700;
}

.micro-proof span::before{
    content:"✓";

    margin-right:9px;

    color:var(--blue);

    font-weight:900;
}


/* =========================================================
   MOVEMENT STRIP
========================================================= */

.movement-strip{
    overflow:hidden;

    padding:25px 0;

    color:white;
    background:var(--blue);

    transform:rotate(-1deg) scale(1.02);
}

.movement-track{
    display:flex;
    justify-content:center;
    align-items:center;

    gap:37px;

    white-space:nowrap;

    font-size:22px;
    font-weight:900;

    letter-spacing:.02em;
}

.movement-track b{
    color:var(--lime);
    font-size:32px;
}


/* =========================================================
   PROBLEM
========================================================= */

.problem{
    padding:165px 0 155px;
}

.problem-grid{
    display:grid;

    grid-template-columns:1fr .92fr;

    gap:100px;

    align-items:center;
}

.problem h2{
    max-width:740px;
}

.problem-copy{
    margin-top:38px;

    max-width:720px;

    color:var(--muted);

    font-size:25px;
    line-height:1.7;
}


/* =========================================================
   PROBLEM TRAJECTORY
========================================================= */

.trajectory{
    position:relative;

    padding:30px 40px;

    border-radius:36px;

    background:var(--off);

    transform:rotate(1deg);

    box-shadow:
        0 25px 70px rgba(16,24,40,.07);
}

.trajectory::before{
    content:"";

    position:absolute;

    left:73px;
    top:75px;
    bottom:75px;

    width:4px;

    background:
        linear-gradient(
            to bottom,
            var(--blue),
            var(--blue),
            #c8d0df
        );
}

.trajectory-item{
    position:relative;

    display:grid;

    grid-template-columns:72px 1fr;

    gap:25px;

    align-items:center;

    min-height:135px;

    padding:20px 0;

    border-bottom:1px solid #dfe4ec;
}

.trajectory-item:last-child{
    border:0;
}

.trajectory-number{
    position:relative;
    z-index:2;

    width:66px;
    height:66px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:white;
    background:var(--blue);

    font-size:19px;
    font-weight:900;

    box-shadow:
        0 10px 25px rgba(41,98,255,.20);
}

.trajectory-item:nth-child(4)
.trajectory-number{
    color:var(--ink);
    background:var(--lime);
}

.trajectory-text{
    color:#455267;

    font-size:22px;
    line-height:1.5;
}

.trajectory-text strong{
    display:block;

    margin-bottom:7px;

    font-size:27px;
    line-height:1.25;
}


/* =========================================================
   PROBLEM PUNCH
========================================================= */

.problem-punch{
    margin-top:110px;

    padding-top:60px;

    border-top:3px solid var(--ink);

    max-width:1180px;

    color:var(--ink);

    font-size:clamp(2.2rem,3.5vw,3.5rem);
    font-weight:850;

    line-height:1.22;
    letter-spacing:-.045em;
}

.problem-punch em{
    color:var(--blue);
    font-style:normal;
}


/* =========================================================
   HOW
========================================================= */

.how{
    color:white;
    background:var(--ink);
}

.how .eyebrow{
    color:var(--lime);
}

.how h2{
    max-width:1000px;
    color:white;
}

.how-intro{
    max-width:850px;

    margin-top:35px;

    color:#c0c8d7;

    font-size:26px;
    line-height:1.65;
}


/* =========================================================
   STEPS
========================================================= */

.steps{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:26px;

    margin-top:85px;
}

.step{
    position:relative;

    min-height:580px;

    padding:0;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.12);
    border-radius:35px;

    background:white;

    transition:.25s ease;
}

.step:nth-child(2){
    transform:translateY(25px);
}

.step:nth-child(3){
    transform:translateY(50px);
}

.step:hover{
    transform:translateY(-8px) rotate(-1deg);
}

.step:nth-child(2):hover,
.step:nth-child(3):hover{
    transform:translateY(0) rotate(-1deg);
}

.step-top{
    position:relative;

    height:230px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    background:
        linear-gradient(
            135deg,
            rgba(41,98,255,.18),
            rgba(121,255,145,.22)
        );
}

.step:nth-child(2) .step-top{
    background:
        linear-gradient(
            135deg,
            rgba(121,255,145,.28),
            rgba(41,98,255,.14)
        );
}

.step:nth-child(3) .step-top{
    background:
        linear-gradient(
            135deg,
            rgba(41,98,255,.22),
            rgba(121,255,145,.18)
        );
}

.step-number{
    position:absolute;

    top:15px;
    right:22px;

    color:rgba(41,98,255,.30);

    font-size:85px;
    line-height:1;

    font-weight:900;
    letter-spacing:-.08em;
}

.step-icon{
    position:relative;
    z-index:2;

    width:90px;
    height:90px;

    display:grid;
    place-items:center;

    border-radius:26px;

    color:var(--blue);
    background:white;

    box-shadow:
        0 20px 50px rgba(16,24,40,.12);

    transform:rotate(-4deg);
}

.step-icon svg{
    width:44px;
    height:44px;
}

.step-content{
    padding:40px 38px 45px;
}

.step h3{
    color:var(--ink);

    margin-bottom:20px;

    font-size:31px;
    line-height:1.15;
}

.step p{
    color:var(--muted);

    font-size:22px;
    line-height:1.6;
}


/* =========================================================
   PERSONAL PATH
========================================================= */

.personal{
    padding-top:190px;

    background:white;
}

.personal-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:95px;

    align-items:center;
}

.personal h2{
    max-width:680px;
}

.personal-copy p{
    margin-top:32px;

    color:var(--muted);

    font-size:24px;
    line-height:1.65;
}

.path-panel{
    position:relative;

    padding:38px;

    border-radius:40px;

    color:white;
    background:var(--blue);

    box-shadow:
        0 35px 80px rgba(41,98,255,.20);

    transform:rotate(1deg);
}

.path-panel::after{
    content:"↗";

    position:absolute;

    right:18px;
    bottom:-20px;

    color:rgba(255,255,255,.07);

    font-size:15rem;
    font-weight:900;

    line-height:1;
}

.path-item{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:85px 1fr;

    gap:28px;

    padding:38px 18px;

    border-bottom:
        1px solid rgba(255,255,255,.25);
}

.path-item:last-child{
    border:0;
}

.path-num{
    color:var(--lime);

    font-size:22px;
    font-weight:900;
}

.path-item h3{
    color:white;

    margin-bottom:13px;

    font-size:30px;
    line-height:1.2;
}

.path-item p{
    color:rgba(255,255,255,.90);

    font-size:22px;
    line-height:1.55;
}


/* =========================================================
   COMPANION
========================================================= */

.companion{
    color:white;

    background:
        radial-gradient(
            circle at 85% 50%,
            rgba(41,98,255,.30),
            transparent 27%
        ),
        var(--ink);
}

.companion-grid{
    display:grid;

    grid-template-columns:.9fr 1.1fr;

    gap:90px;

    align-items:center;
}

.companion .eyebrow{
    color:var(--lime);
}

.companion h2{
    color:white;
}

.companion-copy p{
    max-width:680px;

    margin-top:32px;

    color:#c3ccda;

    font-size:24px;
    line-height:1.65;
}

.no-guilt{
    margin-top:45px;

    padding-left:28px;

    border-left:6px solid var(--lime);

    color:white;

    font-size:27px;
    font-weight:800;

    line-height:1.55;
}


/* =========================================================
   PHONE / CHAT
========================================================= */

.phone{
    max-width:570px;

    margin-left:auto;

    padding:13px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:44px;

    background:#253148;

    box-shadow:
        0 50px 100px rgba(0,0,0,.35);

    transform:rotate(2deg);
}

.chat{
    padding:32px 27px;

    border-radius:34px;

    color:var(--ink);
    background:#f3f5f7;
}

.chat-head{
    display:flex;
    align-items:center;

    gap:15px;

    padding-bottom:22px;
    margin-bottom:27px;

    border-bottom:1px solid #dde2e8;
}

.avatar{
    width:58px;
    height:58px;

    display:grid;
    place-items:center;

    border-radius:17px;

    color:var(--ink);
    background:var(--lime);

    font-size:25px;
    font-weight:900;

    transform:rotate(-4deg);
}

.chat-name{
    font-size:23px;
}

.online{
    display:block;

    margin-top:3px;

    color:#328d4a;

    font-size:17px;
    font-weight:700;
}

.messages{
    display:flex;
    flex-direction:column;

    gap:17px;
}

.bubble{
    max-width:90%;

    padding:17px 20px;

    border-radius:20px;

    font-size:20px;
    line-height:1.5;
}

.bubble.ai{
    align-self:flex-start;

    background:white;

    border-bottom-left-radius:5px;
}

.bubble.user{
    align-self:flex-end;

    background:#d9fce1;

    border-bottom-right-radius:5px;
}


/* =========================================================
   IDENTITY
========================================================= */

.identity{
    background:#f4f7fc;
}

.identity-pills{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:15px;

    margin-bottom:45px;
}

.identity-pill{
    display:inline-flex;
    align-items:center;
    gap:10px;

    padding:14px 24px;

    border-radius:999px;

    color:#27354d;
    background:#dbe7fb;

    font-size:20px;
    font-weight:850;
}

.identity-pill b{
    color:var(--blue);

    font-size:25px;
}

.identity-title{
    max-width:1100px;

    margin:auto;

    text-align:center;
}

.identity-title h2{
    line-height:1.02;
}

.identity-title .personal-word{
    color:var(--blue);
}

.identity-cards{
    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

    margin-top:90px;
}

.identity-card{
    position:relative;

    min-height:460px;

    padding:45px 42px;

    overflow:hidden;

    border-radius:32px;

    background:white;

    box-shadow:
        0 20px 60px rgba(16,24,40,.08);
}

.identity-card:nth-child(2){
    transform:translateY(-18px);
}

.identity-card::after{
    content:"";

    position:absolute;

    width:180px;
    height:180px;

    top:-85px;
    right:-75px;

    border-radius:50%;

    background:var(--lime);

    opacity:.16;
}

.identity-icon{
    width:76px;
    height:76px;

    display:grid;
    place-items:center;

    margin-bottom:65px;

    border-radius:22px;

    color:white;
    background:var(--blue);
}

.identity-icon svg{
    width:37px;
    height:37px;
}

.identity-card h3{
    margin-bottom:20px;

    font-size:30px;
    line-height:1.2;
}

.identity-card p{
    color:var(--muted);

    font-size:22px;
    line-height:1.62;
}


/* =========================================================
   BENEFITS
========================================================= */

.benefits{
    color:white;
    background:var(--blue);
}

.benefits .eyebrow{
    color:var(--lime);
}

.benefits h2{
    color:white;
}

.benefits-intro{
    max-width:850px;

    margin-top:34px;

    color:rgba(255,255,255,.90);

    font-size:25px;
    line-height:1.65;
}

.benefit-list{
    margin-top:90px;

    border-top:
        2px solid rgba(255,255,255,.30);
}

.benefit-row{
    position:relative;

    display:grid;

    grid-template-columns:120px 1fr 1fr;

    gap:35px;

    align-items:center;

    padding:52px 12px;

    border-bottom:
        1px solid rgba(255,255,255,.30);

    transition:.25s;
}

.benefit-row:hover{
    padding-left:30px;

    background:
        rgba(255,255,255,.06);
}

.benefit-number{
    color:var(--lime);

    font-size:20px;
    font-weight:900;
}

.benefit-word{
    color:white;

    font-size:clamp(3rem,5vw,5rem);
    font-weight:900;

    line-height:1;

    letter-spacing:-.06em;
}

.benefit-row p{
    max-width:480px;

    color:rgba(255,255,255,.92);

    font-size:22px;
    line-height:1.55;
}

.benefit-arrow{
    position:absolute;

    right:15px;
    top:50%;

    transform:translateY(-50%);

    color:rgba(255,255,255,.13);

    font-size:6rem;

    font-weight:900;
}


/* =========================================================
   FAQ
========================================================= */

.faq{
    background:white;
}

.faq-grid{
    display:grid;

    grid-template-columns:.78fr 1.22fr;

    gap:90px;
}

.faq-left{
    position:sticky;
    top:80px;

    align-self:start;
}

.faq-left h2{
    font-size:clamp(3.7rem,5.5vw,5.5rem);
}

.faq-graphic{
    position:relative;

    width:280px;
    height:110px;

    margin-top:50px;
}

.faq-dot{
    position:absolute;

    width:23px;
    height:23px;

    border-radius:50%;

    background:var(--blue);
}

.faq-dot:nth-child(1){
    left:0;
}

.faq-dot:nth-child(2){
    left:45px;
}

.faq-dot:nth-child(3){
    left:90px;
    background:var(--lime);
}

.faq-arrow{
    position:absolute;

    left:140px;
    top:-50px;

    color:var(--blue);

    font-size:9rem;
    line-height:1;

    font-weight:900;

    transform:rotate(-10deg);
}

.faq-list{
    border-top:3px solid var(--ink);
}

details{
    border-bottom:1px solid #d9dee8;
}

summary{
    position:relative;

    padding:36px 75px 36px 0;

    list-style:none;

    cursor:pointer;

    color:var(--ink);

    font-size:24px;
    line-height:1.4;

    font-weight:850;
}

summary::-webkit-details-marker{
    display:none;
}

summary::after{
    content:"+";

    position:absolute;

    right:5px;
    top:27px;

    width:50px;
    height:50px;

    display:grid;
    place-items:center;

    border-radius:50%;

    color:white;
    background:var(--blue);

    font-size:31px;
    font-weight:500;

    transition:.2s;
}

details[open] summary::after{
    content:"−";

    color:var(--ink);
    background:var(--lime);

    transform:rotate(5deg);
}

details p{
    max-width:780px;

    padding:0 65px 38px 0;

    color:var(--muted);

    font-size:22px;
    line-height:1.7;
}


/* =========================================================
   FINAL
========================================================= */

.final{
    padding:165px 0;

    text-align:center;

    background:var(--lime);
}

.final::before{
    content:"↗";

    position:absolute;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        rotate(-7deg);

    color:rgba(13,20,36,.055);

    font-size:40rem;
    line-height:1;

    font-weight:900;
}

.final-inner{
    position:relative;
    z-index:2;
}

.final h2{
    max-width:1050px;

    margin:auto;

    font-size:
        clamp(4rem,7vw,7rem);
}

.final p{
    max-width:750px;

    margin:38px auto 45px;

    color:#263d34;

    font-size:25px;
    line-height:1.6;
}

.final .channels{
    justify-content:center;
}

.final-proof{
    margin-top:30px;

    color:#35483f;

    font-size:19px;
    font-weight:750;
}


/* =========================================================
   FOOTER
========================================================= */

footer{
    padding:65px 0;

    color:white;
    background:var(--ink);
}

.footer-inner{
    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:40px;
}

.footer-brand{
    font-size:3.2rem;
    line-height:1;

    font-weight:900;
    font-style:italic;

    letter-spacing:-.07em;
}

.footer-tag{
    margin-top:13px;

    color:#aeb7c5;

    font-size:19px;
}

.footer-copy{
    color:#929dad;

    text-align:right;

    font-size:18px;
    line-height:1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    body{
        font-size:22px;
    }

    .section{
        padding:115px 0;
    }

    .problem-grid,
    .personal-grid,
    .companion-grid,
    .faq-grid{
        grid-template-columns:1fr;
        gap:70px;
    }

    .steps,
    .identity-cards{
        grid-template-columns:1fr;
    }

    .step{
        min-height:auto;
    }

    .step:nth-child(2),
    .step:nth-child(3),
    .identity-card:nth-child(2){
        transform:none;
    }

    .personal{
        padding-top:120px;
    }

    .phone{
        margin:auto;
    }

    .faq-left{
        position:relative;
        top:0;
    }

    .benefit-row{
        grid-template-columns:90px 1fr;
    }

    .benefit-row p{
        grid-column:2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:650px){

    body{
        /*
           Anche su mobile il testo resta grande.
        */
        font-size:20px;
    }

    .container{
        width:calc(100% - 32px);
    }

    nav{
        padding:23px 0;
    }

    .brand-arrow{
        width:58px;
    }

    .brand-word{
        font-size:2.35rem;
    }

    .brand-tag{
        font-size:15px;
    }

    .hero{
        min-height:auto;

        padding:
            165px 0 95px;
    }

    h1{
        font-size:
            clamp(3.4rem,15vw,5rem);
    }

    h2{
        font-size:
            clamp(3rem,12vw,4.3rem);
    }

    .hero-copy{
        font-size:22px;
    }

    .channels{
        flex-direction:column;
    }

    .channel{
        width:100%;

        min-height:72px;

        font-size:20px;
    }

    .micro-proof{
        flex-direction:column;
        gap:8px;

        font-size:18px;
    }

    .movement-track{
        justify-content:flex-start;

        padding-left:20px;

        font-size:18px;
    }

    .problem-copy{
        font-size:21px;
    }

    .trajectory{
        padding:20px 20px;
    }

    .trajectory::before{
        left:52px;
    }

    .trajectory-item{
        grid-template-columns:58px 1fr;

        gap:17px;

        min-height:125px;
    }

    .trajectory-number{
        width:54px;
        height:54px;

        font-size:17px;
    }

    .trajectory-text{
        font-size:20px;
    }

    .trajectory-text strong{
        font-size:23px;
    }

    .problem-punch{
        margin-top:75px;
    }

    .how-intro{
        font-size:21px;
    }

    .step-top{
        height:200px;
    }

    .step-content{
        padding:34px 28px 40px;
    }

    .step h3{
        font-size:27px;
    }

    .step p{
        font-size:20px;
    }

    .personal-copy p{
        font-size:21px;
    }

    .path-panel{
        padding:22px;
    }

    .path-item{
        grid-template-columns:55px 1fr;

        padding:30px 8px;
    }

    .path-item h3{
        font-size:25px;
    }

    .path-item p{
        font-size:20px;
    }

    .companion-copy p{
        font-size:21px;
    }

    .no-guilt{
        font-size:23px;
    }

    .bubble{
        font-size:19px;
    }

    .identity-pills{
        justify-content:flex-start;
    }

    .identity-pill{
        font-size:18px;
    }

    .identity-title{
        text-align:left;
    }

    .identity-card{
        min-height:auto;

        padding:36px 30px;
    }

    .identity-card h3{
        font-size:27px;
    }

    .identity-card p{
        font-size:20px;
    }

    .benefits-intro{
        font-size:21px;
    }

    .benefit-row{
        display:block;

        padding:40px 5px;
    }

    .benefit-number{
        display:block;

        margin-bottom:15px;

        font-size:18px;
    }

    .benefit-word{
        display:block;

        margin-bottom:22px;

        font-size:3.4rem;
    }

    .benefit-row p{
        font-size:20px;
    }

    .benefit-arrow{
        display:none;
    }

    .faq-graphic{
        height:70px;
    }

    summary{
        font-size:21px;

        padding:
            30px 65px 30px 0;
    }

    summary::after{
        top:24px;
    }

    details p{
        padding-right:10px;

        font-size:20px;
    }

    .final p{
        font-size:21px;
    }

    .footer-inner{
        flex-direction:column;
        align-items:flex-start;
    }

    .footer-copy{
        text-align:left;
    }

}


/* =========================================================
   MOTION
========================================================= */

@media(prefers-reduced-motion:no-preference){

    @keyframes floatArrow{

        0%,100%{
            transform:translate(0,0);
        }

        50%{
            transform:translate(9px,-9px);
        }

    }

    .brand-arrow{
        animation:
            floatArrow 3s ease-in-out infinite;
    }

}


/* =========================================================
   RESPONSIVE — correzioni (Claude, 18/09/2026)
   Federico's CSS sopra resta intatto; qui solo ciò che serve
   perché la pagina non sfondi in orizzontale sui telefoni.
========================================================= */
html,body{overflow-x:hidden;overflow-x:clip;}
.page{position:relative;width:100%;overflow-x:hidden;overflow-x:clip;}
img,svg,video{max-width:100%;height:auto;}
.hero,.final,.movement-strip,.problem,.how,.personal,.companion,.identity,.benefits,.faq{overflow:hidden;}
h1,h2,h3{overflow-wrap:break-word;}
.movement-track{flex-wrap:wrap;white-space:normal;row-gap:10px;}
.lang-switch{margin-left:auto;display:flex;gap:10px;align-items:center;font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.lang-switch a{padding:8px 12px;border-radius:999px;border:1px solid var(--line);color:var(--muted);text-decoration:none;}
.lang-switch a[aria-current]{background:var(--ink);color:var(--white);border-color:var(--ink);}
nav .container{display:flex;align-items:center;}
@media(max-width:650px){
  h1{font-size:clamp(2.7rem,11.5vw,4.4rem);line-height:1.02;}
  h2{font-size:clamp(2.2rem,9.5vw,3.4rem);line-height:1.06;}
  .hero{padding:140px 0 80px;}
  .hero::after,.final::before{font-size:14rem;}
  .movement-track{justify-content:center;padding:0 16px;gap:10px 18px;font-size:16px;}
  .movement-track b{font-size:22px;}
  .chat{padding:22px 16px;border-radius:26px;}
  .phone{max-width:100%;}
  .benefit-word{font-size:2.6rem;letter-spacing:-.04em;}
  .path-panel,.identity-card,.step{transform:none;}
  .movement-strip{transform:none;}
  .hero::after,.final::before,.path-panel::after{display:none;}
  .lang-switch{font-size:14px;}
  .lang-switch a{padding:6px 10px;}
}