/* aoko client — forest-night landing page */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #050b17;
  --bg-deep: #020711;
  --surface: rgba(11, 29, 42, 0.76);
  --surface-solid: #0b1d2a;
  --surface-raised: #10283a;
  --line: rgba(142, 177, 204, 0.18);
  --line-strong: rgba(157, 176, 255, 0.38);
  --text: #edf3f7;
  --muted: #9cafbc;
  --dim: #698092;
  --accent: #7f9eff;
  --accent-bright: #9db0ff;
  --accent-deep: #2b3a86;
  --ok: #8ec9ac;
  --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'Manrope', system-ui, sans-serif;
  --maxw: 1120px;
  --scene-progress: 0;
  --moon-shift-x: 0vw;
  --moon-shift-y: 0vh;
  --light-strength: 1;
  --light-sweep: 0deg;
  --moon-brightness: 1.08;
  --moon-glow: 0.34;
  --moon-halo: 0.19;
  --scene-opacity: 1;
  --haze-opacity: 0.74;
  --beam-one-opacity: 0.43;
  --beam-two-opacity: 0.30;
  --stars-one-y: 0vh;
  --stars-two-y: 0vh;
  --haze-y: 0vh;
  --forest-far-y: 0vh;
  --forest-mid-y: 0vh;
  --forest-near-y: 0vh;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  overflow-x: hidden;
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(60% 44% at 88% 4%, rgba(43, 58, 134, 0.28), transparent 76%),
    radial-gradient(42% 44% at 4% 52%, rgba(32, 84, 93, 0.16), transparent 78%),
    linear-gradient(180deg, #050d1c 0%, var(--bg) 42%, var(--bg-deep) 100%);
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.08;
  background: radial-gradient(circle at 20% 20%, rgba(255,255,255,0.8) 0 0.7px, transparent 0.9px) 0 0 / 38px 38px;
  mask-image: linear-gradient(180deg, #000, transparent 78%);
}

a { color: inherit; text-decoration: none; }
b { color: var(--text); font-weight: 700; }

code {
  font-family: var(--font-mono);
  color: var(--accent-bright);
  background: rgba(16, 40, 58, 0.78);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 0.84em;
}

::selection { background: var(--accent); color: var(--bg-deep); }

/* CINEMATIC MOONLIT SCENE */
.site-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--scene-opacity);
  background: #050b17;
  isolation: isolate;
}

.scene-sky,
.scene-haze,
.scene-stars,
.scene-vignette {
  position: absolute;
  inset: 0;
}

.scene-sky {
  z-index: 0;
  background:
    radial-gradient(58% 54% at 78% 8%, rgba(72, 100, 182, 0.22), transparent 72%),
    radial-gradient(48% 66% at 18% 65%, rgba(19, 66, 92, 0.17), transparent 80%),
    linear-gradient(180deg, #061020 0%, #071321 48%, #030914 100%);
}

.scene-stars {
  z-index: 1;
  opacity: 0.42;
  background-repeat: repeat;
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.84) 42%, transparent 80%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.84) 42%, transparent 80%);
}

.scene-stars-one {
  background-image:
    radial-gradient(circle at 14px 18px, rgba(231, 239, 255, 0.84) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88px 56px, rgba(185, 204, 255, 0.55) 0 0.8px, transparent 1.4px),
    radial-gradient(circle at 166px 32px, rgba(231, 239, 255, 0.64) 0 0.9px, transparent 1.4px);
  background-size: 212px 126px;
  transform: translate3d(0, var(--stars-one-y), 0);
}

.scene-stars-two {
  opacity: 0.24;
  background-image:
    radial-gradient(circle at 46px 92px, rgba(151, 186, 255, 0.72) 0 1px, transparent 1.5px),
    radial-gradient(circle at 142px 42px, rgba(238, 244, 255, 0.58) 0 0.7px, transparent 1.2px),
    radial-gradient(circle at 208px 116px, rgba(190, 211, 255, 0.52) 0 0.8px, transparent 1.3px);
  background-size: 286px 168px;
  transform: translate3d(0, var(--stars-two-y), 0);
}

.scene-haze {
  z-index: 2;
  opacity: var(--haze-opacity);
  background:
    radial-gradient(42% 22% at 75% 38%, rgba(134, 168, 239, 0.16), transparent 72%),
    radial-gradient(56% 32% at 50% 76%, rgba(53, 99, 139, 0.15), transparent 76%);
  filter: blur(22px);
  transform: translate3d(0, var(--haze-y), 0);
}

.moon {
  position: absolute;
  top: clamp(88px, 11vh, 128px);
  right: clamp(9%, 12vw, 17%);
  z-index: 4;
  width: clamp(84px, 7.5vw, 132px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,0.96) 0 5%, transparent 17%),
    radial-gradient(circle at 62% 34%, rgba(86, 103, 133, 0.35) 0 8%, transparent 9%),
    radial-gradient(circle at 39% 64%, rgba(75, 91, 121, 0.32) 0 11%, transparent 12%),
    radial-gradient(circle at 72% 70%, rgba(70, 85, 114, 0.24) 0 7%, transparent 8%),
    radial-gradient(circle at 42% 42%, #f4f7ff 0%, #dbe5f7 38%, #aebbd0 72%, #72819b 100%);
  box-shadow:
    0 0 0 7px rgba(207, 224, 255, 0.045),
    0 0 38px 12px rgba(188, 211, 255, var(--moon-glow)),
    0 0 160px 58px rgba(134, 166, 239, var(--moon-halo));
  filter: brightness(var(--moon-brightness));
  transform: translate3d(var(--moon-shift-x), var(--moon-shift-y), 0);
  will-change: transform, filter;
}

.moon-craters {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  opacity: 0.34;
  background:
    radial-gradient(circle at 27% 38%, rgba(78, 92, 120, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 22%, rgba(90, 103, 128, 0.30) 0 8%, transparent 9%),
    radial-gradient(circle at 70% 58%, rgba(72, 87, 114, 0.30) 0 10%, transparent 11%),
    radial-gradient(circle at 37% 76%, rgba(94, 107, 132, 0.25) 0 7%, transparent 8%);
  mix-blend-mode: multiply;
}

.moon-beam {
  position: absolute;
  top: 10%;
  right: clamp(4%, 8vw, 12%);
  z-index: 3;
  width: clamp(360px, 42vw, 680px);
  height: 72vh;
  transform-origin: top right;
  opacity: var(--beam-one-opacity);
  filter: blur(34px);
  mix-blend-mode: screen;
  will-change: transform, opacity;
}

.moon-beam-one {
  background: radial-gradient(ellipse 118% 92% at 100% 0%, rgba(205, 222, 255, 0.25) 0%, rgba(170, 199, 255, 0.1) 42%, transparent 76%);
  transform: rotate(calc(-8deg + var(--light-sweep)));
}

.moon-beam-two {
  right: clamp(8%, 14vw, 20%);
  width: clamp(230px, 28vw, 430px);
  opacity: var(--beam-two-opacity);
  background: radial-gradient(ellipse 126% 88% at 100% 0%, rgba(140, 181, 255, 0.18) 0%, rgba(112, 155, 235, 0.07) 43%, transparent 78%);
  transform: rotate(calc(8deg + var(--light-sweep) * -0.7));
}

.forest-layer {
  position: absolute;
  left: 50%;
  bottom: -2vh;
  width: max(1240px, 126vw);
  height: auto;
  aspect-ratio: 3 / 1;
  z-index: 5;
  transform: translate3d(-50%, var(--layer-offset-y), 0);
  transform-origin: center bottom;
  will-change: transform;
}

.forest-layer img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.forest-far {
  --layer-offset-y: var(--forest-far-y);
  z-index: 4;
  width: max(1200px, 118vw);
  height: auto;
  aspect-ratio: 1983 / 793;
  opacity: 0.32;
  filter: blur(1.1px) saturate(0.7) brightness(0.72);
}

.forest-mid {
  --layer-offset-y: var(--forest-mid-y);
  z-index: 5;
  aspect-ratio: 1920 / 819;
  opacity: 0.5;
  filter: saturate(0.76) brightness(0.62) contrast(1.04);
}

.forest-near {
  --layer-offset-y: var(--forest-near-y);
  z-index: 7;
  width: max(1380px, 146vw);
  height: auto;
  aspect-ratio: 1807 / 870;
  bottom: -12vh;
  opacity: 0.7;
  filter: saturate(0.74) brightness(0.5) contrast(1.08);
}

.scene-vignette {
  z-index: 8;
  background:
    linear-gradient(180deg, rgba(1, 5, 13, 0.18) 0%, transparent 22%, transparent 68%, rgba(1, 5, 13, 0.64) 100%),
    linear-gradient(90deg, rgba(0, 4, 12, 0.34), transparent 23%, transparent 77%, rgba(0, 4, 12, 0.34));
}

nav,
.hero,
.section,
footer {
  position: relative;
  z-index: 10;
}

/* NAV */
nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(4, 10, 20, 0.68);
  border-bottom: 1px solid rgba(142, 177, 204, 0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1.5rem;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-mini {
  display: inline-flex;
  align-items: baseline;
  gap: 0.22rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.logo-mini::before {
  content: '';
  width: 20px;
  height: 20px;
  margin-right: 0.35rem;
  background: url('favicon-32x32.png') no-repeat center / contain;
  display: inline-block;
  align-self: center;
}

.dot { color: var(--accent-bright); }
nav ul { list-style: none; display: flex; align-items: center; gap: 1.45rem; }
nav ul a {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}
nav ul a:hover { color: var(--text); }

.nav-dl {
  color: var(--text) !important;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 8px 15px;
  background: rgba(43, 58, 134, 0.24);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.nav-dl:hover { border-color: var(--accent-bright); background: rgba(43, 58, 134, 0.46); transform: translateY(-1px); }

/* HERO */
.hero {
  position: relative;
  max-width: var(--maxw);
  min-height: min(900px, 100vh);
  margin: 0 auto;
  padding: 154px 1.5rem 112px;
  isolation: isolate;
}

.hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 420px;
  height: 420px;
  top: 100px;
  left: -170px;
  border-radius: 50%;
  background: rgba(22, 88, 93, 0.14);
  filter: blur(70px);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  left: -40vw;
  right: -40vw;
  bottom: -1px;
  height: 220px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(3, 8, 16, 0.16) 55%, transparent 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(360px, 0.9fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
}

.hero-left {
  position: relative;
  z-index: 0;
  max-width: 560px;
  isolation: isolate;
}

.hero-left::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -5rem -7rem -5rem -8rem;
  background: url('screenshots/121_gui.png') center / contain no-repeat;
  opacity: 0.07;
  filter: saturate(0.65) brightness(0.82) contrast(0.92);
  transform: rotate(-5deg) scale(1.04);
  transform-origin: center;
  mix-blend-mode: screen;
  mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,0.72) 54%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 28%, rgba(0,0,0,0.72) 54%, transparent 82%);
  pointer-events: none;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
  color: var(--accent-bright);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.kick-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(142, 201, 172, 0.12);
}

.hero-logo {
  margin-bottom: 1.45rem;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(4rem, 7.4vw, 7.2rem);
  font-weight: 600;
  letter-spacing: -0.08em;
  line-height: 0.9;
  white-space: nowrap;
}
.hero-logo span { color: var(--accent-bright); }

.tagline {
  max-width: 48ch;
  margin-bottom: 2.15rem;
  color: var(--muted);
  font-size: 1.03rem;
  line-height: 1.8;
}

.hero-btns { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  justify-content: center;
  padding: 12px 20px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: #f5f7ff;
  background: linear-gradient(135deg, rgba(72, 106, 200, 0.78), rgba(43, 58, 134, 0.72));
  box-shadow: 0 14px 30px -18px rgba(82, 127, 241, 0.85);
  font-size: 0.84rem;
  font-weight: 800;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary:hover { border-color: var(--accent-bright); background: linear-gradient(135deg, rgba(82, 127, 241, 0.92), rgba(43, 58, 134, 0.86)); transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(82, 127, 241, 0.95); }
.btn-primary:active { transform: translateY(0); }

.btn-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
  transition: color 0.2s ease;
}
.btn-text:hover { color: var(--text); }
.btn-text .arrow { color: var(--accent-bright); transition: transform 0.2s ease; }
.btn-text:hover .arrow { transform: translateY(3px); }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.25rem;
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 700;
}
.hero-meta i { margin-right: 0.35rem; color: var(--dim); font-style: normal; font-weight: 500; }

/* PREVIEW LAUNCHER */
.launcher {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(157, 176, 255, 0.28);
  border-radius: 22px;
  background: rgba(9, 25, 37, 0.78);
  box-shadow: 0 34px 80px -38px rgba(0,0,0,0.9), 0 0 0 1px rgba(255,255,255,0.025);
  backdrop-filter: blur(12px);
}
.launcher::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  bottom: -130px;
  border-radius: 50%;
  background: rgba(74, 106, 200, 0.2);
  filter: blur(26px);
  pointer-events: none;
}
.launcher-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 13px 16px;
  border-bottom: 1px solid rgba(142, 177, 204, 0.15);
  background: rgba(16, 40, 58, 0.62);
}
.tl-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(237,243,247,0.16); }
.tl-dot:nth-child(1) { background: #6d85db; }
.launcher-title { margin-left: 8px; color: var(--dim); font-size: 0.7rem; font-weight: 700; }
.launcher-screen {
  position: relative;
  min-height: 270px;
  padding: 34px 30px 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(150deg, rgba(16, 40, 58, 0.78), rgba(7, 19, 29, 0.92));
  overflow: hidden;
}
.launcher-glow { position: absolute; inset: auto -30% -65% auto; width: 75%; height: 135%; background: radial-gradient(circle, rgba(127,158,255,0.22), transparent 67%); filter: blur(20px); pointer-events: none; }
.launcher-copy { position: relative; z-index: 1; }
.launcher-kicker { margin-bottom: 0.65rem; color: var(--accent-bright); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.11em; text-transform: uppercase; }
.launcher-lead { max-width: 29ch; color: var(--text); font-family: var(--font-display); font-size: 1.35rem; line-height: 1.25; }
.launcher-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--text);
  background: rgba(43, 58, 134, 0.32);
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.launcher-btn:hover { border-color: var(--accent-bright); background: rgba(82, 127, 241, 0.42); transform: translateY(-2px); box-shadow: 0 14px 26px -18px rgba(127,158,255,0.9); }
.launcher-btn:active { transform: translateY(0); }
.launcher-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; }
.launcher-btn-icon { color: var(--accent-bright); font-size: 0.78rem; }
.launcher-hint { position: relative; z-index: 1; color: var(--dim); font-size: 0.68rem; font-weight: 600; }

/* SECTIONS */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 104px 1.5rem;
  background: transparent;
}
.section-head { max-width: 640px; margin-bottom: 2.8rem; }
.section-head h2 { display: flex; flex-direction: column; gap: 0.7rem; color: var(--text); font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.3rem); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.section-head .eyebrow { color: var(--accent-bright); font-family: var(--font-sans); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.section-head p { margin-top: 0.85rem; color: var(--muted); font-size: 0.95rem; }

/* REGISTRY */
.reg-group { margin-bottom: 2.8rem; }
.reg-label { display: flex; align-items: center; gap: 0.65rem; padding-bottom: 0.8rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.reg-count { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 0.66rem; }
.reg-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2.4rem; }
.mod { border-bottom: 1px solid rgba(142,177,204,0.11); }
.mod summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.7rem; padding: 1rem 0.5rem; color: var(--text); font-size: 0.88rem; font-weight: 700; transition: background 0.2s ease, padding-left 0.2s ease; }
.mod summary::-webkit-details-marker { display: none; }
.mod summary:hover { padding-left: 0.8rem; background: rgba(16,40,58,0.46); }
.mod summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mod-i { color: var(--accent-bright); font-size: 0.72rem; transition: transform 0.2s ease; }
.mod[open] .mod-i { transform: rotate(90deg); }
.mod-name { flex: 1; }
.mod-tag { padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--dim); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.mod p { max-width: 52ch; padding: 0 0.4rem 1rem 1.8rem; color: var(--muted); font-size: 0.84rem; line-height: 1.65; }

/* ARCHITECTURE */
.arch { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; }
.node { flex: 1; min-width: 210px; padding: 1.45rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(11,29,42,0.7); box-shadow: inset 0 1px 0 rgba(255,255,255,0.025); }
.node-jvm { border-color: var(--line-strong); background: rgba(16,40,58,0.82); }
.node-head { color: var(--text); font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; }
.node-sub { margin-bottom: 1.15rem; color: var(--accent-bright); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.node ul { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.node li { position: relative; padding-left: 1.1rem; color: var(--muted); font-size: 0.84rem; }
.node li::before { content: ''; position: absolute; left: 0; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.wire { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 86px; padding: 0 0.8rem; }
.wire-line { flex: 1; width: 1px; min-height: 18px; background: var(--line-strong); }
.wire-label { padding: 0.45rem 0; color: var(--dim); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }

/* SETUP */
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.8rem; }
.col-num { padding-bottom: 0.7rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--line); color: var(--accent-bright); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.req, .steps { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; }
.req li, .steps li { position: relative; padding-left: 1.35rem; color: var(--muted); font-size: 0.88rem; }
.req li::before { content: '✦'; position: absolute; left: 0; color: var(--accent-bright); font-size: 0.7rem; }
.steps { counter-reset: step; }
.steps li { padding-left: 2.25rem; counter-increment: step; }
.steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 0.1rem; color: var(--accent-bright); font-size: 0.68rem; font-weight: 800; }

/* DOWNLOAD */
.dl-block { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; max-width: 560px; padding: 1.4rem 1.5rem 1.5rem; border: 1px solid var(--line); border-radius: 20px; background: rgba(11,29,42,0.66); }
.dl-meta { width: 100%; display: flex; flex-direction: column; font-size: 0.8rem; }
.dl-meta > div { display: flex; justify-content: space-between; gap: 1.2rem; padding: 0.65rem 0; border-bottom: 1px dashed rgba(142,177,204,0.18); color: var(--dim); }
.dl-meta .v { color: var(--text); font-weight: 700; text-align: right; }
.dl-note { color: var(--dim); font-size: 0.8rem; }

/* FOOTER */
footer { margin-top: 2rem; padding: 4rem 1.5rem; border-top: 1px solid var(--line); text-align: center; background: rgba(2, 7, 17, 0.28); }
.footer-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; }
footer .logo-mini { font-size: 1.2rem; }
footer p { color: var(--muted); font-size: 0.82rem; }
.footer-small { color: var(--dim) !important; font-size: 0.7rem !important; }

/* REVEAL + SCROLLBAR */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: none; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--surface-raised); border: 2px solid var(--bg-deep); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-deep); }

/* RESPONSIVE */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-top: 132px; }
  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-left { max-width: 620px; }
  .hero-left::before { inset: -4rem -5rem -4rem -5rem; opacity: 0.14; }
  .moon { right: 10%; }
  .moon-beam { right: 4%; width: 46vw; }
  .forest-layer { width: 154vw; }
  .forest-near { width: 178vw; opacity: 0.58; }
  .arch { flex-direction: column; gap: 0.9rem; }
  .wire { flex-direction: row; width: 100%; min-width: 0; padding: 0.1rem 0; }
  .wire-line { width: auto; height: 1px; min-height: 0; }
  .wire-label { padding: 0 0.8rem; }
}

@media (max-width: 640px) {
  .nav-inner { min-height: 64px; padding: 0 1rem; }
  .nav-inner ul { gap: 0.7rem; }
  .nav-inner ul li:nth-child(2), .nav-inner ul li:nth-child(3) { display: none; }
  nav ul a { font-size: 0.7rem; }
  .nav-dl { padding: 7px 11px; }
  .hero { padding: 112px 1rem 64px; }
  .hero-logo { font-size: clamp(3.5rem, 17vw, 6rem); }
  .tagline { font-size: 0.96rem; }
  .hero-left::before { inset: -2rem -2rem -2.5rem -2rem; opacity: 0.1; transform: rotate(-4deg); }
  .moon { top: 92px; right: 9%; width: 74px; }
  .moon-beam { top: 8%; right: -12%; width: 62vw; height: 48vh; opacity: 0.5; }
  .forest-far { width: 210vw; height: auto; }
  .forest-mid { width: 220vw; height: auto; }
  .forest-near { width: 260vw; height: auto; bottom: -9vh; opacity: 0.48; }
  .scene-haze { opacity: 0.46; }
  .launcher-screen { min-height: 250px; padding: 28px 22px 24px; }
  .section { padding: 68px 1rem; }
  .reg-rows, .cols { grid-template-columns: 1fr; gap: 0; }
  .cols { gap: 2.4rem; }
  .dl-block { padding: 1.2rem; }
  .dl-meta > div { align-items: flex-start; flex-direction: column; gap: 0.15rem; }
  .dl-meta .v { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .site-scene * { transition: none !important; }
  .forest-layer { transform: translate3d(-50%, 0, 0); }
  .moon { transform: none; }
  .moon-beam-one { transform: rotate(-8deg); }
  .moon-beam-two { transform: rotate(8deg); }
}
/* TERMINAL PREVIEW FOR SCOOP */
.terminal-preview {
  margin: 1.5rem 0;
  background: #060e17;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
}
.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: rgba(15, 30, 44, 0.9);
  border-bottom: 1px solid var(--line);
}
.terminal-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}
.t-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.t-dot.red { background: #ff5f56; }
.t-dot.yellow { background: #ffbd2e; }
.t-dot.green { background: #27c93f; }

.terminal-title {
  font-family: var(--font-mono, monospace);
  font-size: 0.76rem;
  color: var(--dim);
  letter-spacing: 0.03em;
}
.btn-copy-scoop {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-copy-scoop:hover {
  background: var(--accent);
  color: #07131d;
  border-color: var(--accent);
}
.btn-copy-scoop.copied {
  background: #38ef7d;
  color: #07131d;
  border-color: #38ef7d;
  font-weight: 700;
}
.terminal-body {
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #040c13;
}
.terminal-line {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  background: rgba(11, 29, 42, 0.5);
  border-left: 3px solid var(--accent);
  border-radius: 0 4px 4px 0;
  font-family: var(--font-mono, monospace);
  font-size: 0.84rem;
  overflow-x: auto;
}
.t-prompt {
  color: #64ffda;
  font-weight: 700;
  user-select: none;
  white-space: nowrap;
}
.t-cmd {
  color: #edf3f7;
  white-space: nowrap;
}
.terminal-footer {
  padding: 0.5rem 1rem;
  background: rgba(10, 24, 38, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  justify-content: flex-end;
}
.scoop-help-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color 0.2s ease;
}
.scoop-help-btn:hover {
  color: var(--accent);
}
.help-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.7rem;
  font-weight: bold;
}

/* SCOOP MODAL */
.scoop-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.scoop-modal[hidden] {
  display: none !important;
}
.scoop-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 19, 0.8);
  backdrop-filter: blur(8px);
}
.scoop-modal-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #0b1a28;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  z-index: 10;
}
.scoop-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.scoop-modal-header h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--text);
}
.scoop-modal-close {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
}
.scoop-modal-close:hover {
  color: var(--text);
}
.scoop-modal-body p {
  color: var(--dim);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}
.scoop-modal-body h4 {
  color: var(--text);
  font-size: 0.95rem;
  margin: 1.2rem 0 0.5rem;
}
.scoop-modal-code {
  background: rgba(4, 12, 19, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  overflow-x: auto;
}
.scoop-modal-code code {
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  color: #64ffda;
  white-space: pre-wrap;
  word-break: break-all;
}
.scoop-modal-body a {
  color: var(--accent);
  text-decoration: underline;
}