/* ═══════════════════════════════════════════════
   THE VOICE OF TRUST
   Agency-Grade Design · React · 2026
   ═══════════════════════════════════════════════ */

/* ── Design Tokens ───────────────────────────── */
:root {
    --c-bg:       #07070a;
    --c-surface:  #0e0e12;
    --c-card:     #16161c;
    --c-card-h:   #1c1c24;
    --c-line:     rgba(255,255,255,.06);
    --c-line-h:   rgba(255,255,255,.12);

    --c-text:     #f0f0f2;
    --c-text-2:   #9898a6;
    --c-text-3:   #58586a;

    --c-accent:   #4f8ff7;
    --c-accent-h: #3a7ae8;
    --c-accent-g: rgba(79,143,247,.10);
    --c-green:    #34d399;
    --c-violet:   #8b5cf6;

    --f-display: 'Instrument Serif', Georgia, serif;
    --f-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --w:        1280px;
    --gutter:   clamp(1.25rem, 4vw, 3rem);
    --radius:   16px;
    --radius-s: 10px;

    --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
    --s4: 2rem;   --s5: 3rem;   --s6: 4rem;
    --s7: 5rem;   --s8: 6rem;   --s9: 8rem;
    --s10:10rem;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-size-adjust:100%}
body{font-family:var(--f-body);font-size:clamp(.95rem,1vw + .4rem,1.075rem);line-height:1.7;color:var(--c-text);background:var(--c-bg);overflow-x:hidden}
img,picture,video,svg{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
ul,ol,dl{list-style:none}

.skip-link{position:absolute;left:-999rem;top:0;padding:.5rem 1rem;background:var(--c-accent);color:#fff;z-index:9999;border-radius:0 0 var(--radius-s) var(--radius-s)}
.skip-link:focus{left:50%;transform:translateX(-50%)}

.wrap{max-width:var(--w);margin-inline:auto;padding-inline:var(--gutter)}

h1,h2{font-family:var(--f-display);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--c-text)}
h1{font-size:clamp(2.5rem,6vw,5rem)}
h2{font-size:clamp(1.8rem,4vw,3.2rem)}
h3{font-family:var(--f-body);font-size:1.1rem;font-weight:600;line-height:1.35;letter-spacing:-.01em}
p{color:var(--c-text-2)}

.label{display:inline-block;padding:.3rem .85rem;margin-bottom:var(--s3);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.18em;color:var(--c-accent);background:var(--c-accent-g);border:1px solid rgba(79,143,247,.15);border-radius:100px}
.intro{max-width:660px;margin-inline:auto;margin-top:var(--s2);font-size:1.05rem;text-align:center;line-height:1.8}

.gradient-text{background:linear-gradient(135deg,var(--c-text) 40%,var(--c-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.9rem 2.2rem;font-size:.9rem;font-weight:600;letter-spacing:.01em;border-radius:100px;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}
.btn--primary{background:var(--c-accent);color:#fff;box-shadow:0 0 0 0 var(--c-accent-g)}
.btn--primary:hover,.btn--primary:focus-visible{background:var(--c-accent-h);transform:translateY(-2px);box-shadow:0 12px 40px rgba(79,143,247,.25)}
.btn--ghost{border:1px solid var(--c-line);color:var(--c-text)}
.btn--ghost:hover,.btn--ghost:focus-visible{border-color:var(--c-line-h);background:var(--c-card)}
.btn--lg{padding:1.15rem 3rem;font-size:1rem}
.btn--voice{background:linear-gradient(135deg,#4f8ff7,#8b5cf6);color:#fff;box-shadow:0 4px 24px rgba(79,143,247,.3)}
.btn--voice:hover,.btn--voice:focus-visible{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 40px rgba(79,143,247,.4)}

.sticky-bar{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:.6rem var(--gutter);background:rgba(7,7,10,.88);backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid var(--c-line);transform:translateY(-100%);opacity:0;transition:all .4s cubic-bezier(.4,0,.2,1)}
.sticky-bar.is-visible{transform:translateY(0);opacity:1}
.sticky-btn{padding:.5rem 1.4rem;font-size:.8rem;font-weight:600;color:#fff;background:var(--c-accent);border-radius:100px;transition:background .2s}
.sticky-btn:hover{background:var(--c-accent-h)}

.hero{min-height:100svh;display:flex;align-items:center;padding:var(--s8) 0 var(--s6);background:radial-gradient(ellipse 70% 50% at 20% 40%,rgba(79,143,247,.05),transparent 60%),radial-gradient(ellipse 50% 40% at 80% 60%,rgba(139,92,246,.04),transparent 50%),var(--c-bg)}
.hero__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center}
.hero__text{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.hero__text h1{margin-bottom:var(--s3)}
.hero__sub{font-size:clamp(1rem,1.3vw,1.2rem);margin-bottom:var(--s5);max-width:520px;line-height:1.8}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-bottom:var(--s2)}
.hero__micro{font-size:.78rem;color:var(--c-text-3);letter-spacing:.02em}
.hero__portrait{position:relative;justify-self:center}
.hero__portrait img{max-width:520px;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3;filter:brightness(.95) contrast(1.04);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05)}

@media(max-width:900px){
    .hero{min-height:auto;padding:var(--s7) 0 var(--s5)}
    .hero__grid{grid-template-columns:1fr;text-align:center;gap:var(--s4)}
    .hero__text{align-items:center}
    .hero__portrait{order:-1}
    .hero__portrait img{max-width:340px;margin-inline:auto}
    .hero__sub{margin-inline:auto}
    .hero__actions{justify-content:center}
}
@media(max-width:480px){
    .hero__portrait img{max-width:280px}
    .hero__actions{flex-direction:column;width:100%}
    .hero__actions .btn{width:100%;justify-content:center}
}

.voice-bar{width:100%;margin-bottom:var(--s6);padding:var(--s3) var(--s4);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.voice-bar__label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--c-accent);white-space:nowrap}
.voice-bar__btn{display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.5rem;font-size:.9rem;font-weight:600;color:#fff;background:linear-gradient(135deg,#4f8ff7,#8b5cf6);border:none;border-radius:100px;cursor:pointer;box-shadow:0 4px 20px rgba(79,143,247,.3);transition:all .3s cubic-bezier(.4,0,.2,1)}
.voice-bar__btn:hover{transform:scale(1.03);box-shadow:0 6px 28px rgba(79,143,247,.4)}
.voice-bar__btn .icon-circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(255,255,255,.2);border-radius:50%;transition:background .2s}
.voice-bar__btn.is-playing .icon-circle{background:rgba(255,255,255,.35)}
.voice-bar__hint{font-size:.8rem;color:var(--c-text-3);margin-left:auto}
@media(max-width:700px){
    .voice-bar{flex-direction:column;text-align:center;gap:var(--s2)}
    .voice-bar__hint{margin-left:0}
}

.how{padding:var(--s9) 0;background:var(--c-surface);text-align:center}
.how__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin:var(--s6) 0 var(--s5)}
.step{padding:var(--s5) var(--s3);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);text-align:center;transition:all .3s cubic-bezier(.4,0,.2,1)}
.step:hover{border-color:var(--c-line-h);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3)}
.step__n{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto var(--s3);font-size:.85rem;font-weight:700;color:var(--c-accent);background:var(--c-accent-g);border:1px solid rgba(79,143,247,.15);border-radius:50%}
.step__title{margin-bottom:var(--s1);font-size:1.05rem}
@media(max-width:700px){.how__grid{grid-template-columns:1fr;max-width:400px;margin-inline:auto}}

.tutorial{padding:var(--s9) 0;text-align:center}
.tutorial__steps{max-width:800px;margin:var(--s6) auto 0;display:flex;flex-direction:column;gap:var(--s3);text-align:left;counter-reset:tut-step}
.tut-step{display:grid;grid-template-columns:64px 1fr;gap:var(--s3);align-items:start;padding:var(--s4);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);transition:all .3s;counter-increment:tut-step}
.tut-step:hover{border-color:rgba(79,143,247,.2);box-shadow:0 8px 30px rgba(0,0,0,.2)}
.tut-step__num{display:flex;align-items:center;justify-content:center;width:56px;height:56px;font-family:var(--f-display);font-size:1.6rem;color:var(--c-accent);background:var(--c-accent-g);border:1px solid rgba(79,143,247,.15);border-radius:var(--radius-s)}
.tut-step__content h3{margin-bottom:.4rem;font-size:1.05rem;color:var(--c-text)}
.tut-step__content p{font-size:.95rem;line-height:1.75}
.tut-step__tip{display:inline-block;margin-top:.6rem;padding:.3rem .7rem;font-size:.72rem;font-weight:600;color:var(--c-green);background:rgba(52,211,153,.08);border:1px solid rgba(52,211,153,.15);border-radius:100px}
.tutorial__cta{margin-top:var(--s5);text-align:center}
@media(max-width:600px){
    .tut-step{grid-template-columns:1fr;gap:var(--s2)}
    .tut-step__num{width:44px;height:44px;font-size:1.2rem}
}

.cases{padding:var(--s9) 0;background:var(--c-surface);text-align:center}
.cases__list{margin-top:var(--s6);display:grid;gap:var(--s3);text-align:left}
.case{position:relative;padding:var(--s5);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius);transition:all .3s cubic-bezier(.4,0,.2,1)}
.case:hover{border-color:var(--c-line-h);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.25)}
.case__tag{position:absolute;top:var(--s2);right:var(--s2);padding:.3rem .75rem;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-3);background:var(--c-surface);border:1px solid var(--c-line);border-radius:100px}
.case h3{margin-bottom:var(--s1);padding-right:140px;font-size:1.1rem}
.case p{margin-bottom:var(--s3);max-width:680px}
@media(max-width:700px){.case__tag{position:static;margin-bottom:var(--s1);display:inline-block}.case h3{padding-right:0}}

.econ{padding:var(--s9) 0;text-align:center}
.table-wrap{margin:var(--s6) 0;border:1px solid var(--c-line);border-radius:var(--radius);overflow:hidden;text-align:left}
.table-head{display:grid;grid-template-columns:2.2fr 1.4fr 1fr .8fr;padding:var(--s2) var(--s3);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--c-text-3);background:var(--c-card)}
.table-row{display:grid;grid-template-columns:2.2fr 1.4fr 1fr .8fr;padding:var(--s2) var(--s3);border-top:1px solid var(--c-line);transition:background .2s}
.table-row:hover{background:var(--c-card)}
.cell--label{font-weight:500;color:var(--c-text)}
.cell--old{color:var(--c-text-3);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.15)}
.cell--new{color:var(--c-green);font-weight:600}
.cell--pct{color:var(--c-green);font-weight:700}
@media(max-width:700px){.table-head{display:none}.table-row{grid-template-columns:1fr 1fr;gap:var(--s1);padding:var(--s3)}.cell--label{grid-column:1/-1;font-size:1rem;margin-bottom:.3rem}}

.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin:var(--s6) 0;text-align:center}
.perk{padding:var(--s3);background:var(--c-card);border:1px solid var(--c-line);border-radius:var(--radius)}
.perk strong{display:block;font-size:.95rem;color:var(--c-text);margin-bottom:.3rem}
.perk span{font-size:.82rem;color:var(--c-text-2)}
.fine{font-size:.7rem;color:var(--c-text-3);font-style:italic}
@media(max-width:700px){.perks{grid-template-columns:1fr;gap:var(--s2)}}

.video-section{padding:var(--s9) 0;background:var(--c-surface);text-align:center}

.why{padding:var(--s9) 0;text-align:center}
.why__list{max-width:700px;margin:var(--s5) auto 0;text-align:left}
.why__list li{position:relative;padding:var(--s2) 0 var(--s2) var(--s5);font-size:1rem;color:var(--c-text-2);border-bottom:1px solid var(--c-line)}
.why__list li:last-child{border-bottom:0}
.why__list li::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--c-accent-g);border:1px solid rgba(79,143,247,.2);border-radius:50%}
.why__list li::after{content:'\u2713';position:absolute;left:6px;top:50%;transform:translateY(-50%);font-size:.7rem;font-weight:700;color:var(--c-accent)}

.faq{padding:var(--s9) 0;background:var(--c-surface);text-align:center}
.faq__list{max-width:760px;margin:var(--s5) auto 0;text-align:left}
.faq__item{border:1px solid var(--c-line);border-radius:var(--radius);margin-bottom:var(--s2);overflow:hidden;transition:all .3s}
.faq__item:hover{border-color:var(--c-line-h)}
.faq__item dt button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--s3) var(--s4);font-size:1rem;font-weight:500;text-align:left;background:var(--c-card);transition:background .2s}
.faq__item dt button:hover{background:var(--c-card-h)}
.faq__item dt button:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
.faq__icon{font-size:1.3rem;font-weight:300;color:var(--c-text-3);transition:transform .3s}
.faq__item.is-open .faq__icon{transform:rotate(45deg)}
.faq__item dd{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.faq__item.is-open dd{max-height:500px}
.faq__item dd p{padding:0 var(--s4) var(--s4);line-height:1.8}

.cta-final{padding:var(--s10) 0;text-align:center;background:radial-gradient(ellipse 60% 50% at 50% 50%,rgba(79,143,247,.06),transparent),var(--c-bg)}
.cta-final h2{margin-bottom:var(--s5)}
.cta-final__note{margin-top:var(--s4);font-size:.78rem;color:var(--c-text-3)}

.footer{padding:var(--s5) 0;border-top:1px solid var(--c-line)}
.footer__inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s2)}
.footer__nav{display:flex;gap:var(--s4)}
.footer__nav a{font-size:.82rem;color:var(--c-text-3);transition:color .2s}
.footer__nav a:hover{color:var(--c-text)}
.footer__copy{font-size:.72rem;color:var(--c-text-3)}

:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px;border-radius:4px}

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

@media print{.sticky-bar,.video-section,.btn,.voice-bar{display:none}body{color:#000;background:#fff}h1,h2,h3{color:#000}.gradient-text{-webkit-text-fill-color:#000}}