:root{
  --bg:#0b1220; --card:#0e1627; --muted:#94a3b8; --text:#e5e7eb; --heading:#f8fafc;
  --accent:#2563EB; --accent-2:#60A5FA; --ring:rgba(37,99,235,.2); --max:1120px; --radius:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.container{width:100%;max-width:var(--max);margin:0 auto;padding:0 20px}
.header{position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(11,18,32,.9), rgba(11,18,32,.7), rgba(11,18,32,0));backdrop-filter: blur(6px)}
.header .wrap{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo img{height:28px}
.nav{display:flex;gap:24px}
.nav a{color:#cbd5e1;font-weight:600}
.nav a:hover{color:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px 18px;font-weight:700;box-shadow: var(--shadow)}
.btn:hover{filter:brightness(1.05)}
.btn.secondary{background:#14213a;border:1px solid #233554;box-shadow:none}
.section{padding:56px 0}
.section.narrow{padding:36px 0}
.section .lead{color:#cbd5e1;max-width:64ch}
.hero{padding:72px 0 56px}
.hero .panel{background:radial-gradient(1200px 400px at 10% 10%, rgba(37,99,235,.2), transparent), linear-gradient(180deg, rgba(14,22,39,.9), rgba(14,22,39,.6));border:1px solid #1f2a44;border-radius:24px;padding:48px;box-shadow: var(--shadow)}
.hero h1{font-size:48px;line-height:1.1;margin:0 0 12px;color:var(--heading);letter-spacing:.2px}
.hero p{margin:0 0 22px;color:#cbd5e1;font-size:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap}
.h2{font-size:28px;line-height:1.25;color:var(--heading);margin:0 0 10px}
.h3{font-size:20px;color:var(--heading);margin:0 0 6px}
.prose p{margin:0 0 14px}
.prose ol,.prose ul{margin:0 0 14px 22px}
.prose li{margin:6px 0}
.grid{display:grid;gap:16px}
.cards{grid-template-columns:repeat(12,1fr)}
.card{background:var(--card);border:1px solid #1f2a44;border-radius:var(--radius);padding:18px;box-shadow: var(--shadow)}
.card:hover{border-color:#2b3a5c}
@media(min-width:720px){
  .hero{padding:96px 0 72px}
  .hero h1{font-size:56px}
  .cards .span-3{grid-column:span 3}
  .cards .span-4{grid-column:span 4}
  .cards .span-6{grid-column:span 6}
}
@media(max-width:719px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards > *{grid-column:span 2}
}
.split{display:grid;gap:24px}
@media(min-width:900px){ .split{grid-template-columns:1.2fr 1fr} }
.split .pane{background:var(--card);border:1px solid #1f2a44;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.split .pane.text{padding:24px}
.split .pane img{display:block;width:100%;height:auto}
.cta{background:linear-gradient(90deg, rgba(37,99,235,.15), rgba(96,165,250,.12));border:1px solid #1f2a44;border-radius:var(--radius);padding:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;box-shadow:var(--shadow)}
.footer{padding:40px 0;border-top:1px solid #1f2a44;margin-top:40px;color:#9fb0c7}
.footer a{color:#9fb0c7}
.footer a:hover{color:#fff}
.no-copy{user-select:none}
.no-copy img{pointer-events:none}