/* ==========================================================================
   WHATSAPP — /whatsapp   (design: assets/html/teamian-whatsapp (8) (1).html)
   Namespace: everything is scoped under .twa. Loaded via $pageStyles in
   whatsapp.php, paired with assets/js/teamian-whatsapp.js.

   Rebuilt from the (8) mock, which replaced the (5) mock this page was
   originally built from. The conventions are carried over unchanged so the
   page's decisions stay consistent:

   1. Its :root palette, `html` and `body` rules now sit on .twa. On :root the
      mock's tokens would have redefined --ink, --line and --mute site-wide;
      the body rules would have restyled the shared header, footer and modal.
   2. The `*` reset and `html{scroll-behavior}` are gone — Tailwind's preflight
      and style.css already own them. `a{color:inherit;text-decoration:none}`
      is kept but scoped, so it cannot outrank the shared nav/footer links.
   3. .reveal is renamed .twa-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 26 elements
      with two different state classes.
   4. Its `.in` state became `.is-in` on .twa-rv, .scatter and .card-fan only.
      `.in` still means "incoming" on .bubble and .ph-msg, which is what it
      reads as there — those are left alone.
   5. @keyframes marquee became twa-marquee. Keyframe names are global however
      the selectors are scoped, and style.css already defines `marquee` for the
      site's own ticker — whichever loaded last would have driven both.
   6. Elements that start hidden do so only under .twa-js (set inline at the
      top of whatsapp.php, before any .twa element is parsed) — a stylesheet
      that loads without its script shows a complete page rather than a blank
      one. The gate is on both the hidden AND the revealed state, so the
      reduced-motion override at the bottom still wins on specificity.
   7. Every `Nfr` grid track became `minmax(0,Nfr)` (9 grids). An fr track's
      automatic minimum is min-content; on /ai-calling that let a hero column
      measure 1893px inside a 1457px grid and pushed the next column off-screen.
   8. #hero clears the 76px fixed nav.
   ========================================================================== */

/* ============= RESET & BASE ============= */
  
  .twa{
    font-family: 'Inter', sans-serif;
    background: #FFFFFF;
    color: #000000;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }
  .twa a{ color: inherit; text-decoration: none; }
  .twa button{ font-family: inherit; cursor: pointer; border: none; }

  /* ============= DESIGN TOKENS (warm cream + teal SaaS) ============= */
  .twa{
    /* Base palette — warm cream + earthy neutrals */
    --bg:        #F5F3ED;   /* body cream */
    --bg-2:      #FFFFFF;   /* cards */
    --ink:       #0A0A0A;   /* primary text */
    --ink-2:     #1A1A1A;
    --mute:      #6B6B70;   /* secondary text */
    --mute-2:    #9A9AA0;   /* tertiary text */
    --line:      #E4E1D7;   /* warm cream border */
    --line-2:    #D8D4C7;   /* stronger border */
    --card:      #FFFFFF;
    --dark:      #0F0F10;   /* dark slab sections */
    --dark-2:    #1A1A1C;
    --warn:      #EB6A5A;

    /* Grey ramp (kept for internal parts) */
    --grey-1:    #6B6B70;
    --grey-2:    #9A9AA0;
    --grey-3:    #D1D1D1;
    --grey-4:    #E4E1D7;
    --grey-5:    #F2F0E9;
    --grey-6:    #F8F7F1;
    --paper:     #FFFFFF;

    /* Teal system (primary accent — replaces the 3% wash) */
    --teal:      #14B8A6;
    --teal-soft: rgba(20, 184, 166, 0.12);
    --teal-glow: rgba(20, 184, 166, 0.18);
    --teal-line: rgba(20, 184, 166, 0.22);
    --teal-solid:#14B8A6;

    /* WhatsApp brand — only on WhatsApp-native surfaces */
    --wa-green:      #25D366;
    --wa-green-dark: #128C7E;
    --wa-teal:       #075E54;
    --wa-bubble:     #DCF8C6;
    --wa-chat-bg:    #ECE5DD;
  }

  /* Body — warm cream, no gradient wash */
  .twa{ background: var(--bg); color: var(--ink); letter-spacing: -0.011em; line-height: 1.5; }

  /* ============= SECTION SHELL ============= */
  .twa section{
    min-height: 100vh;
    padding: 100px 32px;
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: hidden;
  }
  /* Container — text is centered by default for hero-style sections */
  .twa .container{ max-width: 1200px; width: 100%; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
  .twa .container.left{ text-align: left; }

  .twa .headline{
    font-size: clamp(38px, 6vw, 88px);
    font-weight: 500;
    letter-spacing: -0.045em;
    line-height: 0.96;
    text-align: center;
    color: var(--ink);
  }
  .twa .sub{
    font-size: clamp(15px, 1.4vw, 17px);
    color: var(--mute);
    text-align: center;
    margin: 24px auto 0;
    font-weight: 400;
    line-height: 1.55;
    max-width: 560px;
  }
  /* Eyebrow — full-width flex so dot+text center as a group */
  .twa .eyebrow{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 11px; color: var(--mute);
    margin-bottom: 28px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }
  .twa .eyebrow::before{
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal-glow);
    animation: pulse 2s ease-in-out infinite;
  }
  .twa .pill-cta{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink); color: #FFF;
    padding: 15px 26px; border-radius: 12px;
    font-weight: 500; font-size: 15px;
    letter-spacing: -0.005em;
    margin-top: 36px;
    border: 1px solid var(--ink);
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .twa .pill-cta:hover{
    transform: translateY(-1px);
    background: var(--ink-2);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
  }
  .twa .pill-cta.ghost{
    background: transparent;
    color: var(--ink);
    border-color: var(--line-2);
    box-shadow: none;
  }
  .twa .pill-cta.ghost:hover{
    background: rgba(0,0,0,.04);
    border-color: var(--ink);
    transform: translateY(-1px);
  }
  .twa .cta-group{
    display: inline-flex; gap: 10px; flex-wrap: wrap;
    margin-top: 36px;
    justify-content: center;
  }
  .twa .cta-group .pill-cta{ margin-top: 0; }

  /* ============= INLINE ICON CHIPS ============= */
  .twa .chip{
    display: inline-flex; align-items: center; justify-content: center;
    width: 1em; height: 1em;
    border-radius: 999px;
    vertical-align: -0.18em;
    font-size: 0.85em;
    margin: 0 0.08em;
    box-shadow: 0 4px 12px rgba(0,0,0,.04);
    position: relative;
    animation: chip-pop .7s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: var(--d, 0s);
  }
  .twa .chip svg{ width: 55%; height: 55%; }
  .twa .chip-a{ background: var(--ink); color: #FFF; }
  .twa .chip-b{ background: var(--bg-2); color: var(--ink); border: 1px solid var(--line-2); }
  .twa .chip-c{ background: var(--teal); color: #FFF; }
  .twa .chip-d{ background: var(--teal-soft); color: var(--teal); }

  @keyframes chip-pop {
    0%   { transform: scale(0.75); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* ============= FLOATING DECORATIONS ============= */
  .twa .deco{
    position: absolute; z-index: 1;
    pointer-events: none;
    opacity: 0;
    animation: deco-in 1.2s ease forwards, float 6s ease-in-out infinite;
    animation-delay: var(--in, 0.4s), var(--float, 0s);
  }
  @keyframes deco-in { to { opacity: 1; } }
  @keyframes float {
    0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%     { transform: translateY(-7px) rotate(calc(var(--r, 0deg) + 2deg)); }
  }
  @keyframes float-slow {
    0%,100% { transform: translateY(0) rotate(var(--r, 0deg)); }
    50%     { transform: translateY(-11px) rotate(calc(var(--r, 0deg) - 3deg)); }
  }
  .twa .deco.slow{ animation-name: deco-in, float-slow; animation-duration: 1.2s, 9s; }
  .twa .deco.tiny{ opacity: .55; }

  /* ============= SCROLL REVEAL ============= */
  /* Gated on .twa-js (set inline at the top of whatsapp.php): these start
     invisible and are revealed by the observer in teamian-whatsapp.js, so
     without the gate a stylesheet that loads while the script fails would
     leave most of the page blank. Prefix on BOTH states — see the
     reduced-motion override at the bottom of this file. */
  .twa-js .twa .twa-rv{ opacity: 0; transform: translateY(20px); transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
  .twa-js .twa .twa-rv.is-in{ opacity: 1; transform: none; }
  .twa-js .twa .twa-rv.delay-1{ transition-delay: .08s; }
  .twa-js .twa .twa-rv.delay-2{ transition-delay: .16s; }
  .twa-js .twa .twa-rv.delay-3{ transition-delay: .24s; }
  .twa-js .twa .twa-rv.delay-4{ transition-delay: .32s; }

  /* Hero launch pill (matches reference "New" badge) */
  .twa .hero-launch-pill{
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 6px;
    background: var(--bg-2);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 12.5px; font-weight: 500;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .twa .hero-launch-pill .tag{
    font-size: 10.5px;
    background: var(--teal);
    color: #FFF;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
  }

  /* ============= HERO ============= */
  .twa #hero{
    background: var(--bg);
    padding-top: calc(76px + 60px);
    position: relative;
  }
  .twa #hero::before{
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 900px; height: 500px;
    background: radial-gradient(ellipse 60% 50% at 50% 30%, var(--teal-glow), transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
  }
  .twa #hero > *{ position: relative; z-index: 1; }

  .twa .mascot-wrap{
    margin-top: 60px;
    display: flex; justify-content: center;
    position: relative;
  }
  .twa .mascot{
    width: 180px; height: 180px;
    animation: mascot-bob 4s ease-in-out infinite;
  }
  @keyframes mascot-bob {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
  }
  .twa .mascot .arm-l,.twa .mascot .arm-r{ transform-origin: center; }

  /* ============= SECTION 2 — TEAMIAN LEARNS ============= */
  .twa #learns{
    background: var(--bg);
  }
  .twa #learns .headline{
    max-width: 1200px;
    margin: 0 auto;
    font-size: clamp(32px, 5.5vw, 76px);
    line-height: 1.02;
  }

  /* ============= SECTION 3 — PRODUCT MOCKUP ============= */
  .twa #product{
    background: var(--dark);
    color: #FFF;
    position: relative;
    overflow: hidden;
  }
  .twa #product::before{
    content: "";
    position: absolute;
    top: -100px; left: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--teal-glow), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.5;
  }
  .twa #product::after{
    content: "";
    position: absolute;
    bottom: -100px; right: -100px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, var(--teal-glow), transparent 60%);
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.4;
  }
  .twa #product > .container{ position: relative; z-index: 1; }
  .twa #product .headline{ color: #FFF; }
  .twa #product .eyebrow{ color: rgba(255,255,255,0.6); }
  .twa .mockup{
    margin: 0 auto;
    max-width: 1000px;
    background: var(--paper);
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--grey-4);
    overflow: hidden;
    display: grid;
    grid-template-columns:240px minmax(0,1fr);
    min-height: 500px;
  }
  .twa .mockup-side{
    background: var(--grey-6);
    padding: 20px 16px;
    border-right: 1px solid var(--grey-4);
  }
  .twa .mockup-side-head{
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 20px;
  }
  .twa .m-avatar{ width: 28px; height: 28px; border-radius: 8px; background: var(--wa-green); }
  .twa .m-avatar.brand{ background: var(--ink); }
  .twa .new-cta{ background: var(--wa-green); height: 40px; border-radius: 10px; margin-bottom: 24px;
    display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--paper); font-weight: 600; font-size: 14px;
    box-shadow: 0 6px 16px rgba(37,211,102,.35);
  }
  .twa .side-item{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 8px; border-radius: 10px; }
  .twa .side-item.active{ background: var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
  .twa .side-item .dot{ width: 20px; height: 20px; background: var(--grey-3); border-radius: 6px; }
  .twa .side-item .line{ height: 10px; background: var(--grey-3); border-radius: 999px; flex: 1; }
  .twa .side-item.active .line{ background: var(--ink); }
  .twa .side-item.active .dot{ background: var(--ink); }

  .twa .mockup-main{ padding: 20px; display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  .twa .chat-panel{
    background: var(--wa-chat-bg);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--grey-4);
    display: flex; flex-direction: column;
  }
  .twa .flow-panel{
    background: var(--grey-6);
    border-radius: 14px;
    padding: 16px;
    border: 1px solid var(--grey-4);
    display: flex; flex-direction: column;
  }
  .twa .chat-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
  .twa .chat-head .plus{ width: 20px; height: 20px; color: var(--wa-teal); }
  .twa .chat-toggle{ margin-left: auto; display: flex; gap: 4px; }
  .twa .chat-toggle span{ width: 22px; height: 14px; background: var(--wa-green); border-radius: 6px; }
  .twa .chat-toggle span:last-child{ background: rgba(0,0,0,.15); }
  .twa .bubble{ border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; font-size: 12px; max-width: 85%; }
  .twa .bubble.in{ background: var(--paper); color: var(--ink-2); align-self: flex-start; box-shadow: 0 1px 2px rgba(0,0,0,.08); border-radius: 4px 12px 12px 12px; }
  .twa .bubble.out{ background: var(--wa-bubble); color: var(--ink-2); align-self: flex-end; box-shadow: 0 1px 2px rgba(0,0,0,.08); border-radius: 12px 4px 12px 12px; }
  .twa .chat-input{
    margin-top: auto; background: var(--paper); border-radius: 999px; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--grey-2);
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    border: 1px solid var(--grey-4);
  }
  .twa .chat-input .send{ margin-left: auto; background: var(--wa-green); color: var(--paper); padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; box-shadow: 0 2px 6px rgba(37,211,102,.35); }

  .twa .flow-head{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
  .twa .flow-head .line{ height: 10px; background: var(--grey-3); border-radius: 999px; flex: 1; }
  .twa .flow-canvas{
    background: repeating-linear-gradient(45deg, var(--grey-5), var(--grey-5) 12px, var(--grey-6) 12px, var(--grey-6) 24px);
    flex: 1; border-radius: 10px;
    padding: 14px; display: flex; flex-direction: column; gap: 10px;
    align-items: center; justify-content: center;
  }
  .twa .node{
    background: var(--paper); border-radius: 10px; padding: 8px 12px;
    font-size: 11px; font-weight: 500;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    border: 1px solid var(--grey-4);
    display: flex; align-items: center; gap: 6px;
    animation: node-pop .6s ease both;
  }
  .twa .node .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
  .twa .node.wa .dot{ background: var(--wa-green); box-shadow: 0 0 0 3px rgba(37,211,102,.2); }
  .twa .connector{ width: 2px; height: 12px; background: var(--grey-3); border-radius: 2px; }
  @keyframes node-pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

  /* ============= SECTION 4 — AUTOMATE ============= */
  .twa #automate{
    background: var(--bg);
  }
  .twa .create-tag{
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--ink); color: var(--paper);
    padding: 12px 20px; border-radius: 999px;
    font-weight: 600; font-size: 0.65em;
    vertical-align: middle;
    margin: 0 6px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
    animation: tag-pulse 3s ease-in-out infinite;
  }
  @keyframes tag-pulse {
    0%,100% { box-shadow: 0 6px 16px rgba(0,0,0,.12); }
    50%     { box-shadow: 0 10px 24px rgba(0,0,0,.18); }
  }
  .twa .cursor{
    display: inline-block;
    width: 3px; height: 0.9em;
    background: var(--ink);
    vertical-align: -8px;
    margin-left: 4px;
    animation: blink 1s steps(2) infinite;
  }
  @keyframes blink { 50% { opacity: 0; } }

  /* ============= SECTION 5 — TEMPLATES FAN ============= */
  .twa #templates{
    background: var(--bg);
  }
  .twa .card-fan{
    position: relative;
    height: 420px;
    margin: 60px auto 0;
    max-width: 900px;
    perspective: 1000px;
  }
  /* Layer 1: position + rotation + entry transition (opacity + rise from below) */
  .twa-js .twa .fan-slot{
    position: absolute;
    left: 50%; bottom: 0;
    transform-origin: 50% 140%;
    transform: translateX(-50%) rotate(var(--rot, 0deg)) translateY(30px);
    opacity: 0;
    transition: transform 1s cubic-bezier(.2,.7,.2,1.2), opacity .8s ease;
    transition-delay: var(--d, 0s);
    cursor: pointer;
  }
  .twa-js .twa .card-fan.is-in .fan-slot{
    transform: translateX(-50%) rotate(var(--rot, 0deg));
    opacity: 1;
  }
  .twa .fan-slot:hover{ z-index: 20; }

  /* Layer 2: continuous idle bob (independent of rotation) */
  .twa .fan-bob{
    animation: fan-bob 6s ease-in-out infinite;
    animation-delay: var(--bob, 0s);
    transform-style: preserve-3d;
  }
  @keyframes fan-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
  }
  .twa .fan-slot:hover .fan-bob{ animation-play-state: paused; }

  /* Layer 3: card visual + hover pop */
  .twa .fan-card{
    width: 150px; height: 200px;
    background: var(--paper);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    border: 1px solid var(--grey-4);
    padding: 10px;
    display: flex; flex-direction: column;
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: 50% 100%;
  }
  .twa .fan-slot:hover .fan-card,.twa .fan-slot.featured .fan-card{
    transform: translateY(-24px) rotate(calc(var(--rot, 0deg) * -1)) scale(1.08);
    box-shadow: 0 24px 48px rgba(13, 148, 136, .15);
  }
  .twa .fan-slot.featured{ z-index: 20; }
  .twa .fan-slot.featured .fan-bob{ animation-play-state: paused; }

  /* card content */
  .twa .tpl-head{
    display: flex; align-items: center; gap: 6px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid var(--grey-5);
    margin-bottom: 8px;
  }
  .twa .tpl-head .icon{
    width: 20px; height: 20px; border-radius: 6px;
    background: var(--grey-5);
    display: grid; place-items: center; font-size: 11px;
    flex-shrink: 0;
  }
  .twa .tpl-head .name{
    font-size: 10px; font-weight: 700;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .twa .tpl-bubble{
    background: var(--wa-bubble);
    border-radius: 10px 10px 10px 2px;
    padding: 8px 10px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--ink-2);
    box-shadow: 0 1px 2px rgba(0,0,0,.05);
    font-weight: 500;
    flex: 1;
  }
  .twa .tpl-bubble strong{ font-weight: 700; }
  .twa .tpl-meta{
    display: flex; align-items: center; gap: 4px;
    margin-top: 8px;
    font-size: 8px;
    color: var(--grey-2);
    justify-content: flex-end;
  }
  .twa .tpl-meta .check{
    color: var(--wa-green);
    font-weight: 700;
  }
  .twa .tpl-btn{
    margin-top: 6px;
    background: var(--paper);
    color: var(--wa-teal);
    text-align: center;
    padding: 5px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid var(--grey-4);
  }

  /* ============= SECTION 5.5 — INDUSTRIES (SPLIT SHOWCASE) ============= */
  .twa #industries{
    background: var(--bg);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
  }
  .twa #industries::before{
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 800px; height: 400px;
    background: radial-gradient(ellipse, var(--teal-glow), transparent 70%);
    filter: blur(60px);
    pointer-events: none;
    opacity: 0.3;
    z-index: 0;
  }
  .twa #industries .ind-header,.twa #industries .ind-split{ position: relative; z-index: 1; }
  .twa .ind-header{
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 0 32px;
    text-align: center;
  }

  /* The split — two halves flanking a divider */
  .twa .ind-split{
    display: grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    max-width: 1400px;
    margin: 0 auto;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
  }
  .twa .ind-half{
    padding: 60px 44px;
    display: flex; flex-direction: column;
    position: relative;
    text-align: left;
    transition: background .6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .twa .ind-health{ background: linear-gradient(140deg, var(--teal-soft), transparent 60%); }
  .twa .ind-real{ background: linear-gradient(220deg, var(--teal-soft), transparent 60%); }
  .twa .ind-half.tilt:hover{
    background: rgba(20, 184, 166, 0.05);
  }

  /* Vertical divider with an X seam badge */
  .twa .ind-divider{
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--grey-4) 20%, var(--grey-4) 80%, transparent);
    position: relative;
  }
  .twa .ind-divider::before{
    content: '×';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: var(--paper);
    border-radius: 50%;
    border: 1px solid var(--grey-4);
    display: grid; place-items: center;
    font-size: 20px; color: var(--grey-2);
    font-weight: 300;
    z-index: 2;
  }

  /* Industry tag pill */
  .twa .ind-tag{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg);
    border: 1px solid var(--line-2);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    align-self: flex-start;
    margin-bottom: 36px;
  }
  .twa .ind-tag .dot{
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal-glow);
    animation: pulse 1.6s ease-in-out infinite;
  }

  /* Big statement + stat */
  .twa .ind-stat{
    border-left: 3px solid var(--teal);
    padding-left: 18px;
    margin-bottom: 28px;
  }
  .twa .stat-value{
    font-size: 76px;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }
  .twa .stat-value span{
    font-size: 38px;
    color: var(--teal);
    margin-left: 3px;
    font-weight: 500;
  }
  .twa .stat-desc{
    margin-top: 10px;
    font-size: 13px;
    color: var(--mute);
    line-height: 1.5;
    max-width: 260px;
  }
  .twa .ind-quote{
    font-size: 28px;
    font-weight: 500;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 32px;
  }

  /* Phone mockup */
  .twa .phone-mockup{
    width: 280px;
    height: 500px;
    background: #0B0F19;
    border-radius: 44px;
    padding: 8px;
    margin: 10px auto 32px;
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.12),
      0 0 0 2px #1E2432,
      inset 0 0 0 4px #0B0F19;
    position: relative;
    transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .twa .ind-health:hover .phone-mockup{
    transform: translateY(-6px) rotate(-1.2deg);
  }
  .twa .ind-real:hover .phone-mockup{
    transform: translateY(-6px) rotate(1.2deg);
  }
  .twa .phone-notch{
    position: absolute;
    top: 14px; left: 50%;
    transform: translateX(-50%);
    width: 96px; height: 22px;
    background: #0B0F19;
    border-radius: 999px;
    z-index: 3;
  }
  .twa .phone-inner{
    background: var(--wa-chat-bg);
    border-radius: 36px;
    height: 100%;
    overflow: hidden;
    display: flex; flex-direction: column;
    position: relative;
  }
  .twa .phone-header{
    background: #075E54;
    color: white;
    padding: 42px 14px 12px;
    display: flex; align-items: center; gap: 10px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.1);
  }
  .twa .ph-back{
    font-size: 22px;
    color: white;
    opacity: 0.85;
    font-weight: 300;
    line-height: 1;
  }
  .twa .ph-avatar{
    width: 32px; height: 32px;
    border-radius: 50%;
    background: white;
    color: #075E54;
    display: grid; place-items: center;
    flex-shrink: 0;
  }
  .twa .ph-avatar svg{ width: 18px; height: 18px; }
  .twa .ph-meta{
    display: flex; flex-direction: column;
    min-width: 0;
    flex: 1;
  }
  .twa .ph-name{
    font-size: 13px; font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .twa .ph-substatus{
    font-size: 10px;
    opacity: 0.9;
    display: inline-flex; align-items: center; gap: 5px;
    margin-top: 1px;
  }
  .twa .ph-substatus .pulse-dot{
    width: 5px; height: 5px;
    border-radius: 50%;
    background: #25D366;
    box-shadow: 0 0 6px rgba(37, 211, 102, 0.7);
    animation: pulse 1.4s ease-in-out infinite;
  }

  /* Chat area with subtle WhatsApp doodle background */
  .twa .phone-chat{
    flex: 1;
    padding: 12px 10px;
    overflow: hidden;
    display: flex; flex-direction: column;
    gap: 5px;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,0.025) 1px, transparent 1.5px),
      radial-gradient(circle at 70% 60%, rgba(0,0,0,0.02) 1px, transparent 1.5px),
      radial-gradient(circle at 45% 85%, rgba(0,0,0,0.02) 1px, transparent 1.5px);
    background-size: 60px 60px, 80px 80px, 50px 50px;
  }
  .twa .ph-day{
    font-size: 9px;
    color: var(--grey-1);
    background: white;
    align-self: center;
    padding: 3px 10px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-weight: 600;
    letter-spacing: 0.08em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  }

  /* Message bubbles — animate in when phone is visible */
  .twa .ph-msg{
    padding: 6px 9px 4px;
    border-radius: 8px;
    max-width: 82%;
    font-size: 11px;
    line-height: 1.4;
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity .55s cubic-bezier(0.22, 1, 0.36, 1),
      transform .55s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0s);
    color: var(--ink-2);
  }
  .twa .phone-mockup.playing .ph-msg{
    opacity: 1;
    transform: none;
  }
  .twa .ph-msg.in{
    background: white;
    align-self: flex-start;
    border-radius: 2px 8px 8px 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  }
  .twa .ph-msg.out{
    background: var(--wa-bubble);
    align-self: flex-end;
    border-radius: 8px 2px 8px 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
  }
  .twa .ph-time{
    display: block;
    font-size: 8px;
    color: #999;
    text-align: right;
    margin-top: 2px;
    letter-spacing: 0.02em;
  }
  .twa .ph-msg.in .ph-time{ text-align: left; }
  .twa .ph-msg .check{
    color: #4FC3F7;
    font-weight: 700;
    margin-left: 2px;
  }

  /* Use case chips */
  .twa .ind-uses{
    margin-top: auto;
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .twa .use-chip{
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    color: var(--ink);
    transition:
      transform .35s cubic-bezier(0.22, 1, 0.36, 1),
      border-color .35s ease,
      background .35s ease;
  }
  .twa .use-chip::before{
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
  }
  .twa .use-chip:hover{
    border-color: var(--teal-line);
    background: var(--teal-soft);
    transform: translateY(-1px);
  }

  /* ============= SECTION 6 — TWO FEATURE CARDS ============= */
  .twa #features{
    background: var(--bg);
  }
  .twa .feature-grid{
    display: grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap: 24px;
    margin-top: 60px;
  }
  .twa .fcard{
    border-radius: 24px;
    padding: 40px 36px;
    display: flex; flex-direction: column;
    min-height: 380px;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--grey-4);
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .5s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .twa .fcard.tilt:hover{
    box-shadow: 0 24px 48px rgba(20, 184, 166, 0.10);
  }
  .twa .fcard h3{
    font-size: 28px; font-weight: 500;
    letter-spacing: -.02em; line-height: 1.15;
    margin-bottom: 24px;
    color: var(--ink);
    text-align: left;
  }
  .twa .fcard-a{ background: var(--bg-2); border-color: var(--line); }
  .twa .fcard-b{ background: var(--dark); color: #FFF; border-color: var(--dark); position: relative; overflow: hidden; }
  .twa .fcard-b::before{
    content: "";
    position: absolute;
    top: -100px; right: -100px;
    width: 300px; height: 300px;
    background: radial-gradient(circle, var(--teal-glow), transparent 60%);
    filter: blur(40px);
    pointer-events: none;
  }
  .twa .fcard-b > *{ position: relative; z-index: 1; }
  .twa .fcard-b h3{ color: #FFF; }

  .twa .folder-stack{
    margin-top: auto;
    position: relative;
    height: 200px;
  }
  .twa .folder-mini{
    position: absolute;
    width: 60px; height: 60px;
    border-radius: 14px;
    display: grid; place-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    animation: floaty 5s ease-in-out infinite;
    border: 1.5px solid var(--ink);
  }
  .twa .folder-mini svg{ width: 26px; height: 26px; }
  .twa .folder-mini.a{ top: 0; left: 40%; background: var(--paper); animation-delay: 0s; }
  .twa .folder-mini.b{ top: 10px; left: 55%; background: var(--grey-3); animation-delay: .6s; }
  .twa .folder-mini.c{ top: 30px; right: 15%; background: var(--paper); animation-delay: 1.2s; }
  @keyframes floaty {
    0%,100% { transform: translateY(0) rotate(-2deg); }
    50%     { transform: translateY(-4px) rotate(2deg); }
  }
  .twa .folder-main{
    position: absolute; bottom: 0; left: 20%;
    width: 220px; height: 130px;
    background: var(--ink);
    border-radius: 14px;
    padding: 16px;
    color: var(--paper);
    box-shadow: 0 16px 40px rgba(0,0,0,.3);
  }
  .twa .folder-main strong{ display: block; font-size: 15px; font-weight: 700; }
  .twa .folder-main span{ font-size: 13px; opacity: .7; }

  .twa .prompt-box{
    margin-top: auto;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 14px;
    padding: 16px;
    backdrop-filter: blur(10px);
  }
  .twa .prompt-box .status{ font-size: 12px; color: var(--grey-3); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
  .twa .prompt-box .status .spark{ color: var(--paper); animation: sparkle 2s ease-in-out infinite; font-size: 14px; }
  @keyframes sparkle { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
  .twa .prompt-box .enhanced{
    background: var(--paper);
    color: var(--ink);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
  }

  /* ============= SECTION 7 — FINAL CTA (replaces pricing) ============= */
  .twa #cta{
    background: var(--dark);
    color: #FFF;
    padding: 120px 32px;
    position: relative;
    overflow: hidden;
  }
  .twa #cta::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 60% 40% at 50% 100%, var(--teal-glow), transparent 70%),
      radial-gradient(ellipse 40% 30% at 50% 0%, rgba(255,255,255,0.04), transparent 70%);
    pointer-events: none;
  }
  .twa #cta > *{ position: relative; z-index: 1; }
  .twa #cta .headline{ color: #FFF; }
  .twa #cta .sub{ color: rgba(255,255,255,0.65); }
  .twa #cta .pill-cta{ background: #FFF; color: var(--ink); border-color: #FFF; }
  .twa #cta .pill-cta:hover{ background: #EAEAEA; border-color: #EAEAEA; }
  .twa #cta .pill-cta.ghost{ background: transparent; color: #FFF; border-color: rgba(255,255,255,0.25); }
  .twa #cta .pill-cta.ghost:hover{ background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
  .twa .cta-container{
    max-width: 900px;
    text-align: center;
    position: relative;
    z-index: 2;
  }
  .twa .big-mascot{
    width: min(340px, 62vw);
    height: min(340px, 62vw);
    margin: 0 auto 20px;
    overflow: visible;
    animation: launch-cycle 9s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
  }
  /* Hero variant — smaller, and staggered by 3s so it doesn't launch in perfect sync with the big rocket at the bottom */
  .twa .big-mascot.hero-mascot{
    width: min(240px, 48vw);
    height: min(240px, 48vw);
    margin-top: 40px;
    animation-delay: -3s;
  }
  /* Keep the child animations (arms/fins/flames) synced with the parent cycle */
  .twa .big-mascot.hero-mascot .arms,.twa .big-mascot.hero-mascot .fins,.twa .big-mascot.hero-mascot .flames{
    animation-delay: -3s;
  }
  .twa .big-mascot .arms,.twa .big-mascot .fins,.twa .big-mascot .flames,.twa .big-mascot .flame{
    transform-box: fill-box;
    transform-origin: center;
  }
  .twa .big-mascot .fins{ transform-origin: 50% 0%; }
  .twa .big-mascot .flames{ transform-origin: 50% 0%; opacity: 0; }
  .twa .big-mascot .fins{ opacity: 0; }
  .twa .big-mascot .arms{
    animation: arms-tuck 9s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
  }
  .twa .big-mascot .fins{
    animation: fins-deploy 9s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
  }
  .twa .big-mascot .flames{
    animation: flames-burn 9s cubic-bezier(0.5, 0.05, 0.5, 1) infinite;
  }
  .twa .big-mascot .flame{
    animation: flame-flicker 0.14s ease-in-out infinite alternate;
    transform-origin: 50% 0%;
  }
  .twa .big-mascot .flame:nth-of-type(2){ animation-delay: 0.05s; }
  .twa .big-mascot .flame:nth-of-type(3){ animation-delay: 0.09s; }

  /* --- Launch cycle: 9s loop --- */
  @keyframes launch-cycle {
    /* 0–45% : happy idle bob */
    0%    { transform: translateY(0); opacity: 1; }
    15%   { transform: translateY(-6px); opacity: 1; }
    30%   { transform: translateY(0); opacity: 1; }
    45%   { transform: translateY(-4px); opacity: 1; }
    /* 45–52% : wind-up crouch */
    50%   { transform: translateY(16px) scaleY(0.92); opacity: 1; }
    /* 52–58% : uncoil */
    56%   { transform: translateY(-10px) scaleY(1.05); opacity: 1; }
    /* 58–82% : blast off */
    65%   { transform: translateY(-80px); opacity: 1; }
    75%   { transform: translateY(-460px); opacity: 1; }
    82%   { transform: translateY(-760px); opacity: 0; }
    /* 82–92% : wait invisibly */
    90%   { transform: translateY(60px); opacity: 0; }
    /* 92–100% : gently re-appear */
    100%  { transform: translateY(0); opacity: 1; }
  }
  @keyframes arms-tuck {
    0%, 46%   { opacity: 1; transform: scale(1); }
    56%, 80%  { opacity: 0; transform: scale(0.4); }
    92%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes fins-deploy {
    0%, 48%   { opacity: 0; transform: scaleY(0); }
    56%       { opacity: 1; transform: scaleY(1); }
    80%       { opacity: 1; transform: scaleY(1); }
    85%, 100% { opacity: 0; transform: scaleY(0); }
  }
  @keyframes flames-burn {
    0%, 49%   { opacity: 0; transform: scaleY(0); }
    53%       { opacity: 1; transform: scaleY(0.4); }
    60%       { opacity: 1; transform: scaleY(1.15); }
    75%       { opacity: 1; transform: scaleY(1); }
    85%, 100% { opacity: 0; transform: scaleY(0); }
  }
  @keyframes flame-flicker {
    from { transform: scaleY(1) scaleX(1); }
    to   { transform: scaleY(0.85) scaleX(0.92); }
  }

  /* ============= FLOATING CHAT BUBBLES ============= */
  .twa .chat-bubble-deco{
    background: var(--paper);
    border-radius: 18px 18px 18px 4px;
    padding: 8px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--grey-4);
    font-size: 12px; color: var(--ink); font-weight: 500;
    display: flex; align-items: center; gap: 6px;
    white-space: nowrap;
  }
  .twa .chat-bubble-deco.dark{
    background: var(--teal);
    color: #FFF;
    border-radius: 18px 18px 4px 18px;
    border: none;
    box-shadow: 0 6px 20px var(--teal-glow);
  }
  .twa .chat-bubble-deco .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--teal); animation: pulse 1.5s ease-in-out infinite; }
  .twa .chat-bubble-deco.dark .dot{ background: #FFF; }
  @keyframes pulse {
    0%,100% { opacity: 1; }
    50% { opacity: .5; }
  }

  /* ============= WORD-BY-WORD BLUR-IN REVEAL (SaaS) ============= */
  .twa .scatter-letter{
    display: inline-block;
    opacity: 0;
    filter: blur(10px);
    transform: translateY(14px);
    transition:
      opacity   .9s cubic-bezier(0.22, 1, 0.36, 1),
      filter    .9s cubic-bezier(0.22, 1, 0.36, 1),
      transform .9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0s);
    will-change: opacity, filter, transform;
  }
  .twa .scatter.is-in .scatter-letter{
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
  .twa .twa-rv.scatter{ transform: none; }

  /* ============= HORIZONTAL TEMPLATE MARQUEE ============= */
  .twa .marquee{
    overflow: hidden;
    margin: 20px 0 40px;
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .twa .marquee-track{
    display: flex;
    gap: 12px;
    width: max-content;
    animation:twa-marquee 55s linear infinite;
  }
  @keyframes twa-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .twa .marquee:hover .marquee-track{ animation-play-state: paused; }
  .twa .mq-pill{
    background: var(--bg-2);
    border: 1px solid var(--line);
    padding: 10px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.03);
    color: var(--ink);
    transition: transform .4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .4s cubic-bezier(0.22, 1, 0.36, 1), border-color .4s ease;
  }
  .twa .mq-pill:hover{
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    border-color: var(--teal-line);
  }
  .twa .mq-pill .emoji{ font-size: 16px; }
  .twa .mq-pill.dark{
    background: var(--dark);
    color: #FFF;
    border-color: var(--dark);
  }
  .twa .mq-pill.wa{
    background: var(--teal-soft);
    color: var(--teal);
    border-color: var(--teal-line);
  }

  /* ============= MASCOT PEEKS ============= */
  .twa .mascot-peek{
    position: absolute;
    z-index: 3;
    pointer-events: none;
    animation: peek-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) .3s both, mascot-bob 6s ease-in-out infinite 1.5s;
  }
  @keyframes peek-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .twa .mascot-peek svg{ width: 100%; height: 100%; }

  /* ============= 3D CARD TILT ============= */
  .twa .tilt{
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }
  .twa .tilt-inner{ transform-style: preserve-3d; }

  /* ============= COUNTER ============= */
  .twa .counter{ display: inline-block; font-variant-numeric: tabular-nums; }

  /* ============= HERO WIRE PATHS (subtle background) ============= */
  .twa .hero-wire{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
  }
  .twa .hero-wire svg{ width: 100%; height: 100%; overflow: visible; }
  .twa .wire-path{
    stroke: var(--line-2);
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: drawWire 3s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  }
  @keyframes drawWire { to { stroke-dashoffset: 0; } }
  .twa .wire-node{
    fill: var(--bg);
    stroke: var(--line-2);
    stroke-width: 1;
    opacity: 0;
    animation: nodeIn .6s ease forwards;
  }
  .twa .wire-node.n1{ animation-delay: 0.9s; }
  .twa .wire-node.n2{ animation-delay: 1.4s; }
  .twa .wire-node.n3{ animation-delay: 1.9s; }
  .twa .wire-node.n4{ animation-delay: 2.4s; }
  @keyframes nodeIn { to { opacity: 1; } }
  .twa .wire-travel-dot{
    fill: var(--teal);
    filter: drop-shadow(0 0 8px var(--teal));
    animation: travelDot 9s cubic-bezier(0.65, 0, 0.35, 1) 3s infinite;
  }
  @keyframes travelDot {
    0%   { transform: translate(0, 0); opacity: 0; }
    5%   { opacity: 1; }
    30%  { transform: translate(300px, 40px); }
    55%  { transform: translate(600px, 40px); }
    80%  { transform: translate(900px, 40px); }
    95%  { opacity: 1; }
    100% { transform: translate(1200px, 40px); opacity: 0; }
  }

  /* ============= SECOND MARQUEE (REVERSE) ============= */
  .twa .marquee.reverse .marquee-track{ animation-direction: reverse; animation-duration: 65s; }
  .twa .marquee.slim{ padding: 6px 0; margin-top: -20px; margin-bottom: 40px; }
  .twa .marquee.slim .mq-pill{ padding: 7px 14px; font-size: 12.5px; opacity: 0.85; }

  /* ============= MEDIA QUERIES ============= */
  @media (max-width: 900px) {
    .twa .mockup{ grid-template-columns:minmax(0,1fr); }
    .twa .mockup-side{ display: none; }
    .twa .mockup-main{ grid-template-columns:minmax(0,1fr); }
    .twa .feature-grid{ grid-template-columns:minmax(0,1fr); }
    .twa .industry-grid{ grid-template-columns:minmax(0,1fr); }
    .twa .ind-split{ grid-template-columns:minmax(0,1fr); }
    .twa .ind-divider{ width: 100%; height: 1px; background: var(--grey-4); }
    .twa .ind-divider::before{ display: none; }
    .twa .ind-half{ padding: 48px 24px; }
    .twa .stat-value{ font-size: 60px; }
    .twa .stat-value span{ font-size: 32px; }
    .twa .ind-quote{ font-size: 24px; }
    .twa section{ padding: 80px 20px; }
    .twa .headline{ font-size: clamp(32px, 8vw, 56px) !important; }
  }

  @media (prefers-reduced-motion: reduce) {
    
    /* Prefixed to match the gated hidden state above — unprefixed it scores
       (0,2,0) against (0,3,0) and reduced-motion visitors got a blank page. */
    .twa-js .twa .twa-rv{ opacity: 1; transform: none; }
  }