:root {
  --bg: #0a0f1a;
  --bg-soft: #111a2b;
  --text: #ecf2ff;
  --muted: #a7b2c8;
  --primary: #66e3b3;
  --primary-strong: #38c991;
  --stroke: #22304a;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 10% -10%, #1a2c4a 0%, var(--bg) 45%), var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.container { width: min(1100px, 92%); margin: 0 auto; }

.topbar {
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(8px);
  background: rgba(10, 15, 26, 0.65);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.nav { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; }
.brand { color: var(--text); text-decoration: none; font-weight: 700; letter-spacing: .2px; }
.nav-actions { display: flex; gap: .6rem; }

.hero { padding: 5.5rem 0 3rem; }
.eyebrow { color: var(--primary); letter-spacing: .12em; font-size: .78rem; font-weight: 700; }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); line-height: 1.08; margin: .4rem 0 1rem; }
.subtitle { color: var(--muted); max-width: 760px; font-size: 1.1rem; }
.hero-actions { margin-top: 1.4rem; display: flex; gap: .8rem; flex-wrap: wrap; }

.grid { display: grid; gap: 1rem; margin: 1rem auto 2rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.card, .panel {
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 1rem 1rem 1.1rem;
}
.card h3, .panel h2 { margin: .15rem 0 .55rem; }
.panel ul { margin: .3rem 0 0; padding-left: 1.15rem; }
li { margin: .35rem 0; color: #d3dcf1; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }

.waitlist {
  margin: 2rem auto 3rem;
  background: linear-gradient(135deg, rgba(102,227,179,.1), rgba(102,227,179,.03));
  border: 1px solid #2b4a5a;
  border-radius: 16px;
  padding: 1.2rem;
}
.inline-form { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .7rem; }
input[type="email"] {
  flex: 1 1 250px;
  background: #0d1526;
  color: var(--text);
  border: 1px solid #2a3d63;
  border-radius: 10px;
  padding: .7rem .9rem;
}

.btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 10px;
  padding: .64rem .95rem;
  font-weight: 600;
  border: 1px solid transparent;
  color: var(--text);
}
.btn-primary {
  background: linear-gradient(180deg, var(--primary), var(--primary-strong));
  color: #06110c;
}
.btn-ghost {
  background: rgba(255,255,255,.02);
  border-color: #2b3d62;
}

.footer { padding: 1rem 0 2rem; color: var(--muted); font-size: .92rem; }

.demo-wrap { width: min(1100px, 92%); margin: 1.2rem auto 2rem; }
.topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; margin-top: 1rem; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.stack { display: grid; gap: .65rem; }
.row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
textarea, input[type="text"], input[type="number"], select {
  width: 100%;
  background: #0d1526;
  color: var(--text);
  border: 1px solid #2a3d63;
  border-radius: 10px;
  padding: .7rem .9rem;
}
textarea { min-height: 110px; resize: vertical; }
.profile-badge {
  background: rgba(102,227,179,.08);
  border: 1px solid #2f5f52;
  border-radius: 12px;
  padding: .7rem .85rem;
  min-width: 220px;
}
.tag {
  display: inline-block;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid #2b3d62;
  color: #c7d6f3;
  font-size: .82rem;
}
.overlay {
  position: fixed; inset: 0; background: rgba(3,8,16,.58); opacity: 0; pointer-events: none; transition: opacity .15s;
}
.overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0;
  right: -520px;
  width: min(500px, 92vw);
  height: 100vh;
  overflow: auto;
  background: #0f1828;
  border-left: 1px solid #253752;
  padding: 1rem;
  transition: right .2s;
  z-index: 9;
}
.drawer.open { right: 0; }
.notice {
  background: rgba(255,255,255,.03);
  border: 1px solid #314564;
  border-radius: 10px;
  padding: .6rem .7rem;
  color: #cfdbf2;
}
.notice.success {
  background: rgba(102,227,179,.1);
  border-color: #2f5f52;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .7rem;
}
.stat-card {
  background: rgba(255,255,255,.02);
  border: 1px solid #2b3d62;
  border-radius: 12px;
  padding: .65rem .75rem;
}
.stat-card .value {
  font-size: 1.2rem;
  font-weight: 700;
}
.timeline {
  margin: .4rem 0 0;
  padding-left: 1.2rem;
}
.timeline li {
  margin: .55rem 0;
}
.timeline li.done {
  color: #66e3b3;
}
.timeline li.pending {
  color: var(--muted);
}

@media (max-width: 640px) {
  .nav { gap: .8rem; flex-wrap: wrap; }
}