/* ============================================================
   v14 · BRAND + ASSET PASS  (loaded last)
   Goal: push the Fluently identity harder using the real mascot.
   - Contextual mascot poses per section (mascot "participates",
     Duolingo-style) instead of one static penguin.
   - Gold reward palette echoing the mascot's 福 cap + gold trims,
     used ONLY as a semantic reward/rating signal. Coral stays the
     single primary accent for every CTA (colour lock intact).
   - Refined alignment, sizing, colour-coding and motion.
   - Two animated in-app lesson films (framed as app screens).
   No copy in existing sections changes. Additive only.
   ============================================================ */

:root{
  /* gold = mascot's 福 cap + gold trims. Reward / rating / streak only. */
  --gold:        #F4B740;
  --gold-deep:   #E09A2B;
  --gold-tint:   #FBEFCF;
  --gold-line:   #EBC974;
  /* the mascot's scarlet cap, for the tiniest identity sparks */
  --scarlet:     #E23B2E;
}

/* =========================================================
   1 · SECTION BUDDIES — one contextual pose per chapter, grounded
   into the header (contact shadow + tint disc) so it reads as
   placed, not floating, and interactive (speech bubble on hover).
   The wrapper is the right-hand flex child of .sec-top; the wrapper
   does the idle bob, the img handles the hover hop so the two never
   fight over `transform`.
   ========================================================= */
.sec-top{ position:relative; }
.sec-buddy{
  position:relative; flex:none; align-self:flex-end;
  width:clamp(100px,11vw,150px); margin:0 8px -2px 0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
  animation:buddyBob 5.6s var(--ease,cubic-bezier(.22,.61,.36,1)) infinite;
  --buddy-glow:rgba(221, 87, 28,.20);
}
.reveal .sec-buddy{ animation-delay:.15s; }
/* soft tint disc — grounds the buddy in the section colourway */
.sec-buddy::before{
  content:""; position:absolute; z-index:-2;
  left:50%; bottom:9%; width:126%; height:66%; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, var(--buddy-glow), transparent 68%);
  filter:blur(3px);
}
/* contact shadow on the ground line */
.sec-buddy::after{
  content:""; position:absolute; z-index:-1;
  left:50%; bottom:-3px; width:60%; height:11px; transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(35,39,31,.24), transparent 72%);
}
.sec-buddy .sec-mascot{
  display:block; width:100%; height:auto; user-select:none;
  filter:drop-shadow(0 12px 16px rgba(35,39,31,.16));
  transform-origin:60% 100%;
  transition:transform .32s var(--ease-back,cubic-bezier(.34,1.56,.64,1)), filter .3s ease;
}
/* resting personality tilt per pose */
.sec-mascot--speak{ transform:rotate(-5deg); }
.sec-mascot--approve{ transform:rotate(3deg); }
.sec-mascot--play{ transform:rotate(-3deg); }
/* interactive: pause the drift, hop the pose, pop the bubble */
.sec-buddy:hover, .sec-buddy:focus-visible{ animation-play-state:paused; outline:none; }
.sec-buddy:hover .sec-mascot,
.sec-buddy:focus-visible .sec-mascot{
  transform:translateY(-8px) rotate(0deg) scale(1.06);
  filter:drop-shadow(0 20px 24px rgba(35,39,31,.24));
}
/* speech bubble — hidden by default (clean), reveals on hover */
.sec-buddy__say{
  position:absolute; left:-18px; top:-10px; z-index:3;
  padding:7px 13px; border-radius:14px 14px 14px 5px;
  background:#141414; color:#fff; font-size:.8rem; font-weight:900; white-space:nowrap;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.55);
  opacity:0; transform:translateY(7px) scale(.82); transform-origin:bottom left;
  transition:opacity .26s ease, transform .3s var(--ease-back,cubic-bezier(.34,1.56,.64,1));
  pointer-events:none;
}
.sec-buddy__say::after{
  content:""; position:absolute; left:15px; bottom:-4px; width:10px; height:10px;
  background:#141414; transform:rotate(45deg); border-radius:0 0 0 3px;
}
.sec-buddy:hover .sec-buddy__say,
.sec-buddy:focus-visible .sec-buddy__say{ opacity:1; transform:translateY(0) scale(1); }
/* section colourways for the disc + bubble accent */
.sec-buddy--gold{ --buddy-glow:rgba(224,154,43,.24); }
.sec-buddy--gold .sec-buddy__say{ background:var(--gold-deep); }
.sec-buddy--gold .sec-buddy__say::after{ background:var(--gold-deep); }

@keyframes buddyBob{
  0%,100%{ transform:translateY(0) rotate(-1.2deg); }
  50%    { transform:translateY(-8px) rotate(1.2deg); }
}

/* Meet — small celebratory companion bottom-left of the final CTA */
#meet .rx-final{ position:relative; }
.meet-cheer{
  position:absolute; left:clamp(-6px,2vw,42px); bottom:-4px;
  width:clamp(78px,10vw,118px); height:auto; z-index:2; pointer-events:none;
  filter:drop-shadow(0 14px 20px rgba(35,39,31,.2));
  animation:cheerHop 2.8s cubic-bezier(.34,1.56,.64,1) infinite;
}
@keyframes cheerHop{
  0%,100%{ transform:translateY(0) rotate(-4deg); }
  40%    { transform:translateY(-16px) rotate(3deg); }
  55%    { transform:translateY(-13px) rotate(3deg); }
}

/* Leaderboard — reward penguin holding the red envelope, top-right.
   Interactive: lifts + straightens the envelope on hover. */
.rx-lb-card{ position:relative; overflow:visible; }
.lb-reward{
  position:absolute; right:-10px; top:-58px;
  width:clamp(84px,9vw,116px); height:auto; z-index:3; cursor:pointer;
  filter:drop-shadow(0 16px 22px rgba(35,39,31,.22));
  transform:rotate(6deg);
  animation:buddyBob 5s var(--ease,cubic-bezier(.22,.61,.36,1)) infinite;
  transition:transform .32s var(--ease-back,cubic-bezier(.34,1.56,.64,1)), filter .3s ease;
}
.lb-reward:hover{
  animation-play-state:paused;
  transform:rotate(0deg) translateY(-6px) scale(1.07);
  filter:drop-shadow(0 22px 28px rgba(224,154,43,.4));
}

/* Meet — the celebratory companion also reacts to hover */
.meet-cheer{ cursor:pointer; transition:transform .3s var(--ease-back,cubic-bezier(.34,1.56,.64,1)); }
.meet-cheer:hover{ transform:translateY(-10px) rotate(-6deg) scale(1.08); }

/* Launch popup — the waving "hello" pose reads better than a static stand */
.launch-modal__mascot{ transform-origin:60% 100%; }

@media (max-width:900px){
  .sec-buddy, .lb-reward{ display:none !important; }
}
@media (max-width:600px){
  .meet-cheer{ width:64px; left:2px; }
}
@media (prefers-reduced-motion:reduce){
  .sec-buddy, .meet-cheer, .lb-reward{ animation:none !important; }
  .sec-buddy:hover .sec-mascot, .lb-reward:hover, .meet-cheer:hover{ transform:none !important; }
}

/* =========================================================
   2 · CHAPTER TAG — more identity (coral number in a gold-ringed
   chip, tighter rhythm). Was a bare coral number + hairline.
   ========================================================= */
.chap-tag{ gap:12px; margin-bottom:20px; }
.chap-tag .no{
  display:inline-grid; place-items:center;
  min-width:30px; height:30px; padding:0 8px;
  border-radius:9px; font-size:.9rem; line-height:1;
  color:#fff; background:var(--coral);
  box-shadow:0 5px 12px -6px rgba(221, 87, 28,.6),
             inset 0 0 0 2px rgba(255,255,255,.28);
}
.chap-tag .ln{ background:linear-gradient(90deg,var(--gold-line),transparent); max-width:96px; height:2px; opacity:.9; }
.chap-tag .lab{ color:var(--coral-deep); font-size:.76rem; letter-spacing:.14em; }

/* =========================================================
   3 · REVIEW STARS → gold (a rating is a reward signal, not a CTA)
   Coral stays for the quote mark + accents; stars go gold so the
   5-star rating actually reads as "gold standard".
   ========================================================= */
.review-card__stars{ color:var(--gold) !important; filter:drop-shadow(0 2px 3px rgba(224,154,43,.28)); }
.review-card--dark .review-card__stars{ color:var(--gold) !important; }

/* =========================================================
   4 · TRUST CHIPS (Meet floating words) — real pills, warm
   coral/gold coding instead of bare floating text.
   ========================================================= */
#meet .rx-trust span{
  padding:8px 15px; border-radius:999px;
  background:var(--cream-raise); color:var(--ink) !important;
  box-shadow:0 8px 20px -12px rgba(35,39,31,.28), inset 0 0 0 1px rgba(35,39,31,.05);
  backdrop-filter:blur(2px);
}
#meet .rx-trust span:nth-child(1){ box-shadow:0 8px 20px -12px rgba(221, 87, 28,.35), inset 0 0 0 1.5px var(--coral-soft); }
#meet .rx-trust span:nth-child(2){ box-shadow:0 8px 20px -12px rgba(224,154,43,.4), inset 0 0 0 1.5px var(--gold-line); }
#meet .rx-trust span:nth-child(3){ box-shadow:0 8px 20px -12px rgba(221, 87, 28,.35), inset 0 0 0 1.5px var(--coral-soft); }
#meet .rx-trust span:nth-child(4){ box-shadow:0 8px 20px -12px rgba(224,154,43,.4), inset 0 0 0 1.5px var(--gold-line); }

/* =========================================================
   5 · LEADERBOARD — #1 rank gets a gold medal treatment
   ========================================================= */
.rx-lb-card .rx-lb__row .rx-rk.first{
  background:linear-gradient(145deg,var(--gold),var(--gold-deep)) !important;
  color:#5b3d08 !important;
  box-shadow:0 6px 14px -6px rgba(224,154,43,.7), inset 0 0 0 1.5px rgba(255,255,255,.4);
}
.rx-lb-card .rx-lb__row:first-child{ background:linear-gradient(90deg,var(--gold-tint),transparent) !important; border-radius:12px; }
/* the winning XP in gold too */
.rx-lb-card .rx-lb__row:first-child .rx-xp{ color:var(--gold-deep) !important; font-weight:900; }

/* streak flame in Head-2-Head + goal stats reads warmer */
.rx-gstat b, .rx-stat b{ letter-spacing:-.01em; }

/* =========================================================
   6 · SCENARIO CARDS — tidgrey alignment + gold hover ring so
   the four real-life scenes feel like one branded set.
   ========================================================= */
.rx-scene{ transition:transform .3s var(--ease,cubic-bezier(.22,.61,.36,1)), box-shadow .3s ease, border-color .3s ease; }
.rx-scene:hover{ transform:translateY(-5px); }
.rx-scene__ic{ transition:transform .35s var(--ease-back,cubic-bezier(.34,1.56,.64,1)); }
.rx-scene:hover .rx-scene__ic{ transform:scale(1.12) rotate(-6deg); }

/* =========================================================
   7 · BUTTONS — a touch more tactility on press (physical push)
   ========================================================= */
.btn-coral:active, .rx-start:active, .quiz__play-btn:active,
.h2h__cta:active, .rx-act.primary:active{
  transform:translateY(1px) scale(.985) !important;
}
.btn-coral{ box-shadow:0 12px 26px -10px rgba(221, 87, 28,.55), inset 0 0 0 1px rgba(255,255,255,.16); }

/* =========================================================
   8 · IN-APP LESSON FILMS — the two animated cartoons framed as
   real app screens ("participate like play"). Placed in Learn.
   ========================================================= */
.lsn-films{ margin-top:clamp(30px,4vw,52px); }
.lsn-films__lab{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.82rem; font-weight:900; letter-spacing:.02em; color:var(--coral-deep);
  background:var(--coral-tint); border:1px solid var(--coral-soft);
  padding:8px 15px; border-radius:999px; margin-bottom:18px;
}
.lsn-films__lab b{ color:var(--ink); }
.lsn-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px);
}
.lsn-screen{
  position:relative; border-radius:24px; overflow:hidden;
  background:#141414;
  border:6px solid #141414;
  box-shadow:0 26px 50px -26px rgba(35,39,31,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .35s var(--ease,cubic-bezier(.22,.61,.36,1)), box-shadow .35s ease;
}
.lsn-screen:nth-child(1){ box-shadow:0 26px 50px -26px rgba(221, 87, 28,.5), 0 0 0 3px var(--coral-soft); border-color:#141414; }
.lsn-screen:nth-child(2){ box-shadow:0 26px 50px -26px rgba(224,154,43,.5), 0 0 0 3px var(--gold-line); }
.lsn-screen:hover{ transform:translateY(-6px); }
.lsn-screen img{ display:block; width:100%; height:auto; border-radius:18px; }
/* top overlay: a live "lesson" pill so it reads as in-app content */
.lsn-screen__tag{
  position:absolute; left:14px; top:14px; z-index:2;
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 13px; border-radius:999px;
  background:rgba(20,20,20,.72); color:#fff; backdrop-filter:blur(6px);
  font-size:.76rem; font-weight:800; letter-spacing:.01em;
}
.lsn-screen__tag i{
  width:8px; height:8px; border-radius:50%; background:#ff5b47;
  box-shadow:0 0 0 0 rgba(255,91,71,.6); animation:lsnLive 1.8s ease-out infinite;
}
.lsn-screen:nth-child(2) .lsn-screen__tag i{ background:var(--gold); }
@keyframes lsnLive{ 0%{ box-shadow:0 0 0 0 rgba(255,91,71,.55); } 70%,100%{ box-shadow:0 0 0 8px rgba(255,91,71,0); } }
/* caption below the two screens */
.lsn-cap{ margin-top:12px; font-size:.9rem; font-weight:700; color:var(--muted); text-align:center; }
.lsn-cap b{ color:var(--ink); font-weight:900; }

@media (max-width:640px){
  .lsn-grid{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .lsn-screen__tag i{ animation:none; }
}

/* =========================================================
   9 · HERO TITLE MASCOT — slightly bigger + a soft drop-shadow
   so the brand character pops the moment the page loads.
   ========================================================= */
.title-mascot{
  height:1.82em !important;
  filter:drop-shadow(0 10px 16px rgba(35,39,31,.22));
}
/* keep the mascot from covering "remembers" on tight screens */
@media (max-width:560px){
  .title-mascot{ height:1.5em !important; }
}

/* =========================================================
   10 · NAVIGATION — on-brand hover (was sage green), cleaner
   active pill, subtle brand-mark lift.
   ========================================================= */
.nav__links a{ transition:background .22s ease, color .22s ease, transform .22s var(--ease,cubic-bezier(.22,.61,.36,1)); }
.nav__links a:hover{ background:var(--coral-tint) !important; color:var(--coral-deep) !important; }
.nav__links a.active{ background:#141414 !important; color:#fff !important; }
.brand .mark{ transition:transform .3s var(--ease-back,cubic-bezier(.34,1.56,.64,1)); }
.brand:hover .mark{ transform:rotate(-8deg) scale(1.08); }

/* dot-nav — active dot fills coral with a soft ring */
.dotnav a.active .d,
.dotnav a:hover .d{ background:var(--coral) !important; box-shadow:0 0 0 4px rgba(221, 87, 28,.18) !important; }
.dotnav a.active .t{ color:var(--coral-deep); }

/* =========================================================
   11 · HERO — secondary button + scroll cue polish
   ========================================================= */
.hero-scroll{ opacity:.6; transition:opacity .3s ease, transform .3s ease; }
.hero-scroll span{ font-size:.62rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.hero-scroll svg{ color:var(--coral); animation:heroScrollBob 1.8s ease-in-out infinite; }
@keyframes heroScrollBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } }
@media (prefers-reduced-motion:reduce){ .hero-scroll svg{ animation:none; } }

/* =========================================================
   12 · GAME + QUIZ CARDS — gentle hover lift + coral play button
   consistency so the play zone feels like one branded set.
   ========================================================= */
#games .card.game{ transition:transform .3s var(--ease,cubic-bezier(.22,.61,.36,1)), box-shadow .3s ease; }
#games .card.game:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -26px rgba(0,0,0,.5) !important; }
.quiz__play-btn{ box-shadow:0 10px 22px -10px rgba(221, 87, 28,.6); }
.quiz__play-btn:hover{ background:var(--coral-deep) !important; transform:translateY(-2px); }
.games-mascot{ filter:drop-shadow(0 16px 22px rgba(35,39,31,.22)); }

/* =========================================================
   13 · SCENARIO CARDS — brand-consistent icon discs + lift so the
   four real-life scenes read as one set (colour already varies).
   ========================================================= */
.rx-scene{ border-radius:20px; }
.rx-scene:hover{ box-shadow:0 22px 40px -22px rgba(35,39,31,.32); }
.rx-scene--travel:hover{ box-shadow:0 22px 40px -22px rgba(221, 87, 28,.55); }
.rx-scene--night:hover{ box-shadow:0 22px 40px -22px rgba(20,20,20,.6); }

/* =========================================================
   14 · LAUNCH POPUP — festive on-brand card (gold ring, coral
   heading accent, the waving mascot grounded).
   ========================================================= */
.launch-modal__card{
  border-radius:28px !important;
  box-shadow:0 40px 80px -30px rgba(35,39,31,.5), 0 0 0 4px rgba(224,154,43,.18) !important;
}
.launch-modal__card::before{
  content:""; position:absolute; inset:0; border-radius:28px; pointer-events:none;
  background:radial-gradient(120% 80% at 50% -10%, var(--gold-tint), transparent 55%);
  opacity:.7; z-index:-1;
}
.launch-modal__mascot{ filter:drop-shadow(0 16px 22px rgba(35,39,31,.22)); }
.launch-modal__h .coral-text{ color:var(--coral); }
.launch-modal__x{ transition:transform .2s var(--ease-back,cubic-bezier(.34,1.56,.64,1)), color .2s ease; }
.launch-modal__x:hover{ transform:rotate(90deg); color:var(--coral); }

/* =========================================================
   15 · BRANDED FOOTER — the page ended abruptly at Meet; this is
   a proper dark, on-brand close (echoes the dark game/leaderboard
   cards). Charcoal ground, cream type, coral + gold accents.
   ========================================================= */
.site-foot{ background:#121212; color:#EDEBE4; margin-top:clamp(40px,7vw,90px); }
.site-foot__in{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(30px,3.5vw,46px);
}
.site-foot__brand{ display:flex; flex-direction:column; align-items:flex-start; min-width:0; text-align:left; }
.site-foot .brand{ color:#fff; font-size:1.24rem; }
.site-foot .brand .mark{ width:34px; height:34px; }
.site-foot .brand b{ color:var(--coral); }
.site-foot__tag{ margin:16px 0 20px; max-width:34ch; font-size:.95rem; line-height:1.55; font-weight:600; color:#A9A79E; }
.site-foot__social{ display:flex; gap:10px; }
.site-foot__social a{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); color:#EDEBE4;
  transition:transform .25s var(--ease-back,cubic-bezier(.34,1.56,.64,1)), background .25s ease, color .25s ease;
}
.site-foot__social a:hover{ background:var(--coral); color:#fff; transform:translateY(-3px); }
.site-foot__social svg{ width:19px; height:19px; }
.site-foot__col h4{
  font-size:.74rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.site-foot__col a{
  display:block; padding:6px 0; font-size:.95rem; font-weight:700; color:#C9C7BE;
  transition:color .2s ease, transform .2s ease;
}
.site-foot__col a:hover{ color:#fff; transform:translateX(3px); }
/* bottom bar */
.site-foot__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:30px;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:.86rem; font-weight:600; color:#8F8D85;
}
.site-foot__made{ display:inline-flex; align-items:center; gap:9px; }
.foot-pen{ width:34px; height:auto; vertical-align:middle; animation:buddyBob 5s var(--ease,cubic-bezier(.22,.61,.36,1)) infinite; }
.site-foot__bar a{ color:#C9C7BE; }
.site-foot__bar a:hover{ color:var(--coral); }

@media (max-width:820px){
  .site-foot__in{ grid-template-columns:1fr 1fr; gap:34px 28px; }
  .site-foot__brand{ grid-column:1 / -1; }
}
@media (max-width:520px){
  .site-foot__in{ grid-template-columns:1fr 1fr; }
  .site-foot__brand{ grid-column:1 / -1; }
}
@media (prefers-reduced-motion:reduce){ .foot-pen{ animation:none; } }