:root{
    --gold:#D4A843;--gold-dim:rgba(212,168,67,0.45);--gold-glow:rgba(212,168,67,0.18);
    --gold-subtle:rgba(212,168,67,0.07);--gold-border:rgba(212,168,67,0.12);
    --green:#3A8F6A;--green-bg:rgba(58,143,106,0.08);--green-border:rgba(58,143,106,0.18);
    --red:#B85450;--red-bg:rgba(184,84,80,0.07);--red-border:rgba(184,84,80,0.15);
    --bg:#0B0D11;--surface:#12151B;--surface-2:#181C24;--surface-3:#1F242E;
    --white:#F0EEE9;
    --border:rgba(240,238,233,0.06);--border-h:rgba(240,238,233,0.12);
    --text:#F0EEE9;--text-2:#A8ADBA;--text-3:#636978;
    --font-h:'Manrope',system-ui,sans-serif;--font-b:'Inter',system-ui,sans-serif;
    --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.23,1,.32,1);
}

/* ===== RESET ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);background:var(--bg);color:var(--text);overflow-x:hidden;line-height:1.6}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.02;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--font-h);line-height:1.12}

/* ===== GLASS ===== */
.glass{
    position:relative;background:rgba(240,238,233,0.02);
    backdrop-filter:blur(40px) saturate(130%);-webkit-backdrop-filter:blur(40px) saturate(130%);
    border:1px solid var(--border);border-radius:20px;
    box-shadow:0 2px 16px rgba(0,0,0,0.2),inset 0 1px 0 rgba(240,238,233,0.03);
    overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
.glass::before{
    content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
    background:conic-gradient(from var(--ba,180deg),transparent 20%,rgba(212,168,67,.35),rgba(240,238,233,.1),rgba(212,168,67,.25),transparent 80%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none;z-index:1;
}
.glass:hover::before{opacity:1}
.glass::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(ellipse 280px 180px at var(--mx,50%) var(--my,50%),rgba(240,238,233,.05) 0%,transparent 70%);
    pointer-events:none;z-index:2;
}
.glass:hover{border-color:var(--border-h);box-shadow:0 8px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(240,238,233,.05);transform:translateY(-2px)}

/* ===== LAYOUT ===== */
.w{max-width:1320px;margin:0 auto;padding:0 32px}
.sec{padding:80px 0}
.sec-alt{background:var(--surface)}
.sec-label{font-size:13px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.sec-title{font-size:clamp(28px,4vw,42px);font-weight:800;line-height:1.08;letter-spacing:-1.5px;margin-bottom:16px}
.sec-title em{font-style:normal;color:var(--gold)}
.sec-desc{font-size:16px;color:var(--text-2);max-width:620px;line-height:1.6;margin-bottom:40px}
.gold-line{width:48px;height:3px;background:linear-gradient(90deg,var(--gold),transparent);border-radius:3px;margin-bottom:20px}

/* ===== HEADER ===== */

/* --- Desktop: fixed, transparent, floating elements --- */
.hdr{
    position:fixed;top:0;left:0;right:0;z-index:200;
    display:flex;flex-direction:column;align-items:center;
    pointer-events:none;
}
.hdr>*{pointer-events:auto}

/* Logo — glass badge, top-left */
.hdr__brand{
    position:absolute;top:14px;left:32px;
    background:rgba(240,238,233,.12);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(240,238,233,.1);
    padding:10px 24px;border-radius:12px;
    box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.hdr__logo{display:flex;align-items:center;gap:10px}
.hdr__logo-img{height:48px;width:auto}
.hdr__logo-text{
    font-family:var(--font-h);font-size:12px;font-weight:800;
    color:var(--white);letter-spacing:.5px;text-transform:uppercase;line-height:1.15;
}

/* CTA — glass badge, top-right */
.hdr__cta{
    position:absolute;top:14px;right:32px;
    padding:10px 24px;font-size:13px;font-weight:700;
    min-height:auto;border-radius:12px;z-index:1;
}

/* Nav — centered above bar */
.hdr__nav{display:flex;gap:8px;align-items:center;padding:20px 28px 14px}
.hdr__link{
    font-size:15px;font-weight:700;color:rgba(240,238,233,.4);
    padding:6px 14px;border-radius:8px;
    transition:color .25s,background .25s;white-space:nowrap;
    font-family:var(--font-h);letter-spacing:-.2px;
}
.hdr__link:hover{color:rgba(240,238,233,.8)}
.hdr__link.active{color:var(--gold);text-shadow:0 0 12px var(--gold-dim);background:rgba(212,168,67,.08);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Scroll bar */
.hdr__scroll{position:relative;width:min(620px,72vw);height:26px;display:flex;align-items:center;justify-content:center}
.hdr__track{
    width:100%;height:14px;background:var(--white);position:relative;
    clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
    box-shadow:0 4px 16px rgba(0,0,0,.1);
}
.hdr__bar{position:absolute;top:0;left:0;height:100%;width:0;background:linear-gradient(90deg,var(--gold),#E8C86A);transition:width .6s cubic-bezier(.22,1,.36,1)}
.hdr__car{
    position:absolute;top:50%;height:26px;width:auto;left:0;z-index:10;
    transform:translate(-50%,-50%);transition:left .6s cubic-bezier(.22,1,.36,1);
    filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* ===== HERO ===== */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero__canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}
.hero__fade{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to top,var(--bg),transparent);z-index:1}
.hero__grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1fr 1fr;gap:40px;
    align-items:center;
    padding-top:120px;padding-bottom:80px;
}
.hero__visual{display:flex;align-items:center;justify-content:center;overflow:visible;opacity:0;transform:translateX(40px)}
/* ===== TRUST TOKENS ===== */
.hero__tokens{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px;opacity:0;transform:translateY(15px)}
.token{
    position:relative;display:inline-flex;align-items:center;gap:8px;
    padding:10px 22px 10px 16px;font-size:13px;font-weight:600;letter-spacing:-.2px;
    color:var(--text-2);background:var(--surface-2);
    border:1px solid var(--gold-border);overflow:hidden;
    clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}
.token i{color:var(--gold);font-size:14px;width:16px;text-align:center}
.token--accent{background:rgba(212,168,67,.08);border-color:rgba(212,168,67,.22);color:var(--gold)}
.token__shine{
    position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(105deg,transparent 40%,rgba(240,238,233,.06) 50%,transparent 60%);
    animation:tShine 3s ease-in-out infinite;
}
@keyframes tShine{0%{transform:translateX(-200%)}100%{transform:translateX(200%)}}
.hero__title{
    font-size:clamp(40px,6vw,64px);font-weight:800;line-height:.98;
    letter-spacing:-2px;margin-bottom:24px;
}
.hero__title .line{display:block;overflow:hidden;padding:4px 0}
.hero__title .line-inner{display:block;transform:translateY(110%)}
.hero__title em{font-style:normal;background:linear-gradient(135deg,var(--gold),#E8C86A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero__ya-wrap{display:inline-block;position:relative;margin:0 3px;vertical-align:middle}
.hero__ya-wrap::after{content:'';position:absolute;inset:0;background:rgba(212,168,67,.1);border-radius:12%;pointer-events:none}
.hero__ya{display:block;height:.75em;width:auto;border-radius:12%;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3)) brightness(.7) saturate(.8)}
.hero__sub{
    font-size:clamp(16px,2vw,18px);color:var(--text-2);max-width:480px;
    line-height:1.55;margin-bottom:32px;opacity:0;transform:translateY(20px);
}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(20px)}

/* ===== ROUTE SCENE ===== */
.route-scene{
    position:relative;width:110%;margin-left:-5%;aspect-ratio:1/1.3;
    overflow:visible;
    background:transparent;
    border:none;box-shadow:none;
}
#routeCanvas{
    position:absolute;top:0;left:0;
    -webkit-mask-image:radial-gradient(ellipse 110% 105% at 40% 42%,#000 50%,transparent 76%);
    mask-image:radial-gradient(ellipse 110% 105% at 40% 42%,#000 50%,transparent 76%);
}
/* Route pins */
.route-pin{
    position:absolute;z-index:3;
    display:flex;flex-direction:column;align-items:center;
    transform:translate(-50%,-85%);
    opacity:0;pointer-events:none;
    transition:opacity .6s var(--spring),transform .6s var(--spring);
}
.route-pin.visible{opacity:1;pointer-events:auto}
/* Pin icon bubble */
.route-pin__icon{
    width:88px;height:88px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    transition:box-shadow .4s;
}
.route-pin--barrier .route-pin__icon{
    background:rgba(20,15,15,.7);
    border:1.5px solid rgba(184,84,80,.4);
    box-shadow:0 4px 20px rgba(184,84,80,.15),inset 0 0 20px rgba(184,84,80,.06);
}
.route-pin--dest .route-pin__icon{
    width:100px;height:100px;
    background:rgba(12,20,16,.75);
    border:1.5px solid rgba(58,143,106,.45);
    box-shadow:0 4px 24px rgba(58,143,106,.18),inset 0 0 24px rgba(58,143,106,.06);
}
.route-pin__icon img{
    width:70%;height:70%;object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.route-pin--barrier .route-pin__icon img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) brightness(1.1)}
.route-pin--dest .route-pin__icon img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) brightness(1.15)}
/* Tail (pin pointer) */
.route-pin__tail{
    width:2px;height:10px;
    border-radius:1px;
}
.route-pin--barrier .route-pin__tail{background:linear-gradient(180deg,rgba(184,84,80,.4),transparent)}
.route-pin--dest .route-pin__tail{background:linear-gradient(180deg,rgba(58,143,106,.5),transparent)}
/* Label */
.route-pin__label{
    margin-top:4px;padding:4px 10px;border-radius:6px;
    font-size:12px;font-weight:700;letter-spacing:.3px;
    white-space:nowrap;text-align:center;
    text-shadow:0 1px 4px rgba(0,0,0,.5);
    background:rgba(11,13,17,.7);
    border:1px solid rgba(240,238,233,.08);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.route-pin--barrier .route-pin__label{color:var(--text);border-color:rgba(184,84,80,.25)}
.route-pin--dest .route-pin__label{
    color:var(--text);font-size:13px;font-weight:700;
    border-color:rgba(58,143,106,.3);white-space:nowrap;line-height:1.35;
}
.route-pin--dest .route-pin__label em{
    font-style:normal;display:block;font-weight:800;
    color:var(--gold);font-size:14px;
}
/* Appear animation */
.route-pin.visible{
    transform:translate(-50%,-85%) scale(1);
    animation:pinDrop .6s var(--spring);
}
@keyframes pinDrop{
    0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}
    60%{transform:translate(-50%,-90%) scale(1.05)}
    100%{transform:translate(-50%,-85%) scale(1)}
}

/* ===== CTA SCAN ===== */
.btn-scan{position:relative;overflow:hidden}
.btn-scan i{font-size:13px}
.btn-scan::after{
    content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
    background:linear-gradient(90deg,transparent,rgba(212,168,67,.08),transparent);
    animation:btnScan 2.5s ease-in-out infinite;pointer-events:none;
}
@keyframes btnScan{0%{left:-100%}100%{left:200%}}

/* ===== BUTTONS ===== */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:16px 32px;font-family:var(--font-b);font-size:16px;font-weight:600;
    border:none;border-radius:12px;cursor:pointer;min-height:52px;
    transition:all .25s var(--ease);letter-spacing:-.2px;
}
.btn-gold{background:linear-gradient(135deg,var(--gold),#C49A38);color:var(--bg)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 32px var(--gold-glow)}
.btn-ghost{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--gold-border);color:var(--gold)}
.btn-lg{padding:18px 38px;font-size:16px}

/* ===== CASE STATUS PANELS ===== */
.cpanels{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);overflow:hidden}
.cpanel{
    background:var(--surface);padding:28px 24px;position:relative;
    display:flex;flex-direction:column;
    opacity:0;transform:translateY(24px);
    transition:opacity .6s var(--ease),transform .6s var(--ease),background .3s;
    background-image:radial-gradient(ellipse 200px 140px at var(--mx,50%) var(--my,50%),rgba(240,238,233,.03) 0%,transparent 70%);
}
.cpanel p{flex:1}
.cpanel.in-view{opacity:1;transform:translateY(0)}
.cpanel:hover{background:var(--surface-2)}

/* Top accent line — red→gold */
.cpanel::before{
    content:'';position:absolute;top:0;left:0;right:0;height:2px;
    background:var(--red);opacity:.35;
    transition:background .6s ease 1.2s,opacity .6s ease 1.2s;
}
.cpanel.in-view::before{background:var(--gold);opacity:.7}

/* Header: dot + status labels */
.cpanel__head{display:flex;align-items:center;gap:8px;margin-bottom:20px;height:20px;position:relative}
.cpanel__dot{
    width:7px;height:7px;border-radius:50%;background:var(--red);flex-shrink:0;
    transition:background .4s ease 1s,box-shadow .4s ease 1s;
}
.cpanel.in-view .cpanel__dot{background:var(--gold);box-shadow:0 0 8px var(--gold-dim)}
.cpanel__lbl{
    font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;
    transition:opacity .4s,transform .4s;
}
.cpanel__lbl--from{color:var(--red);opacity:.55}
.cpanel__lbl--to{
    color:var(--gold);position:absolute;left:15px;
    opacity:0;transform:translateX(8px);
}
.cpanel__lbl--to i{font-size:9px;margin-right:2px}
.cpanel.in-view .cpanel__lbl--from{opacity:0;transform:translateX(-8px);transition-delay:1.2s}
.cpanel.in-view .cpanel__lbl--to{opacity:1;transform:translateX(0);transition-delay:1.4s}

/* Icon crossfade */
.cpanel__ic{position:relative;width:44px;height:44px;margin-bottom:16px}
.cpanel__ic-a,.cpanel__ic-b{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    font-size:22px;transition:opacity .5s,transform .5s;
}
.cpanel__ic-a{color:var(--red);opacity:.45}
.cpanel__ic-b{color:var(--gold);opacity:0;transform:scale(.4) rotate(-15deg)}
.cpanel.in-view .cpanel__ic-a{opacity:0;transform:scale(1.4) rotate(10deg);transition-delay:1s}
.cpanel.in-view .cpanel__ic-b{opacity:1;transform:scale(1) rotate(0deg);transition-delay:1.2s}

/* Title + text */
.cpanel h3{font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-.3px}
.cpanel p{font-size:16px;color:var(--text-2);line-height:1.55}

/* Micro progress bar */
.cpanel__bar{
    height:3px;border-radius:2px;background:var(--surface-3);
    margin-top:20px;overflow:hidden;
}
.cpanel__bar-fill{
    height:100%;width:0;border-radius:2px;background:var(--gold);
    transition:width 3s cubic-bezier(.16,1,.3,1);transition-delay:1.6s;
}
.cpanel.in-view .cpanel__bar-fill{width:100%}

/* Per-case bar variations */
[data-case="alimony"].in-view .cpanel__bar-fill{background:var(--green);width:80%}
[data-case="bankrupt"].in-view .cpanel__bar-fill{width:90%}
[data-case="location"].in-view .cpanel__bar-fill{background:var(--green)}
[data-case="limit"] .cpanel__bar-fill{transition:none}
[data-case="limit"].in-view .cpanel__bar-fill{animation:limitBar 5.6s ease 1.6s forwards}
[data-case="priority"] .cpanel__bar-fill{transition:none}
[data-case="priority"].in-view .cpanel__bar-fill{animation:prioBar 4.4s ease 1.6s forwards}
@keyframes limitBar{
    0%{width:0;background:var(--red)}
    35%{width:100%;background:var(--red)}
    45%{width:100%;background:rgba(184,84,80,.2)}
    55%{width:0;background:var(--gold)}
    100%{width:65%;background:var(--gold)}
}
@keyframes prioBar{
    0%{width:18%;background:var(--red)}
    25%{width:18%;background:var(--red)}
    100%{width:95%;background:var(--gold)}
}

/* ===== COMPARE — comparison board ===== */
.cb{display:grid;grid-template-columns:1fr 2px 1fr;gap:0;align-items:stretch}

/* Center divider */
.cb__divider{background:linear-gradient(180deg,transparent,var(--gold-dim) 30%,var(--gold-dim) 70%,transparent);border-radius:1px}

/* Columns */
.cb__col{padding:32px 28px;display:flex;flex-direction:column}
.cb__col--left{border-radius:20px 0 0 20px;border-right:none}
.cb__col--right{border-radius:0 20px 20px 0;border-left:none;border-color:var(--gold-border)}
.cb__col .cb__row:last-child{flex:1;display:flex;flex-direction:column;justify-content:center}

/* Tags */
.cb__tag{
    font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
    margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.cb__col--left .cb__tag{color:var(--text-3)}
.cb__col--right .cb__tag{color:var(--gold)}
.cb__col--right .cb__tag i{font-size:14px}
.cb__sub{font-size:12px;color:var(--text-3);line-height:1.5;margin-bottom:0}

/* Rows */
.cb__row{padding:18px 0;border-top:1px solid var(--border)}
.cb__row:first-of-type{border-top:none;margin-top:20px}
.cb__label{
    display:block;font-size:11px;font-weight:700;letter-spacing:1.5px;
    text-transform:uppercase;margin-bottom:8px;
}
.cb__col--left .cb__label{color:var(--text-3);opacity:.5}
.cb__col--right .cb__label{color:var(--gold);opacity:.6}

/* Cell: icon + text */
.cb__cell{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5}
.cb__col--left .cb__cell{color:var(--text-3)}
.cb__col--right .cb__cell{color:var(--text)}
.cb__x{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--red);opacity:.5}
.cb__ok{width:16px;height:16px;flex-shrink:0;margin-top:3px;color:var(--green)}

/* Glass tweaks per column */
.cb__col--left{background:rgba(240,238,233,.015)}
.cb__col--left:hover{border-color:var(--border-h);transform:translateY(-1px)}
.cb__col--right{background:rgba(212,168,67,.02)}
.cb__col--right:hover{box-shadow:0 8px 40px rgba(212,168,67,.06),inset 0 1px 0 rgba(240,238,233,.05);transform:translateY(-2px)}

/* Footer tagline */
.cb__footer{
    text-align:center;margin-top:48px;
    font-size:clamp(17px,2.2vw,22px);font-weight:700;font-family:var(--font-h);
    letter-spacing:-.5px;line-height:1.3;
    background:linear-gradient(135deg,var(--text-2) 30%,var(--gold) 60%,var(--gold) 80%,var(--text-2));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    position:relative;padding:24px 0;
}
.cb__footer::before,.cb__footer::after{
    content:'';position:absolute;left:50%;height:1px;width:60px;
    background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
    transform:translateX(-50%);
}
.cb__footer::before{top:0}
.cb__footer::after{bottom:0}

/* ===== STATS ===== */
.stats{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats__in{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{text-align:center;padding:48px 24px;position:relative}
.stat+.stat::before{content:'';position:absolute;left:0;top:20%;height:60%;width:1px;background:var(--border)}
.stat__num{font-family:var(--font-h);font-size:clamp(38px,5vw,60px);font-weight:800;background:linear-gradient(135deg,var(--gold),#E8C86A);-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:6px}
.stat__label{font-size:14px;color:var(--text-2)}

/* ===== PROCESS — route spine ===== */
.tl{position:relative;max-width:700px}

/* Spine */
.tl__spine{position:absolute;left:35px;top:48px;bottom:48px;width:2px;z-index:0}
.tl__track{position:absolute;inset:0;background:var(--border);border-radius:1px}
.tl__fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--gold),rgba(212,168,67,.25));border-radius:1px}
.tl__marker{
    position:absolute;left:50%;top:0;width:14px;height:14px;
    transform:translate(-50%,-50%);border-radius:50%;
    background:var(--gold);z-index:2;
    box-shadow:0 0 14px var(--gold-dim),0 0 28px rgba(212,168,67,.12);
    animation:mPulse 2s ease-in-out infinite;
}
@keyframes mPulse{
    0%,100%{box-shadow:0 0 14px var(--gold-dim),0 0 28px rgba(212,168,67,.12)}
    50%{box-shadow:0 0 18px var(--gold-dim),0 0 36px rgba(212,168,67,.2)}
}

/* Step */
.tl__step{
    position:relative;z-index:1;
    display:grid;grid-template-columns:72px 1fr;gap:20px;
    align-items:start;padding:24px 0;
    opacity:.25;transform:translateX(10px);
    transition:opacity .6s var(--ease),transform .6s var(--ease);
}
.tl__step.is-active{opacity:1;transform:translateX(0)}

/* Node */
.tl__node{
    width:56px;height:56px;border-radius:50%;
    border:2px solid var(--border);background:var(--surface);
    display:flex;align-items:center;justify-content:center;
    justify-self:center;position:relative;z-index:1;
    transition:border-color .5s,box-shadow .5s,background .5s;
}
.tl__node::after{
    content:'';position:absolute;inset:-7px;border-radius:50%;
    border:1px solid transparent;
    transition:border-color .6s,box-shadow .6s;pointer-events:none;
}
.tl__step.is-active .tl__node{
    border-color:var(--gold);background:var(--bg);
    box-shadow:0 0 16px var(--gold-glow);
}
.tl__step.is-active .tl__node::after{
    border-color:rgba(212,168,67,.12);
    box-shadow:0 0 24px rgba(212,168,67,.06);
}

/* SVG icon */
.tl__svg{width:24px;height:24px;stroke:var(--text-3);stroke-width:1.5;transition:stroke .5s}
.tl__step.is-active .tl__svg{stroke:var(--gold)}
/* Draw-on animation */
.tl__svg [pathLength]{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s ease,stroke .5s}
.tl__svg [pathLength]:nth-child(2){transition-delay:.15s}
.tl__svg [pathLength]:nth-child(3){transition-delay:.3s}
.tl__svg [pathLength]:nth-child(4){transition-delay:.4s}
.tl__svg [pathLength]:nth-child(5){transition-delay:.5s}
.tl__step.is-active .tl__svg [pathLength]{stroke-dashoffset:0}

/* Body */
.tl__num{
    display:block;font-family:var(--font-h);font-size:11px;font-weight:700;
    color:var(--gold);letter-spacing:2px;opacity:.3;margin-bottom:6px;
    transition:opacity .5s;
}
.tl__step.is-active .tl__num{opacity:.8}
.tl__step h4{font-size:20px;font-weight:700;margin-bottom:8px;letter-spacing:-.3px}
.tl__step p{font-size:16px;color:var(--text-2);line-height:1.6;max-width:520px}

/* ===== BENEFITS — two-tone cards ===== */
.bens{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);border:1px solid var(--border);overflow:hidden}
.ben{padding:40px 36px;background:var(--bg);position:relative;transition:all .3s var(--ease);display:flex;gap:20px;align-items:flex-start}
.ben:hover{background:var(--surface)}
/* first item full width */
.ben:first-child{grid-column:1/-1}
/* gold variant — every even card */
.ben--gold{background:var(--surface)}
.ben--gold:hover{background:var(--surface-2)}
.ben--gold .ben__ic{background:var(--gold);border-color:var(--gold)}
.ben--gold .ben__ic i{color:var(--bg)}
.ben__ic{
    width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
    border:1px solid var(--gold-border);background:var(--gold-subtle);
    clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.ben__ic i{font-size:20px;color:var(--gold)}
.ben h3{font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-.3px}
.ben:first-child h3{font-size:24px}
.ben p{font-size:16px;color:var(--text-2);line-height:1.6}
.ben:first-child p{font-size:17px;max-width:560px}

/* ===== CASE STUDIES — editorial layout ===== */

/* Intro panel */
.cs-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:32px}
.cs-intro__accent{
    max-width:360px;text-align:right;
    font-family:var(--font-h);font-size:clamp(16px,2vw,20px);font-weight:700;
    line-height:1.3;letter-spacing:-.3px;
    background:linear-gradient(135deg,var(--text-2),var(--gold));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Trust ribbon — marquee */
.cs-ribbon{overflow:hidden;margin-bottom:36px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.cs-ribbon__track{display:flex;gap:24px;width:max-content;animation:csMarquee 40s linear infinite}
.cs-chip{
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
    font-size:13px;font-weight:600;color:var(--gold);letter-spacing:.2px;
}
.cs-chip i{font-size:12px;opacity:.5}
@keyframes csMarquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* Card grid — equal 2×2 */
.cs-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Base card — glass with specular */
.cs-card{
    position:relative;overflow:hidden;
    background:rgba(240,238,233,.02);border:1px solid var(--border);border-radius:20px;
    padding:42px 24px 28px;display:flex;flex-direction:column;gap:14px;
    box-shadow:0 2px 16px rgba(0,0,0,.2),inset 0 1px 0 rgba(240,238,233,.03);
    transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .4s var(--ease);
}
/* Iridescent border on hover */
.cs-card::before{
    content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1px;
    background:conic-gradient(from var(--ba,180deg),transparent 20%,rgba(212,168,67,.35),rgba(240,238,233,.1),rgba(212,168,67,.25),transparent 80%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .5s;pointer-events:none;z-index:1;
}
.cs-card:hover::before{opacity:1}
/* Specular highlight */
.cs-card::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    background:radial-gradient(ellipse 280px 180px at var(--mx,50%) var(--my,50%),rgba(240,238,233,.05) 0%,transparent 70%);
    pointer-events:none;z-index:2;
}
.cs-card:hover{border-color:var(--border-h);box-shadow:0 8px 40px rgba(0,0,0,.35),inset 0 1px 0 rgba(240,238,233,.05);transform:translateY(-2px)}

/* Gold quote bar */
.cs-card__bar{position:absolute;top:24px;left:0;width:3px;height:28px;background:var(--gold);border-radius:0 2px 2px 0;opacity:.3}
/* Avatar — warm white circle, overflows above card */
.cs-card{overflow:visible}
.cs-card__avatar{
    position:absolute;top:-28px;left:24px;z-index:10;
    width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--white);
    box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.cs-card__avatar i{font-size:22px;color:var(--bg)}

/* Head: badge + status */
.cs-card__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;position:relative;z-index:1}
.cs-card__badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text-2)}
.cs-card__badge i{color:var(--gold);font-size:13px}
.cs-card__status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green)}
.cs-card__status i{font-size:10px}

/* Quote — messenger bubble */
.cs-card__quote{
    font-size:16px;color:var(--bg);line-height:1.6;font-weight:500;
    border:none;margin:0;font-style:normal;
    background:var(--white);border-radius:14px 14px 14px 4px;
    padding:14px 18px;position:relative;z-index:1;
}
.cs-card__quote::after{
    content:'';position:absolute;bottom:0;left:10px;
    width:10px;height:10px;background:var(--white);
    clip-path:polygon(0 0,100% 0,0 100%);
    transform:translateY(50%);
}

/* Status transition */
.cs-card__trans{
    display:flex;align-items:center;gap:10px;
    padding:10px 14px;border-radius:10px;
    background:var(--surface-2);border:1px solid var(--border);
    position:relative;z-index:1;
}
.cs-card__state{font-size:13px;font-weight:600;flex:1}
.cs-card__state--from{color:var(--red);opacity:.7}
.cs-card__state--to{color:var(--green);text-align:right}
.cs-card__arrow{color:var(--gold);font-size:11px;opacity:.4;flex-shrink:0}

/* Case facts — 3 columns */
.cs-card__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;position:relative;z-index:1}
.cs-fact{display:flex;flex-direction:column;gap:2px}
.cs-fact__label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-3);opacity:.5}
.cs-fact__val{font-size:14px;font-weight:600;color:var(--text)}
/* Source */
.cs-card__src{
    display:flex;align-items:center;gap:6px;
    font-size:12px;color:var(--text-3);opacity:.4;margin-top:auto;
    position:relative;z-index:1;
}
.cs-card__src i{font-size:10px;color:var(--gold);opacity:.5}

/* Footer */
.cs-footer{text-align:center;font-size:13px;color:var(--text-3);margin-top:36px}

/* ===== FAQ — knowledge panel ===== */
.faq-grid{display:grid;grid-template-columns:minmax(420px,560px) minmax(360px,460px);gap:40px;align-items:start}

/* Left: question list */
.faq-list{display:flex;flex-direction:column;gap:4px}
.faq-item{
    display:flex;align-items:center;gap:14px;
    padding:16px 20px;border-radius:12px;
    background:transparent;border:1px solid transparent;
    cursor:pointer;text-align:left;width:100%;
    font-family:var(--font-h);
    transition:background .25s,border-color .25s;
    color:var(--text);
}
.faq-item:hover{background:var(--surface-2);border-color:var(--border)}
.faq-item.is-active{background:var(--surface-2);border-color:var(--gold-border)}
.faq-item__ic{font-size:18px;color:var(--gold);opacity:.3;flex-shrink:0;width:22px;text-align:center;transition:opacity .25s}
.faq-item.is-active .faq-item__ic{opacity:.8}
.faq-item__text{flex:1;font-size:16px;font-weight:600;line-height:1.35;letter-spacing:-.2px}
.faq-item__arr{font-size:11px;color:var(--text-3);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s,color .25s}
.faq-item:hover .faq-item__arr{opacity:.5;transform:translateX(0)}
.faq-item.is-active .faq-item__arr{opacity:1;transform:translateX(0);color:var(--gold)}

/* Right: sticky answer panel */
.faq-panel{position:sticky;top:100px}
.faq-panel__card{
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    padding:32px 28px;position:relative;
    box-shadow:0 8px 32px rgba(0,0,0,.15);
}
/* Gold left accent */
.faq-panel__card::before{
    content:'';position:absolute;top:20px;bottom:20px;left:0;width:2px;
    background:var(--gold);border-radius:1px;
}
.faq-panel__head{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.faq-panel__dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold-dim);animation:mPulse 2s ease-in-out infinite}
.faq-panel__tag{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.faq-panel__q{font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.3px;margin-bottom:16px}
.faq-panel__a{font-size:16px;color:var(--text-2);line-height:1.65;margin-bottom:16px}
.faq-panel__ok{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gold);
}
.faq-panel__ok i{font-size:11px}

/* Close button — hidden on desktop */
.faq-panel__close{display:none}

/* Content transition */
.faq-panel__card.is-switching .faq-panel__q,
.faq-panel__card.is-switching .faq-panel__a,
.faq-panel__card.is-switching .faq-panel__ok{opacity:0;transform:translateY(6px)}
.faq-panel__q,.faq-panel__a,.faq-panel__ok{transition:opacity .25s,transform .25s}

/* Mobile: popup overlay */
@media(max-width:1024px){
    .faq-grid{grid-template-columns:1fr;gap:0}

    /* Panel becomes a centered fullscreen popup */
    .faq-panel{
        position:fixed;inset:0;z-index:300;
        display:flex;align-items:center;justify-content:center;
        padding:20px;
        background:rgba(0,0,0,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
        opacity:0;pointer-events:none;
        transition:opacity .3s ease;
    }
    .faq-panel.is-open{opacity:1;pointer-events:auto}
    .faq-panel__card{
        max-width:440px;width:100%;
        transform:translateY(16px) scale(.97);
        transition:transform .3s var(--ease);
    }
    .faq-panel.is-open .faq-panel__card{transform:none}

    /* Close button */
    .faq-panel__close{
        display:flex;position:absolute;top:12px;right:12px;
        width:36px;height:36px;border-radius:10px;
        background:var(--surface-3);border:none;color:var(--text-3);
        align-items:center;justify-content:center;font-size:14px;
        cursor:pointer;z-index:1;
    }
    .faq-panel__close:hover{background:rgba(240,238,233,.08)}
}

/* ===== FINAL CTA ===== */
.final{position:relative;overflow:hidden;border-top:1px solid var(--border)}

/* 3D scene background */
.final__scene{position:absolute;inset:0;z-index:0}
#finalCanvas{
    position:absolute;inset:0;
    -webkit-mask-image:radial-gradient(ellipse 90% 80% at 35% 50%,#000 30%,transparent 70%);
    mask-image:radial-gradient(ellipse 90% 80% at 35% 50%,#000 30%,transparent 70%);
}

.final__in{position:relative;z-index:3;display:grid;grid-template-columns:1fr 460px;gap:48px;align-items:center;padding-top:80px;padding-bottom:80px}
.final__left{max-width:480px}
.final__note{font-size:17px;color:var(--text-2);line-height:1.6;max-width:440px}

/* ===== FORM — dashboard card ===== */
.fcard{
    padding:32px 28px;cursor:default;position:relative;overflow:hidden;
    background:rgba(11,13,17,.4);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(24px);
    border:1px solid var(--border);border-radius:16px;
    box-shadow:0 12px 48px rgba(0,0,0,.3);
    background-image:radial-gradient(ellipse 280px 180px at var(--mx,50%) var(--my,50%),rgba(240,238,233,.04) 0%,transparent 70%);
    transition:border-color .4s,box-shadow .4s;
}
.fcard:hover{border-color:var(--border-h)}
.fcard::after{
    content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
    opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fcard__head{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.fcard__dot{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold-dim);animation:mPulse 2s ease-in-out infinite}
.fcard__status{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
.fcard h3{font-size:24px;font-weight:700;margin-bottom:6px}
.fcard__sub{font-size:16px;color:var(--text-3);margin-bottom:22px}
.f{margin-bottom:14px}
.f label{display:block;font-size:14px;font-weight:500;margin-bottom:6px;color:var(--text-3)}
.f input,.f select,.f textarea{
    width:100%;padding:14px 18px;background:var(--surface-2);border:1px solid var(--border);
    border-radius:12px;color:var(--text);font-family:var(--font-b);font-size:16px;
    outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;resize:vertical;
}
.f input,.f select{height:50px}
.f textarea{min-height:72px}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--gold-dim);box-shadow:0 0 0 3px var(--gold-glow)}
.f input::placeholder,.f textarea::placeholder{color:var(--text-3)}
.f select{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23636978' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
.f select option{background:var(--surface-2)}
.f-consent{font-size:13px;color:var(--text-3);margin-top:10px;line-height:1.5}
.f-consent a{text-decoration:underline;color:var(--text-2)}
.f-micro{display:flex;gap:16px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.f-micro span{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:var(--text-3);white-space:nowrap}
.f-micro i{font-size:12px;color:var(--gold);opacity:.5}
.f-btn{width:100%;margin-top:8px}
.f-ok{text-align:center;padding:36px;background:var(--green-bg);border:1px solid var(--green-border);border-radius:16px}
.f-ok h4{font-size:22px;color:var(--green);margin-bottom:8px}
.f-ok p{font-size:15px;color:var(--text-2)}
.f-err{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);padding:12px 16px;border-radius:12px;margin-bottom:14px;font-size:14px}

/* ===== FAB ===== */
.fab{
    position:fixed;bottom:24px;right:24px;z-index:90;
    width:52px;height:52px;border-radius:14px;
    background:linear-gradient(135deg,var(--gold),#C49A38);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 20px var(--gold-glow);cursor:pointer;border:none;
    opacity:0;transform:translateY(20px);pointer-events:none;
    transition:opacity .3s,transform .3s var(--ease);
}
.fab.show{opacity:1;transform:translateY(0);pointer-events:auto}
.fab:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(212,168,67,.3)}
.fab svg{width:22px;height:22px;color:var(--bg)}

/* ===== FLOAT CTA ===== */
.float-cta{display:none;position:fixed;bottom:16px;left:16px;right:80px;z-index:89}
.float-cta .btn{width:100%;box-shadow:0 4px 20px rgba(212,168,67,.15)}

/* ===== FOOTER ===== */
.footer{border-top:1px solid var(--border);padding:36px 0}
.footer__in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer__logo{display:flex;align-items:center;gap:12px}
.footer__logo-img{height:40px;width:auto}
.footer__logo-text{
    font-family:var(--font-h);font-size:13px;font-weight:800;
    color:var(--white);letter-spacing:.5px;text-transform:uppercase;line-height:1.15;
}
.footer__links{display:flex;gap:20px}
.footer__links a{color:var(--text-3);font-size:14px;transition:color .2s}
.footer__links a:hover{color:var(--text)}
.footer__copy{color:var(--text-3);font-size:13px}

/* ===== POPUP ===== */
.popup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.popup.is-open{display:flex}
.popup__box{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:40px 36px;max-width:420px;width:100%;position:relative;animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.popup__x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;background:var(--surface-3);border:none;color:var(--text-3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px}
.popup__x:hover{background:rgba(240,238,233,.08)}
.popup__title{font-size:20px;font-family:var(--font-h);margin-bottom:6px}
.popup__desc{font-size:14px;color:var(--text-3);margin-bottom:20px}
.popup__btn{width:100%}

/* ===== HERO SUBTITLE ===== */
.hero__title-sub{font-size:.48em;font-weight:600;color:var(--text-2);letter-spacing:0;margin-top:8px}

/* ===== RESPONSIVE ===== */

/* --- Tablet landscape / small desktop --- */
@media(max-width:1024px){
    /* --- Header mobile: sticky, two rows --- */
    .hdr{
        position:sticky;flex-direction:row;flex-wrap:wrap;
        align-items:center;padding:12px 16px 10px;gap:0;
        background:rgba(11,13,17,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
        border-bottom:1px solid var(--border);pointer-events:auto;
    }
    .hdr__nav{display:none}

    /* Logo — inline, no glass */
    .hdr__brand{
        position:static;background:none;border:none;padding:0;
        border-radius:0;box-shadow:none;
        backdrop-filter:none;-webkit-backdrop-filter:none;flex-shrink:0;
    }
    .hdr__logo-img{height:52px}
    .hdr__logo-text{font-size:13px}

    /* CTA — right side */
    .hdr__cta{
        position:static;display:inline-flex;margin-left:auto;
        padding:10px 20px;font-size:13px;font-weight:700;
        min-height:auto;border-radius:10px;
    }

    /* Scroll bar — full width, second row */
    .hdr__scroll{width:100%;height:18px;margin-top:10px;order:10}
    .hdr__track{height:10px}
    .hdr__car{height:18px}

    /* Compact: slide entire header up, only scroll bar peeks out */
    .hdr{--scroll-h:32px;transition:transform .3s ease}
    .hdr.is-compact{transform:translateY(calc(-100% + var(--scroll-h)))}

    /* Hero */
    .hero__grid{grid-template-columns:1fr;gap:32px}
    .hero__visual{max-width:480px}
    .route-scene{aspect-ratio:1.2/1}

    /* Sections */
    .cpanels{grid-template-columns:1fr 1fr}
    .cb{grid-template-columns:1fr 2px 1fr}
    .bens{grid-template-columns:1fr 1fr}
    .cs-grid{grid-template-columns:1fr 1fr}
    .stats__in{grid-template-columns:repeat(2,1fr)}
    .stat+.stat::before{display:none}

    /* FAQ — single column, popup handled above */
    .faq-grid{grid-template-columns:1fr;gap:24px}

    /* Final CTA */
    .final__in{grid-template-columns:1fr;gap:40px}
    .fcard{max-width:520px}
}

/* --- Tablet portrait / large phone --- */
@media(max-width:768px){
    .w{padding:0 20px}
    .sec{padding:56px 0}
    .sec-title{font-size:clamp(24px,5vw,36px)}
    .sec-desc{font-size:16px}

    /* Header */
    .hdr{padding:10px 16px 8px;--scroll-h:28px}
    .hdr__logo-img{height:46px}
    .hdr__logo-text{font-size:12px}
    .hdr__cta{padding:12px 22px;font-size:14px}
    .hdr__track{height:8px}
    .hdr__car{height:16px}

    /* Hero — header now in flow */
    .hero{min-height:auto;overflow-x:clip;overflow-y:visible}
    .hero__grid{padding-top:32px;padding-bottom:24px}
    .hero__content{padding:0}
    .hero__title{font-size:clamp(32px,8vw,52px);letter-spacing:-1px;margin-bottom:18px}
    .hero__title .line{overflow:visible}
    .hero__title .line-inner{transform:none!important}
    .hero__sub{font-size:16px;margin-bottom:24px;padding-right:8px;opacity:1!important;transform:none!important}
    .hero__cta{opacity:1!important;transform:none!important}
    .hero__tokens{opacity:1!important;transform:none!important}
    .hero__visual{opacity:1!important;transform:none!important}
    .hero__ya{height:.7em}
    .hero__cta .btn{padding:14px 28px;font-size:14px}
    .hero__tokens{gap:8px;margin-bottom:20px;margin-top:16px}
    .token{padding:7px 14px 7px 12px;font-size:11px}
    .token i{font-size:12px}

    /* Route scene — fill visible area, bigger pins */
    .hero__visual{max-width:100%;width:100vw;margin-left:calc(-50vw + 50%)}
    .route-scene{aspect-ratio:auto;height:70vh;max-width:none;margin:0}
    .route-pin__icon{width:68px;height:68px}
    .route-pin--dest .route-pin__icon{width:76px;height:76px}
    .route-pin__label{font-size:11px}
    .route-pin__tail{height:6px}

    /* Case panels */
    .cpanels{grid-template-columns:1fr 1fr}
    .cpanel{padding:22px 18px}
    .cpanel__ic{width:32px;height:32px;margin-bottom:10px}
    .cpanel__ic-a,.cpanel__ic-b{font-size:16px}
    .cpanel h3{font-size:16px}
    .cpanel p{font-size:14px}

    /* Compare */
    .cb{grid-template-columns:1fr}
    .cb__divider{display:none}
    .cb__col{padding:24px 20px;border-radius:16px!important;border:1px solid var(--border)!important}
    .cb__col--left{margin-bottom:8px}
    .cb__cell{font-size:16px}
    .cb__footer{font-size:16px;margin-top:32px}

    /* Stats */
    .stats__in{grid-template-columns:1fr 1fr}
    .stat{padding:32px 16px}
    .stat__num{font-size:clamp(32px,5vw,48px)}

    /* Timeline */
    .tl__step{grid-template-columns:56px 1fr;gap:16px}
    .tl__node{width:44px;height:44px}
    .tl__svg{width:20px;height:20px}
    .tl__spine{left:28px}
    .tl__step h4{font-size:18px}
    .tl__step p{font-size:16px}

    /* Benefits */
    .bens{grid-template-columns:1fr}
    .ben{padding:28px 24px}

    /* Reviews */
    .cs-intro{flex-direction:column;align-items:flex-start;gap:16px}
    .cs-intro__accent{text-align:left;max-width:none}
    .cs-grid{grid-template-columns:1fr}
    .cs-card{padding:28px 20px}
    .cs-card__facts{grid-template-columns:repeat(3,1fr);gap:6px}
    .cs-card__trans{flex-wrap:wrap;gap:6px}

    /* FAQ */
    .faq-item{padding:14px 16px;gap:12px}
    .faq-item{min-height:48px}
    .faq-item__text{font-size:16px}
    .faq-item__ic{font-size:16px}
    .faq-panel__q{font-size:18px}
    .faq-panel__a{font-size:16px}

    /* Final CTA */
    .final__in{padding-top:56px;padding-bottom:56px}
    .final__left .sec-title{font-size:clamp(24px,5vw,36px)}
    .final__note{font-size:16px}
    .fcard{padding:24px 20px}
    .fcard h3{font-size:20px}

    /* Footer */
    .footer__in{flex-direction:column;align-items:flex-start;gap:12px}
    .footer__logo-img{height:32px}

    /* Float CTA hidden — CTA is in header now. FAB stays */
    .float-cta{display:none}
    .fab{bottom:16px;right:16px;width:48px;height:48px;border-radius:12px}
}

/* --- Phone --- */
@media(max-width:480px){
    .w{padding:0 16px}
    .sec{padding:44px 0}

    /* Hero */
    .hero__grid{padding-top:28px;padding-bottom:16px}
    .hero__title{font-size:clamp(26px,8vw,38px);margin-bottom:14px}
    .hero__ya{height:.6em}
    .hero__cta{flex-direction:column;gap:10px}
    .hero__cta .btn{width:100%;text-align:center;padding:14px 20px}
    .hero__tokens{gap:6px;margin-bottom:16px;margin-top:14px}
    .token{padding:6px 14px 6px 10px;font-size:10px}
    .token i{font-size:11px}

    /* Route scene — fill screen, readable pins */
    .hero__visual{max-width:100%;width:100vw;margin-left:calc(-50vw + 50%)}
    .route-scene{height:75vh;max-width:none;margin:0}
    .route-pin__icon{width:56px;height:56px}
    .route-pin--dest .route-pin__icon{width:64px;height:64px}
    .route-pin__label{font-size:10px}
    .route-pin__tail{height:4px}

    /* Header */
    .hdr{padding:8px 12px 6px;--scroll-h:24px}
    .hdr__logo-img{height:40px}
    .hdr__logo-text{font-size:11px}
    .hdr__cta{padding:10px 20px;font-size:13px}
    .hdr__track{height:6px}
    .hdr__car{height:14px}

    /* Cases — single column */
    .cpanels{grid-template-columns:1fr}
    .cpanel{padding:20px 16px}
    .cpanel h3{font-size:16px}
    .cpanel p{font-size:14px}

    /* Compare */
    .cb__col{padding:20px 16px}
    .cb__tag{font-size:11px;letter-spacing:2px}
    .cb__cell{font-size:14px}
    .cb__label{font-size:11px}

    /* Stats — single column */
    .stats__in{grid-template-columns:1fr}
    .stat{padding:24px 16px}

    /* Timeline */
    .tl__step{grid-template-columns:48px 1fr;gap:12px;padding:16px 0}
    .tl__node{width:36px;height:36px}
    .tl__svg{width:16px;height:16px}
    .tl__spine{left:23px;top:32px;bottom:32px}
    .tl__marker{width:10px;height:10px}
    .tl__step h4{font-size:16px}
    .tl__step p{font-size:14px}
    .tl__num{font-size:11px}

    /* Benefits */
    .ben{padding:24px 18px;gap:14px}
    .ben__ic{width:40px;height:40px}
    .ben h3{font-size:16px}
    .ben:first-child h3{font-size:18px}
    .ben p{font-size:14px}
    .ben:first-child p{font-size:16px}

    /* Reviews */
    .cs-card__quote{font-size:14px}
    .cs-card__head{flex-direction:column;align-items:flex-start;gap:6px}
    .cs-fact__val{font-size:13px}
    .cs-card__facts{gap:4px}

    /* FAQ */
    .faq-item{padding:14px 16px;gap:10px;min-height:48px}
    .faq-item__text{font-size:14px}
    .faq-item__ic{font-size:14px;width:18px}
    .faq-panel__card{padding:24px 20px}
    .faq-panel__q{font-size:16px}
    .faq-panel__a{font-size:14px}

    /* Final CTA */
    .final__in{padding-top:44px;padding-bottom:44px;gap:28px}
    .fcard{padding:22px 18px}
    .fcard h3{font-size:18px}
    .f-micro{flex-direction:column;gap:8px}

    /* Footer */
    .footer{padding:28px 0}
    .footer__logo-img{height:28px}
    .footer__logo-text{font-size:11px}
    .footer__links{flex-direction:column;gap:8px}
    .footer__links a{font-size:14px}
    .footer__copy{font-size:12px}

    /* Popup */
    .popup__box{padding:28px 24px}

    /* Float CTA — full width with safe area */
    .float-cta{display:none}
}

/* --- Phone Modal --- */
.phone-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:1000;align-items:center;justify-content:center;padding:20px}
.phone-modal.is-open{display:flex}
.phone-modal__box{background:var(--surface-2);border:1px solid var(--border);border-radius:20px;padding:40px 36px;max-width:420px;width:100%;position:relative;animation:pop .4s var(--ease);text-align:center}
.phone-modal__number{font-family:var(--font-h);font-size:28px;font-weight:700;color:var(--gold);margin:20px 0 16px;letter-spacing:.5px;user-select:all}
.phone-modal__copy{margin:0 auto 20px;display:block;font-size:14px;padding:8px 20px}
.phone-modal__divider{display:flex;align-items:center;gap:12px;margin-bottom:20px;color:var(--text-3);font-size:13px}
.phone-modal__divider::before,.phone-modal__divider::after{content:'';flex:1;height:1px;background:var(--border-h)}
.phone-modal__messengers{display:flex;gap:16px;justify-content:center}
.phone-modal__msg{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--ease),box-shadow .2s}
.phone-modal__msg:hover{transform:translateY(-3px) scale(1.08);box-shadow:0 4px 16px rgba(0,0,0,.3)}
.phone-modal__msg--tg{background:#2AABEE;color:#fff}
.phone-modal__msg--wa{background:#25D366;color:#fff}
.phone-modal__msg i{font-size:24px}

/* --- Accessibility --- */
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}