:root {
  color-scheme: dark;
  --bg: #0d0d14;
  --surface: #1a1a24;
  --surface-2: #232330;
  --line: rgba(0, 209, 230, .16);
  --text: #e6ebf2;
  --muted: #9aa3b0;
  --o: #00d1e6;
  --x: #f0a62e;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  line-height: 1.7;
  background:
    radial-gradient(60rem 40rem at 85% -10%, rgba(240, 166, 46, .14), transparent 60%),
    radial-gradient(50rem 36rem at -10% 10%, rgba(0, 209, 230, .12), transparent 60%),
    var(--bg);
}
a { color: var(--o); }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

.top { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: .92rem; }
.top a { color: var(--muted); text-decoration: none; }
.top a:hover { color: var(--text); }

.hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 40px 0 72px; }
.brand { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.brand img { width: 56px; height: 56px; border-radius: 14px; }
.brand span { font-weight: 600; color: var(--muted); }
h1 { font-size: clamp(2.2rem, 5.4vw, 3.8rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 18px; }
h1 em { font-style: normal; color: var(--x); }
.lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 28px; max-width: 32em; }
.cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px; border-radius: 999px; background: var(--o); color: #04232a; font-weight: 700; text-decoration: none; }
.cta:hover { background: #4debfa; }
.cta-note { display: block; margin-top: 12px; color: var(--muted); font-size: .88rem; }

.demo { justify-self: center; width: min(100%, 340px); }
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cell { aspect-ratio: 1; border-radius: 14px; background: #12121a; display: grid; place-items: center; }
.cell svg { width: 58%; height: 58%; transition: opacity .45s ease, transform .45s ease; }
.cell svg.enter { opacity: 0; transform: scale(.6); }
.cell svg.oldest { animation: blink .9s ease-in-out infinite; }
.cell svg.leave { opacity: 0; transform: scale(1.35); }
@keyframes blink { 50% { opacity: .25; } }
.demo-caption { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 14px; min-height: 1.7em; }

section { padding: 56px 0; border-top: 1px solid rgba(255, 255, 255, .06); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 16px; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
.prose { max-width: 42em; color: #c9d0da; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 28px; }
.step { padding: 22px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
.step b { display: block; font-size: 2rem; line-height: 1; margin-bottom: 10px; color: var(--x); }
.step p { margin: 0; color: #c9d0da; }

.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
.shots img { width: 100%; height: auto; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; margin: 24px 0 0; padding: 0; list-style: none; }
.features li { padding-left: 22px; position: relative; color: #c9d0da; }
.features li::before { content: ""; position: absolute; left: 0; top: .6em; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--o); }

.qa { padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.qa p { margin: 0; color: #c9d0da; }

footer { padding: 40px 0 64px; color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--muted); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 16px; }
  .steps, .shots { grid-template-columns: 1fr; }
  .shots { max-width: 260px; margin-inline: auto; }
  .features { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .cell svg, .cell svg.oldest { animation: none; transition: none; }
}

h1, h2, .lead { word-break: auto-phrase; text-wrap: pretty; }