/* Base */
:root{
  --bg: #09090B; /* zinc-950 */
  --text: #E5E7EB; /* zinc-200 */
  --muted: #A1A1AA; /* zinc-400 */
  --border: rgba(255,255,255,.08);
  --card: rgba(255,255,255,.03);
  --card-hover: rgba(255,255,255,.06);
  --primary-1:#06B6D4; /* cyan-500 */
  --primary-2:#6366F1; /* indigo-500 */
  --radius: 12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg); color: var(--text); line-height:1.6;
}

/* Background layers (grid + radial glow) */
.bg-wrap{ position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.radial-bg{ position:absolute; inset:-20% -10% auto -10%; height:60vh; filter: blur(48px); opacity:.5;
  background: radial-gradient(1200px 600px at 50% 10%, rgba(99,102,241,.35), rgba(6,182,212,.15) 45%, rgba(0,0,0,0) 60%);
}
.grid-bg{ position:absolute; inset:0; background:
  linear-gradient(to bottom, rgba(255,255,255,.06), rgba(255,255,255,0) 30%),
  repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 80px),
  repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(80% 50% at 50% 20%, black, transparent 70%);
}

/* Layout */
.container{ width:min(1200px, 92%); margin-inline:auto; }

.site-header{ position:sticky; top:0; backdrop-filter:saturate(1.1) blur(10px); background:linear-gradient(to bottom, rgba(9,9,11,.8), rgba(9,9,11,.2)); border-bottom:1px solid var(--border); z-index:10; }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; letter-spacing:.2px; }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.nav-link{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:999px; }
.nav-link:hover{ color:var(--text); background: var(--card); }

/* Buttons */
.btn{ appearance:none; border:1px solid var(--border); border-radius:999px; padding:10px 16px; color:var(--text); background:var(--card); cursor:pointer; font-weight:600; }
.btn:hover{ background:var(--card-hover); }
.btn-primary{ border-color: transparent; background: linear-gradient(135deg, var(--primary-1), var(--primary-2)); box-shadow: 0 10px 24px rgba(99,102,241,.25);
}
.btn-primary:hover{ filter:brightness(1.05); }
.btn-ghost{ background:transparent; }
.btn-outline{ background:transparent; border-color: rgba(99,102,241,.4); color:#C7D2FE; }
.btn-outline:hover{ border-color: rgba(99,102,241,.8); }

/* Hero */
.hero{ padding:96px 0 48px; text-align:center; }
.eyebrow{ display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:14px; }
.headline{ margin:14px auto 12px; font-size: clamp(32px, 6vw, 56px); line-height:1.1; letter-spacing:-.02em; max-width: 18ch; }
.gradient-text{ background: linear-gradient(135deg, var(--primary-1), var(--primary-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.subhead{ color:var(--muted); margin:0 auto; max-width:62ch; font-size:18px; }
.cta-row{ margin-top:22px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* Features grid */
.features{ padding:72px 0; }
.section-head{ text-align:center; margin-bottom:28px; }
.section-head h2{ font-size:28px; margin:0 0 6px; }
.section-head p{ color:var(--muted); margin:0; }
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:16px; margin-top:20px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius: var(--radius); padding:18px; transition:.2s ease; }
.card:hover{ background:var(--card-hover); transform: translateY(-2px); }
.card-icon{ font-size:22px; opacity:.9; }
.card h3{ margin:10px 0 6px; font-size:18px; }
.card p{ margin:0; color:var(--muted); }

/* Showcase panel (background masks) */
.showcase{ padding:60px 0 96px; }
.panel{ position:relative; overflow:hidden; border-radius: calc(var(--radius) + 4px); border:1px solid var(--border); background: rgba(255,255,255,.02); }
.panel-bg{ position:absolute; inset:0; background:
  radial-gradient(600px 300px at 20% 0%, rgba(99,102,241,.35), rgba(0,0,0,0) 60%),
  radial-gradient(500px 300px at 80% 0%, rgba(6,182,212,.35), rgba(0,0,0,0) 60%),
  repeating-linear-gradient(to right, rgba(255,255,255,.04) 0 1px, transparent 1px 60px),
  repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 60px);
  mask-image: radial-gradient(120% 60% at 50% 10%, black, transparent 70%);
}
.panel-content{ position:relative; padding:42px; max-width:720px; }
.panel-content h2{ margin:0 0 8px; font-size:24px; }
.panel-content p{ margin:0; color:var(--muted); }
.panel-cta{ margin-top:18px; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); padding:20px 0 40px; }
.footer-top{ height:8px; }
.footer-main{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer-main .muted{ color:var(--muted); }

/* Responsive */
@media (max-width: 960px){
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .nav{ padding:12px 0; }
  .grid{ grid-template-columns: 1fr; }
  .panel-content{ padding:28px; }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}