/* ============================================================================
   V10 — GAME-FEEL LAYER
   Same content, same identity (coral / cream / charcoal / Nunito). This layer
   only adds motion, tactility and small finishing polish on top of v9:
   score counters, bar fills, ring draw, card tilt, success confetti, hover
   physics, and a touch more breathing room. Everything transform/opacity,
   everything reduced-motion safe.
   ============================================================================ */

/* ============================================================================
   0 · MOTION RESET — v10 owns motion on the elements it animates.
   Earlier layers piled up competing hover transforms (v9:724 marks several
   !important); these re-declarations settle each element on ONE final motion
   so nothing counters the tilt, the row nudge, or the press states below.
   ============================================================================ */
/* scenes + XP cards: the pointer tilt owns their transform (JS sets it with
   priority); hover lift is folded into the tilt itself, so static hover
   transforms from older layers are retired */
.rx-scene:hover, .rx-xp-stack .rx-xpc:hover{ transform:none !important; }
/* leaderboard rows: ONE motion - slide right (was translateX(3px) in v9:300,
   translateY(-3px)!important in v9:724, and a third in this layer's draft) */
.rx-lb__row:hover{ transform:translateX(4px) !important; }
/* play button: v9 declared two competing infinite pulses (playPulse + faPlay);
   keep the later one only */
.quiz__play-btn{ animation:faPlay 2.4s ease-in-out infinite !important; }
@media (prefers-reduced-motion:reduce){ .quiz__play-btn{ animation:none !important; } }

/* ---------- rhythm: a little more air around section heads ---------- */
.sec-top{ margin-bottom: clamp(30px, 3.6vw, 46px); }

/* ---------- numbers: stable digits while counting ---------- */
.dstats .num, .rx-xpc__big, .rx-stat b, .rx-gstat b, .rx-xp, .rx-lb__pt{
  font-variant-numeric: tabular-nums;
}

/* ---------- progress bars: fill when revealed ---------- */
.v10-bar{ transform: scaleX(0); transform-origin: left center; }
.v10-bar.v10-in{ transform: scaleX(1);
  transition: transform .9s cubic-bezier(.16,1,.3,1) .15s; }

/* ---------- goal ring: draws itself when it arrives ---------- */
.rx-ring .fill{ transition: stroke-dashoffset 1.25s cubic-bezier(.16,1,.3,1) .2s; }
.rx-ring.v10-wait .fill{ stroke-dashoffset: var(--circ); transition: none; }

/* ---------- tilt cards (JS drives the angles; this shapes the feel) ---------- */
@media (hover:hover) and (pointer:fine){
  .rx-scene, .rx-xpc{ will-change: transform; }
  .rx-scene{ transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease; }
  .rx-scene.v10-tilting{ transition: transform .12s linear, box-shadow .45s ease; }
  .rx-xpc{ transition: transform .45s cubic-bezier(.16,1,.3,1); }
  .rx-xpc.v10-tilting{ transition: transform .12s linear; }
}

/* ---------- tactile press on everything pressable ---------- */
.btn:active, .rx-act:active, .rx-start:active, .quiz__play-btn:active,
.chip:active, .rx-lang:active, .wm__skip:active, .wm__nav:active,
.rx-node:active, .hintb:active, .rx-dl:active{
  transform: translateY(1px) scale(.97);
}

/* ---------- primary CTAs: coral-tinted glow on hover (never black) ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-coral:hover, .rx-start:hover, .quiz__play-btn:hover{
    box-shadow: 0 10px 26px -10px rgba(221, 87, 28,.55), 0 3px 8px -2px rgba(221, 87, 28,.3);
  }
  /* language tiles: v9 owns the -3px lift; v10 only adds the flag wave */
  .rx-flag svg{ transition: transform .3s cubic-bezier(.16,1,.3,1); transform-origin: 20% 80%; }
  .rx-lang:hover .rx-flag svg{ transform: rotate(-6deg) scale(1.12); }
  /* leaderboard rank arrows hop (row slide lives in the reset block above) */
  .rx-mv{ transition: transform .28s cubic-bezier(.16,1,.3,1); }
  .rx-lb__row:hover .rx-mv.up{ transform: translateY(-2px); }
  .rx-lb__row:hover .rx-mv.dn{ transform: translateY(2px); }
  /* scene icons wiggle when their card is hovered */
  .rx-scene:hover .rx-scene__ic{ animation: v10Wiggle .55s cubic-bezier(.16,1,.3,1); }
  /* achievement stickers pop individually */
  .rx-achs span{ transition: transform .25s cubic-bezier(.16,1,.3,1); display:inline-block; }
  .rx-achs span:hover{ transform: translateY(-3px) rotate(-8deg) scale(1.18); }
  /* (trust-chip hover lift already lives in v9:899; not duplicated here) */
}
@keyframes v10Wiggle{
  0%,100%{ transform: rotate(0); }
  25%{ transform: rotate(-9deg) scale(1.12); }
  60%{ transform: rotate(7deg) scale(1.06); }
}

/* ---------- entrance flavour: the app window settles with a tiny rotate ---------- */
.hero2__stage.reveal{ transform: translateY(30px) rotate(1.1deg); }
.hero2__stage.reveal.in{ transform: none; }
/* games drop in with a playful counter-rotate */
.games .game.reveal{ transform: translateY(26px) rotate(-.6deg) scale(.99); }
.games .game.reveal[data-d="1"]{ transform: translateY(26px) rotate(.6deg) scale(.99); }
.games .game.reveal.in{ transform: none; }

/* ---------- "me" leaderboard row: one soft victory pulse after reveal ---------- */
.rx-lb-card.reveal.in .rx-lb__row.me{ animation: rxRise .5s cubic-bezier(.22,1,.36,1) backwards,
  v10MePulse 1.6s ease .9s 1; }
@keyframes v10MePulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(221, 87, 28,0); }
  35%{ box-shadow: 0 0 0 5px rgba(221, 87, 28,.25), 0 8px 24px -8px rgba(221, 87, 28,.45); }
}

/* ---------- section headlines drift gently with the scroll (progressive) ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .h-sec{ animation: v10Drift linear both; animation-timeline: view();
      animation-range: entry 0% exit 100%; }
    @keyframes v10Drift{ from{ transform: translateY(18px); } to{ transform: translateY(-18px); } }
  }
}

/* ---------- success confetti (spawned by v10.js when a quiz round ends) ---------- */
.v10-confetti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:30;
  border-radius:inherit; }
.v10-confetti i{ position:absolute; left:50%; top:46%; width:9px; height:9px; border-radius:2.5px;
  background:var(--c,#DD571C); opacity:0;
  animation: v10Pop .8s cubic-bezier(.16,1,.3,1) forwards; }
.v10-confetti i:nth-child(3n){ border-radius:50%; }
@keyframes v10Pop{
  0%{ opacity:1; transform: translate(-50%,-50%) rotate(0deg); }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx,0px)), calc(-50% + var(--dy,-90px)))
    rotate(var(--rot,220deg)) scale(.7); }
}

/* ---------- focus visibility (keyboard players deserve polish too) ---------- */
.rx-lang:focus-visible, .quiz__play-btn:focus-visible, .rx-start:focus-visible,
.chip:focus-visible, .rx-node:focus-visible{
  outline: 3px solid rgba(221, 87, 28,.55); outline-offset: 2px;
}

/* ---------- reduced motion: everything lands instantly, nothing moves ---------- */
@media (prefers-reduced-motion: reduce){
  .v10-bar{ transform: scaleX(1); transition: none; }
  .rx-ring .fill, .rx-ring.v10-wait .fill{ stroke-dashoffset: var(--off); transition: none; }
  .hero2__stage.reveal, .games .game.reveal{ transform: none; }
  .rx-lb-card.reveal.in .rx-lb__row.me{ animation: none; }
  .v10-confetti{ display: none; }
  .rx-scene:hover .rx-scene__ic{ animation: none; }
}

/* confetti needs a positioning context on the game cards */
.card.game{ position: relative; }

/* ============================================================================
   V10-B · BOLD PASS - louder game energy, same smoothness. Springy entrances
   with the site's own overshoot curve, idle life on icons, shine sweeps on
   CTAs, finish pops on counters and the ring. Transform/opacity only.
   ============================================================================ */

/* ---------- hero headline: words spring in one after another ---------- */
.v10-w{ display:inline-block; }
.v10-hero-in .v10-w{ animation: v10WordIn .65s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--wi,0) * 90ms); }
.v10-hero-in .title-mascot{ animation: v10MascotIn .7s cubic-bezier(.34,1.56,.64,1) .45s backwards; }
@keyframes v10WordIn{
  from{ opacity:0; transform: translateY(26px) rotate(2.5deg) scale(.96); }
  to{ opacity:1; transform: none; }
}
@keyframes v10MascotIn{
  from{ opacity:0; transform: scale(.4) rotate(-14deg); }
  to{ opacity:1; transform: none; }
}

/* ---------- app window: settles, then hovers like a live console ---------- */
.hero2__stage.reveal.in .appwin{ animation: v10Hover 6.5s ease-in-out 1.4s infinite; }
@keyframes v10Hover{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-7px); } }

/* ---------- chat bubbles pop in like real messages ---------- */
.rx-grow.reveal.in .rx-chat>*{ animation: v10Bubble .5s cubic-bezier(.34,1.56,.64,1) backwards; }
.rx-grow.reveal.in .rx-chat>*:nth-child(1){ animation-delay:.25s }
.rx-grow.reveal.in .rx-chat>*:nth-child(2){ animation-delay:.45s }
.rx-grow.reveal.in .rx-chat>*:nth-child(3){ animation-delay:.65s }
.rx-grow.reveal.in .rx-chat>*:nth-child(4){ animation-delay:.85s }
.rx-grow.reveal.in .rx-chat>*:nth-child(5){ animation-delay:1.05s }
@keyframes v10Bubble{
  from{ opacity:0; transform: translateY(12px) scale(.86); }
  to{ opacity:1; transform: none; }
}
.rx-bub.me{ transform-origin: bottom right; }
.rx-bub.them, .rx-fix, .rx-mem, .rx-typing{ transform-origin: bottom left; }

/* ---------- language tiles + topic chips cascade in ---------- */
.rx-learn.reveal.in .rx-lang{ animation: v10Bubble .45s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--ti,0) * 60ms + .15s); }
.rx-grow.reveal.in .rx-node{ animation: v10Bubble .45s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay: calc(var(--ti,0) * 55ms + .3s); }

/* ---------- idle life: icons breathe / float while you read ---------- */
.rx-xpc__ic svg{ animation: v10Breathe 3.8s ease-in-out infinite; }
.rx-xpc.c-cream .rx-xpc__ic svg{ animation-delay:.6s }
.rx-xpc.c-gray .rx-xpc__ic svg{ animation-delay:1.2s }
.rx-xpc.c-charcoal .rx-xpc__ic svg{ animation-delay:1.8s }
@keyframes v10Breathe{ 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.14); } }
.rx-scene__ic{ display:inline-block; animation: v10Float 4.6s ease-in-out infinite; }
.rx-scene:nth-child(2) .rx-scene__ic{ animation-delay:.7s }
.rx-scene:nth-child(3) .rx-scene__ic{ animation-delay:1.4s }
.rx-scene:nth-child(4) .rx-scene__ic{ animation-delay:2.1s }
@keyframes v10Float{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-6px) rotate(-3deg); } }

/* ---------- CTAs: game-button shine sweep on hover ---------- */
@media (hover:hover) and (pointer:fine){
  .btn-coral, .rx-start, .quiz__play-btn, .rx-dl{
    background-image: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%);
    background-size: 280% 100%; background-position: 120% 0; background-repeat: no-repeat; }
  .btn-coral:hover, .rx-start:hover, .quiz__play-btn:hover, .rx-dl:hover{
    animation: v10Shine .8s cubic-bezier(.16,1,.3,1) 1; }
}
@keyframes v10Shine{ from{ background-position: 120% 0; } to{ background-position: -60% 0; } }

/* ---------- finish pops: numbers and the goal ring punch when done ---------- */
.v10-pop{ animation: v10Punch .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes v10Punch{ 0%{ transform: scale(1); } 40%{ transform: scale(1.16); } 100%{ transform: scale(1); } }

/* ---------- dotnav: the active dot glows alive ---------- */
.dotnav a.active .d{ animation: v10Dot 2.2s ease-in-out infinite; }
@keyframes v10Dot{ 0%,100%{ box-shadow: 0 0 0 0 rgba(221, 87, 28,.4); } 50%{ box-shadow: 0 0 0 6px rgba(221, 87, 28,0); } }

/* ---------- ambient sparks drifting in the tinted play sections ---------- */
.chapter.tint{ position: relative; }
.chapter.tint::before, .chapter.tint::after{
  content:""; position:absolute; width:10px; height:10px; border-radius:50%;
  pointer-events:none; z-index:0; opacity:.5;
  background: radial-gradient(circle, #DD571C 0 40%, transparent 70%); }
.chapter.tint::before{ left:6%; top:18%;
  box-shadow: 26vw 34vh 0 -2px #D9EC58, 64vw 8vh 0 -3px #F4D24E;
  animation: v10Spark 13s ease-in-out infinite; }
.chapter.tint::after{ right:8%; bottom:14%;
  box-shadow: -30vw -26vh 0 -3px #D9EC58, -58vw -6vh 0 -2px #DD571C;
  animation: v10Spark 17s ease-in-out -6s infinite reverse; }
@keyframes v10Spark{
  0%,100%{ transform: translate(0,0); }
  33%{ transform: translate(14px,-22px); }
  66%{ transform: translate(-10px,-8px); }
}

/* ---------- bolder reveals: boxes overshoot slightly as they land ---------- */
.rx-lbox.reveal, .rx-learn.reveal .rx-lbox, .rx-grow.reveal .rx-convo{ transform-origin: center 80%; }
.rx-learn.reveal.in .rx-lbox{ animation: v10Land .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.rx-learn.reveal.in .rx-lbox:nth-child(2){ animation-delay:.1s }
.rx-learn.reveal.in .rx-lbox:nth-child(3){ animation-delay:.2s }
@keyframes v10Land{
  from{ opacity:0; transform: translateY(30px) scale(.965); }
  to{ opacity:1; transform: none; }
}

/* ---------- reduced motion: the bold pass goes still ---------- */
@media (prefers-reduced-motion: reduce){
  .v10-hero-in .v10-w, .v10-hero-in .title-mascot,
  .hero2__stage.reveal.in .appwin,
  .rx-grow.reveal.in .rx-chat>*, .rx-learn.reveal.in .rx-lang,
  .rx-grow.reveal.in .rx-node, .rx-learn.reveal.in .rx-lbox,
  .rx-xpc__ic svg, .rx-scene__ic, .dotnav a.active .d,
  .btn-coral:hover, .rx-start:hover, .quiz__play-btn:hover, .rx-dl:hover,
  .v10-pop{ animation: none !important; }
  .chapter.tint::before, .chapter.tint::after{ display:none; }
}

/* ---------- navbar brand: the mascot itself is the mark now ---------- */
.brand img.mark{ object-fit: contain; }

/* ---------- mascot referee between the two game boxes, floating in front ---------- */
.games{ position: relative; }
.games-mascot{ position:absolute; left:50%; top:50%; z-index:6; pointer-events:none;
  width:clamp(84px,8.2vw,118px); height:auto; transform:translate(-50%,-50%);
  filter: drop-shadow(0 14px 22px rgba(35,39,31,.28));
  animation: v10Referee 5.2s ease-in-out infinite; }
@keyframes v10Referee{
  0%,100%{ transform: translate(-50%,-50%) rotate(-3deg); }
  50%{ transform: translate(-50%,-56%) rotate(3deg); }
}
@media (max-width:820px){ .games-mascot{ display:none; } } /* cards stack - no seam to sit on */
@media (prefers-reduced-motion:reduce){ .games-mascot{ animation:none; } }

/* ===================== App Store / Google Play badges ===================== */
.rx-final__cta{ gap:16px; }
.rx-badge{ display:inline-flex; align-items:center; gap:11px; background:var(--ink); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:10px 18px; text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease; }
.rx-badge:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -14px rgba(35,39,31,.5); }
.rx-badge__logo{ width:28px; height:28px; flex:none; }
.rx-badge__txt{ display:flex; flex-direction:column; line-height:1.12; text-align:left; }
.rx-badge__txt small{ font-size:.66rem; font-weight:600; letter-spacing:.01em; opacity:.92; }
.rx-badge--play .rx-badge__txt small{ text-transform:uppercase; letter-spacing:.09em; font-size:.58rem; }
.rx-badge__txt b{ font-size:1.22rem; font-weight:800; letter-spacing:-.01em; }

/* ===================== Pre-launch reviews ===================== */
.reviews__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,1.8vw,24px); align-items:stretch; }
@media (max-width:820px){ .reviews__grid{ grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.review-card{ position:relative; display:flex; flex-direction:column; gap:13px;
  background:linear-gradient(180deg,#fff 0%,#fbfbf8 100%); border:1px solid #ececea; border-radius:20px; padding:clamp(22px,2.3vw,30px);
  box-shadow:0 1px 2px rgba(35,39,31,.05), 0 10px 24px -14px rgba(35,39,31,.18), 0 34px 54px -34px rgba(35,39,31,.15), inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s ease; }
.review-card:hover{ transform:translateY(-8px);
  box-shadow:0 2px 4px rgba(35,39,31,.06), 0 18px 34px -16px rgba(35,39,31,.24), 0 52px 82px -46px rgba(35,39,31,.2), inset 0 1px 0 rgba(255,255,255,.7); }
.review-card__quote{ display:inline-flex; color:var(--coral); }
.review-card__quote svg{ width:26px; height:26px; }
.review-card__stars{ display:flex; gap:3px; color:var(--coral); }
.review-card__stars svg{ width:16px; height:16px; fill:currentColor; }
.review-card__text{ font-size:clamp(1.04rem,1.25vw,1.2rem); font-weight:800; line-height:1.4; letter-spacing:-.01em; color:var(--ink); }
.review-card__role{ margin-top:auto; font-size:.94rem; font-weight:700; color:var(--coral); }
.review-card--dark{ background:linear-gradient(180deg,#191919 0%,#0d0d0d 100%); border-color:#0a0a0a;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 28px -14px rgba(0,0,0,.5), 0 38px 62px -36px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.review-card--dark:hover{ box-shadow:0 2px 4px rgba(0,0,0,.35), 0 20px 38px -16px rgba(0,0,0,.55), 0 56px 88px -46px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06); }
.review-card--dark .review-card__text{ color:#fff; }

/* ===================== Footer ===================== */
.site-foot{ text-align:center; padding:clamp(40px,6vw,72px) var(--pad) clamp(48px,7vw,88px); border-top:1px solid var(--line); }
.site-foot__brand{ display:inline-flex; align-items:center; gap:9px; font-weight:800; font-size:1.55rem; color:var(--ink); letter-spacing:-.02em; }
.site-foot__brand b{ color:var(--coral); font-weight:800; }
.site-foot__brand img{ width:30px; height:30px; }
.site-foot__tag{ margin-top:10px; color:var(--muted); font-weight:600; font-size:1.02rem; }

/* ===================== Hero mockup → iPad ===================== */
.hero2__stage{
  background:linear-gradient(152deg,#3a3e44 0%,#202327 46%,#111316 100%) !important;
  padding:clamp(15px,1.9vw,26px) !important;
  border-radius:clamp(38px,3.4vw,52px) !important;
  box-shadow:0 46px 92px -44px rgba(20,18,16,.62),
             inset 0 0 0 1.5px rgba(255,255,255,.10),
             inset 0 2px 3px rgba(255,255,255,.16),
             inset 0 -4px 8px rgba(0,0,0,.55) !important;
}
/* front-facing camera on the top bezel */
.hero2__stage::after{
  content:""; position:absolute; top:clamp(6px,.82vw,12px); left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%; z-index:4; pointer-events:none;
  background:radial-gradient(circle at 34% 30%, #46566e 0 26%, #10141b 78%);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.06), inset 0 0 2px rgba(120,165,225,.55);
}
.appwin{ border-radius:clamp(22px,2.2vw,32px) !important; border:none !important;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4) !important; }
/* iPadOS status bar (replaces the macOS traffic lights) */
.awdots{ display:none !important; }
.ipad-status{ display:flex; align-items:center; justify-content:space-between;
  padding:8px clamp(18px,2vw,24px) 4px; background:var(--cream-raise); color:var(--ink); }
.ipad-time{ font-weight:800; font-size:.86rem; font-variant-numeric:tabular-nums; letter-spacing:.01em; }
.ipad-sys{ display:inline-flex; align-items:center; gap:7px; color:var(--ink); }
.ips-wifi{ width:19px; height:14px; } .ips-batt{ width:26px; height:13px; }
.appwin__bar{ background:var(--cream-raise) !important; padding-top:7px !important; }
/* float the whole device as one unit, not the screen inside the bezel */
.hero2__stage.reveal.in .appwin{ animation:none !important; }
.hero2__stage.reveal.in{ animation: v10Hover 6.5s ease-in-out 1.4s infinite; }

/* review stars pop in when a card reveals (draws the eye to the rating) */
.review-card.reveal.in .review-card__stars svg{ animation: revStar .5s cubic-bezier(.34,1.56,.64,1) backwards; }
.review-card.reveal.in .review-card__stars svg:nth-child(2){ animation-delay:.07s }
.review-card.reveal.in .review-card__stars svg:nth-child(3){ animation-delay:.14s }
.review-card.reveal.in .review-card__stars svg:nth-child(4){ animation-delay:.21s }
.review-card.reveal.in .review-card__stars svg:nth-child(5){ animation-delay:.28s }
@keyframes revStar{ from{ opacity:0; transform:scale(.2) rotate(-28deg); } to{ opacity:1; transform:none; } }

/* meet tagline: black, tucked close under the heading */
.rx-final__sub{ color:var(--ink) !important; margin-top:-7px; }
/* trust chips: frosted-glass boxes floating around the Meet Fluent visual (2 left / 2 right, tilted inward) */
.rx-final{ position:relative; }
.rx-trust{ position:absolute; inset:0; margin:0 !important; pointer-events:none; z-index:3; }
.rx-trust span{ position:absolute; font-size:.92rem; font-weight:800; color:var(--ink) !important;
  background:rgba(255,255,255,.58) !important; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.8) !important; border-radius:14px; padding:11px 16px !important;
  box-shadow:0 20px 36px -20px rgba(35,39,31,.4) !important; white-space:nowrap; }
.rx-trust span:nth-child(1){ left:7%;  top:20%; transform:rotate(5deg);  animation:revFloat 5.4s ease-in-out infinite; }
.rx-trust span:nth-child(2){ right:7%; top:16%; transform:rotate(-6deg); animation:revFloat 6s   ease-in-out -1.5s infinite; }
.rx-trust span:nth-child(3){ left:10%; top:50%; transform:rotate(6deg);  animation:revFloat 5.7s ease-in-out -2.6s infinite; }
.rx-trust span:nth-child(4){ right:9%; top:53%; transform:rotate(-5deg); animation:revFloat 6.2s ease-in-out -3.7s infinite; }
@media (max-width:820px){
  .rx-trust{ position:static; inset:auto; margin:16px 0 0 !important; display:flex; flex-wrap:wrap; justify-content:center; gap:9px; pointer-events:auto; }
  .rx-trust span{ position:static; transform:none !important; animation:none !important; }
}
/* reviews header subtitle box wraps its full sentence */
.reviews .rx-lbadge--wide{ white-space:normal; }
/* review card: top-right role icon */
.review-card__badge{ position:absolute; top:clamp(20px,2.2vw,28px); right:clamp(18px,2vw,26px);
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:rgba(221, 87, 28,.12); color:var(--coral); }
.review-card__badge svg{ width:20px; height:20px; }
.review-card--dark .review-card__badge{ background:rgba(221, 87, 28,.2); }
/* review boxes float gently (staggered) via `translate`, so the hover `transform` stays smooth */
.review-card.reveal.in{ animation: revFloat 5.6s ease-in-out infinite; }
.review-card.reveal.in:nth-child(2){ animation-delay:-1.9s; }
.review-card.reveal.in:nth-child(3){ animation-delay:-3.7s; }
@keyframes revFloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -9px; } }

/* section ordering: main is a flex column with explicit `order` per section; my reviews
   section had none (defaults to 0) so it jumped above the hero. Slot it after the
   language section (#learn order:4) and before Meet Fluent. */
#reviews{ order:5; }
#meet{ order:6; }
/* Start Learning: grey border to match Explore features (was solid black) */
.hero2 .btn-coral.btn-lg{ border-color:var(--line) !important; }

@media (prefers-reduced-motion:reduce){
  .hero2__stage.reveal.in{ animation:none !important; }
  .review-card.reveal.in{ animation:none !important; }
  .review-card.reveal.in .review-card__stars svg{ animation:none !important; }
  .rx-trust span{ animation:none !important; }
}

/* smoother leaderboard "open": gentler rise, softer ease, wider flowing stagger
   (was .5s with a tight .05s stagger, which read as an abrupt pop) */
.rx-lb-card.reveal.in .rx-lb__row:not(.me){ animation-duration:.64s; animation-timing-function:cubic-bezier(.16,1,.3,1); }
.rx-lb-card.reveal.in .rx-lb__row:nth-child(1){ animation-delay:.06s; }
.rx-lb-card.reveal.in .rx-lb__row:nth-child(3){ animation-delay:.22s; }
.rx-lb-card.reveal.in .rx-lb__row:nth-child(4){ animation-delay:.30s; }
.rx-lb-card.reveal.in .rx-lb__row:nth-child(5){ animation-delay:.38s; }
.rx-lb-card.reveal.in .rx-lb__row:nth-child(6){ animation-delay:.46s; }
/* "me" row (2nd): keep the victory pulse, smooth its rise and slot it into the cascade */
.rx-lb-card.reveal.in .rx-lb__row.me{ animation: rxRise .64s cubic-bezier(.16,1,.3,1) .14s backwards,
  v10MePulse 1.6s ease 1.1s 1; }