:root{ --red:#ef233c; --red-strong:#dc2626; --ink:#f5f6f7; --muted:#a3aab7;
  --bg:#0b0d12; --panel:#0f1218; --panel2:#0c0f14; --stroke:#1b2230; --ring:#ffffff22; }
*{box-sizing:border-box} html,body{height:100%}
body{ margin:0; color:var(--ink);
  background: radial-gradient(1200px 600px at 90% 120%, #141824 0%, #0d111a 40%, var(--bg) 80%);
  font-family: Inter, Manrope, system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.3) 70%, rgba(0,0,0,0));
  border-bottom:1px solid #0a0d14; backdrop-filter: blur(8px) saturate(120%); }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px }
.logo{ width:28px; height:28px; border-radius:6px; filter: drop-shadow(0 2px 8px #00000088) }
.brand-name{ text-transform:uppercase }
.nav .link{ color:#e5eaf2; text-decoration:none; font-weight:700 } .nav .link:hover{ text-decoration:underline }
.hero{ position:relative; overflow:clip } .hero-bg{ position:absolute; inset:0; z-index:-1 }
.glow{ position:absolute; inset:-20% -10% auto -10%; height:75%;
  background: radial-gradient(700px 300px at 30% 40%, #ef233c22, transparent 70%), radial-gradient(600px 260px at 80% 30%, #ffffff0f, transparent 80%); filter: blur(20px); }
.grid{ position:absolute; inset:0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px);
  background-size: 40px 40px; mask-image: radial-gradient(60% 60% at 50% 40%, black, transparent 80%); opacity:.18; }
.hero-inner{ max-width:1200px; margin: 18px auto 0; padding: 20px; display:grid; grid-template-columns: 1.2fr 1fr; gap:26px; align-items:center; }
@media (max-width: 980px){ .hero-inner{ grid-template-columns:1fr } }
.headline{ margin:0 0 10px; font-weight:800; line-height:1.06; font-size: clamp(28px, 3.4vw, 48px) }
.pill{ display:inline-block; padding:6px 10px; border-radius:999px; background:#0f1218; border:1px solid #1b2230; margin-right:6px; font-weight:800 }
.accent{ color:var(--red) } .sub{ color:var(--muted); margin:0 0 18px }
.cta{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:10px 0 6px }
.btn{ display:inline-block; font-weight:800; letter-spacing:.3px; border-radius:14px; text-decoration:none; cursor:pointer; }
.btn-primary{ color:white; padding:12px 18px; border:0; background:linear-gradient(180deg, var(--red), var(--red-strong)); box-shadow:0 10px 24px #dc262666, inset 0 1px 0 #ffffff55; }
.btn-ghost{ color:#e5eaf2; padding:12px 16px; border:1px solid #2a2f39; background:#0e1117 }
.btn-outline{ color:#e5eaf2; padding:10px 16px; border:1px solid #2a2f39; background:transparent }
.dl-options{ margin:14px 0 6px; } .dl-label{ color:#cbd5e1; font-weight:800; margin-bottom:8px; font-size:14px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:10px; } .chip{ display:inline-block; padding:8px 12px; border-radius:999px; border:1px solid #2a2f39; background:#0e1117; color:#e5eaf2; text-decoration:none; font-weight:700; }
.chip:hover{ border-color:#3a4354 } .muted{ color:#9aa3b2; margin-top:8px }
.scene{ position:relative; height:min(48vh, 440px); min-height:300px; background:linear-gradient(180deg, #0b0d12, #0f131a);
  border:1px solid #1b2230; border-radius:22px; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; box-shadow:inset 0 0 0 1px #ffffff08, 0 12px 36px #00000066; }
.scene-compact{ padding-bottom:22px }
.tower{ width:min(50%, 360px); max-width:380px; transform-origin:50% 100%; filter: drop-shadow(0 26px 46px #000000aa); z-index:3; animation: sway 4.3s ease-in-out infinite; }
@keyframes sway{ 0%,100%{ transform:rotate(-1.1deg) } 50%{ transform:rotate(1.1deg) } }
.signal{ position:absolute; bottom:38%; left:50%; transform:translateX(-50%); z-index:2 }
.ring{ position:absolute; left:50%; top:50%; width:20px; height:20px; border-radius:50%; transform:translate(-50%,-50%); border:2px solid var(--ring); animation: ping 2.4s ease-out infinite }
.r2{ animation-delay:.45s } .r3{ animation-delay:.9s }
@keyframes ping{ 0%{opacity:.9;width:10px;height:10px} 70%{opacity:.15} 100%{opacity:0;width:380px;height:380px} }
.beacon{ position:absolute; bottom:41%; left:50%; width:10px; height:10px; transform:translateX(-50%); background:#ef233c; border-radius:50%; box-shadow:0 0 14px var(--red), 0 0 32px #ef4444; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ transform:translateX(-50%) scale(1) } 50%{ transform:translateX(-50%) scale(1.18) } }
.cloud{ position:absolute; top:12%; width:200px; height:60px; background: radial-gradient(30px 18px at 30px 30px, #ffffffad, #ffffff00), radial-gradient(40px 24px at 80px 28px, #ffffffbf, #ffffff00), radial-gradient(50px 28px at 140px 26px, #ffffffcc, #ffffff00); filter: blur(6px) drop-shadow(0 6px 6px #00000033); opacity:.12; border-radius:60px; animation: drift 60s linear infinite; }
.c1{ left:-25%; top:18%; animation-duration:64s } .c2{ left:-5%; top:26%; animation-duration:58s; animation-delay:-12s }
@keyframes drift{ to{ transform: translateX(140vw) } }
.content{ max-width:1200px; margin: 6px auto 0; padding: 0 20px 40px } .cards{ display:grid; gap:18px; grid-template-columns: 1.4fr 1.6fr 1fr }
@media (max-width: 1100px){ .cards{ grid-template-columns: 1fr } }
.card{ background:linear-gradient(180deg, var(--panel), var(--panel2)); border:1px solid var(--stroke); border-radius:18px; padding:22px; box-shadow:0 12px 36px #00000066, inset 0 1px 0 #ffffff0a; }
.card-form{ grid-column: span 1 } .steps{ margin:8px 0 12px; padding-left:18px; color:#cbd5e1 } .steps li{ margin-bottom:8px }
.notice{ margin-top:10px; padding:10px 12px; border-radius:12px; font-size:14px; border:1px dashed #f59e0b66; color:#fcd38d; background:#1b1507 }
.form{ margin-top:6px } .row{ display:grid; gap:12px; grid-template-columns: 1fr 1fr } @media (max-width: 680px){ .row{ grid-template-columns:1fr } }
.field label{ display:block; font-weight:700; margin:6px 0 6px } .field input{ width:100%; padding:12px 12px; border-radius:12px; border:1px solid #263042; background:#0f131a; color:#e5eaf2; outline:none }
.field input:focus{ border-color:#3b4250; box-shadow:0 0 0 4px #ef233c22 }
.consent{ display:flex; gap:10px; align-items:flex-start; margin-top:10px; color:#cdd6e3 } .actions{ display:flex; gap:12px; align-items:center; margin-top:12px } .status{ min-height:22px; color:#cbd5e1; margin-top:10px }
.footer{ border-top:1px solid #0a0d14; padding:20px; text-align:center; color:#9aa3b2; background:#0b0d12 }
.toast{ position: fixed; left:50%; bottom:26px; transform: translateX(-50%); padding:12px 16px; border-radius:12px; background:#10151d; color:#e5eaf2; border:1px solid #263042; box-shadow:0 14px 30px #00000066; display:none; z-index:50; }
.toast.show{ display:block; animation: rise .3s ease-out } @keyframes rise{ from{ transform: translate(-50%, 10px); opacity:0 } to{ transform: translate(-50%,0); opacity:1 } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }