/* ─────────────────────────────────────────────────────────────
   Tokens
   ───────────────────────────────────────────────────────────── */
:root {
  color-scheme: light;
  --bg:     #f7f6f3;
  --bg-2:   #ffffff;
  --ink:    #15161a;
  --ink-2:  #2b2d34;
  --muted:  #6b6d75;
  --faint:  #a4a59f;
  --hair:   rgba(21,22,26,0.09);
  --hair-2: rgba(21,22,26,0.04);
  --surface:#ffffff;
  --surface-shadow: 0 1px 0 rgba(21,22,26,.03), 0 1px 2px rgba(21,22,26,.04), 0 22px 50px -28px rgba(21,22,26,.22);
  --grid:   rgba(21,22,26,0.035);

  --tile-bg-1: #1d1f25;       /* video tile background */
  --tile-bg-2: #2a2d36;
  --tile-bg-soft-1: #f1efe7;
  --tile-bg-soft-2: #e7e4d9;

  --brand:  #4F46E5;
  --brand-2:#7E76FF;
  --jim:    #2E7BD6;
  --todd:   #16976F;
  --ariel:  #6F66D8;
  --morgan: #D88A2A;
  --casey:  #B14545;

  --human-1: #3B82F6;
  --human-2: #10B981;
  --human-3: #8B5CF6;

  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-spring: cubic-bezier(.34,1.3,.5,1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:     #0e0f12;
  --bg-2:   #14161b;
  --ink:    #f3f1ec;
  --ink-2:  #d7d6d0;
  --muted:  #8a8c93;
  --faint:  #4c4e55;
  --hair:   rgba(243,241,236,0.10);
  --hair-2: rgba(243,241,236,0.05);
  --surface:#16181d;
  --surface-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03), 0 22px 60px -28px rgba(0,0,0,.7);
  --grid:   rgba(243,241,236,0.04);
  --brand:  #8B85F5;
  --brand-2:#A7A2FF;
  --jim:    #5BA0FF;
  --todd:   #2FCB97;
  --ariel:  #9C93FF;
  --morgan: #F0B056;
  --casey:  #E27676;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0e0f12; --bg-2:#14161b; --ink:#f3f1ec; --ink-2:#d7d6d0;
    --muted:#8a8c93; --faint:#4c4e55;
    --hair:rgba(243,241,236,0.10); --hair-2:rgba(243,241,236,0.05);
    --surface:#16181d;
    --surface-shadow: 0 1px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.03), 0 22px 60px -28px rgba(0,0,0,.7);
    --grid:rgba(243,241,236,0.04);
    --brand:#8B85F5; --brand-2:#A7A2FF;
    --jim:#5BA0FF; --todd:#2FCB97; --ariel:#9C93FF; --morgan:#F0B056; --casey:#E27676;
  }
}

/* ─────────────────────────────────────────────────────────────
   Reset & base
   ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  display:flex; flex-direction:column; min-height:100dvh;
  overflow-x:hidden;
  transition: background-color .4s var(--ease-out), color .4s var(--ease-out);
}

.ambient{ position:fixed; inset:0; pointer-events:none; z-index:0; contain: strict; }
.ambient .grid{
  position:absolute; inset:-1px;
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 45%, #000 30%, transparent 82%);
}

header, main, footer { position:relative; z-index:1; }

header{
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 4vw, 44px);
  font-family:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:12px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase;
}
.markline{ display:flex; align-items:center; gap:10px; }
.markline .tick{ width:6px; height:6px; border-radius:50%; background: var(--ink); opacity:.55; }
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px; border:1px solid var(--hair); border-radius:999px; color:var(--muted);
  background: color-mix(in oklab, var(--bg-2) 60%, transparent); backdrop-filter: blur(6px);
}
.badge .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--todd);
  animation: tinyPulse 2.6s ease-out infinite;
}
@keyframes tinyPulse{
  0%   { box-shadow: 0 0 0 0   color-mix(in oklab, var(--todd) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--todd) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0   color-mix(in oklab, var(--todd) 0%,  transparent); }
}
.theme-toggle{
  appearance:none; background:transparent; border:0; padding:0; margin-left:12px;
  width:30px; height:30px; border-radius:50%; color:var(--muted);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition: color .25s var(--ease-out), background-color .25s var(--ease-out);
}
.theme-toggle:hover{ color:var(--ink); background: var(--hair-2); }
.theme-toggle:focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }
.theme-toggle svg{ width:16px; height:16px; }

main{
  flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding: clamp(24px, 5vw, 48px) clamp(20px, 4vw, 44px);
  text-align:center;
}

/* ─────────────────────────────────────────────────────────────
   Wordmark
   ───────────────────────────────────────────────────────────── */
.wordmark{
  margin:0;
  font-weight:800; letter-spacing:-0.045em; line-height:.88;
  font-size: clamp(52px, 11vw, 160px);
  user-select:none;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  position: relative;
}
.wordmark .word{ display:inline-block; }
.wordmark .ch{
  display:inline-block; transform: translateY(28%); opacity:0; filter: blur(8px);
  animation: chIn 1.1s var(--ease-out) forwards;
}
.wordmark .tld{
  display: inline-flex; align-items: baseline;
  font-size: .42em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: .04em;
  color: var(--brand);
  opacity: 0;
  transform: translateY(20%);
  animation: tldIn 700ms var(--ease-out) 800ms forwards;
  position: relative;
  top: -.06em;
}
.wordmark .tld-dot{ opacity:.6; margin-right: 1px; }
@keyframes chIn { to { transform:translateY(0); opacity:1; filter:blur(0); } }
@keyframes tldIn{ to { transform: none; opacity: 1; } }

/* Crew dots — drop in under "ew.AI" once the wordmark has landed */
.word-dots{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: clamp(4px, .6vw, 10px);
  display: flex;
  align-items: center;
  gap: clamp(4px, .55vw, 8px);
  pointer-events: none;
}
.wd{
  display: block;
  width:  clamp(6px, .85vw, 11px);
  height: clamp(6px, .85vw, 11px);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-180%);
  animation: dotDrop 720ms cubic-bezier(.34,1.5,.5,1) forwards;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.wd:nth-child(1){ background: var(--jim);    animation-delay: 1500ms; }
.wd:nth-child(2){ background: var(--todd);   animation-delay: 1640ms; }
.wd:nth-child(3){ background: var(--ariel);  animation-delay: 1780ms; }
.wd:nth-child(4){ background: var(--morgan); animation-delay: 1920ms; }
@keyframes dotDrop{
  0%   { transform: translateY(-180%) scale(.6); opacity: 0; }
  50%  { opacity: 1; }
  78%  { transform: translateY(35%) scale(1.08); opacity: 1; }
  90%  { transform: translateY(-12%) scale(.98); }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Room (video conference)
   ───────────────────────────────────────────────────────────── */
.room{
  width:100%; max-width: 760px;
  margin-top: clamp(36px, 5vw, 52px);
  opacity:0; transform: translateY(8px);
  animation: rise 700ms var(--ease-out) 900ms forwards;
}
@keyframes rise{ to { opacity:1; transform:none } }

.grid-tiles{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 16px);
}

.tile{
  position:relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow:hidden;
  background: linear-gradient(160deg, var(--tile-bg-1), var(--tile-bg-2));
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 -1px 0 rgba(0,0,0,.3) inset,
    0 1px 2px rgba(0,0,0,.18),
    0 16px 32px -22px rgba(0,0,0,.4);
  transition: transform .55s var(--ease-spring), box-shadow .45s var(--ease-out);
}
.tile.is-active{
  transform: translateY(-3px) scale(1.025);
  box-shadow:
    0 0 0 2px var(--c, var(--jim)),
    0 0 0 6px color-mix(in oklab, var(--c, var(--jim)) 20%, transparent),
    0 18px 38px -16px color-mix(in oklab, var(--c, var(--jim)) 50%, transparent),
    0 1px 2px rgba(0,0,0,.2);
}
/* Subtle scan line / depth */
.tile::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.06), transparent 60%);
}

/* Character stage inside tile */
.tile .char{
  position:absolute; inset:0;
  display:flex; align-items:flex-end; justify-content:center;
}
.tile .char svg{
  width: 78%; height: 90%;
  display:block;
  transition: transform .5s var(--ease-spring);
}
.tile.is-active .char svg{ transform: translateY(-2px) scale(1.03); }

/* Tile name strip */
.namestrip{
  position:absolute; left:8px; bottom:8px; right:8px;
  display:flex; align-items:center; gap:6px;
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing:.03em;
  color: rgba(255,255,255,.92);
  pointer-events:none;
  z-index: 2;
}
.namestrip .nm{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  padding: 4px 7px;
  border-radius: 5px;
  display:inline-flex; align-items:center; gap:6px;
  border: 1px solid rgba(255,255,255,.05);
}
.namestrip .who{ font-weight:500; color:#fff; }
.namestrip .sub{ color: rgba(255,255,255,.55); text-transform: uppercase; font-size: 9.5px; letter-spacing:.06em; }
.namestrip .sep{ color: rgba(255,255,255,.3); }

/* Mic / speaking indicator */
.mic{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius: 4px;
  background: rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.06);
  color: rgba(255,255,255,.7);
}
.mic svg{ width:9px; height:9px; }
.tile.is-active .mic{
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 60%, transparent);
  animation: micPulse 1.4s ease-out infinite;
}
@keyframes micPulse{
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 50%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklab, var(--c) 0%,  transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--c) 0%,  transparent); }
}

/* ── Friendly sci-fi robot ── */
.bot-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 50% at 50% 30%, color-mix(in oklab, var(--c) 22%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in oklab, var(--c) 16%, #1a1c22), color-mix(in oklab, var(--c) 6%, #14161b));
}
/* Body */
.bot-svg .b-body       { fill: var(--c); }
.bot-svg .b-body-hl    { fill: rgba(255,255,255,.22); }
.bot-svg .b-body-shade { fill: rgba(0,0,0,.22); }
.bot-svg .b-seam       { stroke: color-mix(in oklab, var(--c) 55%, #000 45%); stroke-width: 1.1; fill: none; stroke-linecap: round; opacity: .6; }
.bot-svg .b-chest      { fill: rgba(0,0,0,.36); }
.bot-svg .b-chest-bar  { fill: rgba(255,255,255,.18); }
.bot-svg .b-chest-light{ fill: var(--c); filter: drop-shadow(0 0 1.6px rgba(255,255,255,.55)); }
/* Neck */
.bot-svg .b-neck       { fill: color-mix(in oklab, var(--c) 70%, #000 30%); }
.bot-svg .b-neck-shade { fill: rgba(0,0,0,.28); }
.bot-svg .b-neck-ring  { fill: rgba(0,0,0,.25); }
/* Head pod */
.bot-svg .b-head       { fill: var(--c); }
.bot-svg .b-head-hl    { fill: rgba(255,255,255,.45); }
.bot-svg .b-head-shade { fill: rgba(0,0,0,.22); }
.bot-svg .b-head-seam  { stroke: rgba(0,0,0,.35); stroke-width: 1; stroke-linecap: round; fill: none; }
/* Visor */
.bot-svg .b-visor       { fill: #0a0c12; }
.bot-svg .b-visor-shadow{ fill: rgba(0,0,0,.5); }
.bot-svg .b-visor-gloss { fill: rgba(255,255,255,.08); }
/* Eyes */
.bot-svg .b-eye-aura{
  fill: color-mix(in oklab, var(--c) 65%, #fff 35%);
  opacity: .35;
  filter: blur(2.5px);
  transform-box: fill-box; transform-origin: center;
}
.bot-svg .b-eye     { fill: #f8f8f0; transform-box: fill-box; transform-origin: center; transition: transform .25s var(--ease-out); }
.bot-svg .b-eye-spec{ fill: rgba(255,255,255,1); }
/* Cheek LEDs */
.bot-svg .b-cheek   { fill: color-mix(in oklab, var(--c) 50%, #fff 50%); opacity:.7; }
/* Antenna */
.bot-svg .b-ant-stalk    { fill: color-mix(in oklab, var(--c) 55%, #000 45%); }
.bot-svg .b-ant-bulb     { fill: var(--c); }
.bot-svg .b-ant-bulb-glow{ fill: var(--c); opacity:.35; filter: blur(2px); }
/* Speaker grille bars */
.bot-svg .b-bar{
  fill: rgba(255,255,255,.55);
  transform-box: fill-box; transform-origin: center;
  transition: transform .25s var(--ease-out);
}

/* Active state animations */
.tile.is-active .bot-svg .b-eye-aura{
  opacity: .65;
  animation: eyeAuraPulse 1.6s ease-in-out infinite;
}
@keyframes eyeAuraPulse{
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.1); }
}
.tile.is-active .bot-svg .b-ant-bulb{
  filter: drop-shadow(0 0 4px color-mix(in oklab, var(--c) 80%, transparent));
}
.tile.is-active .bot-svg .b-ant-bulb-glow{
  opacity: .8;
}
.tile.is-active .bot-svg .b-bar{
  animation: eqBar .28s ease-in-out infinite alternate;
}
.tile.is-active .bot-svg .b-bar:nth-of-type(1){ animation-duration: 260ms; animation-delay:  20ms; }
.tile.is-active .bot-svg .b-bar:nth-of-type(2){ animation-duration: 220ms; animation-delay:  70ms; }
.tile.is-active .bot-svg .b-bar:nth-of-type(3){ animation-duration: 180ms; animation-delay:   0ms; }
.tile.is-active .bot-svg .b-bar:nth-of-type(4){ animation-duration: 200ms; animation-delay:  40ms; }
.tile.is-active .bot-svg .b-bar:nth-of-type(5){ animation-duration: 240ms; animation-delay:  90ms; }
.tile.is-active .bot-svg .b-bar:nth-of-type(6){ animation-duration: 280ms; animation-delay:  30ms; }
@keyframes eqBar{
  0%   { transform: scaleY(.35); }
  100% { transform: scaleY(1.8); }
}
.tile.is-active .bot-svg .b-chest-light{
  animation: chestBlink 1.4s ease-out infinite;
}
@keyframes chestBlink{
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* idle bob for everyone */
.tile .char-anim{
  animation: idleBob 5s ease-in-out infinite;
}
@keyframes idleBob{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* ── Higher-fidelity human ── */
.human-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 20%, color-mix(in oklab, var(--c) 14%, transparent), transparent 70%),
    linear-gradient(170deg, #2c2e36, #1b1d23);
}
/* skin & shading */
.human-svg .h-skin       { fill: var(--skin); }
.human-svg .h-skin-shade { fill: var(--skin-shade); }
.human-svg .h-blush      { fill: color-mix(in oklab, var(--skin) 65%, #c75050 35%); }
/* hair */
.human-svg .h-hair       { fill: var(--hair-c); }
.human-svg .h-hair-back  { fill: color-mix(in oklab, var(--hair-c) 88%, #000 12%); }
.human-svg .h-hair-shine { fill: color-mix(in oklab, var(--hair-c) 65%, #fff 35%); opacity: .18; }
/* shirt */
.human-svg .h-shirt        { fill: var(--shirt); }
.human-svg .h-shirt-shade  { fill: color-mix(in oklab, var(--shirt) 70%, #000 30%); opacity: .55; }
.human-svg .h-shirt-collar { fill: color-mix(in oklab, var(--shirt) 84%, #fff 16%); }
/* brows */
.human-svg .h-brow{ stroke: var(--hair-c); stroke-width: 1.6; stroke-linecap: round; fill: none; transition: transform .3s var(--ease-out); transform-box: fill-box; transform-origin: center; }
/* eyes */
.human-svg .h-eye-white { fill: #fafaf5; }
.human-svg .h-iris      { fill: #4a2d1c; }
.human-svg .h-pupil     { fill: #100806; }
.human-svg .h-eye-spec  { fill: #ffffff; }
.human-svg .h-blink{
  fill: var(--skin);
  transform-origin: center;
  transform-box: fill-box;
  opacity: 0;
  animation: blinkH 5.5s ease-in-out infinite;
}
.human-svg .h-blink:nth-of-type(2){ animation-delay: .04s; }
@keyframes blinkH{
  0%, 92%, 100% { opacity: 0; transform: scaleY(0); }
  94%, 96%      { opacity: 1; transform: scaleY(1); }
}
/* offset second human's blink rhythm */
.tile[data-id="marcus"] .human-svg .h-blink{ animation-duration: 7s; animation-delay: 1.5s; }
.tile[data-id="priya"]  .human-svg .h-blink{ animation-duration: 6.2s; animation-delay: 3s; }

/* jaw + orbital shading */
.human-svg .h-jaw-shadow{ fill: var(--skin-shade); }
.human-svg .h-orbital   { fill: var(--skin-shade); opacity: .14; }
/* lid + lash */
.human-svg .h-eye-lid       { stroke: #2a1410; stroke-width: .7; stroke-linecap: round; fill: none; }
.human-svg .h-eye-lash-lower{ stroke: color-mix(in oklab, var(--skin-shade) 65%, #2a1410 35%); stroke-width: .35; stroke-linecap: round; fill: none; opacity:.7; }
.human-svg .h-eye-lash      { stroke: #1a0a08; stroke-width: .55; stroke-linecap: round; fill: none; }
/* nose */
.human-svg .h-nose-bridge { fill: color-mix(in oklab, var(--skin) 60%, #fff 40%); }
.human-svg .h-nose-side   { fill: var(--skin-shade); }
.human-svg .h-nose-tip    { fill: color-mix(in oklab, var(--skin) 70%, #fff 30%); }
.human-svg .h-nostril     { fill: color-mix(in oklab, var(--skin-shade) 50%, #1a0a08 50%); }
/* philtrum */
.human-svg .h-philtrum    { stroke: var(--skin-shade); stroke-width: .35; fill: none; stroke-linecap: round; }
/* mouth */
.human-svg .h-lip-upper{ fill: color-mix(in oklab, var(--skin) 45%, #823a2c 55%); }
.human-svg .h-lip-lower{ fill: color-mix(in oklab, var(--skin) 50%, #9a4838 50%); }
.human-svg .h-lip-hl   { fill: #fff; }
.human-svg .h-lip-line { stroke: color-mix(in oklab, var(--skin-shade) 50%, #2a1410 50%); stroke-width: .35; fill: none; stroke-linecap: round; }
/* texture for Marcus */
.human-svg .h-hair-tex { fill: color-mix(in oklab, var(--hair-c) 60%, #fff 40%); opacity: .35; }
.human-svg .h-stubble  { fill: var(--hair-c); opacity: .22; }
.human-svg .h-mouth-open{
  fill: #2a1310;
  opacity: 0;
  transform-box: fill-box; transform-origin: center;
}

/* speaking state */
.tile.is-active .human-svg .h-lip-upper,
.tile.is-active .human-svg .h-lip-lower{ opacity: .55; }
.tile.is-active .human-svg .h-mouth-open{
  animation: speakOpen .28s ease-in-out infinite alternate;
}
.tile.is-active .human-svg .h-brow{
  transform: translateY(-.6px);
}
@keyframes speakOpen{
  0%   { opacity: .65; transform: scaleY(.55) scaleX(.92); }
  100% { opacity: 1;   transform: scaleY(1.25) scaleX(1.08); }
}

/* ─────────────────────────────────────────────────────────────
   Caption strip
   ───────────────────────────────────────────────────────────── */
.caption{
  margin-top: clamp(18px, 2.4vw, 24px);
  display:flex; align-items:flex-start; gap: 12px;
  text-align:left;
  background: var(--surface);
  border:1px solid var(--hair);
  border-radius: 12px;
  padding: 12px 16px 14px;
  box-shadow: var(--surface-shadow);
  min-height: 56px;
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.caption.is-leaving{ opacity: 0; transform: translateY(-3px); }
.caption.is-entering{ opacity: 0; transform: translateY(6px); }
.cap-avatar{
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(60% 60% at 50% 35%, color-mix(in oklab, var(--c) 28%, transparent), transparent 70%),
    linear-gradient(165deg, color-mix(in oklab, var(--c) 14%, #1a1c22), color-mix(in oklab, var(--c) 6%, #14161b));
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, #000 45%),
    inset 0 1px 0 rgba(255,255,255,.06);
  margin-top: 1px;
}
.cap-avatar-inner{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.cap-avatar-inner svg{
  width: 100%;
  height: 100%;
  display: block;
}
.cap-text{ display:flex; flex-direction:column; gap: 2px; min-width: 0; }
.cap-name{
  font-family:"Geist Mono", monospace;
  font-size: 11px; letter-spacing:.04em; text-transform: uppercase;
  color: var(--c, var(--ink));
}
.cap-msg{
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Tagline + footer */
.tagline{
  margin-top: clamp(40px, 5vw, 56px);
  font-size: clamp(13px, 1.35vw, 15px);
  color: var(--muted); letter-spacing: .01em;
  opacity: 0; animation: rise 800ms var(--ease-out) 1500ms forwards;
}
footer{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding: clamp(20px, 3vw, 28px) clamp(20px, 4vw, 44px);
  font-family:"Geist Mono", ui-monospace, monospace;
  font-size:12px; color:var(--muted);
  border-top:1px solid var(--hair);
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  backdrop-filter: blur(6px);
}
footer a{
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--hair); padding-bottom: 1px;
  transition: border-color .25s var(--ease-out), color .25s var(--ease-out);
}
footer a:hover{ border-color: var(--ink); }
footer a:focus-visible{ outline:1px solid var(--ink); outline-offset:3px; border-radius:2px; }
footer .right{ display:flex; align-items:center; gap:10px; }
footer .arrow{ display:inline-block; transition: transform .25s var(--ease-out); }
footer a:hover .arrow{ transform: translate(2px,-2px); }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .grid-tiles{ grid-template-columns: repeat(2, 1fr); }
  .wordmark{ font-size: 16vw; letter-spacing:-0.05em; }
}
@media (max-width: 380px){
  .namestrip .sub{ display:none; }
}
@media (max-width: 540px){
  footer{ flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 24px; }
}
@media (max-width: 360px){
  header{ padding: 16px; }
  header .badge{ display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .logo-mark, .logo-bulb-glow, .logo-dot { /* legacy: now unused */ }
  .wordmark .tld{ opacity:1; transform:none; }
  .wd{ opacity:1; transform:none; animation: none; }
  .wordmark .ch{ transform:none; opacity:1; filter:none; }
  .room, .tagline{ opacity:1; transform:none; }
  .tile.is-active{ transform: none; }
  .tile.is-active .bot-svg .b-bar{ animation: none; transform: none; }
  .tile.is-active .human-svg .h-mouth-open{ animation: none; opacity: 1; transform: none; }
  .tile.is-active .bot-svg .b-eye-aura,
  .tile.is-active .bot-svg .b-chest-light{ animation: none; }
  .human-svg .h-blink{ animation: none; }
  .tile .char-anim{ animation: none; }
  .badge .dot{ animation: none; }
  .tile.is-active .mic{ animation: none; }
}

@media print{
  .ambient, .theme-toggle, .badge { display:none; }
  body{ background:#fff; color:#000; }
}