:root{
  --bg:#0b0f14;
  --panel:#111723;
  --panel-2:#0f1623;
  --text:#e6edf3;
  --muted:#8ea0b6;
  --accent:#8bdcff;
  --accent-2:#9ae6b4;
  --danger:#ff6b6b;
  --ring: rgba(107, 220, 255, 0.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --maxw: 1200px;
  --angle:-12deg;
  --stripe1:#0d1522;
  --stripe2:#0b111b;
}

*{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, "Helvetica Neue", Arial, "Noto Sans";}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.9;text-decoration:underline}
.container{max-width:var(--maxw);margin-inline:auto;padding:24px}

.header{position:sticky;top:0;z-index:10;background:linear-gradient(0deg, rgba(11,15,20,0.4), rgba(11,15,20,0.95));backdrop-filter: blur(8px);border-bottom:1px solid #1b2331}
.nav{display:flex;gap:20px;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:36px;height:36px}
.brand-name{font-size:18px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.nav-links{display:flex;gap:18px;flex-wrap:wrap}
.nav-links a{padding:10px 14px;border-radius:10px;background:transparent}
.nav-links a.active,.nav-links a:hover{background:#0f1724;box-shadow: var(--shadow)}
.menu{display:none}

.primary{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(90deg,#2b6cb0,#0ea5e9);border:none;color:white;padding:12px 18px;border-radius:12px;font-weight:700;box-shadow:var(--shadow);cursor:pointer}
.secondary{display:inline-flex;align-items:center;gap:10px;background:#1a2433;border:1px solid #263247;color:var(--text);padding:12px 18px;border-radius:12px;cursor:pointer}
.primary:hover,.secondary:hover{opacity:.95}

.hero{display:grid;grid-template-columns: 1.2fr .8fr;gap:28px;align-items:center;padding:48px 0;position:relative;overflow:hidden}
.hero::after{
  content:""; position:absolute; inset:-40% -10%;
  transform:rotate(12deg);
  background: radial-gradient(60% 60% at 60% 50%, rgba(107,220,255,0.12), transparent 60%),
              radial-gradient(40% 40% at 20% 30%, rgba(154,230,180,0.09), transparent 60%);
  pointer-events:none;
}
.kicker{color:var(--accent)}
.hero h1{font-size:40px;line-height:1.15;margin:0 0 12px;letter-spacing:.02em}
.hero p{color:var(--muted);margin:0 0 20px}

.angled-bg{
  background: repeating-linear-gradient(var(--angle), var(--stripe1), var(--stripe1) 12px, var(--stripe2) 12px, var(--stripe2) 24px);
  border-radius: var(--radius);
  border:1px solid #18243a;
}
.angled-card{position:relative; overflow:hidden;border-radius: var(--radius);background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #1a2332; box-shadow:var(--shadow)}
.angled-card .inner{ transform: skewY(0); padding:22px }
.angled-card::before{
  content:""; position:absolute; top:-25px; left:-10px; right:-10px; height:70px;
  background:linear-gradient(90deg,#2b6cb0,#0ea5e9);
  transform:skewY(var(--angle)); opacity:.20;
}

.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.card{background:linear-gradient(180deg,var(--panel),var(--panel-2));border:1px solid #1a2332;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.card p{margin:0;color:var(--muted)}

.section{padding:36px 0}
.section h2{margin:0 0 12px}
.section p.lead{color:var(--muted);max-width:800px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px;align-items:stretch}
.figure{display:flex;gap:14px;align-items:flex-start}
.figure img{border-radius:10px;border:1px solid #203049}

.footer{border-top:1px solid #1b2331;margin-top:40px}
.footer .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.footer small{color:var(--muted)}

.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#172235;border:1px solid #263247;color:var(--accent);font-weight:600;font-size:12px}

.list{display:grid;gap:10px}
.list li{background:#0f1724;border:1px solid #1a2332;padding:12px;border-radius:12px}

.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px;border-bottom:1px solid #22304a;text-align:left}
.table th{color:#a6b4c8}

.notice{border:1px solid #334155;background:#0c1422;border-radius:12px;padding:14px;color:#cdd5e1}
hr{border:0;border-top:1px solid #1b2331;margin:24px 0}

img,svg{max-width:100%;height:auto;border-radius:12px}
figure{margin:0}

@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .nav-links{display:none}
  .menu{display:inline-flex}
}