@font-face { font-family: 'JetBrains Mono'; src: url('fonts/JetBrainsMono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }

:root {
  --bg: #0d0a08; --panel: #15100d; --line: #2c221b; --fg: #f4e9dd; --dim: #b39a88; --accent: #ff8a3d; --gold: #ffc53d;
  --ok: #8fd18a; --bad: #ff6b5a; --faint: #9c8676;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --head: 'Jersey 10', 'Arial Black', Impact, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --gutter: 16px; --r: 6px;
  color-scheme: dark;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background-color: var(--bg); color: var(--fg); font: 15px/1.65 var(--mono); overflow-x: clip;
}
@media (min-width: 1024px) { body { font-size: 16px; } }
img, video, iframe { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--gold); }
code { font-family: var(--mono); font-size: .92em; color: var(--gold); background: rgb(255 197 61 / .08); padding: 1px 5px; border-radius: 3px; }
h1, h2, h3 { margin: 0; font-weight: 400; }
h1, h2 { font-family: var(--head); letter-spacing: -.015em; line-height: 1.02; text-wrap: balance; }
h3 { font-size: clamp(17px, 1.6vw, 20px); font-weight: 700; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--bg); }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--gold); color: var(--bg); padding: 8px 12px; font-weight: 700; }
.skip:focus { top: 12px; }

.eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .18em; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.eyebrow::before { content: ''; width: 8px; height: 8px; background: var(--accent); flex: none; }
.eyebrow:has(.dot)::before { display: none; }
.dot { width: 8px; height: 8px; flex: none; background: var(--accent); box-shadow: 0 0 0 3px rgb(255 138 61 / .18); animation: pulse 2.4s var(--ease) infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: var(--r);
  background: var(--accent); color: var(--bg); font: 700 15px/1 var(--mono); text-decoration: none; border: 2px solid var(--accent);
  box-shadow: 0 3px 0 #a3501c; transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:hover { color: var(--bg); background: var(--gold); border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 5px 0 #a3501c; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a3501c; transition-duration: 80ms; }
.btn-ghost { background: transparent; color: var(--accent); box-shadow: none; }
.btn-ghost:hover, .btn-ghost:active { background: rgb(255 138 61 / .1); color: var(--gold); border-color: var(--gold); box-shadow: none; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 13px; box-shadow: none; }
.btn-sm:hover { box-shadow: none; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; transition: background-color 240ms var(--ease), border-color 240ms var(--ease); }
.top.scrolled { background-color: rgb(13 10 8 / .92); border-color: var(--line); backdrop-filter: blur(8px); }
.top-in { position: relative; display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); font: 700 14px/1 var(--mono); letter-spacing: .14em; }
.brand img { image-rendering: pixelated; width: 28px; height: 28px; transition: transform 220ms var(--ease); }
.brand:hover { color: var(--fg); }
.brand:hover img { transform: translateY(-3px) rotate(-6deg); }
#nav { display: flex; align-items: center; gap: 4px; }
#nav a:not(.btn) { color: var(--dim); text-decoration: none; font-size: 13px; padding: 8px 12px; border-radius: 4px; transition: color 160ms var(--ease), background-color 160ms var(--ease); }
#nav a:not(.btn):hover { color: var(--fg); background: rgb(255 255 255 / .04); }
#nav .btn { margin-left: 8px; }
.menu-btn { display: none; }
@media (max-width: 767px) {
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: var(--r); font: 700 13px/1 var(--mono); cursor: pointer; }
  .menu-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
  #nav { position: absolute; left: var(--gutter); right: var(--gutter); top: 64px; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px rgb(0 0 0 / .5); }
  .js #nav { display: none; }
  .js #nav.open { display: flex; animation: drop 220ms var(--ease); }
  #nav a:not(.btn) { padding: 12px; font-size: 15px; }
  #nav .btn { margin: 6px 0 0; }
  .top { background-color: rgb(13 10 8 / .92); }
}
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- hero ---------- */
.hero { display: grid; gap: 28px; padding-top: 32px; padding-bottom: 64px; align-items: center; }
h1 { font-size: clamp(40px, 7vw, 74px); max-width: 11ch; }
.caret { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lede { font-size: clamp(15px, 1.5vw, 18px); color: var(--dim); max-width: 44ch; margin-top: 20px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.trust { margin-top: 18px; font-size: 13px; color: var(--dim); letter-spacing: .04em; }
.trust i { font-style: normal; color: var(--accent); padding: 0 4px; }
@media (min-width: 1024px) { .hero { grid-template-columns: 1.05fr .95fr; gap: 56px; padding-top: 72px; padding-bottom: 64px; } }
@media (max-width: 1023px) {
  /* phone/tablet order: headline → Clawd → CTAs */
  .hero-copy { display: contents; }
  .hero .eyebrow { margin-bottom: -14px; }
  .hero .lede { margin-top: -12px; }
  .stage { margin-top: 4px; }
  .ctas { order: 4; margin-top: 18px; }
  .trust { order: 5; margin-top: -14px; }
}
@media (max-width: 479px) { .ctas .btn { flex: 1 1 100%; } }

/* entrance */
.js .hi { opacity: 0; transform: translateY(12px); animation: rise 700ms var(--ease) forwards; animation-delay: calc(var(--i) * 100ms + 60ms); }
@keyframes rise { to { opacity: 1; transform: none; } }

/* stage: a dashboard pane in miniature */
.stage { margin: 0; position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding-bottom: 14px;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
.stage::before, .stage::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent); pointer-events: none; }
.stage::before { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.stage::after { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.proj { font-weight: 700; } .proj em { font-style: normal; color: var(--dim); font-weight: 400; margin-left: 6px; font-size: 12px; }
.pill { font-size: 11px; font-weight: 700; letter-spacing: .12em; padding: 3px 10px; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 99px; transition: color 200ms var(--ease), border-color 200ms var(--ease); }
.stage[data-s="done"] .pill { color: var(--ok); border-color: var(--ok); }
.stage[data-s="wait"] .pill { color: var(--gold); border-color: var(--gold); }
.stage[data-s="idle"] .pill, .stage[data-s="asleep"] .pill { color: var(--dim); border-color: #4a3829; }
.stage-main { display: flex; align-items: center; gap: 18px; padding: 18px 16px 10px; min-height: 172px;
  background-image: radial-gradient(rgb(255 197 61 / .07) 1px, transparent 1.5px); background-size: 12px 12px; }
.clawd { position: relative; flex: none; width: 132px; height: 132px; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 8px; isolation: isolate; }
.clawd img { width: 132px; height: 132px; image-rendering: pixelated; transition: transform 200ms var(--ease); }
.clawd::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 10px; height: 12px; border-radius: 50%; background: radial-gradient(rgb(255 138 61 / .32), transparent 70%); z-index: -1; }
.clawd:hover img { transform: translateY(-3px); }
.clawd:active img { transform: scale(.94); }
.zzz { position: absolute; right: 4px; top: 10px; font: 700 15px/1 var(--mono); color: var(--gold); opacity: 0; pointer-events: none; transition: opacity 400ms var(--ease); }
.zzz b, .zzz i { font-style: normal; display: inline-block; }
.zzz b { font-size: 12px; transform: translate(2px, -8px); } .zzz i { font-size: 10px; transform: translate(4px, -16px); }
.stage[data-s="asleep"] .zzz { opacity: 1; animation: zz 2.4s var(--ease) infinite; }
@keyframes zz { 50% { transform: translateY(-4px); opacity: .55; } }
.stage-status { min-width: 0; }
.st-title { font: 700 clamp(18px, 2vw, 22px)/1.2 var(--mono); color: var(--accent); }
.stage[data-s="done"] .st-title { color: var(--ok); }
.stage[data-s="wait"] .st-title { color: var(--gold); }
.stage[data-s="idle"] .st-title, .stage[data-s="asleep"] .st-title { color: var(--dim); }
.st-detail { margin-top: 4px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.st-meta { margin-top: 8px; font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.st-title, .st-detail { transition: opacity 160ms var(--ease), transform 160ms var(--ease); }
.swap .st-title, .swap .st-detail { opacity: 0; transform: translateY(3px); }

.chips { list-style: none; display: flex; gap: 6px; padding: 4px 16px 12px; margin: 0; flex-wrap: wrap; }
.chips li { font-size: 11px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 3px; color: var(--faint); border: 1px solid var(--line);
  transition: color 200ms var(--ease), background-color 200ms var(--ease), border-color 200ms var(--ease); }
.chips li.on { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.chips li.on[data-k="done"] { background: var(--ok); border-color: var(--ok); }
.chips li.on[data-k="wait"] { background: var(--gold); border-color: var(--gold); }

.log { list-style: none; margin: 0 16px; padding: 10px 0 0; border-top: 1px dashed var(--line); font-size: 12px; height: 74px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.log li { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline; white-space: nowrap; line-height: 1.75; flex: none; }
.log li.new { animation: logIn 380ms var(--ease); }
@keyframes logIn { from { opacity: 0; transform: translateY(8px); } }
.log time { color: var(--faint); }
.log span { overflow: hidden; text-overflow: ellipsis; color: var(--fg); }
.log b, .mini-log b { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 3px; min-width: 44px; text-align: center; }
.t-read { color: var(--gold); background: rgb(255 197 61 / .12); }
.t-edit { color: var(--accent); background: rgb(255 138 61 / .14); }
.t-run { color: #ffd98a; background: rgb(255 217 138 / .1); }
.t-ok { color: var(--ok); background: rgb(143 209 138 / .1); }
.t-bad { color: var(--bad); background: rgb(255 107 90 / .12); }
.stage-cap { position: absolute; right: 12px; bottom: -28px; font-size: 12px; color: var(--dim); transition: opacity 300ms var(--ease); }
.stage-cap::before { content: '↳ '; color: var(--accent); }
@media (max-width: 479px) {
  .clawd, .clawd img { width: 104px; height: 104px; }
  .stage-main { gap: 12px; min-height: 140px; padding-top: 14px; }
  .log time { display: none; }
  .log li { grid-template-columns: auto 1fr; }
}

/* ---------- sections ---------- */
.sec { padding: 72px 0; scroll-margin-top: 48px; }
@media (min-width: 1024px) { .sec { padding: 112px 0; } }
.sec + .sec { border-top: 1px solid var(--line); }
.sec-head { max-width: 720px; margin-bottom: 32px; }
@media (min-width: 1024px) { .sec-head { margin-bottom: 48px; } }
h2 { font-size: clamp(30px, 4.6vw, 50px); }
.sec-lede { margin-top: 16px; color: var(--dim); font-size: clamp(15px, 1.4vw, 17px); max-width: 60ch; }

.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- demo ---------- */
.demo-frame { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 40px 90px -40px rgb(0 0 0 / .9); }
.demo-frame::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: 0 0 0 1px rgb(255 138 61 / .1) inset; }
.df-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 11px; letter-spacing: .12em; color: var(--dim); }
.df-title { color: var(--fg); font-weight: 700; white-space: nowrap; }
.df-rec { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); animation: pulse 1.6s var(--ease) infinite; }
.df-path { letter-spacing: .04em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.df-tag { font-weight: 700; color: #111; padding: 2px 8px; border-radius: 3px; background: repeating-linear-gradient(135deg, #ffcf4a 0 8px, #ffbf1f 8px 16px); }
.df-body { height: min(74svh, 640px); min-height: 440px; background: var(--bg); }
@media (min-width: 1024px) { .df-body { height: auto; aspect-ratio: 16 / 9.4; min-height: 0; } }
.df-body iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 479px) { .df-path { display: none; } .df-tag { margin-left: auto; } }
.demo-note { margin-top: 14px; font-size: 13px; color: var(--dim); }

/* ---------- features ---------- */
.feats { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .feats { grid-template-columns: repeat(2, 1fr); } .f-live, .f-clawd, .f-inst { grid-column: span 2; } }
@media (min-width: 1024px) {
  .feats { grid-template-columns: repeat(12, 1fr); gap: 16px; }
  .f-live { grid-column: span 7; } .f-clawd { grid-column: span 5; grid-row: span 2; }
  .f-replay { grid-column: span 4; } .f-stats { grid-column: span 3; }
  .f-demo { grid-column: span 5; } .f-inst { grid-column: span 7; }
}
.feat { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 10px;
  transition: border-color 240ms var(--ease), opacity 560ms var(--ease), transform 560ms var(--ease); }
.feat:hover { border-color: #4a3829; }
.feat p { color: var(--dim); font-size: 14px; }
.f-n { position: absolute; top: 18px; right: 20px; font-size: 11px; letter-spacing: .14em; color: var(--faint); }

.mini-log { list-style: none; margin: 8px 0 0; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; font-size: 13px; display: grid; gap: 6px; }
.mini-log li { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.f-live.play .mini-log li { animation: logIn 420ms var(--ease) backwards; }
.f-live.play .mini-log li:nth-child(2) { animation-delay: 220ms; } .f-live.play .mini-log li:nth-child(3) { animation-delay: 440ms; } .f-live.play .mini-log li:nth-child(4) { animation-delay: 660ms; }
.mini-log li:last-child::after { content: '▋'; color: var(--accent); opacity: 0; }
.f-live.play .mini-log li:last-child::after { animation: blink 1s steps(1) 1.1s 4 backwards; }

.moods { margin: auto 0; padding: 16px 0 4px; display: grid; gap: 16px; justify-items: center; }
.moods img { filter: drop-shadow(0 14px 10px rgb(255 138 61 / .14)); }
.moods img { width: 168px; height: 168px; image-rendering: pixelated; }
.mood-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.mood-btns button { font: 700 12px/1 var(--mono); color: var(--dim); background: var(--bg); border: 1px solid var(--line); border-radius: 99px; padding: 0 14px; min-height: 36px; cursor: pointer;
  transition: color 160ms var(--ease), border-color 160ms var(--ease), background-color 160ms var(--ease); }
.mood-btns button:hover { color: var(--fg); border-color: var(--dim); }
.mood-btns button[aria-pressed="true"] { color: var(--bg); background: var(--accent); border-color: var(--accent); }

.scrub { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--dim); }
.sc-btn { color: var(--accent); font-size: 14px; }
.sc-track { position: relative; flex: 1; height: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; }
.sc-fill { position: absolute; inset: 0 auto 0 0; width: 64%; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 3px; }
.f-replay.play .sc-fill { animation: fill 1.6s var(--ease) backwards; }
@keyframes fill { from { width: 0; } }
.sc-track i { position: absolute; top: -4px; width: 2px; height: 12px; background: var(--dim); }
.sc-track i.bad { background: var(--bad); }

.stat-row { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.stat { display: flex; align-items: baseline; gap: 4px; }
.stat b { font: 400 34px/1 var(--head); color: var(--gold); font-variant-numeric: tabular-nums; min-width: 2ch; }
.stat small { font-size: 12px; color: var(--dim); }
.badge-pop { font-size: 12px; font-weight: 700; padding: 4px 9px; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 5px; background: rgb(255 138 61 / .08); }
.f-stats.play .badge-pop { animation: pop 520ms var(--ease) 900ms backwards; }
@keyframes pop { from { opacity: 0; transform: scale(.7) translateY(6px); } }

.demo-badge { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 6px; text-decoration: none;
  font: 700 12px/1.2 var(--mono); letter-spacing: .06em; color: #111; background: repeating-linear-gradient(135deg, #ffcf4a 0 10px, #ffbf1f 10px 20px);
  transition: transform 200ms var(--ease); }
.demo-badge:hover { color: #111; transform: translateY(-2px) rotate(-1deg); }
.db-go { background: #111; color: #ffcf4a; padding: 4px 8px; border-radius: 4px; letter-spacing: 0; }
.f-inst { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.f-inst > div { display: grid; gap: 10px; max-width: 48ch; }
.f-link { font-weight: 700; font-size: 14px; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.f-link span { transition: transform 200ms var(--ease); display: inline-block; }
.f-link:hover span { transform: translateY(2px); }
.inst-more .f-link:hover span { transform: translateX(3px); }

/* ---------- everywhere ---------- */
.ev { display: grid; gap: 20px 14px; grid-template-columns: 1fr 1fr; align-items: start; }
.ev figure { margin: 0; }
.ev img { width: 100%; height: auto; }
.ev-desk img { border-radius: 8px; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .9); }
.ev figcaption { margin-top: 10px; font-size: 12px; color: var(--dim); letter-spacing: .02em; }
.ev figcaption b { display: block; color: var(--accent); letter-spacing: .14em; font-size: 11px; }
.ev-desk { grid-column: 1 / -1; }
.ev-phone img { border-radius: 20px; border: 5px solid #261c16; background: var(--panel); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .95); }
.ev-live-desk { aspect-ratio: 390 / 844; border-radius: 10px; border: 1px solid var(--line); display: grid; place-items: center; position: relative; overflow: hidden;
  background: radial-gradient(120% 80% at 70% 20%, #2a1d15, #120d0a 70%); }
.ev-live-desk::before { content: ''; position: absolute; inset: auto 0 0; height: 26px; background: rgb(0 0 0 / .5); border-top: 1px solid var(--line); }
.ev-live-desk::after { content: ''; position: absolute; right: 12px; bottom: 8px; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; box-shadow: -16px 0 0 #4a3829, -32px 0 0 #4a3829; }
.ev-live-desk img { width: 70%; image-rendering: pixelated; margin-bottom: 20px; }
.ev-note { grid-column: 1 / -1; font-size: 14px; color: var(--dim); padding: 16px 18px; border: 1px dashed var(--line); border-radius: 8px; }
@media (min-width: 768px) {
  .ev { grid-template-columns: repeat(12, 1fr); gap: 20px; }
  .ev-desk { grid-column: 1 / 10; grid-row: 1; }
  .ev-phone { grid-column: 9 / 13; grid-row: 1 / 3; margin-top: 18%; position: relative; z-index: 2; padding-left: 10%; }
  .ev-live { grid-column: 1 / 5; grid-row: 2; }
  .ev-live-desk { aspect-ratio: 16 / 9; }
  .ev-live-desk img { width: 36%; margin-bottom: 14px; }
  .ev-note { grid-column: 5 / 9; grid-row: 2; align-self: start; }
}

/* ---------- tour ---------- */
.video { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); aspect-ratio: 16 / 9; }
.video video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- privacy ---------- */
@media (min-width: 1024px) { .priv { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; } .priv .sec-head { margin: 0; } }
.term { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 14px; position: relative; }
.term::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgb(255 255 255 / .018) 0 1px, transparent 1px 3px); }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.term-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.term-bar em { font-style: normal; font-size: 11px; color: var(--dim); margin-left: 8px; letter-spacing: .04em; }
.term-rows { list-style: none; margin: 0; padding: 6px 0; }
.term-rows li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 14px 18px; align-items: baseline; }
.term-rows li + li { border-top: 1px dashed var(--line); }
.term-rows b { font-family: var(--head); font-weight: 400; font-size: clamp(20px, 2.4vw, 26px); letter-spacing: .01em; }
.term-rows li > span:last-child { grid-column: 2; color: var(--dim); }
.ok { color: var(--ok); font-weight: 700; font-size: 12px; }
.term-foot { padding: 14px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--dim); background: rgb(0 0 0 / .2); }
.js .term.in .term-rows li { animation: logIn 440ms var(--ease) 200ms backwards; }
.js .term.in .term-rows li:nth-child(2) { animation-delay: 340ms; } .js .term.in .term-rows li:nth-child(3) { animation-delay: 480ms; }

/* ---------- install ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; min-width: 0; }
.step p { color: var(--dim); font-size: 14px; }
.s-n { font: 400 40px/1 var(--head); color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.step .s-small { font-size: 12px; }
.cmd { display: flex; align-items: stretch; width: 100%; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.cmd code { flex: 1; min-width: 0; background: none; border-radius: 0; padding: 12px 14px; font-size: 14px; color: var(--fg); white-space: nowrap; overflow-x: auto; }
.cmd code::before { content: '$ '; color: var(--accent); }
.step:last-child .cmd code::before { content: none; }
.copy { flex: none; min-width: 84px; min-height: 46px; border: 0; border-left: 1px solid var(--line); background: var(--panel); color: var(--accent); font: 700 13px/1 var(--mono); cursor: pointer; padding: 0 14px;
  transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.copy:hover { background: rgb(255 138 61 / .1); color: var(--gold); }
.copy.done { color: var(--ok); }
.inst-more { margin-top: 24px; display: grid; gap: 10px; font-size: 14px; color: var(--dim); }
.inst-more b { color: var(--fg); }
.inst-more .f-link { margin-right: 6px; }

/* ---------- credits ---------- */
.cred-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .cred-grid { grid-template-columns: 7fr 4fr; gap: 32px; align-items: start; } }
.cred-text { font-size: 14px; color: var(--dim); }
.cred-text ul { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 12px; }
.cred-text li { padding-left: 22px; position: relative; }
.cred-text li::before { content: ''; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; background: var(--accent); }
.cred-text strong { color: var(--fg); }
.cred-text a { overflow-wrap: anywhere; }
.cred-src { margin: 10px 0 0; display: grid; gap: 2px 0; }
.cred-src dt { color: var(--fg); margin-top: 8px; }
.cred-src dd { margin: 0; }
.lic { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 20px; display: grid; gap: 12px; font-size: 14px; color: var(--dim); }
.lic-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); }
.lic-k { font-size: 11px; letter-spacing: .14em; color: var(--dim); font-weight: 700; }
.lic-v { font-weight: 700; color: var(--ok); }
.lic-v::before { content: '✓ '; }
.lic-row.no .lic-v { color: var(--bad); }
.lic-row.no .lic-v::before { content: '✕ '; }
.lic strong { color: var(--fg); }
.lic-small { font-size: 12px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 48px; font-size: 13px; color: var(--dim); }
.foot-in { display: grid; gap: 20px; }
@media (min-width: 768px) { .foot-in { grid-template-columns: 1fr auto; align-items: start; } .foot-legal { grid-column: 1 / -1; } }
.foot-brand { font: 400 18px/1.2 var(--head); color: var(--fg); margin-bottom: 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot nav a { color: var(--fg); text-decoration: none; padding: 6px 0; }
.foot nav a:hover { color: var(--accent); }
.foot-legal { font-size: 12px; padding-top: 20px; border-top: 1px dashed var(--line); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hi, .js .reveal { opacity: 1; transform: none; }
  .stage[data-s="asleep"] .zzz { opacity: 1; }
}