/* ========== Root & Reset ========== */
:root{
  --bg-0:#0b0d12;
  --bg-1:#0f1117;
  --bg-2:#0a0c10;
  --txt-1:#e8ecf1;
  --txt-2:#9aa3b2;
  --brand:#7c9cff;
  --brand-2:#6a8ef5;
  --ok:#6ee7b7;
  --border:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.04);
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--txt-1);
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a2030 0%, transparent 60%),
    radial-gradient(900px 500px at 110% 10%, #141826 0%, transparent 55%),
    radial-gradient(600px 600px at 50% 120%, #111524 0%, transparent 60%),
    var(--bg-0);
  background-attachment: fixed;
  line-height:1.55;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 20%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,.25) 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,.2) 50%, transparent 51%),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,.2) 50%, transparent 51%);
  pointer-events:none;
  animation: twinkle 6s linear infinite alternate;
  opacity:.45;
}
@keyframes twinkle{
  from{opacity:.35} to{opacity:.6}
}
.container{ width:100%; max-width:1100px; margin-inline:auto; padding-inline:20px; }
.small{font-size:.875rem}
.muted{color:var(--txt-2)}
.nav{
  position:sticky; top:0; z-index:50;
  background:linear-gradient(to bottom, rgba(8,10,14,.75), rgba(8,10,14,.35) 60%, transparent);
  backdrop-filter:saturate(120%) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav__inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:14px; }
.brand{
  font-weight:700; letter-spacing:.3px; text-decoration:none; color:var(--txt-1);
  padding:.4rem .7rem; border-radius:12px; background:var(--glass);
  border:1px solid var(--border);
}
.nav__links{ list-style:none; display:flex; gap:10px; align-items:center; margin:0; padding:0; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .85rem; border:1px solid var(--border); border-radius:14px;
  text-decoration:none; color:var(--txt-1);
  background:linear-gradient(to bottom, rgba(255,255,255,.04), rgba(255,255,255,.02));
  transition:transform .12s ease, background .2s ease, border-color .2s;
}
.pill:hover{ transform:translateY(-1px); border-color:rgba(124,156,255,.35) }
.pill.active{ outline:2px solid rgba(124,156,255,.3) }
.nav__cta{ margin-left:auto }
.nav__toggle{
  display:none; flex-direction:column; gap:4px;
  width:42px; height:36px; border-radius:12px;
  background:var(--glass); border:1px solid var(--border);
}
.nav__toggle span{ display:block; height:2px; background:var(--txt-1) }
@media (max-width: 860px){
  .nav__toggle{display:flex}
  .nav__links{
    position:absolute; left:0; right:0; top:64px;
    background:rgba(9,11,16,.95);
    backdrop-filter: blur(10px);
    border-bottom:1px solid var(--border);
    padding:14px; display:none; flex-direction:column; gap:8px;
  }
  .nav__links.is-open{display:flex}
  .nav__cta{display:none}
}
.hero{ padding-top:64px; padding-bottom:40px; text-align:center; }
.logo-wordmark{ margin:28px 0 6px; font-size: clamp(28px, 6vw, 48px); letter-spacing:.5px; font-weight:800; text-shadow:0 8px 30px rgba(0,0,0,.45); }
.lead{ margin:0 auto 18px; color:var(--txt-2); max-width:760px; }
.lead.fancy{ font-weight:700; font-size: clamp(18px, 3.2vw, 24px); line-height:1.25; color:var(--txt-1); letter-spacing:.2px; }
.lead.fancy span{
  display:block;
  background:linear-gradient(90deg, #e8ecf1, #9fb4ff 40%, #c0d1ff 60%, #e8ecf1);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 10px 25px rgba(124,156,255,.08));
}
.hero__actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 16px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,.02));
  color:var(--txt-1); text-decoration:none; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .2s;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.btn:hover{ transform:translateY(-1px); border-color:rgba(124,156,255,.4) }
.btn:active{ transform:translateY(0) scale(.98) }
.btn--primary{
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
  border-color: rgba(124,156,255,.5);
  box-shadow: 0 10px 30px rgba(108,137,255,.25);
}
.btn--ghost{ background:transparent; }
.btn.small{ height:36px; padding:0 12px }
section.container{ padding: 18px 20px 40px }
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow:hidden; transform-style: preserve-3d;
}
.panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background: rgba(255,255,255,.02); font-weight:700;
}
.panel__body{ padding:16px }
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
.feature{
  background: rgba(255,255,255,.02); border:1px solid var(--border); border-radius:16px;
  padding:14px; transition:transform .12s ease, border-color .2s;
}
.feature:hover{ transform: translateY(-2px); border-color: rgba(124,156,255,.35) }
.feature h3{ margin:2px 0 6px; font-size:1.05rem }
.feature p{ margin:0; color:var(--txt-2) }
@media (max-width: 860px){ .features{ grid-template-columns: 1fr; } }
.table{ width:100%; border-collapse:separate; border-spacing:0 8px }
.table thead th{ text-align:left; font-weight:700; color:var(--txt-2); padding:6px 10px; }
.table tbody td{
  padding:12px 10px; background: rgba(255,255,255,.02);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.table tbody tr td:first-child{
  border-left:1px solid var(--border); border-top-left-radius:12px; border-bottom-left-radius:12px;
}
.table tbody tr td:last-child{
  border-right:1px solid var(--border); border-top-right-radius:12px; border-bottom-right-radius:12px;
}
.label{ display:block; margin:6px 0 6px; color:var(--txt-2) }
.input, .textarea{
  width:100%; padding:12px 12px; color:var(--txt-1);
  background: rgba(255,255,255,.03);
  border:1px solid var(--border); border-radius:14px;
  outline:none; transition:border-color .2s;
}
.input:focus, .textarea:focus{ border-color: rgba(124,156,255,.45) }
.footer{ text-align:center; padding:20px }
.footer hr{ border:none; border-top:1px solid var(--border); margin:10px 0 16px }
[data-parallax]{ position:relative; isolation:isolate; }
[data-parallax]::after{
  content:""; position:absolute; inset:auto -10% -30% -10%;
  height:240px; background: radial-gradient(60% 60% at 50% 50%, rgba(124,156,255,.18), transparent 60%);
  filter: blur(40px); z-index:-1; pointer-events:none;
}