:root {
  --bg: #04060B;
  --raised: #0A101B;
  --line: rgba(159, 232, 255, 0.13);
  --line-strong: rgba(159, 232, 255, 0.24);
  --text: #EAF3F6;
  --dim: #8A9DAD;
  --pulse: #5EF2E0;
  --exit: #FFC86B;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden;
  margin: 0; color: var(--text);
  background: radial-gradient(1200px 700px at 50% -10%, #0C2234 0%, var(--bg) 60%) fixed, var(--bg);
  font: 17px/1.65 "Manrope", -apple-system, "Segoe UI", sans-serif;
}
a { color: var(--pulse); }
img { display: block; max-width: 100%; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; color: var(--pulse); }

.bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; border-bottom: 1px solid var(--line); }
.bar a.home { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font: 500 18px "Space Grotesk", sans-serif; }
.bar a.home img { width: 32px; height: 32px; border-radius: 8px; }
.bar nav a { color: var(--dim); text-decoration: none; margin-left: 22px; font-size: 15px; }
.bar nav a:hover { color: var(--text); }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding: 72px 0 40px; }
.hero .kicker { display: flex; align-items: center; gap: 14px; }
.hero .kicker::before { content: ""; width: 44px; height: 2px; background: var(--pulse); }
.hero h1 { font: 300 clamp(56px, 10vw, 112px)/0.92 "Space Grotesk", sans-serif; letter-spacing: -0.04em; margin: 18px 0 0; }
.hero p.lead { font-size: clamp(18px, 2.4vw, 21px); color: var(--dim); max-width: 520px; margin: 24px 0 0; }
.hero .icon { width: 100%; max-width: 360px; justify-self: center; border-radius: 22%; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 90px rgba(94, 242, 224, 0.18); }
@media (max-width: 760px) { .hero { grid-template-columns: minmax(0, 1fr); padding-top: 40px; } .hero .icon { max-width: 200px; justify-self: start; order: -1; } }

.stores { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.store {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 0 22px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: rgba(10, 16, 27, 0.6);
  color: var(--text); text-decoration: none; font: 600 16px "Space Grotesk", sans-serif; position: relative;
}
.store small { display: block; font: 400 11px "JetBrains Mono", monospace; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.store span { line-height: 1.3; }
.store svg { width: 24px; height: 24px; flex: none; color: var(--pulse); }

.shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 32px 16px 24px; margin: 0 -16px; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots img { width: 230px; aspect-ratio: 9 / 16; height: auto; border-radius: 14px; flex: none; scroll-snap-align: center; border: 1px solid var(--line); }
@media (min-width: 1040px) { .shots { justify-content: center; } .shots img { width: 156px; } }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); border-top: 1px solid var(--line); margin: 32px 0 72px; }
.feature { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line); }
.feature h3 { font: 500 22px "Space Grotesk", sans-serif; margin: 10px 0 6px; }
.feature p { margin: 0; color: var(--dim); font-size: 16px; }

.doc { max-width: 680px; margin: 0 auto; padding: 48px 0 80px; }
.doc h1 { font: 300 clamp(40px, 7vw, 60px)/1.05 "Space Grotesk", sans-serif; letter-spacing: -0.03em; margin: 10px 0 8px; }
.doc .meta { color: var(--dim); margin: 0 0 8px; }
.doc h2 { font: 500 12px "JetBrains Mono", monospace; letter-spacing: 0.2em; text-transform: uppercase; color: var(--pulse); margin: 46px 0 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.doc h3 { font: 500 19px "Space Grotesk", sans-serif; margin: 28px 0 6px; }
.doc p, .doc li { color: #C9D6DE; }
.contact { margin: 28px 0 0; }

footer { border-top: 1px solid var(--line); padding: 28px 0 48px; color: var(--dim); font-size: 14px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
footer a { color: var(--dim); text-decoration: none; margin-right: 20px; }
footer a:hover { color: var(--text); }