/* Nevoa landing. Tokens match the app (style.css). One accent gradient, radius: cards 24, buttons 14, pills full. */
:root {
  --bg: #08090c;
  --fg: #eceef1;
  --muted: #9aa0a9;
  --line: rgb(255 255 255 / .09);
  --accent-grad: linear-gradient(135deg, #c4e6ff 0%, #a8d8ff 45%, #8fa8ff 100%);
  --accent-ink: #071526;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body { font: 16px/1.55 Geist, system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; max-width: 100%; }
.mono { font-family: "Geist Mono", ui-monospace, monospace; }
h1, h2, h3 { letter-spacing: -.035em; font-weight: 600; margin: 0; }
p { margin: 0; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: 68px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(16px, 4vw, 40px);
  background: linear-gradient(to bottom, rgb(8 9 12 / .7), transparent);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-weight: 600; font-size: 18px; }
.mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-grad); color: var(--accent-ink); font-size: 16px; }
.links { display: flex; gap: 28px; }
.links a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color 200ms ease; }
.links a:hover { color: var(--fg); }
.nav-right { display: flex; gap: 10px; align-items: center; }
.lang {
  height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / .05);
  color: var(--fg); font: inherit; font-size: 13px; appearance: none; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.lang option { background: #11161a; }
.btn {
  display: inline-grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 14px; text-decoration: none;
  background: var(--accent-grad); color: var(--accent-ink); font-weight: 600; font-size: 14px; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35);
  transition: transform 160ms var(--ease-out), filter 200ms ease;
}
.btn:active { transform: scale(.97); }
.btn.big { height: 52px; padding: 0 24px; font-size: 16px; }
.btn.ghost { background: rgb(255 255 255 / .08); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
@media (hover: hover) and (pointer: fine) { .btn:hover { filter: brightness(1.07); } }

/* ---------- 1. hero ---------- */
.hero { position: relative; height: 260vh; }
.hero-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; }
.layer { position: absolute; inset: -6%; width: 112%; height: 112%; max-width: none; object-fit: cover; will-change: transform; }
.layer.bg { filter: brightness(.55) saturate(.7) hue-rotate(-10deg); }
.layer.mid { opacity: .35; mix-blend-mode: screen; filter: grayscale(.4) brightness(.9); mask-image: linear-gradient(to top, #000 10%, transparent 70%); -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 70%); }
.layer.haze {
  inset: -20% auto -20% 0; width: calc(100% + 1200px); height: 140%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0035 .007' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .82 0 0 0 0 .9 0 0 0 0 1 0 0 0 1.6 -.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  background-size: 1200px 800px; opacity: .45; filter: blur(10px);
  animation: roll 80s linear infinite;
}
@keyframes roll { to { transform: translate3d(-1200px, 0, 0); } }
.hero-stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 30% 60%, transparent, rgb(8 9 12 / .75)); pointer-events: none; }
.hero-grid {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-columns: 1.3fr .7fr; align-items: center; gap: 4vw;
  padding: 96px clamp(16px, 7vw, 120px) 48px; max-width: 1480px; margin: 0 auto;
}
.hero-kanji {
  position: absolute; z-index: 1; right: -2vw; top: 50%; transform: translateY(-50%);
  font-size: min(78vh, 720px); line-height: 1; font-weight: 600; color: rgb(220 232 255 / .05);
  filter: blur(2px); pointer-events: none;
}
.live {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; margin-bottom: 22px;
  background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .1); color: #dbe6f3; font-size: 13px; text-decoration: none;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: #a8d8ff; box-shadow: 0 0 0 0 rgb(168 216 255 / .6); animation: pulse 2.2s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgb(168 216 255 / 0); } }
.hero h1 { font-size: clamp(40px, 5vw, 86px); line-height: 1.02; text-wrap: balance; }
.hero h1 .soft { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .1em; display: inline-block; }
.hero-copy p { margin-top: 20px; font-size: clamp(17px, 1.45vw, 21px); color: #d3d9e1; max-width: 40ch; }
.ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.facts { list-style: none; padding: 0; margin: 40px 0 0; display: flex; gap: clamp(20px, 3vw, 44px); }
.facts li { display: grid; gap: 2px; }
.facts strong { font-size: clamp(22px, 2vw, 30px); font-weight: 600; letter-spacing: -.02em; }
.facts span { color: #a9b2bd; font-size: 13px; }

/* live preview: the real payment card, dissolving into what the chain sees */
.demo {
  margin: 0; justify-self: end; width: min(420px, 100%); padding: 22px; border-radius: 24px; display: grid; gap: 14px;
  background: rgb(14 18 24 / .55); border: 1px solid rgb(255 255 255 / .1);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 40px 120px rgb(0 0 0 / .5);
  transform: perspective(1200px) rotateY(-8deg) rotateX(3deg);
}
.demo-head { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.chip-ok { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--accent-grad); color: var(--accent-ink); }
.demo-row { display: grid; gap: 4px; }
.demo .k { color: #8f99a6; font-size: 12px; }
.demo .v { transition: filter 500ms ease, opacity 500ms ease; }
.demo-row .v { font-size: 14px; }
.demo-amount { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px; border-radius: 14px; background: rgb(0 0 0 / .3); }
.demo-amount .v { font-size: 40px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.demo-amount .cur { color: #8f99a6; font-weight: 500; }
.demo [data-misted] { filter: blur(7px); opacity: .55; }
.demo-chain { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / .08); }
.demo-hash { color: #a8d8ff; font-size: 13px; }
.demo-bar { height: 3px; border-radius: 2px; background: rgb(255 255 255 / .08); overflow: hidden; }
.demo-bar i { display: block; height: 100%; width: 100%; background: var(--accent-grad); transform: scaleX(0); transform-origin: left; }

.whiteout { position: absolute; inset: 0; z-index: 3; background: radial-gradient(circle at 50% 55%, #dfe8f2, #b9c6d6 60%, #8d9aab); opacity: 0; pointer-events: none; }

/* ---------- 2. scatter / explosion ---------- */
.scatter { position: relative; height: 320vh; background: #b9c6d6; }
.scatter-stage {
  position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #dfe8f2 0%, #aebccd 50%, #101318 100%);
}
.scatter-copy { position: absolute; z-index: 4; text-align: center; color: #0b1018; max-width: 640px; padding: 0 16px; }
.scatter-copy h2 { font-size: clamp(36px, 5.6vw, 76px); line-height: 1; }
.scatter-copy p { margin-top: 14px; font-size: 18px; color: #2a3340; }
.shard {
  position: absolute; margin: 0; width: clamp(140px, 18vw, 280px); aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgb(10 20 35 / .35); will-change: transform, opacity;
}
.shard img { width: 100%; height: 100%; object-fit: cover; }
.shard.core { z-index: 3; width: clamp(200px, 24vw, 360px); }

/* ---------- 3. aperture ---------- */
.aperture { position: relative; height: 280vh; background: #101318; }
.aperture-stage { position: sticky; top: 0; height: 100dvh; overflow: hidden; display: grid; place-items: center; }
.aperture-window { position: absolute; inset: 0; clip-path: circle(4% at 50% 50%); will-change: clip-path; }
.aperture-window img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.6) saturate(.6); transform: scale(1.3); will-change: transform; }
.aperture-copy { position: absolute; left: clamp(16px, 7vw, 120px); bottom: 14vh; max-width: 560px; }
.aperture-copy h2 { font-size: clamp(40px, 6vw, 88px); line-height: 1; }
.aperture-copy p { margin-top: 14px; font-size: 19px; color: #c7ccd4; }

/* ---------- 4. how (horizontal) ---------- */
.how { position: relative; overflow: hidden; background: var(--bg); }
.how-track { display: flex; gap: 4vw; height: 100dvh; align-items: center; padding: 0 7vw; width: max-content; will-change: transform; }
.how-intro { width: 34vw; min-width: 300px; }
.how-intro h2 { font-size: clamp(38px, 5vw, 72px); line-height: 1; }
.step { width: min(70vw, 980px); display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; }
.step-img { height: 62vh; border-radius: 24px; overflow: hidden; }
.step-img img { width: 120%; height: 100%; object-fit: cover; filter: brightness(.75) saturate(.7); will-change: transform; }
.step .num { color: #8fa8ff; font-size: 14px; }
.step h3 { font-size: clamp(32px, 3.4vw, 52px); margin: 8px 0 12px; }
.step p { color: var(--muted); font-size: 18px; max-width: 34ch; }

/* ---------- 5. chains marquee ---------- */
.chains { padding: 18vh 0 14vh; text-align: center; }
.chains h2 { font-size: clamp(30px, 3.6vw, 52px); padding: 0 16px; margin-bottom: 56px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent); }
.marquee-row { display: flex; gap: 96px; width: max-content; animation: slide 30s linear infinite; }
.marquee-row img { height: 44px; width: auto; opacity: .75; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 6. final zoom-out ---------- */
.final { position: relative; height: 240vh; }
.final-stage { position: sticky; top: 0; height: 100dvh; display: grid; place-items: center; overflow: hidden; }
.final-frame { position: relative; width: 100vw; height: 100dvh; overflow: hidden; will-change: transform, border-radius; }
.final-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); will-change: transform; }
.final-copy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 16px; padding: 16px; background: radial-gradient(circle, rgb(8 9 12 / .1), rgb(8 9 12 / .55)); }
.final-copy h2 { font-size: clamp(44px, 7vw, 104px); line-height: 1; }
.final-copy p { color: #d3d8df; font-size: 18px; margin-bottom: 8px; }

/* ---------- faq + footer ---------- */
.faq { max-width: 720px; margin: 0 auto; padding: 16vh 16px 10vh; }
.faq h2 { font-size: clamp(30px, 3.4vw, 48px); margin-bottom: 24px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 4px; font-size: 18px; font-weight: 500; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--muted); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { color: var(--muted); padding: 0 4px 22px; max-width: 62ch; }
.foot { display: flex; justify-content: space-between; align-items: end; padding: 40px clamp(16px, 4vw, 40px); border-top: 1px solid var(--line); overflow: hidden; }
.brand.small { font-size: 15px; gap: 8px; }
.brand.small .mark { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
.kanji-foot { font-size: clamp(60px, 12vw, 180px); font-weight: 600; line-height: .8; color: rgb(255 255 255 / .05); letter-spacing: .05em; }

/* ---------- reduced motion: everything readable, nothing pinned ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero, .scatter, .aperture, .final { height: auto; }
  .hero-stage, .scatter-stage, .aperture-stage, .final-stage { position: relative; min-height: 100dvh; }
  .layer.haze, .marquee-row { animation: none; }
  .shard { display: none; }
  .shard.core { display: block; position: absolute; opacity: .25; }
  .aperture-window { clip-path: none; }
}

@media (max-width: 760px) {
  .links { display: none; }
  .step { width: 86vw; grid-template-columns: 1fr; gap: 20px; }
  .step-img { height: 44vh; }
  .how-intro { width: 80vw; }
  .hero-grid { grid-template-columns: 1fr; align-content: center; gap: 28px; padding-top: 88px; }
  .demo { justify-self: start; transform: none; padding: 16px; }
  .demo-amount .v { font-size: 30px; }
  .facts { margin-top: 28px; }
  .hero-kanji { display: none; }
}