/* ═══════════════════════════════════════════════════════════
   B2B Brand Marketing & Media Platform
   Design System: Professional Navy/Gold
   ═══════════════════════════════════════════════════════════ */

:root {
  --navy-900: #0A1628;
  --navy-800: #0F1D32;
  --navy-700: #162844;
  --navy-600: #1E3A5F;
  --slate-700: #334155;
  --slate-500: #64748B;
  --slate-300: #CBD5E1;
  --slate-100: #F1F5F9;
  --gold-500: #C9A94E;
  --gold-400: #D4B96A;
  --gold-300: #E0CC8B;
  --white: #FFFFFF;
  --red-500: #DC2626;
  --green-500: #16A34A;
  --blue-500: #3B82F6;

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* ── Thai / SE Asian Cultural Palette */
  --thai-purple: #5B2D8E;
  --thai-purple-light: #7B4FA0;
  --thai-jade: #3A8C6E;
  --thai-jade-light: #5CBF9A;
  --thai-red: #C41E3A;
  --thai-orange: #E8612C;
  --thai-cream: #FFF8EC;

  /* ── TikTok Brand Tokens */
  --tt-pink: #FE2C55;
  --tt-cyan: #20D5EC;
  --tt-black: #010101;
  --tt-gradient: linear-gradient(135deg, #FE2C55 0%, #20D5EC 100%);

  /* ── Animation Durations */
  --anim-slow: 4s;
  --anim-medium: 2.5s;
  --anim-fast: 0.8s;

  /* ── Pattern & Glow Opacities */
  --pattern-opacity: 0.04;
  --glow-opacity: 0.08;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  color: var(--navy-900);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-700); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--gold-500); }

img { max-width: 100%; height: auto; display: block; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.container--narrow { max-width: 800px; }
.container--wide { max-width: 1400px; }

/* ── Typography ──────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--navy-900); line-height: 1.25; }
h1 { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 2rem; font-weight: 700; }
h3 { font-size: 1.5rem; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }

.text-gold { color: var(--gold-500); }
.text-slate { color: var(--slate-500); }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.text-center { text-align: center; }
.font-serif { font-family: var(--font-serif); }
.font-bold { font-weight: 700; }

/* ── Header & Navigation ─────────────────────────────────── */
.header {
  background: var(--navy-900);
  border-bottom: 2px solid var(--gold-500);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
}
.header__logo {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.02em;
}
.header__logo span { color: var(--gold-500); }
.header__logo:hover { color: var(--white); }

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__link {
  color: var(--slate-300);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.925rem;
  font-weight: 500;
  transition: all 0.2s;
}
.nav__link:hover { color: var(--white); background: rgba(255,255,255,0.08); }
.nav__link--active { color: var(--gold-400); }
.nav__link--cta {
  background: var(--gold-500);
  color: var(--navy-900);
  font-weight: 600;
  margin-left: 0.5rem;
}
.nav__link--cta:hover { background: var(--gold-400); color: var(--navy-900); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  background: var(--navy-900);
  color: var(--slate-300);
  padding: 3rem 1.5rem 1.5rem;
  margin-top: 4rem;
  border-top: 2px solid var(--gold-500);
}
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; max-width: 1200px; margin: 0 auto; }
.footer__title { color: var(--white); font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 1rem; }
.footer a { color: var(--slate-300); font-size: 0.9rem; }
.footer a:hover { color: var(--gold-400); }
.footer__bottom { text-align: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--navy-700); font-size: 0.85rem; color: var(--slate-500); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border: none;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  line-height: 1.4;
}
.btn--primary { background: var(--gold-500); color: var(--navy-900); }
.btn--primary:hover { background: var(--gold-400); color: var(--navy-900); }
.btn--secondary { background: var(--navy-800); color: var(--white); }
.btn--secondary:hover { background: var(--navy-700); color: var(--white); }
.btn--outline { background: transparent; color: var(--navy-800); border: 2px solid var(--navy-800); }
.btn--outline:hover { background: var(--navy-800); color: var(--white); }
.btn--outline-gold { background: transparent; color: var(--gold-500); border: 2px solid var(--gold-500); }
.btn--outline-gold:hover { background: var(--gold-500); color: var(--navy-900); }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.85rem; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1.05rem; }
.btn--danger { background: var(--red-500); color: var(--white); }
.btn--danger:hover { background: #B91C1C; color: var(--white); }
.btn--block { width: 100%; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card__body { padding: 1.5rem; }
.card__title { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.5rem; }
.card__text { color: var(--slate-500); font-size: 0.925rem; line-height: 1.6; }

/* ── Grids ───────────────────────────────────────────────── */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Sections ────────────────────────────────────────────── */
.section { padding: 4rem 0; }
.section--dark { background: var(--navy-900); color: var(--white); }
.section--light { background: var(--slate-100); }
.section__title { margin-bottom: 0.75rem; }
.section__subtitle { color: var(--slate-500); font-size: 1.1rem; margin-bottom: 2.5rem; }
.section--dark .section__title { color: var(--white); }
.section--dark .section__subtitle { color: var(--slate-300); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-700) 100%);
  color: var(--white);
  padding: 5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center, rgba(201,169,78,0.18) 0%, transparent 70%);
}
.hero__inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }
.hero h1 {
  color: var(--white);
  font-size: 3rem;
  margin-bottom: 1.25rem;
  line-height: 1.2;
}
.hero h1 span { color: var(--gold-500); }
.hero__subtitle { font-size: 1.2rem; color: var(--slate-300); margin-bottom: 2.5rem; line-height: 1.7; }

/* ── Alerts / Flash Messages ─────────────────────────────── */
.alert {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  font-size: 0.925rem;
  font-weight: 500;
}
.alert--success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert--warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert--info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }

/* ── Forms ───────────────────────────────────────────────── */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.925rem; color: var(--navy-800); }
.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--slate-300);
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-family: var(--font-sans);
  transition: border-color 0.2s, box-shadow 0.2s;
  background: var(--white);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201,169,78,0.15);
}
.form-textarea { min-height: 120px; resize: vertical; }

/* ── Tables ──────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.table th {
  background: var(--navy-800);
  color: var(--white);
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--slate-300); }
.table tr:hover td { background: var(--slate-100); }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--gold { background: #FEF3C7; color: #92400E; }
.badge--green { background: #D1FAE5; color: #065F46; }
.badge--blue { background: #DBEAFE; color: #1E40AF; }
.badge--red { background: #FEE2E2; color: #991B1B; }
.badge--slate { background: #F1F5F9; color: #475569; }
.badge--navy { background: var(--navy-800); color: var(--gold-400); }

/* ── Stepper (Multi-step) ────────────────────────────────── */
.stepper { display: flex; justify-content: center; margin-bottom: 2.5rem; }
.stepper__step { display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem; }
.stepper__num {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  background: var(--slate-300); color: var(--slate-500);
}
.stepper__step--active .stepper__num { background: var(--gold-500); color: var(--navy-900); }
.stepper__step--done .stepper__num { background: var(--green-500); color: var(--white); }
.stepper__label { font-size: 0.85rem; color: var(--slate-500); font-weight: 500; }
.stepper__step--active .stepper__label { color: var(--navy-900); font-weight: 600; }
.stepper__line { flex: 1; height: 2px; background: var(--slate-300); max-width: 60px; margin: 0 0.5rem; }
.stepper__line--done { background: var(--green-500); }

/* ── Pricing / Stat Cards ────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.stat-card { background: var(--white); border: 1px solid var(--slate-300); border-radius: var(--radius-lg); padding: 1.5rem; }
.stat-card__value { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; color: var(--navy-900); }
.stat-card__label { color: var(--slate-500); font-size: 0.875rem; margin-top: 0.25rem; }

/* ── Pricing Box ─────────────────────────────────────────── */
.pricing-box { background: var(--slate-100); border-radius: var(--radius-lg); padding: 1.5rem; }
.pricing-box__row { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.95rem; }
.pricing-box__row--total { border-top: 2px solid var(--navy-800); margin-top: 0.5rem; padding-top: 0.75rem; font-weight: 700; font-size: 1.1rem; }

/* ── Score bar ───────────────────────────────────────────── */
.score-bar { display: flex; align-items: center; gap: 0.75rem; }
.score-bar__track { flex: 1; height: 8px; background: var(--slate-300); border-radius: 4px; overflow: hidden; }
.score-bar__fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.score-bar__fill--high { background: var(--green-500); }
.score-bar__fill--mid { background: var(--gold-500); }
.score-bar__fill--low { background: var(--red-500); }
.score-bar__value { font-weight: 700; font-size: 0.9rem; min-width: 42px; text-align: right; }

/* ── Live Viewer ─────────────────────────────────────────── */
.live-viewer { display: grid; grid-template-columns: 1fr 320px; gap: 0; min-height: calc(100vh - 69px); }
.live-player { position: relative; background: #000; aspect-ratio: 16/9; }
.live-player__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; color: var(--slate-500);
}
.live-player__placeholder-icon { font-size: 4rem; margin-bottom: 1rem; opacity: 0.4; }
.brand-overlay {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s;
}
.brand-overlay--top-left { top: 16px; left: 16px; }
.brand-overlay--top-right { top: 16px; right: 16px; }
.brand-overlay--bottom-left { bottom: 16px; left: 16px; }
.brand-overlay--bottom-right { bottom: 16px; right: 16px; }
.brand-overlay--center-bottom { bottom: 16px; left: 50%; transform: translateX(-50%); }
.brand-overlay__content {
  background: rgba(0,0,0,0.6);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid rgba(201,169,78,0.3);
}
.brand-overlay img { max-height: 48px; }

.live-sidebar { background: var(--navy-900); color: var(--white); padding: 1.25rem; overflow-y: auto; }
.live-sidebar__title { color: var(--gold-400); font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 1rem; }
.live-metric { display: flex; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--navy-700); font-size: 0.9rem; }
.live-metric__value { color: var(--gold-400); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   Animations — @keyframes
   ═══════════════════════════════════════════════════════════ */

/* Ring light pulse */
@keyframes ringGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.06); }
}
@keyframes ringGlowSlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Audio waveform bars */
@keyframes waveformUp {
  0%, 100% { height: 20%; }
  50% { height: 100%; }
}
@keyframes waveformUpAlt {
  0%, 100% { height: 60%; }
  50% { height: 15%; }
}

/* LIVE badge pulse */
@keyframes liveBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
  70% { box-shadow: 0 0 0 8px rgba(220,38,38,0); }
}
@keyframes liveDot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Recording camera blink */
@keyframes cameraBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px #DC2626; }
  50% { opacity: 0.4; box-shadow: 0 0 1px #DC2626; }
}

/* Stream overlay corner glow */
@keyframes cornerGlow {
  0%, 100% { border-color: rgba(201,169,78,0.4); }
  50% { border-color: rgba(201,169,78,0.85); }
}

/* Floating elements (notes, hearts) */
@keyframes noteFloat {
  0% { transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.8; }
  75% { opacity: 0.6; }
  100% { transform: translateY(-80px) rotate(20deg); opacity: 0; }
}

/* Thai gold foil shimmer */
@keyframes laiShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Gentle float */
@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* TikTok gradient shift */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Chat bubble pop-in */
@keyframes chatBubblePop {
  0% { transform: translateY(15px) scale(0.85); opacity: 0; }
  50% { transform: translateY(-3px) scale(1.02); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Floating preview trigger pulse */
@keyframes fpPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(254,44,85,0.5); }
  60% { box-shadow: 0 0 0 12px rgba(254,44,85,0); }
}

/* ═══════════════════════════════════════════════════════════
   Background Patterns
   ═══════════════════════════════════════════════════════════ */

/* Thai Lai Thai diamond grid */
.bg-pattern-lai {
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 6px,
      rgba(201,169,78, 0.04) 6px,
      rgba(201,169,78, 0.04) 7px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 6px,
      rgba(201,169,78, 0.04) 6px,
      rgba(201,169,78, 0.04) 7px);
}
.bg-pattern-lai-dense {
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 4px,
      rgba(201,169,78, 0.04) 4px,
      rgba(201,169,78, 0.04) 5px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 4px,
      rgba(201,169,78, 0.04) 4px,
      rgba(201,169,78, 0.04) 5px);
}

/* Lotus / mandala circles */
.bg-pattern-lotus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Ccircle cx='30' cy='30' r='8' fill='none' stroke='rgba(201,169,78,0.25)' stroke-width='0.5'/%3E%3Ccircle cx='30' cy='30' r='18' fill='none' stroke='rgba(201,169,78,0.18)' stroke-width='0.3'/%3E%3Ccircle cx='30' cy='30' r='28' fill='none' stroke='rgba(201,169,78,0.12)' stroke-width='0.2'/%3E%3C/svg%3E");
  background-size: 60px 60px;
}

/* Elephant silhouette pattern */
.bg-pattern-elephant {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='48' viewBox='0 0 80 48'%3E%3Cpath d='M15 42 Q10 38 8 30 Q6 22 10 16 Q12 12 18 10 L22 8 Q24 4 28 4 Q32 4 34 8 L38 14 Q36 20 34 24 L44 24 Q44 14 46 8 Q46 4 50 4 Q54 4 54 8 L56 14 Q58 16 62 18 Q68 20 70 26 Q72 30 68 34 L64 38 L56 38 Q58 34 58 30 L60 26 Q58 24 54 24 L34 24 Q32 28 30 32 Q28 36 24 38 L26 42 L15 42Z' fill='rgba(201,169,78,0.15)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 80px 48px;
}

/* Ring light glow */
.bg-ring-glow {
  position: relative;
}
.bg-ring-glow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; height: 80%;
  max-width: 600px; max-height: 600px;
  background: radial-gradient(circle at center,
    rgba(201,169,78, 0.08) 0%,
    rgba(201,169,78, 0.04) 35%,
    transparent 70%);
  border-radius: 50%;
  animation: ringGlow var(--anim-slow) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Audio waveform bottom bar */
.bg-waveform {
  position: relative;
  overflow: hidden;
}
.bg-waveform::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 40px;
  background: linear-gradient(to top,
    rgba(254,44,85,0.22) 0%,
    rgba(32,213,236,0.15) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Temple spire silhouettes */
.bg-spire {
  position: relative;
  overflow: hidden;
}
.bg-spire::before {
  content: '';
  position: absolute;
  bottom: 0; right: 5%;
  width: 0; height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 80px solid rgba(201,169,78,0.15);
  pointer-events: none;
  z-index: 0;
}
.bg-spire::after {
  content: '';
  position: absolute;
  bottom: 0; right: calc(5% + 15px);
  width: 0; height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 50px solid rgba(201,169,78,0.18);
  pointer-events: none;
  z-index: 0;
}

/* ═══════════════════════════════════════════════════════════
   Decorative Components
   ═══════════════════════════════════════════════════════════ */

/* Stream overlay corner brackets */
.deco-corners {
  position: relative;
}
.deco-corners::before,
.deco-corners::after {
  content: '';
  position: absolute;
  width: 36px; height: 36px;
  pointer-events: none;
  z-index: 2;
  animation: cornerGlow var(--anim-medium) ease-in-out infinite alternate;
}
.deco-corners::before {
  top: 10px; left: 10px;
  border-top: 2px solid var(--gold-500);
  border-left: 2px solid var(--gold-500);
}
.deco-corners::after {
  top: 10px; right: 10px;
  border-top: 2px solid var(--gold-500);
  border-right: 2px solid var(--gold-500);
}

/* Thai-style diamond divider */
.deco-divider-thai {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2.5rem 0;
}
.deco-divider-thai::before,
.deco-divider-thai::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--gold-500),
    transparent);
}
.deco-divider-thai__center {
  width: 10px; height: 10px;
  background: var(--gold-500);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* LIVE badge */
.badge--live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #DC2626;
  color: #FFFFFF;
  animation: liveBadgePulse 2s ease-in-out infinite;
}
.badge--live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
  animation: liveDot 1s ease-in-out infinite;
}

/* TikTok gradient badge */
.badge--tt {
  background: var(--tt-gradient);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
}

/* Gold shimmer on card hover */
.card--shimmer {
  position: relative;
  overflow: hidden;
}
.card--shimmer::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,169,78,0.1) 45%,
    rgba(201,169,78,0.16) 50%,
    rgba(201,169,78,0.1) 55%,
    transparent 100%);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 1;
}
.card--shimmer:hover::after {
  left: 100%;
}

/* TikTok gradient overlay */
.overlay-tt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 60%,
    rgba(1,1,1,0.7) 100%);
  pointer-events: none;
}

/* Thai multi-color border stripe */
.deco-border-thai {
  border: 1px solid rgba(201,169,78,0.2);
  position: relative;
}
.deco-border-thai::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: repeating-linear-gradient(90deg,
    var(--gold-500) 0px,
    var(--gold-500) 8px,
    transparent 8px,
    transparent 12px,
    var(--thai-jade) 12px,
    var(--thai-jade) 14px,
    transparent 14px,
    transparent 18px,
    var(--thai-red) 18px,
    var(--thai-red) 20px,
    transparent 20px,
    transparent 24px);
  pointer-events: none;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════
   Waveform Visualizer Component
   ═══════════════════════════════════════════════════════════ */

.waveform {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  opacity: 0.6;
}
.waveform__bar {
  width: 3px;
  min-height: 4px;
  border-radius: 2px;
  background: var(--tt-gradient);
  background-size: 100% 200%;
  animation: waveformUp var(--anim-fast) ease-in-out infinite;
}
.waveform__bar:nth-child(1) { animation-delay: 0s; height: 60%; }
.waveform__bar:nth-child(2) { animation-delay: 0.12s; height: 40%; }
.waveform__bar:nth-child(3) { animation-delay: 0.24s; height: 80%; }
.waveform__bar:nth-child(4) { animation-delay: 0.08s; height: 50%; }
.waveform__bar:nth-child(5) { animation-delay: 0.2s; height: 35%; }
.waveform__bar:nth-child(6) { animation-delay: 0.3s; height: 70%; }
.waveform__bar:nth-child(7) { animation-delay: 0.15s; height: 45%; }
.waveform__bar:nth-child(8) { animation-delay: 0.05s; height: 90%; }

/* ═══════════════════════════════════════════════════════════
   Enhanced Section Backgrounds
   ═══════════════════════════════════════════════════════════ */

/* Warm Thai-themed section */
.section--thai {
  background: var(--thai-cream);
  position: relative;
}
.section--thai::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg,
      transparent,
      transparent 8px,
      rgba(201,169,78,0.12) 8px,
      rgba(201,169,78,0.12) 9px),
    repeating-linear-gradient(-45deg,
      transparent,
      transparent 8px,
      rgba(201,169,78,0.12) 8px,
      rgba(201,169,78,0.12) 9px);
  pointer-events: none;
  z-index: 0;
}
.section--thai > * { position: relative; z-index: 1; }

/* Streaming-themed dark section */
.section--stream {
  position: relative;
  background: var(--navy-900);
  overflow: hidden;
}
.section--stream::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(254,44,85,0.18) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 50%, rgba(32,213,236,0.18) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.section--stream > * { position: relative; z-index: 1; }

/* Ring light ambient section */
.section--ring {
  position: relative;
  overflow: hidden;
}
.section--ring::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle,
    rgba(201,169,78,0.22) 0%,
    rgba(201,169,78,0.12) 40%,
    transparent 70%);
  border-radius: 50%;
  animation: ringGlowSlow var(--anim-slow) ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.section--ring > * { position: relative; z-index: 1; }

/* TikTok-style hero */
.hero--tt {
  background: linear-gradient(135deg, #010101 0%, #162844 50%, #0A1628 100%);
  background-size: 200% 200%;
  animation: gradientShift 8s ease-in-out infinite;
}
.hero--tt::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(254,44,85,0.25) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 70%, rgba(32,213,236,0.22) 0%, transparent 50%);
  animation: gradientShift 8s ease-in-out infinite;
  z-index: 0;
}
.hero--tt .hero__inner { z-index: 1; }

/* Thai-accented hero */
.hero--thai::before {
  background:
    radial-gradient(ellipse at center, rgba(201,169,78,0.25) 0%, transparent 60%),
    radial-gradient(ellipse at 25% 80%, rgba(91,45,142,0.18) 0%, transparent 50%);
}

/* ═══════════════════════════════════════════════════════════
   Global Decorative Elements
   ═══════════════════════════════════════════════════════════ */

/* Fixed stream overlay corners on body */
.global-deco {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
}
.global-deco::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 32px; height: 32px;
  border-top: 1px solid rgba(201,169,78,0.55);
  border-left: 1px solid rgba(201,169,78,0.55);
  animation: cornerGlow var(--anim-medium) ease-in-out infinite alternate;
}
.global-deco::after {
  content: '';
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-top: 1px solid rgba(201,169,78,0.25);
  border-right: 1px solid rgba(201,169,78,0.25);
  animation: cornerGlow var(--anim-medium) ease-in-out infinite alternate;
}

/* ═══════════════════════════════════════════════════════════
   Utility
   ═══════════════════════════════════════════════════════════ */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.text-right { text-align: right; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .live-viewer { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .bg-ring-glow::before {
    width: 90%; height: 90%;
    max-width: 400px; max-height: 400px;
  }
  .section--ring::after {
    width: 500px; height: 500px;
  }
}
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.5rem; }
  .hero h1 { font-size: 2rem; }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .header__inner { flex-direction: column; gap: 0.5rem; }
  .nav { flex-wrap: wrap; justify-content: center; }
  .section { padding: 2.5rem 0; }
  /* Decorative elements — reduce on mobile */
  .deco-corners::before,
  .deco-corners::after {
    width: 24px; height: 24px;
  }
  .deco-corners::before { top: 5px; left: 5px; }
  .deco-corners::after { top: 5px; right: 5px; }
  .global-deco::before,
  .global-deco::after { display: none; }
  .waveform { display: none; }
  .bg-spire::before,
  .bg-spire::after { display: none; }
  .deco-divider-thai { margin: 1.5rem 0; }
  .section--ring::after { width: 350px; height: 350px; }
  .card--shimmer::after { display: none; }
}


/* Homepage Video Showcase -- 9:16 auto-loop */
.home-videos {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.home-videos__item {
  flex: 0 1 360px;
  text-align: center;
}
.home-videos__frame {
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
  border: 2px solid rgba(201,169,78,0.2);
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  position: relative;
}
.home-videos__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.home-videos__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(201,169,78,0.03) 50%%,
    transparent 100%);
  z-index: 1;
}
.home-videos__frame--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: var(--slate-500);
  font-size: 2rem;
  background: var(--navy-700);
}
.home-videos__frame--empty span:last-child {
  font-size: 0.9rem;
  color: var(--slate-500);
}
.home-videos__caption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--gold-400);
  font-weight: 600;
}
@media (max-width: 768px) {
  .home-videos { flex-direction: column; }
  .home-videos__frame { max-width: 300px; margin: 0 auto; }
}