:root{--color-primary: #168FEA;--color-primary-light: rgba(22, 143, 234, .16);--color-accent: #7438F2;--color-on-primary: #FFFFFF;--color-bg: #020617;--color-bg-2: #07112B;--color-bg-3: #0B0822;--color-border: rgba(38, 166, 255, .38);--color-border-subtle: rgba(116, 56, 242, .22);--color-text: #F2F7FF;--color-text-muted: #A9B9D6;--color-white: #ffffff;--brand-highlight: #23C7FF;--glass-bg: rgba(2, 6, 23, .76);--glass-blur: blur(14px);--glass-border: 1px solid rgba(35, 199, 255, .3);--glass-bg-mobile: rgba(2, 6, 23, .92);--glass-border-mobile: 1px solid rgba(116, 56, 242, .4);--header-glass-shadow: 0 1px 0 rgba(35, 199, 255, .28), 0 8px 30px rgba(0, 0, 0, .78), 0 0 26px rgba(116, 56, 242, .32);--nav-text: #E8F2FF;--nav-active-bg: rgba(35, 199, 255, .18);--btn-primary-bg: #F5B82E;--btn-primary-text: #120B02;--btn-outline-text: #23C7FF;--action-btn-h: 120px;--page-overlay: rgba(2, 6, 23, .8);--glow-sm: 0 0 10px rgba(35, 199, 255, .4);--glow-md: 0 0 24px rgba(116, 56, 242, .48);--glow-lg: 0 0 44px rgba(35, 199, 255, .5);--font-sans: "Sarabun", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--container-max: 1200px;--container-pad: 1.25rem;--section-pad-y: 2.5rem;--header-height: 96px;--header-logo-height: 100px;--header-logo-height-mobile: 64px;--header-logo-height-xs: 44px;--fz-display: clamp(2rem, 5vw, 4rem);--fz-hero-title: var(--fz-page-title);--fz-page-title: clamp(1.5rem, 3.5vw, 2.2rem);--fz-section-title: clamp(1.125rem, 2.2vw, 1.5rem);--fz-card-title: clamp(1rem, 1.6vw, 1.25rem);--fz-body-lg: clamp(.9375rem, 1.35vw, 1rem);--fz-body: clamp(.8125rem, 1.2vw, .9rem);--fz-small: .875rem;--fz-xs: .75rem;--fz-eyebrow: .72rem;--fz-button: 1rem;--fz-button-lg: 1.125rem;--fz-button-sm: .875rem;--fz-heading: var(--fz-section-title);--lh-heading: 1.4;--lh-body: 1.8;--bottom-nav-height: 64px;--bottom-nav-bar-shadow: 0 -4px 24px rgba(0, 0, 0, .84), 0 0 22px rgba(116, 56, 242, .3);--bottom-nav-item-color: var(--nav-text);--bottom-nav-item-hover: var(--brand-highlight);--bottom-nav-item-active: var(--brand-highlight);--bottom-nav-play-bg: linear-gradient(180deg, #FFD96A 0%, #F5B82E 52%, #C87A0A 100%);--bottom-nav-play-text: #120B02;--bottom-nav-play-shadow: 0 -3px 18px rgba(0, 0, 0, .78), 0 0 28px rgba(245, 184, 46, .5);--bottom-nav-play-hover-brightness: 1.08}