:root{color-scheme:dark;--bg:#090e18;--surface:#151d2b;--surface2:#1a2536;--text:#f4f7fc;--muted:#aab7ca;--blue:#4b91ff;--line:#344155;--max:1160px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 80% 0%,#18345e 0,transparent 34rem),var(--bg);color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:#8dc0ff;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#c0ddff}
a:focus-visible,button:focus-visible{outline:3px solid #a5cbff;outline-offset:4px;border-radius:4px}
.skip{position:absolute;top:-5rem;left:1rem;background:#fff;color:#101828;padding:.5rem 1rem;z-index:20}
.skip:focus{top:1rem}
.wrap{width:min(var(--max),calc(100% - 3rem));margin-inline:auto}
.site-header{position:relative;z-index:2;border-bottom:1px solid #ffffff16;background:#0a101bd9;backdrop-filter:blur(14px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:76px}
.brand{display:flex;align-items:center;gap:.7rem;color:#fff;text-decoration:none;font-size:1.35rem;font-weight:780;letter-spacing:-.045em}
.brand img{width:37px;height:37px;border-radius:9px}
.brand em{color:#67a6ff;font-style:normal}
.nav{display:flex;align-items:center;gap:1.45rem;flex-wrap:wrap}
.nav a{color:#c8d3e4;text-decoration:none;font-size:.92rem;font-weight:600}
.nav a:hover,.nav a[aria-current=page]{color:#fff}
.nav .nav-cta{padding:.5rem .9rem;border:1px solid #6a9eef;border-radius:999px;color:#fff}
.hero{padding:94px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:4.2rem;align-items:center}
.eyebrow{color:#8bbaff;text-transform:uppercase;letter-spacing:.15em;font-size:.76rem;font-weight:800;margin:0 0 1.2rem}
.hero h1,.page-head h1{font-size:clamp(3rem,6vw,5.75rem);line-height:1.04;letter-spacing:-.065em;margin:0 0 1.5rem;max-width:12ch}
.hero p.lead,.page-head .lead{font-size:clamp(1.1rem,1.6vw,1.33rem);color:#c6d1e1;line-height:1.6;max-width:35rem;margin:0 0 2rem}
.accent{color:#75adff}
.button-row{display:flex;gap:.75rem;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.75rem 1.15rem;border-radius:12px;font-weight:700;text-decoration:none;line-height:1.25}
.button.primary{background:#4d92ff;color:#081320;box-shadow:0 12px 35px #236cff35}
.button.primary:hover{background:#79aeff}
.button.secondary{border:1px solid #63758f;color:#f2f7ff;background:#ffffff08}
.button.secondary:hover{background:#ffffff16}
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:9% -7% -8%;background:#3686ff2b;filter:blur(60px);border-radius:50%}
.screen{position:relative;display:block;width:100%;border:1px solid #63708a;border-radius:20px;box-shadow:0 32px 70px #0009;overflow:hidden;background:#17202c}
.screen img{display:block;width:100%;height:auto}
.screen figcaption{padding:.65rem .9rem;background:#101927;color:#adbcd0;font-size:.74rem}
.mini-note{margin-top:1rem;color:#92a2b8;font-size:.83rem}
.status{display:inline-block;margin-top:1.6rem;padding:.45rem .75rem;border:1px solid #537394;border-radius:99px;color:#c7dcf8;font-size:.82rem}
.section{padding:70px 0}
.section.border-top{border-top:1px solid #ffffff18}
.section-head{max-width:46rem;margin-bottom:2rem}
.section-head h2,.page-head h1,.prose h2{letter-spacing:-.045em}
.section-head h2{font-size:clamp(2rem,3.5vw,3rem);line-height:1.14;margin:.2rem 0 1rem}
.section-head p{color:var(--muted);margin:0}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:linear-gradient(150deg,#1a2638,#121b29);border:1px solid #36455b;border-radius:18px;padding:1.5rem;min-height:220px}
.card .number{display:block;color:#82b7ff;font-size:.8rem;font-weight:800;letter-spacing:.12em;margin-bottom:1.2rem}
.card h3{font-size:1.32rem;line-height:1.23;margin:0 0 .7rem}
.card p{margin:0;color:#afbed1}
.card a{display:inline-block;margin-top:1rem;font-weight:700}
.split{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
.split h2{font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.13;letter-spacing:-.05em;margin:0 0 1rem}
.split p{color:#b5c3d5}
.feature-list{list-style:none;padding:0;margin:1.5rem 0}
.feature-list li{padding:.8rem 0;border-top:1px solid #ffffff23;color:#d7e1ed}
.feature-list strong{color:#fff}
.quote-band{background:linear-gradient(110deg,#1a3965,#122135);border-block:1px solid #47618a;padding:3rem 0}
.quote-band p{font-size:clamp(1.45rem,2.5vw,2.1rem);font-weight:650;letter-spacing:-.03em;line-height:1.35;margin:0;max-width:45rem}
.page-head{padding:74px 0 50px;border-bottom:1px solid #ffffff20}
.page-head h1{max-width:17ch;font-size:clamp(2.8rem,5vw,4.8rem)}
.page-head .lead{margin-bottom:0}
.article{padding:60px 0 100px}
.prose{max-width:760px;color:#c1ccdb}
.prose h2{font-size:1.65rem;color:#fff;margin:2.5rem 0 .8rem}
.prose h3{font-size:1.2rem;color:#fff;margin:1.7rem 0 .5rem}
.prose p,.prose ul{margin:.7rem 0 1.15rem}
.prose li{margin:.55rem 0}
.prose a{overflow-wrap:anywhere}
.info-box{background:#162438;border:1px solid #44658e;border-radius:16px;padding:1.2rem 1.4rem;color:#d8e7fa;margin:1.5rem 0}
.info-box strong{color:#fff}
.spaced{margin-top:2rem}
.use-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.use-grid .card{min-height:250px}
.promo-panel{background:linear-gradient(135deg,#276ec5,#0d2548);border:1px solid #6cb0ff;border-radius:24px;padding:clamp(2rem,5vw,4rem);max-width:900px;box-shadow:0 30px 70px #0004}
.promo-panel h2{font-size:clamp(2.5rem,5vw,5rem);line-height:1.05;letter-spacing:-.06em;margin:0 0 1.2rem}
.promo-panel p{font-size:1.15rem;max-width:32rem}
.site-footer{border-top:1px solid #ffffff20;padding:2.5rem 0 3rem;background:#080d15}
.footer-inner{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-inner p{color:#8fa1b8;font-size:.85rem;margin:.4rem 0}
.footer-links{display:flex;gap:1.2rem;flex-wrap:wrap;align-content:start}
.footer-links a{font-size:.9rem}
.muted{color:var(--muted)}

@media(max-width:850px){.hero-grid,.split{grid-template-columns:1fr;gap:2.4rem}
.hero{padding:65px 0}
.hero-art{max-width:680px}
.grid-3{grid-template-columns:1fr 1fr}
.header-inner{align-items:flex-start;flex-direction:column;padding:1rem 0;gap:.8rem}
.nav{gap:.75rem 1rem}
}

@media(max-width:620px){.wrap{width:min(var(--max),calc(100% - 2rem))}
.grid-3,.use-grid{grid-template-columns:1fr}
.section{padding:55px 0}
.page-head{padding:55px 0 42px}
.nav{font-size:.85rem}
.card{min-height:0}
.hero h1{font-size:3.35rem}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
}