/* ============================================================
   樂播科技 Homepage — New CI
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&family=Noto+Sans+Thai:wght@300;400;500;700;900&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* New CI gradient stops */
  --g-magenta: #FF1A8C;
  --g-pink:    #FF2D87;
  --g-purple:  #8A2BE2;
  --g-violet:  #A021D9;
  --g-orange:  #FF9F1C;
  --g-yellow:  #FFC220;

  --brand-gradient: linear-gradient(118deg, #8A2BE2 0%, #EC0677 38%, #FF2D87 62%, #FF9F1C 100%);
  --brand-gradient-soft: linear-gradient(118deg, rgba(138,43,226,.85) 0%, rgba(224,23,143,.9) 55%, rgba(255,159,28,.95) 100%);
  --brand-gradient-reverse: linear-gradient(298deg, #8A2BE2 0%, #EC0677 38%, #FF2D87 62%, #FF9F1C 100%);

  /* Inky background system */
  --bg-ink:      #07060A;
  --bg-ink-2:    #0C0A12;
  --bg-ink-3:    #14111C;
  --bg-card:     #17131F;
  --bg-card-2:   #1D1828;
  --line-dark:   rgba(255,255,255,0.08);
  --line-dark-2: rgba(255,255,255,0.14);

  --fg-hi:  #FFFFFF;
  --fg:     #EAE6F0;
  --fg-mid: #B5ADC2;
  --fg-low: #7A7289;

  --bg-soft:   #FAF7F2;
  --bg-paper:  #FFFFFF;

  --font-zh: 'Noto Sans TC', -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-en: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Per-language font overrides */
html[lang="zh-Hans"],
html[lang="zh-Hans"],
html[lang^="zh-Hans"] {
  --font-zh: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
html[lang="th"] {
  --font-zh: 'Noto Sans Thai', -apple-system, 'Sarabun', sans-serif;
}
html[lang="en"] {
  --font-zh: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

:root {
  --container: 1280px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================================
     TYPOGRAPHY DESIGN SYSTEM
     Use semantic h1–h6 for SEO; reach for utility classes
     (.display-1, .subtitle-1, .body-1, .caption, .eyebrow…)
     when the visual style needs to differ from the heading level.
     ============================================================ */

  /* Type scale */
  --text-display-1: clamp(48px, 6vw, 84px);  /* hero h1 — top of page */
  --text-display-2: clamp(36px, 5vw, 64px);  /* secondary hero */
  --text-h1:        clamp(32px, 4vw, 52px);  /* page h1 */
  --text-h2:        clamp(28px, 3vw, 40px);  /* section title */
  --text-h3:        24px;                    /* subsection / card title */
  --text-h4:        20px;
  --text-h5:        16px;
  --text-h6:        14px;

  --text-subtitle-1: 18px;  /* hero / section lead paragraph */
  --text-subtitle-2: 16px;  /* card lead */
  --text-body-1:     16px;  /* default body */
  --text-body-2:     14px;  /* compact body */
  --text-caption:    12px;  /* timestamp / meta */
  --text-eyebrow:    12px;  /* uppercase eyebrow tag */
  --text-button-1:   16px;  /* large CTA */
  --text-button-2:   14px;  /* compact CTA */

  /* Weight scale */
  --weight-black:     900;
  --weight-extrabold: 800;
  --weight-bold:      700;
  --weight-semibold:  600;
  --weight-medium:    500;
  --weight-regular:   400;

  /* Leading scale */
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.75;

  /* Letter-spacing scale */
  --tracking-tight:   -0.04em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.02em;
  --tracking-eyebrow: 0.18em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-zh);
  color: var(--fg);
  background: var(--bg-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.en { font-family: var(--font-en); letter-spacing: -0.01em; }

/* Gradient text helper */
.grad-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   TYPOGRAPHY — bare h1–h6 defaults + utility classes.
   Existing component-scoped classes (.stage-title, .feat-title,
   .nw-hero-title…) keep their custom styling — they have higher
   CSS specificity and will override these defaults.
   ============================================================ */

/* Bare heading defaults — colour is left unset so light vs dark
   pages can resolve via cascade from body / section colour. */
h1, .h1 {
  font-family: var(--font-zh);
  font-size: var(--text-h1);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-zh);
  font-size: var(--text-h2);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h3, .h3 {
  font-family: var(--font-zh);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-zh);
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}
h5, .h5 {
  font-family: var(--font-zh);
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  line-height: var(--leading-normal);
}
h6, .h6 {
  font-family: var(--font-en);
  font-size: var(--text-h6);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

/* Display — only as utility class (use on hero h1) */
.display-1 {
  font-size: var(--text-display-1);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
.display-2 {
  font-size: var(--text-display-2);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

/* Subtitle — for lead paragraphs that follow a heading */
.subtitle-1 {
  font-size: var(--text-subtitle-1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
}
.subtitle-2 {
  font-size: var(--text-subtitle-2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
}

/* Body — default paragraph styling */
.body-1 {
  font-size: var(--text-body-1);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
}
.body-2 {
  font-size: var(--text-body-2);
  font-weight: var(--weight-regular);
  line-height: var(--leading-loose);
}

/* Caption — timestamps, meta info */
.caption {
  font-size: var(--text-caption);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-mid);
}

/* Eyebrow — uppercase tag above section heading */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}

/* Button typography — pair with .btn / .btn-primary etc. */
.button-1 {
  font-size: var(--text-button-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
}
.button-2 {
  font-size: var(--text-button-2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-normal);
}

/* Text colour modifiers — semantic (work on both light & dark sections) */
.text-hi      { color: var(--fg-hi); }
.text-default { color: var(--fg); }
.text-mid     { color: var(--fg-mid); }
.text-low     { color: var(--fg-low); }
.text-on-light  { color: #14111C; }
.text-on-mid    { color: #4A4458; }
.text-on-low    { color: #7A7289; }

/* ============================================================
   NAV — light
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background .35s var(--ease), backdrop-filter .35s var(--ease), border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(255,255,255,0.78);
  backdrop-filter: saturate(160%) blur(16px);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom-color: #EFE6F2;
}
.nav-inner { display: flex; align-items: center; gap: 40px; }
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo img { height: 50px; }
.nav-logo .logo-light { display: block; }
.nav-logo .logo-dark { display: none; }
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14.5px;
  color: #4A4255;
}
/* Light weight across all 4 languages — user prefers thin nav text.
   Selector is .nav .nav-links a (specificity 0,3,1) so per-page CSS files
   (contactus.css, products.css, etc.) loaded AFTER styles.css can't quietly
   override with a lower-specificity rule. If you really need to change nav
   weight per-page, you must beat THIS selector, not just .nav-links.
   400 (regular) renders consistently lean across PingFang TC/SC, Inter (en),
   and Thai system fonts. */
.nav .nav-links a,
.nav .btn { font-weight: 400; }
.nav-links a { transition: color .2s; }
.nav-links a:hover { color: #14111C; }
.nav-links a.active { color: #EC0677; }
.nav-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Hamburger button — hidden on desktop, shown ≤ 960px */
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(20,17,28,0.12);
  border-radius: 10px;
  cursor: pointer;
  margin-left: 4px;
  flex-shrink: 0;
  color: #14111C;
  padding: 0;
  transition: background .2s, border-color .2s;
}
.nav-burger:hover { background: rgba(20,17,28,0.04); }
.nav-burger-icon { width: 22px; height: 22px; }
.nav-burger-icon-close { display: none; }
.nav-burger.open .nav-burger-icon-menu  { display: none; }
.nav-burger.open .nav-burger-icon-close { display: block; }
body.dark-nav .nav:not(.scrolled) .nav-burger {
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
body.dark-nav .nav:not(.scrolled) .nav-burger:hover {
  background: rgba(255,255,255,0.08);
}

/* Language switcher — dropdown */
.nav-lang-wrap {
  position: relative;
}
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #4A4255;
  padding: 8px 12px 8px 14px;
  border-radius: 999px;
  border: 1px solid #E6D5F0;
  background: transparent;
  cursor: pointer;
  transition: all .2s;
  font-family: inherit;
}
.nav-lang:hover { color: #14111C; border-color: #C9B4DD; }
.nav-lang .nav-lang-globe {
  width: 14px; height: 14px;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-lang .nav-lang-caret {
  width: 10px; height: 10px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform .2s var(--ease);
}
.nav-lang-wrap.open .nav-lang { color: #14111C; border-color: #C9B4DD; }
.nav-lang-wrap.open .nav-lang-caret { transform: rotate(180deg); }

.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid #ECE0F5;
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 20px 40px -12px rgba(20,17,28,0.18), 0 0 0 1px rgba(255,255,255,0.5) inset;
  display: none;
  z-index: 200;
}
.nav-lang-wrap.open .nav-lang-menu { display: block; }
.nav-lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #14111C;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.nav-lang-menu button:hover {
  background: #FBF7FE;
  color: #EC0677;
}
.nav-lang-menu button.active {
  background: linear-gradient(110deg, rgba(138,43,226,0.08), rgba(224,23,143,0.08), rgba(255,159,28,0.08));
  color: #EC0677;
}
.nav-lang-menu button .lang-tick {
  width: 14px; height: 14px;
  opacity: 0;
  flex-shrink: 0;
  color: #EC0677;
}
.nav-lang-menu button.active .lang-tick { opacity: 1; }
.nav-lang-menu button .lang-code {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #B5ADC2;
  margin-left: auto;
}
.nav-lang-menu button.active .lang-code { color: #EC0677; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), opacity .2s;
  white-space: nowrap;
}
.btn-primary {
  color: #fff;
  background: var(--brand-gradient);
  background-size: 180% 180%;
  background-position: 0% 50%;
  box-shadow: 0 8px 24px -8px rgba(224, 23, 143, 0.5),
              0 0 0 1px rgba(255,255,255,0.08) inset;
}
.btn-primary:hover {
  transform: translateY(-1px);
  background-position: 100% 50%;
  box-shadow: 0 14px 32px -8px rgba(224, 23, 143, 0.65),
              0 0 0 1px rgba(255,255,255,0.12) inset;
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost-light {
  color: #14111C;
  background: #FFFFFF;
  border: 1px solid #E6D5F0;
}
.btn-ghost-light:hover {
  background: #FAF5FD;
  border-color: #C9B4DD;
}

.btn-dark-light {
  color: #14111C;
  background: transparent;
  border: 1px solid #DCD0E8;
}
.btn-dark-light:hover {
  background: #FAF5FD;
  border-color: #8A2BE2;
  color: #8A2BE2;
}

.btn-dark {
  color: #fff;
  background: #111;
  border: 1px solid #222;
}
.btn-dark:hover { background: #1d1d1d; }

.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 56px; padding: 0 30px; font-size: 16px; }

/* ============================================================
   HERO — LIGHT STAGE (airy, soft glow)
   ============================================================ */
.hero-stage {
  position: relative;
  padding: 160px 0 120px;
  overflow: hidden;
  background-color: #FBF7FE;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(244,236,250,0.6) 100%);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.stage-ambient {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 78% 48%, rgba(255,159,28,0.08) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(255,45,135,0.08) 0%, transparent 45%);
  pointer-events: none;
}
/* subtle grain (removed — inline SVG URL was breaking CSS parser) */

.stage-grid {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 640px;
}

.stage-eyebrow {
  font-family: var(--font-en);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: #8A2BE2;
  text-transform: uppercase;
  margin-bottom: 36px;
  display: inline-flex; align-items: center; gap: 10px;
}
.stage-eyebrow::before {
  content: ''; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, #8A2BE2);
}

.stage-title {
  font-size: clamp(60px, 7vw, 112px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #14111C;
  margin-bottom: 28px;
}
.stage-title .row { display: block; }
.stage-title .accent {
  background: linear-gradient(110deg, #8A2BE2 0%, #EC0677 45%, #FF9F1C 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradShift 8s ease-in-out infinite;
}
.stage-title .period { color: #FF2D87; }

.stage-sub {
  font-size: 18px; line-height: 1.75;
  color: #5A5360;
  max-width: 540px;
  margin-bottom: 40px;
}

.stage-cta { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }

.stage-cta-btn {
  display: inline-flex; align-items: center; gap: 14px;
  color: #14111C;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s var(--ease);
}
.stage-cta-btn .cta-arrow {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .25s var(--ease);
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 12px 28px -8px rgba(224,23,143,0.5);
}
.stage-cta-btn:hover .cta-arrow {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 16px 32px -8px rgba(224,23,143,0.6);
  transform: scale(1.06);
}
.stage-cta-link {
  font-size: 14.5px;
  color: #5A5360;
  font-weight: 500;
  padding-left: 18px;
  border-left: 1px solid #E6D5F0;
  transition: color .2s;
}
.stage-cta-link:hover { color: #14111C; }

/* 5 feature pillars row */
.stage-features {
  margin-top: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 720px;
}
.sf { display: flex; flex-direction: column; gap: 6px; }
.sf-ico {
  width: 28px; height: 28px;
  margin-bottom: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #EC0677;
}
.sf-ico svg { display: block; }
.sf-title { font-size: 14px; font-weight: 700; color: #14111C; letter-spacing: -0.01em; }
.sf-desc { font-size: 12px; color: #6B6377; line-height: 1.5; }

/* ============================================================
   STAGE VISUAL — image-based composition (background + phone + product)
   ============================================================ */
.stage-visual {
  position: relative;
  aspect-ratio: 1 / 0.82;
  max-width: 660px;
  margin-left: auto;
  width: 100%;
  overflow: visible;
  /* placeholder column for the layout grid; popovers + bg now live in #productStage */
}

/* iPad/mobile-only spacer between CTA and feature pillars. Hidden on desktop;
   sized in @media (max-width: 980px) and (max-width: 640px) below. */
.stage-product-spacer { display: none; }

/* Hero-level background decoration — occupies ~65% of hero, right-anchored, fully visible */
.hero-bg-decor {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 65%;
  max-width: 1100px;
  height: auto;
  z-index: 0;
  pointer-events: none;
  user-select: none;
  animation: bgDriftLight 14s ease-in-out infinite;
}
/* Wide viewports — keep bg-decor centered behind the visual column, not stretched off-screen */
@media (min-width: 1400px) {
  .hero-bg-decor { width: 55%; right: 4%; max-width: 1000px; }
}
@media (min-width: 1800px) {
  .hero-bg-decor { width: 50%; right: 8%; max-width: 980px; }
}
@media (max-width: 980px) {
  .hero-bg-decor { width: 95%; right: 50%; transform: translate(50%, -50%); opacity: 0.7; }
}

/* Phantom phone behind product — sits in center upper area */
.stage-phone-img {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 14px 30px rgba(138, 43, 226, 0.18));
  animation: phoneFloatLight 6s ease-in-out infinite;
}

/* White cylindrical podium — bottom center, the image has lots of empty space */
.stage-podium-img {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 80%;
  height: auto;
  z-index: 3;
  pointer-events: none;
}

/* ============================================================
   PRODUCT STAGE — bg layer + 4 product layers, all share the
   same canvas dimensions per-viewport (1080×1500 mobile ·
   1600×2000 tablet · 2400×1000 desktop). Because every layer
   has identical source dimensions and uses the same `cover`
   sizing, the products land on the podium baked into the bg
   with zero positioning math.
   ============================================================ */
.product-stage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1800px;          /* cap on ultra-wide so bg doesn't drift */
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* Background layer — always visible. Shifted right via object-position so the
   product/podium baked into the bg aligns with the right-anchored
   .stage-visual where popovers live. (方案 1) */
.hero-bg-pic {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-bg-pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;     /* desktop default — overridden in mobile media query */
  display: block;
}

/* Product layers — fade in/out, share canvas with bg.
   IMPORTANT: must use the same object-position as bg so they crop identically
   and the product stays glued to the podium. */
.product-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;     /* MUST match .hero-bg-pic img */
  display: block;
}
.product-img.is-active {
  opacity: 1 !important;
  transform: translateX(0) !important;
  z-index: 2;
}
.product-img.is-leaving {
  opacity: 0;
  transform: translateX(-40px);
  z-index: 1;
}

/* Product placeholder — sits on top of podium */
.stage-product-placeholder {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translateX(-50%);
  width: 22%;
  aspect-ratio: 0.7 / 1;
  z-index: 4;
  border-radius: 14px;
  background:
    repeating-linear-gradient(135deg,
      rgba(196,166,255,0.12) 0px,
      rgba(196,166,255,0.12) 8px,
      rgba(196,166,255,0.20) 8px,
      rgba(196,166,255,0.20) 16px);
  border: 1.5px dashed rgba(138, 43, 226, 0.35);
  display: grid;
  place-items: center;
  color: #8A2BE2;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  animation: productFloat 7s ease-in-out infinite;
}

/* Comment bubbles (left side) */
.cmt {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(230,213,240,0.6);
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  box-shadow:
    0 10px 24px -10px rgba(138,43,226,0.2),
    0 2px 4px rgba(20,17,28,0.04);
  z-index: 5;
  animation: cmtFloat 6s ease-in-out infinite;
}
.cmt-av {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cmt-av-1 { background: linear-gradient(135deg, #FFB8D9, #FF6FB8); }
.cmt-av-2 { background: linear-gradient(135deg, #C4A6FF, #8A2BE2); }
.cmt-av-3 { background: linear-gradient(135deg, #FFD29E, #FF9F1C); }
.cmt-av-4 { background: linear-gradient(135deg, #B4D8FF, #7AA7E8); }
.cmt-text {
  font-size: 12.5px;
  font-weight: 600;
  color: #14111C;
  white-space: nowrap;
}
/* Popovers are children of #productStage and anchored to the bg's product
   horizontally. The phone+podium in bg-2880.png are baked at ~58% of canvas
   (not 50%), so we use 58% as the product-anchor and offset popovers from
   there with fixed px distances — no drift on any viewport.
   Layout matches the reference: 4 comments stacked vertically with a slight
   zig-zag on the LEFT of the product, boost card BELOW the comments, three
   stat cards (GMV / 即時轉換率 / 10K+) stacked on the RIGHT. */
.cmt-1 { top: calc(28% + 40px  + var(--cmt1-y, 0px)); left: calc(58% +  3px + var(--cmt1-x, 0px)); animation-delay: 0s; }
.cmt-2 { top: calc(38%         + var(--cmt2-y, 0px)); left: calc(58% - 40px + var(--cmt2-x, 0px)); animation-delay: -1.5s; }
.cmt-3 { top: calc(48% -  5px  + var(--cmt3-y, 0px)); left: calc(58% + 60px + var(--cmt3-x, 0px)); animation-delay: -3s; }
.cmt-4 { top: calc(58% - 34px  + var(--cmt4-y, 0px)); left: calc(58% - 14px + var(--cmt4-x, 0px)); animation-delay: -4.5s; }
@keyframes cmtFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Stat floating cards (right side) */
.stat-float {
  position: absolute;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow:
    0 20px 40px -15px rgba(138,43,226,0.22),
    0 2px 6px rgba(20,17,28,0.04),
    0 0 0 1px rgba(230,213,240,0.6) inset;
  z-index: 5;
  animation: floaterFloat 7s ease-in-out infinite;
}
.sf-label {
  font-size: 11px;
  color: #6B6377;
  font-weight: 500;
  margin-bottom: 4px;
}
.sf-row {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.sf-val {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  color: #14111C;
  letter-spacing: -0.02em;
  line-height: 1;
}
.sf-val-unit { font-size: 15px; margin-left: 1px; }
.sf-delta {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 11px;
  color: #8A2BE2;
}
.sf-bars {
  display: flex; align-items: flex-end; gap: 3px;
  height: 28px;
}
.sf-bars span {
  flex: 1;
  background: linear-gradient(180deg, #A87CE8, #8A2BE2);
  border-radius: 2px 2px 0 0;
  opacity: 0.85;
}
.sf-line {
  width: 100%; height: 44px;
  display: block;
}

.stat-sales {
  top: calc(14% + 137px + var(--sales-y, 0px));
  right: calc(42% - 549px - var(--sales-x, 0px));
  width: 180px;
  animation-delay: -1s;
}
.stat-conv {
  top: calc(38% + 63px  + var(--conv-y, 0px));
  right: calc(42% - 641px - var(--conv-x, 0px));
  width: 200px;
  animation-delay: -3s;
}
.stat-orders {
  top: calc(60%         + var(--orders-y, 0px));
  right: calc(42% - 520px - var(--orders-x, 0px));
  bottom: auto;
  width: 150px;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  animation-delay: -5s;
}
.so-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #F0E4FA, #E0D0F5);
  display: grid; place-items: center;
  color: #8A2BE2;
  flex-shrink: 0;
}
.so-big {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 20px;
  color: #14111C;
  line-height: 1;
  letter-spacing: -0.02em;
}
.so-sub {
  font-size: 11px;
  color: #6B6377;
  margin-top: 3px;
}

/* Stat card: In-Live Ad Boost */
.stat-boost {
  top: calc(68% - 52px + var(--boost-y, 0px));
  left: calc(58% - 141px + var(--boost-x, 0px));
  width: 240px;
  padding: 14px 16px 12px;
  animation-delay: -2.4s;
}
.sf-boost-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.sf-boost-ico {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FFE0EF 0%, #FFE9D2 100%);
  color: #EC0677;
  flex-shrink: 0;
}
.sf-boost-label {
  font-size: 12px;
  font-weight: 700;
  color: #14111C;
  letter-spacing: 0.02em;
}
.sf-boost-pill {
  margin-left: auto;
  display: inline-flex; align-items: center;
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  background: linear-gradient(135deg, #FF3B6F 0%, #EC0677 100%);
  border-radius: 999px;
  position: relative;
  padding-left: 14px;
}
.sf-boost-pill::before {
  content: "";
  position: absolute;
  left: 6px; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: bvLivePulse 1.4s ease-out infinite;
}
.sf-boost-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.stat-boost .sf-val {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 22px;
  color: #14111C;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-boost .sf-val-unit {
  font-size: 14px;
  margin-left: 1px;
  font-weight: 700;
}
.stat-boost .sf-delta {
  font-size: 11px;
  font-weight: 700;
  color: #EC0677;
  background: rgba(224,23,143,0.10);
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.sf-boost-bar {
  position: relative;
  height: 6px;
  background: rgba(20,17,28,0.06);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sf-boost-bar-fill {
  position: absolute;
  inset: 0 35% 0 0;
  background: linear-gradient(90deg, #EC0677 0%, #FF9F1C 100%);
  border-radius: 999px;
  animation: boostFill 3s ease-in-out infinite alternate;
}
@keyframes boostFill {
  0%   { right: 60%; }
  100% { right: 22%; }
}
.sf-boost-bar-marker {
  position: absolute;
  top: 50%; right: 22%;
  width: 10px; height: 10px;
  background: #fff;
  border: 2px solid #EC0677;
  border-radius: 50%;
  transform: translate(50%, -50%);
  box-shadow: 0 2px 6px rgba(224,23,143,0.4);
  animation: boostMarker 3s ease-in-out infinite alternate;
}
@keyframes boostMarker {
  0%   { right: 60%; }
  100% { right: 22%; }
}
.sf-boost-foot {
  display: flex; align-items: center; gap: 10px;
}
.sf-boost-platform {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #6B6377;
}
.sf-boost-platform svg {
  color: #8A2BE2;
}

/* Shared keyframes used by phone, product, stat-floats */
@keyframes phoneFloatLight {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-8px); }
}
@keyframes productFloat {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-6px); }
}
@keyframes bgDriftLight {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(calc(-50% + 4px)) scale(1.01); }
}
@keyframes floaterFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.25); }
}

/* ============================================================
   RESPONSIVE — Hero stage
   ============================================================ */

/* Desktop: the static .sv-bg / .sv-product images are only used by the
   tablet/mobile layout below — keep them hidden on desktop. */
.sv-bg, .sv-product { display: none; }

/* Tablet (≤ 980px): align home hero with products / streamers / brands —
   same eyebrow pill, same type scale, same alignment, same button shape.
   Order: eyebrow → title → body → CTA → product visual → 4 key points.
   .stage-copy → display:contents lifts its children up as flex items of
   .stage-grid so .stage-features can use order:1 to land past .stage-visual. */
@media (max-width: 980px) {
  .stage-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    align-items: flex-start;  /* left-align flex children */
  }
  .stage-copy { display: contents; }

  /* Eyebrow → pill, mirrors .prod-hero-eyebrow exactly. */
  .stage-eyebrow {
    display: inline-block;
    padding: 8px 14px;
    background: rgba(138, 43, 226, 0.08);
    border: 1px solid rgba(138, 43, 226, 0.2);
    border-radius: 999px;
    font-family: var(--font-en);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #8A2BE2;
    margin-bottom: 32px;
  }
  .stage-eyebrow::before { display: none; }  /* kill the desktop dash */

  /* Title → fixed 54px on tablet/mobile per design. */
  .stage-title {
    font-size: 54px;
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
  }

  /* Sub → match .s-hero-sub spacing (38px gap below). */
  .stage-sub {
    font-size: 19px;
    line-height: 1.7;
    color: #4A4255;
    max-width: 720px;
    margin-bottom: 38px;
  }

  /* CTA → mirrors .prod-hero-actions: two pill buttons in a row.
     38px gap below, matching .s-hero-sub rhythm. */
  .stage-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 38px;
  }
  /* Restyle the primary "聯絡專員" link to look like .btn-primary.btn-lg.
     (Hide its desktop-only arrow circle.) */
  .stage-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--brand-gradient);
    background-size: 180% 180%;
    background-position: 0% 50%;
    box-shadow: 0 8px 24px -8px rgba(224, 23, 143, 0.5),
                0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    white-space: nowrap;
    transition: transform .18s var(--ease), box-shadow .25s var(--ease), background-position .25s;
  }
  .stage-cta-btn:hover {
    transform: translateY(-1px);
    background-position: 100% 50%;
    box-shadow: 0 14px 32px -8px rgba(224, 23, 143, 0.65),
                0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  }
  .stage-cta-btn .cta-arrow { display: none; }

  /* Restyle "了解系統 →" to look like .btn-ghost-light.btn-lg. */
  .stage-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px;
    padding: 0 30px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 600;
    color: #14111C;
    background: #FFFFFF;
    border: 1px solid #E6D5F0;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
  }
  .stage-cta-link:hover {
    background: #FAF5FD;
    border-color: #C9B4DD;
    color: #14111C;
  }

  /* iPad/mobile spacer between CTA and 4 pillars — reserves room (≈ product
     image size) so #productStage's bg + product visually land in this band. */
  .stage-product-spacer {
    display: block;
    order: 0;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.92;
  }

  /* 4 key points — pushed past the spacer via order, left-aligned. */
  .stage-features {
    order: 1;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    max-width: 100%;
    margin-top: 0;
    position: relative;
    z-index: 2;
  }

  /* #productStage stays the full-hero absolute backdrop (desktop behavior),
     just no longer hidden on mobile. Tablet/mobile bg uses centered crop
     (override desktop's right-shifted object-position). */
  .hero-bg-pic img,
  .product-img img { object-position: center center; }

  /* Comment bubbles + stat-floats — anchored to productStage center (50%)
     with fixed px offsets that land them around the centered bg product.
     var(--*-x/y) lets a future dev-tweak panel adjust per breakpoint. */
  .cmt-1 { top: calc(24% + 367px + var(--cmt1-y, 0px)); left: calc(50% - 219px + var(--cmt1-x, 0px)); }
  .cmt-2 { top: calc(38% + 253px + var(--cmt2-y, 0px)); left: calc(50% - 201px + var(--cmt2-x, 0px)); }
  .cmt-3 { top: calc(52% + 143px + var(--cmt3-y, 0px)); left: calc(50% - 200px + var(--cmt3-x, 0px)); }
  .cmt-4 { top: calc(66% +  20px + var(--cmt4-y, 0px)); left: calc(50% - 268px + var(--cmt4-x, 0px)); }
  .stat-sales  { top: calc(14% + 446px + var(--sales-y, 0px));    right: calc(50% - 282px - var(--sales-x, 0px));  left: auto; bottom: auto; width: 170px; }
  .stat-conv   { top: calc(40% + 285px + var(--conv-y, 0px));     right: calc(50% - 349px - var(--conv-x, 0px));   left: auto; bottom: auto; width: 190px; }
  .stat-orders { bottom: calc(14% + 47px - var(--orders-y, 0px)); right: calc(50% - 241px - var(--orders-x, 0px)); top: auto;  left: auto; width: 150px; }
  .stat-boost  { bottom: calc(14% + 38px - var(--boost-y, 0px));  left:  calc(50% - 304px + var(--boost-x, 0px));  top: auto;  right: auto; width: 200px; max-width: none; }

  /* Match brands / streamers hero padding (110/80) — tighter than desktop. */
  .hero-stage { padding: 110px 0 80px; }
}

/* Mobile (≤ 640px): keep type scale from ≤980 (matches products page);
   only adjust the things that genuinely need to shrink at narrow widths. */
@media (max-width: 640px) {
  .hero-stage .container { padding: 0 20px; }

  /* Gap between CTA buttons and the product/cards visual band on mobile.
     Tightened from 64px → 36px after the hero description font shrank
     (19→15px) freed up vertical space — visual band needs less buffer now. */
  .stage-cta { margin-bottom: 36px; }
  /* zh-Hant / zh-Hans have single-line CTA so they have even more freed
     space — pull visual band up further (36 → 16). en/th keep 36 because
     their CTA wraps to 2 lines and needs the breathing room. */
  html[lang="zh-Hant"] .stage-cta,
  html[lang="zh-Hans"] .stage-cta {
    margin-bottom: 16px;
  }

  /* Spacer: full-bleed, slightly portrait — gives the bg product more room.
     Extra margin-top pushes the product image + features pillars down on mobile. */
  .stage-product-spacer {
    width: calc(100% + 40px);
    margin: 24px -20px 0;
    max-width: none;
    aspect-ratio: 1 / 1.05;
  }

  /* Comment bubbles — narrower viewport, smaller text/avatar */
  .cmt {
    padding: 5px 12px 5px 5px;
    gap: 7px;
  }
  .cmt-av { width: 22px; height: 22px; }
  .cmt-text { font-size: 11.5px; }
  .cmt-1 { top: calc(22% + 375px + var(--cmt1-y, 0px)); left: calc(50% - 175px + var(--cmt1-x, 0px)); }
  .cmt-2 { top: calc(34% + 265px + var(--cmt2-y, 0px)); left: calc(50% - 180px + var(--cmt2-x, 0px)); }
  .cmt-3 { top: calc(46% + 163px + var(--cmt3-y, 0px)); left: calc(50% - 150px + var(--cmt3-x, 0px)); }
  .cmt-4 { top: calc(58% +  52px + var(--cmt4-y, 0px)); left: calc(50% - 180px + var(--cmt4-x, 0px)); }

  /* Stat-floats — slightly smaller, hugged to right edge / left for boost */
  .stat-float { padding: 11px 13px; border-radius: 14px; }
  .sf-label { font-size: 10.5px; }
  .sf-val { font-size: 17px; }
  .sf-val-unit { font-size: 13px; }
  .sf-delta { font-size: 10.5px; }
  .sf-bars { height: 22px; }
  .sf-line { height: 38px; }
  .so-big { font-size: 17px; }
  .so-sub { font-size: 10.5px; }
  .so-ico { width: 32px; height: 32px; }
  .stat-sales  { top: calc(12% + 540px + var(--sales-y, 0px));    right: calc(50% - 239px - var(--sales-x, 0px)); left: auto; bottom: auto; width: 150px; }
  .stat-conv   { top: calc(36% + 360px + var(--conv-y, 0px));     right: calc(50% - 303px - var(--conv-x, 0px));  left: auto; bottom: auto; width: 162px; }
  .stat-orders { bottom: calc(14% + 200px - var(--orders-y, 0px)); right: calc(50% - 203px - var(--orders-x, 0px)); top: auto; left: auto; width: 132px; padding: 11px 13px; }
  .stat-boost {
    bottom: calc(14% + 55px - var(--boost-y, 0px));
    left:   calc(50% - 271px + var(--boost-x, 0px));
    top: auto; right: auto;
    width: 168px;
    max-width: none;
    padding: 10px 12px;
    border-radius: 14px;
  }
  .stat-boost .sf-val { font-size: 18px; }
  .stat-boost .sf-val-unit { font-size: 12px; }
  .stat-boost .sf-delta { font-size: 10px; padding: 2px 6px; }

  /* en + th only: CTA pills wrap to 2 stacked lines on mobile (longer copy
     than zh-Hant/zh-Hans). That pushes the visual band too close to the
     buttons. Shift the entire hero stage's inner content + the 4 features
     pillars below downward to compensate. Boost card additionally needs to
     drop further (was overlapping the phone's LIVE badge). */
  html[lang="en"] .product-stage,
  html[lang="th"] .product-stage {
    padding-top: 40px;
  }
  /* zh-Hant / zh-Hans: pull the entire .product-stage (bg image + popovers
     + stat cards) UP. .product-stage is position:absolute so stage-cta
     margin-bottom doesn't affect it — we shift it with transform. The base
     `transform: translateX(-50%)` is preserved by writing the full
     translate() shorthand. */
  html[lang="zh-Hant"] .product-stage,
  html[lang="zh-Hans"] .product-stage {
    transform: translate(-50%, -40px);
  }
  html[lang="en"] .stage-features,
  html[lang="th"] .stage-features {
    margin-top: 40px;
  }
  /* Note: a later @media (max-width: 640px) block further down in this file
     (search "Sit at same vertical level as 本場 GMV") overrides .stat-boost
     positioning with !important top:. The en/th-specific downward shift for
     the boost card lives in THAT block, not here — see below. */
  .sf-boost-label { font-size: 11px; }
  .sf-boost-pill { font-size: 9px; padding: 2px 6px 2px 12px; }

  /* 4 pillars → 2-col on phones (fills 2×2 evenly). */
  .stage-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 18px;
  }

  /* Unify hero-description font size across ALL pages on mobile.
     Per-page CSS (products.css, brands.css, etc.) each defines its own
     `.X-hero-sub` at 17-19px which then leaks onto mobile because they
     don't ship their own ≤640 override. That was reading too large on
     phones (compare Shopify/91APP/Webnode/Shopline ≈ 14-15px on the same
     surface). The `html` prefix bumps specificity to (0,1,1) so this
     beats the (0,1,0) base rules in per-page CSS that load AFTER
     styles.css. To revert, remove this block. */
  html .stage-sub,
  html .s-hero-sub,
  html .prod-hero-sub,
  html .b-hero-sub,
  html .pr-hero-sub,
  html .ab-hero-sub,
  html .cu-hero-sub,
  html .nw-hero-sub {
    font-size: 15px;
    line-height: 1.6;
  }
}

/* Very narrow (≤ 480px / ≤ 380px): tighten further */
@media (max-width: 480px) {
  .stat-num { font-size: 32px !important; }
  .stat-suffix { font-size: 13px; }
  .stat-card { padding: 22px 12px; }
}
@media (max-width: 380px) {
  .stage-title { font-size: clamp(36px, 10.5vw, 46px); }
}

/* ============================================================
   MARQUEE — partner logos (light)
   ============================================================ */
.marquee-section {
  padding: 60px 0 80px;
  background: #FFFFFF;
  border-top: 1px solid #F0E8F5;
  border-bottom: 1px solid #F0E8F5;
}
.marquee-label {
  text-align: center;
  color: #7A7289;
  font-size: 13px;
  letter-spacing: .05em;
  margin-bottom: 32px;
  font-weight: 500;
}
.marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 40px;
  /* Slow drift — partner brand wall reads as a calm "backdrop" rather than
     a fast ticker. Doubled again from 340s on request (170s → 340s → 680s). */
  animation: marquee 680s linear infinite;
  width: max-content;
  align-items: center;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
/* Pause auto-scroll while the user hovers — applies to both the partner
   marquee and the .streamer-marquee variant since they share .marquee. */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track {
  animation-play-state: paused;
}
.marquee-item {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matched to the .streamer-marquee (KOL) cell height for visual parity. */
  height: 88px;
  width: 132px;
  flex: 0 0 auto;
  opacity: .78;
  filter: grayscale(100%);
  transition: opacity .3s, filter .3s;
}
/* Default rendered height for partner logos. Each entry in main.js can
   override this via an inline `style="height:Npx"` to compensate for the
   per-PNG quirk (some have heavy internal whitespace and need to render
   bigger; filled-square logos like HOLA need to render smaller so they
   don't visually dominate; very-wide logos like Tefal need a smaller height
   so width stays inside the cell). max-width keeps everything inside the
   cell regardless of override. */
.marquee-item img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}
.marquee-item:hover { opacity: 1; filter: grayscale(0%); }

/* Livestreamer variant — colored square thumbnails (logos already have their
   own brand colors, so we skip the grayscale treatment used for partners). */
.streamer-marquee .marquee-track {
  gap: 28px;
  animation-duration: 80s;
}
.streamer-marquee .marquee-item {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  overflow: hidden;
  background: #FFFFFF;
  box-shadow:
    0 2px 6px rgba(20,17,28,0.04),
    0 0 0 1px rgba(230,213,240,0.55) inset;
  filter: none;
  opacity: 1;
}
.streamer-marquee .marquee-item img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}
.streamer-marquee .marquee-item:hover {
  filter: none;
  transform: translateY(-2px);
  box-shadow:
    0 8px 20px rgba(20,17,28,0.08),
    0 0 0 1px rgba(138,43,226,0.25) inset;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
@media (max-width: 640px) {
  .streamer-marquee .marquee-item { width: 72px; height: 72px; border-radius: 12px; }
  .streamer-marquee .marquee-track { gap: 18px; }
}

/* Dark variant — matches the testimonial section above on home (continues
   the dark band so the marquee reads as part of the same chapter). */
.streamer-marquee.is-dark {
  background: var(--bg-ink);
  border-top: 0;
  border-bottom: 0;
}
.streamer-marquee.is-dark .marquee-label {
  color: rgba(255,255,255,0.62);
}
.streamer-marquee.is-dark .marquee {
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.streamer-marquee.is-dark .marquee-item {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.3),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}
.streamer-marquee.is-dark .marquee-item:hover {
  box-shadow:
    0 8px 20px rgba(0,0,0,0.4),
    0 0 0 1px rgba(196,166,255,0.45) inset;
}

/* ============================================================
   SECTION — general
   ============================================================ */
.section {
  padding: 140px 0;
  position: relative;
}
.section-light {
  background: var(--bg-paper);
  color: #0A0A0A;
}
.section-soft {
  background: var(--bg-soft);
  color: #0A0A0A;
}
.section-dark {
  background: var(--bg-ink);
  color: var(--fg-hi);
}

.sec-header {
  max-width: 760px;
  margin-bottom: 72px;
}
.sec-header.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sec-header.center .sec-sub { margin-left: auto; margin-right: auto; }
.sec-eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 20px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(224,23,143,0.1);
  color: #EC0677;
  border: 1px solid rgba(224,23,143,0.2);
}
.section-dark .sec-eyebrow {
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  border-color: var(--line-dark-2);
}
.sec-title {
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.sec-sub {
  font-size: 18px;
  line-height: 1.6;
  color: #4A4255;
  max-width: 620px;
}
.sec-title { color: #14111C; }
.section-dark .sec-title, .section-dark .sec-sub { color: #fff; }
.section-dark .sec-sub { color: #B5ADC2; }
.section-light .sec-sub, .section-soft .sec-sub { color: #4A4550; }

/* ============================================================
   STATS — light
   ============================================================ */
.stats-section {
  background: #FAF7FB;
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.stats-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 15% 50%, rgba(138,43,226,0.08) 0%, transparent 70%),
    radial-gradient(40% 60% at 85% 50%, rgba(255,159,28,0.08) 0%, transparent 70%);
}
.stats-section .sec-title { color: #14111C; }
.stats-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.stat-card {
  border: 1px solid #EEE3F5;
  border-radius: var(--radius-md);
  padding: 40px 32px;
  background: #FFFFFF;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.stat-card:hover {
  transform: translateY(-4px);
  border-color: #EC0677;
  box-shadow: 0 20px 40px -20px rgba(224,23,143,0.25);
}
.stat-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #8A2BE2, #EC0677, #FF9F1C);
  opacity: 0;
  transition: opacity .3s;
}
.stat-card:hover::after { opacity: 1; }
.stat-num {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: clamp(56px, 6vw, 84px);
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(110deg, #8A2BE2, #EC0677 55%, #FF9F1C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 4px;
}
.stat-suffix {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 28px;
  background: linear-gradient(110deg, #8A2BE2, #EC0677 55%, #FF9F1C);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-left: -4px;
}
.stat-label {
  color: #4A4255;
  font-size: 15px;
  margin-top: 14px;
  font-weight: 500;
}

/* ============================================================
   FEATURES
   ============================================================ */
.features-section {
  background: var(--bg-paper);
  color: #0A0A0A;
}
.features-section .sec-title { color: #0A0A0A; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.feature-card {
  border: 1px solid #EEE7DA;
  border-radius: var(--radius-lg);
  padding: 40px;
  background: #FFFFFF;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -20px rgba(138,43,226,0.25);
  border-color: #E0D3F0;
}
.feature-card.span-6 { grid-column: span 6; }
.feature-card.span-4 { grid-column: span 4; min-height: 0; }
.feature-card.span-8 { grid-column: span 8; }

.feature-card.feat-dark {
  background: #0F0C16;
  color: #fff;
  border-color: var(--line-dark-2);
}
.feature-card.feat-grad {
  background: var(--brand-gradient);
  color: #fff;
  border: 0;
}
.feature-card.feat-grad .feat-desc { color: rgba(255,255,255,0.85); }

.feat-ico {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFF0F8 0%, #FFF5E6 100%);
  display: grid;
  place-items: center;
  margin-bottom: 24px;
  color: #EC0677;
}
.feature-card.feat-dark .feat-ico { background: rgba(255,255,255,0.08); color: #fff; }
.feature-card.feat-grad .feat-ico { background: rgba(255,255,255,0.18); color: #fff; }

.feat-title {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.feat-desc {
  font-size: 15.5px;
  line-height: 1.6;
  color: #5A5360;
  flex: 1;
}
.feature-card.feat-dark .feat-desc { color: #B5ADC2; }

.feat-meta {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #EC0677;
  font-weight: 600;
  font-size: 14px;
}
.feature-card.feat-dark .feat-meta { color: #FF9F1C; }
.feature-card.feat-grad .feat-meta { color: #fff; }

/* ============================================================
   Channel convergence visual (feat-grad card)
   ============================================================ */
.channel-viz {
  margin-top: 28px;
  position: relative;
  height: 230px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.12) 0%, transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.18) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  overflow: hidden;
}
.channel-lines {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  animation: linesPulse 3s ease-in-out infinite;
}
@keyframes linesPulse {
  0%, 100% { opacity: .4; }
  50% { opacity: .9; }
}
.ch-node {
  position: absolute;
  top: 18px;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25);
  animation: nodeFloat 4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -1s);
}
@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ch-1 { left: 10%; }
.ch-2 { left: 30%; }
.ch-3 { left: 58%; }
.ch-4 { left: 78%; }
.ch-label {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #fff;
}
.ch-hub {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 18px;
  background: #fff;
  color: #14111C;
  border-radius: 14px;
  box-shadow: 0 14px 32px -8px rgba(0,0,0,0.35);
  z-index: 2;
}
.ch-hub-inner { text-align: center; position: relative; z-index: 2; }
.ch-hub-label {
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -0.01em;
  background: var(--brand-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.ch-hub-sub {
  font-size: 10.5px;
  color: #7A7289;
  margin-top: 2px;
  letter-spacing: 0.04em;
}
.ch-hub-pulse {
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  border: 1.5px solid rgba(255,255,255,0.55);
  opacity: 0;
  animation: hubPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes hubPulse {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* Traveling +1 packets */
.ch-packet {
  position: absolute;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.3);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.ch-packet.p1 {
  --sx: 15%; --sy: 38px;
  animation: packetMove 3.2s ease-in-out infinite;
  animation-delay: 0s;
}
.ch-packet.p2 {
  --sx: 62%; --sy: 38px;
  animation: packetMove 3.2s ease-in-out infinite;
  animation-delay: -1s;
}
.ch-packet.p3 {
  --sx: 82%; --sy: 38px;
  animation: packetMove 3.2s ease-in-out infinite;
  animation-delay: -2.1s;
}
@keyframes packetMove {
  0% { top: var(--sy); left: var(--sx); opacity: 0; transform: scale(0.6); }
  10% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; }
  100% { top: calc(100% - 60px); left: 48%; opacity: 0; transform: scale(0.7); }
}

/* ============================================================
   Order stream visual (即時接單)
   ============================================================ */
.order-stream {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  padding: 18px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
}
.os-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #B5ADC2;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.os-livedot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #E63946;
  box-shadow: 0 0 8px #E63946;
  animation: pulse 1.2s infinite;
}
.os-dot-green {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
}
.os-left, .os-right {
  display: flex; flex-direction: column;
  min-width: 0;
}
.os-comments, .os-orders {
  display: flex; flex-direction: column;
  gap: 6px;
  max-height: 152px;
  overflow: hidden;
  position: relative;
}
.os-comments::after, .os-orders::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30px;
  background: linear-gradient(180deg, transparent, #0F0C16);
  pointer-events: none;
}
.os-comment {
  display: flex; align-items: baseline; gap: 8px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  font-size: 12px;
  animation: commentIn .6s var(--ease);
  animation-fill-mode: backwards;
}
.os-comment:nth-child(1) { animation-delay: .1s; }
.os-comment:nth-child(2) { animation-delay: .25s; }
.os-comment:nth-child(3) { animation-delay: .4s; }
.os-comment:nth-child(4) { animation-delay: .55s; }
.os-comment:nth-child(5) { animation-delay: .7s; }
@keyframes commentIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.os-user {
  font-weight: 700;
  color: #fff;
  font-size: 11.5px;
  flex-shrink: 0;
}
.os-text {
  font-family: var(--font-en);
  color: #B5ADC2;
  font-size: 11.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.os-arrow {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding-top: 24px;
}
.os-arrow svg { animation: arrowPulse 2s ease-in-out infinite; }
@keyframes arrowPulse {
  0%, 100% { transform: translateX(0); opacity: 0.7; }
  50% { transform: translateX(4px); opacity: 1; }
}
.os-arrow-label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #FF9F1C;
  text-transform: uppercase;
}
.os-order {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: linear-gradient(90deg, rgba(138,43,226,0.12), rgba(224,23,143,0.08));
  border: 1px solid rgba(224,23,143,0.18);
  border-radius: 8px;
  font-size: 11.5px;
  animation: orderIn .7s var(--ease);
  animation-fill-mode: backwards;
}
.os-order:nth-child(1) { animation-delay: .35s; }
.os-order:nth-child(2) { animation-delay: .5s; }
.os-order:nth-child(3) { animation-delay: .65s; }
.os-order:nth-child(4) { animation-delay: .8s; }
.os-order:nth-child(5) { animation-delay: .95s; }
@keyframes orderIn {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}
.os-order-new {
  border-color: #FF9F1C;
  box-shadow: 0 0 0 2px rgba(255,159,28,0.25);
}
.os-sku {
  font-family: var(--font-en);
  font-weight: 800;
  color: #fff;
}
.os-qty {
  font-family: var(--font-en);
  color: #B5ADC2;
  font-size: 10.5px;
}
.os-ok {
  font-family: var(--font-en);
  font-weight: 900;
  color: #4ADE80;
  font-size: 13px;
}

/* Accuracy pill */
.acc-pill {
  margin-top: 18px;
  display: flex; align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(90deg, rgba(255,159,28,0.12), rgba(224,23,143,0.12));
  border: 1px solid rgba(255,159,28,0.25);
  border-radius: 12px;
}
.acc-big {
  font-family: var(--font-en);
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(110deg, #FF9F1C, #EC0677);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.acc-sm {
  font-size: 20px;
  margin-left: 1px;
}
.acc-desc {
  font-size: 13px;
  color: #B5ADC2;
  font-weight: 500;
  line-height: 1.4;
}

/* legacy classes kept harmless */
.channel-chips, .feat-visual, .mini-dash, .mini-rows, .mini-row, .mini-bar { display: none !important; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how-section {
  padding: 140px 0;
  background: var(--bg-soft);
}
.how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
.how-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.how-step {
  border-radius: var(--radius-md);
  padding: 28px 32px;
  cursor: pointer;
  transition: all .3s var(--ease);
  border: 1px solid transparent;
  background: transparent;
}
.how-step.active {
  background: #fff;
  border-color: #EEE3F5;
  box-shadow: 0 12px 30px -10px rgba(138,43,226,0.15);
}
.how-step-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
}
.how-num {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid #E6D5F0;
  color: #8A2BE2;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .3s;
}
.how-step.active .how-num {
  background: var(--brand-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -4px rgba(224,23,143,0.4);
}
.how-step-title { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #0A0A0A; }
.how-step-desc {
  color: #5A5360;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 12px;
  padding-left: 60px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all .35s var(--ease);
}
.how-step.active .how-step-desc {
  max-height: 140px;
  opacity: 1;
  margin-top: 14px;
}

.how-visual {
  border-radius: var(--radius-lg);
  background: #0F0C16;
  padding: 24px;
  box-shadow: 0 40px 80px -30px rgba(138,43,226,0.4);
  min-height: 520px;
  position: sticky;
  top: 120px;
  overflow: hidden;
}

.how-visual-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 472px;
  border-radius: 18px;
  background: linear-gradient(180deg, #1A1625 0%, #0E0B14 100%);
  border: 1px solid var(--line-dark-2);
  padding: 20px;
  overflow: hidden;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonial-section {
  background: var(--bg-ink);
  padding: 140px 0;
}

/* Video testimonials — 5 vertical Shorts in a single row, equal size. */
.video-testimonials-section .sec-header {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.video-testimonials-section .sec-title,
.video-testimonials-section .sec-sub,
.video-testimonials-section .sec-eyebrow {
  text-align: center;
}
.video-testimonials {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.video-short {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 16px;
  overflow: hidden;
  background: #0A070F;
  box-shadow: 0 20px 50px -20px rgba(138,43,226,0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.video-short:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -20px rgba(224,23,143,0.45);
}
.video-short iframe,
.video-short video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #0A070F;
}
@media (max-width: 980px) {
  .video-testimonials { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .video-testimonials > .video-short:nth-child(4),
  .video-testimonials > .video-short:nth-child(5) {
    grid-column: span 1;
  }
}
@media (max-width: 640px) {
  .video-testimonials { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .video-testimonials { grid-template-columns: 1fr; }
  .video-short { border-radius: 12px; }
}

/* Thai variant: 4 videos instead of 5 — use 4-column desktop / 2x2 tablet */
html[lang="th"] .video-testimonials {
  grid-template-columns: repeat(4, 1fr);
  max-width: 900px;
}
@media (max-width: 980px) {
  html[lang="th"] .video-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }
  html[lang="th"] .video-testimonials > .video-short:nth-child(4),
  html[lang="th"] .video-testimonials > .video-short:nth-child(5) {
    grid-column: auto;
  }
}
@media (max-width: 420px) {
  html[lang="th"] .video-testimonials {
    grid-template-columns: 1fr;
  }
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testimonial-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 100%);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  transition: transform .3s var(--ease), border-color .3s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  border-color: var(--line-dark-2);
}
.testimonial-stars {
  display: flex;
  gap: 2px;
  color: var(--g-yellow);
  font-size: 16px;
}
.testimonial-quote {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg);
  flex: 1;
  font-weight: 400;
}
.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line-dark);
}
.testimonial-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--brand-gradient);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-family: var(--font-en);
  font-size: 18px;
  flex-shrink: 0;
}
.testimonial-name { font-weight: 600; font-size: 15px; color: var(--fg-hi); }
.testimonial-role { font-size: 13px; color: var(--fg-low); margin-top: 2px; }

/* Streamer logo avatar — replaces the gradient initials avatar */
.testimonial-avatar-img {
  background: #fff;
  padding: 2px;
  overflow: hidden;
}
.testimonial-avatar-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ============================================================
   BRANDS — focused, light-theme, animated visual
   ============================================================ */
.brand-section-light {
  background:
    radial-gradient(900px 500px at 85% 30%, rgba(224,23,143,0.08) 0%, transparent 60%),
    radial-gradient(700px 400px at 10% 80%, rgba(255,159,28,0.06) 0%, transparent 60%),
    #FAF7F2;
  padding: 140px 0;
  color: #1A1422;
  position: relative;
  overflow: hidden;
}

.brand-section-light .brand-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: center;
}

/* LEFT — copy */
.brand-eyebrow {
  display: inline-block;
  background: rgba(224,23,143,0.10);
  color: #C00078;
  border: 1px solid rgba(224,23,143,0.20);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.brand-title {
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #0F0A18;
  margin: 22px 0 24px;
  text-wrap: pretty;
}
.brand-lead {
  font-size: 18px;
  line-height: 1.75;
  color: #4A4257;
  margin-bottom: 36px;
  max-width: 520px;
}

.brand-pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 40px;
}
.bp {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 18px;
  background: #ffffff;
  border: 1px solid rgba(20,15,30,0.08);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(20,15,30,0.04);
  transition: transform .25s var(--ease), box-shadow .25s, border-color .25s;
}
.bp:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -16px rgba(224,23,143,0.30);
  border-color: rgba(224,23,143,0.30);
}
.bp-icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFE6F2 0%, #FFE9D2 100%);
  color: #C00078;
}
.bp-icon svg { width: 20px; height: 20px; }
.bp-title {
  font-size: 15px;
  font-weight: 700;
  color: #0F0A18;
  margin-bottom: 2px;
}
.bp-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #6A6175;
}

.brand-actions {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.brand-link {
  font-size: 14px;
  font-weight: 600;
  color: #C00078;
  text-decoration: none;
  border-bottom: 1px dashed rgba(192,0,120,0.4);
  padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.brand-link:hover { color: #8A005A; border-color: #8A005A; }

/* RIGHT — animated visual stage */
.brand-visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}
.bv-stage {
  position: absolute;
  inset: 0;
}
.bv-halo {
  position: absolute;
  inset: 8% 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,23,143,0.16) 0%, rgba(255,159,28,0.08) 40%, transparent 70%);
  filter: blur(20px);
  animation: bvHaloPulse 6s ease-in-out infinite;
}
@keyframes bvHaloPulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50%      { transform: scale(1.06); opacity: 1; }
}

/* Center live frame */
.bv-frame {
  position: absolute;
  top: 50%; left: 50%;
  width: 56%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 22px;
  border: 1px solid rgba(20,15,30,0.08);
  box-shadow:
    0 30px 60px -20px rgba(224,23,143,0.25),
    0 12px 28px -12px rgba(20,15,30,0.18);
  overflow: hidden;
  z-index: 3;
  animation: bvFrameFloat 5s ease-in-out infinite;
}
@keyframes bvFrameFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 8px)); }
}
.bv-frame-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #0F0A18;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.bv-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FF3B6F;
  box-shadow: 0 0 0 0 rgba(255,59,111,0.6);
  animation: bvLivePulse 1.4s ease-out infinite;
}
@keyframes bvLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,59,111,0.7); }
  100% { box-shadow: 0 0 0 10px rgba(255,59,111,0); }
}
.bv-live { letter-spacing: 0.1em; font-size: 11px; }
.bv-viewers { margin-left: auto; opacity: 0.75; font-weight: 500; font-size: 11px; }

.bv-frame-body {
  position: relative;
  height: 140px;
  background:
    linear-gradient(135deg, #1A1422 0%, #2D1F3F 100%);
  overflow: hidden;
}
.bv-mode {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, #EC0677 0%, #FF9F1C 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  opacity: 0;
  animation: bvModeRotate 12s linear infinite;
}
.bv-mode-1 { animation-delay: 0s; }
.bv-mode-2 { animation-delay: 3s; }
.bv-mode-3 { animation-delay: 6s; }
.bv-mode-4 { animation-delay: 9s; }
@keyframes bvModeRotate {
  0%   { opacity: 0; transform: translate(-50%, -30%); }
  6%   { opacity: 1; transform: translate(-50%, -50%); }
  22%  { opacity: 1; transform: translate(-50%, -50%); }
  28%  { opacity: 0; transform: translate(-50%, -70%); }
  100% { opacity: 0; transform: translate(-50%, -70%); }
}

.bv-frame-foot {
  display: flex;
  gap: 0;
  padding: 14px 16px;
  background: #fff;
  border-top: 1px solid rgba(20,15,30,0.06);
}
.bv-stat { flex: 1; text-align: center; }
.bv-stat + .bv-stat { border-left: 1px solid rgba(20,15,30,0.06); }
.bv-stat-num {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0F0A18;
  letter-spacing: -0.02em;
  line-height: 1;
}
.bv-stat-lbl {
  font-size: 11px;
  color: #7A7289;
  margin-top: 4px;
}

/* Floating product chips (orbiting) */
.bv-chip {
  position: absolute;
  z-index: 2;
  animation: bvChipFloat 4s ease-in-out infinite;
}
.bv-chip-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid rgba(20,15,30,0.08);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #0F0A18;
  box-shadow: 0 10px 24px -10px rgba(20,15,30,0.18);
  white-space: nowrap;
}
.bv-chip-tag::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EC0677 0%, #FF9F1C 100%);
}
.bv-chip-1 { top: 10%;  left: 8%;   animation-delay: 0s; }
.bv-chip-2 { top: 18%;  right: 4%;  animation-delay: 0.7s; }
.bv-chip-3 { top: 50%;  left: 0%;   animation-delay: 1.4s; }
.bv-chip-4 { top: 62%;  right: 0%;  animation-delay: 2.1s; }
.bv-chip-5 { bottom: 8%; left: 18%; animation-delay: 2.8s; }
.bv-chip-6 { bottom: 14%; right: 14%; animation-delay: 3.5s; }
@keyframes bvChipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* Orbit arcs */
.bv-arcs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.bv-arc {
  transform-origin: 300px 300px;
  animation: bvArcSpin 60s linear infinite;
}
.bv-arc-2 { animation-duration: 80s; animation-direction: reverse; }
@keyframes bvArcSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 980px) {
  .brand-section-light { padding: 100px 0; }
  .brand-section-light .brand-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .brand-visual { max-width: 480px; }
  .brand-pills { grid-template-columns: 1fr; }
  .brand-actions { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ============================================================
   CTA — final
   ============================================================ */
.cta-section {
  padding: 100px 0 140px;
  background: var(--bg-ink);
  position: relative;
  overflow: hidden;
}
.cta-box {
  position: relative;
  border-radius: var(--radius-xl);
  padding: 100px 80px;
  background: var(--brand-gradient);
  background-size: 200% 200%;
  animation: gradShift 12s ease-in-out infinite;
  overflow: hidden;
  text-align: center;
}
.cta-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 40% at 20% 20%, rgba(255,255,255,0.3) 0%, transparent 60%),
    radial-gradient(30% 40% at 80% 80%, rgba(0,0,0,0.2) 0%, transparent 60%);
  pointer-events: none;
}
.cta-title {
  position: relative;
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: 20px;
}
.cta-sub {
  position: relative;
  font-size: 18px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 40px;
  max-width: 560px;
  margin-left: auto; margin-right: auto;
}
.cta-actions {
  position: relative;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.cta-box .btn-dark { background: #0A0A0A; }
.cta-note {
  position: relative;
  margin-top: 28px;
  color: rgba(255,255,255,0.75);
  font-size: 13.5px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: #05040A;
  color: var(--fg-mid);
  padding: 80px 0 40px;
  border-top: 1px solid var(--line-dark);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-brand img { height: 50px; margin-bottom: 20px; }
.footer-about {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-low);
  max-width: 320px;
}
.footer-col h5 {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-hi);
  margin-bottom: 18px;
  letter-spacing: .02em;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  color: var(--fg-mid);
  font-size: 14px;
  transition: color .2s;
}
.footer-col a:hover { color: var(--fg-hi); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  font-size: 13px;
  color: var(--fg-low);
  flex-wrap: wrap;
  gap: 16px;
}
.footer-socials { display: flex; gap: 12px; }

/* Footer v2 — refined structure with legal row */
.footer-v2 .footer-top {
  display: grid;
  grid-template-columns: 1.4fr 2fr;
  gap: 80px;
  padding-bottom: 56px;
  border-bottom: 1px solid var(--line-dark);
}
.footer-v2 .footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-content: start;
}
.footer-contact {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-low);
}
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line-dark);
  font-size: 12px;
}
.footer-legal a {
  color: var(--fg-low);
  transition: color .2s;
}
.footer-legal a:hover { color: var(--fg-hi); }
.footer-legal-sep {
  flex-basis: 100%;
  height: 0;
  display: none;
}
.footer-v2 .footer-bottom {
  padding-top: 24px;
  border-top: none;
  font-size: 12px;
  color: var(--fg-low);
}

@media (max-width: 880px) {
  .footer-v2 .footer-top {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .footer-v2 .footer-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}
.footer-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line-dark);
  display: grid;
  place-items: center;
  transition: all .2s;
}
.footer-social:hover { background: rgba(255,255,255,0.1); border-color: var(--line-dark-2); }

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: .08s; }
.reveal.delay-2 { transition-delay: .16s; }
.reveal.delay-3 { transition-delay: .24s; }
.reveal.delay-4 { transition-delay: .32s; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { padding: 140px 0 80px; }
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .hero-visual { margin: 0 auto; max-width: 420px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stats numbers have hard-coded inline `style="font-size: 75px"` —
     override via !important so they fit a half-width mobile card. */
  .stat-card { padding: 24px 16px; }
  .stat-num { font-size: 38px !important; letter-spacing: -0.03em; }
  .stat-suffix { font-size: 14px; }
  .stat-label { font-size: 12px; }
  .features-grid { grid-template-columns: 1fr; }
  .feature-card.span-6, .feature-card.span-4, .feature-card.span-8 { grid-column: span 1; }
  .how-grid { grid-template-columns: 1fr; gap: 40px; }
  .how-visual { min-height: 380px; position: static; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cta-box { padding: 60px 32px; }
  .section { padding: 80px 0; }

  /* === Mobile / iPad nav drawer ====================================== */
  .nav-burger { display: inline-flex; }
  .nav-inner { gap: 16px; flex-wrap: nowrap; }
  .nav-right .btn-sm { padding: 0 14px; height: 36px; font-size: 13px; }
  .nav-lang-wrap { display: none; } /* keep nav compact; lang menu still in drawer */

  .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    position: fixed;
    top: 90px;
    left: 16px; right: 16px;
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid #EFE6F2;
    border-radius: 18px;
    box-shadow: 0 24px 48px -16px rgba(20,17,28,0.18);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .25s var(--ease), opacity .2s;
    z-index: 99;
  }
  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* Drawer link styling — !important to beat dark-nav's white-link rule
     in streamers.css, since drawer background is always light. */
  .nav-links a,
  body.dark-nav .nav:not(.scrolled) .nav-links a {
    color: #14111C !important;
    font-size: 16px;
    font-weight: 600;
    padding: 14px 14px;
    border-radius: 10px;
    background: transparent !important;
  }
  .nav-links a:hover,
  body.dark-nav .nav:not(.scrolled) .nav-links a:hover {
    color: #14111C !important;
    background: rgba(20,17,28,0.04) !important;
  }
  /* Active = colour change only, no pill background */
  .nav-links a.active,
  body.dark-nav .nav:not(.scrolled) .nav-links a.active {
    color: #EC0677 !important;
    background: transparent !important;
  }

  /* Language switcher inside drawer — collapsible dropdown */
  .nav-links-lang {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #EFE6F2;
  }
  .nav-links-lang-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 14px 14px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    color: #14111C;
    cursor: pointer;
    text-align: left;
  }
  .nav-links-lang-toggle:hover { background: rgba(20,17,28,0.04); }
  .nav-links-lang-toggle > span { flex: 1; }
  .nav-links-lang-caret {
    transition: transform .25s var(--ease);
    color: #7A7289;
  }
  .nav-links-lang.open .nav-links-lang-caret {
    transform: rotate(180deg);
  }
  .nav-links-lang-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .nav-links-lang.open .nav-links-lang-list {
    max-height: 240px;     /* enough for 4 options */
    margin-top: 4px;
  }
  .nav-links-lang-list a {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 14px 10px 40px !important;  /* indent from toggle */
    color: #4A4255 !important;
  }
  .nav-links-lang-list a:hover {
    background: rgba(138,43,226,0.06) !important;
    color: #14111C !important;
  }
}

/* On desktop, the in-drawer language section is hidden (the regular
   .nav-lang-wrap dropdown shows instead). */
@media (min-width: 961px) {
  .nav-links-lang { display: none; }
}

/* ============================================================
   TWEAKS PANEL — hero product picker
   ============================================================ */
#tweaksPanel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(230,213,240,0.8);
  border-radius: 18px;
  box-shadow:
    0 30px 80px -20px rgba(138,43,226,0.28),
    0 4px 12px rgba(20,17,28,0.06),
    0 0 0 1px rgba(255,255,255,0.7) inset;
  z-index: 9999;
  font-family: var(--font-zh);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
#tweaksPanel.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
#tweaksPanel .tw-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(230,213,240,0.5);
}
#tweaksPanel .tw-title {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #14111C;
  text-transform: uppercase;
}
#tweaksPanel .tw-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 18px;
  color: #6B6377;
  background: rgba(230,213,240,0.4);
  transition: all .2s var(--ease);
}
#tweaksPanel .tw-close:hover {
  background: var(--brand-gradient);
  color: #fff;
}
#tweaksPanel .tw-section { padding: 16px 18px 18px; }
#tweaksPanel .tw-label {
  font-size: 12px;
  font-weight: 600;
  color: #6B6377;
  margin-bottom: 12px;
}
#tweaksPanel .tw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
#tweaksPanel .tw-prod {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-radius: 12px;
  background: rgba(248,243,251,0.7);
  border: 1.5px solid transparent;
  transition: all .2s var(--ease);
}
#tweaksPanel .tw-prod:hover {
  background: #fff;
  border-color: rgba(196,166,255,0.5);
  transform: translateY(-2px);
}
#tweaksPanel .tw-prod.active {
  background: #fff;
  border-color: #8A2BE2;
  box-shadow: 0 6px 16px -6px rgba(138,43,226,0.35);
}
#tweaksPanel .tw-prod-img {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #FBF7FE, #F4ECFA);
  border-radius: 8px;
  overflow: hidden;
}
#tweaksPanel .tw-prod-img img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
}
#tweaksPanel .tw-prod-name {
  font-size: 11px;
  color: #14111C;
  font-weight: 600;
}
#tweaksPanel .tw-hint {
  margin-top: 12px;
  font-size: 11px;
  color: #8A2BE2;
  text-align: center;
  letter-spacing: 0.02em;
}

/* ---- Layout editor extensions ---- */
#tweaksPanel .tw-layer {
  background: rgba(248,243,251,0.7);
  border: 1px solid rgba(230,213,240,0.7);
  border-radius: 12px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
}
#tweaksPanel .tw-layer-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
#tweaksPanel .tw-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
#tweaksPanel .tw-dot-bg     { background: linear-gradient(135deg, #FFB8D9, #FF6FB8); }
#tweaksPanel .tw-dot-phone  { background: linear-gradient(135deg, #C4A6FF, #8A2BE2); }
#tweaksPanel .tw-dot-podium { background: linear-gradient(135deg, #E0E0E0, #A0A0A0); }
#tweaksPanel .tw-layer-name {
  flex: 1;
  font-size: 13px; font-weight: 700; color: #14111C;
}
#tweaksPanel .tw-reset, #tweaksPanel .tw-reset-all {
  font-size: 11px; color: #8A2BE2;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(138,43,226,0.08);
  transition: all .2s var(--ease);
}
#tweaksPanel .tw-reset:hover, #tweaksPanel .tw-reset-all:hover {
  background: var(--brand-gradient); color: #fff;
}
#tweaksPanel .tw-reset-all {
  display: block; width: 100%;
  padding: 8px; margin-top: 4px;
  font-weight: 600; font-size: 12px;
}
#tweaksPanel .tw-row {
  display: grid;
  grid-template-columns: 30px 1fr 44px;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
#tweaksPanel .tw-row label {
  font-size: 11px; font-weight: 600; color: #6B6377;
}
#tweaksPanel .tw-row input[type=range] {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, #E6D5F0, #C4A6FF);
  outline: none;
}
#tweaksPanel .tw-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  border: 2px solid #8A2BE2;
  box-shadow: 0 2px 6px rgba(138,43,226,0.3);
  cursor: pointer;
}
#tweaksPanel .tw-row input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff;
  border: 2px solid #8A2BE2;
  box-shadow: 0 2px 6px rgba(138,43,226,0.3);
  cursor: pointer;
}
#tweaksPanel .tw-val {
  font-family: var(--font-en);
  font-size: 11px; font-weight: 700; color: #14111C;
  text-align: right;
}

/* ---- Editing affordances on the canvas ---- */
body.tw-editing .tw-editable {
  outline: 1.5px dashed rgba(138,43,226,0.55);
  outline-offset: 2px;
  cursor: move;
  transition: outline-color .2s;
}
body.tw-editing .tw-editable:hover {
  outline-color: #8A2BE2;
  outline-style: solid;
}
.tw-resize {
  position: fixed;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #8A2BE2;
  box-shadow: 0 4px 10px rgba(138,43,226,0.35);
  cursor: nwse-resize;
  z-index: 9998;
  display: none;
}
body.tw-editing .tw-resize {
  display: block;
}
.tw-resize::after {
  content: '⤡';
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 12px; color: #8A2BE2;
  font-weight: 700;
}

/* ============================================================
   WIDE-SCREEN RESPONSIVE — scale container + display titles up
   on ultra-wide monitors so content doesn't sit in a tiny strip
   in the centre of a 2500–4000px canvas.
   ============================================================ */
@media (min-width: 1600px) {
  :root {
    --container: 1440px;
  }
}
@media (min-width: 2000px) {
  :root {
    --container: 1600px;
    --text-display-1: clamp(48px, 5vw, 104px);
    --text-display-2: clamp(36px, 4.4vw, 80px);
    --text-h1:        clamp(32px, 3.4vw, 64px);
    --text-h2:        clamp(28px, 2.8vw, 48px);
  }
  /* Hero / display titles that are hard-coded with clamp() — uplift */
  .stage-title    { font-size: clamp(48px, 5vw, 104px) !important; }
  .nw-hero-title  { font-size: clamp(48px, 5vw, 104px) !important; }
  .pr-hero-title  { font-size: clamp(48px, 5vw, 104px) !important; }
  .prod-hero-title{ font-size: clamp(44px, 4.8vw, 100px) !important; }
  .b-hero-title   { font-size: clamp(44px, 4.8vw, 100px) !important; }
  .s-hero-title   { font-size: clamp(44px, 4.8vw, 100px) !important; }
  .cu-hero-title  { font-size: clamp(40px, 4.4vw, 88px) !important; }
  .lg-pagehead-title { font-size: clamp(32px, 3.4vw, 64px) !important; }
}
@media (min-width: 2800px) {
  :root {
    --container: 1800px;
  }
}

/* ============================================================
   MOBILE RWD FIXES (≤ 640px)
   Targeted: heading word-break, hero clutter, brand-video chips,
   feature pillar layout, CTA title sizing
   ============================================================ */
@media (max-width: 640px) {
  /* Unified title sizing on mobile — sec / brand / cta all align visually */
  .sec-title,
  .brand-title {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.015em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }
  .cta-title {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }
  .sec-sub, .cta-sub, .brand-lead { font-size: 15px; line-height: 1.7; }

  /* Hero — reduce floating clutter so the product image isn't crowded */
  .cmt-2, .cmt-3 { display: none; }
  .stat-conv { display: none; }

  /* 太美了吧 (cmt-1) on bottom-left near the platform, opposite the 10K+ card.
     Boost card stays mid-left. A01 +1! hidden. */
  .cmt-1 {
    top: auto !important;
    bottom: calc(18% + 96px + var(--cmt1-y, 0px)) !important;
    left: 12px !important;
    right: auto !important;
  }
  .stat-boost {
    /* Sit at same vertical level as 本場 GMV (stat-sales), but on the left */
    top: calc(12% + 472px + var(--boost-y, 0px)) !important;
    bottom: auto !important;
    left: 8px !important;
    right: auto !important;
    width: 158px !important;
  }
  /* en + th: CTA wraps to 2 stacked lines, so the hero stage's whole visual
     band shifts down (see padding-top on .product-stage above). The boost
     card needs an additional downward nudge beyond the global mobile rule —
     otherwise it visually overlaps the phone's LIVE 12.8K badge. Pushes
     boost ~60px lower (top: 472 → 532). Was 592 but pulled back after the
     mobile hero description font shrank (19→15px) freed up vertical space. */
  html[lang="en"] .stat-boost,
  html[lang="th"] .stat-boost {
    top: calc(12% + 532px + var(--boost-y, 0px)) !important;
  }
  .cmt-4 { display: none !important; }

  /* Pull the sales (本場 GMV) card in from the right edge */
  .stat-sales {
    right: 8px !important;
    left: auto !important;
    width: 152px !important;
  }

  /* Brand-video frame: shrink + reposition chips to avoid overlap */
  .bv-stage { padding: 20px 0; }
  .bv-frame { width: 70%; max-width: 280px; }
  .bv-chip-tag { font-size: 11px; padding: 6px 10px; }
  .bv-chip-1 { top: 2%;   left: 2%; }
  .bv-chip-2 { top: 2%;   right: 2%; }
  .bv-chip-3 { top: auto; bottom: 36%; left: -2%; }
  .bv-chip-4 { top: auto; bottom: 36%; right: -2%; }
  .bv-chip-5 { bottom: 2%; left: 8%; }
  .bv-chip-6 { bottom: 2%; right: 8%; }

  /* Stage-features (4 hero pillars) — centered, clearer layout */
  .stage-features {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 14px;
    padding: 8px 0 0;
  }
  .sf {
    gap: 10px;
    align-items: center;
    text-align: center;
  }
  .sf-ico {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #EC0677 0%, #8A2BE2 100%);
    color: #fff;
    margin: 0 auto;
  }
  .sf-ico svg { width: 20px; height: 20px; }
  .sf-title { font-size: 15px; font-weight: 800; }
  .sf-desc { font-size: 12.5px; line-height: 1.55; color: #5A5466; }
}

@media (max-width: 380px) {
  .sec-title, .brand-title { font-size: 26px; }
  .cta-title { font-size: 24px; }
}

/* ============================================================
   MOBILE SECTION SPACING — tighten vertical gaps sitewide
   ============================================================ */
@media (max-width: 640px) {
  /* Generic section vertical padding compress */
  section,
  .section,
  .features-section,
  .stats-section,
  .testimonials-section,
  .video-testimonials-section,
  .marquee-section,
  .ab-hero, .ab-manifesto, .ab-timeline, .ab-global, .ab-cta,
  .b-hero, .b-service, .b-modes, .b-faq, .b-cta,
  .pr-hero, .pr-toggle-wrap, .pr-plans, .pr-addon, .pr-faq, .pr-cta,
  .cu-hero, .cu-form-section, .cu-offices, .cu-cta,
  .s-hero, .s-pain, .s-day, .s-results, .s-calc, .s-voices, .s-cta,
  .prod-hero, .prod-stats-band, .prod-features, .prod-stack, .prod-cta {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  /* Hero sections need a touch more breathing room from sticky nav */
  .s-hero, .b-hero, .ab-hero, .pr-hero, .cu-hero, .prod-hero, .hero-stage {
    padding-top: 88px !important;
  }
  /* Some sections have decorative spacing on top only or bottom only */
  .ab-cta, .b-cta, .pr-cta, .cu-cta, .s-cta, .prod-cta {
    padding-top: 64px !important;
    padding-bottom: 72px !important;
  }

  /* Universal h2 fallback — for page-specific h2s not covered by sec-title */
  h2:not(.sec-title):not(.brand-title):not(.cta-title) {
    font-size: 28px;
    line-height: 1.25;
    font-weight: 800;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }
  h1 {
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: pretty;
    hanging-punctuation: allow-end;
  }
}

/* ============================================================
   MOBILE — comprehensive overrides (about / brand-manifesto /
   timeline / legal / about stat-num gradient / etc.)
   ============================================================ */
@media (max-width: 640px) {
  /* Compress decorative head wrappers but keep breathing room between title and body */
  /* NOTE: .ab-manifesto-grid is display:block — gap doesn't work; use padding instead */
  .ab-manifesto-head { min-height: 0 !important; padding: 8px 0 36px !important; }
  .ab-manifesto-head .ab-eyebrow { margin-bottom: 14px !important; }
  .ab-manifesto-head h2 { margin: 0 !important; }
  .ab-manifesto-watermark { width: 260px !important; opacity: 0.10 !important; }
  .ab-manifesto-body { padding: 0 !important; }

  /* Timeline — keep card in viewport AND align dots/line precisely */
  .ab-timeline-list { padding-left: 28px !important; }
  .ab-timeline-list::before { left: 7px !important; width: 2px !important; }
  .ab-tl-item { gap: 14px !important; }
  .ab-tl-item::before { left: -29px !important; width: 16px !important; height: 16px !important; border-width: 2.5px !important; }
  .ab-tl-item[data-current="true"]::after { left: -29px !important; width: 16px !important; height: 16px !important; }
  .ab-tl-year { font-size: 13px !important; }
  .ab-tl-card { padding: 14px !important; }
  .ab-tl-event { font-size: 13.5px !important; line-height: 1.55 !important; }

  /* Pricing: tighten the gap between toggle and first plan card */
  .pr-toggle-wrap { padding-top: 24px !important; padding-bottom: 16px !important; }
  .pr-plans { padding-top: 12px !important; padding-bottom: 56px !important; }
  body[data-theme="light-premium"] .pr-plans { padding: 12px 0 56px !important; }

  /* Contact us: tighten gap between form-section and offices */
  .cu-form-section { padding-bottom: 32px !important; }
  .cu-offices { padding-top: 32px !important; }

  /* About stats gradient now handled in about.css (applies on all screens) */

  /* Container padding tighter on phones to reclaim right-side whitespace */
  .container { padding-left: 18px !important; padding-right: 18px !important; }

  /* Legal page bullet lists: kill extra right padding causing empty column */
  .lg-section ul, .lg-section ol { padding-left: 20px !important; padding-right: 0 !important; }
  .lg-section li { padding-right: 0 !important; }
  .lg-block, .lg-card { padding: 18px !important; }
}

/* Apply gradient to home stat numbers too (consistency reference) */
.stat-num {
  font-variant-numeric: tabular-nums;
}

/* TH typography fix: Thai script has stacked vowel marks (above main
   glyph: ◌ิ ◌ี ◌ื ◌ู ◌ุ etc.) AND tone marks that stack on top of those
   (◌่ ◌้ ◌๊ ◌๋). The 0.98-1.10 line-heights tuned for zh/en cause the
   upper line's descenders/below-marks to crash into the next line's
   ascenders/above-marks in Thai display type. Bump all hero / section /
   CTA titles to line-height: 1.35 — industry baseline for Thai. */
html[lang="th"] .stage-title,
html[lang="th"] .sec-title,
html[lang="th"] .s-hero-title,
html[lang="th"] .prod-hero-title,
html[lang="th"] .b-hero-title,
html[lang="th"] .pr-hero-title,
html[lang="th"] .ab-hero-title,
html[lang="th"] .cu-hero-title,
html[lang="th"] .nw-hero-title,
html[lang="th"] .cta-title,
html[lang="th"] .b-cta-title {
  line-height: 1.35;
}

/* TH hero h1 font-size scale-down (~80% of base). Thai display type at the
   same px size as en/zh reads visually larger (denser strokes, no kerning
   pairs reducing run length), and Thai words tend to be longer overall —
   so the unmodified clamps push hero titles into 3+ line wrap and oversize
   on every page. Each clamp(min, vw, max) is scaled by ~0.8 to fit the
   surrounding layout properly. */
html[lang="th"] .stage-title    { font-size: clamp(48px, 5.6vw, 88px); }
html[lang="th"] .s-hero-title   { font-size: clamp(44px, 5vw,   80px); }
html[lang="th"] .prod-hero-title{ font-size: clamp(44px, 5vw,   80px); }
html[lang="th"] .b-hero-title   { font-size: clamp(42px, 4.8vw, 76px); }
html[lang="th"] .pr-hero-title  { font-size: clamp(38px, 5vw,   76px); }
html[lang="th"] .ab-hero-title  { font-size: clamp(36px, 3.7vw, 54px); }
html[lang="th"] .cu-hero-title  { font-size: clamp(38px, 4.3vw, 70px); }
html[lang="th"] .nw-hero-title  { font-size: clamp(38px, 4.8vw, 68px); }

/* en + zh-Hans home: multi-platform channel viz now has 3 icons (WhatsApp
   removed from livestream contexts — Thailand uses different platforms).
   Redistribute remaining ch-1/2/3 evenly. The `calc(X% - 21px)` form
   centers each 42px icon precisely at the target % so the dashed SVG
   lines (path X=72/200/328 in a 400-wide viewBox = 18%/50%/82%) land on
   icon centers regardless of container width. zh-Hant + th still have 4
   icons and use the original 10/30/58/78 spacing. */
html[lang="en"] .ch-1,
html[lang="zh-Hans"] .ch-1 { left: calc(18% - 21px); }
html[lang="en"] .ch-2,
html[lang="zh-Hans"] .ch-2 { left: calc(50% - 21px); }
html[lang="en"] .ch-3,
html[lang="zh-Hans"] .ch-3 { left: calc(82% - 21px); }
/* TH home: same 3-icon redistribution as en/zh-Hans (LINE removed from the
   livestream multi-platform card). Centers icons at 18% / 50% / 82%. */
html[lang="th"] .ch-1 { left: calc(18% - 21px); }
html[lang="th"] .ch-2 { left: calc(50% - 21px); }
html[lang="th"] .ch-3 { left: calc(82% - 21px); }


/* TH home stats: Thai numbers (e.g. 159,000+) and suffixes (พันล้าน+) are
   longer than en/zh equivalents and overflow the .stat-card at the inline
   75/65px desktop sizes baked into th/home.html. Override per breakpoint.
   !important is required to beat the inline `style="font-size: 75px"` on
   each .stat-num span. Higher specificity (html[lang=...] vs .stat-num)
   also beats the existing mobile `.stat-num { ... !important }` rules
   elsewhere in this file. */
html[lang="th"] .stat-num {
  font-size: 56px !important;
}
@media (max-width: 960px) {
  html[lang="th"] .stat-num {
    font-size: 34px !important;
  }
}
@media (max-width: 480px) {
  html[lang="th"] .stat-num {
    font-size: 26px !important;
  }
}