/* netz.com · scroll-craft build. Theme tokens first, then the page's own classes.
   Nothing here restyles .sc-stage, .sc-copy or any [data-sc-*] selector. */

:root {
  --sc-canvas:      #fbfcff;
  --sc-surface:     #ffffff;
  --sc-ink:         #16203a;
  --sc-ink-soft:    #55607c;
  --sc-accent:      #0f6ce6;
  --sc-accent-ink:  #ffffff;
  --sc-font-display: "Manrope", system-ui, sans-serif;
  --sc-font-text:    "Inter", system-ui, sans-serif;
  --sc-font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  --sc-shadow-color: 222 55% 28%;
  --sc-e1: 0 1px 2px hsl(var(--sc-shadow-color) / 0.10), 0 2px 6px -1px hsl(var(--sc-shadow-color) / 0.08);
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.08), 0 10px 24px -6px hsl(var(--sc-shadow-color) / 0.16);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.08), 0 20px 44px -10px hsl(var(--sc-shadow-color) / 0.20), 0 48px 90px -24px hsl(var(--sc-shadow-color) / 0.16);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.85);
  --sc-r-sm: 8px; --sc-r-md: 14px; --sc-r-lg: 22px;
  --sc-maxw: 78rem;

  --blue-2: #2b7cf0;
  --blue-soft: #dbe9ff;
  --blue-tint: #f3f6fc;
  --ok: #0e8a5a;
  --warn: #b01818;
  --bar-h: 4.25rem;
}

html, body { overflow-x: clip; }
body { background: var(--sc-canvas); }
main { max-width: 100vw; overflow-x: clip; }

/* ------------------------------------------------------------ grounds -- */
.chapter { background: var(--sc-canvas); color: var(--sc-ink); position: relative; }
.chapter--tint { background: var(--sc-canvas); }
.chapter--dark {
  --sc-canvas: #0b1230; --sc-surface: #131b3d; --sc-ink: #f3f6fc; --sc-ink-soft: #aab6d3;
  --sc-accent: #6aa7ff; --sc-accent-ink: #0b1230;
  --sc-hairline: rgba(243,246,252,0.12); --sc-hairline-strong: rgba(243,246,252,0.22);
  --sc-shadow-color: 228 60% 3%;
  --sc-e2: 0 2px 4px hsl(var(--sc-shadow-color) / 0.30), 0 10px 24px -6px hsl(var(--sc-shadow-color) / 0.45);
  --sc-e3: 0 4px 8px hsl(var(--sc-shadow-color) / 0.30), 0 20px 44px -10px hsl(var(--sc-shadow-color) / 0.5);
  --sc-edge: inset 0 1px 0 rgba(255,255,255,0.10);
  background: radial-gradient(70rem 40rem at 50% 30%, #14204d 0%, rgba(20,32,77,0) 65%), var(--sc-canvas);
  color: var(--sc-ink);
}
.field {
  background:
    radial-gradient(60rem 34rem at 10% -10%, #cfe0ff 0%, rgba(207,224,255,0) 60%),
    radial-gradient(52rem 32rem at 100% 15%, #dbe9ff 0%, rgba(219,233,255,0) 60%),
    var(--sc-canvas);
}

/* --------------------------------------------------------------- type -- */
.head { text-align: center; max-width: 46rem; margin-inline: auto; display: grid; gap: var(--sc-4); justify-items: center; }
.head .sc-display { font-weight: 800; margin: 0; letter-spacing: -0.04em; }
.head .sc-lede { max-width: 58ch; text-align: center; color: var(--sc-ink-soft); font-weight: 400; }
.head--left { text-align: left; justify-items: start; margin-inline: 0; max-width: none; }
.head--left .sc-lede, .head--left .sc-body { text-align: left; }
.head--flow { padding-block: var(--sc-section); }
.eyebrow { margin: 0; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-accent); }
.caption { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 60ch; text-wrap: pretty; margin: 0 auto; text-align: center; }
.caption--left { text-align: left; margin: 0; max-width: 46ch; }
.caption b { color: var(--sc-ink); font-weight: 600; }
.note { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); max-width: 60ch; text-align: center; margin: 0; }
.mini { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); margin: 0; }
.mono { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); letter-spacing: 0.02em; color: var(--sc-ink-soft); }
.link { color: var(--sc-accent); font-weight: 500; text-decoration: none; }
.link:hover { text-decoration: underline; }
.who { font-family: var(--sc-font-mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); flex: none; }

/* ------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  background: linear-gradient(180deg, #1a78ee, #0a5cd2); color: var(--sc-accent-ink);
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-base);
  padding: 0.85em 1.5em; border-radius: var(--sc-r-pill); border: 0; text-decoration: none;
  box-shadow: 0 8px 22px -8px rgba(15,108,230,0.55), inset 0 1px 0 rgba(255,255,255,0.25); cursor: pointer; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -10px rgba(15,108,230,0.6), inset 0 1px 0 rgba(255,255,255,0.25); }
.btn:active { transform: scale(0.97); }
.btn--lg { font-size: var(--sc-t-base); padding: 0.85em 1.6em; }
.btn--sm { font-size: var(--sc-t-sm); padding: 0.6em 1.1em; }
.btn--bar { font-size: var(--sc-t-sm); padding: 0.65em 1.2em; }
.btn--ghost { background: transparent; color: var(--sc-ink-soft); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
.btn--ghost:hover { background: var(--blue-tint); color: var(--sc-ink); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); transform: none; }

/* ----------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; height: var(--bar-h); z-index: var(--sc-z-chrome);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  transition: background 240ms var(--sc-ease-out), box-shadow 240ms var(--sc-ease-out);
}
.bar.is-scrolled { background: color-mix(in oklab, var(--sc-canvas) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 1px 0 var(--sc-hairline); }
.bar__brand { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.25rem; color: var(--sc-ink); text-decoration: none; letter-spacing: -0.02em; justify-self: start; }
.bar__brand img { border-radius: 50%; }
.bar__nav { display: flex; gap: clamp(0.8rem, 2vw, 1.6rem); }
.bar__nav a { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); text-decoration: none; transition: color 140ms var(--sc-ease-out); }
.bar__nav a:hover { color: var(--sc-ink); }
.bar .btn--bar { justify-self: end; }
.bar.is-dark { --sc-ink: #f3f6fc; --sc-ink-soft: #aab6d3; --sc-canvas: #0b1230; --sc-hairline: rgba(243,246,252,0.12); }
.bar.is-dark .bar__brand { color: #f3f6fc; }
@media (max-width: 900px) { .bar { grid-template-columns: 1fr auto; } .bar__nav { display: none; } }

/* ---------------------------------------------------------------- hero -- */
.hero {
  position: relative; overflow: clip; isolation: isolate;
  padding-top: calc(var(--bar-h) + clamp(1.5rem, 4vh, 3rem)); padding-bottom: 0;
  background: linear-gradient(180deg, #2a62d8 0%, #4d86ef 24%, #8db3fb 52%, #cadcfb 80%, var(--sc-canvas) 100%);
}
.hero__sky { position: absolute; inset: -3%; width: 106%; height: 106%; z-index: -2; pointer-events: none; filter: blur(6px); }
.hero__haze {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(52% 40% at 50% 34%, rgba(255,255,255,0.50) 0%, rgba(255,255,255,0.26) 45%, rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,0) 66%, var(--sc-canvas) 100%);
}
.bar:not(.is-scrolled) .bar__nav a { color: #1b2a4d; }
.hero__copy { text-align: center; display: grid; justify-items: center; gap: var(--sc-4); max-width: 62rem; }
.hero__eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink); background: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.9); border-radius: var(--sc-r-pill); padding: 0.4em 0.95em; box-shadow: var(--sc-e1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 3px rgba(15,108,230,0.18); }
.hero__title { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2.5rem, 1.2rem + 4.6vw, 4.9rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; max-width: 18ch; }
.hero__brand { color: var(--sc-accent); }
.hero__lede { margin: 0; max-width: 68ch; font-size: var(--sc-t-base); line-height: 1.5; color: #3a4666; text-wrap: pretty; }
.hero__cta { margin: var(--sc-1) 0 0; }

.hero__stage { perspective: 1800px; padding: clamp(1.5rem, 4vh, 3rem) var(--sc-gutter) 0; display: grid; justify-items: center; }
.laptop { width: min(100%, 72rem); transform-origin: 50% 70%; will-change: transform; transform: perspective(1800px) rotateX(14deg) scale(0.94); }
.laptop__lid {
  position: relative; background: #0d1220; border-radius: 22px 22px 8px 8px; padding: 14px 14px 18px;
  box-shadow: 0 40px 90px -30px rgba(11,18,48,0.55), 0 12px 30px -12px rgba(11,18,48,0.35), inset 0 1px 0 rgba(255,255,255,0.14), inset 0 0 0 1px rgba(255,255,255,0.05);
}
.laptop__cam { position: absolute; top: 5px; left: 50%; width: 6px; height: 6px; translate: -50% 0; border-radius: 50%; background: #1b2540; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.laptop__base { height: 16px; margin: 0 -2.2%; background: linear-gradient(180deg, #d8dce6, #b9bfcc); border-radius: 0 0 14px 14px; box-shadow: 0 18px 30px -16px rgba(11,18,48,0.35), inset 0 1px 0 rgba(255,255,255,0.9); position: relative; }
.laptop__base i { position: absolute; left: 50%; top: 0; width: 14%; height: 5px; translate: -50% 0; background: #aab0be; border-radius: 0 0 6px 6px; }
.screen { background: var(--sc-surface); border-radius: 10px; overflow: clip; aspect-ratio: 16 / 9.6; display: grid; grid-template-columns: 13.5rem 1fr; font-size: 0.86rem; }

/* the app inside */
.app__side { background: #f6f8fc; border-right: 1px solid var(--sc-hairline); padding: 0.9rem 0.85rem; display: grid; align-content: start; gap: 0.15rem; overflow: hidden; }
.app__logo { display: flex; align-items: center; gap: 0.45rem; font-family: var(--sc-font-display); font-weight: 800; font-size: 0.95rem; margin-bottom: 0.7rem; }
.app__logo img { border-radius: 50%; }
.app__group { margin: 0.6rem 0 0.2rem; font-family: var(--sc-font-mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sc-ink-soft); }
.app__menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.app__menu li { padding: 0.32rem 0.55rem; border-radius: var(--sc-r-sm); font-size: 0.78rem; color: var(--sc-ink-soft); display: flex; align-items: center; gap: 0.5rem; }
.app__menu li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; opacity: 0.35; }
.app__menu li.is-on { background: var(--sc-surface); color: var(--sc-accent); font-weight: 600; box-shadow: var(--sc-e1); }
.app__main { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.app__top { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--sc-hairline); font-size: 0.78rem; color: var(--sc-ink-soft); }
.app__mode { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--ok); font-weight: 600; }
.app__mode i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(14,138,90,0.18); }
.chat { padding: 1rem 1.1rem; display: grid; align-content: start; gap: 0.85rem; overflow: hidden; }
.msg { display: grid; gap: 0.4rem; opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.msg.is-in { opacity: 1; transform: none; }
.msg__who { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--sc-font-mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); }
.msg__who img { border-radius: 50%; }
.msg--you p { margin: 0; font-weight: 500; font-size: 0.9rem; min-height: 1.4em; }
.msg--netz { gap: 0.55rem; }
.work, .site, .chips { opacity: 0; transform: translateY(8px); transition: opacity 420ms var(--sc-ease-out), transform 420ms var(--sc-ease-out); }
.work.is-in, .site.is-in, .chips.is-in { opacity: 1; transform: none; }
.work { background: var(--blue-tint); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 0.65rem 0.8rem; }
.work__head { margin: 0 0 0.45rem; display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.steps li { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.78rem; color: var(--sc-ink-soft); opacity: 0.35; transition: opacity 360ms var(--sc-ease-out), color 360ms var(--sc-ease-out); }
.steps li i { font-style: normal; color: var(--ok); font-weight: 700; opacity: 0; transition: opacity 300ms var(--sc-ease-out); }
.steps li.is-done { opacity: 1; color: var(--sc-ink); }
.steps li.is-done i { opacity: 1; }
.site { border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); overflow: clip; max-width: 30rem; }
.site__url { display: flex; justify-content: space-between; padding: 0.4rem 0.7rem; font-family: var(--sc-font-mono); font-size: 0.66rem; color: var(--sc-ink-soft); background: var(--blue-tint); border-bottom: 1px solid var(--sc-hairline); }
.live { color: #0d7a4f; font-weight: 600; }
.site__body { padding: 0.7rem; display: grid; gap: 0.4rem; }
.l { display: block; height: 7px; border-radius: 4px; background: #e2e7f2; width: 70%; }
.l--h { height: 10px; background: var(--sc-ink); width: 55%; }
.l--s { width: 50%; }
.l--box { height: 26px; background: var(--blue-soft); width: 100%; border-radius: 6px; }
.l--btn { height: 12px; width: 32%; background: var(--sc-accent); }
.reply { margin: 0; font-size: 0.86rem; line-height: 1.5; min-height: 1.4em; }
.reply.is-typing::after { content: "▍"; color: var(--sc-accent); animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.chips button { font: inherit; font-size: 0.74rem; font-weight: 500; color: var(--sc-accent); background: var(--blue-tint); border: 1px solid rgba(15,108,230,0.25); border-radius: var(--sc-r-pill); padding: 0.35em 0.8em; cursor: pointer; }
.ask { margin: 0 1.1rem 1rem; display: flex; align-items: center; gap: 0.6rem; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 0.55rem 0.55rem 0.55rem 0.9rem; font-size: 0.8rem; color: var(--sc-ink-soft); box-shadow: var(--sc-e1); }
.ask > span:first-child { flex: 1; }
.ask__auto { font-family: var(--sc-font-mono); font-size: 0.62rem; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill); padding: 0.2em 0.55em; }
.ask__send { width: 26px; height: 26px; border-radius: 50%; background: var(--sc-accent); color: #fff; display: grid; place-items: center; font-weight: 700; }
@media (max-width: 860px) {
  .hero { padding-top: calc(var(--bar-h) + 2rem); }
  .hero__title { max-width: none; }
  .hero__lede { font-size: var(--sc-t-base); }
  .hero__stage { padding-top: 2rem; }
  .laptop { width: 100%; }
  .laptop__lid { padding: 8px 8px 10px; border-radius: 14px 14px 6px 6px; }
  .laptop__base { height: 10px; }
  .screen { grid-template-columns: 1fr; aspect-ratio: auto; font-size: 0.8rem; }
  .app__side { display: none; }
  .chat { padding: 0.8rem; gap: 0.6rem; }
  .steps li { font-size: 0.72rem; }
  .site { display: none; }
  .ask { margin: 0 0.8rem 0.8rem; }
}

/* ---------------------------------------------------------------- stage -- */
.chapter { padding-block: var(--sc-section); }
.stage__inner { display: grid; gap: var(--sc-7); justify-items: center; width: 100%; }
.stage__inner .surface { width: min(100%, 62rem); }
.stage__inner .head .sc-display { max-width: 22ch; }
.stage__inner .head .sc-lede { max-width: 64ch; }
@media (max-width: 860px) {
  .stage__inner { gap: var(--sc-5); }
  .head .sc-display { font-size: var(--sc-t-2xl); }
  .head .sc-lede { font-size: var(--sc-t-sm); }
}
/* the sequenced pieces: hidden until their moment, then a short soft entrance */
.seq { opacity: 0; transform: translateY(10px); transition: opacity 520ms var(--sc-ease-out), transform 520ms var(--sc-ease-out); }
.seq.is-on { opacity: 1; transform: none; }

/* --------------------------------------------------------- why now pin -- */
.whynow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); width: min(100%, 62rem); align-items: center; }
.faults { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.faults li { padding-left: 1.7rem; position: relative; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.5; }
.faults li::before { content: "✕"; position: absolute; left: 0; top: 0.05em; color: var(--warn); font-weight: 600; }
.faults b { color: var(--sc-ink); font-weight: 600; display: block; font-size: var(--sc-t-base); }
.pile { list-style: none; margin: 0; padding: 0; position: relative; height: min(44vh, 26rem); min-height: 20rem; }
.pile__tile {
  position: absolute; left: 50%; width: min(22rem, 84%);
  display: flex; align-items: center; gap: 0.7rem;
  background: var(--sc-surface); border-radius: var(--sc-r-md); padding: 0.8rem 1rem;
  box-shadow: var(--sc-e2), var(--sc-edge); border: 1px solid var(--sc-hairline);
  opacity: 0; transform: translate(-50%, -3rem) rotate(var(--rot, 0deg));
  transition: opacity 600ms var(--sc-ease-out), transform 700ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pile__tile.is-on { opacity: 1; transform: translate(-50%, 0) rotate(var(--rot, 0deg)); }
.pile__tile:nth-child(1) { top: 0%;  --rot: -3deg; margin-left: -7%; }
.pile__tile:nth-child(2) { top: 15%; --rot: 2deg;  margin-left: 6%; }
.pile__tile:nth-child(3) { top: 30%; --rot: -1.5deg; margin-left: -3%; }
.pile__tile:nth-child(4) { top: 45%; --rot: 2.5deg; margin-left: 8%; }
.pile__tile:nth-child(5) { top: 60%; --rot: -2deg; margin-left: -6%; }
.pile__tile:nth-child(6) { top: 75%; --rot: 1deg;  margin-left: 4%; }
.pile__tile span { font-family: var(--sc-font-display); font-weight: 700; }
.pile__tile small { color: var(--sc-ink-soft); font-size: var(--sc-t-xs); margin-left: auto; }
.pile__tile em { font-style: normal; color: var(--warn); font-weight: 600; }
@media (max-width: 860px) { .whynow { grid-template-columns: 1fr; gap: 1rem; } .faults { gap: 0.5rem; } .faults li { font-size: 0.8rem; } .faults b { font-size: 0.88rem; } .pile { height: 13rem; } .pile__tile { padding: 0.5rem 0.8rem; font-size: 0.85rem; } }

/* ------------------------------------------------------------ platform -- */
.line { list-style: none; margin: var(--sc-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; max-width: 52rem; }
.line li { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); padding: 0.45em 0.9em; border-radius: var(--sc-r-pill); background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge); border: 1px solid var(--sc-hairline); }
.line li::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sc-accent); margin-right: 0.5em; vertical-align: 0.05em; }

/* ------------------------------------------------------------ surfaces -- */
.surface { background: var(--sc-surface); border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3), var(--sc-edge); border: 1px solid var(--sc-hairline); padding: 1rem 1.15rem 1.15rem; position: relative; overflow: clip; }
.surface__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-bottom: 0.75rem; margin-bottom: 0.9rem; border-bottom: 1px solid var(--sc-hairline); font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); }
.surface__bar > span:first-child { display: inline-flex; align-items: center; gap: 0.45rem; }
.pill { font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); font-weight: 500; color: var(--ok); background: rgba(14,138,90,0.10); padding: 0.3em 0.7em; border-radius: var(--sc-r-pill); white-space: nowrap; }
.surface h3 { font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.glyph { color: var(--sc-accent); }
@media (max-width: 860px) { .surface { padding: 0.75rem 0.85rem 0.85rem; border-radius: var(--sc-r-md); } }

/* ------------------------------------------------------------- builder -- */
.spark { color: var(--sc-accent); }
.preview { background: var(--blue-tint); border-radius: var(--sc-r-md); border: 1px solid var(--sc-hairline); overflow: clip; }
.preview__url { display: flex; justify-content: space-between; padding: 0.45rem 0.8rem; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-ink-soft); border-bottom: 1px solid var(--sc-hairline); background: var(--sc-surface); }
.preview__page { padding: 1rem 1rem 1.1rem; display: grid; gap: 0.7rem; min-height: 16rem; max-width: 30rem; }

.pv--logo b { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: 0.12em; font-size: 0.75rem; }
.pv--step { display: grid; gap: 0.15rem; }
.pv--step small { font-size: 0.7rem; color: var(--sc-ink-soft); }
.pv--step strong { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.05rem; }
.pv--button span { display: inline-block; background: var(--sc-accent); color: #fff; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.8rem; padding: 0.5em 1em; border-radius: var(--sc-r-pill); }
.pv--reviews { display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.75rem; color: var(--sc-ink-soft); }
.pv--reviews span { color: #d98a09; letter-spacing: 0.05em; }
.blocks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; align-content: start; }
.blocks li { font-size: 0.78rem; display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.6rem; border-radius: var(--sc-r-sm); border: 1px solid var(--sc-hairline); background: var(--sc-surface); }
.grip { color: var(--sc-ink-soft); font-size: 0.7rem; letter-spacing: -0.15em; }
.blocks__add { color: var(--sc-accent); font-weight: 500; border-style: dashed !important; }

/* -------------------------------------------------------------- funnels -- */
.flowrow { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem 0; align-items: center; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); }
.flowrow li + li::before { content: "→"; color: var(--sc-ink-soft); margin: 0 0.6rem; font-weight: 400; }
.flowrow__ab em { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--sc-accent); margin-left: 0.4rem; background: var(--blue-soft); padding: 0.15em 0.5em; border-radius: var(--sc-r-pill); }
.variants { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.variant { border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 0.85rem; background: var(--sc-surface); }
.variant header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.7rem; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); }
.variant header small { font-size: 0.7rem; color: var(--sc-ink-soft); font-family: var(--sc-font-mono); }
.variant--winner { box-shadow: 0 0 0 2px var(--sc-accent), var(--sc-e2); }
.variant--winner.seq { clip-path: inset(0 100% 0 0); transform: none; opacity: 1; transition: clip-path 800ms var(--sc-ease-out); }
.variant--winner.seq.is-on { clip-path: inset(0 0 0 0); }
.variant--winner header small { color: var(--ok); }
.variant__shot { background: var(--blue-tint); border-radius: var(--sc-r-sm); padding: 0.9rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.7rem; }
.variant__shot b { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.2rem; }
.variant__shot span { background: var(--sc-ink); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.35em 0.8em; border-radius: var(--sc-r-pill); }
.variant dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; font-size: 0.78rem; }
.variant dt { color: var(--sc-ink-soft); }
.variant dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; }
@media (max-width: 480px) { .variants { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- payments -- */
.pay__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pay__panel { background: var(--blue-tint); border-radius: var(--sc-r-md); padding: 0.85rem; border: 1px solid var(--sc-hairline); }
.retries, .cascade { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.45rem; }
.retries li, .cascade li { display: grid; align-items: center; gap: 0.5rem; background: var(--sc-surface); border-radius: var(--sc-r-sm); padding: 0.5rem 0.65rem; font-size: 0.78rem; border: 1px solid var(--sc-hairline); }
.retries li.seq, .cascade li.seq { opacity: 0.3; transform: none; }
.retries li.seq.is-on, .cascade li.seq.is-on { opacity: 1; }
.retries li em, .cascade li em { opacity: 0; transition: opacity 300ms var(--sc-ease-out) 250ms; }
.retries li.is-on em, .cascade li.is-on em { opacity: 1; }
.retries li { grid-template-columns: auto 1fr auto auto; }
.cascade li { grid-template-columns: auto 1fr auto; }
.retries b, .cascade b { font-family: var(--sc-font-display); font-weight: 700; }
.retries small, .retries span, .cascade span { color: var(--sc-ink-soft); }
.retries em, .cascade em { font-style: normal; font-family: var(--sc-font-mono); font-size: 0.7rem; color: var(--warn); }
.retries li.ok em, .cascade li.ok em { color: var(--ok); font-weight: 600; }
.retries li.ok, .cascade li.ok { border-color: rgba(14,138,90,0.4); }
@media (max-width: 860px) { .pay__grid { grid-template-columns: 1fr; gap: 0.6rem; } .pay__panel { padding: 0.65rem; } .retries, .cascade { gap: 0.3rem; } .pay__panel .mini { display: none; } }

/* ------------------------------------------------------------ retention -- */
.keep__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.portal, .save { background: var(--blue-tint); border-radius: var(--sc-r-md); padding: 0.9rem; border: 1px solid var(--sc-hairline); }
.portal__plan { display: flex; justify-content: space-between; margin: 0 0 0.4rem; font-size: 0.78rem; color: var(--sc-ink-soft); }
.portal__plan em { font-style: normal; color: var(--ok); font-weight: 600; }
.portal__sku { margin: 0 0 0.7rem; display: grid; }
.portal__sku b { font-family: var(--sc-font-display); font-weight: 700; }
.portal__sku span { font-size: 0.78rem; color: var(--sc-ink-soft); }
.portal__facts { margin: 0 0 0.8rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; font-size: 0.72rem; }
.portal__facts dt { color: var(--sc-ink-soft); grid-row: 1; }
.portal__facts dd { margin: 0; font-weight: 600; grid-row: 2; }
.portal__actions { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.portal__actions button { background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill); font-size: 0.74rem; font-weight: 500; padding: 0.35em 0.8em; cursor: pointer; transition: background 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out); }
.portal__actions button:hover { background: var(--blue-soft); }
.portal__actions button:active { transform: scale(0.97); }
.portal__actions button[aria-pressed="true"] { background: var(--sc-ink); color: #fff; border-color: var(--sc-ink); }
.save__title { margin: 0; font-size: 0.72rem; color: var(--sc-ink-soft); }
.save__offer { margin: 0.15rem 0 0.6rem; font-family: var(--sc-font-display); font-weight: 800; font-size: 1.05rem; line-height: 1.2; }
.save__price { margin: 0 0 0.8rem; display: grid; font-size: 0.78rem; color: var(--sc-ink-soft); }
.save__price b { color: var(--sc-ink); font-size: 0.95rem; }
.save__actions { display: grid; gap: 0.4rem; margin-bottom: 0.8rem; }
.save__stat { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; }
.save__stat b { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.5rem; color: var(--ok); }
.save__stat span { font-size: 0.75rem; color: var(--sc-ink-soft); }
.save.is-kept .save__offer::after { content: " Kept."; color: var(--ok); }
.save.seq { clip-path: inset(100% 0 0 0); opacity: 1; transform: none; transition: clip-path 800ms var(--sc-ease-out); }
.save.seq.is-on { clip-path: inset(0); }
@media (max-width: 600px) { .keep__grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- spread -- */
.spread { padding-block: var(--sc-section); }
.spread__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.spread__col > * + * { margin-top: var(--sc-5); }
@media (max-width: 960px) { .spread__grid { grid-template-columns: 1fr; gap: var(--sc-9); } }
.email { background: var(--blue-tint); border-radius: var(--sc-r-md); padding: 0.9rem; border: 1px solid var(--sc-hairline); font-size: 0.8rem; margin-bottom: 0.8rem; }
.email header { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: baseline; margin-bottom: 0.6rem; font-size: 0.74rem; color: var(--sc-ink-soft); }
.email header b { font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-ink); }
.email p { margin: 0 0 0.5rem; }
.sms { margin-bottom: 0.9rem; }
.sms__label { margin: 0 0 0.35rem; font-size: 0.72rem; color: var(--sc-ink-soft); }
.sms__bubble { margin: 0 0 0.3rem; display: inline-block; background: var(--sc-accent); color: #fff; padding: 0.6rem 0.85rem; border-radius: 16px 16px 16px 4px; font-size: 0.8rem; max-width: 34ch; }
.revenue { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 1rem; border-top: 1px solid var(--sc-hairline); padding-top: 0.75rem; }
.revenue dt { grid-column: 1 / -1; font-size: 0.72rem; color: var(--sc-ink-soft); }
.revenue dd { margin: 0; display: grid; }
.revenue dd span { font-size: 0.72rem; color: var(--sc-ink-soft); }
.revenue dd b { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.revenue dd.mini { grid-column: 1 / -1; }
.track__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.8rem; align-items: center; }
.events { border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 0.75rem 0.85rem; margin: 0; background: var(--blue-tint); display: grid; gap: 0.35rem; }
.events legend { font-family: var(--sc-font-display); font-weight: 700; font-size: 0.78rem; padding: 0 0.3rem; }
.events label { font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.events input { width: 15px; height: 15px; margin: 0; }
.track__arrow { color: var(--sc-ink-soft); font-size: 1.2rem; }
.platforms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.platforms li { display: flex; justify-content: space-between; background: var(--blue-tint); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); padding: 0.45rem 0.65rem; font-size: 0.78rem; }
.platforms b { font-family: var(--sc-font-display); font-weight: 700; }
.platforms span { color: var(--ok); font-family: var(--sc-font-mono); font-size: 0.68rem; }
.track__sum { margin-top: 0.8rem; }
@media (max-width: 480px) { .track__grid { grid-template-columns: 1fr; } .track__arrow { transform: rotate(90deg); justify-self: center; } }

/* ------------------------------------------------------------- heatmaps -- */
.heat__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; }
.heat__panel { background: var(--blue-tint); border-radius: var(--sc-r-md); padding: 0.85rem; border: 1px solid var(--sc-hairline); }
.page-wire { display: grid; gap: 0.35rem; margin-bottom: 0.7rem; }
.wire { position: relative; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); overflow: clip; }
.wire--hero { height: 3.4rem; } .wire--offer { height: 4.4rem; } .wire--reviews { height: 2.6rem; } .wire--footer { height: 1.4rem; }
.blob { position: absolute; border-radius: 50%; width: 5rem; height: 5rem; translate: -50% -50%; background: radial-gradient(circle, rgba(255,90,61,0.85) 0%, rgba(255,160,40,0.55) 35%, rgba(43,124,240,0.25) 65%, rgba(43,124,240,0) 75%); filter: blur(2px); }
.blob.seq { opacity: 0; transform: scale(0.4); transition: opacity 700ms var(--sc-ease-out), transform 900ms var(--sc-ease-out); }
.blob.seq.is-on { opacity: 1; transform: scale(1); }
.blob--h { left: 38%; top: 55%; width: 9rem; height: 3rem; }
.blob--cta { left: 24%; top: 62%; width: 6rem; height: 6rem; }
.blob--atc { left: 70%; top: 40%; width: 4rem; height: 4rem; }
.blob--rage { left: 82%; top: 50%; width: 2.2rem; height: 2.2rem; background: radial-gradient(circle, rgba(176,24,24,0.9) 0%, rgba(176,24,24,0) 70%); }
.clicks { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.8rem; font-size: 0.78rem; }
.clicks dt { color: var(--sc-ink-soft); }
.clicks dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.clicks dd.warn { color: var(--warn); }
.depth { list-style: none; margin: 0 0 0.7rem; padding: 0; display: grid; gap: 0.5rem; }
.depth li { display: grid; grid-template-columns: 4.2rem 1fr 3rem; gap: 0.5rem; align-items: center; font-size: 0.78rem; }
.depth li.seq { opacity: 1; transform: none; }
.depth span { color: var(--sc-ink-soft); }
.depth i { display: block; height: 0.55rem; border-radius: var(--sc-r-pill); background: linear-gradient(90deg, var(--sc-accent), #7fb0ff); transform-origin: left center; transform: scaleX(0); transition: transform 1100ms var(--sc-ease-out); }
.depth li.is-on i { transform: scaleX(var(--w)); }
.depth b { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; opacity: 0; transition: opacity 500ms var(--sc-ease-out) 600ms; }
.depth li.is-on b { opacity: 1; }
@media (max-width: 860px) { .heat__grid { grid-template-columns: 1fr; gap: 0.6rem; } .wire--hero { height: 2.4rem; } .wire--offer { height: 3rem; } .wire--reviews { height: 1.8rem; } .wire--footer { height: 1rem; } .heat__panel .mini { display: none; } }

/* -------------------------------------------------------------- silence -- */
.silence { height: 24vh; background: var(--sc-canvas); }

/* ---------------------------------------------------------------- brain -- */
.brain-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; width: min(100%, 66rem); }
.brain { position: relative; aspect-ratio: 1; width: min(100%, 30rem); margin-inline: auto; display: grid; place-items: center; container-type: inline-size; }
.brain__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ring { fill: none; stroke: rgba(154,190,255,0.22); stroke-width: 1; transition: stroke 500ms var(--sc-ease-out); }
.ring--1 { stroke: rgba(154,190,255,0.38); }
.brain.is-awake .ring { stroke: rgba(154,190,255,0.36); }
.brain.is-awake .ring--1 { stroke: rgba(154,190,255,0.62); }
.core-glow { opacity: calc(0.25 + var(--charge, 0) * 0.75); transform-origin: 280px 280px; transform: scale(calc(0.7 + var(--charge, 0) * 0.6)); transition: opacity 500ms var(--sc-ease-out), transform 500ms var(--sc-ease-out); }
.thread { fill: none; stroke: var(--sc-accent); stroke-width: 1.2; stroke-linecap: round; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.thread.is-on { opacity: 0.85; }
.node { position: relative; display: grid; place-items: center; border-radius: 50%; }
.node img { position: relative; z-index: 1; border-radius: 50%; }
.node__halo { position: absolute; inset: -18px; border-radius: 50%; background: radial-gradient(circle, rgba(106,167,255,0.5) 0%, rgba(106,167,255,0.18) 45%, rgba(106,167,255,0) 70%); opacity: calc(0.35 + var(--charge, 0) * 0.65); transform: scale(calc(0.9 + var(--charge, 0) * 0.5)); transition: opacity 600ms var(--sc-ease-out), transform 600ms var(--sc-ease-out); }
.node--stage { width: 88px; height: 88px; }
.node--stage img { width: 72px; height: 72px; filter: drop-shadow(0 6px 18px rgba(43,124,240,0.45)); }
.docks { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.docks li {
  position: absolute; left: 50%; top: 50%; --a: 0deg; --r: 33.5cqw;
  transform: translate(-50%, -50%) rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.72rem; white-space: nowrap;
  color: var(--sc-ink-soft); background: rgba(19,27,61,0.88); border: 1px solid rgba(154,190,255,0.22);
  padding: 0.3em 0.7em; border-radius: var(--sc-r-pill); opacity: 0.25;
  transition: opacity 380ms var(--sc-ease-out), color 380ms var(--sc-ease-out), border-color 380ms var(--sc-ease-out), box-shadow 380ms var(--sc-ease-out);
}
.docks li.is-docked { opacity: 1; color: #f3f6fc; border-color: var(--sc-accent); box-shadow: 0 0 0 4px rgba(106,167,255,0.14), 0 0 18px rgba(106,167,255,0.25); }
.thread.is-on { stroke-dasharray: 260; stroke-dashoffset: 0; animation: draw 700ms var(--sc-ease-out); }
@keyframes draw { from { stroke-dashoffset: 260; } }
.docks li:nth-child(1) { --a: -90deg; } .docks li:nth-child(2) { --a: -54deg; } .docks li:nth-child(3) { --a: -18deg; } .docks li:nth-child(4) { --a: 18deg; } .docks li:nth-child(5) { --a: 54deg; }
.docks li:nth-child(6) { --a: 90deg; } .docks li:nth-child(7) { --a: 126deg; } .docks li:nth-child(8) { --a: 162deg; } .docks li:nth-child(9) { --a: 198deg; } .docks li:nth-child(10) { --a: 234deg; }
.brain__label { position: absolute; left: 50%; bottom: -0.6rem; translate: -50% 0; margin: 0; white-space: nowrap; }
#brain-mode { color: var(--sc-accent); }
.assist { font-size: 0.82rem; width: 100%; }
.assist__mark { border-radius: 50%; }
.assist__q { margin: 0 0 0.7rem; display: flex; gap: 0.6rem; align-items: baseline; font-weight: 500; min-height: 1.3em; }
.assist__a { margin: 0 0 0.9rem; color: var(--sc-ink-soft); line-height: 1.55; min-height: 6.5em; }
.assist__a.is-typing::after { content: "▍"; color: var(--sc-accent); animation: caret 1s steps(2) infinite; }
.assist__act { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.assist__act.is-done .btn { background: var(--ok); }
.assist__act.is-done #approve-note { color: #7fe0b5; }
.chapter--dark .btn { background: linear-gradient(180deg, #2b7cf0, #0f6ce6); color: #fff; }
@media (max-width: 860px) {
  .brain-row { grid-template-columns: 1fr; gap: 0.6rem; width: 100%; }
  .brain { width: min(86vw, 22rem); }
  .brain__label { display: none; }
  .docks li { font-size: 0.6rem; padding: 0.25em 0.55em; --r: 39cqw; }
  .node--stage { width: 56px; height: 56px; } .node--stage img { width: 46px; height: 46px; }
  .assist { font-size: 0.76rem; }
  .assist__a { min-height: 5em; }
}

/* ---------------------------------------------------------------- close -- */
.close.field { background: var(--sc-canvas); }
.close { min-height: 90svh; display: grid; align-items: center; padding-block: 7rem 3rem; }
.close__inner { display: grid; gap: var(--sc-5); justify-items: center; text-align: center; }
.close__built { margin: 0; font-family: var(--sc-font-display); font-weight: 800; font-size: clamp(2rem, 1.2rem + 3.4vw, 4rem); letter-spacing: -0.04em; line-height: 1.04; max-width: 22ch; text-wrap: balance; }
.close__tag { margin: 0; max-width: 56ch; color: var(--sc-ink-soft); font-size: var(--sc-t-base); text-wrap: pretty; }
.close__ask { margin: var(--sc-2) 0 var(--sc-9); }
.foot { width: 100%; border-top: 1px solid var(--sc-hairline); padding-top: var(--sc-6); display: grid; grid-template-columns: auto 1fr; gap: var(--sc-5) var(--sc-9); text-align: left; align-items: start; }
.foot__mark { display: flex; align-items: center; gap: 0.5rem; font-family: var(--sc-font-display); font-weight: 800; }
.foot__mark img { border-radius: 50%; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); max-width: 40rem; justify-self: end; }
.foot__cols div { display: grid; gap: 0.35rem; align-content: start; }
.foot__cols h3 { margin: 0 0 0.25rem; font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-sm); }
.foot__cols a { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); text-decoration: none; }
.foot__cols a:hover { color: var(--sc-accent); }
.foot__copy { margin: 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); grid-column: 1 / -1; }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr; } .foot__cols { grid-template-columns: 1fr 1fr; justify-self: start; } }

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .seq, .pile__tile, .blocks li.seq, .blob.seq, .retries li.seq, .cascade li.seq, .depth b { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .depth i { transform: scaleX(var(--w)) !important; }
  .retries li em, .cascade li em { opacity: 1; }
  .docks li { opacity: 1; }
  .hero__sky { filter: blur(7px); }
  .laptop { transform: none !important; }
  .msg, .work, .site, .chips { opacity: 1; transform: none; }
  .steps li { opacity: 1; color: var(--sc-ink); } .steps li i { opacity: 1; }
  .assist__a.is-typing::after, .reply.is-typing::after { animation: none; }
}


/* ================================================================ ORBIT ==
   Ten functions scattered like the patchwork, pulled one by one into orbit
   around the Netz core. Threads draw in, a ripple when the last one docks,
   then the ring turns slowly. Hover lights a thread, click jumps to the chapter. */
.orbit { position: relative; width: min(100%, 64rem); height: clamp(22rem, 38vw, 36rem); --px: 0; --py: 0; --spin: 0deg; }
.orbit__spin { position: absolute; inset: 0; transform: translate(calc(var(--px) * 10px), calc(var(--py) * 10px)); transition: transform 500ms var(--sc-ease-out); }
.orbit__disc { position: absolute; left: 50%; top: 50%; height: 100%; width: 34rem; transform: translate(-50%, -50%); }
.orbit__ring, .orbit__lines { position: absolute; inset: 0; transform: rotate(var(--spin)); transform-origin: 50% 50%; }
.orbit__line {
  position: absolute; left: 50%; top: 50%; height: 2px; width: 42%;
  background: linear-gradient(90deg, rgba(15,108,230,0.9), rgba(15,108,230,0.15));
  transform-origin: 0 50%; transform: rotate(var(--a)) scaleX(0);
  transition: transform 700ms var(--sc-ease-out), opacity 300ms var(--sc-ease-out); opacity: 0.55;
}
.orbit__line.is-on { transform: rotate(var(--a)) scaleX(1); }
.orbit__line.is-hot { opacity: 1; height: 3px; background: linear-gradient(90deg, #0f6ce6, #7fb0ff); }
.fn {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%); --r: 0deg;
  transform: translate(-50%, -50%) rotate(calc(var(--r) - var(--spin)));
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sc-font-display); font-weight: 700; font-size: 0.86rem; white-space: nowrap; text-decoration: none; color: var(--sc-ink);
  background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill); padding: 0.5em 1em;
  box-shadow: var(--sc-e2), var(--sc-edge);
  transition: left 1100ms cubic-bezier(0.22, 1.2, 0.36, 1), top 1100ms cubic-bezier(0.22, 1.2, 0.36, 1), box-shadow 220ms var(--sc-ease-out), border-color 220ms var(--sc-ease-out), opacity 300ms var(--sc-ease-out);
  opacity: 0.55;
}
.fn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #c7cede; transition: background 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out); }
.fn.is-docked { opacity: 1; }
.fn.is-docked::before { background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(15,108,230,0.16); }
.fn:hover, .fn:focus-visible { border-color: var(--sc-accent); box-shadow: 0 0 0 4px rgba(15,108,230,0.14), var(--sc-e3); z-index: 2; }
.orbit__core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; z-index: 3; opacity: 0; transform: scale(0.6); transition: opacity 600ms var(--sc-ease-out), transform 700ms cubic-bezier(0.22, 1.2, 0.36, 1); pointer-events: none; }
.orbit__core img { width: 64px; height: 64px; filter: drop-shadow(0 8px 18px rgba(43,124,240,0.4)); }
.orbit__core .node__halo { inset: -22px; }
.orbit.is-awake .orbit__core { opacity: 1; transform: scale(1); }
.orbit__ripple { position: absolute; left: 50%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(15,108,230,0.6); opacity: 0; pointer-events: none; }
.orbit.is-live .orbit__ripple { animation: ripple 1600ms var(--sc-ease-out) 1; }
@keyframes ripple { 0% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(7); } }
.orbit__tip {
  position: absolute; left: 50%; bottom: 0.4rem; transform: translateX(-50%); margin: 0; max-width: 34rem; text-align: center;
  font-size: var(--sc-t-sm); color: var(--sc-ink); background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill);
  padding: 0.45em 1em; box-shadow: var(--sc-e2); opacity: 0; transform: translateX(-50%) translateY(6px); transition: opacity 200ms var(--sc-ease-out), transform 200ms var(--sc-ease-out); pointer-events: none;
}
.orbit__tip.is-on { opacity: 1; transform: translateX(-50%); }
.orbit__hint { position: absolute; left: 50%; bottom: 0.9rem; transform: translateX(-50%); margin: 0; transition: opacity 300ms var(--sc-ease-out); }
.orbit.is-live .orbit__hint { opacity: 0; }
@media (max-width: 860px) {
  .orbit { height: min(88vw, 26rem); width: 100%; }
  .orbit__disc { width: 100%; }
  .orbit__line { width: 34%; }
  .fn { font-size: 0.6rem; padding: 0.38em 0.6em; gap: 0.3rem; }
  .fn::before { width: 5px; height: 5px; }
  .orbit__core { width: 64px; height: 64px; } .orbit__core img { width: 44px; height: 44px; }
  .orbit__tip { font-size: 0.72rem; max-width: 90%; }
}

/* ============================================================== BUILDER ==
   A builder you can drive: prompts, your own text, a visible Netz cursor
   dragging blocks onto the page, add/remove by hand, publish, flip A/B. */
.builder__grid { position: relative; display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr) 10.5rem; gap: 1.1rem; align-items: start; }
.builder__chat { display: grid; gap: 0.6rem; align-content: start; }
.prompts { display: grid; gap: 0.35rem; }
.prompts button {
  font: inherit; font-size: 0.78rem; text-align: left; color: var(--sc-ink); background: var(--blue-tint); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md);
  padding: 0.55rem 0.7rem; cursor: pointer; transition: border-color 140ms var(--sc-ease-out), background 140ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.prompts button:hover { border-color: var(--sc-accent); background: var(--blue-soft); }
.prompts button:active { transform: scale(0.98); }
.prompts button.is-on { border-color: var(--sc-accent); background: var(--sc-surface); box-shadow: 0 0 0 3px rgba(15,108,230,0.14); }
.builder__form { display: flex; gap: 0.4rem; align-items: center; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-md); padding: 0.3rem 0.3rem 0.3rem 0.7rem; background: var(--sc-surface); box-shadow: var(--sc-e1); }
.builder__form:focus-within { border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(15,108,230,0.14); }
.builder__form input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 0.8rem; padding: 0.3rem 0; outline: none; }
.builder__form .ask__send { border: 0; cursor: pointer; flex: none; }
.builder__prompt { margin: 0.2rem 0 0; font-size: var(--sc-t-sm); display: flex; gap: 0.6rem; align-items: baseline; min-height: 1.3em; font-weight: 500; }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; min-height: 5.6rem; }
.log li { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); display: flex; gap: 0.45rem; align-items: baseline; opacity: 0; transform: translateY(6px); animation: logIn 380ms var(--sc-ease-out) forwards; }
.log li::before { content: "✦"; color: var(--sc-accent); flex: none; }
.log li.is-ok::before { content: "✓"; color: var(--ok); }
@keyframes logIn { to { opacity: 1; transform: none; } }
.builder__actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.2rem; }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.ab[hidden] { display: none; }
.ab { display: inline-flex; border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-pill); padding: 2px; background: var(--blue-tint); }
.ab button { font: inherit; font-size: 0.72rem; font-weight: 600; border: 0; background: transparent; color: var(--sc-ink-soft); padding: 0.3em 0.7em; border-radius: var(--sc-r-pill); cursor: pointer; }
.ab button.is-on { background: var(--sc-surface); color: var(--sc-accent); box-shadow: var(--sc-e1); }
.canvas-wrap { min-width: 0; }
.preview { position: relative; }
.preview__page { min-height: 22rem; max-width: none; padding: 1.1rem 1.2rem 1.3rem; gap: 0.7rem; align-content: start; }
.live.is-draft { color: var(--sc-ink-soft); }
.shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.85) 50%, transparent 70%); transform: translateX(-110%); opacity: 0; }
.shine.is-on { animation: shine 1100ms var(--sc-ease-out) 1; }
@keyframes shine { 0% { transform: translateX(-110%); opacity: 1; } 100% { transform: translateX(110%); opacity: 0; } }
.preview.is-live { box-shadow: 0 0 0 2px rgba(14,138,90,0.45), var(--sc-e3); transition: box-shadow 500ms var(--sc-ease-out); }
.palette-wrap { display: grid; gap: 0.5rem; align-content: start; }
.blocks li { cursor: pointer; user-select: none; transition: background 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out); }
.blocks li:hover { border-color: var(--sc-accent); background: var(--blue-tint); }
.blocks li:active { transform: scale(0.97); }
.blocks li.is-used { background: color-mix(in oklab, var(--sc-accent) 8%, var(--sc-surface)); border-color: rgba(15,108,230,0.35); }
.blocks li.is-grab { border-color: var(--sc-accent); box-shadow: 0 0 0 3px rgba(15,108,230,0.16); transform: scale(1.04); }
/* blocks on the page */
.pv { position: relative; opacity: 0; transform: translateY(10px) scale(0.98); transition: opacity 420ms var(--sc-ease-out), transform 520ms cubic-bezier(0.22, 1.2, 0.36, 1); border-radius: var(--sc-r-sm); }
.pv.is-on { opacity: 1; transform: none; }
.pv.is-out { opacity: 0; transform: scale(0.96); }
.pv:hover { outline: 1px dashed rgba(15,108,230,0.5); outline-offset: 5px; }
.pv__x { position: absolute; right: -6px; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--sc-hairline); background: var(--sc-surface); color: var(--warn); font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity 140ms var(--sc-ease-out); box-shadow: var(--sc-e1); }
.pv:hover .pv__x, .pv__x:focus-visible { opacity: 1; }
.pv--hl { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; letter-spacing: -0.02em; max-width: 24ch; }
.pv--hl.is-swap { animation: swap 400ms var(--sc-ease-out); }
@keyframes swap { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
.pv-img { height: 6.5rem; border-radius: var(--sc-r-md); background: linear-gradient(135deg, #dbe9ff, #7fb0ff 60%, #2b7cf0); position: relative; overflow: clip; }
.pv-img::after { content: ""; position: absolute; right: 12%; bottom: -20%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.35); filter: blur(6px); }
.pv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-size: 0.8rem; }
.pv-list li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.pv-price { display: flex; align-items: center; justify-content: space-between; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); padding: 0.55rem 0.8rem; }
.pv-price b { font-family: var(--sc-font-display); font-weight: 800; font-size: 1.1rem; }
.pv-price span { background: var(--sc-accent); color: #fff; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.78rem; padding: 0.45em 1em; border-radius: var(--sc-r-pill); }
.pv-summary { display: grid; gap: 0.3rem; font-size: 0.8rem; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); padding: 0.6rem 0.8rem; }
.pv-summary div { display: flex; justify-content: space-between; }
.pv-summary div:last-child { border-top: 1px solid var(--sc-hairline); padding-top: 0.3rem; font-weight: 600; }
.pv-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.pv-card i { display: block; height: 2rem; border-radius: var(--sc-r-sm); background: var(--sc-surface); border: 1px solid var(--sc-hairline); font-style: normal; font-size: 0.7rem; color: var(--sc-ink-soft); padding: 0.5rem 0.6rem; font-family: var(--sc-font-mono); }
.pv-card i:first-child { grid-column: 1 / -1; }
.pv-upsell { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; background: linear-gradient(135deg, #fff7e6, #ffefcf); border: 1px solid #f2d9a6; border-radius: var(--sc-r-sm); padding: 0.55rem 0.8rem; font-size: 0.8rem; }
.pv-upsell b { display: block; font-family: var(--sc-font-display); }
.pv-upsell span { white-space: nowrap; background: var(--sc-ink); color: #fff; font-size: 0.72rem; font-weight: 600; padding: 0.4em 0.8em; border-radius: var(--sc-r-pill); }
/* the cursor */
.ai-cursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; transform: translate(0, 0); transition: transform 650ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms var(--sc-ease-out); display: flex; align-items: flex-start; gap: 0.1rem; }
.ai-cursor.is-on { opacity: 1; }
.ai-cursor.is-grab svg { transform: scale(0.85); }
.ai-cursor svg { transition: transform 150ms var(--sc-ease-out); filter: drop-shadow(0 2px 4px rgba(11,18,48,0.35)); }
.ai-cursor__tag { margin-top: 14px; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.66rem; color: #fff; background: var(--sc-accent); border-radius: 4px; padding: 0.15em 0.45em; box-shadow: var(--sc-e1); }
@media (max-width: 960px) {
  .builder__grid { grid-template-columns: minmax(0, 1fr) 1fr; }
  .builder__chat { grid-column: 1 / -1; }
  .palette-wrap .blocks { display: flex; flex-wrap: wrap; gap: 0.3rem; }
}
@media (max-width: 640px) {
  .builder__grid { grid-template-columns: 1fr; }
  .preview__page { min-height: 0; padding: 0.8rem; }
  .ai-cursor { display: none; }
}

/* blocks the builder places */
.pv-logo { font-family: var(--sc-font-display); font-weight: 800; letter-spacing: 0.12em; font-size: 0.75rem; }
.pv--question { display: grid; gap: 0.15rem; }
.pv--question small, .pv--reviews small { font-size: 0.7rem; color: var(--sc-ink-soft); }
.pv-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.pv-options li { display: flex; justify-content: space-between; background: var(--sc-surface); border: 1px solid var(--sc-hairline); border-radius: var(--sc-r-sm); padding: 0.45rem 0.7rem; font-size: 0.8rem; }
.pv-options li span { color: var(--sc-accent); font-weight: 600; }
.pv-btn { display: inline-block; background: var(--sc-accent); color: #fff; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.8rem; padding: 0.5em 1.1em; border-radius: var(--sc-r-pill); }
.pv-stars { color: #d98a09; letter-spacing: 0.05em; margin-right: 0.5rem; }
.pv--reviews { display: flex; align-items: baseline; font-size: 0.75rem; }


/* ============================================================ FUTURE LAYER ==
   Glass, light, and motion on top of the same ground. */

/* aurora: three slow blue lights behind everything */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; width: 60vw; height: 60vw; border-radius: 50%; filter: blur(80px); opacity: 0.55; background: radial-gradient(circle, rgba(43,124,240,0.35) 0%, rgba(43,124,240,0) 65%); will-change: transform; }
.aurora i:nth-child(1) { left: -20vw; top: 10vh; animation: drift1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -25vw; top: 40vh; animation: drift2 32s ease-in-out infinite alternate; background: radial-gradient(circle, rgba(127,176,255,0.35) 0%, rgba(127,176,255,0) 65%); }
.aurora i:nth-child(3) { left: 20vw; bottom: -30vh; animation: drift3 38s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 12vh) scale(1.15); } }
@keyframes drift2 { to { transform: translate(-14vw, -18vh) scale(0.9); } }
@keyframes drift3 { to { transform: translate(-10vw, -12vh) scale(1.2); } }
main { position: relative; z-index: 1; }

/* the light that follows the pointer */
.light { position: fixed; left: 0; top: 0; width: 42rem; height: 42rem; margin: -21rem 0 0 -21rem; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(43,124,240,0.20) 0%, rgba(43,124,240,0.08) 35%, rgba(43,124,240,0) 65%); will-change: transform; transition: opacity 500ms var(--sc-ease-out); }
.light.is-on { opacity: 1; }
@media (hover: none) { .light, .aurora { display: none; } }

/* glass surfaces */
.surface {
  background: rgba(255,255,255,0.68);
  -webkit-backdrop-filter: blur(20px) saturate(1.35); backdrop-filter: blur(20px) saturate(1.35);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 1px 0 rgba(255,255,255,0.9) inset, 0 0 0 1px rgba(15,108,230,0.06), 0 24px 60px -28px rgba(15,108,230,0.35), var(--sc-e3);
  transform-style: preserve-3d;
}
.surface::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(43,124,240,0.7) 30%, rgba(127,176,255,0.9) 50%, rgba(43,124,240,0.7) 70%, transparent); pointer-events: none; z-index: 1; }
.surface--dark { background: rgba(19,27,61,0.55); border-color: rgba(154,190,255,0.18); box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 70px -30px rgba(43,124,240,0.5); }
.pay__panel, .portal, .save, .heat__panel, .email, .preview, .events, .work, .site { background: rgba(243,246,252,0.7); }
.line li, .pile__tile, .fn, .hero__eyebrow, .prompts button { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255,255,255,0.72); }

/* headlines blur in */
.head > * { filter: blur(0); transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out), filter 700ms var(--sc-ease-out); }
[data-sc-stagger] > *:not(.sc-in) { filter: blur(10px); }
.head .sc-display { text-shadow: 0 1px 0 rgba(255,255,255,0.6); }

/* a luminous beam between chapters */
.chapter::before { content: ""; position: absolute; left: 50%; top: 0; width: min(60%, 48rem); height: 1px; transform: translateX(-50%) scaleX(0); transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(43,124,240,0.55), rgba(127,176,255,0.9), rgba(43,124,240,0.55), transparent); transition: transform 1200ms var(--sc-ease-out); }
.chapter.is-seen::before { transform: translateX(-50%) scaleX(1); }
.chapter--dark::before { background: linear-gradient(90deg, transparent, rgba(106,167,255,0.7), #fff, rgba(106,167,255,0.7), transparent); }

/* buttons: shine sweep on hover */
.btn { position: relative; overflow: clip; }
.btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.45) 50%, transparent 65%); transform: translateX(-120%); transition: transform 700ms var(--sc-ease-out); }
.btn:hover::after { transform: translateX(120%); }

/* nav: sliding active pill */
.bar__nav { position: relative; padding: 0.25rem; border-radius: var(--sc-r-pill); }
.bar__nav a { position: relative; z-index: 1; padding: 0.35em 0.75em; border-radius: var(--sc-r-pill); transition: color 160ms var(--sc-ease-out); }
.bar__nav a.is-active { color: var(--sc-ink); }
.bar__pill { position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 0; border-radius: var(--sc-r-pill); background: rgba(15,108,230,0.10); box-shadow: inset 0 0 0 1px rgba(15,108,230,0.18); opacity: 0; transition: left 320ms var(--sc-ease-out), width 320ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out); }
.bar__pill.is-on { opacity: 1; }
.bar.is-dark .bar__nav a.is-active { color: #fff; }

/* hero: reflection pool, scan line, HUD */
.laptop { position: relative; }
.laptop__pool { position: absolute; left: 6%; right: 6%; top: 100%; height: 9rem; margin-top: -0.5rem; pointer-events: none; z-index: -1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(43,124,240,0.55) 0%, rgba(127,176,255,0.25) 40%, rgba(127,176,255,0) 75%); filter: blur(14px); }
.screen { position: relative; }
.scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; z-index: 4; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, rgba(43,124,240,0) 0%, rgba(43,124,240,0.10) 45%, rgba(127,176,255,0.28) 50%, rgba(43,124,240,0.10) 55%, rgba(43,124,240,0) 100%); }
.app.is-working .scan { opacity: 1; animation: scan 2.2s linear infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(660%); } }
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 3; --px: 0; --py: 0; }
.hud__chip { position: absolute; display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--sc-font-display); font-weight: 700; font-size: 0.8rem; color: var(--sc-ink);
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.95); border-radius: var(--sc-r-pill); padding: 0.5em 0.95em;
  box-shadow: 0 12px 30px -12px rgba(15,108,230,0.45), 0 1px 0 rgba(255,255,255,0.9) inset; opacity: 0; transform: translateY(12px) scale(0.96);
  transition: opacity 500ms var(--sc-ease-out), transform 600ms cubic-bezier(0.22, 1.2, 0.36, 1); }
.hud__chip.is-on { opacity: 1; transform: translate(calc(var(--px) * var(--k, 10px)), calc(var(--py) * var(--k, 10px))); animation: bob 5s ease-in-out infinite; }
.hud__chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-accent); box-shadow: 0 0 0 4px rgba(15,108,230,0.16); animation: pulseDot 1.8s ease-in-out infinite; }
.hud__chip i.ok { background: var(--ok); box-shadow: 0 0 0 4px rgba(14,138,90,0.16); }
.hud__chip b { color: var(--sc-accent); }
.hud__chip--1 { left: 4%; top: 12%; --k: 14px; }
.hud__chip--2 { right: 3%; top: 34%; --k: 10px; animation-delay: -1.6s; }
.hud__chip--3 { left: 6%; top: 62%; --k: 18px; animation-delay: -3s; }
@keyframes bob { 50% { margin-top: -6px; } }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 7px rgba(15,108,230,0.06); } }
@media (max-width: 860px) { .hud { display: none; } .laptop__pool { height: 5rem; } }

/* the brain: stars, turning rings, light down every thread */
.chapter--dark { overflow: clip; }
.stars { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.9; }
.chapter--dark .stage__inner { position: relative; }
.ring--3, .ring--4 { transform-origin: 280px 280px; stroke-dasharray: 6 10; }
.ring--3 { animation: turn 60s linear infinite; }
.ring--4 { animation: turn 90s linear infinite reverse; stroke-dasharray: 2 12; }
@keyframes turn { to { transform: rotate(360deg); } }
.thread.is-on { stroke-dasharray: 2 14; stroke-width: 2; opacity: 0.9; animation: flow 1.6s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -32; } }
.thread--base { fill: none; stroke: rgba(154,190,255,0.28); stroke-width: 1; opacity: 0; transition: opacity 400ms var(--sc-ease-out); }
.thread--base.is-on { opacity: 1; }
.brain.is-awake .core-glow { animation: breathe 3.5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 1; transform: scale(1.45); } }

/* orbit: pulses along the threads */
.orbit__line.is-on { background: linear-gradient(90deg, rgba(15,108,230,0.9), rgba(15,108,230,0.15)); }
.orbit__line.is-on::after { content: ""; position: absolute; left: 0; top: -2px; width: 22px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff, rgba(255,255,255,0)); box-shadow: 0 0 10px rgba(127,176,255,0.9); animation: pulseAlong 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes pulseAlong { 0% { transform: translateX(400%); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(-10%); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .aurora, .light, .scan, .orbit__line.is-on::after { display: none; }
  .ring--3, .ring--4, .thread.is-on, .brain.is-awake .core-glow, .hud__chip.is-on { animation: none; }
  [data-sc-stagger] > *:not(.sc-in) { filter: none; }
}

[data-sc-stagger] > * { transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out), filter 700ms var(--sc-ease-out); }