:root{
  --bg: #0b1020;
  --panel: #0f162d;
  --card: #121a35;
  --text: #ecf2ff;
  --muted: #9db0d3;
  --brand: #6aa8ff;
  --brand-2: #7fd9ff;
  --ring: #2743a0;
}

/* Base */
*{ box-sizing:border-box }
html,body{ margin:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Inter,Arial,sans-serif }
a{ color:inherit; text-decoration:none }
.container{ max-width:1100px; margin:0 auto; padding:0 24px }

.h1{ font-size:clamp(32px, 5vw, 56px); line-height:1.1; margin:0 0 12px }
.h2{ font-size:clamp(22px, 3vw, 32px); margin:0 0 8px }
.lead{ color:var(--muted); font-size:1.125rem }
.small{ font-size:0.85rem }
.muted{ color:var(--muted) }
.rule{ border:0; border-top:1px solid rgba(255,255,255,.07); margin:20px 0 }

/* Header */
.site-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(15,22,45,.9), rgba(15,22,45,.6));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px }
.brand{ display:flex; gap:10px; align-items:center; font-weight:700 }
.brand .dot{ width:10px; height:10px; border-radius:10px; background:linear-gradient(45deg,var(--brand),var(--brand-2)) }
.nav a{ color:var(--muted); margin-left:18px }
.nav a:hover{ color:#fff }

/* Hero */
.hero{
  display:grid; grid-template-columns:1.3fr 1fr; gap:28px;
  padding:64px 24px 32px;
}
.hero-copy .btn{ margin-top:14px }
.hero-card{ display:flex; align-items:center; justify-content:center }
.card{
  background:linear-gradient(180deg, rgba(18,26,53,.9), rgba(18,26,53,.7));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px; overflow:hidden; width:min(420px, 90%);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.card-head{ padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.06); font-weight:600 }
.preview{ position:relative; aspect-ratio:4/3; display:grid; place-items:center; overflow:hidden }
.preview-ring{
  width:75%; aspect-ratio:1/1; border-radius:999px;
  background:radial-gradient(closest-side, rgba(127,217,255,.25), transparent 70%);
  border:1px solid rgba(127,217,255,.25);
  box-shadow:0 0 80px rgba(106,168,255,.25) inset;
}
.preview-gauge{
  position:absolute; width:40%; height:12px; border-radius:12px;
  background:linear-gradient(90deg, #ff6a6a, #ffd36a, #6aff9d);
  filter:drop-shadow(0 0 10px rgba(106,168,255,.3));
}

/* Sections & Cards */
.section{ padding:28px 0 }
.card.section{ padding:18px 18px 22px; border-radius:16px; background:var(--card); border:1px solid rgba(255,255,255,.08) }

/* Form */
.legend{ color:var(--muted); margin-bottom:6px }
.row{ display:flex; align-items:center; gap:12px }
.row-gap{ margin:10px 0 6px }
.grid{ display:grid; gap:12px }
.grid.two{ grid-template-columns:repeat(2, minmax(0,1fr)) }
.grid.three{ grid-template-columns:repeat(3, minmax(0,1fr)) }

.field .label{ display:block; color:var(--muted); margin-bottom:6px }
.field input{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid rgba(255,255,255,.12); outline:0; background:#0e1430; color:#fff;
}
.field input:focus{ border-color:var(--brand); box-shadow:0 0 0 3px rgba(106,168,255,.25) }

.chip{
  display:inline-flex; gap:8px; align-items:center; padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:#0e1430; cursor:pointer;
}
.chip input{ accent-color:var(--brand); }

.btn{
  appearance:none; border:1px solid rgba(255,255,255,.2); background:#141b3d; color:#fff;
  padding:10px 14px; border-radius:12px; cursor:pointer;
}
.btn:hover{ filter:brightness(1.15) }
.btn.primary{ background:linear-gradient(90deg,var(--brand),var(--brand-2)); border-color:transparent }

/* Results */
.results{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:12px; margin-top:14px;
}
.result-item{ background:#0f1631; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px }
.result-label{ color:var(--muted); font-size:.9rem }
.result-value{ font-size:1.8rem; font-weight:700 }
.result-badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:#0e1430; border:1px solid rgba(255,255,255,.12) }

/* Footer */
.site-footer{ border-top:1px solid rgba(255,255,255,.07); margin-top:48px }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; height:64px }

/* Utils */
.hidden{ display:none !important }

/* Responsive */
@media (max-width: 880px){
  .hero{ grid-template-columns:1fr; }
  .grid.two{ grid-template-columns:1fr }
  .grid.three{ grid-template-columns:1fr 1fr }
}