:root{
  --bg: #0b1020;
  --bg2: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --brand: #0ea5e9;
  --brand-2: #22c55e;
  --card: #0f1222;
  --line: #1e293b;
  --ring: rgba(14,165,233,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color: var(--text);
  background: radial-gradient(1200px 900px at 20% -20%, #0ea5e911, transparent),
              radial-gradient(900px 700px at 120% 0%, #22c55e11, transparent),
              linear-gradient(180deg, var(--bg), var(--bg2));
  min-height: 100vh;
  line-height: 1.6;
}

.site-header{
  position: sticky; top:0; z-index: 20;
  backdrop-filter: saturate(1.2) blur(10px);
  background: linear-gradient(180deg, rgba(11,16,32,.7), rgba(11,16,32,0));
  border-bottom: 1px solid #0b1220aa;
  display:flex; align-items:center; justify-content:space-between;
  gap: 16px; padding: 14px 24px;
}
.brand{display:inline-flex; align-items:center; gap:10px; color: var(--text); text-decoration:none; font-weight:700}
.brand-mark{display:inline-grid; place-items:center; width:28px;height:28px; border-radius:6px; background: linear-gradient(135deg,var(--brand),#38bdf8); color:#001827; font-weight:900}
.brand-name{letter-spacing:.2px}
.site-nav{display:flex; gap:16px; align-items:center}
.site-nav a{color:var(--muted); text-decoration:none; font-weight:500}
.site-nav a:hover{color:var(--text)}

.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:600; border-radius:10px; padding:12px 16px; border:1px solid transparent; transition:.2s ease}
.btn.primary{color:#04121a; background:linear-gradient(135deg,#22d3ee,#0ea5e9); box-shadow:0 10px 24px -12px var(--ring)}
.btn.primary:hover{transform: translateY(-1px); box-shadow:0 14px 28px -12px var(--ring)}
.btn.ghost{color:var(--text); border-color:#0b2944; background:rgba(6,12,24,.35)}
.btn.ghost:hover{background:rgba(6,12,24,.55)}

.hero{padding: 64px 24px 24px}
.hero-wrap{max-width:1100px; margin:0 auto; text-align:center}
.hero h1{font-size: clamp(28px, 4.2vw, 52px); line-height:1.1; margin: 8px 0}
.lead{max-width: 750px; margin: 12px auto 22px; color: var(--muted)}
.cta{display:flex; gap:12px; justify-content:center; margin: 22px 0 36px}

.hero-card{max-width: 980px; margin: 0 auto; border-radius: 16px; padding: 18px; background: linear-gradient(180deg, #0b1528, #0a0f20); border: 1px solid #0e2138; box-shadow: 0 30px 80px -30px rgba(2,8,23,.6)}
.hero-timeline{display:grid; grid-template-columns: 80px 1fr; gap:14px; min-height: 360px; background: #0b1323; border:1px solid #0f2a49; border-radius: 12px; padding: 12px; position:relative; overflow:hidden}
.time-col{display:flex; flex-direction:column; align-items:flex-end; gap: 40px; padding: 10px 8px; color:#6b91b2}
.blocks-col{position:relative}
.blocks-col::before{content:""; position:absolute; inset:0; background: repeating-linear-gradient( to bottom, transparent 0 54px, #0f2744 55px ); opacity:.7; pointer-events:none}
.block.demo{position:absolute; left:10px; right:12px; top:var(--y); height:var(--h); border-radius:10px; background: color-mix(in oklab, var(--c), #0b1220 30%); border: 1px solid color-mix(in oklab, var(--c), black 45%); box-shadow: 0 8px 22px -12px color-mix(in oklab, var(--c), black 65%); display:flex; flex-direction:column; justify-content:space-between; padding:10px 12px}
.b-head{font-weight:700}
.b-time{color:#cbd5e1; font-size: 12px}

.features{padding: 56px 24px}
.features h2, .how h2, .faq h2{ text-align:center; font-size: clamp(22px, 3.2vw, 36px)}
.grid{max-width:1100px; margin: 22px auto 0; display:grid; grid-template-columns: repeat(3,1fr); gap:16px}
.feature{background: linear-gradient(180deg, #0b1220, #0a0f1c); border:1px solid #0f2744; border-radius:12px; padding:18px}
.feature .icon{width:36px;height:36px; color:#7dd3fc}
.feature svg{width:100%;height:100%;stroke-width:1.6}
.feature h3{margin:10px 0 6px}
.feature p{color:var(--muted); margin:0}

.how{padding: 32px 24px}
.steps{max-width:1000px; margin: 12px auto 0; display:grid; grid-template-columns: repeat(3,1fr); gap:16px; list-style:none; padding:0}
.steps li{background: linear-gradient(180deg, #0b1220, #0a0f1c); border:1px solid #0f2744; border-radius:12px; padding:16px}
.steps strong{display:block; margin-bottom:6px}
.steps span{color:var(--muted)}

.faq{padding: 48px 24px}
.faq details{max-width:900px; margin:10px auto; background: linear-gradient(180deg, #0b1220, #0a0f1c); border:1px solid #0f2744; border-radius:10px; padding:14px}
.faq summary{cursor:pointer; font-weight:600}
.faq p{color:var(--muted); margin: 8px 0 0 0}

.cta-band{padding: 56px 24px; text-align:center}
.cta-band p{color:var(--muted); margin:6px 0 18px}

.site-footer{border-top:1px solid #0b1220; padding:18px 24px}
.foot-wrap{max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--muted)}
.brand-sm{display:inline-flex; align-items:center; gap:8px}

@media (max-width: 900px){
  .grid{grid-template-columns: 1fr 1fr}
  .steps{grid-template-columns: 1fr}
}
@media (max-width: 640px){
  .site-nav{display:none}
  .hero-card{margin: 10px 0}
  .grid{grid-template-columns: 1fr}
}