:root{--ink:#000;--paper:#fff;--stone:#e8e8e6;--grey:#8a8a88;--line:rgba(255,255,255,.28);--lineD:rgba(0,0,0,.35);--pad:clamp(1.25rem,5vw,4.5rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:4.5rem}
body{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;background:var(--ink);color:var(--paper);font-size:1.0625rem;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid currentColor;outline-offset:4px}
.wrap{max-width:78rem;margin:0 auto;padding:0 var(--pad)}
section{padding:clamp(4rem,10vw,8rem) 0}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--stone);color:var(--ink)}
h1,h2,h3{font-weight:800;font-stretch:112%;line-height:1;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(2.3rem,5vw,5rem)}
h2{font-size:clamp(1.9rem,5vw,3.8rem);max-width:18ch}
p{max-width:60ch}
header{position:sticky;top:0;z-index:5;background:var(--ink);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:4.25rem}
header img{height:2.6rem;width:auto;display:block}
nav{display:flex;gap:1.75rem;align-items:center;font-size:.95rem}
nav a{text-decoration:none;opacity:.8}nav a:hover{opacity:1;text-decoration:underline;text-underline-offset:6px}
.btn{display:inline-block;padding:.95rem 1.6rem;font-weight:700;font-stretch:105%;text-decoration:none;border:2px solid currentColor;transition:background .15s,color .15s}
.btn.fill{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.fill:hover{background:var(--ink);color:var(--paper)}
.btn.line:hover{background:var(--paper);color:var(--ink)}
.light .btn.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero{padding:clamp(4.5rem,13vw,10rem) 0 clamp(4rem,9vw,7rem)}
.hero p{margin:2rem 0 2.5rem;font-size:1.2rem;color:#d0d0ce}
.cta{display:flex;flex-wrap:wrap;gap:1rem}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3.5rem;border-top:2px solid var(--ink)}
.fact{padding:1.5rem 1.25rem 0 0;border-right:1px solid var(--lineD);margin-right:1.25rem}
.fact:last-child{border:0;margin:0}
.fact b{display:block;font-size:clamp(3rem,7vw,5.5rem);font-weight:900;font-stretch:112%;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.fact span{display:block;margin-top:.6rem;font-weight:600}
.fact small{display:block;margin-top:.35rem;color:#4a4a48;font-size:.88rem;line-height:1.4}
.note{margin-top:2rem;color:#4a4a48;font-size:.95rem;max-width:64ch}
.dark .note{color:var(--grey)}
.group{margin-top:3.25rem}
.group>h3{font-size:1.3rem;color:var(--grey);font-weight:600;margin-bottom:.75rem}
.row{display:grid;grid-template-columns:1.1fr 2fr auto;gap:1.5rem;align-items:baseline;padding:1.6rem 0;border-top:1px solid var(--line)}
.row:last-child{border-bottom:1px solid var(--line)}
.row h4{font-size:1.5rem;font-weight:800;font-stretch:108%;letter-spacing:-.02em}
.row p{color:#c8c8c6}
.price{font-size:clamp(1.9rem,4vw,2.9rem);font-weight:900;font-stretch:112%;letter-spacing:-.03em;font-variant-numeric:tabular-nums;white-space:nowrap}
.price small{font-size:.9rem;font-weight:500;color:var(--grey);letter-spacing:0}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start;margin-top:3rem}
.kpi{list-style:none;margin-top:1.75rem;border-top:2px solid var(--ink)}
.kpi li{padding:.8rem 0;border-bottom:1px solid var(--lineD);font-weight:600}
.chart{background:var(--ink);color:var(--paper);padding:1.75rem 1.5rem 1.25rem}
.chart h3{font-size:1.15rem;font-stretch:105%;font-weight:700;letter-spacing:0}
.chart svg{width:100%;height:auto;display:block;margin-top:1.25rem;overflow:visible}
.bar{fill:var(--paper);transform-box:fill-box;transform-origin:bottom;transform:scaleY(1)}
.js .bar{transform:scaleY(0)}
.js .on .bar{transform:scaleY(1);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.on .bar:nth-of-type(2){transition-delay:.12s}.on .bar:nth-of-type(3){transition-delay:.24s}.on .bar:nth-of-type(4){transition-delay:.36s}.on .bar:nth-of-type(5){transition-delay:.48s}.on .bar:nth-of-type(6){transition-delay:.6s}
.chart text{fill:var(--paper);font-family:inherit;font-size:13px}
.chart .m{fill:var(--grey)}
.chart p{margin-top:1rem;font-size:.85rem;color:var(--grey)}
.steps{list-style:none;margin-top:3rem;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--paper)}
.steps li{padding:1.5rem 1.5rem 0 0}
.steps b{display:block;font-size:3.2rem;font-weight:900;font-stretch:112%;line-height:1;letter-spacing:-.04em}
.steps h3{font-size:1.35rem;margin:.8rem 0 .5rem;line-height:1.15}
.steps p{color:#c8c8c6;font-size:1rem}
.about{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,6vw,5rem);margin-top:0}
.about p+p{margin-top:1rem}
.contact h2{max-width:14ch}
.links{margin-top:2.5rem;border-top:1px solid var(--line)}
.links a{display:flex;justify-content:space-between;gap:1rem;padding:1.15rem 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:clamp(1.15rem,2.6vw,1.7rem);font-weight:700;font-stretch:108%}
.links a:hover{background:var(--paper);color:var(--ink);padding-left:1rem;padding-right:1rem}
.links a{transition:padding .15s}
footer{border-top:1px solid var(--line);padding:2.5rem 0 3rem;font-size:.88rem;color:var(--grey)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem;align-items:center}
footer img{height:3.2rem;width:auto}
footer p{max-width:46rem}
@media(max-width:860px){
 nav a:not(.btn){display:none}
 .facts{grid-template-columns:1fr 1fr}
 .fact{margin-right:0;padding-bottom:1.5rem;border-right:0;border-bottom:1px solid var(--lineD)}
 .split,.about,.steps{grid-template-columns:1fr}
 .row{grid-template-columns:1fr;gap:.5rem}
 .steps li{padding-bottom:1.5rem;border-bottom:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .bar{transform:scaleY(1)!important;transition:none!important}}

.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:1}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 4px);animation:scan 14s linear infinite}
.hgrid{display:grid;grid-template-columns:.95fr 1.25fr;align-items:center;gap:clamp(1rem,4vw,4rem)}
.ghost{position:relative;width:100%;pointer-events:none;animation:hum 3.1s steps(1) infinite}
.ghost img{display:block;width:100%;height:auto}
.ghost::before{content:"";position:absolute;inset:-30% -20%;background:radial-gradient(closest-side,rgba(255,255,255,.12),transparent);animation:ignite 3.2s steps(1) both}
.off{opacity:.14}
.lit{position:absolute;inset:0;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 10px rgba(255,255,255,.85)) drop-shadow(0 0 28px rgba(255,255,255,.5)) drop-shadow(0 0 64px rgba(255,255,255,.3));animation:ignite 3.2s steps(1) both}
.lz img{animation:buzzA 6s steps(1) 3.2s infinite}
.lr img{animation:buzzB 9s steps(1) 3.2s infinite}
@keyframes ignite{0%{opacity:0}5%{opacity:1}7%{opacity:0}12%{opacity:.8}14%{opacity:.05}20%{opacity:1}22%{opacity:.3}24%{opacity:1}30%{opacity:.6}32%,100%{opacity:1}}
@keyframes buzzA{0%{opacity:1}28%{opacity:.25}30%{opacity:1}31.5%{opacity:.5}33.5%{opacity:1}66%{opacity:.3}67.5%{opacity:1}}
@keyframes buzzB{0%{opacity:1}11%{opacity:.15}12.5%{opacity:1}13.5%{opacity:.3}15%{opacity:1}16%{opacity:.1}18%{opacity:1}52%{opacity:.4}53.5%{opacity:1}79%{opacity:.05}83%{opacity:1}84%{opacity:.2}85.5%{opacity:1}}
@keyframes hum{0%{opacity:1}22%{opacity:.9}25%{opacity:1}57%{opacity:.88}60%{opacity:1}83%{opacity:.92}86%{opacity:1}}
.hero h1,.hero p{text-shadow:0 0 28px #000,0 0 8px #000}
@keyframes scan{to{background-position:0 400px}}
@keyframes up{from{transform:translateY(105%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;animation:up .95s cubic-bezier(.2,.8,.2,1) both}
.ln:nth-child(2)>span{animation-delay:.14s}
.hero p,.hero .cta{animation:fade 1s .55s both}
@media(max-width:860px){.hgrid{grid-template-columns:1fr}.ghost{margin-top:1.5rem}}
@media(prefers-reduced-motion:reduce){.ghost,.ghost::before,.lit,.lit img,.hero::after,.ln>span,.hero p,.hero .cta{animation:none!important}}
#intro{position:fixed;inset:0;z-index:100;background:#000;display:none;overflow:hidden}
.intro-on #intro{display:block}
html.intro-on{overflow:hidden}
#intro canvas{position:absolute;left:50%;top:50%;width:min(78vw,880px);height:auto;transform:translate(-50%,-50%)}
#ic{filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px rgba(255,255,255,.45))}
#if{filter:blur(.6px) drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px #fff)}
#ic{will-change:transform}
#ig{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;will-change:transform,opacity}
.intro-hold .ln>span,.intro-hold .hero p,.intro-hold .hero .cta,.intro-hold .ghost,.intro-hold .ghost::before,.intro-hold .lit,.intro-hold .lit img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){#intro{display:none!important}}

.pg{padding:clamp(3.5rem,8vw,6rem) 0 clamp(2.5rem,5vw,4rem)}.pg h1{font-size:clamp(2rem,5vw,4.2rem);max-width:20ch}.lead{margin-top:1.5rem;font-size:1.2rem;color:#d0d0ce;max-width:60ch}
.light .lead{color:#333}.pad{padding:clamp(3rem,7vw,5.5rem) 0}.pad h2{margin-bottom:1.5rem}.pad p+p,.pad ul+p,.pad p+ul{margin-top:1rem}
.ul{list-style:none;margin-top:1.25rem;border-top:1px solid var(--line)}.ul li{padding:.8rem 0;border-bottom:1px solid var(--line)}.light .ul,.light .ul li{border-color:var(--lineD)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem}.card h3{font-size:1.2rem;margin:.9rem 0 .3rem;line-height:1.15}.card p{font-size:.95rem;color:#4a4a48}
.ph{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#d2d2d0 0 12px,#dcdcda 12px 24px);display:flex;align-items:center;justify-content:center;font-weight:700;color:#555}
.tag{display:inline-block;margin-top:.4rem;font-size:.8rem;font-weight:700;border:1px solid var(--lineD);padding:.1rem .5rem}
.band{border-top:1px solid var(--line);padding:clamp(3rem,7vw,5rem) 0}.band h2{margin-bottom:1.5rem}.faq h3{font-size:1.15rem;margin-top:1.5rem;line-height:1.2}
@media(max-width:860px){.cards{grid-template-columns:1fr}}.light .row p{color:#222}.light .row,.light .row:last-child{border-color:var(--lineD)}.light .price small{color:#555}
nav a.btn{opacity:1}nav a.btn:hover{text-decoration:none}