/* Basis */
:root{
  --bg: #0b1020;
  --panel: #11162a;
  --text: #E6E9F2;
  --muted: #9AA3B2;
  --brand: #4F8BFF;
  --brand-2: #7CF6FD;
  --ok: #41ce76;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.25);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -20%, rgba(124,246,253,.08), transparent),
              radial-gradient(900px 600px at -10% 20%, rgba(79,139,255,.09), transparent),
              var(--bg);
  color: var(--text);
  line-height: 1.55;
}

a{color: var(--brand); text-decoration: none}
a:hover{text-decoration: underline}
.container{max-width: 1100px; margin: 0 auto; padding: 0 20px}

/* Header */
.site-header{
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(11,16,32,.6);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.logo{font-weight:800; letter-spacing:.2px; font-size: 1.25rem; color: var(--text)}
.logo span{color: var(--brand)}

/* Nav */
.nav{display:flex; gap: 20px}
.nav a{color: var(--text); opacity:.9}
.nav a:hover{opacity:1}

.nav-toggle{display:none}
.hamburger{display:none; width:36px; height:28px; cursor:pointer}
.hamburger span{display:block; height:3px; background:var(--text); margin:6px 0; border-radius:2px; transition:.2s}

@media (max-width: 800px){
  .hamburger{display:block}
  .nav{
    position: absolute; right: 20px; top: 64px;
    display: grid; gap: 8px;
    background: var(--panel);
    padding: 12px; border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.06);
    transform: scale(.98); opacity: 0; pointer-events: none; transition:.15s;
  }
  .nav-toggle:checked ~ .nav{ transform: scale(1); opacity:1; pointer-events: all}
  .nav-toggle:checked + .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .hamburger span:nth-child(1){transform: translateY(9px) rotate(45deg)}
  .nav-toggle:checked + .hamburger span:nth-child(3){transform: translateY(-9px) rotate(-45deg)}
}

/* Hero */
.hero{position: relative; overflow: clip}
.hero-inner{padding: 72px 0 56px}
.hero h1{font-size: clamp(2rem, 3.6vw, 3rem); line-height:1.1; margin: 0 0 12px}
.hero p{max-width: 60ch; color: var(--muted); margin: 0 0 20px}
.cta-row{display:flex; gap:12px; flex-wrap: wrap}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 16px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; text-decoration:none; cursor:pointer;
}
.btn.primary{background: linear-gradient(90deg, var(--brand), var(--brand-2)); color:#0b1020}
.btn.primary:hover{filter: brightness(1.05)}
.btn.ghost{border-color: rgba(255,255,255,.2); color: var(--text); background: transparent}
.btn.ghost:hover{background: rgba(255,255,255,.06)}

.hero-bg{
  position: absolute; inset: -40px -10vw auto -10vw; height: 300px;
  background: radial-gradient(40% 60% at 40% 60%, rgba(124,246,253,.18), transparent 70%),
              radial-gradient(40% 60% at 70% 40%, rgba(79,139,255,.2), transparent 70%);
  filter: blur(60px); opacity:.6; pointer-events:none;
}

/* Sections */
.section{padding: 56px 0}
.section.alt{background: rgba(255,255,255,.02); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06)}

.grid{display:grid; gap: 20px}
.grid.two{grid-template-columns: repeat(2, 1fr)}
.grid.three{grid-template-columns: repeat(3, 1fr)}

@media (max-width: 900px){
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr}
}

/* Cards */
.card{
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.facts{display:grid; grid-template-columns: max-content 1fr; gap: 8px 12px; margin:0}
.facts dt{opacity:.7}
.facts dd{margin:0}

/* Lists */
.checklist{list-style: none; padding:0; margin:16px 0 0}
.checklist li{position: relative; padding-left: 26px; margin: 8px 0; color: var(--text)}
.checklist li::before{
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ok); font-weight: 800
}

/* Contact */
.contact{display:grid; gap: 12px}
.contact input, .contact textarea{
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04);
  color: var(--text); outline: none;
}
.contact input:focus, .contact textarea:focus{border-color: var(--brand)}

.small{font-size: .925rem; color: var(--muted)}
.hint{margin-top: 8px}

/* Footer */
.site-footer{padding: 24px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap: 12px}
.footer-links{display:flex; gap: 12px}
.footer-links a[aria-disabled="true"]{opacity:.6; pointer-events:none}