/* Hero: a dark, full-bleed band (BRAND EXCEPTION, Stephen 2026-10-01: "dark cinematic hero band only, the rest of the
   site stays light"). The message on the left; on the right a scripted demo call (js/hero/demo-call.js): Stella's
   electric orb (js/stella/orb-gl.js, `vivid`) sits centred and reacts to whoever is talking, a waveform flows out of each
   side (left: the caller's voice, right: Stella's), the words
   appear as bubbles, and what the call gets done appears as result chips. Phones stack copy, then the call. */
.hero {
  --hero-ink: #f3f6f7; --hero-ink-2: #b7c4ca; --hero-line: #ffffff1f; --hero-glass: #ffffff0f;
  --call-glass: #ffffff14; --call-edge: #ffffff2e; /* the one material for the call's bubbles, chips and sound pill */
  position: relative; isolation: isolate; color: var(--hero-ink);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px;
  max-width: none; margin-top: calc(-1 * var(--header-space));
  --hero-gap: clamp(28px, 3vw, 44px); /* the same space above (under the header) and below the content */
  padding: calc(var(--header-space) + var(--hero-gap)) var(--edge) var(--hero-gap);
  background:
    radial-gradient(60% 70% at 78% 42%, #3cc3d42e 0%, #3cc3d400 60%),
    radial-gradient(40% 50% at 96% 0%, #8fa8ff26 0%, #8fa8ff00 70%),
    radial-gradient(45% 60% at 0% 100%, #087e9633 0%, #087e9600 70%),
    var(--night);
}
/* a faint dot grid, like the system map under "Look closer", fading towards the words */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #ffffff1c 1px, transparent 1.5px) 0 0 / 24px 24px;
  -webkit-mask-image: radial-gradient(70% 80% at 75% 45%, #000 0%, transparent 75%);
  mask-image: radial-gradient(70% 80% at 75% 45%, #000 0%, transparent 75%);
}
.hero > * { max-width: none; margin: 0; }
.hero__copy { display: grid; gap: 22px; align-content: center; }
.hero h1 { font-size: clamp(2.6rem, 1.1rem + 4vw, 5.6rem); font-weight: 600; line-height: 0.98; letter-spacing: -0.05em; }
.hero h1 em {
  font-style: normal; color: var(--teal-2);
  background: linear-gradient(transparent 72%, #3cc3d42e 72%);
}
.hero .lede { color: var(--hero-ink-2); }
.hero__eyebrow { color: var(--hero-ink-2); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.75rem; }
.hero__phone { font-size: 0.95rem; color: var(--hero-ink-2); }
/* Three quiet facts in the eyebrow's style; on wide screens they sit at the bottom of the column, level with the call's last line. */
.hero__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--hero-ink-2); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem; }
.hero__facts li::before { content: "✓"; margin-right: 8px; color: var(--teal-2); }
.hero__phone a { color: var(--hero-ink); text-decoration-color: #ffffff55; text-underline-offset: 3px; }
.hero__phone a:hover { color: var(--teal-2); }
.hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.hero .btn { background: var(--hero-ink); color: var(--ink); }
.hero .btn:hover { background: var(--teal-2); color: var(--ink); box-shadow: 0 10px 28px -10px #3cc3d4aa; }
.hero .btn--glass { background: var(--hero-glass); color: var(--hero-ink); border: 1px solid #ffffff38; }
.hero .btn--glass:hover { background: #ffffff1f; color: var(--hero-ink); }
.hero :focus-visible { outline-color: var(--teal-2); }

/* The call: the stage (orb + waveform) with one sound control under the orb, the words, the results. */
.hero__call { --orb-w: clamp(180px, 15vw, 240px); --bubble-h: 4.6rem; position: relative; display: grid; gap: 14px; align-content: center; }
.call__sound {
  justify-self: start; margin-top: 0; display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 18px 0 8px;
  border-radius: 999px; cursor: pointer; border: 0; background: var(--teal-2); color: var(--ink);
  box-shadow: 0 0 0 4px #3cc3d42e, 0 10px 30px -8px #3cc3d4cc; font: 600 0.9rem var(--font-body);
  transition: background 0.2s, box-shadow 0.2s;
}
.call__sound svg { width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ink); fill: var(--teal-2); stroke: none; }
.call__sound .call__stop { display: none; }
.call__sound:hover { background: #6fd6e2; box-shadow: 0 0 0 6px #3cc3d43d, 0 12px 34px -8px #3cc3d4; }
.call__sound[aria-pressed="true"] { background: var(--call-glass); color: var(--hero-ink); box-shadow: inset 0 0 0 1px #3cc3d488; }
.call__sound[aria-pressed="true"] svg { background: var(--teal-2); fill: var(--ink); }
.call__sound[aria-pressed="true"] .call__play { display: none; }
.call__sound[aria-pressed="true"] .call__stop { display: block; }

/* The orb sits in the middle of the column; the wave canvas spans the whole stage behind it (it never adds height). */
.call__stage { position: relative; display: grid; justify-items: center; align-items: center; }
.call__wave { position: absolute; left: 0; top: 50%; width: 100%; height: clamp(100px, 10vw, 150px); translate: 0 -50%; pointer-events: none; }
.orb {
  position: relative; z-index: 1; width: var(--orb-w); aspect-ratio: 1;
  border: 0; padding: 0; border-radius: 50%; background: none; cursor: pointer;
  transition: scale 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.orb:hover { scale: 1.03; }
/* Until WebGL draws, and on machines without it: a simplified electric orb in CSS (galaxy core, soft electric ring,
   glow) that takes the same state colour as the live one. Never the plain marble. */
.hero__call { --tint: #3cc3d4; }
.hero__call[data-mood="thinking"] { --tint: #8f78ff; }
.hero__call[data-mood="talking"] { --tint: #f2964a; }
.hero .orb-still, .hero .orb-still.no-webgl { background: none; }
.hero .orb::before, .hero .orb::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; transition: box-shadow 0.4s, border-color 0.4s; }
.hero .orb::before {
  inset: 26%;
  background:
    radial-gradient(circle at 50% 50%, #ffffffee 0, #bff4fa 4%, #ffffff00 16%),
    radial-gradient(ellipse 34% 16% at 38% 40%, #5fd0e099 0, #5fd0e000 100%),
    radial-gradient(ellipse 34% 16% at 62% 60%, #5fd0e099 0, #5fd0e000 100%),
    radial-gradient(circle at 50% 50%, #3cc3d455 0, #3cc3d400 45%),
    radial-gradient(circle, #16465299 0, #0c1c23 62%, #0b1419 100%);
  box-shadow: 0 0 0 1.5px var(--tint), 0 0 26px 4px color-mix(in srgb, var(--tint) 65%, transparent), 0 0 80px 18px color-mix(in srgb, var(--tint) 28%, transparent);
}
.hero .orb::after {
  inset: 16%; border: 1.5px solid color-mix(in srgb, var(--tint) 70%, transparent); filter: blur(0.6px);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tint) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--tint) 35%, transparent);
  animation: orb-ring 3.2s ease-in-out infinite;
}
@keyframes orb-ring { 50% { scale: 1.04; opacity: 0.7; } }
.hero .orb.is-ready::before, .hero .orb.is-ready::after { display: none; }
@media (prefers-reduced-motion: reduce) { .hero .orb::after { animation: none; } }
.orb__name {
  position: absolute; left: 50%; top: 88%; translate: -50% calc(0.048 * var(--orb-w)); white-space: nowrap; /* halfway between the ring and the play button */
  font: 600 0.68rem var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--hero-ink-2);
  transition: color 0.4s;
}
.hero__call[data-mood="listening"] .orb__name { color: #7fdbe6; }
.hero__call[data-mood="thinking"] .orb__name { color: #b8a8ff; }
.hero__call[data-mood="talking"] .orb__name { color: #f6b27a; }

/* The words: the last two lines; the newest rises in. Caller on the left, Stella on the right. */
.call__lines { list-style: none; padding: 0; display: grid; grid-template-rows: repeat(2, var(--bubble-h)); gap: 8px; }
.call__line {
  width: 82%; height: var(--bubble-h); overflow: hidden; padding: 10px 14px; /* one fixed size: nothing moves as lines change */ border-radius: 16px; line-height: 1.4; font-size: 0.98rem;
  background: var(--call-glass); border: 1px solid var(--call-edge); color: var(--hero-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.call__line b { display: block; font-weight: 500; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #7fdbe6; }
.call__line.is-empty { visibility: hidden; }
.call__line.is-cut { opacity: 0.55; } /* talked over: she stops and yields */
.call__line--stella { translate: calc(100% * 18 / 82) 0; /* to the right edge without moving the layout */ border-color: #f6b27a55; }
.call__line--stella b { color: #f6b27a; }
.call__line.is-new { animation: call-rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes call-rise { from { opacity: 0; transform: translateY(10px); } }

/* The results: what the call got done. Not yet: a faint dashed outline; done: the call's glass, with a teal line icon. */
.call__results { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.call__result { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call__result {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px;
  background: transparent; color: #ffffff4d; border: 1px dashed #ffffff26; font: 500 0.88rem var(--font-body);
  transition: background 0.5s, color 0.5s, border-color 0.5s, box-shadow 0.5s;
}
.call__result svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.call__result.is-done {
  background: var(--call-glass); color: var(--hero-ink); border: 1px solid var(--call-edge); box-shadow: 0 10px 28px -18px #3cc3d4aa;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.call__result.is-done svg { stroke: #7fdbe6; }
.call__result.is-done.is-new { animation: call-pop 0.6s cubic-bezier(0.2, 0.9, 0.25, 1.3); }
@keyframes call-pop { 40% { scale: 1.08; } }

.call__script { position: relative; } /* open: the transcript floats in spare space; the hero never changes height */
.call__script summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; cursor: pointer; list-style: none; }
.call__script summary::-webkit-details-marker { display: none; }
.call__script summary .mono { color: var(--hero-ink-2); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.call__script summary .mono::before { content: "▸ "; }
.call__script[open] summary .mono::before { content: "▾ "; }
.call__note { font-size: 0.8rem; color: #8d9ca3; }
.call__script ol {
  position: absolute; z-index: 3; left: 0; right: 0; top: calc(100% + 8px); max-height: var(--script-room, 12rem); overflow-y: auto;
  margin: 0; padding: 12px 14px 12px 32px; display: grid; gap: 4px; color: var(--hero-ink-2); font-size: 0.92rem;
  background: #0d1a20f2; border: 1px solid var(--call-edge); border-radius: 14px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.call__script.opens-up ol { top: auto; bottom: calc(100% + 8px); }
.call__script b { color: var(--hero-ink); font-weight: 600; }


.cursor {
  position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid var(--teal); opacity: 0;
  transition: opacity 0.3s, width 0.25s, height 0.25s, margin 0.25s;
}
.cursor.is-on.is-hover { opacity: 1; width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.cursor__label {
  position: absolute; left: 66px; top: 20px; white-space: nowrap;
  font: 500 11px/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal);
}

@media (prefers-reduced-motion: reduce) {
  .call__line.is-new, .call__result.is-new { animation: none; }
}

/* Wide screens: words left, the call right, filling the first screen. */
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 24px clamp(32px, 5vw, 96px); min-height: min(100svh, 980px);
    align-content: center; align-items: start; } /* one row, centred in the band: both columns start at the same line */
  .hero__call { margin-top: calc(-0.116 * var(--orb-w)); }
  .hero__copy { align-self: stretch; display: flex; flex-direction: column; }
  .hero__copy > * + * { margin-top: 16px; }
  .hero__copy > .hero__ctas { margin-top: 26px; }
  .hero__facts { margin-top: auto !important; padding-top: 0; }
  .hero__call { align-self: stretch; display: flex; flex-direction: column; } /* starts at the top (orb level with the eyebrow) */
  .hero__call > .call__sound { align-self: flex-start; }
  .call__script { margin-top: auto; } /* the call.s last line meets the facts line */ /* the orb's canvas has room for its ring: lift it so the ring's top meets the eyebrow */
}
@media (max-width: 600px) {
  .hero { padding-top: calc(var(--header-space) + 20px); }
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .orb { width: 190px; }
  .call__wave { height: 110px; }
  .call__line { width: 92%; }
  .call__line--stella { translate: calc(100% * 8 / 92) 0; }
  .hero__call { --bubble-h: 6rem; }
  .call__results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .call__result { font-size: 0.8rem; padding: 7px 10px 7px 8px; }
}