/* Public landing page (templates/landing.html).
   Ported from mednovo.uz/styles.css so the product page matches the parent
   site; self-contained — the app's Tailwind/app.css are NOT loaded here. */

:root {
  --teal-900: #062a2c;
  --teal-800: #0b3b3f;
  --teal-700: #0f5c5e;
  --teal-600: #0f766e;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-300: #5eead4;
  --teal-100: #ccfbf1;
  --teal-50: #f0fdfa;

  --ink: #10201f;
  --muted: #55706d;
  --line: #d9ebe8;
  --bg: #ffffff;
  --tint: #f4faf9;

  --wrap: 68rem;
  --radius: 18px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-x: hidden;
}

a { color: var(--teal-600); text-decoration: none; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); font-weight: 700; margin-bottom: 0.75rem; }
h3 { font-size: 1.25rem; font-weight: 650; }
h4 { font-size: 1.0625rem; font-weight: 600; margin-bottom: 0.375rem; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.wrap--narrow { max-width: 46rem; }

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-600);
}
.section--dark .eyebrow, .hero .eyebrow { color: var(--teal-300); }

.lead { font-size: 1.125rem; color: rgba(255,255,255,.78); max-width: 38rem; }
.lead--dark { color: var(--muted); }

/* ---------- header ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s;
}
.top.is-stuck { border-color: var(--line); }
.top__in { display: flex; align-items: center; gap: 1rem; height: 4rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--ink); font-weight: 700; font-size: 1.05rem;
}
.brand__mark { width: 28px; height: 28px; color: var(--teal-600); }
.brand__by { font-weight: 500; font-size: .8125rem; color: var(--muted); margin-left: .1rem; }
@media (max-width: 479px) { .brand__by { display: none; } }

.nav { display: none; gap: 1.5rem; margin-left: 1.5rem; }
.nav a { color: var(--muted); font-weight: 500; font-size: 0.9375rem; transition: color .2s; }
.nav a:hover { color: var(--ink); }
@media (min-width: 820px) { .nav { display: flex; } }

.top__right { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.lang { display: flex; gap: 2px; background: var(--tint); padding: 3px; border-radius: 999px; border: 1px solid var(--line); margin: 0; }
.lang__btn {
  border: 0; background: none; cursor: pointer;
  font-size: 0.8125rem; font-weight: 600; color: var(--muted);
  padding: 0.3rem 0.65rem; border-radius: 999px;
  transition: background .2s, color .2s;
}
.lang__btn[aria-current] { background: var(--teal-600); color: #fff; }
.lang__btn:not([aria-current]):hover { color: var(--ink); }
.top .btn { padding: .55rem 1rem; font-size: .9375rem; }
@media (max-width: 479px) { .top .btn { padding: .5rem .8rem; font-size: .875rem; } }

/* ---------- hero ---------- */
.hero {
  position: relative;
  background: var(--teal-900);
  color: #fff;
  overflow: hidden;
  padding: 4.5rem 0 5rem;
}
.hero__bg { position: absolute; inset: 0; pointer-events: none; will-change: transform; transition: transform .6s var(--ease); }
.grid { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  animation: drift 18s ease-in-out infinite alternate;
}
.orb--1 { width: 34rem; height: 34rem; left: -12rem; top: -10rem; background: var(--teal-600); }
.orb--2 { width: 26rem; height: 26rem; right: -8rem; top: 20%; background: var(--teal-500); animation-duration: 22s; animation-delay: -6s; }
.orb--3 { width: 20rem; height: 20rem; left: 30%; bottom: -12rem; background: var(--teal-700); animation-duration: 26s; animation-delay: -12s; }
@keyframes drift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(3rem, -2rem, 0) scale(1.12); }
}

.hero__in { position: relative; display: grid; gap: 2.5rem; }
@media (min-width: 900px) {
  .hero { padding: 6rem 0 7rem; }
  .hero__in { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 3rem; }
}
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem);
  font-weight: 700;
  margin-bottom: 1.1rem;
  letter-spacing: -0.025em;
}
.hero h1 em { font-style: normal; color: var(--teal-300); }
.hero .lead { margin-bottom: 1.75rem; }
.hero__note { margin-top: 1rem; font-size: .9375rem; color: rgba(255,255,255,.6); }
.hero__note a { color: var(--teal-300); font-weight: 600; }

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--teal-600); color: #fff;
  padding: 0.85rem 1.4rem; border-radius: 999px; font-weight: 600;
  border: 0; cursor: pointer;
  transition: transform .25s var(--ease), background .2s, box-shadow .25s;
  box-shadow: 0 10px 24px -14px rgba(15,118,110,.8);
}
.btn:hover { transform: translateY(-2px); background: var(--teal-700); }
.btn--light { background: #fff; color: var(--teal-900); box-shadow: 0 10px 28px -14px rgba(0,0,0,.6); }
.btn--light:hover { background: var(--teal-100); }
.btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: none; }
.btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
.btn--outline { background: transparent; color: var(--teal-700); border: 1px solid var(--teal-300); box-shadow: none; }
.btn--outline:hover { background: var(--teal-50); }

/* ---------- sections ---------- */
.section { padding: 4.5rem 0; }
@media (min-width: 900px) { .section { padding: 6rem 0; } }
.section--tint { background: var(--tint); }
.section--dark { background: var(--teal-800); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--dark p { color: rgba(255,255,255,.8); }
.section--dark .lead { color: rgba(255,255,255,.78); }
.section--commercial { border-top: 3px solid var(--teal-600); }

.sub { margin: 3rem 0 1.25rem; font-size: 1.375rem; }

/* benefits */
.benefits { list-style: none; margin: 1.5rem 0 1rem; padding: 0; display: grid; gap: .9rem; }
@media (min-width: 760px) { .benefits { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.benefits li { border-left: 3px solid var(--teal-500); padding-left: .9rem; }
.benefits strong { display: block; font-weight: 650; margin-bottom: .15rem; }
.benefits span { color: var(--muted); font-size: .9375rem; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; position: relative; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.steps li { display: flex; gap: 0.9rem; align-items: flex-start; }
.step__n {
  flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; position: relative; z-index: 1;
  background: var(--teal-600); color: #fff; font-weight: 700; font-size: .9rem;
  box-shadow: 0 0 0 6px var(--tint);
}
.steps strong { display: block; margin-bottom: .2rem; }
.steps p { color: var(--muted); font-size: 0.9375rem; }
@media (min-width: 760px) {
  .steps::before {
    content: ""; position: absolute; left: 1rem; right: 1rem; top: 1rem; height: 2px;
    background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
    transform: scaleX(0); transform-origin: left;
    transition: transform 1.2s var(--ease) .3s;
  }
  .steps.in::before { transform: scaleX(1); }
  .steps li { position: relative; flex-direction: column; gap: 1rem; }
}

/* ---------- feature showcases (animated scenes) ---------- */
.shows { display: grid; gap: 3.5rem; margin-top: 3rem; }
@media (min-width: 900px) { .shows { gap: 5rem; } }
.show { display: grid; gap: 1.5rem; align-items: center; }
@media (min-width: 820px) {
  .show { grid-template-columns: 1fr 1fr; gap: 3rem; }
  .show:nth-child(even) .show__text { order: 2; }
}
.show__text { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.show.in .show__text { opacity: 1; transform: none; }
.show__n { display: inline-block; font-size: .8125rem; font-weight: 700; letter-spacing: .1em; color: var(--teal-600); padding: .1rem .5rem; border-radius: 6px; background: var(--teal-100); margin-bottom: .75rem; }
.show__text h3 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-bottom: .5rem; }
.show__text p { color: var(--muted); max-width: 30rem; }

.scene {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem;
  box-shadow: 0 30px 60px -40px rgba(6,42,44,.3); min-height: 15rem;
  transform: translateY(18px); opacity: 0; transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.show.in .scene { opacity: 1; transform: none; }

/* animation primitives: play only while the section is in view (class toggled by JS) */
.pop, .slide, .grow, .fly { opacity: 0; }
.show.in .pop  { animation: sc-pop .55s var(--ease) both; animation-delay: var(--d, 0s); }
.show.in .slide { animation: sc-slide .55s var(--ease) both; animation-delay: var(--d, 0s); }
.show.in .slide--r { animation-name: sc-slide-r; }
.show.in .grow { animation: sc-grow .6s var(--ease) both; animation-delay: var(--d, 0s); }
.show.in .fly  { animation: sc-fly .7s var(--ease) both; animation-delay: var(--d, 0s); }
@keyframes sc-pop   { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes sc-slide { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes sc-slide-r { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-grow  { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes sc-fly   { 0% { opacity: 0; transform: translate(-40px, 10px) scale(.6); } 60% { opacity: 1; transform: translate(4px, -4px) scale(1.05); } 100% { opacity: 1; transform: none; } }

/* skeleton bars + chips shared by scenes */
.sk { display: block; height: .55rem; border-radius: 999px; background: #dbe9e6; transform-origin: left; }
.sk--xs { height: .4rem; }
.sk--light { background: #eaf3f1; }
.sk--dark { background: var(--teal-700); height: .65rem; }
.sk--w40 { width: 40%; } .sk--w50 { width: 50%; } .sk--w60 { width: 60%; } .sk--w70 { width: 70%; } .sk--w80 { width: 80%; } .sk--w90 { width: 90%; }
.chip { display: inline-flex; align-items: center; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; }
.chip--teal { background: var(--teal-100); border-color: transparent; color: var(--teal-700); }
.chip--amber { background: #fef3c7; border-color: transparent; color: #92400e; }
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot--ok { background: var(--teal-500); }
.dot--run { background: #f59e0b; box-shadow: 0 0 0 0 rgba(245,158,11,.5); animation: sc-pulse 1.6s infinite; }
@keyframes sc-pulse { to { box-shadow: 0 0 0 8px rgba(245,158,11,0); } }

/* 01 records */
.rc__head { display: flex; align-items: center; gap: .9rem; }
.rc__avatar { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--teal-600); color: #fff; font-weight: 700; font-size: .9rem; }
.rc__id { flex: 1; display: grid; gap: .45rem; }
.rc__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 1.25rem; }
.rc__tl { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .8rem; }
.rc__tl li { display: flex; align-items: center; gap: .75rem; }
.rc__tl .sk { flex: 1; }
.rc__tl b { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 02 speech */
.sp__wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 2.25rem; margin-bottom: 1.1rem; }
.sp__wave b { width: 3px; border-radius: 2px; background: var(--teal-400); height: 30%; }
.show.in .scene--speech .sp__wave b { animation: bar 1.1s ease-in-out infinite; }
.sp__wave b:nth-child(3n) { animation-delay: -.35s; height: 90%; }
.sp__wave b:nth-child(3n+1) { animation-delay: -.7s; height: 55%; }
.sp__wave b:nth-child(5n) { animation-delay: -.2s; height: 75%; }
.sp__bubbles { display: grid; gap: .7rem; }
.bub { position: relative; max-width: 88%; padding: .65rem .85rem; border-radius: 14px; font-size: .9375rem; line-height: 1.45; }
.bub--d { background: var(--teal-100); color: var(--teal-900); border-bottom-left-radius: 4px; justify-self: start; }
.bub--p { background: #eef2f1; color: var(--ink); border-bottom-right-radius: 4px; justify-self: end; }
.bub__who { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .15rem; }
.bub--d .bub__who { color: var(--teal-700); }
.lang-chip { position: absolute; top: -.55rem; right: .6rem; font-size: .65rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; background: var(--teal-600); color: #fff; }
.lang-chip--ru { background: #475569; }

/* 03 files */
.fl__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1rem; }
.tile { display: grid; gap: .5rem; justify-items: center; padding: .75rem .5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.tile__ico { font-style: normal; font-size: .65rem; font-weight: 700; color: #fff; padding: .35rem .45rem; border-radius: 6px; background: var(--teal-600); }
.tile__ico--pdf { background: #dc2626; } .tile__ico--img { background: #0891b2; } .tile__ico--doc { background: #2563eb; }
.tile .sk { width: 70%; }
.fl__doc { position: relative; overflow: hidden; display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; }
.fl__tag { justify-self: end; margin-bottom: .1rem; }
.fl__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--teal-500), transparent); opacity: 0; }
.show.in .fl__scan { animation: sc-scan 1.6s ease-in-out 1s 1 both; }
@keyframes sc-scan { 0% { top: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* 04 chat */
.scene--chat { display: grid; gap: .8rem; align-content: center; }
.bub--q { background: var(--teal-600); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.bub--a { background: var(--tint); border: 1px solid var(--line); justify-self: start; border-bottom-left-radius: 4px; }
.ch__src { display: inline-flex; margin-top: .5rem; }
.ch__typing { display: inline-flex; gap: 4px; padding: .6rem .8rem; border-radius: 14px; background: var(--tint); border: 1px solid var(--line); justify-self: start; }
.ch__typing b { width: 6px; height: 6px; border-radius: 50%; background: var(--teal-500); animation: sc-dots 1s infinite; }
.ch__typing b:nth-child(2) { animation-delay: .15s; } .ch__typing b:nth-child(3) { animation-delay: .3s; }
@keyframes sc-dots { 50% { opacity: .25; transform: translateY(-2px); } }
.show.in .scene--chat .ch__typing { animation: sc-pop .4s var(--ease) both, sc-hide .3s var(--ease) forwards; animation-delay: .9s, 1.9s; }
@keyframes sc-hide { to { opacity: 0; height: 0; padding: 0; margin: -.8rem 0 0; border-width: 0; } }

/* 05 export */
.scene--export { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; align-items: center; }
.ex__note { display: grid; gap: .55rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--tint); }
.ex__bar { display: block; height: .35rem; margin-top: .4rem; border-radius: 999px; background: #dbe9e6; overflow: hidden; }
.ex__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal-400), var(--teal-600)); }
.show.in .ex__bar i { animation: sc-fill 1s var(--ease) .5s both; }
@keyframes sc-fill { to { width: 100%; } }
.ex__out { display: grid; gap: .6rem; justify-items: start; }
.badge { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 10px; font-size: .8125rem; font-weight: 700; color: #fff; box-shadow: 0 10px 20px -12px rgba(6,42,44,.5); }
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: rgba(255,255,255,.55); }
.badge--doc { background: #2563eb; } .badge--pdf { background: #dc2626; } .badge--zip { background: var(--teal-700); }

/* 06 audit */
.au__roles { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.1rem; }
.role { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .7rem .3rem .3rem; border-radius: 999px; border: 1px solid var(--line); font-size: .8125rem; font-weight: 600; background: #fff; }
.role i { font-style: normal; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; color: #fff; background: var(--teal-600); }
.role--adm i { background: #7c3aed; } .role--own i { background: var(--teal-900); }
.au__log { list-style: none; margin: 0; padding: .9rem 0 0; border-top: 1px dashed var(--line); display: grid; gap: .7rem; }
.au__log li { display: flex; align-items: center; gap: .75rem; }
.au__log svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--teal-600); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au__log .sk { flex: 1; }
.au__log b { font-size: .75rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

/* data residency columns */
.cols { display: grid; gap: 1rem; }
@media (min-width: 760px) { .cols { grid-template-columns: 1fr 1fr; gap: 1.5rem; } }
.col { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.col p { color: var(--muted); font-size: 0.9875rem; }
.col__icon {
  width: 28px; height: 28px; margin-bottom: .75rem; color: var(--teal-600);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* pilot */
.pilot { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .pilot { grid-template-columns: 1.2fr 1fr; gap: 3rem; } }
.pilot__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); padding: 1.75rem;
}
.pilot__card h3 { margin-bottom: .5rem; }
.pilot__card p { font-size: .9875rem; }
.pilot__card .btn { margin-top: .5rem; }

/* contact */
.contacts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.contacts__handle { color: var(--muted); font-weight: 500; }

/* footer */
.foot { border-top: 1px solid var(--line); padding: 1.75rem 0; color: var(--muted); font-size: .875rem; }
.foot__in { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; }
.foot a { color: var(--teal-700); font-weight: 500; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.benefits .reveal:nth-child(2), .steps .reveal:nth-child(2), .feats .reveal:nth-child(2), .cols .reveal:nth-child(2) { transition-delay: .1s; }
.steps .reveal:nth-child(3), .benefits .reveal:nth-child(3), .feats .reveal:nth-child(3) { transition-delay: .2s; }

/* scroll progress line */
.progress {
  position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--teal-400), var(--teal-600));
  transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* ---------- staged demo: record -> transcribe -> note ---------- */
.demo {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  box-shadow: 0 30px 60px -40px rgba(6,42,44,.35); overflow: hidden;
}
.hero .demo { box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); border-color: rgba(255,255,255,.2); }
.demo__tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--tint); }
.demo__tab {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem .5rem; font-size: .8125rem; font-weight: 600; color: var(--muted);
  position: relative; transition: color .3s;
}
.demo__tab i {
  font-style: normal; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center;
  background: #dbe9e6; color: var(--muted); font-size: .75rem; transition: background .3s, color .3s;
}
.demo__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--teal-600); transform: scaleX(0); transition: transform .4s var(--ease); }
.demo[data-stage="1"] [data-tab="1"], .demo[data-stage="2"] [data-tab="2"], .demo[data-stage="3"] [data-tab="3"] { color: var(--ink); }
.demo[data-stage="1"] [data-tab="1"] i, .demo[data-stage="2"] [data-tab="2"] i, .demo[data-stage="3"] [data-tab="3"] i { background: var(--teal-600); color: #fff; }
.demo[data-stage="1"] [data-tab="1"]::after, .demo[data-stage="2"] [data-tab="2"]::after, .demo[data-stage="3"] [data-tab="3"]::after { transform: scaleX(1); }
.demo[data-stage="2"] [data-tab="1"] i, .demo[data-stage="3"] [data-tab="1"] i, .demo[data-stage="3"] [data-tab="2"] i { background: var(--teal-100); color: var(--teal-700); }
@media (max-width: 479px) { .demo__tab span { display: none; } }

.demo__body { position: relative; min-height: 22rem; }
@media (min-width: 760px) { .demo__body { min-height: 24rem; } }
.demo__panel {
  position: absolute; inset: 0; padding: 1.5rem; opacity: 0; transform: translateY(10px);
  transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none;
}
.demo[data-stage="1"] [data-panel="1"], .demo[data-stage="2"] [data-panel="2"], .demo[data-stage="3"] [data-panel="3"] { opacity: 1; transform: none; }
.demo__caption { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-600); margin-bottom: 1rem; }

/* stage 1 */
.demo__rec { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1rem; }
.mic { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--teal-600); display: grid; place-items: center; }
.mic svg { width: 2rem; height: 2rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mic__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--teal-500); opacity: 0; }
.demo[data-stage="1"] .mic__ring { animation: ring 2s ease-out infinite; }
.demo[data-stage="1"] .mic__ring:nth-child(2) { animation-delay: 1s; }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.1); opacity: 0; } }
.rec__wave { display: flex; align-items: center; gap: 3px; height: 2.5rem; }
.rec__wave b { width: 3px; border-radius: 2px; background: var(--teal-500); height: 30%; }
.demo[data-stage="1"] .rec__wave b { animation: bar 1.1s ease-in-out infinite; }
.rec__wave b:nth-child(3n) { animation-delay: -.35s; height: 90%; }
.rec__wave b:nth-child(3n+1) { animation-delay: -.7s; height: 55%; }
.rec__wave b:nth-child(5n) { animation-delay: -.2s; height: 75%; }
@keyframes bar { 50% { transform: scaleY(.35); } }
.rec__label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec__dot { width: 10px; height: 10px; border-radius: 50%; background: #ef6b6b; }
.demo[data-stage="1"] .rec__dot { animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.rec__hint { color: var(--muted); font-size: .9375rem; max-width: 26rem; }

/* stage 2 */
.tr { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.tr li { display: flex; gap: .6rem; align-items: baseline; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); font-size: .9875rem; }
.tr li.on { opacity: 1; transform: none; }
.tr b { flex: none; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 6px; }
.tr__d b { background: var(--teal-100); color: var(--teal-700); }
.tr__p b { background: #eef2f1; color: var(--muted); }
.tr span::after { content: "\258D"; color: var(--teal-500); opacity: 0; }
.tr li.typing span::after { opacity: 1; animation: blink .8s infinite; }

/* stage 3 */
.note { margin: 0; display: grid; gap: .8rem; }
.note > div { display: grid; grid-template-columns: 7rem 1fr; gap: .75rem; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s var(--ease); }
.note > div.on { opacity: 1; transform: none; }
.note dt { font-size: .8125rem; font-weight: 600; color: var(--teal-700); padding-top: .15rem; }
.note dd { margin: 0; font-size: .9875rem; min-height: 1.4em; }
.note dd::after { content: "\258D"; color: var(--teal-500); opacity: 0; }
.note > div.typing dd::after { opacity: 1; animation: blink .8s infinite; }
.note__done { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-weight: 600; color: var(--teal-700); opacity: 0; transform: scale(.9); transition: opacity .4s, transform .4s var(--ease); }
.note__done.on { opacity: 1; transform: none; }
.note__done svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: var(--teal-600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 479px) { .note > div { grid-template-columns: 1fr; gap: .15rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .orb { animation: none !important; }
  .steps::before { transition: none; }
  .hero__bg { transition: none; }
  .demo__panel, .tr li, .note > div, .note__done { transition: none; }
  .mic__ring, .rec__wave b, .rec__dot { animation: none !important; }
  .show__text, .scene { opacity: 1; transform: none; transition: none; }
  .pop, .slide, .grow, .fly, .ch__typing, .sp__wave b, .dot--run { opacity: 1; animation: none !important; }
  .ch__typing { display: none; }
  .ex__bar i { width: 100%; }
}