/* ==========================================================================
   AI CALLING — /ai-calling   (design: assets/html/teamian-ai-calling-v3.html)
   Namespace: everything is scoped under .tac. Loaded via $pageStyles in
   ai-calling.php, paired with assets/js/teamian-ai-calling.js.

   The mock is a standalone page with bare, generic class names (.hero, .btn,
   .label, .wrap, .step, .stat, .feature, .reveal…), so it is scoped rather
   than renamed — same approach as assets/css/teamian-whatsapp.css. What
   changed from the mock, and why:

   1. Its :root palette now sits on .tac. On :root the mock's tokens would have
      redefined --ink, --line and --muted site-wide (its #0a0a0a/#eaeaea vs
      style.css's own values), restyling the shared header and footer.
   2. The `*`, `html` and `button` resets are gone — Tailwind's preflight and
      style.css already own margin/padding/box-sizing and scroll-behavior.
      `a{color:inherit;text-decoration:none}` is kept but scoped, so it cannot
      outrank the shared nav/footer link styles.
   3. .reveal is renamed .tac-rv. main.js runs its own IntersectionObserver
      over every .reveal on the page and toggles .is-visible; leaving the
      mock's name would have had two observers driving the same elements with
      two different state classes.
   4. Its `.in` state class became `.is-in` on .tac-rv, .split and .side-card,
      to match the .is-visible/.is-in convention used elsewhere.
   5. Elements that start hidden do so only under html.tac-js (set inline at
      the top of ai-calling.php, before any .tac element is parsed) — a
      stylesheet that loads without its script shows a complete page rather
      than a blank one. Same failsafe as teamian-whatsapp.css.
   6. .hero clears the 76px fixed nav; the mock had no site chrome above it.
   7. The cursor blob drops from z-index 9999 to 40 so it passes under the
      fixed nav and the shared lead-form modal instead of over them. It is
      pointer-events:none either way, so nothing becomes unclickable.
   ========================================================================== */

.tac{
  --bg:#ffffff; --ink:#0a0a0a; --ink-2:#171717;
  --muted:#6b6b6b; --muted-2:#9a9a9a;
  --line:#eaeaea; --line-2:#f2f2f2; --panel:#fafafa;
  --teal:#0d9488; --teal-2:#14b8a6; --teal-3:#5eead4; --teal-4:#99f6e4;
  --teal-glow:rgba(20,184,166,.35); --teal-highlight:#99f6e4;
  --shadow-md:0 4px 24px rgba(0,0,0,.06),0 1px 3px rgba(0,0,0,.04);
  --shadow-lg:0 24px 60px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);
}
.tac{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;line-height:1.5;}
.tac img,.tac svg{display:block;max-width:100%;}
.tac a{color:inherit;text-decoration:none;}
.tac button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.tac ::selection{background:var(--teal-highlight);color:var(--ink);}

@media (prefers-reduced-motion: reduce){
  .tac *,.tac *::before,.tac *::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
}

.tac .wrap{width:100%;padding:0 56px;position:relative;margin:0 auto;max-width:1600px;}
@media (max-width:720px){.tac .wrap{padding:0 20px;}}

/* ---------- Custom cursor blob (desktop only) ---------- */
.tac .cursor-blob{position:fixed;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--teal);pointer-events:none;z-index:40;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s;opacity:0;}
.tac .cursor-blob.on{opacity:.7;}
.tac .cursor-blob.hover-lg{width:56px;height:56px;opacity:.9;}
@media (hover: none){.tac .cursor-blob{display:none;}}

/* ---------- Word / letter reveal ---------- */
.tac .split{display:inline;}
.tac .word{display:inline-block;overflow:hidden;vertical-align:top;line-height:1.05;}
.tac-js .tac .word .inner{display:inline-block;transform:translateY(110%);transition:transform .9s cubic-bezier(.2,.9,.2,1);}
.tac-js .tac .split.is-in .word .inner{transform:translateY(0);}
.tac .split .word:nth-child(1) .inner{transition-delay:.05s;}
.tac .split .word:nth-child(2) .inner{transition-delay:.15s;}
.tac .split .word:nth-child(3) .inner{transition-delay:.25s;}
.tac .split .word:nth-child(4) .inner{transition-delay:.35s;}
.tac .split .word:nth-child(5) .inner{transition-delay:.45s;}
.tac .split .word:nth-child(6) .inner{transition-delay:.55s;}
.tac .split .word:nth-child(7) .inner{transition-delay:.65s;}

.tac .label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:8px;}
.tac .label::before{content:"";width:8px;height:8px;background:var(--teal);display:inline-block;animation:label-pulse 2s ease-in-out infinite;}
.tac .label.plain::before{display:none;}
@keyframes label-pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(.7);opacity:.5;}}

.tac .section-head{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid var(--line);margin-bottom:60px;}

.tac .btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:500;font-size:14px;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;overflow:hidden;isolation:isolate;}
.tac .btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.25) 50%,transparent 70%);transform:translateX(-100%);transition:transform .8s ease;z-index:-1;}
.tac .btn:hover::after{transform:translateX(100%);}
.tac .btn-primary{background:var(--ink);color:#fff;}
.tac .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.22);}
.tac .btn-teal{background:var(--teal);color:#fff;}
.tac .btn-teal:hover{transform:translateY(-2px);background:var(--teal-2);box-shadow:0 12px 32px rgba(13,148,136,.35);}
.tac .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.tac .btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px);}

.tac .hl{background:linear-gradient(180deg,transparent 55%,var(--teal-highlight) 55%);padding:0 2px;}

/* ============ HERO ============ */
.tac .hero{position:relative;min-height:100vh;padding:calc(76px + 32px) 0 100px;overflow:hidden;border-bottom:1px solid var(--line);display:flex;flex-direction:column;}
/* Ambient grid background */
.tac .hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(20,184,166,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(20,184,166,.05) 1px,transparent 1px);background-size:80px 80px;background-position:center;mask-image:radial-gradient(ellipse at center,black,transparent 70%);animation:grid-drift 30s linear infinite;pointer-events:none;}
@keyframes grid-drift{0%{background-position:0 0;}100%{background-position:80px 80px;}}

.tac .hero-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);position:relative;z-index:2;}
/* minmax(0,…) rather than a bare 1.15fr/1fr: an fr track's automatic minimum
   is min-content, and .hero-left's min-content is enormous — the language
   marquee is one nowrap row of 16 items, and the h1 sets 140px words. Left as
   plain fr, the first track measured 1893px inside a 1457px grid and pushed
   the mascot column to width 0, off the right edge of the screen. */
.tac .hero-grid{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:60px;position:relative;z-index:2;}
.tac .hero-left{position:relative;z-index:2;min-width:0;}
.tac .hero h1{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(56px,8.5vw,100px);line-height:.92;letter-spacing:-.05em;font-weight:500;color:var(--ink);}
.tac .hero h1 .accent{font-style:italic;font-weight:300;color:var(--ink);}
.tac .hero h1 .strike{position:relative;display:inline-block;}
.tac .hero h1 .strike::after{content:"";position:absolute;left:-6px;right:-6px;bottom:12%;height:24%;background:var(--teal-highlight);z-index:-1;transform:scaleX(0);transform-origin:left;animation:hl-in 1s 1.3s ease forwards;}
@keyframes hl-in{to{transform:scaleX(1);}}
.tac .hero h1 .new-badge{display:inline-block;vertical-align:middle;font-family:'Inter',sans-serif;font-size:12px;padding:4px 8px;background:var(--teal-highlight);color:var(--ink);letter-spacing:.12em;text-transform:uppercase;font-weight:700;border-radius:4px;margin-left:12px;transform:translateY(-30px);animation:badge-bob 3s ease-in-out infinite;animation-delay:1.6s;opacity:0;animation-fill-mode:forwards;}
@keyframes badge-bob{0%{opacity:0;transform:translateY(-20px) scale(.6);}20%{opacity:1;transform:translateY(-30px) scale(1);}50%{transform:translateY(-34px) scale(1);}80%{transform:translateY(-30px) scale(1);}100%{opacity:1;transform:translateY(-30px) scale(1);}}

.tac .hero p.lede{margin-top:32px;font-size:18px;line-height:1.55;color:var(--muted);max-width:520px;opacity:0;transform:translateY(20px);animation:lede-in .8s .8s ease forwards;}
@keyframes lede-in{to{opacity:1;transform:translateY(0);}}
.tac .hero .cta-row{margin-top:40px;display:flex;gap:12px;flex-wrap:wrap;opacity:0;transform:translateY(20px);animation:lede-in .8s 1s ease forwards;}

.tac .hero .powered{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:10px 14px;border-radius:10px;background:#fff;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:60px;width:fit-content;opacity:0;animation:lede-in .8s 1.2s ease forwards;}
.tac .powered .dot-cluster{width:22px;height:22px;position:relative;flex:none;animation:cluster-spin 8s linear infinite;}
@keyframes cluster-spin{to{transform:rotate(360deg);}}
.tac .powered .dot-cluster i{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--ink);}
.tac .powered .dot-cluster i:nth-child(1){top:2px;left:9px;}
.tac .powered .dot-cluster i:nth-child(2){top:6px;left:15px;}
.tac .powered .dot-cluster i:nth-child(3){top:14px;left:15px;}
.tac .powered .dot-cluster i:nth-child(4){top:18px;left:9px;}
.tac .powered .dot-cluster i:nth-child(5){top:14px;left:3px;}
.tac .powered .dot-cluster i:nth-child(6){top:6px;left:3px;}
.tac .powered .dot-cluster i:nth-child(7){top:10px;left:9px;background:var(--teal);}

/* Language marquee */
.tac .lang-marquee{margin-top:24px;overflow:hidden;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);opacity:0;animation:lede-in .8s 1.4s ease forwards;}
.tac .lang-track{display:inline-flex;gap:36px;white-space:nowrap;animation:marquee 22s linear infinite;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);}
.tac .lang-track span{display:inline-flex;align-items:center;gap:36px;}
.tac .lang-track span::after{content:"·";color:var(--teal);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ============ HERO MASCOT ============
   Replaces the mock's teal orb (design: assets/html/mascot-animated.html).
   Everything the mascot owns is prefixed mas- rather than kept under the
   source file's bare names, because two of them collide here:
     · @keyframes blink — this page already defines one (opacity 1 -> .3, used
       by the dashboard live-dot and the "Recording" indicator). Keyframe names
       are global no matter how the selectors are scoped, so whichever loaded
       last would have driven both, squashing the dashboard dots vertically or
       stopping the mascot from blinking.
     · .dots — this page uses it for the chat typing indicator.
   @keyframes orb-float is deliberately kept: the orb is gone, but the
   suggestion avatar, chat avatar and side-card glow all still animate on it. */
.tac .mas-wrap{position:relative;width:100%;max-width:520px;justify-self:center;padding-bottom:34px;}
.tac .mas-stage{width:100%;}
.tac .mas-stage svg{width:100%;height:auto;display:block;overflow:visible;}

/* ---- ambient ---- */
.tac .mas-floater{animation:mas-float 4.2s ease-in-out infinite;}
@keyframes mas-float{0%,100%{transform:translateY(7px);}50%{transform:translateY(-13px);}}
.tac .mas-tilt{transform-box:fill-box;transform-origin:50% 88%;animation:mas-tilt 6.8s ease-in-out infinite;}
@keyframes mas-tilt{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.tac .mas-shadow{transform-box:fill-box;transform-origin:center;animation:mas-shade 4.2s ease-in-out infinite;}
@keyframes mas-shade{0%,100%{transform:scale(1.05);opacity:.15;}50%{transform:scale(.84);opacity:.07;}}
.tac .mas-band-sheen{animation:mas-sheen 5.5s ease-in-out infinite;}
@keyframes mas-sheen{0%,72%,100%{opacity:0;}84%{opacity:.5;}}

/* ---- eyes ---- */
.tac .mas-eye{transform-box:fill-box;transform-origin:center;animation:mas-blink 6.4s ease-in-out infinite;}
.tac .mas-eye--r{animation-delay:.05s;}
@keyframes mas-blink{
  0%,44%{transform:scaleY(1);}
  46%{transform:scaleY(.06);}
  48%,88%{transform:scaleY(1);}
  90%{transform:scaleY(.06);}
  92%{transform:scaleY(1);}
  94%{transform:scaleY(.06);}
  96%,100%{transform:scaleY(1);}
}
.tac .mas-eyes-dart{transform-box:fill-box;transform-origin:center;animation:mas-dart 9s ease-in-out infinite;}
@keyframes mas-dart{
  0%,18%{transform:translate(0,0);}
  26%,42%{transform:translate(-7px,3px);}
  52%,68%{transform:translate(8px,-3px);}
  78%,100%{transform:translate(0,0);}
}
.tac .mas-eyes-track{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .25s ease-out;}
.tac svg.mas-tracking .mas-eyes-dart{animation:none;}
.tac .mas-mouth{transform-box:fill-box;transform-origin:center;transition:transform .3s ease;}

/* ---- glance ---- */
.tac .mas-mode-glance .mas-eyes-dart{animation:mas-glance 2.6s ease-in-out infinite;}
@keyframes mas-glance{
  0%{transform:translate(0,0);}
  22%,48%{transform:translate(10px,-4px);}
  64%,86%{transform:translate(-9px,-2px);}
  100%{transform:translate(0,0);}
}

/* ---- talking ---- */
.tac .mas-waves circle{opacity:0;}
.tac .mas-mode-talking .mas-waves circle{transform-box:fill-box;transform-origin:center;animation:mas-ring 1.5s ease-out infinite;}
.tac .mas-mode-talking .mas-waves circle:nth-child(2){animation-delay:.5s;}
.tac .mas-mode-talking .mas-waves circle:nth-child(3){animation-delay:1s;}
@keyframes mas-ring{0%{transform:scale(.28);opacity:.6;}100%{transform:scale(1.95);opacity:0;}}
.tac .mas-mode-talking .mas-mouth{animation:mas-talk .4s ease-in-out infinite alternate;}
@keyframes mas-talk{from{transform:scaleY(.72);}to{transform:scaleY(1.8) translateY(1px);}}
.tac .mas-mode-talking .mas-tilt{animation:mas-nod 1.15s ease-in-out infinite;}
@keyframes mas-nod{0%,100%{transform:rotate(-1.2deg);}50%{transform:rotate(1.2deg) translateY(-3px);}}
.tac .mas-mode-talking .mas-mic-tip{animation:mas-mic-pulse .4s ease-in-out infinite alternate;}
@keyframes mas-mic-pulse{from{transform:scale(1);}to{transform:scale(1.13);}}

/* ---- thinking ---- */
.tac .mas-dots circle{opacity:0;transform-box:fill-box;transform-origin:center;}
.tac .mas-mode-thinking .mas-dots circle{animation:mas-pop 1.8s ease-in-out infinite;}
.tac .mas-mode-thinking .mas-dots circle:nth-child(2){animation-delay:.22s;}
.tac .mas-mode-thinking .mas-dots circle:nth-child(3){animation-delay:.44s;}
@keyframes mas-pop{
  0%{opacity:0;transform:scale(.4) translateY(7px);}
  30%,55%{opacity:1;transform:scale(1) translateY(0);}
  85%,100%{opacity:0;transform:scale(.85) translateY(-9px);}
}
.tac .mas-mode-thinking .mas-eyes-dart{animation:none;}
.tac .mas-mode-thinking .mas-eyes-track{transform:translate(-7px,-9px);}
.tac .mas-mode-thinking .mas-eye{animation:mas-blink-slow 4s ease-in-out infinite;}
@keyframes mas-blink-slow{0%,70%{transform:scaleY(1);}74%{transform:scaleY(.12);}78%,100%{transform:scaleY(1);}}
.tac .mas-mode-thinking .mas-mouth{transform:scaleY(.34) translateX(-4px);}

/* ---- wink (one-shot) ---- */
.tac .mas-wink .mas-eye--l{animation:none;transform:scaleY(.09);}
.tac .mas-wink .mas-mouth{animation:none;transform:scaleY(1.4) scaleX(1.12);}
.tac .mas-sparks line{opacity:0;}
.tac .mas-wink .mas-sparks line{transform-box:fill-box;transform-origin:center;animation:mas-spark .8s ease-out 1;}
.tac .mas-wink .mas-sparks line:nth-child(2){animation-delay:.06s;}
.tac .mas-wink .mas-sparks line:nth-child(3){animation-delay:.12s;}
@keyframes mas-spark{
  0%{opacity:0;transform:scale(.2);}
  35%{opacity:.9;transform:scale(1);}
  100%{opacity:0;transform:scale(1.55);}
}

@media (prefers-reduced-motion:reduce){
  .tac .mas-floater,.tac .mas-tilt,.tac .mas-shadow,.tac .mas-eyes-dart,
  .tac .mas-band-sheen,.tac .mas-mouth,.tac .mas-mic-tip,
  .tac .mas-dots circle,.tac .mas-waves circle,.tac .mas-sparks line{animation:none!important;}
  .tac .mas-eye{animation:mas-blink 9s ease-in-out infinite;}
}

/* Outlived the orb it is named for: the suggestion avatar, the chat avatar and
   the side-card glow all still animate on it. */
@keyframes orb-float{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-14px) scale(1.02);}}

/* Anchored to the bottom of the mascot rather than the middle of the wrapper:
   the mock centred it on the orb, which would now land squarely on the face. */
.tac .try-pill{position:absolute;left:50%;bottom:0;transform:translateX(-50%);background:var(--ink);color:#fff;display:flex;align-items:center;gap:14px;padding:10px 8px 10px 22px;border-radius:999px;box-shadow:var(--shadow-lg);animation:pill-pop 1s 1.6s cubic-bezier(.2,.9,.3,1.4) both;cursor:pointer;transition:transform .25s ease;z-index:3;}
.tac .try-pill:hover{transform:translateX(-50%) scale(1.06);}
@keyframes pill-pop{from{opacity:0;transform:translateX(-50%) scale(.85);}to{opacity:1;transform:translateX(-50%) scale(1);}}
.tac .try-pill .txt{display:flex;flex-direction:column;font-size:12px;line-height:1.25;}
.tac .try-pill .txt b{font-weight:600;font-size:14px;}
.tac .try-pill .txt span{color:#9a9a9a;}
.tac .try-pill .call-btn{width:44px;height:44px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 0 0 0 var(--teal-glow);animation:pulse-ring 2s ease-out infinite;flex:none;}
.tac .try-pill.playing .call-btn{animation:none;background:#ef4444;}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--teal-glow);}100%{box-shadow:0 0 0 22px rgba(20,184,166,0);}}

.tac .scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);display:flex;flex-direction:column;align-items:center;gap:8px;animation:scroll-bounce 2s ease-in-out infinite;z-index:2;}
@keyframes scroll-bounce{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,8px);}}

@media (max-width:1000px){
  /* minmax(0,1fr), not 1fr — same min-content blowout as the two-column rule
     above, which here overflows the phone viewport instead of the column. */
  .tac .hero-grid{grid-template-columns:minmax(0,1fr);}
  /* Single column: the mascot moves under the copy and shrinks. The pill is
     already centred by the base rule, so it needs no override here. */
  .tac .mas-wrap{max-width:360px;margin:20px auto 0;}
}

/* ============ VOICE SAMPLES ============ */
.tac .voices{padding:120px 0;position:relative;background:var(--bg);}
.tac .voices .title-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:end;}
.tac .voices h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;}
.tac .voices h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .voices .title-row p{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;}
.tac .tab-bar{position:relative;display:inline-flex;gap:4px;padding:4px;background:var(--panel);border-radius:999px;border:1px solid var(--line);margin-bottom:40px;}
.tac .tab-bar button{position:relative;padding:10px 22px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:color .25s ease;z-index:2;}
.tac .tab-bar button.active{color:#fff;}
.tac .tab-bar .tab-thumb{position:absolute;top:4px;bottom:4px;background:var(--ink);border-radius:999px;transition:left .35s cubic-bezier(.2,.9,.3,1.2),width .35s cubic-bezier(.2,.9,.3,1.2);z-index:1;}
.tac .tab-bar button:hover:not(.active){color:var(--ink);}

.tac .voice-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
@media (max-width:1100px){.tac .voice-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tac .voice-grid{grid-template-columns:1fr;}}
.tac .voice-card{border:1px solid var(--line);border-radius:14px;padding:24px;background:#fff;display:flex;flex-direction:column;gap:18px;transition:transform .4s cubic-bezier(.2,.9,.3,1),box-shadow .4s,border-color .4s;position:relative;overflow:hidden;min-height:260px;}
.tac .voice-card{animation:card-breathe 5s ease-in-out infinite;}
/* The industry tabs toggle the `hidden` attribute rather than an inline style.
   Needed because the author `display:flex` above outranks the UA sheet's
   [hidden]{display:none}, which would leave "hidden" cards on screen. */
.tac .voice-card[hidden]{display:none;}
.tac .voice-card:nth-child(2){animation-delay:.5s;}
.tac .voice-card:nth-child(3){animation-delay:1s;}
.tac .voice-card:nth-child(4){animation-delay:1.5s;}
@keyframes card-breathe{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.tac .voice-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--teal-2);animation-play-state:paused;}
.tac .voice-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,var(--teal-4) 200%);opacity:0;transition:opacity .4s;}
.tac .voice-card:hover::before{opacity:.18;}
.tac .voice-card>*{position:relative;z-index:1;}
.tac .voice-card .top{display:flex;justify-content:space-between;align-items:center;}
.tac .lang-chip{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500;}
.tac .lang-chip::before{content:"";width:6px;height:6px;background:var(--teal);animation:label-pulse 2s ease-in-out infinite;}
.tac .industry-chip{font-size:10px;padding:4px 8px;background:var(--panel);border-radius:999px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:500;transition:transform .3s;}
.tac .voice-card:hover .industry-chip{transform:translateX(4px);}
.tac .voice-card h3{font-family:'Inter Tight','Inter',sans-serif;font-size:22px;font-weight:500;letter-spacing:-.02em;line-height:1.15;}
.tac .voice-card .use{font-size:13px;color:var(--muted);line-height:1.5;flex:1;}
.tac .player{display:flex;align-items:center;gap:14px;border-top:1px dashed var(--line);padding-top:18px;margin-top:4px;}
.tac .play-btn{position:relative;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;transition:all .2s ease;overflow:hidden;}
.tac .play-btn.playing{background:var(--teal);}
.tac .play-btn:hover{transform:scale(1.08);}
.tac .play-btn::after{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);opacity:0;}
.tac .play-btn.ripple::after{animation:ripple .6s ease-out;}
@keyframes ripple{0%{transform:scale(0);opacity:.5;}100%{transform:scale(2.5);opacity:0;}}
.tac .wave{flex:1;display:flex;align-items:center;gap:3px;height:32px;}
.tac .wave span{flex:1;background:var(--ink);border-radius:999px;opacity:.25;transition:opacity .2s,background .2s;}
.tac .player.playing .wave span{animation:wave-bounce 1s ease-in-out infinite;background:var(--teal);opacity:.9;}
.tac .player.playing .wave span:nth-child(1){animation-delay:0s;}
.tac .player.playing .wave span:nth-child(2){animation-delay:.07s;}
.tac .player.playing .wave span:nth-child(3){animation-delay:.14s;}
.tac .player.playing .wave span:nth-child(4){animation-delay:.21s;}
.tac .player.playing .wave span:nth-child(5){animation-delay:.28s;}
.tac .player.playing .wave span:nth-child(6){animation-delay:.35s;}
.tac .player.playing .wave span:nth-child(7){animation-delay:.42s;}
.tac .player.playing .wave span:nth-child(8){animation-delay:.49s;}
.tac .player.playing .wave span:nth-child(9){animation-delay:.35s;}
.tac .player.playing .wave span:nth-child(10){animation-delay:.28s;}
.tac .player.playing .wave span:nth-child(11){animation-delay:.21s;}
.tac .player.playing .wave span:nth-child(12){animation-delay:.14s;}
@keyframes wave-bounce{0%,100%{height:20%;}50%{height:100%;}}
/* Idle wave shimmer */
.tac .player:not(.playing) .wave span{animation:idle-wave 4s ease-in-out infinite;}
.tac .player:not(.playing) .wave span:nth-child(1){animation-delay:0s;}
.tac .player:not(.playing) .wave span:nth-child(2){animation-delay:.15s;}
.tac .player:not(.playing) .wave span:nth-child(3){animation-delay:.3s;}
.tac .player:not(.playing) .wave span:nth-child(4){animation-delay:.45s;}
.tac .player:not(.playing) .wave span:nth-child(5){animation-delay:.6s;}
.tac .player:not(.playing) .wave span:nth-child(6){animation-delay:.75s;}
.tac .player:not(.playing) .wave span:nth-child(7){animation-delay:.9s;}
.tac .player:not(.playing) .wave span:nth-child(8){animation-delay:1.05s;}
.tac .player:not(.playing) .wave span:nth-child(9){animation-delay:.9s;}
.tac .player:not(.playing) .wave span:nth-child(10){animation-delay:.75s;}
.tac .player:not(.playing) .wave span:nth-child(11){animation-delay:.6s;}
.tac .player:not(.playing) .wave span:nth-child(12){animation-delay:.45s;}
@keyframes idle-wave{0%,100%{opacity:.15;}50%{opacity:.35;}}
.tac .wave span:nth-child(1){height:30%;}.tac .wave span:nth-child(2){height:55%;}.tac .wave span:nth-child(3){height:80%;}.tac .wave span:nth-child(4){height:60%;}.tac .wave span:nth-child(5){height:90%;}.tac .wave span:nth-child(6){height:45%;}.tac .wave span:nth-child(7){height:70%;}.tac .wave span:nth-child(8){height:100%;}.tac .wave span:nth-child(9){height:55%;}.tac .wave span:nth-child(10){height:75%;}.tac .wave span:nth-child(11){height:40%;}.tac .wave span:nth-child(12){height:60%;}
.tac .dur{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;}

/* ============ DASHBOARD ============ */
.tac .dashboard-sec{padding:120px 0;border-top:1px solid var(--line);background:var(--panel);position:relative;overflow:hidden;}
.tac .dashboard-sec .title-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:end;}
.tac .dashboard-sec h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;}
.tac .dashboard-sec h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .dashboard-sec .title-row p{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;}
.tac .dash-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-lg);padding:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;overflow:hidden;}
.tac .dash-card::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);animation:scan-line 5s ease-in-out infinite;}
@keyframes scan-line{0%{left:-100%;}50%{left:100%;}100%{left:100%;}}
.tac .dash-header{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:8px;}
.tac .dash-header .title{font-size:14px;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;}
.tac .dash-header .title::before{content:"";width:8px;height:8px;background:var(--teal);border-radius:50%;animation:blink 1.5s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
.tac .dash-header .live{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px;}
.tac .dash-header .live::before{content:"";width:6px;height:6px;background:#ef4444;border-radius:50%;animation:live-pulse 1s ease-in-out infinite;}
@keyframes live-pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}
.tac .stat{padding:16px;border-right:1px solid var(--line-2);position:relative;}
.tac .stat:last-child{border-right:0;}
.tac .stat .k{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:6px;}
.tac .stat .k::after{content:"";width:6px;height:6px;background:var(--teal);border-radius:50%;animation:blink 2s infinite;}
.tac .stat .v{font-family:'Inter Tight','Inter',sans-serif;font-size:42px;font-weight:500;letter-spacing:-.03em;line-height:1;}
.tac .stat .delta{font-size:12px;color:var(--teal);margin-top:6px;display:flex;align-items:center;gap:4px;}
.tac .stat.missed .v{color:var(--ink);}
.tac .stat.missed .delta{color:var(--muted);}
.tac .spark{margin-top:12px;height:32px;overflow:hidden;}
.tac .spark svg{width:100%;height:100%;}
.tac .spark path{fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:200;stroke-dashoffset:200;animation:draw-line 2s .3s ease forwards;}
.tac .spark path.fill{fill:url(#spark-grad);stroke:none;opacity:0;animation:fade-in 1s 2s ease forwards;}
@keyframes draw-line{to{stroke-dashoffset:0;}}
@keyframes fade-in{to{opacity:.6;}}

.tac .suggestion{grid-column:1/-1;margin-top:12px;padding:18px 20px;background:linear-gradient(90deg,rgba(20,184,166,.08),rgba(20,184,166,.02));border:1px solid rgba(20,184,166,.25);border-radius:12px;display:flex;gap:14px;align-items:flex-start;}
.tac .suggestion .avatar{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--teal-3),var(--teal));flex:none;box-shadow:0 4px 12px rgba(13,148,136,.3);animation:orb-float 4s ease-in-out infinite;}
.tac .suggestion .body{font-size:14px;line-height:1.5;color:var(--ink-2);}
.tac .suggestion .body b{color:var(--teal);font-weight:600;}
.tac .suggestion .typed{border-right:2px solid var(--teal);animation:caret 1s step-end infinite;padding-right:2px;}
.tac .suggestion .typed.done{border-right-color:transparent;animation:none;}
@keyframes caret{50%{border-right-color:transparent;}}
@media (max-width:900px){.tac .dash-card{grid-template-columns:repeat(2,1fr);}.tac .stat:nth-child(2n+1){border-right:1px solid var(--line-2);}.tac .stat:nth-child(2n){border-right:0;}.tac .stat{border-bottom:1px solid var(--line-2);}}
@media (max-width:720px){.tac .dashboard-sec .title-row{grid-template-columns:1fr;}.tac .voices .title-row{grid-template-columns:1fr;}}

/* ============ FLOW ============ */
.tac .flow{padding:120px 0;border-top:1px solid var(--line);}
.tac .flow .title-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:end;}
.tac .flow h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;}
.tac .flow h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .flow .title-row p{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;}
.tac .pipeline{position:relative;padding:60px 0;}
.tac .pipeline-track{position:absolute;top:50%;left:0;right:0;height:2px;background:var(--line);transform:translateY(-50%);overflow:hidden;}
.tac .pipeline-track::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--teal-2),var(--teal),var(--teal-2));background-size:200% 100%;animation:track-fill 6s ease-in-out infinite,track-shimmer 3s linear infinite;}
@keyframes track-fill{0%{transform:scaleX(0);transform-origin:left;}40%{transform:scaleX(1);transform-origin:left;}60%{transform:scaleX(1);transform-origin:right;}100%{transform:scaleX(0);transform-origin:right;}}
@keyframes track-shimmer{to{background-position:200% 0;}}

.tac .pipeline .dot-move{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 6px rgba(20,184,166,.15),0 0 20px var(--teal-glow);transform:translateY(-50%);animation:dot-run 6s ease-in-out infinite;}
@keyframes dot-run{0%{left:0;}45%{left:100%;}55%{left:100%;opacity:1;}60%{opacity:0;}100%{left:0;opacity:0;}}

.tac .steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:20px;}
.tac .step{background:#fff;border:1px solid var(--line);padding:20px;border-radius:12px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;z-index:1;}
.tac .step:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:var(--shadow-md);}
/* Sequential highlight sweep */
.tac .step.pulse{border-color:var(--teal);box-shadow:0 0 0 4px rgba(20,184,166,.15),0 12px 32px rgba(13,148,136,.2);transform:translateY(-4px);}
.tac .step.pulse .ico{background:var(--teal);color:#fff;}
.tac .step .n{font-size:11px;color:var(--muted);letter-spacing:.18em;text-transform:uppercase;}
.tac .step .ico{width:44px;height:44px;border-radius:12px;background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .3s,color .3s,transform .3s;}
.tac .step:hover .ico{background:var(--ink);color:#fff;transform:rotate(-8deg) scale(1.1);}
.tac .step h4{font-size:15px;font-weight:600;letter-spacing:-.01em;}
@media (max-width:900px){.tac .steps{grid-template-columns:repeat(3,1fr);}.tac .pipeline-track,.tac .pipeline .dot-move{display:none;}}
@media (max-width:600px){.tac .steps{grid-template-columns:repeat(2,1fr);}.tac .flow .title-row{grid-template-columns:1fr;}}

/* ============ FEATURES ============ */
.tac .features{padding:120px 0;border-top:1px solid var(--line);background:var(--panel);}
.tac .features .title-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:end;}
.tac .features h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;}
.tac .features h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .features .title-row p{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;}
.tac .feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.tac .feature{background:#fff;border:1px solid var(--line);padding:32px;border-radius:16px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.9,.3,1),box-shadow .4s,border-color .4s;min-height:240px;display:flex;flex-direction:column;justify-content:space-between;}
.tac .feature:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg);border-color:var(--teal-2);}
.tac .feature::after{content:"";position:absolute;right:-30px;bottom:-30px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,var(--teal-4) 0%,transparent 70%);opacity:0;transition:opacity .5s,transform .8s;}
.tac .feature:hover::after{opacity:.8;transform:scale(1.3);}
.tac .feature .ico-lg{position:relative;width:52px;height:52px;border-radius:14px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:20px;transition:background .3s,transform .3s;overflow:hidden;}
.tac .feature:hover .ico-lg{background:var(--teal);}
.tac .feature h3{font-family:'Inter Tight','Inter',sans-serif;font-size:22px;letter-spacing:-.02em;font-weight:600;margin-bottom:8px;}
.tac .feature p{color:var(--muted);font-size:14px;line-height:1.55;}
.tac .feature .tag{position:absolute;top:20px;right:20px;font-size:10px;padding:4px 8px;background:var(--teal-highlight);color:var(--ink);border-radius:4px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;animation:tag-pop 3s ease-in-out infinite;}
@keyframes tag-pop{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}

/* Per-feature icon micro-animations */
.tac .feature .clock-hand{transform-origin:12px 12px;animation:clock-tick 8s linear infinite;}
.tac .feature:hover .clock-hand{animation-duration:2s;}
@keyframes clock-tick{to{transform:rotate(360deg);}}

.tac .feature .cal-check{stroke-dasharray:20;stroke-dashoffset:20;transition:stroke-dashoffset .6s ease;}
.tac .feature:hover .cal-check{stroke-dashoffset:0;}

.tac .feature .q-check{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .6s ease;}
.tac .feature:hover .q-check{stroke-dashoffset:0;}

.tac .feature .chat-dot{animation:chat-dot 1.4s ease-in-out infinite;}
.tac .feature .chat-dot:nth-child(2){animation-delay:.2s;}
.tac .feature .chat-dot:nth-child(3){animation-delay:.4s;}
@keyframes chat-dot{0%,100%{opacity:.4;transform:translateY(0);}50%{opacity:1;transform:translateY(-2px);}}

.tac .feature .bar{transform-origin:bottom;animation:bar-grow 2s ease-in-out infinite;}
.tac .feature .bar:nth-child(2){animation-delay:.15s;}
.tac .feature .bar:nth-child(3){animation-delay:.3s;}
.tac .feature .bar:nth-child(4){animation-delay:.45s;}
@keyframes bar-grow{0%,100%{transform:scaleY(.4);}50%{transform:scaleY(1);}}

.tac .feature .globe{animation:globe-spin 20s linear infinite;}
.tac .feature:hover .globe{animation-duration:6s;}
@keyframes globe-spin{to{transform:rotate(360deg);}}

@media (max-width:900px){.tac .feature-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.tac .feature-grid{grid-template-columns:1fr;}.tac .features .title-row{grid-template-columns:1fr;}}

/* ============ TRANSCRIPT ============ */
.tac .transcript-sec{padding:120px 0;border-top:1px solid var(--line);}
.tac .transcript-sec .title-row{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-bottom:60px;align-items:end;}
.tac .transcript-sec h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(40px,6vw,88px);line-height:1;letter-spacing:-.04em;font-weight:500;}
.tac .transcript-sec h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .transcript-sec .title-row p{color:var(--muted);font-size:16px;line-height:1.6;max-width:460px;}
.tac .chat-shell{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:stretch;}
@media (max-width:900px){.tac .chat-shell{grid-template-columns:1fr;}.tac .transcript-sec .title-row{grid-template-columns:1fr;}}
.tac .chat{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow-md);min-height:520px;}
.tac .chat-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);}
.tac .chat-head .who{display:flex;align-items:center;gap:10px;}
.tac .chat-head .who .a{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--teal-3),var(--teal));animation:orb-float 4s ease-in-out infinite;}
.tac .chat-head .who span{font-size:13px;font-weight:500;}
.tac .chat-head .status{display:flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
.tac .chat-head .status i{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:blink 1.5s infinite;}
.tac .msg{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease;}
.tac .msg.show{opacity:1;transform:translateY(0);}
.tac .msg .role{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);min-width:60px;padding-top:8px;}
.tac .msg .bubble{background:var(--panel);padding:10px 14px;border-radius:12px;font-size:14px;line-height:1.5;flex:1;}
.tac .msg.ai .bubble{background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.15);}
.tac .msg .bubble b{font-weight:600;}
.tac .msg .bubble .hl-inline{background:var(--teal-highlight);padding:0 2px;}

.tac .typing{display:flex;gap:10px;align-items:center;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s;}
.tac .typing.show{opacity:1;transform:translateY(0);}
.tac .typing .role{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);min-width:60px;}
.tac .typing .dots{background:rgba(20,184,166,.08);border:1px solid rgba(20,184,166,.15);padding:12px 16px;border-radius:12px;display:inline-flex;gap:4px;}
.tac .typing .dots i{width:6px;height:6px;background:var(--teal);border-radius:50%;animation:typing-dot 1.4s ease-in-out infinite;}
.tac .typing .dots i:nth-child(2){animation-delay:.15s;}
.tac .typing .dots i:nth-child(3){animation-delay:.3s;}
@keyframes typing-dot{0%,60%,100%{transform:translateY(0);opacity:.4;}30%{transform:translateY(-4px);opacity:1;}}

.tac .side-card{background:var(--ink);color:#fff;padding:28px;border-radius:20px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden;}
.tac .side-card::before{content:"";position:absolute;right:-80px;bottom:-80px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--teal) 0%,transparent 70%);opacity:.4;animation:orb-float 8s ease-in-out infinite;}
.tac .side-card>*{position:relative;z-index:1;}
.tac .side-card h3{font-family:'Inter Tight','Inter',sans-serif;font-size:28px;letter-spacing:-.02em;font-weight:500;line-height:1.15;}
.tac .side-card p{color:#a3a3a3;font-size:14px;line-height:1.55;}
.tac .side-card ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
/* Layout and colour stay ungated — the card is near-black, so gating the
   #e5e5e5 along with the reveal would render these dark-on-dark without JS.
   Only the hidden starting state is behind html.tac-js. */
.tac .side-card ul li{display:flex;align-items:center;gap:10px;font-size:14px;color:#e5e5e5;}
.tac-js .tac .side-card ul li{opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease;}
.tac-js .tac .side-card.is-in ul li{opacity:1;transform:translateX(0);}
.tac-js .tac .side-card.is-in ul li:nth-child(1){transition-delay:.1s;}
.tac-js .tac .side-card.is-in ul li:nth-child(2){transition-delay:.25s;}
.tac-js .tac .side-card.is-in ul li:nth-child(3){transition-delay:.4s;}
.tac-js .tac .side-card.is-in ul li:nth-child(4){transition-delay:.55s;}
.tac-js .tac .side-card.is-in ul li:nth-child(5){transition-delay:.7s;}
.tac-js .tac .side-card.is-in ul li:nth-child(6){transition-delay:.85s;}
.tac .side-card ul li::before{content:"";width:6px;height:6px;background:var(--teal-2);flex:none;}

/* ============ FINAL ============ */
.tac .final{padding:160px 0 140px;border-top:1px solid var(--line);text-align:center;position:relative;overflow:hidden;background:#fff;}
.tac .final .bg-orb{position:absolute;top:40%;left:50%;width:900px;height:900px;transform:translateX(-50%);border-radius:50%;
  background:
    radial-gradient(circle at 30% 28%,#ffffff 0%,rgba(255,255,255,0) 40%),
    radial-gradient(circle at 60% 60%,var(--teal-3) 0%,rgba(94,234,212,0) 55%),
    radial-gradient(circle at 45% 65%,var(--teal-2) 0%,rgba(20,184,166,0) 60%),
    radial-gradient(circle at 50% 50%,var(--teal-4) 0%,#f4f4f4 65%);
  filter:blur(10px);opacity:.8;animation:final-pulse 6s ease-in-out infinite;pointer-events:none;}
@keyframes final-pulse{0%,100%{transform:translateX(-50%) scale(1);opacity:.8;}50%{transform:translateX(-50%) scale(1.08);opacity:1;}}
.tac .final h2{font-family:'Inter Tight','Inter',sans-serif;font-size:clamp(56px,8vw,128px);line-height:.92;letter-spacing:-.05em;font-weight:500;position:relative;z-index:1;}
.tac .final h2 em{font-style:italic;font-weight:300;color:var(--muted);}
.tac .final p{color:var(--muted);margin:32px auto 44px;font-size:18px;line-height:1.55;max-width:560px;position:relative;z-index:1;}
.tac .final .cta-row{display:inline-flex;gap:12px;position:relative;z-index:1;}
.tac .magnetic{transition:transform .2s cubic-bezier(.2,.9,.3,1);}

/* The gate goes on BOTH states, never just the hidden one: `html.tac-js .tac
   .tac-rv` (0,3,1) outranks a bare `.tac .tac-rv.is-in` (0,3,0), so adding
   .is-in would never reveal anything and the whole page below the hero would
   sit at opacity:0. Same prefix on both keeps the cascade honest. */
.tac-js .tac .tac-rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease;}
.tac-js .tac .tac-rv.is-in{opacity:1;transform:translateY(0);}
.tac-js .tac .tac-rv.d1{transition-delay:.1s;}.tac-js .tac .tac-rv.d2{transition-delay:.2s;}.tac-js .tac .tac-rv.d3{transition-delay:.3s;}