/* AI LABZ homepage — Chapter One (Arrival) continuing seamlessly into the
   docked Hero. Loaded AFTER site.css (shared chrome); this file only adds
   homepage-specific pieces: the arrival hero, the nav's fade-in gating +
   mobile menu, the "Experience AI LABZ" demo hub, and the results section.
   No new palette, type, or motion values are introduced here. */

.hero-visual {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050507;
  opacity: 0;
  transition: opacity 1800ms var(--ease-standard);
}
body[data-state="glow"] .hero-visual,
body[data-state="resolve"] .hero-visual,
body[data-state="idle"] .hero-visual,
body[data-state="threshold"] .hero-visual,
body[data-state="crossing"] .hero-visual,
body[data-state="arrived"] .hero-visual {
  opacity: 1;
}

.hero-parallax {
  position: absolute;
  inset: -3%;
  will-change: transform;
}
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
  animation: heroDrift 60s ease-in-out infinite;
  transform-origin: 50% 42%;
}
@keyframes heroDrift {
  0%   { transform: scale(1.08); }
  50%  { transform: scale(1.02); }
  100% { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; transform: scale(1.03); }
}
@media (max-width: 700px) {
  .hero-image { object-position: 66% 40%; }
}

.hero-glow {
  position: absolute;
  left: 30%;
  top: 34%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(72% 0.16 275 / 0.5) 0%, oklch(60% 0.14 275 / 0.18) 45%, transparent 72%);
  filter: blur(18px);
  mix-blend-mode: screen;
  animation: heroGlowBreathe 7s ease-in-out infinite;
}
@keyframes heroGlowBreathe {
  0%, 100% { opacity: 0.55; transform: scale(0.97); }
  50%      { opacity: 0.85; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow { animation: none; opacity: 0.7; }
}

.hero-energy {
  position: absolute;
  left: 22%;
  top: 28%;
  width: 46%;
  height: 46%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    oklch(75% 0.18 280 / 0.14) 80deg,
    transparent 170deg,
    oklch(70% 0.18 255 / 0.12) 260deg,
    transparent 360deg);
  filter: blur(28px);
  mix-blend-mode: screen;
  animation: heroEnergySpin 44s linear infinite;
  pointer-events: none;
}
@keyframes heroEnergySpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-energy { animation: none; }
}

.hero-fog {
  position: absolute;
  inset: -10% -20%;
  background:
    radial-gradient(ellipse 60% 30% at 20% 85%, oklch(30% 0.03 275 / 0.5), transparent 70%),
    radial-gradient(ellipse 50% 25% at 80% 90%, oklch(28% 0.03 260 / 0.45), transparent 70%);
  mix-blend-mode: screen;
  animation: heroFogDrift 40s ease-in-out infinite;
  pointer-events: none;
}
@keyframes heroFogDrift {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(2%); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fog { animation: none; }
}

.hero-stars,
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hero-star {
  position: absolute;
  border-radius: 50%;
  background: oklch(97% 0.01 260);
  opacity: 0;
  animation-name: heroTwinkle;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes heroTwinkle {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.85; }
}
.hero-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: oklch(85% 0.05 270 / 0.7);
  opacity: 0;
  animation-name: heroDust;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes heroDust {
  0%   { opacity: 0; transform: translateY(0); }
  15%  { opacity: 0.6; }
  85%  { opacity: 0.4; }
  100% { opacity: 0; transform: translateY(-60px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-star { animation: none; opacity: 0.6; }
}

.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 40%, oklch(8% 0.01 262 / 0.6) 100%),
    linear-gradient(90deg, oklch(8% 0.01 262 / 0.5) 0%, transparent 46%);
  pointer-events: none;
}

.site-nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1200ms var(--ease-standard);
}
body[data-state="resolve"] .site-nav,
body[data-state="idle"] .site-nav,
body[data-state="threshold"] .site-nav,
body[data-state="crossing"] .site-nav,
body[data-state="arrived"] .site-nav {
  opacity: 1;
  pointer-events: auto;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--surface-1);
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text-secondary);
  border-radius: 1px;
  transition: transform var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard);
}
.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: oklch(13% 0.008 262 / 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-slow) var(--ease-standard);
  }
  .site-nav.nav-open .nav-links {
    max-height: 420px;
  }
  .nav-links a {
    padding: var(--space-md) var(--grid-margin);
    border-bottom: 1px solid var(--border-subtle);
  }
}

.hero {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--grid-margin) var(--space-4xl);
  pointer-events: none;
}
.hero-content {
  max-width: 620px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity var(--duration-cinematic) var(--ease-emphasized) 150ms,
              transform var(--duration-cinematic) var(--ease-emphasized) 150ms,
              visibility 0s linear var(--duration-cinematic);
  pointer-events: auto;
}
body[data-state="arrived"] .hero-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity var(--duration-cinematic) var(--ease-emphasized) 150ms,
              transform var(--duration-cinematic) var(--ease-emphasized) 150ms,
              visibility 0s linear 0s;
}
/* Hero text reads on its own fast timeline, independent of the slower
   hero background arrival sequence above (which keeps its existing
   cinematic pace, untouched). Same fade + lift direction and easing as
   the rule above, just triggered almost immediately instead of waiting
   on data-state="arrived". See main.js for where .is-text-ready is
   added (immediately under reduced motion, ~350ms otherwise). */
.hero-content.is-text-ready {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 900ms var(--ease-emphasized), transform 900ms var(--ease-emphasized), visibility 0s linear 0s;
  pointer-events: auto;
}
.hero-content h1 {
  font-size: var(--fs-display);
  line-height: 1.05;
  color: var(--text-primary);
  text-shadow: 0 2px 40px oklch(0% 0 0 / 0.5);
}
.hero-content h1 .grad {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  font-size: var(--fs-body-lg);
  color: var(--text-secondary);
  max-width: 46ch;
  margin-top: var(--space-lg);
  text-shadow: 0 2px 24px oklch(0% 0 0 / 0.4);
}
.hero-actions {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.continue-cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-3xl);
  transform: translateX(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 600ms var(--ease-standard);
  padding: var(--space-md);
}
body[data-state="idle"] .continue-cue {
  opacity: 0.7;
  pointer-events: auto;
}
.continue-cue .chevron {
  display: block;
  width: 14px; height: 14px;
  border-right: 1.5px solid var(--text-secondary);
  border-bottom: 1.5px solid var(--text-secondary);
  transform: rotate(45deg);
  animation: cuebob 2000ms ease-in-out infinite;
}
@keyframes cuebob {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 6px; }
}

.demo-hub {
  position: relative;
  z-index: 1;
  background: var(--surface-0);
  padding: clamp(var(--space-lg), 5vh, var(--space-4xl)) var(--grid-margin);
}
/* ---- AI Receptionist: mini-hero copy (left) + live call card (right).
   The copy explains the value before the animation starts; the call
   card stays the dominant, larger element and the obvious focal point —
   text just fills what would otherwise be empty space beside it.
   Typography reuses the same tokens as the page hero and Lead
   Follow-Up's headline (--font-display, --fs-h1/h2, --text-primary/
   secondary) for consistency, just left-aligned to suit a 2-column
   layout instead of Lead Follow-Up's centered one. ---- */
.receptionist-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, min(750px, 52vw));
  align-items: center;
  gap: clamp(20px, 2.5vw, 48px);
  max-width: var(--grid-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  box-sizing: border-box;
}
.receptionist-copy { max-width: 520px; }
.receptionist-copy h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 3vw + 18px, 58px);
  line-height: 1.08;
  color: var(--text-primary);
  margin-top: var(--space-sm);
}
.receptionist-copy h2 .grad {
  background: linear-gradient(100deg, var(--accent-blue), oklch(78% 0.15 218), var(--accent-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.receptionist-copy-sub {
  font-size: 20px;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-top: var(--space-md);
}
.receptionist-copy-sub .accent-word {
  color: oklch(78% 0.15 218);
}
.receptionist-highlights {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.receptionist-highlights li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}
.receptionist-highlights .icon-badge {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: radial-gradient(circle at 35% 30%, oklch(30% 0.03 240 / 0.6), var(--surface-2) 70%);
  border: 1px solid oklch(68% 0.16 235 / 0.35);
  box-shadow: 0 0 12px -4px oklch(68% 0.19 255 / 0.45);
}
@media (max-width: 900px) {
  .receptionist-layout { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .receptionist-copy { max-width: 480px; }
  .receptionist-highlights { align-items: center; }
  .receptionist-highlights li { flex-direction: column; gap: var(--space-xs); }
}
.call-hero-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.call-card {
  --cyan: oklch(78% 0.15 218);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 750px;
  padding: clamp(var(--space-2xl), 7.5vh, 124px) clamp(var(--space-xl), 6vw, 84px);
  border-radius: var(--radius-xl);
  border: 1px solid oklch(62% 0.06 265 / 0.28);
  background: linear-gradient(165deg, oklch(20% 0.014 262 / 0.94), oklch(14% 0.012 262 / 0.97));
  box-shadow:
    inset 0 1px 0 0 oklch(100% 0 0 / 0.06),
    inset 0 0 70px -24px oklch(60% 0.16 265 / 0.3),
    0 34px 90px -24px oklch(0% 0 0 / 0.55),
    0 0 70px -12px oklch(65% 0.18 270 / 0.35);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}
.call-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, oklch(100% 0 0 / 0.07) 0%, transparent 32%, transparent 68%, oklch(70% 0.15 265 / 0.06) 100%);
  pointer-events: none;
}
.call-status {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  transition: color 400ms var(--ease-standard), text-shadow 400ms var(--ease-standard);
}
.call-status.is-live { color: var(--state-success); }
.call-status.is-success {
  color: var(--state-success);
  text-shadow: 0 0 14px oklch(72% 0.16 152 / 0.45);
}
.call-avatar-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  margin: var(--space-lg) auto var(--space-md);
}
.call-avatar-wrap::before {
  content: '';
  position: absolute;
  inset: -35%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(60% 0.16 265 / 0.35), transparent 70%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
  animation: aiAmbientBreathe 4s ease-in-out infinite;
}
@keyframes aiAmbientBreathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
/* AI identity — an abstract luminous orb, not a face or literal robot.
   Always gently "alive" (breathing core, slow rotating light sweep +
   rings, orbiting particles, soft ambient halo behind it); is-listening/
   is-thinking/is-speaking/is-complete are added by receptionist-call-
   demo.js at the matching story beats, each with its own color
   personality (soft blue / violet shimmer / electric blue / emerald).
   is-ringing (outer pulse rings) already existed on .call-avatar-wrap
   and is untouched. */
.ai-orb {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: radial-gradient(circle at 34% 30%, oklch(85% 0.08 260 / 0.9), oklch(55% 0.18 275 / 0.5) 45%, oklch(28% 0.09 275 / 0.22) 78%, transparent 100%);
  box-shadow: 0 0 34px 8px oklch(68% 0.19 265 / 0.4), inset 0 0 26px oklch(90% 0.05 260 / 0.26);
  transition: box-shadow 600ms var(--ease-emphasized);
}
.ai-orb-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0%, oklch(75% 0.18 275 / 0.35) 14%, transparent 32%);
  animation: aiSweepRotate 7s linear infinite;
  opacity: 0.6;
}
.ai-orb-ring {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px solid oklch(75% 0.12 270 / 0.3);
  border-top-color: oklch(85% 0.18 270 / 0.8);
  pointer-events: none;
  animation: aiRingRotate 10s linear infinite;
}
.ai-orb-ring.r2 {
  inset: 21%;
  border-color: oklch(70% 0.15 255 / 0.24);
  border-top-color: oklch(80% 0.18 250 / 0.72);
  animation: aiRingRotate 14s linear infinite reverse;
}
@keyframes aiRingRotate { to { transform: rotate(360deg); } }
.ai-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(96% 0.02 260), var(--accent-blue) 72%);
  box-shadow: 0 0 14px 2px oklch(75% 0.18 265 / 0.6);
  animation: aiCoreBreathe 3.2s ease-in-out infinite;
}
.ai-orb-particles span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.5px;
  height: 3.5px;
  margin: -1.75px 0 0 -1.75px;
  border-radius: 50%;
  background: oklch(88% 0.06 260);
  box-shadow: 0 0 5px 1px oklch(80% 0.15 265 / 0.7);
  animation: aiParticleOrbit 5s linear infinite;
}
.ai-orb-particles span:nth-child(1) { animation-delay: 0s; }
.ai-orb-particles span:nth-child(2) { animation-delay: -1.7s; }
.ai-orb-particles span:nth-child(3) { animation-delay: -3.3s; }
@keyframes aiSweepRotate { to { transform: rotate(360deg); } }
@keyframes aiCoreBreathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.08); opacity: 1; }
}
@keyframes aiParticleOrbit {
  from { transform: rotate(0deg) translateX(52px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(52px) rotate(-360deg); }
}
/* Listening — soft blue breathing, calmer and slightly slower than idle. */
.ai-orb.is-listening { box-shadow: 0 0 32px 6px oklch(64% 0.15 250 / 0.4), inset 0 0 24px oklch(85% 0.05 250 / 0.25); }
.ai-orb.is-listening .ai-orb-core { animation-duration: 3.8s; }
/* Thinking — subtle violet shimmer, sweep + glow shift toward violet. */
.ai-orb.is-thinking { box-shadow: 0 0 34px 8px oklch(72% 0.17 297 / 0.42), inset 0 0 24px oklch(85% 0.06 297 / 0.28); }
.ai-orb.is-thinking .ai-orb-sweep {
  background: conic-gradient(from 0deg, transparent 0%, oklch(72% 0.19 300 / 0.55) 14%, transparent 32%);
  animation-duration: 2.4s;
  opacity: 1;
}
.ai-orb.is-thinking .ai-orb-core { animation-duration: 1.8s; }
/* Speaking — brighter electric-blue, more dramatic rhythmic pulse. */
.ai-orb.is-speaking {
  animation: aiOrbSpeakPulse 0.85s ease-in-out infinite;
  box-shadow: 0 0 40px 10px oklch(72% 0.22 252 / 0.55), inset 0 0 26px oklch(90% 0.06 260 / 0.32);
}
.ai-orb.is-speaking .ai-orb-core {
  animation: aiCoreSpeak 0.85s ease-in-out infinite;
  background: radial-gradient(circle, oklch(97% 0.02 260), oklch(74% 0.22 252) 72%);
  box-shadow: 0 0 26px 5px oklch(76% 0.22 252 / 0.8);
}
@keyframes aiOrbSpeakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes aiCoreSpeak {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.24); opacity: 1; }
}
/* Complete — elegant emerald confirmation glow, then settles back. */
.ai-orb.is-complete { animation: aiCompleteGlow 1.6s var(--ease-emphasized); }
.ai-orb.is-complete .ai-orb-core { background: radial-gradient(circle, oklch(97% 0.02 152), oklch(72% 0.16 152) 72%); }
@keyframes aiCompleteGlow {
  0% { box-shadow: 0 0 34px 8px oklch(68% 0.19 265 / 0.4), inset 0 0 26px oklch(90% 0.05 260 / 0.26); }
  35% { box-shadow: 0 0 40px 12px oklch(72% 0.17 152 / 0.6), inset 0 0 28px oklch(90% 0.08 152 / 0.42); }
  100% { box-shadow: 0 0 34px 8px oklch(68% 0.19 265 / 0.4), inset 0 0 26px oklch(90% 0.05 260 / 0.26); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-orb, .ai-orb *, .call-avatar-wrap::before { animation: none !important; }
}
.call-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cyan, oklch(78% 0.15 218));
  box-shadow: 0 0 18px 2px oklch(78% 0.15 218 / 0.35);
  opacity: 0;
}
.call-avatar-wrap.is-ringing .call-ring { animation: callRingPulse 1.6s ease-out infinite; }
.call-avatar-wrap.is-ringing .call-ring:nth-child(2) { animation-delay: 0.5s; }
@keyframes callRingPulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0; }
}
.call-title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  color: var(--text-primary);
  margin-top: 2px;
}
.call-waveform {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 44px;
  margin-top: var(--space-lg);
}
.call-waveform span {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: var(--text-tertiary);
  transition: background 400ms var(--ease-standard), box-shadow 400ms var(--ease-standard);
}
.call-waveform.is-listening span { background: oklch(70% 0.1 255 / 0.7); animation: callWaveIdle 2.4s ease-in-out infinite; }
.call-waveform.is-speaking span {
  background: oklch(74% 0.22 252);
  box-shadow: 0 0 8px 0 oklch(70% 0.22 252 / 0.6);
  animation: callWaveBar 0.85s ease-in-out infinite;
}
.call-waveform span:nth-child(2) { animation-delay: 0.08s; }
.call-waveform span:nth-child(3) { animation-delay: 0.16s; }
.call-waveform span:nth-child(4) { animation-delay: 0.24s; }
.call-waveform span:nth-child(5) { animation-delay: 0.32s; }
.call-waveform span:nth-child(6) { animation-delay: 0.4s; }
.call-waveform span:nth-child(7) { animation-delay: 0.48s; }
@keyframes callWaveIdle { 0%, 100% { height: 8px; } 50% { height: 13px; } }
@keyframes callWaveBar { 0%, 100% { height: 8px; } 50% { height: 38px; } }
@media (prefers-reduced-motion: reduce) {
  .call-avatar-wrap.is-ringing .call-ring { animation: none; }
  .call-waveform span { animation: none !important; }
  .ai-orb.is-speaking { animation: none; }
}
.call-transcript {
  position: relative;
  margin-top: var(--space-xl);
  width: 100%;
  text-align: left;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.call-line {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 600ms var(--ease-emphasized), transform 600ms var(--ease-emphasized);
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-primary);
}
.call-line.is-visible { opacity: 1; transform: translateY(0); }
.call-line.from-ai { color: var(--cyan, oklch(78% 0.15 218)); }
.call-line .who {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  display: block;
  margin-bottom: 4px;
}
.call-typing {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 300ms var(--ease-standard);
}
.call-typing.is-visible { opacity: 1; }
.call-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: callTypingBounce 1.1s ease-in-out infinite;
}
.call-typing span:nth-child(2) { animation-delay: 0.15s; }
.call-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes callTypingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.results-section {
  position: relative;
  z-index: 1;
  background: var(--surface-1);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-4xl) var(--grid-margin);
}
.results-intro {
  max-width: var(--grid-max);
  margin: 0 auto;
  text-align: center;
}
.results-intro h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--text-primary);
  margin-top: var(--space-sm);
}
.results-grid {
  max-width: var(--grid-max);
  margin: var(--space-3xl) auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}
.result-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface-2);
  text-align: center;
}
.result-value {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: 700;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.result-label {
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.results-disclaimer {
  max-width: var(--grid-max);
  margin: var(--space-2xl) auto 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
}

@media (max-width: 900px) {
  .results-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hero-content { max-width: 100%; }
  .hero-content h1 { font-size: var(--fs-h1); }
}

@media (max-width: 480px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { justify-content: center; text-align: center; }
  .results-grid { grid-template-columns: 1fr; }
}