
:root{--navy:#101827;--blue:#38BDF8;--blue-d:#0b7aa8;--cloud:#F8FAFC;--slate:#64748B;--ink:#0f172a;--line:#e2e8f0;--card:#fff}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--cloud);padding-bottom:64px}
a{color:var(--blue-d)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.banner{background:#0b1220;color:#cbd5e1;font-size:14px;text-align:center;padding:8px 16px}.banner a{color:var(--blue)}
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:22px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo small{font-weight:500;font-size:12px;color:#94a3b8;letter-spacing:.04em;text-transform:uppercase;width:100%;margin-left:34px;margin-top:-6px}
.mark{width:24px;height:24px;border-radius:7px;background:var(--blue);display:inline-block;position:relative}
.mark:after{content:"";position:absolute;inset:6px;border:3px solid var(--navy);border-radius:50%;border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}
nav{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav a{color:#e2e8f0;text-decoration:none;padding:8px 12px;border-radius:8px;font-size:16px}
nav a:hover,nav a[aria-current]{background:#1e293b;color:#fff}
nav a.btn{color:var(--navy)}
.menu-btn{display:none;background:#1e293b;color:#fff;border:0;border-radius:8px;padding:10px 14px;font:inherit}
.btn{display:inline-block;background:var(--blue);color:var(--navy);font-weight:700;text-decoration:none;padding:14px 24px;border-radius:10px;border:2px solid var(--blue)}
.btn:hover{background:#7dd3fc;border-color:#7dd3fc}
.btn-sm{padding:8px 14px;font-size:15px;margin-left:6px}
.btn-ghost{background:transparent;color:#fff;border-color:#475569}.btn-ghost:hover{background:#1e293b;border-color:#64748b}
:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
.hero{background:linear-gradient(160deg,#101827 0%,#16233b 100%);color:#fff;padding:64px 0}
.hero-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,5vw,52px);line-height:1.1;margin:0 0 16px}
.lead{font-size:19px;color:#cbd5e1;max-width:60ch}
.eyebrow{color:var(--blue);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;margin:0 0 10px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 12px}
.note{font-size:14px;color:#94a3b8;max-width:60ch}
.hero-art svg{width:100%;height:auto}
.pagehead{background:var(--navy);color:#fff;padding:48px 0}
.pagehead h1{margin:0 0 10px;font-size:clamp(30px,4.5vw,44px);line-height:1.15}
.section{padding:56px 0}.alt{background:#fff;border-block:1px solid var(--line)}
h2{font-size:clamp(24px,3vw,32px);line-height:1.25;margin:0 0 20px}
h3{margin:0 0 8px;font-size:19px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:block;color:inherit;text-decoration:none}
a.card:hover{border-color:var(--blue);box-shadow:0 4px 18px rgba(16,24,39,.08)}
.card p{margin:0 0 12px;color:#334155}
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.ticks,.cross{list-style:none;padding:0}
.ticks li,.cross li{padding-left:28px;position:relative;margin-bottom:10px}
.ticks li:before{content:"\2713";position:absolute;left:0;color:#0b7aa8;font-weight:800}
.cross li:before{content:"\2715";position:absolute;left:0;color:#b91c1c;font-weight:800}
.prose{max-width:760px}.prose h2{margin-top:40px}.prose h2:first-child{margin-top:0}
.two.prose, .wrap.two{max-width:1080px}
.muted{color:var(--slate);font-size:15px}
.big{font-size:32px;font-weight:800;margin:0}
.callout{background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:16px}
.band{background:var(--navy);color:#fff;padding:56px 0}.band p{color:#cbd5e1;max-width:60ch;margin:0 auto 20px}.center{text-align:center}
.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:#fff;font-size:16px}
th,td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}th{background:#eef2f7}
details{background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin-bottom:10px}
summary{cursor:pointer;font-weight:600}
.site-footer{background:#0b1220;color:#cbd5e1;padding:48px 0 24px;font-size:15px}
.site-footer a{color:#cbd5e1;display:block;margin:4px 0}.site-footer a:hover{color:#fff}
.site-footer p a{display:inline}
.cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px}
.fine{margin-top:32px;font-size:13px;color:#94a3b8}
.call-bar{display:none}
@media(max-width:800px){
 .hero-grid,.two,.cols{grid-template-columns:1fr}.hero-art{display:none}
 .menu-btn{display:block}
 nav{display:none;width:100%;flex-direction:column;align-items:stretch;padding-bottom:12px}
 nav.open{display:flex}
 .btn-sm{margin:6px 0 0;text-align:center}
 .call-bar{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:30;background:var(--blue);color:var(--navy);text-align:center;font-weight:800;padding:14px;border-radius:12px;text-decoration:none;box-shadow:0 6px 20px rgba(0,0,0,.25)}
 body{padding-bottom:84px}
}
@media(min-width:801px){body{padding-bottom:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---- dynamic layer ---- */
:root{--glow:rgba(56,189,248,.35)}
.site-header{transition:box-shadow .3s,min-height .3s;backdrop-filter:saturate(1.4) blur(10px);background:rgba(16,24,39,.9)}
.site-header.scrolled{box-shadow:0 6px 24px rgba(2,6,23,.35)}
.site-header.scrolled .bar{min-height:56px}
.hero,.pagehead{position:relative;overflow:hidden;isolation:isolate}
.hero{padding:84px 0 72px}
.orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:-1;animation:drift 14s ease-in-out infinite}
.o1{width:380px;height:380px;background:#0ea5e9;top:-120px;right:-80px}
.o2{width:300px;height:300px;background:#6366f1;bottom:-140px;left:-60px;animation-delay:-5s;opacity:.4}
.o3{width:220px;height:220px;background:#22d3ee;top:40%;left:42%;animation-delay:-9s;opacity:.25}
.dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(148,163,184,.25) 1px,transparent 1px);background-size:26px 26px;mask-image:linear-gradient(180deg,#000,transparent 85%);-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-24px) scale(1.12)}}
.grad{background:linear-gradient(90deg,#38BDF8,#a5f3fc 50%,#818cf8);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% center}}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(56,189,248,.12);border:1px solid rgba(56,189,248,.35);padding:6px 14px;border-radius:99px}
.pill i{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 0 var(--glow);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.trust{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:8px 0 14px;color:#cbd5e1;font-size:15px}
.trust li{display:flex;align-items:center;gap:6px}
.ic{width:26px;height:26px;flex:none}.ic.sm{width:18px;height:18px}.ic.xl{width:56px;height:56px}
.btn{display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s,background .2s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 22px var(--glow)}
.btn.pulse{animation:btnpulse 2.4s infinite}
@keyframes btnpulse{0%{box-shadow:0 0 0 0 rgba(56,189,248,.55)}70%{box-shadow:0 0 0 16px rgba(56,189,248,0)}100%{box-shadow:0 0 0 0 rgba(56,189,248,0)}}
.btn-line{background:transparent;color:#fff;border-color:#475569}
/* hero scene */
.scene{position:relative;height:380px;display:grid;place-items:center}
.ring{position:absolute;border:2px solid rgba(56,189,248,.45);border-radius:50%;animation:rip 4.5s ease-out infinite;opacity:0}
.r1{width:120px;height:120px}.r2{width:120px;height:120px;animation-delay:1.5s}.r3{width:120px;height:120px;animation-delay:3s}
@keyframes rip{0%{transform:scale(.6);opacity:.9}100%{transform:scale(3.2);opacity:0}}
.device{position:relative;width:128px;height:128px;border-radius:30px;background:linear-gradient(145deg,#1e293b,#0f172a);border:2px solid #38BDF8;display:grid;place-items:center;color:#38BDF8;box-shadow:0 0 44px var(--glow);animation:bob 5s ease-in-out infinite}
.led{position:absolute;bottom:14px;width:7px;height:7px;border-radius:50%;background:#38BDF8;animation:blink 1.6s infinite}
.l1{left:38px}.l2{left:60px;animation-delay:.3s}.l3{left:82px;animation-delay:.6s}
@keyframes blink{50%{opacity:.25}}
@keyframes bob{50%{transform:translateY(-10px)}}
.chip{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(15,23,42,.85);color:#e2e8f0;border:1px solid rgba(56,189,248,.4);padding:10px 14px;border-radius:12px;font-size:14px;backdrop-filter:blur(6px);box-shadow:0 10px 30px rgba(2,6,23,.4);animation:float 6s ease-in-out infinite;white-space:nowrap}
.chip .ic{color:var(--blue)}
.c1{top:6%;left:0}.c2{top:20%;right:-4%;animation-delay:-1.5s}.c3{bottom:16%;left:-2%;animation-delay:-3s}.c4{bottom:4%;right:2%;animation-delay:-4.5s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* marquee */
.marquee{background:#0b1220;border-block:1px solid #1e293b;overflow:hidden;padding:14px 0}
.track{display:flex;gap:48px;width:max-content;animation:scroll 38s linear infinite}
.track span{color:#94a3b8;font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.track span:before{content:"\25C6";color:var(--blue);margin-right:48px;font-size:10px;vertical-align:middle}
@keyframes scroll{to{transform:translateX(-50%)}}
/* reveal */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .reveal.in{opacity:1;transform:none}
.eyebrow.dark{color:var(--blue-d)}
.sub{color:var(--slate);max-width:62ch;margin:-8px 0 28px}
.narrow{max-width:820px}
.icon-badge{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:linear-gradient(145deg,#e0f2fe,#f0f9ff);color:var(--blue-d);margin-bottom:14px;transition:transform .35s,background .35s,color .35s}
.card{transition:transform .3s,box-shadow .3s,border-color .3s}
.card.tilt:hover{transform:translateY(-6px);box-shadow:0 16px 40px rgba(14,116,144,.15);border-color:var(--blue)}
.card:hover .icon-badge{transform:rotate(-6deg) scale(1.08);background:var(--navy);color:var(--blue)}
.more{color:var(--blue-d);font-weight:600}
.mini{font-size:14px;color:var(--slate)}
/* timeline */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px;counter-reset:s;position:relative}
.timeline li{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}
.alt .timeline li{background:var(--cloud)}
.num{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--blue);font-weight:800;margin-bottom:12px;box-shadow:0 0 0 6px rgba(56,189,248,.15)}
.timeline.vertical{grid-template-columns:1fr;position:relative}
.timeline.vertical li{padding-left:84px;min-height:92px}
.timeline.vertical .num{position:absolute;left:24px;top:22px;margin:0}
.timeline.vertical:before{content:"";position:absolute;left:43px;top:30px;bottom:30px;width:2px;background:linear-gradient(var(--blue),transparent)}
/* tabs */
.tabbox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:0 10px 30px rgba(15,23,42,.05)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{font:inherit;font-weight:600;border:1px solid var(--line);background:var(--cloud);padding:10px 16px;border-radius:99px;cursor:pointer;transition:.2s}
.tabs button[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.panel{display:none}.panel.on{display:block;animation:fadeup .4s}
@keyframes fadeup{from{opacity:0;transform:translateY(10px)}}
.steps-list{padding-left:22px}.steps-list li{margin-bottom:8px}
.center-link{text-align:center;margin-top:20px}
.split-card{background:#fff;border-radius:16px;padding:28px;border:1px solid var(--line);height:100%}
.split-card h3{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.split-card.good{border-top:4px solid #0ea5e9}.split-card.bad{border-top:4px solid #f43f5e}
.cta-band,.band{position:relative;overflow:hidden;background:linear-gradient(120deg,#101827,#16314f,#101827);background-size:200% 200%;animation:bgmove 12s ease infinite}
@keyframes bgmove{50%{background-position:100% 50%}}
.band h2{color:#fff}
/* calculator */
.calc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:grid;gap:16px;box-shadow:0 10px 30px rgba(15,23,42,.06)}
.calc label{display:grid;gap:6px;font-weight:600;position:relative}
.calc output{position:absolute;right:0;top:0;color:var(--blue-d)}
.calc input[type=range]{width:100%;accent-color:#0ea5e9}
.calc .chk{display:flex;gap:10px;align-items:center;font-weight:500}
.result{background:var(--navy);color:#fff;border-radius:12px;padding:18px;text-align:center}
.result span{color:#94a3b8;font-size:14px;display:block}.result strong{font-size:38px;color:var(--blue);display:block;line-height:1.2}
.meter{height:8px;background:#1e293b;border-radius:99px;margin:10px 0;overflow:hidden}.meter i{display:block;height:100%;width:20%;background:linear-gradient(90deg,#38BDF8,#818cf8);border-radius:99px;transition:width .5s}
.result small{color:#94a3b8}
/* checklist */
.checklist{list-style:none;padding:0;margin:0 0 14px}
.checklist li{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;transition:.2s}
.checklist label{display:flex;gap:12px;padding:12px 14px;cursor:pointer;align-items:flex-start}
.checklist input{margin-top:6px;accent-color:#0ea5e9;width:18px;height:18px}
.checklist li.done{background:#ecfeff;border-color:#67e8f9}.checklist li.done span{text-decoration:line-through;color:var(--slate)}
.progress{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#38BDF8,#22c55e);transition:width .4s}
.floorplan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}
.sig{fill:rgba(56,189,248,.12);stroke:#38BDF8;stroke-dasharray:4 4;animation:sigp 3s ease-in-out infinite}.s2{animation-delay:.4s;fill:rgba(56,189,248,.07)}.s3{animation-delay:.8s;fill:rgba(56,189,248,.04)}
@keyframes sigp{50%{opacity:.35}}
.aboutcard{background:linear-gradient(150deg,#101827,#16314f);color:#fff;border-radius:18px;padding:36px;text-align:left}.aboutcard .ic{color:var(--blue)}.aboutcard p{color:#cbd5e1}
/* page head extra */
.pagehead{padding:64px 0 56px}.pagehead .wrap{position:relative}
.pagehead h1{animation:fadeup .7s}
/* legal */
.legal{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:start}
.toc{position:sticky;top:90px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;font-size:14px;max-height:calc(100vh - 120px);overflow:auto}
.toc strong{display:block;margin-bottom:8px}.toc a{display:block;text-decoration:none;color:#334155;padding:5px 8px;border-radius:6px;border-left:2px solid transparent}
.toc a:hover,.toc a.act{background:#e0f2fe;color:var(--blue-d);border-left-color:var(--blue)}
.toc hr{border:0;border-top:1px solid var(--line);margin:10px 0}
.lsec{scroll-margin-top:90px;margin-bottom:30px;padding-bottom:6px;border-bottom:1px solid var(--line)}.lsec h2{font-size:24px;margin-top:0}
.legal .prose{max-width:none}
/* call bar (all sizes) */
.call-bar{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;right:20px;bottom:20px;left:auto;z-index:30;background:var(--blue);color:var(--navy);font-weight:800;padding:14px 22px;border-radius:99px;text-decoration:none;box-shadow:0 10px 30px rgba(2,6,23,.35);transition:transform .2s;animation:floatbar 4s ease-in-out infinite}
.call-bar:hover{transform:scale(1.05)}
.ring{}
.call-bar .ring{position:static;width:10px;height:10px;background:#0f172a;border:0;border-radius:50%;opacity:1;animation:ping2 1.6s infinite}
@keyframes ping2{70%{box-shadow:0 0 0 10px rgba(15,23,42,0)}0%{box-shadow:0 0 0 0 rgba(15,23,42,.5)}}
@keyframes floatbar{50%{transform:translateY(-5px)}}
/* cookie */
.cookie{position:fixed;left:20px;bottom:20px;z-index:40;max-width:380px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 18px 50px rgba(2,6,23,.3);animation:fadeup .5s;font-size:15px}
.cookie[hidden]{display:none}
.cookie p{margin:6px 0 10px}
.cookie-opts{display:grid;gap:6px;margin-bottom:10px}.cookie-opts[hidden]{display:none}
.cookie-btns{display:flex;gap:8px;flex-wrap:wrap}
.cookie .btn-line{color:var(--navy);border-color:#cbd5e1}.cookie .btn-line:hover{background:#f1f5f9;box-shadow:none}
@media(max-width:900px){.legal{grid-template-columns:1fr}.toc{position:static;max-height:none}.cols{grid-template-columns:1fr 1fr}}
@media(max-width:800px){
 .scene{height:300px;transform:scale(.85)}.hero-art{display:none}
 .hero{padding:52px 0 44px}
 .chip.c2,.chip.c4{display:none}
 .call-bar{left:12px;right:12px;bottom:12px;border-radius:14px}
 .cookie{left:12px;right:12px;bottom:76px;max-width:none}
 .timeline.vertical li{padding-left:76px}
 body{padding-bottom:84px}
}
@media(max-width:560px){.cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}

/* ================= RESPONSIVE LAYER ================= */
html{-webkit-text-size-adjust:100%}
img,svg,video{max-width:100%;height:auto}
body{overflow-x:hidden;overflow-wrap:break-word}
.wrap{padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
/* banner */
.banner{font-size:13px;line-height:1.45;padding:8px 14px}
/* header */
.site-header{position:sticky;top:0;z-index:50}
.bar{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;min-height:68px;position:relative}
.logo{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;min-width:0}
.logo .lt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.logo b{font-size:22px;font-weight:800;letter-spacing:-.01em}
.logo small{display:block;width:auto;margin:2px 0 0;font-size:10.5px;color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mark{flex:none}
.menu-btn{display:none;align-items:center;gap:10px;background:#1e293b;color:#fff;border:1px solid #334155;border-radius:10px;padding:10px 14px;font:inherit;font-weight:600;cursor:pointer;min-height:44px}
.bars{display:grid;gap:4px;width:18px}.bars i{display:block;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.menu-btn[aria-expanded=true] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded=true] .bars i:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
nav{display:flex;flex-direction:row;align-items:center;gap:4px;width:auto;flex-wrap:nowrap}
nav a{white-space:nowrap}
nav .btn-sm{margin-left:8px}
/* tablet and phone: collapsible menu */
@media(max-width:1100px){
 .menu-btn{display:inline-flex}
 nav{display:none;position:absolute;left:0;right:0;top:100%;background:#101827;border-top:1px solid #1e293b;border-bottom:1px solid #1e293b;flex-direction:column;align-items:stretch;gap:2px;padding:12px 16px 16px;box-shadow:0 18px 30px rgba(2,6,23,.45);max-height:calc(100vh - 120px);overflow:auto}
 nav.open{display:flex;animation:fadeup .25s}
 nav a{padding:14px 14px;font-size:17px;border-radius:10px}
 nav .btn-sm{margin:8px 0 0;padding:14px;font-size:17px;text-align:center;justify-content:center;display:flex}
}
@media(max-width:420px){
 .logo small{display:none}
 .menu-btn .mt{display:none}
 .menu-btn{padding:12px}
 .logo b{font-size:21px}
}
@media(max-width:360px){.banner{font-size:12px}}
/* layout grids */
.hero-grid{grid-template-columns:1.15fr .85fr;gap:32px}
@media(max-width:960px){
 .hero{padding:56px 0 48px}
 .hero-grid{grid-template-columns:1fr;gap:20px}
 .scene{height:300px;max-width:460px;margin:0 auto;width:100%}
 .two,.cols,.legal{grid-template-columns:1fr}
 .cols{grid-template-columns:1fr 1fr}
 .toc{position:static;max-height:none;display:flex;flex-wrap:wrap;gap:6px}
 .toc strong{width:100%}.toc a{border:1px solid var(--line);border-radius:99px;padding:6px 12px}
 .toc hr{display:none}
 .section{padding:44px 0}
}
@media(max-width:640px){
 body{font-size:16px}
 .hero h1{font-size:clamp(30px,9vw,40px)}
 .lead{font-size:17px}
 .cta-row .btn{flex:1 1 100%;justify-content:center;text-align:center}
 .trust{gap:6px 14px;font-size:14px}
 .scene{height:250px}
 .scene .chip{font-size:12px;padding:7px 10px}
 .c1{top:2%;left:0}.c3{bottom:8%;left:0}
 .chip.c2,.chip.c4{display:none}
 .device{width:104px;height:104px;border-radius:26px}.device .ic.xl{width:44px;height:44px}
 .pagehead{padding:44px 0 36px}
 .section{padding:36px 0}
 .cards,.cards.three{grid-template-columns:1fr}
 .timeline{grid-template-columns:1fr}
 .timeline.vertical li{padding:20px 20px 20px 72px}
 .timeline.vertical .num{left:18px}.timeline.vertical:before{left:37px}
 .tabbox{padding:14px}
 .tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px;margin-inline:-4px;scrollbar-width:thin}
 .tabs button{flex:none}
 .split-card,.card{padding:20px}
 .calc{padding:16px}
 .result strong{font-size:32px}
 .big{font-size:26px}
 .cols{grid-template-columns:1fr;gap:24px}
 table{font-size:14px}th,td{padding:8px 10px}
 .band{padding:40px 0}.band .btn{width:100%;justify-content:center}
 .cookie{left:10px;right:10px;bottom:78px;max-width:none;padding:14px}
 .call-bar{left:10px;right:10px;bottom:10px;padding:14px;border-radius:14px;padding-bottom:max(14px,env(safe-area-inset-bottom))}
 body{padding-bottom:88px}
 .orb{filter:blur(48px);opacity:.4}.o1{width:240px;height:240px}.o2{width:200px;height:200px}.o3{display:none}
}
@media(max-width:380px){
 .wrap{padding-inline:16px}
 .scene .chip{display:none}
 .scene{height:200px}
 .tabs button{padding:9px 12px;font-size:15px}
}
@media(max-width:640px){
 .cookie{font-size:13.5px;padding:12px}.cookie strong{font-size:15px}.cookie p{margin:4px 0 8px;line-height:1.45}
 .cookie-btns{flex-wrap:nowrap;gap:6px}.cookie-btns .btn{flex:1;padding:10px 6px;font-size:14px;justify-content:center;white-space:nowrap}
 .banner{font-size:12px;padding:6px 12px}
}
.legal>*,.two>*,.hero-grid>*,.cols>*{min-width:0}
@media(max-width:960px){.two,.legal{grid-template-columns:minmax(0,1fr)}}
.table-wrap{max-width:100%;-webkit-overflow-scrolling:touch}
@media(min-width:1500px){.wrap{max-width:1200px}}
@media(hover:none){.card.tilt:hover{transform:none;box-shadow:none}.btn:hover{transform:none}}

.logo .mark{width:40px;height:40px;flex:none;display:block;transition:transform .3s}
.logo:hover .mark{transform:rotate(-6deg) scale(1.06)}
.site-footer .logo{display:flex;margin:0 0 12px}.site-footer .logo b{color:#fff}
.site-footer .foot-logo .mark{width:36px;height:36px}
@media(max-width:420px){.logo .mark{width:38px;height:38px}}

.popup{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(2,6,23,.6);backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.popup[hidden]{display:none}
.popup.show{opacity:1}
.pop-card{position:relative;width:100%;max-width:440px;background:#fff;border-radius:22px;padding:34px 30px 26px;text-align:center;box-shadow:0 30px 80px rgba(2,6,23,.5);transform:translateY(24px) scale(.96);transition:transform .45s cubic-bezier(.2,.8,.2,1);max-height:calc(100vh - 40px);overflow:auto}
.popup.show .pop-card{transform:none}
.pop-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:22px 22px 0 0;background:linear-gradient(90deg,#38BDF8,#818cf8)}
.pop-art{width:64px;height:64px;margin:0 auto 12px;animation:bob 4s ease-in-out infinite}
.pop-art .mark{width:64px;height:64px;filter:drop-shadow(0 8px 16px rgba(56,189,248,.45))}
.pop-card h2{font-size:26px;line-height:1.2;margin:4px 0 12px}
.pop-card p{color:#334155;margin:0 0 20px;font-size:16px}
.pop-card .btn{width:100%;justify-content:center;font-size:18px}
.pop-alt{display:block;margin:14px 0 14px;font-weight:600}
.pop-card small{display:block;color:var(--slate);font-size:12.5px;line-height:1.45}
.pop-x{position:absolute;right:12px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#f1f5f9;color:#0f172a;font-size:26px;line-height:1;cursor:pointer;transition:background .2s}
.pop-x:hover{background:#e2e8f0}
body.pop-open{overflow:hidden}
@media(max-width:560px){.popup{align-items:end;padding:0}.pop-card{border-radius:22px 22px 0 0;max-width:none;padding:30px 20px calc(22px + env(safe-area-inset-bottom));transform:translateY(100%)}.pop-card:before{border-radius:22px 22px 0 0}.pop-card h2{font-size:23px}}
