:root{
  --bg: #0f172a;
  --bg-2:#111827;
  --panel:#0b1225;
  --ink:#0a0f1f;
  --text:#f8fafc;
  --muted:#cbd5e1;
  --brand:#2563eb;
  --brand-2:#60a5fa;
  --accent:#10b981;
  --card:#111827cc;
  --ring:#1d4ed8;
  --link:#38bdf8;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, #1e40af40, transparent 60%),
    linear-gradient(180deg, #0b1024 0%, #0a0f1f 40%, #0b1225 100%);
  min-height:100%;
  scroll-behavior:smooth;
}
.topbar{
  background:linear-gradient(90deg,#1e293b,#0f172a);
  color:#fff; font-weight:600; letter-spacing:.4px;
  padding:12px 16px; text-align:center; font-size:14px;
  border-bottom:1px solid #0b1225;
}
.nav{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(160%) blur(10px);
  background:rgba(10,15,31,.6);
  border-bottom:1px solid #0f1a3a;
}
.nav .wrap{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  display:flex; align-items:center; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#fff;}
.brand-logo{ height:42px; width:auto; display:block; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.brand .title{font-weight:800; line-height:1.05}
.brand small{display:block; color:var(--muted); font-weight:500}
.menu{margin-left:auto; display:flex; gap:6px; align-items:center}
.menu > li{list-style:none; position:relative}
.menu > li > a{
  display:block; padding:10px 12px; border-radius:10px;
  color:#e5e7eb; text-decoration:none; font-weight:600; font-size:14px;
}
.menu > li > a:hover{background:#0f1a3a}
.dropdown{position:absolute; top:44px; left:0; min-width:240px; display:none;
  background:#0b1225; border:1px solid #0f1a3a; border-radius:14px;
  box-shadow:0 20px 60px #0006; padding:8px; }
.dropdown a{display:block; padding:10px 12px; color:#dbeafe; text-decoration:none; border-radius:10px; font-weight:600}
.dropdown a:hover{background:#0f1a3a}
.menu li:has(:focus), .menu li:hover .dropdown{display:block}
.carat::after{content:"▾"; margin-left:6px; font-size:12px; opacity:.7}
.burger{display:none; margin-left:auto; background:#0f1a3a; border:1px solid #1e3a8a; color:#fff; padding:8px 10px; border-radius:10px}
@media (max-width:980px){
  .menu{display:none; position:absolute; left:12px; right:12px; top:64px; flex-direction:column; padding:12px; background:#0b1225; border:1px solid #0f1a3a; border-radius:14px}
  .menu.open{display:flex}
  .burger{display:inline-flex}
}
.hero{
  position:relative; overflow:hidden;
  border-bottom:1px solid #0f1a3a;
  background:
   radial-gradient(800px 400px at 85% 10%, #1d4ed84d, transparent 60%),
   linear-gradient(180deg,#0b1225 0%, #0b1225 60%, #0a0f1f 100%);
}
.hero .wrap{max-width:1200px; margin:0 auto; padding:64px 16px 40px; display:grid; grid-template-columns:1.25fr .9fr; gap:28px}
@media (max-width:980px){ .hero .wrap{grid-template-columns:1fr} }
.headline{font-size:44px; line-height:1.05; margin:0 0 14px; letter-spacing:.2px}
.sub{color:var(--muted); font-size:17px}
.cta{ margin-top:22px; display:flex; gap:10px; flex-wrap:wrap }
.btn{
  appearance:none; border:1px solid transparent; color:white; font-weight:700; border-radius:12px;
  padding:12px 16px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:10px
}
.btn.primary{background:linear-gradient(180deg,#2563eb,#1d4ed8); box-shadow:0 8px 30px #1d4ed84d}
.btn.ghost{background:#0f1a3a; border-color:#1e3a8a; color:#dbeafe}
.planet{
  aspect-ratio: 4 / 3; width:100%; border-radius:18px; overflow:hidden;
  background:
    radial-gradient(closest-side at 30% 40%, #6ee7b7, #2563eb 60%, #0b1230 80%),
    radial-gradient(800px 400px at 85% 10%, #22d3ee22, transparent 60%),
    linear-gradient(180deg,#0b1225 0%, #0b1225 60%, #0a0f1f 100%);
  border:1px solid #17306a;
  box-shadow: inset 0 0 80px #0008, 0 30px 80px #000a;
  position:relative;
}
.planet:after{
  content:""; position:absolute; inset:-30% -20% 40% -20%;
  background:radial-gradient(closest-side, #93c5fd, transparent 70%);
  filter:blur(50px); opacity:.4;
}
section{scroll-margin-top:90px}
.section{ max-width:1200px; margin:0 auto; padding:56px 16px; }
.section h2{ margin:0 0 18px; font-size:28px; letter-spacing:.3px }
.lead{color:var(--muted)}
.cards{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.card{
  grid-column:span 12; background:linear-gradient(180deg,#0b1225,#0a0f1f);
  border:1px solid #112453; border-radius:16px; padding:18px;
  box-shadow:0 10px 30px #0006;
}
.card h3{margin:0 0 6px; font-size:18px}
.tag{display:inline-block; padding:4px 8px; background:#062036; color:#9fdcff; border:1px solid #133a67; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.3px}
.muted{color:var(--muted)}
.grid-4 > .card{grid-column:span 3}
.grid-3 > .card{grid-column:span 4}
@media (max-width:980px){
  .grid-4 > .card, .grid-3 > .card{grid-column:span 12}
}
.chip{display:inline-flex; gap:8px; align-items:center; font-weight:700; color:#a5b4fc}
.chip i{width:10px; height:10px; background:conic-gradient(from 0deg,#60a5fa,#22d3ee,#10b981,#60a5fa); border-radius:50%; box-shadow:0 0 0 2px #0f1a3a}
.tbl{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid #133a67; border-radius:14px}
.tbl th, .tbl td{padding:12px 14px; text-align:left}
.tbl thead th{background:#0f1a3a; color:#c7d2fe; font-weight:800}
.tbl tbody tr{border-top:1px solid #102b59}
.tbl tbody tr:nth-child(odd){background:#0b1225}
.tbl a{color:var(--link); text-decoration:none}
footer{ margin-top:40px; background:linear-gradient(180deg,#0a0f1f,#0a0f1f); border-top:1px solid #0f1a3a; }
.foot{max-width:1200px; margin:0 auto; padding:28px 16px; color:var(--muted); font-size:14px}
.foot strong{color:#e5e7eb}
#toTop{
  position:fixed; right:16px; bottom:16px; z-index:60; display:none;
  border:1px solid #1142b3; background:#0f1a3a; color:#e5e7eb;
  padding:10px 12px; border-radius:12px; box-shadow:0 10px 30px #0008; cursor:pointer;
}
#toTop.show{display:block}
:focus-visible{outline:2px solid var(--ring); outline-offset:2px; border-radius:10px}