/* The homepage (design D, 2026-10). Self-contained: the other pages keep
   style.css, and nothing here is shared with them. The tokens are the
   desktop app's own - void, ice, cyan - so the page looks like what you
   download. */
:root {
  --void: #05070d;
  --band: #0b1120;
  --ice: #e4edf7;
  --body: #b6c4d6;
  --dim: #8fa3bd;
  --faint: #6e819a;
  --cyan: #4fd6e2;
  --green: #4ee8a8;
  --violet: #9b6bff;
  --amber: #f0a35e;
  --frame: rgba(79, 214, 226, 0.16);
  --frame-in: rgba(8, 18, 32, 0.55);
  --rule: rgba(79, 214, 226, 0.14);
  --sans: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--void); color: var(--ice);
  font-family: var(--sans); font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.accent { color: var(--cyan); }
.dim { color: var(--dim); }
.ice { color: var(--ice); }
.small { font-size: 14px; }
.mono { font-family: var(--mono); }
.mono-cap, .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 0; }
.eyebrow { color: var(--cyan); }
.gridbg {
  background-image: linear-gradient(rgba(79,214,226,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(79,214,226,.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---- the app's frame: a panel with corner brackets ---------------------- */
.hf { position: relative; }
.hf::before, .hf::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 14px 2px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 14px 2px no-repeat;
}
.hf::after {
  background:
    linear-gradient(var(--cyan), var(--cyan)) left top / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right top / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) left bottom / 2px 14px no-repeat,
    linear-gradient(var(--cyan), var(--cyan)) right bottom / 2px 14px no-repeat;
}
.panel { background: var(--frame-in); border: 1px solid var(--frame); display: flex; flex-direction: column; }
.ph {
  height: 30px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 12px; border-bottom: 1px solid rgba(79,214,226,.12);
  background: linear-gradient(90deg, rgba(79,214,226,.10), transparent 70%);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; color: var(--cyan);
}
.ph .dim { color: var(--faint); }

/* ---- buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 6px; cursor: pointer;
  font: 500 16px var(--sans); color: var(--ice); text-decoration: none;
  background: transparent; border: 1px solid rgba(79,214,226,.45);
  transition: transform .18s var(--ease), background .18s ease, box-shadow .25s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-2px); border-color: var(--cyan); background: rgba(79,214,226,.06); }
.btn:active { transform: none; }
.btn.primary { background: var(--cyan); border-color: var(--cyan); color: var(--void); font-weight: 600; box-shadow: 0 8px 30px rgba(79,214,226,.18); }
.btn.primary:hover { background: #74e4ee; box-shadow: 0 10px 40px rgba(79,214,226,.35); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; gap: 8px; }
.btn.big { min-height: 54px; padding: 0 26px; font-size: 17px; }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- header ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule);
  background: rgba(5,7,13,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: background .3s ease;
}
.top.scrolled { background: rgba(5,7,13,.9); }
.top-inner { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); min-height: 64px; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 10px 0; flex: none; }
.brand span { font: 500 13px var(--mono); letter-spacing: .22em; color: var(--cyan); }
.brand img { transition: transform .35s var(--ease), filter .35s var(--ease); }
.brand:hover img { transform: scale(1.08); filter: drop-shadow(0 0 8px rgba(79,214,226,.45)); } /* was a half-turn: read as the logo flipping upside down (owner) */
.top-links { position: relative; display: flex; align-self: stretch; margin-left: 12px; }
.top-links a {
  display: flex; align-items: center; padding: 0 16px; min-height: 44px; text-decoration: none;
  font: 500 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  transition: color .2s ease;
}
.top-links a:hover, .top-links a.on { color: var(--cyan); }
.top-ink { position: absolute; bottom: 0; height: 2px; background: var(--cyan); left: 0; width: 0;
  transition: left .35s var(--ease), width .35s var(--ease); box-shadow: 0 0 10px var(--cyan); }
.top-end { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.top-signin { text-decoration: none; font: 11px var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--dim);
  min-height: 44px; display: inline-flex; align-items: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-signin:hover { color: var(--cyan); }

/* ---- hero --------------------------------------------------------------- */
.hero { border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 70%; pointer-events: none;
  background: radial-gradient(ellipse at 70% 0%, rgba(79,214,226,.10), transparent 60%);
}
.hero-inner { position: relative; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(40px, 6vw, 72px); display: flex; flex-direction: column; gap: 48px; }
.hero-copy { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; justify-content: space-between; }
.hero-lead { flex: 1 1 560px; display: flex; flex-direction: column; gap: 24px; }
.hero-side { flex: 1 1 380px; max-width: 460px; display: flex; flex-direction: column; gap: 22px; }
h1 { font-size: clamp(42px, 7vw, 94px); line-height: .98; letter-spacing: -.03em; }
.lede { margin: 0; font-size: 19px; color: var(--body); }
.cta { display: flex; gap: 10px; flex-wrap: wrap; }
.eyebrow.live { display: flex; align-items: center; gap: 10px; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } }

/* ---- the dashboard mock ------------------------------------------------- */
.hud { border: 1px solid var(--frame); background: rgba(5,7,13,.85); padding: 0 14px 14px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(79,214,226,.04); }
.hud-bar { min-height: 40px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.hud-tabs { display: flex; flex-wrap: wrap; align-self: stretch; }
.hud-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; padding: 0 14px; min-height: 40px;
  font: 10.5px var(--mono); letter-spacing: .2em; color: var(--faint); transition: color .2s ease, border-color .2s ease;
}
.hud-tabs button:hover { color: var(--ice); }
.hud-tabs button.on { color: var(--cyan); border-bottom-color: var(--cyan); }
.hud-grow { flex: 1; }
.hud-date { font: 10.5px var(--mono); letter-spacing: .2em; color: var(--faint); }
.hud-clock { font: 17px var(--mono); letter-spacing: .06em; padding-left: 12px; font-variant-numeric: tabular-nums; }
.hud-grid { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(0, 2fr) minmax(220px, 1fr); gap: 12px; }
.hud-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.grow { flex: 1; }
.orb-panel { position: relative; }
.ph-state { display: flex; align-items: center; gap: 6px; color: var(--ice); }
.ph-state b { font-weight: 400; text-transform: uppercase; }
.state-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); transition: background .3s ease, box-shadow .3s ease; }
#mockState[data-mood="speaking"] { color: var(--green); }
.orb-panel[data-mood="speaking"] .state-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
.orb-panel[data-mood="thinking"] .state-dot, .orb-panel[data-mood="navigating"] .state-dot { background: #f0f0f0; box-shadow: 0 0 8px #f0f0f0; }
.orb-wrap { height: 220px; display: flex; align-items: center; justify-content: center; }
#siteOrb { width: 220px; height: 220px; display: block; }
.orb-panel.drag-active { border-color: var(--cyan); box-shadow: 0 0 30px rgba(79,214,226,.25) inset; }
.talk-btn {
  align-self: center; margin: 0 0 14px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: rgba(79,214,226,.06); border: 1px solid rgba(79,214,226,.35); color: var(--ice); border-radius: 999px;
  padding: 0 16px; min-height: 36px; font: 10.5px var(--mono); letter-spacing: .18em; text-transform: uppercase;
  transition: background .2s ease, border-color .2s ease, transform .2s var(--ease);
}
.talk-btn:hover { border-color: var(--cyan); background: rgba(79,214,226,.12); transform: translateY(-1px); }
.talk-btn.on { border-color: var(--green); color: var(--green); }
.log-panel { flex: 1; min-height: 190px; }
.log { padding: 12px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; overflow-y: auto; max-height: 240px; scrollbar-width: none; }
.log::-webkit-scrollbar { display: none; }
.log p, .log .row { margin: 0; display: flex; gap: 10px; animation: rowIn .35s var(--ease) both; }
.log p::before, .log .row::before { font: 10.5px var(--mono); letter-spacing: .14em; flex: none; padding-top: 2px; width: 66px; }
.log .mock-you::before { content: "YOU"; color: var(--dim); }
.log .mock-it::before { content: "OVERVIEW"; color: var(--cyan); }
.log .tool { color: var(--faint); font: 12px var(--mono); }
.log .tool::before { content: "·"; color: var(--faint); text-align: right; padding-right: 6px; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.caret { display: inline-block; width: 7px; height: 1.1em; background: var(--cyan); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.preview-panel { min-height: 460px; }
.preview { position: relative; flex: 1; overflow: hidden; }
.view { position: absolute; inset: 0; padding: 26px; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .35s ease, transform .35s var(--ease), visibility 0s .35s; overflow: auto; scrollbar-width: none; }
.view.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pv { position: absolute; inset: 26px; display: flex; flex-direction: column; justify-content: center; gap: 20px;
  opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .4s ease, transform .4s var(--ease), visibility 0s .4s; }
.pv.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pv-empty { align-items: center; text-align: center; gap: 12px; }
.pv-empty .mono-cap { color: var(--cyan); margin-top: 18px; }
.rings { position: relative; width: 150px; height: 150px; }
.rings i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(79,214,226,.3); animation: ring 4s ease-out infinite; }
.rings i:nth-child(2) { animation-delay: 1.33s; }
.rings i:nth-child(3) { animation-delay: 2.66s; }
@keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.q { color: var(--faint); }
.drive { display: flex; flex-direction: column; gap: 8px; }
.drive-row { display: flex; justify-content: space-between; font-size: 14px; gap: 10px; }
.bar { height: 8px; background: rgba(148,187,224,.10); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--cyan); transition: width 1.1s var(--ease); }
.bar.green i { background: var(--green); }
.bar.amber i { background: var(--amber); }
.pv.on .bar i { width: var(--w); }
.pv.on .drive:nth-child(3) .bar i { transition-delay: .15s; }
.pv.on .drive:nth-child(4) .bar i { transition-delay: .3s; }
.monitors { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 200px; }
.monitor { border: 1px solid rgba(148,187,224,.3); border-radius: 6px; background: rgba(148,187,224,.04); position: relative; }
.monitor span { position: absolute; left: 10px; bottom: 8px; font-size: 11px; }
.mini-win { position: absolute; width: 30%; height: 44%; top: 18%; left: 62%; border: 1px solid var(--cyan); border-radius: 4px;
  background: rgba(79,214,226,.12); box-shadow: 0 0 18px rgba(79,214,226,.3); transition: left 1.1s var(--ease) .5s; }
.mini-win i { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(79,214,226,.45); }
.pv.on .mini-win { left: 9%; }
.files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.files li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border: 1px solid rgba(148,187,224,.08);
  background: rgba(148,187,224,.03); font-size: 14px; opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s var(--ease); }
.files li .mono { font-size: 11.5px; }
.pv.on .files li { opacity: 1; transform: none; }
.pv.on .files li:nth-child(2) { transition-delay: .12s; }
.pv.on .files li:nth-child(3) { transition-delay: .24s; }
.pv.on .files li:nth-child(4) { transition-delay: .36s; }
.pv.on .files li:nth-child(5) { transition-delay: .48s; }
.cal { border: 1px solid rgba(148,187,224,.14); }
.cal-head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(148,187,224,.1); font: 10.5px var(--mono); letter-spacing: .2em; color: var(--cyan); }
.cal-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 14px; }
.cal-days span { text-align: center; padding: 14px 0; font: 11px var(--mono); letter-spacing: .14em; color: var(--faint); border: 1px solid rgba(148,187,224,.08); }
.cal-days .pick { transition: color .3s ease .4s, border-color .3s ease .4s, background .3s ease .4s; }
.pv.on .cal-days .pick { color: var(--cyan); border-color: var(--cyan); background: rgba(79,214,226,.08); }
.cal-event { display: flex; gap: 16px; align-items: center; margin: 0 14px 14px; padding: 12px 14px; border-left: 2px solid var(--cyan);
  background: rgba(79,214,226,.06); opacity: 0; transform: translateY(8px); transition: opacity .4s ease .7s, transform .4s var(--ease) .7s; }
.pv.on .cal-event { opacity: 1; transform: none; }
.cal-event time { font: 11px var(--mono); color: var(--cyan); letter-spacing: .14em; }
.cal-event div { display: flex; flex-direction: column; }
.cal-event small { color: var(--dim); font-size: 12.5px; }

.agent-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.agent-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 8px; border: 1px solid rgba(148,187,224,.12);
  text-align: center; font-size: 14px; }
.agent-tile.on { border-color: var(--cyan); background: rgba(79,214,226,.06); }
.agent-tile.off { opacity: .55; }
.agent-tile small { font: 9.5px var(--mono); letter-spacing: .16em; color: var(--cyan); }
.agent-tile small.working { color: var(--green); }
.agent-tile em { font: normal 10.5px var(--mono); color: var(--faint); min-height: 1.2em; }
.mini-orb { width: 38px; height: 38px; border-radius: 50%; margin-bottom: 6px; position: relative;
  border: 1px solid hsla(var(--h), 80%, 65%, .5); box-shadow: inset 0 0 12px hsla(var(--h), 80%, 65%, .35); }
.mini-orb::after { content: ""; position: absolute; inset: 40%; border-radius: 50%; background: hsl(var(--h), 80%, 65%); box-shadow: 0 0 10px hsl(var(--h), 80%, 65%); }
.mini-orb::before { content: ""; position: absolute; inset: 28% -14%; border-radius: 50%; border: 1px solid hsla(var(--h), 80%, 65%, .8); animation: spin 6s linear infinite; }
/* Match the app's original orbiting-agent light and Agents panel renderer. */
.agent-orb { --ag-hue: var(--h, 262); display: grid; place-items: center; width: 32px; height: 32px; flex: none; opacity: .6; transition: opacity 400ms ease; }
.agent-orb.deployed, .agent-orb.working { opacity: 1; }
.agent-tile .agent-orb { margin-bottom: 6px; }
.agent-tile:nth-child(2) .agent-orb { --ag-hue: 262; }
.agent-tile:nth-child(3) .agent-orb { --ag-hue: 152; }
.agent-light { position: relative; display: block; width: 5px; height: 5px; border-radius: 50%; background: hsl(var(--ag-hue), 100%, 92%);
  box-shadow: 0 0 4px 1px hsla(var(--ag-hue), 95%, 70%, .9), 0 0 12px 3px hsla(var(--ag-hue), 95%, 60%, .35);
  transition: background 400ms ease, box-shadow 400ms ease; }
.agent-orb.working .agent-light { box-shadow: 0 0 5px 1px hsla(var(--ag-hue), 95%, 75%, 1), 0 0 16px 5px hsla(var(--ag-hue), 95%, 62%, .45); }
.agent-orb.working .agent-light::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid hsla(var(--ag-hue), 95%, 72%, .6); animation: agent-halo 1.8s ease-out infinite; }
@keyframes agent-halo { from { transform: scale(.5); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .agent-orb.working .agent-light::after { animation: none; opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.term { margin-top: 14px; padding: 12px 14px; border: 1px solid rgba(148,187,224,.1); background: rgba(0,0,0,.25);
  font: 12.5px/1.7 var(--mono); min-height: 170px; }
.term p { margin: 0; animation: rowIn .3s var(--ease) both; }
.term .u b { color: var(--cyan); font-weight: 400; }
.term .r b { color: var(--green); font-weight: 400; }
.term .t { color: var(--faint); font-size: 11.5px; }
.conns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conns li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid rgba(148,187,224,.12); font-size: 14.5px; }
.conns li > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.conns small { color: var(--faint); font-size: 12px; }
.ci { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; background: rgba(79,214,226,.1); color: var(--cyan); font: 500 11px var(--mono); }
.conn { cursor: pointer; font: 500 13px var(--sans); padding: 0 14px; min-height: 34px; border-radius: 6px; background: transparent;
  border: 1px solid rgba(79,214,226,.45); color: var(--cyan); transition: all .2s ease; }
.conn.on { border-color: rgba(78,232,168,.5); color: var(--green); }
.conn:hover { background: rgba(79,214,226,.08); }
.set { display: flex; flex-direction: column; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 4px; border-bottom: 1px solid rgba(148,187,224,.08); font-size: 15px; cursor: pointer; }
.set-row.col { flex-wrap: wrap; cursor: default; }
.set-row.col input { flex: 1 1 100%; order: 3; }
.set-row input[type="checkbox"] { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: rgba(148,187,224,.18); position: relative; cursor: pointer; transition: background .2s ease; flex: none; margin: 0; }
.set-row input[type="checkbox"]::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ice); transition: transform .25s var(--ease); }
.set-row input[type="checkbox"]:checked { background: var(--cyan); }
.set-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
input[type="range"] { accent-color: var(--cyan); }

.deploy { padding: 10px 12px; border-bottom: 1px solid rgba(79,214,226,.08); display: flex; align-items: center; gap: 10px; font: 10px var(--mono); letter-spacing: .18em; color: var(--faint); }
.slots { flex: 1; display: flex; gap: 3px; }
.slots i { flex: 1; height: 4px; background: rgba(148,187,224,.14); }
.slots i.lit { background: var(--cyan); box-shadow: 0 0 6px rgba(79,214,226,.6); }
.alist, .plist { list-style: none; margin: 0; padding: 6px 0 10px; font-size: 14px; }
.alist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.alist .tag { margin-left: auto; font: 9.5px var(--mono); letter-spacing: .16em; color: var(--cyan); }
.alist .tag.live { color: var(--green); }
.alist .tag.dim { color: var(--faint); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3a4a60; flex: none; }
.dot.on { background: var(--cyan); }
.dot.live { background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s ease-in-out infinite; }
.plist li { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.plist li span { display: flex; align-items: center; gap: 8px; }
.plist i { width: 5px; height: 5px; border-radius: 50%; }
.plist small { font: 9.5px var(--mono); letter-spacing: .16em; color: var(--faint); padding-left: 13px; }
.hud-say { height: 34px; display: flex; align-items: stretch; border: 1px solid var(--frame); background: var(--frame-in); overflow: hidden; }
.say-tag { display: flex; align-items: center; padding: 0 12px; background: var(--cyan); color: var(--void); font: 500 10px var(--mono); letter-spacing: .2em; flex: none; position: relative; z-index: 1; }
.say-track { flex: 1; overflow: hidden; display: flex; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.say-run { display: flex; align-items: center; gap: 18px; padding-left: 18px; white-space: nowrap; animation: marquee 38s linear infinite; flex: none; }
.say-track:hover .say-run { animation-play-state: paused; }
.say-run button { background: none; border: 0; color: var(--body); font: 13.5px var(--sans); cursor: pointer; padding: 6px 0; transition: color .2s ease; }
.say-run button:hover { color: var(--cyan); }
.say-run i { color: rgba(79,214,226,.4); font-style: normal; }
@keyframes marquee { to { transform: translateX(-50%); } }
.hud-hint { margin: -28px 0 0; text-align: center; color: var(--faint); font-size: 14px; }
.hud-hint b { color: var(--body); font-weight: 500; }

/* ---- sections ----------------------------------------------------------- */
.section { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px); display: flex; flex-direction: column; gap: 44px; }
.band { background: var(--band); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.sec-head { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.sec-title { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }
.sec-title .dim { margin: 0; }
.sec-note { margin: 0; max-width: 400px; color: var(--dim); }
h2 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -.025em; }
.says { list-style: none; margin: 0; padding: 0; }
.says li { display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; padding: 20px; border-bottom: 1px solid rgba(148,187,224,.08);
  transition: background .25s ease; cursor: default; }
.says li:last-child { border-bottom: 0; }
.says li:hover { background: rgba(79,214,226,.04); }
.says .who { font: 10.5px var(--mono); letter-spacing: .16em; color: var(--dim); width: 44px; }
.says .said { flex: 2 1 360px; font-size: clamp(18px, 2vw, 21px); }
.says .did { flex: 1 1 220px; font: 13px var(--mono); color: var(--cyan); opacity: 0; transform: translateX(-10px); transition: opacity .4s ease, transform .4s var(--ease); }
.says li.done .did { opacity: 1; transform: none; }
.says .said .caret { height: .95em; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tile { padding: 22px; gap: 12px; color: var(--cyan); transition: transform .25s var(--ease), border-color .25s ease, background .25s ease; }
.tile span { color: var(--ice); font-weight: 600; font-size: 18px; }
.tile:hover { transform: translateY(-4px); border-color: rgba(79,214,226,.4); background: rgba(8,18,32,.85); }
.split { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 56px; }
.split > * { flex: 1 1 420px; }
.split-copy { display: flex; flex-direction: column; gap: 18px; }
.split-copy p { margin: 0; max-width: 480px; }
.mem { padding: 18px 18px 22px; display: flex; flex-direction: column; }
.mem-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-bottom: 1px solid rgba(148,187,224,.08);
  font-size: 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s var(--ease); }
.mem-item:last-child { border-bottom: 0; }
.mem.in .mem-item { opacity: 1; transform: none; }
.mem.in .mem-item:nth-child(2) { transition-delay: .35s; }
.mem.in .mem-item:nth-child(3) { transition-delay: .7s; }
.agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.agent { padding: 26px 22px; align-items: center; gap: 10px; text-align: center; transition: transform .3s var(--ease), border-color .3s ease; }
.agent:hover { transform: translateY(-4px); border-color: hsla(var(--h), 80%, 65%, .5); }
.agent strong { font-size: 19px; }
.agent em { font: normal 12.5px var(--mono); color: var(--faint); }
.a-ring { fill: none; stroke: hsla(var(--h), 80%, 65%, .22); }
.a-core { fill: hsla(var(--h), 80%, 65%, .08); stroke: hsl(var(--h), 80%, 65%); stroke-dasharray: 1.5 3; }
.a-band { fill: none; stroke: hsl(var(--h), 80%, 65%); stroke-width: 1.5; }
.a-dot { fill: hsl(var(--h), 80%, 65%); }
.a-spin { transform-origin: 42px 42px; animation: spin 7s linear infinite; }
.a-spin.slow { animation-duration: 11s; }
.a-spin.slower { animation-duration: 16s; animation-direction: reverse; }
.a-state { font: 10px var(--mono); letter-spacing: .18em; color: var(--faint); transition: color .3s ease; }
.a-state.live { color: var(--cyan); }
.onmachine { padding: 22px 24px; flex-direction: row; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.onmachine > span:last-child { flex: 1 1 420px; color: var(--body); }

/* pricing */
.billing { position: relative; display: flex; border: 1px solid rgba(79,214,226,.22); padding: 3px; gap: 3px; }
.billing button { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; font: 11px var(--mono); letter-spacing: .18em;
  padding: 0 16px; min-height: 44px; color: var(--dim); transition: color .3s ease; }
.billing button[aria-pressed="true"] { color: var(--void); }
.billing-toggle-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: 0; background: var(--cyan);
  transition: left .35s var(--ease), width .35s var(--ease); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: stretch;
  max-width: 820px; margin-inline: auto; }
.plan { transition: transform .3s var(--ease), box-shadow .3s ease; }
.plan:hover { transform: translateY(-4px); }
.plan.featured { background: rgba(8,18,32,.85); border-color: var(--cyan); box-shadow: 0 0 40px rgba(79,214,226,.12); }
.plan.featured .ph { background: linear-gradient(90deg, rgba(79,214,226,.22), transparent 80%); border-bottom-color: rgba(79,214,226,.25); }
.plan-body { padding: 26px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.price { margin: 0; font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; transition: opacity .14s ease; }
.price span { font-size: 16px; color: var(--dim); font-weight: 400; letter-spacing: 0; margin-left: 4px; }
.plan-sub { margin: 0; color: var(--dim); font-size: 15px; min-height: 1.5em; transition: opacity .14s ease; }
.plan ul { margin: 6px 0 10px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; color: var(--body); flex: 1; }
.plan li { padding-left: 18px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 1px; background: var(--cyan); }

/* faq */
.faq { flex-direction: row; flex-wrap: wrap; gap: 48px; }
.faq .sec-title { flex: 1 1 300px; align-self: flex-start; }
.faq-list { flex: 2 1 540px; display: flex; flex-direction: column; gap: 10px; }
details.panel { padding: 0; }
summary { list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-size: 18px; font-weight: 500; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 1.5px solid var(--cyan); border-bottom: 1.5px solid var(--cyan); transform: rotate(45deg); transition: transform .3s var(--ease), margin .3s var(--ease); }
details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq-a { overflow: hidden; transition: height .35s var(--ease); }
.faq-a p { margin: 0; padding: 0 20px 18px; color: var(--dim); }

/* closer + footer */
.closer { border-top: 1px solid var(--rule); }
.closer-inner { padding-top: clamp(80px, 11vw, 140px); padding-bottom: clamp(80px, 11vw, 140px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.closer-logo { animation: float 6s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.closer h2 { font-size: clamp(44px, 7vw, 92px); line-height: .98; letter-spacing: -.035em; }
.foot { border-top: 1px solid var(--rule); }
.foot-inner { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; align-items: center; }
.foot-brand { display: flex; align-items: center; gap: 10px; font: 11px var(--mono); letter-spacing: .2em; color: var(--faint); }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.foot nav a { text-decoration: none; color: var(--dim); transition: color .2s ease; }
.foot nav a:hover { color: var(--cyan); }

/* ---- scroll reveal ------------------------------------------------------ */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .1s; }
.js .reveal.d2 { transition-delay: .2s; }
.js .reveal.d3 { transition-delay: .3s; }
.js .reveal.now { transition: none; }
.nav-highlight { animation: hl 1.8s ease-out; }
@keyframes hl { 0% { box-shadow: 0 0 0 2px var(--cyan); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* ---- modal (site.js) ---------------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(3,5,10,.82); backdrop-filter: blur(6px); animation: fade .25s ease; }
.modal[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal-card { position: relative; width: 100%; max-width: 380px; padding: 30px 28px 26px; border: 1px solid var(--frame);
  background: #0b1120; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.6); animation: pop .3s var(--ease); }
@keyframes pop { from { transform: translateY(12px) scale(.98); opacity: 0; } }
.modal-card img { margin-bottom: 8px; }
.modal-card h2 { font-size: 22px; letter-spacing: -.01em; margin-bottom: 5px; }
.modal-sub { color: var(--dim); font-size: 14px; margin: 0 0 18px; }
.modal-sub strong { color: var(--cyan); font-weight: 500; overflow-wrap: anywhere; }
.modal-x { position: absolute; top: 8px; right: 10px; width: 36px; height: 36px; background: none; border: none; color: var(--dim); font-size: 24px; line-height: 1; cursor: pointer; }
.modal-x:hover { color: var(--ice); }
.modal input { width: 100%; padding: 12px 13px; margin-bottom: 9px; border-radius: 6px; font: 15px var(--sans); color: var(--ice);
  background: rgba(255,255,255,.05); border: 1px solid rgba(148,187,224,.2); }
.modal input:focus { outline: none; border-color: var(--cyan); }
.password-field { position: relative; }
.password-field input { padding-right: 82px; }
.password-field input::-ms-reveal,
.password-field input::-ms-clear { display: none; }
.password-toggle { position: absolute; top: 6px; right: 7px; height: 33px; display: inline-flex; align-items: center; gap: 5px;
  padding: 0 7px; border: 1px solid rgba(72,209,255,.42); border-radius: 5px; background: #14283b; color: var(--cyan);
  font: 600 11px var(--mono); cursor: pointer; }
.password-toggle:hover, .password-toggle:focus-visible { background: #19364e; border-color: var(--cyan); outline: none; }
.password-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.password-toggle .password-slash { display: none; }
.password-toggle[aria-pressed="true"] .password-slash { display: block; }
.note { font-size: 13px; color: var(--dim); margin: 10px 0 0; }
.note[data-tone="error"] { color: #f08a80; }
.switch { font-size: 13px; color: var(--dim); margin: 12px 0 0; }
.link { background: none; border: none; padding: 0 0 0 4px; font: inherit; color: var(--cyan); cursor: pointer; text-decoration: underline; }
#authSignedIn .link { display: block; margin: 12px auto 0; }
#authSignedIn .btn { margin-top: 6px; }

/* ---- the first screen ---------------------------------------------------
   The headline and the whole dashboard fit on the first screen together
   (owner, 2026-10: "the dashboard would be cut off"). The hero is exactly
   one viewport tall under the header; the copy is compact, and the
   dashboard takes whatever height is left, its panels shrinking to fit
   rather than running off the bottom. Desktop and laptop sizes only - on a
   phone everything stacks and scrolls. */
@media (min-width: 861px) and (min-height: 600px) {
  .hero-inner { height: calc(100svh - 65px); min-height: 600px; padding-top: clamp(20px, 3.5vh, 44px);
    padding-bottom: clamp(14px, 2.5vh, 28px); gap: clamp(14px, 2.6vh, 28px); }
  /* Wider than the rest of the page on big screens: the dashboard is the
     point, and the headline needs the room to stay on two lines. */
  .hero .wrap { max-width: 1480px; }
  .hero-copy { gap: 12px 48px; flex: none; }
  .hero-lead { gap: clamp(10px, 1.6vh, 18px); flex-basis: 520px; }
  h1 { font-size: clamp(34px, min(4.4vw, 7vh), 64px); }
  .hero-side { gap: clamp(12px, 1.8vh, 20px); }
  .lede { font-size: clamp(15px, 1.9vh, 18px); }
  .btn.big { min-height: clamp(42px, 5.4vh, 52px); }
  .hud { flex: 1; min-height: 0; }
  .hud-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); }
  .hud-col { min-height: 0; }
  .hud-col > .panel { min-height: 0; overflow: hidden; }
  .preview-panel { min-height: 0; overflow: hidden; }
  .orb-wrap { height: clamp(96px, 20vh, 220px); flex: none; }
  #siteOrb { width: clamp(96px, 20vh, 220px); height: clamp(96px, 20vh, 220px); }
  .talk-btn { display: none; }
  .log-panel { flex: 1; min-height: 0; }
  .log { flex: 1; min-height: 0; max-height: none; }
  .pv { justify-content: center; gap: clamp(10px, 2vh, 20px); }
  .monitors { height: clamp(110px, 22vh, 200px); }
  .rings { width: clamp(80px, 14vh, 150px); height: clamp(80px, 14vh, 150px); }
  .hud-hint { display: none; }
}

/* ---- small screens ------------------------------------------------------ */
@media (max-width: 1080px) {
  .hud-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .hud-grid > .hud-col:last-child { display: none; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .top-links { display: none; }
  .top-signin { display: none; }
  .hud-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-panel { min-height: 400px; }
  .hud-date { display: none; }
  .agents, .plans { grid-template-columns: minmax(0, 1fr); }
  .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hud-hint { margin-top: -20px; }
}
@media (max-width: 520px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .hud { padding: 0 8px 8px; }
  .hud-tabs button { padding: 0 9px; }
  .hud-clock { font-size: 14px; }
  .view, .pv { padding: 16px; }
  .pv { inset: 16px; }
  .btn.big { width: 100%; }
  .billing { width: 100%; }
  .billing button { flex: 1; padding: 0 8px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  html { scroll-behavior: auto; }
}

/* Pricing for two plans (1.0.22): header centred over the pair, the key
   note as a slim strip under them rather than the section's headline. */
.pricing-head { flex-direction: column; align-items: center; text-align: center; gap: 18px; margin-bottom: 8px; }
.pricing-head .sec-title { max-width: 620px; }
.byok { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
  max-width: 820px; margin: 18px auto 0; padding: 16px 20px; border-radius: 14px;
  border: 1px dashed rgba(79, 214, 226, .28); background: rgba(79, 214, 226, .04); }
.byok-text { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; }
.byok-text strong { font-size: 14px; color: var(--ice, #e6f1fb); }
.byok-text span { font-size: 13px; color: var(--dim); line-height: 1.5; }
.byok-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.byok-chips span { font: 500 11px var(--mono, monospace); letter-spacing: .06em; padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(148, 187, 224, .18); color: var(--body, #c9d6e3); }
.pricing-fine { text-align: center; margin-top: 14px; }


/* ---- first screen, second pass (owner, 2026-10: "the layout isn't good on
   the first part of the page", the dashboard "squished"). The headline,
   line and buttons now stack centred over the dashboard instead of
   splitting into two columns that never lined up, and the dashboard keeps
   a real height (it was squeezed into whatever the viewport left over, which
   clipped the chat log). The page scrolls a little further instead. */
.hero-copy { flex-direction: column; align-items: center; text-align: center; gap: 22px; }
.hero-lead { flex: none; align-items: center; }
.hero-side { flex: none; max-width: 620px; align-items: center; }
.hero-side .cta { justify-content: center; }
.hero .eyebrow.live { justify-content: center; }
@media (min-width: 861px) and (min-height: 600px) {
  .hero-inner { height: auto; min-height: 0; padding-top: clamp(40px, 6vh, 72px); gap: clamp(32px, 5vh, 52px); }
  .hero-copy { gap: 18px; }
  .hero-lead { flex-basis: auto; }
  h1 { font-size: clamp(40px, 4.6vw, 72px); }
  .hud { flex: none; height: clamp(600px, 78vh, 760px); }
}

/* ---- first screen, third pass (owner, 2026-10: "make the front page look
   better"). A glow behind the headline, a gradient on its second line, three
   plain facts under the buttons, and the dashboard lifted off the page with
   a soft cyan light under it, so the first screen has depth instead of a
   flat grid. */
.hero::before {
  inset: -10% 0 auto; height: 90%;
  background:
    radial-gradient(ellipse 55% 45% at 50% 18%, rgba(79,214,226,.16), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 62%, rgba(155,107,255,.07), transparent 70%);
}
.hero h1 .accent, .stage h1 .accent {
  background: linear-gradient(90deg, #4fd6e2 0%, #7be6ef 45%, #9fb8ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px;
  font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero-facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.hero .hud { position: relative; border-color: rgba(79,214,226,.28); background: rgba(6,10,18,.92);
  box-shadow: 0 0 0 1px rgba(79,214,226,.06), 0 30px 80px -20px rgba(79,214,226,.22), 0 50px 120px -30px rgba(0,0,0,.8); }
.hero .hud::before { content: ""; position: absolute; left: 10%; right: 10%; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(123,230,239,.9), transparent); }
@media (min-width: 861px) and (min-height: 600px) {
  h1 { font-size: clamp(44px, 5vw, 80px); }
}
#navSignUp[hidden] { display: none; }

/* ==== Opening scene and chapters (owner, 2026-10) ========================
   Layout from the Star Citizen site the owner pointed at: a full-screen
   opening and big centred "chapter" titles. Look is Overview's own: Space
   Grotesk, the app's orb and grid, cyan light - no planet, no starfield. */

/* -- the opening scene -- */
.stage { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden;
  border-bottom: 1px solid var(--rule); margin-top: -65px; padding-top: 65px; }
.stage::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 34%, rgba(79,214,226,.16), transparent 34%),
              radial-gradient(ellipse 80% 50% at 50% 100%, rgba(5,7,13,1), transparent 70%); }
.stage-inner { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center;
  padding-top: 24px; padding-bottom: 110px; }
.stage .hero-copy { flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.stage .hero-lead { align-items: center; gap: 18px; }
.stage .eyebrow.live { justify-content: center; }
.stage-orb { position: relative; width: clamp(150px, 24vh, 250px); aspect-ratio: 1; margin: 4px 0 6px; }
.stage-orb::before { content: ""; position: absolute; inset: -38%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(79,214,226,.22), rgba(79,214,226,.06) 45%, transparent 70%); }
.stage-orb::after { content: ""; position: absolute; inset: -12%; border-radius: 50%; border: 1px solid rgba(79,214,226,.22);
  box-shadow: 0 0 40px rgba(79,214,226,.12) inset; pointer-events: none; }
.stage-orb canvas { position: relative; width: 100%; height: 100%; display: block; }
.stage h1 { font-size: clamp(46px, 6.4vw, 104px); line-height: .98; letter-spacing: -.035em; }
.stage .hero-side { max-width: 640px; align-items: center; }
.stage .lede { text-align: center; }
.stage .cta { justify-content: center; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-decoration: none; font: 500 10px var(--mono); letter-spacing: .3em; color: var(--dim); z-index: 2; }
.scroll-cue i { width: 1px; height: 36px; background: linear-gradient(var(--cyan), transparent); animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); } }
.scroll-cue:hover { color: var(--cyan); }

/* -- chapters: centred, big -- */
.chapter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
h2, .chapter-title { font-size: clamp(38px, 5.4vw, 80px); line-height: 1; letter-spacing: -.03em; }
.sec-head { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.sec-title { align-items: center; max-width: 900px; }
.sec-note { max-width: 620px; text-align: center; color: var(--body); }
.split-copy h2 { font-size: clamp(34px, 4.2vw, 60px); }
#features, #agents { position: relative; }
#features::before, #agents::before { content: ""; position: absolute; left: 50%; top: 0; width: min(900px, 90vw); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(79,214,226,.5), transparent); }

/* The live dashboard is its own chapter. */
#demo .hero-inner { padding-top: clamp(64px, 9vh, 110px); }
@media (min-width: 861px) and (min-height: 600px) {
  .stage-inner { min-height: calc(100svh - 65px); justify-content: center; }
}
@media (max-width: 860px) { .stage { min-height: 92svh; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue i { animation: none; } }

/* ==== The opening (option A) and the Voice split (option B), owner's picks */

/* A - the title centred, the live dashboard rising under it */
.stage { min-height: 0; border-bottom: 0; }
.stage-inner { min-height: 0 !important; padding-top: clamp(64px, 11vh, 130px); padding-bottom: 0; }
.stage h1 { font-size: clamp(48px, 6vw, 96px); }
#demo { position: relative; }
#demo .hero-inner { padding-top: clamp(40px, 6vh, 64px); perspective: 2000px; }
#demo .hud { transform: rotateX(18deg) scale(.94); transform-origin: 50% 0; transition: transform 1.1s var(--ease);
  box-shadow: 0 -20px 120px -10px rgba(79,214,226,.30), 0 40px 120px -30px rgba(0,0,0,.9); }
#demo .hud.flat { transform: none; }
#demo::after { content: ""; position: absolute; left: 50%; top: 0; width: 70%; height: 220px; transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 70%, rgba(79,214,226,.22), transparent 70%); pointer-events: none; z-index: -1; }
@media (prefers-reduced-motion: reduce) { #demo .hud { transform: none; transition: none; } }

/* B - Voice: words on the left, the orb talking on the right */
.talk-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 56px; align-items: center; }
.talk-copy { display: flex; flex-direction: column; gap: 20px; }
.talk-copy h2 { font-size: clamp(40px, 4.6vw, 76px); text-align: left; }
.talk-copy .sec-note { text-align: left; margin: 0; max-width: 540px; }
.talk-copy .hero-facts { justify-content: flex-start; }
.orb-scene { position: relative; display: flex; justify-content: center; align-items: center; height: min(560px, 62vh); }
.orb-scene .stage-orb { width: min(320px, 34vh); }
.orb-scene::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(79,214,226,.16), transparent 52%); }
.orb-chat { position: absolute; inset: 0; pointer-events: none; }
.orb-chat p { position: absolute; margin: 0; padding: 11px 15px; max-width: 270px; font-size: 14.5px; line-height: 1.4;
  border: 1px solid var(--frame); background: rgba(8,18,32,.88); backdrop-filter: blur(6px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45); animation: bob 6s ease-in-out infinite; }
.orb-chat .you { color: var(--ice); border-radius: 14px 14px 14px 4px; }
.orb-chat .it { color: var(--cyan); border-color: rgba(79,214,226,.38); border-radius: 14px 14px 4px 14px; }
.orb-chat p:nth-child(1) { top: 9%; left: 0; }
.orb-chat p:nth-child(2) { top: 46%; right: -2%; animation-delay: -2s; }
.orb-chat p:nth-child(3) { bottom: 9%; left: 8%; animation-delay: -4s; }
@keyframes bob { 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .orb-chat p { animation: none; } }
@media (max-width: 980px) {
  .talk-split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .talk-copy { align-items: center; text-align: center; }
  .talk-copy h2, .talk-copy .sec-note { text-align: center; }
  .talk-copy .hero-facts { justify-content: center; }
  .orb-scene { height: 420px; }
  .orb-chat p { max-width: 200px; font-size: 13px; }
}


/* Glow, polished (owner, 2026-10: "the glow isn't polished and isn't
   transparent"). Three stacked radial layers, each stopping at a hard edge,
   plus a ring, read as an opaque disc behind the orb. Now one feathered
   glow that fades all the way out, blurred so no edge shows, and the
   dashboard is see-through glass with the light behind it instead of a
   wide cyan shadow around a solid panel. */
.stage-orb::after, .orb-scene::before { display: none; }
.stage-orb::before { inset: -75%;
  background: radial-gradient(closest-side, rgba(79,214,226,.18), rgba(79,214,226,.08) 38%, rgba(79,214,226,.025) 68%, rgba(79,214,226,0));
  filter: blur(14px); }
.stage::before { background: radial-gradient(ellipse 45% 38% at 50% 30%, rgba(79,214,226,.10), rgba(79,214,226,.03) 55%, rgba(79,214,226,0)); }
#demo .hud { background: rgba(6,12,22,.66); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 40px 100px -50px rgba(0,0,0,.9); }
#demo::after { width: 78%; height: 360px; top: -80px;
  background: radial-gradient(closest-side, rgba(79,214,226,.14), rgba(79,214,226,.05) 50%, rgba(79,214,226,0));
  filter: blur(30px); }

/* Site review fixes (2026-10). */
/* The orb's glow reaches past the screen edge; clipped there, or phones
   could scroll the page sideways (534px wide on a 375px screen). */
main { overflow-x: clip; }
/* The typing list: rows appear as their turn comes. */
.says li { transition: opacity .3s ease; }
.says li.wait { opacity: 0; }
/* Memory: centred like every other section once it stacks. */
@media (max-width: 980px) {
  .split-copy { text-align: center; }
  .split-copy { align-items: center; display: flex; flex-direction: column; }
}


/* Behind the dashboard, blended (owner, 2026-10: "isn't transparent or
   blending with the site"). The dashboard's section clipped everything at
   its top edge, so an old cyan/violet blob left over from an earlier hero
   and the glow were both cut off in a straight line right above it, and
   the background grid stopped dead on the same line. Now: no blob, nothing
   clipped, one soft glow centred on the dashboard's top edge that fades out
   in every direction, and the grid fading away instead of ending. */
#demo { overflow: visible; border-bottom: 0; }
#demo::before { content: none; }
#demo::after { top: -260px; left: 50%; width: min(1400px, 110%); height: 620px; transform: translateX(-50%); z-index: 0; filter: none;
  background: radial-gradient(closest-side, rgba(79,214,226,.13), rgba(79,214,226,.06) 40%, rgba(79,214,226,.02) 70%, rgba(79,214,226,0)); }
#demo .hero-inner { position: relative; z-index: 1; }
.stage.gridbg { background-image: none; }
.stage::after { content: ""; position: absolute; inset: 0; height: auto; pointer-events: none; background: none;
  background-image: linear-gradient(rgba(79,214,226,.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(79,214,226,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 100%); mask-image: linear-gradient(#000 35%, transparent 100%); }

/* Scroll arrows: discreet, animated, one section per press. */
.scroll-arrow { position: fixed; left: 50%; z-index: 40; width: 38px; height: 38px; margin-left: -19px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--cyan);
  background: rgba(5,10,18,.45); border: 1px solid rgba(79,214,226,.18);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: .55; transition: opacity .35s ease, transform .35s var(--ease), border-color .2s ease, background .2s ease; }
.scroll-arrow:hover, .scroll-arrow:focus-visible { opacity: 1; border-color: rgba(79,214,226,.5); background: rgba(79,214,226,.08); }
.scroll-arrow svg { animation: arrowNudge 2.4s ease-in-out infinite; }
.scroll-arrow.down { bottom: 22px; }
.scroll-arrow.up { top: 80px; }
.scroll-arrow.up svg { transform: rotate(180deg); animation-name: arrowNudgeUp; }
.scroll-arrow.off { opacity: 0; pointer-events: none; }
.scroll-arrow.down.off { transform: translateY(10px); }
.scroll-arrow.up.off { transform: translateY(-10px); }
.scroll-arrow[hidden] { display: none; }
@keyframes arrowNudge { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@keyframes arrowNudgeUp { 0%, 100% { transform: rotate(180deg) translateY(-2px); } 50% { transform: rotate(180deg) translateY(3px); } }
@media (prefers-reduced-motion: reduce) { .scroll-arrow svg { animation: none; } }
@media (max-width: 860px) { .scroll-arrow { width: 34px; height: 34px; margin-left: -17px; } .scroll-arrow.up { top: 74px; } }


/* Arrows without the circle, nearer the edges (owner, 2026-10). */
.scroll-arrow { width: 44px; height: 26px; margin-left: -22px; border: 0; border-radius: 0; background: none;
  backdrop-filter: none; -webkit-backdrop-filter: none; opacity: .6; }
.scroll-arrow:hover, .scroll-arrow:focus-visible { background: none; border: 0; opacity: 1; }
.scroll-arrow svg { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgba(79,214,226,.45)); }
.scroll-arrow.down { bottom: 4px; }
.scroll-arrow.up { top: 68px; }
@media (max-width: 860px) { .scroll-arrow { width: 40px; height: 24px; margin-left: -20px; } .scroll-arrow.up { top: 66px; } }

/* Shorter page (owner, 2026-10: "doesn't take forever to scroll"). */
.orb-scene { height: min(420px, 50vh); }
.orb-scene .stage-orb { width: min(240px, 28vh); }
.section { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); gap: 36px; }

/* Five everyday tiles in one row on desktop (browser tile added, 2026-10). */
@media (min-width: 1081px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }