:root {
  --ink: #0B0D12;
  --ink-2: #10131A;
  --panel: #141823;
  --panel-2: #1A1F2C;
  --line: #242A38;
  --line-2: #2F3647;
  --text: #ECEEF3;
  --muted: #9AA3B5;
  --faint: #6B7385;
  --blue: #2F5BEA;
  --blue-hi: #6E8BFF;
  --green: #3DD68C;
  --amber: #F5B041;
  --pink: #FF7AB6;
  --radius: 14px;
  --glass: rgba(9, 11, 17, .56);
  --glass-2: rgba(16, 19, 28, .62);
  --edge: rgba(255, 255, 255, .14);
  --chrome: linear-gradient(135deg, rgba(255,255,255,.7), rgba(115,237,255,.45) 28%, rgba(110,139,255,.3) 52%, rgba(255,95,208,.45) 78%, rgba(255,255,255,.25));
  --holo: linear-gradient(90deg, #73EDFF, #6E8BFF 45%, #FF7AB6);
  --chrome-text: linear-gradient(180deg, #FFFFFF 0%, #E6EBFF 46%, #96A6D6 50%, #F4F6FF 100%);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: "Schibsted Grotesk", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Noto Sans KR", "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
code { font-family: var(--mono); font-size: .88em; }
h1, h2, h3 { font-family: var(--display); font-variation-settings: "opsz" 96; }
h3 { font-variation-settings: "opsz" 24; }
img { display: block; max-width: 100%; }
.wrap { width: min(1160px, 100% - 32px); margin-inline: auto; }

/* Panels: smoked glass over the sky, a hairline of chrome around the edge,
   a highlight along the top and faint scanlines, so every box reads as a
   piece of the same screen as the background. */
.install, .win, .code {
  position: relative; isolation: isolate;
  background: var(--glass);
  background-image: radial-gradient(rgba(255,255,255,.075) .55px, transparent .7px);
  background-size: 3px 3px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.45), 0 30px 70px -30px rgba(0,0,0,.85);
}
.install::before, .win::before, .code::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: 1;
  background: var(--chrome); opacity: .55; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.pack:hover::before, .steps li:hover::before { opacity: .9; }

/* Windows: every box is a window with a title bar. The bar's single dot is
   the close light; the terminal keeps its three. */
.win { border-radius: 12px; overflow: hidden; }
.bar {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--edge);
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05) 50%, rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  font: 11.5px var(--mono); color: var(--faint); letter-spacing: .02em; cursor: default; user-select: none;
}
.bar span {
  width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.45); flex: none;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 40%), #FF5F57;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}
.bar span:nth-child(2) { background-color: #FEBC2E; }
.bar span:nth-child(3) { background-color: #28C840; }
.bar em { font-style: normal; margin-left: auto; }
html[lang="ko"] .bar em { font-family: var(--sans); }
.win.dragging { cursor: grabbing; }
.win.dragging::before { opacity: 1; }
[data-win] { transform: translate(var(--dx, 0px), var(--dy, 0px)); touch-action: pan-y; }
@media (min-width: 961px) and (pointer: fine) { [data-win] .bar { cursor: grab; } }

/* Eyebrows and the big centred headlines of the sections. */
.eyebrow { margin: 0 0 14px; font: 500 12.5px var(--mono); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
.eyebrow b { color: #73EDFF; font-weight: 500; text-shadow: 0 0 10px rgba(115,237,255,.6); }
html[lang="ko"] .eyebrow { text-transform: none; }

/* nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(9, 11, 17, .6);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--edge);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--muted); }
.nav-links a:hover { color: var(--text); }
.lang {
  font: 500 13px var(--sans); color: var(--muted); cursor: pointer; color-scheme: dark;
  padding: 6px 28px 6px 12px; border: 1px solid var(--edge); border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  appearance: none; -webkit-appearance: none; max-width: 42vw;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5l3 3 3-3' fill='none' stroke='%23a8b0c0' stroke-width='1.5'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  background-repeat: no-repeat; background-position: right 10px center, 0 0; background-size: 12px, auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lang:hover { color: var(--text); border-color: rgba(255,255,255,.3); }
.lang option { color: var(--text); background: #14171f; }
html[lang="ko"] body { word-break: keep-all; }
html[lang="ko"] h1, html:lang(ja) h1, html:lang(zh) h1 { font-size: clamp(36px, 4.6vw, 54px); letter-spacing: -.03em; line-height: 1.15; }
html[lang="ko"] h2, html:lang(ja) h2, html:lang(zh) h2 { letter-spacing: -.02em; line-height: 1.25; }
html[lang="ko"] .term-bar em, html:lang(ja) .term-bar em, html:lang(zh) .term-bar em { font-family: var(--sans); }
.nav-gh {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border: 1px solid var(--edge); border-radius: 999px; color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.4);
}
.nav-gh:hover { border-color: rgba(255,255,255,.35); }

/* hero */
.hero { position: relative; padding: 96px 0 72px; overflow: hidden; }
/* The sky: sky.js draws liquid chrome, a wire grid and a field of threads
   behind the whole page, reacting to the cursor and the scroll. Without
   WebGL only the hero glow remains. */
.sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .footer { position: relative; z-index: 1; }
.glow {
  position: absolute; width: 900px; height: 600px; left: 50%; top: -260px; transform: translateX(-30%);
  background: radial-gradient(closest-side, rgba(47, 91, 234, .38), rgba(110, 139, 255, .12) 55%, transparent);
  filter: blur(20px); pointer-events: none;
}
.hero-grid { position: relative; display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.hero-grid > *, .split > * { min-width: 0; }
h1 {
  margin: 0 0 20px; font-size: clamp(36px, 4.4vw, 52px); line-height: 1.04;
  letter-spacing: -.035em; font-weight: 700;
  background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.accent {
  font-style: normal; color: transparent;
  background: var(--holo); -webkit-background-clip: text; background-clip: text;
}
.then { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.then code { color: var(--text); font-size: 13.5px; }
::selection { background: rgba(110, 139, 255, .35); color: var(--text); }
:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; border-radius: 6px; }
.lede { font-size: 18px; color: var(--muted); max-width: 540px; margin: 0 0 28px; }
.lede.who { margin: -14px 0 28px; font-size: 15.5px; color: var(--faint); }

.install { max-width: 560px; border-radius: 12px; }
.install-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; }
.install-tabs button {
  font: 500 12.5px var(--sans); color: var(--faint); background: none; border: 0;
  padding: 7px 12px; border-radius: 8px 8px 0 0; cursor: pointer;
}
.install-tabs button[aria-selected="true"] { color: var(--text); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.install-body {
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  background: rgba(0,0,0,.28); border-radius: 0 0 12px 12px; border-top: 1px solid var(--edge);
}
.install-body code {
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: 13px; color: var(--text);
  scrollbar-width: none;
}
.install-body code::-webkit-scrollbar { display: none; }
.install-body code::before { content: "$ "; color: var(--blue-hi); }
.install-file { flex: 1; min-width: 0; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.install-file a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--blue-hi); }
.install-file a:hover { color: var(--blue-hi); }
.copy {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  color: var(--muted); border: 1px solid var(--edge); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02));
}
.copy:hover { color: var(--text); border-color: rgba(255,255,255,.35); }
.copy.done { color: var(--green); border-color: rgba(61,214,140,.5); }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.cta.center { justify-content: center; }
.btn {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px;
  font-weight: 600; font-size: 15px; transition: transform .15s, box-shadow .15s, border-color .15s;
  border: 1px solid rgba(255,255,255,.3);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, #9FB3FF 0%, #4A73FF 48%, #2F5BEA 52%, #5B82FF 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(0,0,0,.35), 0 10px 28px -8px rgba(47,91,234,.9), 0 0 0 1px rgba(255,255,255,.08);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(0,0,0,.35), 0 14px 32px -8px rgba(115,237,255,.7), 0 0 0 1px rgba(255,255,255,.14); }
.btn-ghost {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.4);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.btn-ghost:hover { border-color: rgba(255,255,255,.5); }
.footer .meta { margin: 18px auto 0; font-size: 13px; color: var(--faint); }

/* The desktop: windows stacked on the right of the hero. */
.desk { position: relative; height: 672px; }
.desk .win { position: absolute; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.45), 0 40px 80px -30px rgba(0,0,0,.9); }
.desk .term { left: 0; top: 104px; width: min(100%, 600px); z-index: 2; }
.desk .about { left: 24px; top: -8px; width: 300px; z-index: 1; }
.desk .clock { right: 0; top: 0; width: 132px; z-index: 1; text-align: center; }
.desk .actions { right: 0; top: 372px; width: min(380px, 100%); z-index: 3; }
.desk .setup { left: 48px; top: 520px; width: 310px; z-index: 4; }
.about-body { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.about-body img { width: 36px; height: 36px; filter: drop-shadow(0 6px 14px rgba(47,91,234,.6)); }
.about-body p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.about-body b { color: var(--text); font: 600 13px var(--mono); }
.clock time { display: block; padding: 12px 0 14px; font: 500 20px var(--mono); color: #73EDFF; text-shadow: 0 0 14px rgba(115,237,255,.6); letter-spacing: .04em; }
.action-list { margin: 0; padding: 8px 0; list-style: none; font: 12.5px var(--mono); }
.action-list li { display: grid; grid-template-columns: 44px 48px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 14px; }
.action-list li + li { border-top: 1px solid rgba(255,255,255,.06); }
.action-list i { font-style: normal; color: #73EDFF; }
.action-list b { font-weight: 500; color: var(--text); }
.action-list span { color: var(--muted); font-family: var(--sans); font-size: 13px; }
.action-list s { text-decoration: none; color: var(--green); }
html[lang="ko"] .action-list li { grid-template-columns: 44px 48px 1fr auto; }
.setup-body { padding: 14px 16px 14px; }
.setup-body p { margin: 0 0 10px; font: 12.5px var(--mono); color: var(--text); }
.progress { height: 10px; border-radius: 999px; border: 1px solid var(--edge); background: rgba(0,0,0,.4); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.6); }
.progress i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #73EDFF, #6E8BFF 60%, #FF7AB6);
  background-size: 200% 100%; box-shadow: 0 0 12px rgba(115,237,255,.7);
  animation: fill 6s steps(5, end) .2s forwards, shimmer 1.6s linear infinite;
}
@keyframes fill { to { width: 100%; } }
@keyframes shimmer { to { background-position: -200% 0; } }
.setup-body small { display: block; margin-top: 8px; font: 11.5px var(--mono); color: var(--faint); text-align: right; }

/* terminal */
.term .term-bar { padding: 11px 14px; }
.term-bar em { margin-left: auto; font: 12px var(--mono); color: var(--faint); font-style: normal; }
.term-body {
  margin: 0; padding: 18px 20px 22px; font: 13px/1.75 var(--mono); color: var(--text);
  overflow-x: auto; white-space: pre;
}
/* The transcript's lines reveal top to bottom once the cursor has struck
   the prompt (see the hero cursor below), hold, and clear before the loop. */
.term-body .l { display: inline-block; min-width: 100%; opacity: 0; animation: hl-1 4.8s linear infinite; animation-delay: var(--hc-t, 0s); }
.term-body .l:nth-child(1) { animation-name: hl-1; }
@keyframes hl-1 { 0%, 6.5% { opacity: 0; transform: translateY(3px); } 7.7%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(2) { animation-name: hl-2; }
@keyframes hl-2 { 0%, 7.7% { opacity: 0; transform: translateY(3px); } 8.9%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(3) { animation-name: hl-3; }
@keyframes hl-3 { 0%, 8.9% { opacity: 0; transform: translateY(3px); } 10.1%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(4) { animation-name: hl-4; }
@keyframes hl-4 { 0%, 10.1% { opacity: 0; transform: translateY(3px); } 11.3%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(5) { animation-name: hl-5; }
@keyframes hl-5 { 0%, 11.3% { opacity: 0; transform: translateY(3px); } 12.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(6) { animation-name: hl-6; }
@keyframes hl-6 { 0%, 12.5% { opacity: 0; transform: translateY(3px); } 13.7%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(7) { animation-name: hl-7; }
@keyframes hl-7 { 0%, 13.7% { opacity: 0; transform: translateY(3px); } 14.9%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(8) { animation-name: hl-8; }
@keyframes hl-8 { 0%, 14.9% { opacity: 0; transform: translateY(3px); } 16.1%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(9) { animation-name: hl-9; }
@keyframes hl-9 { 0%, 16.1% { opacity: 0; transform: translateY(3px); } 17.3%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(10) { animation-name: hl-10; }
@keyframes hl-10 { 0%, 17.3% { opacity: 0; transform: translateY(3px); } 18.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(11) { animation-name: hl-11; }
@keyframes hl-11 { 0%, 18.5% { opacity: 0; transform: translateY(3px); } 19.7%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(12) { animation-name: hl-12; }
@keyframes hl-12 { 0%, 19.7% { opacity: 0; transform: translateY(3px); } 20.9%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(13) { animation-name: hl-13; }
@keyframes hl-13 { 0%, 20.9% { opacity: 0; transform: translateY(3px); } 22.1%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(14) { animation-name: hl-14; }
@keyframes hl-14 { 0%, 22.1% { opacity: 0; transform: translateY(3px); } 23.3%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(15) { animation-name: hl-15; }
@keyframes hl-15 { 0%, 23.3% { opacity: 0; transform: translateY(3px); } 24.5%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body .l:nth-child(16) { animation-name: hl-16; }
@keyframes hl-16 { 0%, 24.5% { opacity: 0; transform: translateY(3px); } 25.7%, 95% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: none; } }
.term-body b.p { color: var(--blue-hi); font-weight: 500; }
.term-body b.you { color: var(--green); }
.term-body i { color: var(--faint); font-style: normal; }
.term-body .o { color: var(--muted); }
.term-body .w { color: var(--amber); }
.term-body .g { color: var(--green); }
.term-body k { color: #B4C3FF; }
.term-body s { color: #9FE3C1; text-decoration: none; }
.term-body n { color: var(--pink); }

/* clients */
.clients {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px;
  padding: 28px 0; color: var(--faint); font-size: 14px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.35) 30%, rgba(115,237,255,.5) 50%, rgba(255,95,208,.4) 70%, transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent) bottom / 100% 1px no-repeat;
}
.clients ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 0; padding: 0; list-style: none; }
.clients li { color: var(--muted); font-weight: 500; }

/* the prompt for an agent */
.agent-prompt { padding-top: 96px; }
.promptwin { margin: 40px auto 0; max-width: 860px; }
.promptwin .bar .copy { margin-left: 10px; width: 28px; height: 28px; }
.prompt-body { margin: 0; padding: 20px 22px 24px; font: 13px/1.7 var(--mono); color: var(--text); white-space: pre-wrap; word-break: break-word; }
html[lang="ko"] .prompt-body { font-family: var(--mono), var(--sans); }

/* sections */
.section { padding: 128px 0 0; }
.section > .eyebrow, .section > h2, .section > .section-lede { text-align: center; margin-inline: auto; }
h2 {
  margin: 0; font-size: clamp(34px, 4.8vw, 64px); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; max-width: 860px;
  background: var(--chrome-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.section-lede { font-size: 18px; max-width: 640px; }
.section-lede { color: var(--muted); margin: 20px 0 0; }
h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: -.01em; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 48px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { padding: 0 0 26px; }
.steps li > :not(.bar) { margin-left: 26px; margin-right: 26px; }
.steps li .step-n { margin-top: 22px; }
.steps code { margin-left: 26px !important; margin-right: 26px !important; }
.steps p { color: var(--muted); font-size: 15px; margin: 0 0 18px; }
.steps code {
  display: block; margin-top: 8px; padding: 9px 12px; border-radius: 8px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge); color: var(--text); font-size: 12.5px;
  overflow-x: auto; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.step-n {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 18px; border-radius: 50%;
  font: 700 13px var(--mono); color: #0B0D12;
  background: radial-gradient(circle at 35% 25%, #FFFFFF, #DCE3F5 35%, #8E9CC2 60%, #F2F5FF 100%);
  box-shadow: inset 0 -2px 4px rgba(0,0,0,.35), 0 6px 18px -6px rgba(115,237,255,.8), 0 0 0 1px rgba(255,255,255,.25);
}

.flow { margin: 48px 0 0; }
.flow img { width: 100%; height: auto; display: block; }

.race { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.cmp-next { max-width: 760px; margin: 28px auto 0; text-align: center; font-size: 15px; color: var(--muted); }

/* What works, after a recording, and not: three windows, one list each. */
.scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; align-items: start; }
.scope-col ul { margin: 0; padding: 6px 20px 16px; list-style: none; }
.scope-col li { position: relative; padding: 10px 0 10px 28px; border-top: 1px solid rgba(255,255,255,.06); color: var(--muted); font-size: 15px; }
.scope-col li:first-child { border-top: 0; }
.scope-col li::before { content: ""; position: absolute; left: 0; top: 15px; width: 16px; height: 16px; border-radius: 50%; }
.scope-col.yes li::before { background: rgba(61,214,140,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233DD68C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 10px rgba(61,214,140,.45); }
.scope-col.rec li::before { background: rgba(245,176,65,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3' fill='none' stroke='%23F5B041' stroke-width='1.8'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 10px rgba(245,176,65,.4); }
.scope-col.no li::before { background: rgba(255,122,182,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.2 5.2l5.6 5.6M10.8 5.2l-5.6 5.6' fill='none' stroke='%23FF7AB6' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; box-shadow: 0 0 10px rgba(255,122,182,.4); }
.scope-col.yes .bar em { color: #9FE3C1; }
.scope-col.rec .bar em { color: var(--amber); }
.scope-col.no .bar em { color: var(--pink); }
.scope-col code { color: var(--text); }
.scope-note { margin: 0; padding: 0 20px 18px; font: 12.5px var(--mono); color: var(--faint); }
.scope-note code { color: var(--amber); }
.lane-rows { margin: 0; padding: 6px 0 4px; list-style: none; counter-reset: lane; }
.lane-rows li { display: grid; gap: 4px; padding: 13px 20px; border-top: 1px solid rgba(255,255,255,.06); }
.lane-rows li:first-child { border-top: 0; }
.lane-rows b { font: 500 11.5px var(--mono); color: var(--faint); letter-spacing: .02em; }
.lane-rows b::before { counter-increment: lane; content: counter(lane, decimal-leading-zero) "  "; color: #73EDFF; }
.lane-rows span { font-size: 15px; color: var(--muted); }
.lane.ours .lane-rows span { color: var(--text); }
.lane.ours .bar em { color: #73EDFF; }
.lane.ours::before { opacity: .95; }
.lane.other { opacity: .78; }
.lane-note { margin: 0; padding: 14px 20px 18px; border-top: 1px solid var(--edge); font: 12.5px var(--mono); color: var(--faint); }
.lane.ours .lane-note { color: #9FE3C1; }
.lane code { color: var(--amber); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 48px; }
.features .bar { grid-column: 1 / -1; }
.features article { padding: 30px 28px; border: 0 solid rgba(255,255,255,.08); border-width: 0 0 1px 1px; transition: background .2s; }
.features article:nth-child(3n+2) { border-left-width: 0; }
.features article:nth-last-child(-n+3) { border-bottom-width: 0; }
.features article:hover { background: rgba(255,255,255,.04); }
.features svg { width: 26px; height: 26px; margin-bottom: 18px; fill: none; stroke: #73EDFF; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(115,237,255,.6)); }
.features p { margin: 0; color: var(--muted); font-size: 15px; }
.features code { color: var(--text); }

.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.pack { display: flex; flex-direction: column; padding: 0 0 22px; transition: transform .2s; }
.pack > :not(.bar) { margin-left: 22px; margin-right: 22px; }
.pack img { margin-top: 22px; }
.pack .bar em { margin-left: 0; }
.pack:hover { transform: translateY(-2px); }
.pack img { width: 44px; height: 44px; margin-bottom: 18px; border-radius: 10px; box-shadow: 0 8px 24px -10px rgba(0,0,0,.8); }
.pack p { flex: 1; margin: 0 0 18px; color: var(--muted); font-size: 14.5px; }
.pack code {
  padding: 8px 12px; border-radius: 8px; background: rgba(0,0,0,.35); border: 1px solid var(--edge);
  font-size: 12.5px; white-space: nowrap; overflow-x: auto;
}
.pack code::before { content: "$ "; color: var(--blue-hi); }
.packs-note { margin: 16px 0 0; font-size: 12.5px; color: var(--faint); }
.section-lede code { color: var(--text); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.ticks { margin: 24px 0 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding-left: 28px; margin-top: 12px; color: var(--muted); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 10px rgba(61,214,140,.45);
  background: rgba(61,214,140,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%233DD68C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;
}
.ticks code { color: var(--text); }
.codewin .code { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.codewin .code::before { display: none; }
.code {
  margin: 0; padding: 22px 24px; border-radius: var(--radius);
  font: 13.5px/1.8 var(--mono); color: var(--text); overflow-x: auto;
}
.code .c { color: var(--faint); }
.code b { color: var(--blue-hi); font-weight: 500; }
.code n { color: var(--pink); }

.final { text-align: center; padding: 144px 0 120px; }
.final h2 { max-width: none; }
.final img { margin: 0 auto 28px; filter: drop-shadow(0 16px 40px rgba(47,91,234,.45)); }
.final h2 { margin-inline: auto; }

.footer {
  padding: 28px 0; background: rgba(9, 11, 17, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--edge); box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.footer img { height: 22px; width: auto; }
.footer nav { display: flex; gap: 24px; font-size: 14px; color: var(--faint); flex-wrap: wrap; }
.footer nav a:hover { color: var(--text); }

@media (max-width: 960px) {
  .hero { padding-top: 64px; }
  .hero-grid, .split { grid-template-columns: 1fr; gap: 40px; }
  .desk { height: auto; display: grid; gap: 14px; }
  .desk .win { transform: none; }
  .desk .win { position: static; width: auto; }
  .desk .about, .desk .clock { display: none; }
  .race, .scope { grid-template-columns: 1fr; }
  .section > .eyebrow, .section > h2, .section > .section-lede { text-align: left; margin-inline: 0; }
  .steps, .features { grid-template-columns: 1fr; }
  .features article { border-left-width: 0; border-bottom-width: 1px; }
  .features article:last-child { border-bottom-width: 0; }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .section { padding-top: 80px; }
}
@media (max-width: 640px) {
  /* Phones: lighter glass (blur is the expensive part over WebGL), fewer
     windows in the hero, full-width buttons, tighter rhythm. */
  .install, .win, .code, .nav, .footer, .btn-ghost { backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); }
  .desk .win { box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 40px -24px rgba(0,0,0,.9); }
  .desk .setup { display: none; }
  .term-body { padding: 14px 14px 18px; font-size: 11.5px; }
  .action-list li { grid-template-columns: 40px 44px 1fr auto; padding: 8px 12px; }
  .action-list span { font-size: 12.5px; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }
  .section { padding-top: 72px; }
  .agent-prompt { padding-top: 64px; }
  h2 { font-size: clamp(30px, 9vw, 40px); }
  .section-lede, .lede { font-size: 16px; }
  .prompt-body { font-size: 12px; padding: 16px 14px 18px; }
  .steps li > :not(.bar), .steps code { margin-left: 18px !important; margin-right: 18px !important; }
  .features article { padding: 22px 18px; }
  .lane-rows li { padding: 11px 16px; }
  .scope-col ul { padding: 4px 16px 14px; }
  .final { padding: 96px 0 80px; }
  .nav-inner { height: 56px; }
  .nav-links a:not(.nav-gh) { display: none; }
  .nav-links { gap: 10px; }
  .lede { font-size: 16.5px; }
  .packs { grid-template-columns: 1fr; }
  .term-body { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .term-body .l { animation: none; opacity: 1; }
  .progress i { animation: none; width: 100%; }
  .btn, .pack { transition: none; }
}

/* The hero cursor: the arrow from the mark flies in from the lower left,
   strikes the prompt (the bolt flashes, the transcript appears), jumps to the
   About window and strikes once more (its title bar lights), then holds.
   One 4.8 s period shared by every piece; transform and opacity only.
   --hc-t shifts every clock together (used by the frame captures). */
.desk {
  --hc-start: translate(-6%, 106%);
  --hc-prompt: translate(252px, 172px);
  --hc-about: translate(262px, 11px);
}
.hero-cursor { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 40; pointer-events: none; }
.hc { transform-box: view-box; transform-origin: 0 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.hc-cur, .hc-trail { opacity: 0; transform: var(--hc-start); animation-fill-mode: both; }
.hc-cur { animation: hc-move 4.8s linear infinite both, hc-show 4.8s linear infinite both; animation-delay: var(--hc-t, 0s); }
.hc-trail { animation: hc-move 4.8s linear infinite both, hc-trail 4.8s linear infinite both; }
.hc-t1 { animation-delay: calc(var(--hc-t, 0s) + .05s); }
.hc-t2 { animation-delay: calc(var(--hc-t, 0s) + .1s); }
.hc-strike { transform-box: view-box; transform-origin: 0 0; opacity: 0; animation: hc-strike 4.8s linear infinite; animation-delay: var(--hc-t, 0s); }
@keyframes hc-move {
  0% { transform: var(--hc-start); animation-timing-function: cubic-bezier(.15, .85, .25, 1); }
  5.2%, 29% { transform: var(--hc-prompt); animation-timing-function: cubic-bezier(.3, .8, .2, 1); }
  34.2%, 97.4% { transform: var(--hc-about); }
  97.5%, 100% { transform: var(--hc-start); }
}
@keyframes hc-show { 0% { opacity: 0; } 1.5%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hc-trail {
  0%, .8% { opacity: 0; } 1.6%, 4.6% { opacity: .5; } 6.5%, 28.8% { opacity: 0; }
  29.6%, 33.6% { opacity: .5; } 35.5%, 100% { opacity: 0; }
}
@keyframes hc-strike {
  0%, 5.2% { opacity: 0; transform: scale(.5); }
  5.8% { opacity: 1; transform: scale(1.5); }
  8%, 34.2% { opacity: 0; transform: scale(.6); }
  34.8% { opacity: 1; transform: scale(1.5); }
  37.3%, 100% { opacity: 0; transform: scale(.6); }
}
.desk .about .bar, .desk .actions .bar { position: relative; }
.desk .about .bar::after, .desk .actions .bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(110,139,255,.6), rgba(47,91,234,.45));
  opacity: 0;
}
.desk .about .bar::after { animation: hc-light 4.8s linear infinite; animation-delay: var(--hc-t, 0s); }
@keyframes hc-light { 0%, 34.2% { opacity: 0; } 34.6%, 36.4% { opacity: 1; } 37.5%, 100% { opacity: 0; } }
@media (max-width: 960px) {
  /* The desk is a stack here and About is hidden: the second strike lands on
     the actions window instead. */
  .desk { --hc-prompt: translate(252px, 69px); --hc-about: translate(60%, calc(100% - 250px)); }
  .desk .about .bar::after { animation: none; }
  .desk .actions .bar::after { animation: hc-light 4.8s linear infinite; animation-delay: var(--hc-t, 0s); }
}
@media (max-width: 640px) {
  .desk { --hc-prompt: translate(218px, 64px); --hc-about: translate(60%, calc(100% - 102px)); }
}
.desk.off *, .desk.off *::after,
.desk.off .about .bar::after, .desk.off .actions .bar::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  /* No movement: the cursor rests at the prompt with the bolt as a still. */
  .hc-trail { display: none; }
  .hc-cur, .hc-strike, .desk .about .bar::after, .desk .actions .bar::after { animation: none; }
  .hc-cur { transform: var(--hc-prompt); opacity: 1; }
  .hc-strike { opacity: 1; transform: none; }
}

/* The setup transcript has long lines: they scroll inside the window on
   wide screens and wrap on narrow ones, never widening the page. */
.term { min-width: 0; overflow: hidden; }
.term-body { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
@media (max-width: 960px) {
  .term-body { white-space: pre-wrap; word-break: break-word; }
}