:root{
  --bg:#0b1220; --panel:#0f192b; --muted:#9fb0c5; --border:#23314f; --btn:#335cff;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(1200px 600px at 20% 0%, #101b33, transparent 60%),
    radial-gradient(1000px 600px at 120% 30%, #0d1529, transparent 60%),
    linear-gradient(120deg,#0b1220,var(--bg));
  color:#e6edf3; overflow-x:hidden;
}
#space{position:fixed; inset:0; z-index:0; pointer-events:none}
.container{position:relative; z-index:1; max-width:1150px; margin:0 auto; padding:20px 24px}
header{position:sticky; top:0; background:rgba(11,18,32,.78); border-bottom:1px solid #1a2743; backdrop-filter: blur(6px); z-index:2}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0}
.brand{display:flex; align-items:center; gap:12px}
.brand img{border-radius:50%}
.brand-name{font-weight:900; font-size:22px}
.tag{font-size:12px; color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  border-radius:12px; background:#213156; border:1px solid #2a3e6b; color:#cfe0ff;
  text-decoration:none; font-weight:600;
}
.ico{display:inline-block; width:18px; height:18px; background:#cfe0ff1a; border:1px solid #93a6bf3a; border-radius:4px}
.i-ig::after{content:'📷'; display:block; font-size:12px; text-align:center; line-height:18px}
.i-yt::after{content:'▶'; display:block; font-size:12px; text-align:center; line-height:18px}

.panel{
  background:#121a2b; border:1px solid #1d2842; border-radius:18px; padding:26px;
  box-shadow: 0 12px 36px rgba(0,0,0,.32);
  max-width: 900px; margin: 28px auto;
}
.pill{ display:inline-block; padding:6px 10px; background:#2a1a00; color:#ffd24d; border:1px solid #4d3606; border-radius:999px; font-weight:700; font-size:12px }
h1{ margin:10px 0 8px; font-size:36px }
.lead{ font-size:16px; color:var(--muted) }
.field-label{ font-weight:700; margin-top:16px }
.field{
  width:100%; padding:14px 16px; border-radius:12px; border:1px solid #263659; background:#0e1627; color:#e6edf3;
}
.actions{ display:flex; gap:12px; margin-top:14px }
.primary{ background:var(--btn); border:none; color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer }
.secondary{ background:#213156; border:none; color:#fff; padding:12px 16px; border-radius:12px; font-weight:700; cursor:pointer }

.result{ margin-top:18px; border-radius:16px; border:1px solid #1c2a49; background:#0e1a30; }
.result .inner{ padding:16px }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start }
.number{ font-size:72px; font-weight:900 }
.tiny{ font-size:12px; color:#93a6bf }
.mapbox{ margin-top:14px; padding:12px; background:#0a1426; border:1px dashed #233153; border-radius:12px }
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:10px }
.chip{ padding:8px 12px; border-radius:999px; background:#162447; border:1px solid #263b73; font-size:14px }
.email{ color:#9db7ff }

footer.site{ margin-top:34px; padding:24px 0; text-align:center; color:#9fb0c5; border-top:1px solid #1a2743; position:relative; z-index:1 }

@media (max-width: 900px){
  .container{ padding:16px }
  .panel{ margin: 16px auto }
  .number{ font-size:60px }
}
@media (max-width: 768px){
  .nav{ flex-direction:column; align-items:flex-start; gap:8px }
  .cta{ width:100% }
  .btn{ flex:1; justify-content:center }
  .grid{ grid-template-columns:1fr }
  .number{ font-size:52px }
}
@media (max-width: 420px){
  h1{ font-size:28px }
  .number{ font-size:46px }
  .panel{ padding:18px }
}