/* Hero */
.hero{padding:56px 0}
.hero .grid{display:grid;gap:28px;grid-template-columns:1.2fr .8fr}
.hero .pitch{padding:28px}
.eyebrow{display:inline-block;padding:6px 10px;border-radius:999px;background:#0e1821;border:1px solid var(--border);color:var(--muted);font-size:12px;letter-spacing:.3px;text-transform:uppercase}
h1{margin:.5rem 0 1rem;font-size:40px;line-height:1.15}
.lead{color:var(--muted);font-size:18px}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}

.hero .preview{padding:0;overflow:hidden}
.preview .frame{aspect-ratio:16/9;background:radial-gradient(1200px 400px at 20% -20%, rgba(0,205,214,.12), transparent), linear-gradient(#0e141b,#0b0f14);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);display:grid;place-items:center}
.preview .tag{margin-top:8px;padding:10px 14px;border-top:1px solid var(--border);background:#0d141b;color:var(--muted);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius)}

/* Features */
.section h2{font-size:28px;margin:0 0 12px}
.features{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.feature{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--border)}
.kicker{font-size:13px;color:var(--accent2);letter-spacing:.2px;text-transform:uppercase}

/* Tiles */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(3,1fr)}
.tile{padding:20px;border-radius:14px;background:linear-gradient(180deg,#0e1620,#0c1117);border:1px solid var(--border);text-decoration:none;color:var(--text);transition:border-color 0.3s ease}
.tile:hover{border-color:var(--accent);text-decoration:none}
.tile h3{margin:0 0 6px}

/* How it works */
.steps{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
.step{padding:18px;border-radius:14px;background:var(--card);border:1px solid var(--border)}
.step .num{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:999px;background:var(--accent);color:#032227;font-weight:800;margin-right:8px}

/* FAQ */
details{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:8px}
summary{cursor:pointer;font-weight:600}

/* Responsive */
@media (max-width: 1024px){
  .hero .grid, .features, .tiles, .steps{grid-template-columns:1fr}
  h1{font-size:34px}
}