/* ---------- hero ---------- */
  .hero{position:relative; padding-top:clamp(48px,8vw,90px); padding-bottom:var(--section)}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
  @media (max-width:900px){.hero-grid{grid-template-columns:1fr; gap:48px}}
  .hero h1{margin:20px 0 0}
  .hero .lead{margin-top:22px; max-width:44ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px}
  .hero-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(255,255,255,.02)}
  .hero-strip-in{display:flex; gap:20px 40px; align-items:center; flex-wrap:wrap; padding-block:16px}
  .hero-strip .whatis{margin:0; flex:1 1 320px; font-size:.92rem}
  .hero-strip-nudges{display:flex; flex-direction:column; gap:8px; flex:1 1 320px}
  .hero-strip .nudge{margin:0}
  .nudge{margin-top:18px; font-size:.92rem; color:var(--muted); display:flex; align-items:center; gap:8px}
  .nudge svg{color:var(--accent)}
  .whatis{margin-top:30px; padding-top:24px; border-top:1px solid var(--line); font-size:.98rem; color:var(--fg-2); max-width:42ch}
  .whatis b{color:var(--fg); font-weight:600}

  /* hero visual: rings + conversation card */
  .stage{position:relative; display:flex; justify-content:center; align-items:center; min-height:430px}
  .rings{position:absolute; inset:0; display:grid; place-items:center; z-index:0}
  .rings span{position:absolute; border:1.5px solid rgba(198,242,78,.5); border-radius:50%; width:120px; height:120px; opacity:0; animation:ring 3.4s ease-out infinite}
  .rings span:nth-child(2){animation-delay:1.13s}
  .rings span:nth-child(3){animation-delay:2.26s}
  @keyframes ring{0%{transform:scale(.6);opacity:.55}80%{opacity:0}100%{transform:scale(3.0);opacity:0}}

  .demo{
    position:relative; z-index:1; width:min(380px,100%);
    background:linear-gradient(180deg,var(--surface-2),var(--surface));
    border:1px solid var(--line-strong); border-radius:var(--r-lg);
    box-shadow:var(--shadow); padding:18px; overflow:hidden;
  }
  .demo-head{display:flex; align-items:center; gap:11px; padding:4px 6px 16px; border-bottom:1px solid var(--line); margin-bottom:16px}
  .demo-head .av{width:34px;height:34px;border-radius:9px;background:var(--accent);display:grid;place-items:center;flex:none}
  .demo-head .meta{line-height:1.25}
  .demo-head .meta b{font-size:.95rem}
  .demo-head .status{font-size:.78rem;color:var(--accent);display:flex;align-items:center;gap:6px}
  .demo-head .status .dot{width:7px;height:7px}
  .thread{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px}
  .msg{max-width:84%; padding:11px 15px; border-radius:16px; font-size:.95rem; line-height:1.45}
  .msg.you{align-self:flex-end; background:var(--accent); color:var(--accent-ink); border-bottom-right-radius:5px; font-weight:500}
  .msg.ryn{align-self:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--fg-2)}
  .msg.result{color:var(--fg); font-weight:600; border-color:rgba(198,242,78,.4); background:rgba(198,242,78,.08)}
  .result-top{display:flex; align-items:center; gap:9px}
  .result-top svg{color:var(--accent); flex:none}
  .result-meta{display:flex; align-items:center; gap:14px; margin-top:10px; padding-top:9px; border-top:1px solid rgba(198,242,78,.22)}
  .vbadge{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--accent)}
  .transcript{display:inline-flex; align-items:center; gap:5px; font-size:.76rem; color:var(--muted); font-weight:500}
  .vbadge svg,.transcript svg{flex:none}
  .typing{display:inline-flex; gap:4px; align-items:center; height:20px}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);display:inline-block;animation:blink 1.4s infinite both}
  .typing i:nth-child(2){animation-delay:.2s}
  .typing i:nth-child(3){animation-delay:.4s}
  @keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
  /* staged reveal of the magic moment */
  .msg.reveal{opacity:0; animation:popin .5s ease forwards}
  .msg.reveal.r2{animation-delay:1.1s}
  .msg.reveal.r3{animation-delay:2.5s}
  .step-typing.reveal{animation-delay:1.1s}
  @keyframes popin{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}