/* The landing page: a night on Mount Kurama, in the palette of the TUI. */
:root {
  --night-0: #07101f;
  --night-1: #0c1d36;
  --night-2: #132a4a;
  --line: #1b3a63;
  --ruri: #1e50a2;
  --tsuyukusa: #38a1db;
  --asagi: #9cc7e6;
  --moon: #eaf4fc;
  --shu: #e0533f;
  --kerria: #f5b83d;
  --bamboo: #7fc66a;
  --text: #d6e4f0;
  --muted: #8fa9c2;
  --wrap: 74rem;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", sans-serif;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night-0);
  color: var(--text);
  font: 16px/1.65 var(--sans);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tsuyukusa); text-decoration: none; }
a:hover { text-decoration: underline; }
code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }
code { color: var(--moon); background: var(--night-2); padding: 0.1em 0.35em; border-radius: 4px; }
kbd { color: var(--moon); border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.3em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: 1.25rem; }

/* Top bar */
header.top {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background 0.4s, border-color 0.4s;
}
header.top.scrolled { background: rgba(7, 16, 31, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--line); }
header.top .wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-block: 0.8rem; }
.brand { display: flex; align-items: center; gap: 0.6rem; color: var(--moon); font-weight: 700; letter-spacing: 0.04em; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 7px; }
nav { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-left: auto; font-size: 0.95rem; }
nav a { color: var(--asagi); position: relative; }
nav a:hover { text-decoration: none; color: var(--moon); }
nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: var(--tsuyukusa); transform: scaleX(0); transform-origin: left; transition: transform 0.3s;
}
nav a:hover::after { transform: scaleX(1); }
nav .kanji { color: var(--tsuyukusa); margin-right: 0.3em; }

/* Hero */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(120% 80% at 70% 10%, #17345c 0%, #0b1a31 45%, var(--night-0) 80%);
}
#sky { position: absolute; inset: 0; width: 100%; height: 100%; }
.moon {
  position: absolute; top: 14%; right: 14%; width: clamp(90px, 13vw, 190px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #f7fbfe 0%, #d9e9f5 55%, #a9c9e2 100%);
  animation: moonglow 6s ease-in-out infinite alternate;
  will-change: transform;
}
.moon::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 60%, rgba(120, 160, 195, 0.35) 0 9%, transparent 10%),
    radial-gradient(circle at 62% 30%, rgba(120, 160, 195, 0.28) 0 7%, transparent 8%),
    radial-gradient(circle at 66% 68%, rgba(120, 160, 195, 0.22) 0 5%, transparent 6%);
}
@keyframes moonglow {
  from { box-shadow: 0 0 50px 14px rgba(56, 161, 219, 0.22), 0 0 140px 50px rgba(56, 161, 219, 0.10); }
  to   { box-shadow: 0 0 80px 26px rgba(56, 161, 219, 0.36), 0 0 200px 80px rgba(56, 161, 219, 0.16); }
}
.ridges { position: absolute; inset: auto 0 0 0; height: 62%; pointer-events: none; }
.ridges svg { position: absolute; inset: auto 0 0 0; width: 100%; height: 100%; will-change: transform; }
.mist {
  position: absolute; left: -20%; right: -20%; height: 18%; pointer-events: none; filter: blur(18px); opacity: 0.55;
  background: radial-gradient(50% 50% at 50% 50%, rgba(156, 199, 230, 0.20), transparent 70%);
  animation: drift 38s linear infinite alternate;
}
.mist.m1 { bottom: 26%; }
.mist.m2 { bottom: 12%; animation-duration: 52s; animation-direction: alternate-reverse; opacity: 0.4; }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(8%); } }
.waves {
  position: absolute; inset: auto 0 0 0; height: 56px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='%230c1d36' stroke='%2338a1db' stroke-width='1.3' stroke-opacity='0.55'%3E%3Ccircle cx='0' cy='20' r='19'/%3E%3Ccircle cx='0' cy='20' r='13'/%3E%3Ccircle cx='0' cy='20' r='7'/%3E%3Ccircle cx='40' cy='20' r='19'/%3E%3Ccircle cx='40' cy='20' r='13'/%3E%3Ccircle cx='40' cy='20' r='7'/%3E%3Ccircle cx='20' cy='30' r='19'/%3E%3Ccircle cx='20' cy='30' r='13'/%3E%3Ccircle cx='20' cy='30' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 20px;
  animation: waves 14s linear infinite;
  mask-image: linear-gradient(180deg, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
}
@keyframes waves { to { background-position: 40px 0; } }

.hero-copy { position: relative; z-index: 2; text-align: center; padding: 7rem 1.25rem 9rem; max-width: 56rem; }
.kanji-title {
  font-family: var(--serif); font-size: clamp(4.5rem, 16vw, 10rem); line-height: 1; margin: 0;
  color: var(--moon); letter-spacing: 0.08em; text-shadow: 0 0 40px rgba(56, 161, 219, 0.45);
}
.kanji-title span { display: inline-block; opacity: 0; transform: translateY(30px); filter: blur(10px); animation: rise 1.4s var(--ease) forwards; }
.kanji-title span:nth-child(2) { animation-delay: 0.25s; }
.latin {
  margin: 0.6rem 0 1.6rem; letter-spacing: 0.6em; text-indent: 0.6em; color: var(--asagi);
  font-size: clamp(0.85rem, 2vw, 1.05rem); opacity: 0; animation: fade 1.2s 0.8s forwards;
}
.hero h1 {
  font-size: clamp(1.6rem, 4.4vw, 2.9rem); line-height: 1.2; margin: 0 0 1rem; color: var(--moon);
  opacity: 0; transform: translateY(24px); animation: rise 1.2s 1.1s var(--ease) forwards;
}
.hero .lead {
  font-size: clamp(1.02rem, 2.3vw, 1.25rem); color: var(--asagi); margin: 0 auto 2.2rem; max-width: 40rem;
  opacity: 0; transform: translateY(24px); animation: rise 1.2s 1.35s var(--ease) forwards;
}
.hero .actions { opacity: 0; transform: translateY(24px); animation: rise 1.2s 1.6s var(--ease) forwards; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }
@keyframes fade { to { opacity: 1; } }
.grad {
  background: linear-gradient(90deg, var(--asagi), var(--tsuyukusa), #7cc4ee, var(--asagi));
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 8s linear infinite;
}
@keyframes sheen { to { background-position: 300% 0; } }

.install {
  display: flex; align-items: center; gap: 0.75rem; max-width: 34rem; margin: 0 auto 1.3rem;
  background: rgba(12, 29, 54, 0.75); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px; padding: 0.65rem 0.7rem 0.65rem 1.1rem; text-align: left;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.install pre { margin: 0; overflow-x: auto; flex: 1; color: var(--moon); }
.install pre::before { content: "$ "; color: var(--tsuyukusa); }
button.copy {
  flex: none; cursor: pointer; font: inherit; font-size: 0.82rem;
  color: var(--moon); background: var(--ruri); border: 0; border-radius: 7px; padding: 0.4rem 0.85rem;
  transition: background 0.2s, transform 0.15s;
}
button.copy:hover { background: #2a62bd; }
button.copy:active { transform: scale(0.95); }
button.copy.done { background: #2f7d4f; }
.cta { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
.btn {
  position: relative; overflow: hidden; display: inline-block;
  padding: 0.7rem 1.35rem; border-radius: 10px; border: 1px solid rgba(56, 161, 219, 0.6); color: var(--moon);
  background: rgba(12, 29, 54, 0.5); transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--tsuyukusa); box-shadow: 0 8px 30px rgba(56, 161, 219, 0.25); }
.btn.primary { background: linear-gradient(135deg, #2a62bd, var(--ruri)); border-color: transparent; }
.btn.primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  animation: shine 3.8s 2.5s ease-in-out infinite;
}
@keyframes shine { 0% { transform: translateX(-120%); } 35%, 100% { transform: translateX(120%); } }
.scroll-cue {
  position: absolute; left: 50%; bottom: 76px; z-index: 3; width: 24px; height: 38px; margin-left: -12px;
  border: 1.5px solid rgba(156, 199, 230, 0.6); border-radius: 14px; opacity: 0; animation: fade 1s 2.4s forwards;
}
.scroll-cue::before {
  content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px;
  background: var(--asagi); animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* Marquee */
.marquee {
  border-block: 1px solid var(--line); background: var(--night-1); overflow: hidden; padding-block: 1rem;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee .track { display: flex; gap: 0.8rem; width: max-content; animation: marquee 48s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
.chip {
  flex: none; padding: 0.35rem 0.9rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--asagi); font-size: 0.9rem; white-space: nowrap; background: rgba(19, 42, 74, 0.5);
}
.chip b { color: var(--tsuyukusa); font-weight: 600; margin-right: 0.35em; }
@keyframes marquee { to { transform: translateX(calc(-50% - 0.4rem)); } }

/* Sections */
section { position: relative; padding-block: 6rem; }
section.tight { padding-block: 3rem 5rem; }
section.band { background: linear-gradient(180deg, transparent, rgba(12, 29, 54, 0.7), transparent); }
.eyebrow { color: var(--tsuyukusa); letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.8rem; margin: 0 0 0.6rem; }
h2 { font-size: clamp(1.8rem, 4.2vw, 2.8rem); line-height: 1.15; color: var(--moon); margin: 0 0 1rem; }
h2 .kanji { color: var(--tsuyukusa); margin-right: 0.35em; font-weight: 400; font-family: var(--serif); }
.intro { color: var(--muted); max-width: 44rem; margin: 0 0 2.8rem; font-size: 1.05rem; }
.center { text-align: center; }
.center .intro, .final .intro { margin-inline: auto; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: var(--d, 0s); }
.reveal.in { opacity: 1; transform: none; }

/* Agent demo */
.demo { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: stretch; }
.chat {
  background: linear-gradient(180deg, rgba(19, 42, 74, 0.6), rgba(12, 29, 54, 0.6));
  border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; gap: 1rem;
}
.bubble { border-radius: 14px; padding: 0.8rem 1rem; max-width: 92%; line-height: 1.5; transition: opacity 0.5s, transform 0.5s var(--ease); }
.bubble.user { align-self: flex-end; background: var(--ruri); color: var(--moon); border-bottom-right-radius: 4px; }
.bubble.agent { align-self: flex-start; background: var(--night-2); border-bottom-left-radius: 4px; }
.bubble.hidden { opacity: 0; transform: translateY(10px); }
.who { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.2rem; letter-spacing: 0.05em; }
.bubble.user .who { color: #b9cff0; }
.scene-dots { display: flex; gap: 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.scene-dots button {
  width: 38px; height: 5px; border: 0; border-radius: 3px; background: var(--line); cursor: pointer; padding: 0; position: relative; overflow: hidden;
}
.scene-dots button.done { background: #2e5f8f; }
.scene-dots button.on::after {
  content: ""; position: absolute; inset: 0; background: var(--tsuyukusa); transform-origin: left; transform: scaleX(var(--p, 0));
}

.term {
  background: #050c18; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(56, 161, 219, 0.08);
  display: flex; flex-direction: column; min-height: 22rem;
}
.term-bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 0.9rem; background: #0a1628; border-bottom: 1px solid var(--line); }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.term-bar i:nth-child(1) { background: var(--shu); }
.term-bar i:nth-child(2) { background: var(--kerria); }
.term-bar i:nth-child(3) { background: var(--bamboo); }
.term-bar span { margin-left: 0.6rem; color: var(--muted); font: 0.8rem var(--mono); }
.term pre {
  margin: 0; padding: 1.1rem 1.2rem; flex: 1; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 0.88rem/1.7 var(--mono); color: var(--text);
}
.t-p { color: var(--tsuyukusa); }
.t-cmd { color: var(--moon); }
.t-out { color: #b8cbe0; }
.t-dim { color: #6f89a6; }
.t-err { color: #ff8a78; }
.t-hint { color: var(--kerria); }
.caret { display: inline-block; width: 0.55em; height: 1.1em; vertical-align: -0.2em; background: var(--tsuyukusa); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Flow diagram */
.flow-wrap { overflow-x: auto; }
.flow { width: 100%; min-width: 640px; height: auto; display: block; }
.flow .node rect { fill: var(--night-1); stroke: var(--line); stroke-width: 1.5; }
.flow .node text { fill: var(--text); font: 600 15px var(--sans); }
.flow .node .sub { fill: var(--muted); font-weight: 400; font-size: 12px; }
.flow .node .small { font-size: 13px; font-weight: 500; }
.flow .vault rect { stroke: rgba(245, 184, 61, 0.6); }
.flow .core rect { fill: url(#coreFill); stroke: var(--tsuyukusa); stroke-width: 2; }
.flow .core .core-pulse { fill: none; transform-box: fill-box; transform-origin: center; animation: pulse 3s ease-out infinite; }
.flow .core-kanji { fill: var(--moon); font: 26px var(--serif); }
.flow .core-latin { fill: var(--asagi); font: 600 13px var(--sans); letter-spacing: 0.3em; }
@keyframes pulse { 0% { opacity: 0.6; transform: scale(1); } 100% { opacity: 0; transform: scale(1.22); } }
.flow .wire { fill: none; stroke: #23456f; stroke-width: 2; }
.flow .wire.live { stroke: rgba(56, 161, 219, 0.45); stroke-dasharray: 6 8; animation: dash 1.6s linear infinite; }
.flow .wire.secret { stroke: rgba(245, 184, 61, 0.45); stroke-dasharray: 4 6; animation: dash 1.2s linear infinite reverse; }
@keyframes dash { to { stroke-dashoffset: -28; } }
.flow .wall { stroke: var(--shu); stroke-width: 2; stroke-dasharray: 3 5; opacity: 0.75; }
.flow .wall-label { fill: var(--shu); font: 600 11px var(--mono); letter-spacing: 0.08em; }
.legend { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.4rem; color: var(--muted); font-size: 0.92rem; }
.legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5em; }
.legend .l-cmd::before { background: var(--tsuyukusa); box-shadow: 0 0 8px var(--tsuyukusa); }
.legend .l-sec::before { background: var(--kerria); box-shadow: 0 0 8px var(--kerria); }
.legend .l-res::before { background: var(--bamboo); box-shadow: 0 0 8px var(--bamboo); }

/* Promises */
.promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; }
.promise { border-left: 2px solid var(--tsuyukusa); padding: 0.3rem 0 0.3rem 1.1rem; }
.promise .big { font: 700 clamp(2.4rem, 5vw, 3.4rem)/1 var(--sans); color: var(--moon); text-shadow: 0 0 30px rgba(56, 161, 219, 0.4); }
.promise p { margin: 0.5rem 0 0; color: var(--muted); }

/* Feature cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.1rem; }
.card {
  position: relative; overflow: hidden; border-radius: 16px; padding: 1.5rem 1.5rem 1.4rem;
  background: rgba(12, 29, 54, 0.7); border: 1px solid var(--line);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), border-color 0.35s, box-shadow 0.35s;
  transition-delay: var(--d, 0s), var(--d, 0s), 0s, 0s;
}
.card.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.card.in.tilting { transition: transform 0.15s linear, border-color 0.35s, box-shadow 0.35s; }
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(56, 161, 219, 0.18), transparent 60%);
}
.card:hover { border-color: rgba(56, 161, 219, 0.55); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
.card:hover::before { opacity: 1; }
.card .icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(56, 161, 219, 0.25), rgba(30, 80, 162, 0.25)); border: 1px solid rgba(56, 161, 219, 0.35);
}
.card .icon svg { width: 22px; height: 22px; stroke: var(--asagi); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { margin: 0 0 0.45rem; font-size: 1.1rem; color: var(--moon); }
.card p { margin: 0; font-size: 0.96rem; }

/* Showcase */
.tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1.6rem; }
.tabs button {
  font: inherit; cursor: pointer; color: var(--asagi); background: transparent; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.5rem 1.1rem; transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.tabs button:hover { border-color: var(--tsuyukusa); color: var(--moon); }
.tabs button[aria-selected="true"] { background: var(--ruri); border-color: var(--ruri); color: var(--moon); box-shadow: 0 6px 24px rgba(30, 80, 162, 0.45); }
.stage {
  border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #050c18;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), 0 0 80px rgba(56, 161, 219, 0.1);
}
.stage img { width: 100%; transition: opacity 0.3s; }
.stage img.swap { opacity: 0; }
.stage-caption { color: var(--muted); margin-top: 1rem; min-height: 1.6em; }

/* Quick start */
.steps { display: grid; gap: 1.1rem; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1.1rem; align-items: start;
  background: rgba(12, 29, 54, 0.6); border: 1px solid var(--line); border-radius: 16px; padding: 1.3rem;
}
.step::before {
  counter-increment: step; content: counter(step);
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  font: 700 1.2rem var(--mono); color: var(--moon); background: linear-gradient(135deg, var(--tsuyukusa), var(--ruri));
  box-shadow: 0 0 24px rgba(56, 161, 219, 0.35);
}
.step h3 { margin: 0.35rem 0 0.7rem; color: var(--moon); font-size: 1.1rem; }
.step p { margin: 0.7rem 0 0; color: var(--muted); font-size: 0.93rem; }
.step p code { overflow-wrap: anywhere; }
.code { position: relative; }
.code pre {
  margin: 0; background: #050c18; border: 1px solid var(--line); border-radius: 10px;
  padding: 0.95rem 5rem 0.95rem 1.1rem; overflow-x: auto; color: var(--moon); line-height: 1.75; font-size: 0.86rem;
}
.code .copy { position: absolute; top: 0.55rem; right: 0.55rem; }
.c { color: #6f89a6; }
.p { color: var(--tsuyukusa); user-select: none; }

/* Vision, closing call, footer */
.vision { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3rem; align-items: center; }
.logo-float { width: clamp(140px, 22vw, 220px); border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 60px rgba(56, 161, 219, 0.2); }
.logo-float.in { animation: float 7s ease-in-out 1s infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-14px) rotate(1deg); } }
.vision p { font-size: 1.05rem; }
.final {
  text-align: center; padding-block: 6rem 7rem;
  background: radial-gradient(60% 70% at 50% 100%, rgba(30, 80, 162, 0.35), transparent 70%);
}
footer { border-top: 1px solid var(--line); padding-block: 2rem; color: var(--muted); font-size: 0.9rem; }
footer .wrap { display: flex; gap: 1rem 2rem; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 860px) {
  .demo { grid-template-columns: 1fr; }
  .vision { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
@media (max-width: 640px) {
  header.top { background: rgba(7, 16, 31, 0.82); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  nav { margin-left: 0; gap: 0.9rem; font-size: 0.88rem; }
  .install { flex-direction: column; align-items: stretch; }
  button.copy { align-self: flex-end; }
  .step { grid-template-columns: minmax(0, 1fr); }
  section { padding-block: 4.5rem; }
  .moon { top: 13%; right: 5%; width: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; transition-delay: 0s !important; }
  .reveal { opacity: 1; transform: none; }
}