/* ================================================================
   NEXZA Design System — Light · Clean · Brand-led
   Palette (Final Brand CI): purple #8126F4 · cyan #0AACFF · teal #2BAAA9
   Neutrals: white · soft slate surfaces · ink text (#333-family).
   Strategy: bright SaaS surfaces, generous whitespace, the brand
   gradient used as a precise accent (eyebrows, CTAs, the logo "E").
   The home cinematic hero keeps its own dark cinematic world; every
   component below defaults to LIGHT and is overridden to white only
   inside #cinematic-experience / dark bands.
   ================================================================ */

/* ── Brand Fonts (Loaded via Google Fonts in header.ejs) ────────── */

/* ── Performance optimizations ─────────────────────────────────── */
/* Removed content-visibility: auto to prevent iOS Safari paint and transparent background bugs */

/* Promote animated hero logo to its own compositor layer to isolate
   its repaints from the rest of the document                         */
.hero-nexza-logo,
#sky-logo-faint {
  contain: layout style;
}

/* Tech grid background: use GPU-accelerated animation via transform  */

/* ── Design tokens ─────────────────────────────────────────────── */
:root {
  /* Brand */
  --brand-purple: #8126F4;
  --brand-cyan:   #0AACFF;
  --brand-teal:   #2BAAA9;
  --rgb-purple: 129, 38, 244;
  --rgb-cyan:   10, 172, 255;
  --rgb-teal:   43, 170, 169;
  /* Same three colours, space separated. Tailwind's <alpha-value> syntax needs
     `rgb(R G B / a)`, so bg-brand-purple/10 cannot use the comma form above —
     which the rest of this file relies on for rgba(var(--rgb-purple), .5). */
  --tw-brand-purple: 129 38 244;
  --tw-brand-cyan:   10 172 255;
  --tw-brand-teal:   43 170 169;
  --brand-amber: #F59E0B;
  --brand-rose:  #F43F7F;
  --rgb-amber:  245, 158, 11;
  --rgb-rose:   244, 63, 127;

  --brand-gradient:      linear-gradient(135deg, #8126F4 0%, #0AACFF 55%, #2BAAA9 115%);
  --brand-gradient-text: linear-gradient(90deg, #8126F4, #0AACFF, #2BAAA9);

  /* Light surfaces */
  --bg:          #FFFFFF;
  --bg-soft:     #F4F7FC;   /* alternating sections */
  --bg-mute:     #EBF0F8;
  --bg-ink:      #0B1322;   /* dark contrast bands / footer accents */
  --surface:     #FFFFFF;
  --surface-soft:#FBFCFE;

  /* Ink / text */
  --ink:        #2A323F;
  --ink-strong: #0E1626;
  --ink-muted:  #5C6779;
  --ink-faint:  #93A0B2;

  /* Lines */
  --line:        #E7ECF4;
  --line-strong: #D6DEEA;

  /* Glows (used by cinematic hero + subtle light accents) */
  --cyan-glow:      rgba(10, 172, 255, 0.30);
  --cyan-glow-md:   rgba(10, 172, 255, 0.18);
  --cyan-glow-soft: rgba(10, 172, 255, 0.10);
  --cyan-glow-xs:   rgba(10, 172, 255, 0.06);
  --purple-glow:    rgba(129, 38, 244, 0.28);
  --teal-glow:      rgba(43, 170, 169, 0.28);

  /* Soft elevation */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 6px 16px rgba(16, 24, 40, 0.06), 0 14px 36px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.12);

  /* Misc */
  /* Typography system — Editorial Luxury bilingual.
     --font         : body / UI  (IBM Plex Sans + Thai)
     --font-display : headlines  (Space Grotesk + Anuphan) */
  --font:         'IBM Plex Sans', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --font-display: 'Space Grotesk', 'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --blur:        blur(10px) saturate(140%);
  --radius-card: 18px;
  --transition:  0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Legacy aliases — keep stray references resolving */
  --tech-cyan:   #0AACFF;
  --nexza-navy:   #002A5C;
  --nexza-blue:   #0A6FD0;
  --nexza-blue-lt:#2B93EC;
  --text:        var(--ink);
  --text-muted:  var(--ink-muted);
  --bg-deep:     var(--bg);
  --bg-surface:  var(--surface);
  --bg-mid:      var(--bg-mute);
  --glass-bg:       rgba(255, 255, 255, 0.72);
  --glass-border:   var(--line);
  --glass-border-h: var(--line-strong);
  --blue-glow:  rgba(10, 111, 208, 0.30);
  --error:      #7C3AED;
}

/* ── Reset & base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
  overflow-x: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch; /* smooth native momentum scrolling */
}

html[lang="th"] {
  /* Thai body leads with the Thai cut for correct vowel/tone metrics;
     Latin still resolves to Plex Sans via the display stack for headlines. */
  --font: 'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Anuphan', 'Space Grotesk', 'IBM Plex Sans Thai', system-ui, sans-serif;
}

/* ── Global heading defaults — editorial display type ──────────────
   Applies the Space Grotesk / Anuphan display face to all headings and
   the signature hero/section titles for an instant, site-wide lift.
   Thai letter-spacing is neutralised further down (see html[lang="th"]). */
h1, h2, h3,
.hero-h1, .section-title, .page-hero-title,
.news-title, .svc-title, .why-title,
.hero-huge-text, .hero-title-main, .hero-title-accent, .lux-display {
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  text-wrap: balance;          /* even line lengths, no orphan words */
}
h1, h2 { line-height: 1.06; }
h3     { line-height: 1.15; }
/* Body copy: avoid single-word last lines (orphans) */
p, li, .section-sub, .page-hero-sub, .hero-sub { text-wrap: pretty; }

/* Loaded families (Space Grotesk / Anuphan / IBM Plex) top out at 700.
   Cap the heavier Tailwind weight utilities to the real max so headings
   render crisp instead of browser-synthesised faux-bold. `body .x` (0,1,1)
   outranks Tailwind's `.x` (0,1,0) without needing !important. */
body .font-black, body .font-extrabold { font-weight: 700; }

body {
  font-family: var(--font);
  background-color: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  min-height: 100vh;
}
/* Thai reads best with slightly more line breathing and no negative tracking */
html[lang="th"] body { line-height: 1.85; letter-spacing: 0; }
::selection { background: rgba(var(--rgb-purple), 0.16); color: var(--ink-strong); }

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar {
  display: none;             /* Chrome, Safari, Edge, Opera */
}

/* Ensure all content sections below the cinematic hero have a solid white background by default */
section:not(#cinematic-experience) {
  background-color: #ffffff;
}
section.section-soft {
  background-color: var(--bg-soft) !important;
}
section.section-mute {
  background-color: var(--bg-mute) !important;
}
.bg-white {
  background-color: #ffffff !important;
}

/* ================================================================
   BACKGROUNDS & PATTERNS (light)
   ================================================================ */
@keyframes gridScan {
  0%   { background-position: 0 0; }
  100% { background-position: 0 60px; }
}
.tech-grid-bg {
  background-image: none !important;
  background-size: 0 0 !important;
  animation: none !important;
}

@keyframes orbFloat1 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.08) rotate(30deg); }
  100% { transform: translate(-20px, 50px) scale(0.96) rotate(60deg); }
}
@keyframes orbFloat2 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, 30px) scale(0.92) rotate(-30deg); }
  100% { transform: translate(30px, -40px) scale(1.12) rotate(-60deg); }
}
@keyframes orbFloat3 {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, 40px) scale(1.05) rotate(45deg); }
  100% { transform: translate(-40px, -30px) scale(0.95) rotate(90deg); }
}

/* Soft brand atmosphere orbs */
.hero-radial-red {
  background: radial-gradient(circle at center, rgba(var(--rgb-purple), 0.12) 0%, rgba(var(--rgb-cyan), 0.08) 45%, transparent 72%);
  border-radius: 50%; pointer-events: none; filter: blur(50px);
  animation: orbFloat1 25s ease-in-out infinite alternate;
  will-change: transform;
}
.hero-radial-blue {
  background: radial-gradient(circle at center, rgba(var(--rgb-cyan), 0.12) 0%, rgba(var(--rgb-teal), 0.06) 55%, transparent 75%);
  border-radius: 50%; pointer-events: none; filter: blur(40px);
  animation: orbFloat2 30s ease-in-out infinite alternate;
  will-change: transform;
}
.why-bg-red {
  background: radial-gradient(circle at 80% 50%, rgba(var(--rgb-teal), 0.10) 0%, rgba(var(--rgb-cyan), 0.08) 45%, transparent 70%);
  border-radius: 50%; pointer-events: none; filter: blur(50px);
  animation: orbFloat3 28s ease-in-out infinite alternate;
  will-change: transform;
}

/* Section background helpers (optional utility) */
.section-soft { background: var(--bg-soft); }
.section-mute { background: var(--bg-mute); }

/* ================================================================
   SURFACE / GLASS CARD (light)
   ================================================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 4px 18px rgba(15, 23, 42, 0.02),
    0 12px 32px rgba(15, 23, 42, 0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition), background var(--transition);
}
.glass-card:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line-strong);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px rgba(15, 23, 42, 0.06),
    0 30px 64px rgba(16, 24, 40, 0.09);
}
/* Tactile lift only for genuine small cards, not large glass containers */
.contact-info-card:hover { transform: translateY(-4px); }

/* ── Navbar entrance: clean slide-down fade-in ── */
@keyframes navbarEntrance {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0px); }
}

#navbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(0px);
  width: calc(100% - 40px);
  max-width: 1320px;
  z-index: 9000;
  opacity: 1;
  pointer-events: auto;
  will-change: transform, opacity;
}

.nav-rainbow-wrapper {
  position: absolute;
  top: -15px;
  left: -15px;
  right: -15px;
  height: 92px;
  border-radius: 999px;
  padding: 15px; /* hollow out the navbar footprint to prevent interior bleed */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.nav-rainbow-glow {
  position: absolute;
  inset: 14px; /* overlap slightly to avoid anti-aliasing gaps */
  border-radius: 999px;
  background: linear-gradient(90deg, 
    #ff0055 0%, 
    #ffdd00 17%, 
    #00ff66 33%, 
    #00ffff 50%, 
    #0022ff 67%, 
    #7700ff 83%, 
    #ff0055 100%
  );
  background-size: 200% 200%;
  filter: blur(7px) hue-rotate(0deg);
  opacity: 0.28;
  pointer-events: none;
  animation: rainbowGlowMove 8s linear infinite;
}

@keyframes rainbowGlowMove {
  0% {
    background-position: 0% 50%;
    filter: blur(7px) hue-rotate(0deg);
  }
  100% {
    background-position: 200% 50%;
    filter: blur(7px) hue-rotate(360deg);
  }
}

/* Disabled in dark mode sections to keep iOS liquid glass appearance */
.navbar--dark .nav-rainbow-wrapper {
  opacity: 0 !important;
}

/* Run entrance animation only on initial page load when it's not scrolled or hidden */
#navbar:not(.scrolled):not(.navbar--hidden) {
  animation: navbarEntrance 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ── Hidden state: snaps up cleanly and fades completely off-screen ── */
#navbar.navbar--hidden {
  transform: translateX(-50%) translateY(calc(-100% - 24px));
  opacity: 0;
  pointer-events: none;
  transition:
    opacity   0.25s cubic-bezier(0.4, 0, 1, 1),
    transform 0.30s cubic-bezier(0.4, 0, 0.6, 1);
}

/* ── Visible state: glides in with a soft spring ── */
#navbar.navbar--visible {
  transform: translateX(-50%) translateY(0px);
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity   0.40s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.50s cubic-bezier(0.34, 1.10, 0.64, 1);
}

/* ── Brand Glass Core — Layered aurora frosted pill ── */
@keyframes borderPrismMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes auroraFloat {
  0%, 100% { transform: translateX(0) scale(1); opacity: 0.55; }
  33%       { transform: translateX(6px) scale(1.04); opacity: 0.68; }
  66%       { transform: translateX(-4px) scale(0.98); opacity: 0.50; }
}

@keyframes navbarAuraPulse {
  0%, 100% {
    box-shadow:
      /* top specular highlight */
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      /* inner aurora wash */
      inset 0 0 24px rgba(255, 255, 255, 0.50),
      /* layered depth */
      0 4px 8px rgba(15, 23, 42, 0.03),
      0 12px 32px rgba(15, 23, 42, 0.04);
  }
  50% {
    box-shadow:
      /* top specular highlight */
      0 1px 0 rgba(255, 255, 255, 0.95) inset,
      /* inner aurora wash */
      inset 0 0 28px rgba(255, 255, 255, 0.55),
      /* layered depth */
      0 4px 8px rgba(15, 23, 42, 0.03),
      0 16px 36px rgba(15, 23, 42, 0.05);
  }
}

.nav-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(18px) saturate(220%) brightness(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(220%) brightness(1.02);
  border-radius: 99px;
  border: 1px solid rgba(15, 23, 42, 0.05);
  border-top-color: rgba(255, 255, 255, 0.65);
  animation: navbarAuraPulse 9s ease-in-out infinite;
  transition:
    background 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  /* overflow: hidden; - Removed to prevent navbar dropdown clipping */
}

/* Animated aurora blob floating inside the glass */
.nav-glass .nav-glass-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  display: none; /* disabled for clean white glassy style */
}
.nav-glass .nav-glass-aurora::before {
  content: '';
  position: absolute;
  width: 200px; height: 64px;
  left: -40px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, rgba(129, 38, 244, 0.09) 0%, transparent 70%);
  filter: blur(18px);
  animation: auroraFloat 9s ease-in-out infinite;
}
.nav-glass .nav-glass-aurora::after {
  content: '';
  position: absolute;
  width: 240px; height: 64px;
  right: -60px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(ellipse, rgba(10, 172, 255, 0.08) 0%, transparent 70%);
  filter: blur(20px);
  animation: auroraFloat 11s ease-in-out infinite reverse;
}

/* Animated gradient border — clean white specular shimmer */
.nav-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.20) 25%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.20) 75%,
    rgba(255, 255, 255, 0.95) 100%);
  background-size: 200% 200%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.85;
  animation: luxuryDiamondShimmer 16s ease infinite alternate;
  transition: opacity 0.5s ease;
}

/* Shimmer line at bottom on scroll */
.nav-glass::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%);
  border-radius: 99px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

#navbar .nav-glass-inner {
  position: relative;
  z-index: 1;
  height: 60px !important;
}

@keyframes navbarAuraPulseScrolled {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.90) inset,
      inset 0 0 20px rgba(255, 255, 255, 0.45),
      0 6px 16px rgba(15, 23, 42, 0.04),
      0 16px 36px rgba(15, 23, 42, 0.05);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.90) inset,
      inset 0 0 24px rgba(255, 255, 255, 0.50),
      0 6px 16px rgba(15, 23, 42, 0.04),
      0 20px 40px rgba(15, 23, 42, 0.06);
  }
}

/* Scrolled: denser glass + deeper shadow */
#navbar.scrolled .nav-glass {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.08);
  border-top-color: rgba(255, 255, 255, 0.75);
  animation: navbarAuraPulseScrolled 9s ease-in-out infinite;
}
#navbar.scrolled .nav-glass::before { opacity: 1; }
#navbar.scrolled .nav-glass::after  { opacity: 0.80; }

/* ── Nexza logo (Volumetric Neon Glow & Custom Heights) ─────────── */
.nexza-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  isolation: isolate;
  height: 28px; /* mobile height */
  transition: transform 0.28s cubic-bezier(0.25, 1.15, 0.45, 1.05), filter 0.3s ease;
  transform-style: preserve-3d;
  perspective: 600px;
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

@media (min-width: 1024px) {
  .nexza-logo {
    height: 38px; /* desktop height: taller, more premium layout */
  }
}

/* Soft brand halo behind the logo */
.nexza-logo::before {
  content: '';
  position: absolute;
  inset: -35% -15%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 50%, rgba(var(--rgb-purple), 0.22), transparent 70%),
    radial-gradient(circle at 70% 50%, rgba(var(--rgb-cyan), 0.22), transparent 70%);
  filter: blur(14px);
  opacity: 0.50;
  transform: scale(0.96);
  animation: nexzaGlow 5s ease-in-out infinite;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

@keyframes nexzaGlow {
  0%, 100% { opacity: 0.40; transform: scale(0.96); }
  50%      { opacity: 0.65; transform: scale(1.05); }
}

.nexza-logo__img {
  display: block;
  height: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  position: relative;
  z-index: 1;
  animation: nexzaReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nexzaReveal {
  from {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
  to {
    filter: blur(0);
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.nexza-logo__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  -webkit-mask: url(/images/nexza-logo-white.png?v=3) no-repeat center / contain;
          mask: url(/images/nexza-logo-white.png?v=3) no-repeat center / contain;
  background: linear-gradient(110deg,
    transparent 15%,
    rgba(10, 172, 255, 0.8) 35%,
    #ffffff 50%,
    rgba(129, 38, 244, 0.8) 65%,
    transparent 85%);
  background-size: 200% 100%;
  background-position: 180% 0;
  opacity: 0;
  mix-blend-mode: color-dodge;
  animation: nexzaIdleSheen 8s ease-in-out infinite;
}

@keyframes nexzaIdleSheen {
  0%, 80% { background-position: 180% 0; opacity: 0; }
  85% { opacity: 0.75; }
  95%, 100% { background-position: -80% 0; opacity: 0; }
}

a:hover .nexza-logo {
  transform: perspective(600px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.05) translateY(-1px);
  filter: 
    drop-shadow(0 4px 12px rgba(15, 23, 42, 0.08))
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
}
a:hover .nexza-logo::before {
  opacity: 0.85;
  transform: scale(1.22);
}
a:hover .nexza-logo .nexza-logo__sheen {
  animation: nexzaDoubleSheen 1.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes nexzaDoubleSheen {
  0% { background-position: 180% 0; opacity: 0; }
  18% { opacity: 1; }
  40% { background-position: -80% 0; opacity: 0; }
  48% { background-position: 180% 0; opacity: 0; }
  66% { opacity: 1; }
  88% { background-position: -80% 0; opacity: 0; }
  100% { background-position: -80% 0; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nexza-logo::before { animation: none; }
  .nexza-logo__img    { animation: none; filter: none; transform: none; }
  .nexza-logo__sheen  { animation: none; }
}

/* ── Navigation Rail & Items (Floating Lens with Elastic Spring + Glow) ── */
@keyframes navLinkReveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-rail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Staggered reveal for nav links */
.nav-rail > *:nth-child(2)  { animation: navLinkReveal 0.5s 0.20s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(3)  { animation: navLinkReveal 0.5s 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(4)  { animation: navLinkReveal 0.5s 0.36s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(5)  { animation: navLinkReveal 0.5s 0.44s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(6)  { animation: navLinkReveal 0.5s 0.52s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(7)  { animation: navLinkReveal 0.5s 0.60s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nav-rail > *:nth-child(8)  { animation: navLinkReveal 0.5s 0.68s cubic-bezier(0.16, 1, 0.3, 1) both; }

.nav-indicator {
  position: absolute;
  top: 0; left: 0;
  width: var(--ind-w, 0);
  height: var(--ind-h, 0);
  transform: translate(var(--ind-x, 0), var(--ind-y, 0));
  border-radius: 99px;
  background: linear-gradient(135deg, #8126F4 0%, #0AACFF 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 4px 12px rgba(129, 38, 244, 0.24),
    0 2px 4px rgba(10, 172, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  transition:
    transform 0.40s cubic-bezier(0.34, 1.38, 0.64, 1),
    width     0.40s cubic-bezier(0.34, 1.38, 0.64, 1),
    height    0.40s cubic-bezier(0.34, 1.38, 0.64, 1),
    opacity   0.18s ease;
}

.nav-rail.rail-ready .nav-indicator { opacity: 1; }

.nav-link {
  position: relative;
  z-index: 1;
  padding: 7px 15px;
  color: var(--ink-muted);
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    color      0.28s cubic-bezier(0.25, 1, 0.5, 1),
    transform  0.22s cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 0.28s ease;
  border-radius: 99px;
}

/* Hovering a nav link: text turns white because indicator moves under it */
.nav-link:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  transform: translateY(-0.5px);
  text-shadow: none !important;
}

.nav-link:active {
  transform: scale(0.96);
}

.nav-link--active {
  background: none;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* When the rail is not hovered, the active link has the white indicator under it, so text is white */
.nav-rail:not(:hover) .nav-link--active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* When the rail is hovered, the active link's indicator moves away, so active link turns back to ink-muted text */
.nav-rail:hover .nav-link--active:not(:hover) {
  color: var(--ink-muted) !important;
  -webkit-text-fill-color: var(--ink-muted) !important;
  font-weight: 600 !important;
}

/* Fallback for when rail is not ready */
.nav-rail:not(.rail-ready) .nav-link--active {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(135deg, #8126F4 0%, #0AACFF 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  box-shadow:
    0 4px 12px rgba(129, 38, 244, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.nav-indicator::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav-indicator {
    transition: opacity 0.2s ease;
  }
  .nav-link--active {
    animation: none;
    box-shadow: 0 2px 16px rgba(129, 38, 244, 0.42), 0 0 22px rgba(10, 172, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  }
  .nav-rail .nav-link { animation: none; }
  /* Dark mode — disable caustic and rim animations */
  .navbar--dark .nav-glass-aurora::before,
  .navbar--dark .nav-glass-aurora::after { animation: none; }
  .navbar--dark .nav-glass::before { animation: none; }
  .navbar--dark .nav-link--active { animation: none; }
  .navbar--dark .nav-cta { animation: none; }
  #navbar, .nav-glass, .navbar--dark .nav-glass { animation: none !important; }
}

.nav-sep {
  width: 1px;
  height: 18px;
  margin: 0 10px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(129, 38, 244, 0.35) 25%,
    rgba(10, 172, 255, 0.35) 75%,
    transparent 100%);
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Language Switcher — Premium silver-white toggle ────────────────── */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 99px;
  padding: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}

.lang-switcher:hover {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.05);
}

.lang-btn {
  font-family: var(--font);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink-muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 99px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.lang-btn:hover {
  color: var(--ink-strong);
}

/* Active language — premium Nexza brand gradient pill */
.lang-btn--active {
  color: #ffffff;
  background: linear-gradient(135deg, #8126F4 0%, #0AACFF 100%);
  border: 1px solid rgba(255, 255, 255, 0.20);
  box-shadow:
    0 3px 10px rgba(129, 38, 244, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.20);
  transform: scale(1.03);
}

.lang-divider {
  display: none;
}

/* ── Call to Action Button — premium Nexza brand gradient cta ── */
@keyframes ctaInitReveal {
  from { opacity: 0; transform: scale(0.92) translateX(6px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 22px;
  background: linear-gradient(135deg, #8126F4 0%, #0AACFF 100%);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 99px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    0 6px 18px rgba(129, 38, 244, 0.24),
    0 3px 6px rgba(10, 172, 255, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  animation: ctaInitReveal 0.6s 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition:
    transform    0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background   0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow   0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color        0.25s ease;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.nav-cta i,
.nav-cta svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
  transition: stroke 0.25s ease, color 0.25s ease;
}

/* Shimmer sweep overlay */
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 70%);
  border-radius: inherit;
  pointer-events: none;
}

.nav-cta::after {
  content: '';
  position: absolute;
  top: 0; left: -160%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.40),
    transparent
  );
  transform: skewX(-22deg);
  pointer-events: none;
}

.nav-cta:hover {
  transform: translateY(-1.5px) scale(1.03);
  background: linear-gradient(135deg, #8b3cff 0%, #2bbdff 100%);
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.40);
  box-shadow:
    0 10px 24px rgba(129, 38, 244, 0.32),
    0 4px 10px rgba(10, 172, 255, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

.nav-cta:hover i,
.nav-cta:hover svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}

.nav-cta:hover::after {
  left: 160%;
  transition: left 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-cta:active {
  transform: translateY(0.5px) scale(0.97);
  box-shadow:
    0 3px 10px rgba(129, 38, 244, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* ================================================================
   ADAPTIVE DARK NAVBAR — True Apple Liquid Glass
   ================================================================ */

/* (dark/light toggle transitions are handled by .navbar--hidden / .navbar--visible above) */

/* 1. Logo Switcher */
.nexza-logo__img--color { display: block; }
.nexza-logo__img--white { display: none; }

.navbar--dark .nexza-logo__img--color { display: none !important; }
.navbar--dark .nexza-logo__img--white { display: block !important; }

/* ── Caustic shimmer: rippling light caustic that sweeps across the glass ── */
@keyframes causticRipple {
  0%   { background-position: 0% 50%;   opacity: 0.55; }
  25%  { background-position: 40% 30%;  opacity: 0.75; }
  50%  { background-position: 100% 50%; opacity: 0.55; }
  75%  { background-position: 60% 70%;  opacity: 0.70; }
   100% { background-position: 0% 50%;   opacity: 0.55; }
}

/* Iridescent rim sweep — colour-shifts around the border */
@keyframes iridRimSweep {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Inner caustic light blob drifts */
@keyframes causticDrift {
  0%   { transform: translate(0, 0)   scale(1);    opacity: 0.40; }
  20%  { transform: translate(12%, 8%) scale(1.06); opacity: 0.55; }
  45%  { transform: translate(-8%, 5%) scale(0.94); opacity: 0.35; }
  70%  { transform: translate(6%, -6%) scale(1.08); opacity: 0.50; }
  100% { transform: translate(0, 0)   scale(1);    opacity: 0.40; }
}
@keyframes causticDrift2 {
  0%   { transform: translate(0, 0)    scale(1);    opacity: 0.30; }
  30%  { transform: translate(-10%, 6%) scale(1.05); opacity: 0.45; }
  60%  { transform: translate(8%, -4%) scale(0.96); opacity: 0.32; }
  100% { transform: translate(0, 0)    scale(1);    opacity: 0.30; }
}

/* 2. LIQUID GLASS — True Apple-grade deep glass */
@keyframes navbarAuraPulseDark {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 20px 60px rgba(0, 0, 0, 0.40),
      /* brand glowing border aura */
      0 0 25px rgba(10, 172, 255, 0.18),
      0 0 45px rgba(129, 38, 244, 0.12),
      0 0 8px rgba(10, 172, 255, 0.22),
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(0, 0, 0, 0.35),
      inset 0 10px 20px rgba(255, 255, 255, 0.02);
  }
  50% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 20px 60px rgba(0, 0, 0, 0.40),
      /* brand glowing border aura (expanded) */
      0 0 38px rgba(10, 172, 255, 0.30),
      0 0 65px rgba(129, 38, 244, 0.22),
      0 0 14px rgba(10, 172, 255, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.40),
      inset 0 10px 20px rgba(255, 255, 255, 0.03);
  }
}

.navbar--dark .nav-glass {
  background:
    /* Micro-noise texture for physical frosted glass feel */
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.02'/%3E%3C/svg%3E"),
    /* Wet specular top sheen */
    linear-gradient(185deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 25%, transparent 60%),
    /* Micro chromatic light refractions inside the glass (chromatic aberration) */
    radial-gradient(circle at 10% -20%, rgba(134, 249, 255, 0.08) 0%, transparent 45%),
    radial-gradient(circle at 90% 120%, rgba(214, 182, 255, 0.08) 0%, transparent 45%),
    /* Dark iOS glass body base */
    rgba(22, 22, 28, 0.45);
  backdrop-filter: blur(18px) saturate(210%) brightness(0.96) contrast(1.02);
  -webkit-backdrop-filter: blur(18px) saturate(210%) brightness(0.96) contrast(1.02);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-top-color: rgba(255, 255, 255, 0.25);
  animation: navbarAuraPulseDark 9s ease-in-out infinite;
  transition:
    background   0.5s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow   0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Liquid glass deepens when scrolled */
@keyframes navbarAuraPulseDarkScrolled {
  0%, 100% {
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.55),
      0 6px 16px rgba(0, 0, 0, 0.25),
      /* brand glowing border aura */
      0 0 30px rgba(10, 172, 255, 0.22),
      0 0 50px rgba(129, 38, 244, 0.15),
      0 0 10px rgba(10, 172, 255, 0.26),
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      inset 0 -1px 0 rgba(0, 0, 0, 0.40),
      inset 0 12px 24px rgba(255, 255, 255, 0.03);
  }
  50% {
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.55),
      0 6px 16px rgba(0, 0, 0, 0.25),
      /* brand glowing border aura (expanded) */
      0 0 42px rgba(10, 172, 255, 0.32),
      0 0 70px rgba(129, 38, 244, 0.25),
      0 0 15px rgba(10, 172, 255, 0.38),
      inset 0 1px 0 rgba(255, 255, 255, 0.40),
      inset 0 -1px 0 rgba(0, 0, 0, 0.45),
      inset 0 12px 24px rgba(255, 255, 255, 0.04);
  }
}

.navbar--dark.scrolled .nav-glass {
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.80' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.025'/%3E%3C/svg%3E"),
    linear-gradient(185deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0.06) 25%, transparent 60%),
    radial-gradient(circle at 10% -20%, rgba(134, 249, 255, 0.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 120%, rgba(214, 182, 255, 0.12) 0%, transparent 45%),
    rgba(15, 15, 20, 0.62);
  backdrop-filter: blur(20px) saturate(220%) brightness(0.92) contrast(1.04);
  -webkit-backdrop-filter: blur(20px) saturate(220%) brightness(0.92) contrast(1.04);
  border-color: rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.32);
  animation: navbarAuraPulseDarkScrolled 9s ease-in-out infinite;
}

/* Aurora blobs: disabled in dark mode for a pristine, neutral iOS look */
.navbar--dark .nav-glass-aurora::before,
.navbar--dark .nav-glass-aurora::after {
  display: none !important;
}

/* Chamfered border outline: diamond refraction sheen (slow, luxurious shimmer) */
.navbar--dark .nav-glass::before {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.50) 0%,
    rgba(134, 249, 255, 0.35) 25%,
    rgba(255, 239, 170, 0.25) 50%,
    rgba(214, 182, 255, 0.35) 75%,
    rgba(255, 255, 255, 0.50) 100%);
  background-size: 200% 200%;
  opacity: 0.65;
  animation: luxuryDiamondShimmer 22s ease infinite alternate;
  padding: 1px;
}

@keyframes luxuryDiamondShimmer {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* Brand shimmer bottom line — changed to a subtle white light specular reflection that fades in on scroll */
.navbar--dark .nav-glass::after {
  left: 15%; right: 15%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.22) 50%,
    transparent 100%);
  filter: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.navbar--dark.scrolled .nav-glass::after {
  opacity: 0.60;
}

/* 3. Nav links — bright white in dark glass */
.navbar--dark .nav-link {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
  transition:
    color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    text-shadow 0.25s ease;
  text-shadow: none !important;
}

/* Hovering a nav link: text turns black because indicator moves under it */
.navbar--dark .nav-link:hover {
  color: #0c1220 !important;
  -webkit-text-fill-color: #0c1220 !important;
  transform: translateY(-0.5px);
  text-shadow: none !important;
}

/* Active link in dark mode - text color matches the indicator state */
.navbar--dark .nav-link--active {
  background: none;
  font-weight: 700 !important;
  text-shadow: none !important;
}

/* When the rail is not hovered, the active link has the white indicator under it, so text is black */
.navbar--dark .nav-rail:not(:hover) .nav-link--active {
  color: #0c1220 !important;
  -webkit-text-fill-color: #0c1220 !important;
}

/* When the rail is hovered, the active link's indicator moves away, so active link turns back to translucent white text */
.navbar--dark .nav-rail:hover .nav-link--active:not(:hover) {
  color: rgba(255, 255, 255, 0.55) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
}

/* Fallback for when rail is not ready */
.navbar--dark .nav-rail:not(.rail-ready) .nav-link--active {
  color: #0c1220 !important;
  -webkit-text-fill-color: #0c1220 !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 99px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 4. Separator */
.navbar--dark .nav-sep {
  background: rgba(255, 255, 255, 0.14);
}

/* 5. Language Switcher */
.navbar--dark .lang-switcher {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.navbar--dark .lang-switcher:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
}
.navbar--dark .lang-btn {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 600;
  transition: color 0.22s ease, transform 0.22s ease;
}
.navbar--dark .lang-btn:hover {
  color: #ffffff;
}

/* Dark mode active lang — iOS Segmented Control Silver-White Glass Pill */
.navbar--dark .lang-btn--active {
  color: #0c1220 !important; /* Premium dark ink for readability */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  border-radius: 99px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transform: scale(1.02);
}

/* 6. Hover indicator pill — iOS Segmented Control Silver-White Glass Pill */
.navbar--dark .nav-indicator {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 7. CTA — premium iOS aurora glass button in dark mode */
.navbar--dark .nav-cta {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.85) 100%);
  color: #0c1220 !important;
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: none;
  transition:
    transform    0.25s cubic-bezier(0.16, 1, 0.3, 1),
    background   0.25s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow   0.25s cubic-bezier(0.16, 1, 0.3, 1),
    color        0.25s ease;
}
.navbar--dark .nav-cta i,
.navbar--dark .nav-cta svg {
  color: #0c1220 !important;
  stroke: #0c1220 !important;
  transition: stroke 0.25s ease, color 0.25s ease;
}
.navbar--dark .nav-cta:hover {
  transform: translateY(-1.5px) scale(1.03);
  background: linear-gradient(180deg, #ffffff 0%, #f5f5fa 100%);
  color: #0c1220 !important;
  border-color: #ffffff;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.navbar--dark .nav-cta:hover i,
.navbar--dark .nav-cta:hover svg {
  color: #0c1220 !important;
  stroke: #0c1220 !important;
}
.navbar--dark .nav-cta:active {
  transform: translateY(0.5px) scale(0.97);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* Mobile menu — refined frosted glass panel */
@keyframes mobileMenuSlideIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    clip-path: inset(0 0 100% 0 round 20px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    clip-path: inset(0 0 0% 0 round 20px);
  }
}

@keyframes mobileLinkSlide {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}

.mobile-menu {
  position: relative;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(200%);
  -webkit-backdrop-filter: blur(18px) saturate(200%);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 20px;
  margin: 8px 0 0;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.90) inset,
    0 8px 32px rgba(15, 23, 42, 0.07),
    0 20px 48px rgba(15, 23, 42, 0.07),
    0 0 0 1px rgba(15, 23, 42, 0.03);
  overflow: visible; /* allow aura to shine outside boundaries */
}

.mobile-rainbow-wrapper {
  position: absolute;
  inset: -15px;
  border-radius: 35px; /* corner radius + padding (20px + 15px) */
  padding: 15px; /* hollow out mobile menu footprint */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.mobile-rainbow-glow {
  position: absolute;
  inset: 14px; /* overlap slightly to prevent anti-aliasing gaps */
  border-radius: 20px;
  background: linear-gradient(90deg, 
    #ff0055 0%, 
    #ffdd00 17%, 
    #00ff66 33%, 
    #00ffff 50%, 
    #0022ff 67%, 
    #7700ff 83%, 
    #ff0055 100%
  );
  background-size: 200% 200%;
  filter: blur(7px) hue-rotate(0deg);
  opacity: 0.28;
  pointer-events: none;
  animation: rainbowGlowMove 8s linear infinite;
}

.mobile-menu::before {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.65) 50%,
    transparent);
  border-radius: 99px;
  pointer-events: none;
}

.mobile-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: var(--ink-muted);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border-radius: 12px;
  text-decoration: none;
  transition:
    color       0.22s ease,
    background  0.22s ease,
    transform   0.18s ease;
  position: relative;
}

.mobile-link:nth-child(1) { animation: mobileLinkSlide 0.35s 0.05s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-link:nth-child(2) { animation: mobileLinkSlide 0.35s 0.10s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-link:nth-child(3) { animation: mobileLinkSlide 0.35s 0.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-link:nth-child(4) { animation: mobileLinkSlide 0.35s 0.20s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-link:nth-child(5) { animation: mobileLinkSlide 0.35s 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.mobile-link:nth-child(6) { animation: mobileLinkSlide 0.35s 0.30s cubic-bezier(0.16, 1, 0.3, 1) both; }

.mobile-link:hover {
  color: var(--ink-strong);
  background: rgba(15, 23, 42, 0.04);
  transform: translateX(3px);
}

.mobile-link:active {
  transform: translateX(3px) scale(0.98);
}

.mobile-cta-link {
  display: block;
  padding: 13px 16px;
  text-align: center;
  background: linear-gradient(135deg, #8126F4 0%, #0AACFF 100%);
  color: #fff;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow:
    0 4px 16px rgba(129, 38, 244, 0.38),
    0 2px 8px rgba(10, 172, 255, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.mobile-cta-link:hover {
  transform: translateY(-1px);
  box-shadow:
    0 6px 22px rgba(129, 38, 244, 0.46),
    0 3px 12px rgba(10, 172, 255, 0.34);
}

.mobile-cta-link:active {
  transform: scale(0.98);
}

/* ── Dark mode mobile menu — liquid glass panel ── */
.navbar--dark ~ #mobile-menu,
.navbar--dark + #mobile-menu {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%),
    rgba(20, 20, 25, 0.75);
  backdrop-filter: blur(18px) saturate(190%) brightness(0.95);
  -webkit-backdrop-filter: blur(18px) saturate(190%) brightness(0.95);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.navbar--dark ~ #mobile-menu .mobile-rainbow-wrapper,
.navbar--dark + #mobile-menu .mobile-rainbow-wrapper {
  opacity: 0 !important;
}
.navbar--dark ~ #mobile-menu .mobile-link,
.navbar--dark + #mobile-menu .mobile-link {
  color: rgba(255, 255, 255, 0.55);
}
.navbar--dark ~ #mobile-menu .mobile-link:hover,
.navbar--dark + #mobile-menu .mobile-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}
.navbar--dark ~ #mobile-menu .lang-switcher,
.navbar--dark + #mobile-menu .lang-switcher {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}
.navbar--dark ~ #mobile-menu .lang-btn,
.navbar--dark + #mobile-menu .lang-btn {
  color: rgba(255, 255, 255, 0.45);
}
.navbar--dark ~ #mobile-menu .lang-btn--active,
.navbar--dark + #mobile-menu .lang-btn--active {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.navbar--dark ~ #mobile-menu .mobile-cta-link,
.navbar--dark + #mobile-menu .mobile-cta-link {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 240, 245, 0.85) 100%);
  color: #0c1220 !important;
  border: 1px solid rgba(255, 255, 255, 0.90);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ================================================================
   HERO BADGE / EYEBROW (light by default; dark inside cinematic hero)
   ================================================================ */
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px;
  background: rgba(var(--rgb-cyan), 0.08);
  border: 1px solid rgba(var(--rgb-cyan), 0.22);
  border-radius: 99px;
  color: var(--ink-muted);
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
}
.badge-pulse {
  display: inline-block; width: 8px; height: 8px;
  background: var(--brand-cyan); border-radius: 50%;
  animation: pulseDot 2s ease-in-out infinite;
  box-shadow: 0 0 8px var(--cyan-glow);
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 var(--cyan-glow); }
  50%      { opacity: 0.8; transform: scale(1.15); box-shadow: 0 0 0 6px rgba(var(--rgb-cyan), 0); }
}

/* Hero headline (used in light page heroes) */
.hero-h1 {
  font-size: clamp(2.8rem, 6.2vw, 5.5rem);
  font-weight: 900; line-height: 1.05;
  letter-spacing: -0.04em; color: var(--ink-strong); margin-bottom: 0;
}
.hero-line { display: block; overflow: hidden; }
.hero-line--accent {
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-desc {
  color: var(--ink-muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.75; max-width: 540px; margin-top: 24px;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink-muted); font-size: 13px; font-weight: 500;
}

/* Scroll cue (home cinematic hero only — styled for dark) */
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scroll-wheel {
  width: 22px; height: 36px;
  border: 2px solid rgba(255, 255, 255, 0.30);
  border-radius: 99px; position: relative;
}
.scroll-wheel::after {
  content: ''; position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 8px;
  background: var(--brand-cyan); border-radius: 99px;
  box-shadow: 0 0 6px var(--cyan-glow);
  animation: scrollWheel 1.8s ease-in-out infinite;
}
@keyframes scrollWheel {
  0%   { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(14px); }
}

/* ================================================================
   FLOATING CARD
   ================================================================ */
.tech-float-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  animation: floatCard 6s ease-in-out infinite;
}
.animate-float {
  animation: floatCard 6s ease-in-out infinite;
}
@keyframes floatCard {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-14px); }
}

/* Progress bars */
.progress-track {
  width: 100%; height: 6px;
  background: var(--bg-mute);
  border-radius: 99px; overflow: hidden; position: relative;
}
.progress-fill {
  height: 100%;
  background: var(--brand-gradient-text);
  border-radius: 99px; width: 0%;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.progress-fill.green { background: linear-gradient(90deg, #10B981, #34D399); }
.progress-fill.blue  { background: linear-gradient(90deg, var(--brand-cyan), #60A5FA); }

/* ================================================================
   STATS
   ================================================================ */
.stat-cell { text-align: center; }
.stat-num {
  font-size: clamp(2rem, 4vw, 3rem); font-weight: 800;
  color: var(--ink-strong); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  display: inline; font-weight: 700; font-size: 1.25rem;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat-lbl { color: var(--ink-muted); font-size: 13px; margin-top: 6px; font-weight: 500; }

/* ================================================================
   SECTION HEADERS
   ================================================================ */
.section-hdr { max-width: 650px; }
.section-eyebrow {
  display: inline-flex; align-items: center;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 16px;
}
.section-title {
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  font-weight: 700; line-height: 1.08;
  letter-spacing: -0.03em; color: var(--ink-strong);
}
.section-sub {
  color: var(--ink-muted);
  font-size: 1.0625rem; line-height: 1.7;
  margin-top: 16px; max-width: 58ch;
}
html[lang="th"] .section-sub { line-height: 1.85; }

/* ── Home "lux" section labels (were undefined — now on-system) ───── */
.lux-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 16px;
}
.lux-eyebrow::before {
  content: ''; width: 26px; height: 1.5px; border-radius: 2px;
  background: var(--brand-gradient); flex: none;
}
.lux-eyebrow--center { justify-content: center; }
.lux-display {
  font-family: var(--font-display);
  font-weight: 700; letter-spacing: -0.032em; line-height: 1.06;
  color: var(--ink-strong);
}
html[lang="th"] .lux-display { letter-spacing: normal; line-height: 1.18; }

/* ── Careers-standard reusable components (site design template) ─────
   The Careers page is the design reference; these are promoted to global
   so every page shares the same stat pills + left section headings. */
.stat-pill, .careers-stat-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.7);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); font-size: 13px; font-weight: 600;
  color: var(--ink); box-shadow: 0 4px 14px rgba(15,23,42,0.04);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.stat-pill i, .careers-stat-pill i { width: 16px; height: 16px; color: rgb(var(--rgb-cyan)); }
.stat-pill:hover, .careers-stat-pill:hover {
  transform: translateY(-2px); border-color: var(--line-strong);
  box-shadow: 0 8px 20px rgba(15,23,42,0.06);
}

.section-title-left, .careers-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.25rem); font-weight: 700;
  letter-spacing: -0.028em; color: var(--ink-strong); line-height: 1.15;
}
html[lang="th"] .section-title-left, html[lang="th"] .careers-section-title { letter-spacing: normal; line-height: 1.25; }

/* ================================================================
   SERVICE CARDS
   ================================================================ */
.svc-card {
  padding: 32px; display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-card);
  animation-delay: var(--stagger, 0s);
}
.svc-icon-wrap {
  width: 56px; height: 56px;
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.14) 0%, rgba(var(--card-accent), 0.03) 100%);
  border: 1px solid rgba(var(--card-accent), 0.24);
  border-top-color: rgba(var(--card-accent), 0.45);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--card-accent)); margin-bottom: 20px;
  position: relative;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(var(--card-accent), 0.04);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition), box-shadow var(--transition);
}
.svc-card:hover .svc-icon-wrap {
  transform: scale(1.1) rotate(6deg);
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.22) 0%, rgba(var(--card-accent), 0.06) 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 8px 20px rgba(var(--card-accent), 0.14);
}
.svc-title { font-size: 1.15rem; font-weight: 700; color: var(--ink-strong); margin-bottom: 10px; }
.svc-desc  { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.7; flex: 1; }
.svc-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgb(var(--card-accent, var(--rgb-cyan))); font-size: 14px; font-weight: 600;
  text-decoration: none; margin-top: 22px;
  transition: gap var(--transition);
}
.svc-link:hover { gap: 10px; }

/* ================================================================
   WHY ITEMS
   ================================================================ */
.why-item {
  display: flex; align-items: flex-start; gap: 16px;
  animation-delay: var(--stagger, 0s);
  transition: transform var(--transition);
}
.why-item:hover {
  transform: translateX(6px);
}
.why-item:nth-child(1) .why-icon-wrap { --card-accent: var(--rgb-purple); }
.why-item:nth-child(2) .why-icon-wrap { --card-accent: var(--rgb-cyan); }
.why-item:nth-child(3) .why-icon-wrap { --card-accent: var(--rgb-teal); }
.why-icon-wrap {
  width: 44px; height: 44px; flex-shrink: 0;
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.14) 0%, rgba(var(--card-accent), 0.03) 100%);
  border: 1px solid rgba(var(--card-accent), 0.24);
  border-top-color: rgba(var(--card-accent), 0.45);
  color: rgb(var(--card-accent));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 6px rgba(var(--card-accent), 0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition), box-shadow var(--transition);
}
.why-item:hover .why-icon-wrap {
  transform: scale(1.1) rotate(-8deg);
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.22) 0%, rgba(var(--card-accent), 0.06) 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 12px rgba(var(--card-accent), 0.14);
}
.why-title { font-weight: 700; color: var(--ink-strong); margin-bottom: 4px; }
.why-body  { color: var(--ink-muted); font-size: 14px; line-height: 1.65; }

/* ================================================================
   TECH KPI CARDS
   ================================================================ */
.tech-kpi-card {
  background: var(--surface);
  border-radius: 16px; padding: 28px 24px;
}
.tech-kpi-num { font-size: 1.75rem; font-weight: 800; color: var(--ink-strong); line-height: 1; margin-bottom: 6px; }
.tech-kpi-lbl { color: var(--ink-muted); font-size: 13px; }

/* ================================================================
   NEWS CARDS
   ================================================================ */
.news-card { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; }
.news-img-wrap { height: 200px; overflow: hidden; position: relative; background: var(--bg-mute); }
.news-img-wrap.featured { height: 100%; min-height: 280px; }
.news-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(var(--rgb-purple), 0.12), rgba(var(--rgb-cyan), 0.12));
  color: rgba(var(--rgb-cyan), 0.55);
}
.news-img-placeholder.featured {
  background: linear-gradient(135deg, rgba(var(--rgb-purple), 0.16), rgba(var(--rgb-teal), 0.14));
}
.news-date-badge {
  position: absolute; bottom: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(var(--card-accent, var(--rgb-cyan)), 0.24) !important;
  border-top-color: rgba(var(--card-accent, var(--rgb-cyan)), 0.45) !important;
  padding: 4px 10px; border-radius: 6px;
  font-size: 11px; color: rgb(var(--card-accent, var(--rgb-cyan))) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(var(--card-accent, var(--rgb-cyan)), 0.04);
  transition: all var(--transition);
}
.news-card:hover .news-date-badge {
  color: #fff !important;
  background: rgb(var(--card-accent, var(--rgb-cyan))) !important;
  box-shadow: 0 4px 12px rgba(var(--card-accent, var(--rgb-cyan)), 0.24);
}
.news-date-text { color: var(--ink-muted); font-size: 13px; }
.news-title {
  font-size: 1rem; font-weight: 700; color: var(--ink-strong); line-height: 1.45; margin-bottom: 8px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-excerpt {
  color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; margin-bottom: 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.news-read-link {
  display: inline-flex; align-items: center; gap: 5px;
  color: rgb(var(--card-accent, var(--rgb-cyan))); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: gap var(--transition);
}
.news-read-link:hover { gap: 8px; }
.featured-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--brand-gradient); padding: 3px 10px; border-radius: 5px;
  font-size: 11px; font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.featured-news { border-radius: var(--radius-card); overflow: hidden; }

/* ================================================================
   BUTTONS
   ================================================================ */
.btn-primary-hero, .btn-primary-lg, .btn-primary-sm, .btn-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 600; border-radius: 12px; text-decoration: none;
  transition: all var(--transition); cursor: pointer; border: none; white-space: nowrap;
  color: #fff;
  background: var(--brand-gradient);
  background-size: 180% 180%; background-position: 0% 50%;
  box-shadow: 0 8px 22px var(--purple-glow), 0 2px 10px var(--cyan-glow-md);
  position: relative; overflow: hidden;
}
.btn-primary-hero { padding: 14px 32px; font-size: 1rem; }
.btn-primary-lg   { padding: 14px 30px; font-size: 1rem; }
.btn-primary-sm   { padding: 10px 22px; font-size: 14px; }
.btn-submit       { padding: 14px 28px; font-size: 1rem; }
.btn-primary-hero:hover, .btn-primary-lg:hover, .btn-primary-sm:hover, .btn-submit:hover {
  background-position: 100% 50%;
  box-shadow: 0 12px 30px var(--purple-glow), 0 0 22px var(--teal-glow);
  transform: translateY(-2px);
}
/* Physical press feedback */
.btn-primary-hero:active, .btn-primary-lg:active, .btn-primary-sm:active, .btn-submit:active,
.btn-ghost-hero:active, .btn-outline-lg:active, .btn-ghost-sm:active, .btn-outline-sm:active,
.btn-white:active, .btn-outline-white:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.08s;
}

/* Ghost / Outline — light */
.btn-ghost-hero, .btn-outline-lg, .btn-ghost-sm, .btn-outline-sm {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; border-radius: 12px; text-decoration: none;
  transition: all var(--transition); cursor: pointer; white-space: nowrap;
  background: #fff; color: var(--ink-strong);
  border: 1px solid var(--line-strong);
}
.btn-ghost-hero { padding: 14px 32px; font-size: 1rem; }
.btn-outline-lg { padding: 13px 28px; font-size: 15px; }
.btn-ghost-sm, .btn-outline-sm { padding: 9px 18px; font-size: 13.5px; }
.btn-ghost-hero:hover, .btn-outline-lg:hover, .btn-ghost-sm:hover, .btn-outline-sm:hover {
  border-color: rgba(var(--rgb-cyan), 0.45);
  color: var(--brand-cyan);
  background: rgba(var(--rgb-cyan), 0.05);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

/* White (on dark CTA banners) */
.btn-white, .btn-outline-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 28px; border-radius: 12px;
  font-weight: 600; font-size: 15px; text-decoration: none;
  transition: all var(--transition); cursor: pointer; white-space: nowrap;
}
.btn-white { background: #fff; color: var(--ink-strong); box-shadow: 0 6px 22px rgba(0,0,0,0.20); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.28); }
.btn-outline-white {
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.45); color: #fff;
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.75); transform: translateY(-2px);
}

/* Cyber shimmer sweep on primary buttons */
.btn-primary-hero::before, .btn-primary-lg::before, .btn-primary-sm::before, .btn-submit::before {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  transform: skewX(-25deg);
  pointer-events: none; z-index: 2;
}
.btn-primary-hero:hover::before, .btn-primary-lg:hover::before, .btn-primary-sm:hover::before, .btn-submit:hover::before {
  left: 150%; transition: left 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================================
   CTA BANNER — rich dark brand band on light pages
   ================================================================ */
.cta-banner {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid rgba(var(--rgb-purple), 0.25);
  box-shadow: var(--shadow-lg);
}
.cta-banner-glow {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(var(--rgb-purple), 0.55), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(var(--rgb-teal), 0.45), transparent 55%),
    linear-gradient(135deg, #160a33 0%, #0a1f3d 55%, #07221f 100%);
}

/* ================================================================
   PAGE HERO (interior pages — light)
   ================================================================ */
.page-hero { background-color: var(--bg); }
.page-hero-title {
  font-size: clamp(2.75rem, 5.6vw, 4.5rem); font-weight: 700; color: var(--ink-strong);
  line-height: 1.04; letter-spacing: -0.038em; margin: 14px 0 0;
}
html[lang="th"] .page-hero-title { line-height: 1.12; }
.page-hero-sub {
  color: var(--ink-muted); font-size: 1.125rem; line-height: 1.7;
  margin-top: 18px; max-width: 46ch;
}
.page-hero .text-center .page-hero-sub { margin-left: auto; margin-right: auto; }
html[lang="th"] .page-hero-sub { line-height: 1.85; }

/* ================================================================
   BENTO GRID (services)
   ================================================================ */
.bento-card {
  padding: 36px; display: flex; flex-direction: column;
  animation-delay: var(--stagger, 0s);
}
.bento-icon-wrap {
  width: 48px; height: 48px;
  background: rgba(var(--card-accent, var(--rgb-cyan)), 0.10);
  border: 1px solid rgba(var(--card-accent, var(--rgb-cyan)), 0.28);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--card-accent, var(--rgb-cyan))); margin-bottom: 18px;
  transition: background var(--transition), box-shadow var(--transition);
}
.bento-icon-wrap.large { width: 60px; height: 60px; border-radius: 16px; }
.bento-card:hover .bento-icon-wrap {
  background: rgba(var(--card-accent, var(--rgb-cyan)), 0.16);
  box-shadow: 0 0 18px rgba(var(--card-accent, var(--rgb-cyan)), 0.22);
}
.bento-title       { font-size: 1.2rem; font-weight: 700; color: var(--ink-strong); margin-bottom: 12px; }
.bento-title.large { font-size: 1.5rem; margin-bottom: 14px; }
.bento-desc        { color: var(--ink-muted); font-size: 14.5px; line-height: 1.75; flex: 1; }
.bento-desc.short  { -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.bento-features { display: flex; flex-wrap: wrap; gap: 8px; }
.bento-feature-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 7px; font-size: 12px; color: var(--ink-muted);
}
.bento-cta {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 11px 22px;
  background: var(--brand-gradient); color: #fff;
  border-radius: 11px; font-size: 14px; font-weight: 600;
  text-decoration: none; align-self: flex-start;
  box-shadow: 0 6px 18px var(--purple-glow);
  transition: all var(--transition);
}
.bento-cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px var(--purple-glow), 0 0 16px var(--teal-glow); }
.bento-cta-sm {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 20px; color: var(--brand-cyan);
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: gap var(--transition);
}
.bento-cta-sm:hover { gap: 10px; }

/* Process cards */
.process-card { padding: 28px; position: relative; }
.process-num  { font-size: 3rem; font-weight: 900; line-height: 1; margin-bottom: 16px;
  background: var(--brand-gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.22; }
.process-icon { margin-bottom: 14px; color: var(--brand-cyan); }
.process-title{ font-size: 1rem; font-weight: 700; color: var(--ink-strong); margin-bottom: 8px; }
.process-desc { color: var(--ink-muted); font-size: 13.5px; line-height: 1.65; }

/* ================================================================
   CONTACT FORM
   ================================================================ */
.contact-info-card { transition: border-color var(--transition), box-shadow var(--transition); }
.contact-info-icon {
  width: 42px; height: 42px;
  background: radial-gradient(circle at 20% 20%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.14) 0%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.03) 100%);
  border: 1px solid rgba(var(--icon-accent, var(--rgb-cyan)), 0.24);
  border-top-color: rgba(var(--icon-accent, var(--rgb-cyan)), 0.45);
  color: rgb(var(--icon-accent, var(--rgb-cyan)));
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 6px rgba(var(--icon-accent, var(--rgb-cyan)), 0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition), box-shadow var(--transition);
}
.contact-info-card:hover .contact-info-icon {
  transform: scale(1.1) rotate(8deg);
  background: radial-gradient(circle at 20% 20%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.22) 0%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.06) 100%);
  animation: iconCapsulePulse 1.5s infinite ease-in-out;
}
.contact-info-title { font-weight: 700; color: var(--ink-strong); font-size: 14px; margin-bottom: 6px; }
.contact-info-body  { color: var(--ink-muted); font-size: 13.5px; line-height: 1.6; }

.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.input-wrap { position: relative; }
.input-icon { position: absolute; top: 50%; left: 13px; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.form-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px 12px 40px;
  color: var(--ink-strong); font-size: 15px; font-family: var(--font);
  outline: none; -webkit-appearance: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}
.form-textarea { padding-left: 14px; resize: vertical; min-height: 130px; }
.form-input::placeholder { color: #8592A4; opacity: 1; }
.form-input:focus {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--brand-cyan);
  box-shadow: 
    0 0 0 3px rgba(var(--rgb-cyan), 0.14),
    0 4px 12px rgba(var(--rgb-cyan), 0.05);
}
.input-wrap:focus-within .input-icon {
  color: var(--brand-cyan);
}
.form-required { color: var(--brand-purple); }

/* Alerts */
.success-alert, .error-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 12px;
}
.success-alert { background: rgba(16,185,129,0.08); border: 1px solid rgba(16,185,129,0.28); color: #047857; }
.error-alert   { background: rgba(124,58,237,0.07); border: 1px solid rgba(124,58,237,0.25); color: #6D28D9; }

/* ================================================================
   ADMIN DASHBOARD TABLE
   ================================================================ */
.admin-table { border-collapse: separate; border-spacing: 0; width: 100%; }
.admin-table th {
  padding: 11px 14px; text-align: left;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.admin-table td {
  padding: 13px 14px; font-size: 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--bg-soft); }
.msg-row td { padding-top: 0; }
.table-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
  background: rgba(124,58,237,0.08);
  color: #7C3AED;
  transition: all var(--transition);
}
.table-delete-btn:hover { background: rgba(124,58,237,0.16); }

/* ================================================================
   FOOTER (light)
   ================================================================ */
footer { background: var(--bg-soft); overflow: visible; }
/* Full-width rainbow band at the top edge — softly glowing but contained,
   so the aura never bleeds down onto the footer text. */
.footer-glow {
  position: absolute; top: -5px; left: 0;
  width: 100%; height: 10px;
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-cyan), var(--brand-purple), var(--brand-teal));
  background-size: 200% auto;
  filter: blur(12px);
  opacity: 0.55;
  pointer-events: none;
  animation: footerAuraMove 8s linear infinite;
}
@keyframes footerAuraMove {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@media(prefers-reduced-motion: reduce){ .footer-glow { animation: none; } }
.footer-heading { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-faint); }
.footer-link {
  display: inline-block;
  color: var(--ink-muted);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--transition);
}
.footer-link:hover {
  color: var(--brand-cyan);
}
.social-btn {
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(var(--rgb-cyan), 0.24) !important;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-cyan) !important; text-decoration: none;
  transition: all var(--transition);
}
.social-btn:hover {
  background: var(--brand-cyan) !important;
  color: #fff !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(var(--rgb-cyan), 0.24);
}
.social-btn:nth-of-type(3n+1) {
  border-color: rgba(var(--rgb-purple), 0.24) !important;
  color: var(--brand-purple) !important;
}
.social-btn:nth-of-type(3n+1):hover {
  background: var(--brand-purple) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-purple), 0.24);
}
.social-btn:nth-of-type(3n+2) {
  border-color: rgba(var(--rgb-cyan), 0.24) !important;
  color: var(--brand-cyan) !important;
}
.social-btn:nth-of-type(3n+2):hover {
  background: var(--brand-cyan) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-cyan), 0.24);
}
.social-btn:nth-of-type(3n+3) {
  border-color: rgba(var(--rgb-teal), 0.24) !important;
  color: var(--brand-teal) !important;
}
.social-btn:nth-of-type(3n+3):hover {
  background: var(--brand-teal) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(var(--rgb-teal), 0.24);
}

/* ================================================================
   PROSE (news-single)
   ================================================================ */
.prose-nexza { color: var(--ink); line-height: 1.85; font-size: 1rem; white-space: pre-wrap; }

/* ================================================================
   SCROLL REVEAL
   ================================================================ */
.reveal-up    { opacity: 0; transform: translateY(40px);  will-change: opacity, transform; }
.reveal-left  { opacity: 0; transform: translateX(-40px); will-change: opacity, transform; }
.reveal-right { opacity: 0; transform: translateX(40px);  will-change: opacity, transform; }
.reveal-blur  { opacity: 0; transform: translateY(30px); filter: blur(12px); will-change: opacity, transform, filter; }
.reveal-scale { opacity: 0; transform: translateY(24px) scale(0.96); will-change: opacity, transform; }

@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-blur, .reveal-scale {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
}

/* Home hero → stats-bar hand-off: hidden until it scrolls into view, then JS
   rises it in + scrambles the numbers so the count animation is actually seen
   (the 400vh pinned hero otherwise fires the reveal behind the white finale). */
#stats-bar { opacity: 0; transform: translateY(24px); will-change: opacity, transform; }

/* Language switcher styles are consolidated in the main navbar section */

/* ================================================================
   ABOUT TIMELINE
   ================================================================ */
.timeline-dot {
  width: 14px; height: 14px;
  background: var(--brand-cyan);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(var(--rgb-cyan), 0.14);
  flex-shrink: 0;
}

/* ================================================================
   MAGNETIC BUTTON
   ================================================================ */
.magnetic-btn { display: inline-flex; }
[style*="--stagger"] { animation-delay: var(--stagger); }

/* ================================================================
   INTERACTIVE CARD SPOTLIGHTS (cursor-follow accent border)
   ================================================================ */
.svc-card, .glass-card, .tech-kpi-card, .news-card, .tech-float-card, .cta-banner, .bento-card, .process-card, .featured-news { position: relative; z-index: 1; }

.svc-card::before, .glass-card::before, .tech-kpi-card::before, .news-card::before, .tech-float-card::before, .cta-banner::before, .bento-card::before, .process-card::before, .featured-news::before {
  content: '';
  position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: radial-gradient(
    300px circle at var(--mouse-x, 0px) var(--mouse-y, 0px),
    rgba(var(--card-accent, var(--rgb-cyan)), 0.5) 0%,
    rgba(var(--card-accent, var(--rgb-cyan)), 0.15) 40%,
    transparent 72%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; z-index: 10;
}
.svc-card:hover::before, .glass-card:hover::before, .tech-kpi-card:hover::before, .news-card:hover::before, .tech-float-card:hover::before, .cta-banner:hover::before, .bento-card:hover::before, .process-card:hover::before, .featured-news:hover::before { opacity: 1; }

/* Tri-colour rotation — every section shows all three brand colours */
.svc-card, .glass-card, .tech-kpi-card, .news-card, .tech-float-card, .bento-card, .process-card, .featured-news { --card-accent: var(--rgb-cyan); }
.svc-card:nth-child(3n+1), .tech-kpi-card:nth-child(3n+1), .news-card:nth-child(3n+1), .tech-float-card:nth-child(3n+1), .bento-card:nth-child(3n+1), .process-card:nth-child(3n+1), .featured-news:nth-child(3n+1) { --card-accent: var(--rgb-purple); }
.svc-card:nth-child(3n+2), .tech-kpi-card:nth-child(3n+2), .news-card:nth-child(3n+2), .tech-float-card:nth-child(3n+2), .bento-card:nth-child(3n+2), .process-card:nth-child(3n+2), .featured-news:nth-child(3n+2) { --card-accent: var(--rgb-cyan); }
.svc-card:nth-child(3n+3), .tech-kpi-card:nth-child(3n+3), .news-card:nth-child(3n+3), .tech-float-card:nth-child(3n+3), .bento-card:nth-child(3n+3), .process-card:nth-child(3n+3), .featured-news:nth-child(3n+3) { --card-accent: var(--rgb-teal); }

/* Resting accent: coloured top hairline + soft lift; stronger on hover */
.svc-card, .tech-kpi-card, .news-card, .tech-float-card, .bento-card, .process-card, .featured-news {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-top: 1.5px solid rgba(var(--card-accent), 0.40);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 3px 8px rgba(var(--card-accent), 0.03),
    0 4px 18px rgba(15, 23, 42, 0.02),
    0 12px 32px rgba(15, 23, 42, 0.04);
  transition: 
    box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
    border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

.svc-card:hover, .tech-kpi-card:hover, .news-card:hover, .tech-float-card:hover, .bento-card:hover, .process-card:hover, .featured-news:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(var(--card-accent), 0.30);
  border-top-color: rgba(var(--card-accent), 0.85);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 4px 12px rgba(var(--card-accent), 0.06),
    0 20px 48px rgba(var(--card-accent), 0.08),
    0 4px 12px rgba(var(--card-accent), 0.03);
  transform: translateY(-6px);
}

/* Diagonal specular sheen sweep on card hover */
.svc-card::after, .tech-kpi-card::after, .news-card::after, .tech-float-card::after, .bento-card::after, .process-card::after, .featured-news::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 45%,
    rgba(255, 255, 255, 0.32) 50%,
    transparent 55%
  );
  transform: translate(-100%, -100%) rotate(45deg);
  transition: transform 0s;
  pointer-events: none;
  z-index: 5;
}
.svc-card:hover::after, .tech-kpi-card:hover::after, .news-card:hover::after, .tech-float-card:hover::after, .bento-card:hover::after, .process-card:hover::after, .featured-news:hover::after {
  transform: translate(100%, 100%) rotate(45deg);
  transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.tech-kpi-card i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 10px;
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.12) 0%, rgba(var(--card-accent), 0.03) 100%);
  border: 1px solid rgba(var(--card-accent), 0.22);
  border-top-color: rgba(var(--card-accent), 0.40);
  border-radius: 50%;
  color: rgb(var(--card-accent)) !important;
  margin-bottom: 18px;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 3px 8px rgba(var(--card-accent), 0.03);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition), box-shadow var(--transition);
}

.tech-kpi-card:hover i {
  transform: scale(1.1) rotate(-8deg);
  background: radial-gradient(circle at 20% 20%, rgba(var(--card-accent), 0.20) 0%, rgba(var(--card-accent), 0.06) 100%);
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 12px rgba(var(--card-accent), 0.12);
}
.tech-kpi-card .tech-kpi-num {
  background: linear-gradient(135deg, var(--ink-strong), rgb(var(--card-accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.news-card .news-cat, .news-card .news-link { color: rgb(var(--card-accent, var(--rgb-cyan))); }

/* ════════════════════════════════════════════════════════════════
   CINEMATIC HERO (home) — keeps its own DARK world
   ════════════════════════════════════════════════════════════════ */
#cinematic-experience {
  position: relative; width: 100%; height: 100vh !important; height: 100dvh !important; overflow: hidden;
  background-color: #020710; z-index: 20;
  contain: layout style paint;
}
#three-canvas-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
  contain: layout style;
}
#three-canvas-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  will-change: transform;
}

#scene1-overlay, #scene2-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; will-change: transform, opacity;
}
#scene3-overlay {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; will-change: transform, opacity;
  background-size: cover; background-position: center;
}

/* Command-center HUD tabs (dark) */
.hud-tab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: rgba(7, 19, 41, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer; width: 100%;
}
.hud-tab-icon {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6); flex-shrink: 0;
}
.hud-tab:nth-child(1) { --card-accent: var(--rgb-purple); }
.hud-tab:nth-child(2) { --card-accent: var(--rgb-cyan); }
.hud-tab:nth-child(3) { --card-accent: var(--rgb-teal); }
.hud-tab:nth-child(4) { --card-accent: var(--rgb-purple); }
.hud-tab:hover  { background: rgba(7, 19, 41, 0.75); border-color: rgba(var(--card-accent), 0.30); box-shadow: 0 0 15px rgba(var(--card-accent), 0.10); }
.hud-tab.active { background: rgba(7, 19, 41, 0.85); border-color: rgba(var(--card-accent), 0.45); box-shadow: 0 0 25px rgba(var(--card-accent), 0.18); }
.hud-tab:hover .hud-tab-icon, .hud-tab.active .hud-tab-icon {
  color: rgb(var(--card-accent));
  background: rgba(var(--card-accent), 0.15);
  border-color: rgba(var(--card-accent), 0.40);
  box-shadow: 0 0 10px rgba(var(--card-accent), 0.22);
}
.hud-system-content {
  display: none; opacity: 0; transform: translateY(14px);
  /* 120fps: explicit props only — `transition:all` triggers expensive paint on every property */
  will-change: opacity, transform;
  transition:
    opacity   0.4s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hud-system-content.active {
  display: block; opacity: 1; transform: translateY(0);
  will-change: auto; /* release after animation resolves */
}
.hud-system-content.glass-card {
  background: rgba(10, 20, 40, 0.85);
  border: 1px solid rgba(var(--rgb-cyan), 0.15);
  backdrop-filter: blur(20px);
  box-shadow: none;
}

/* Dark-context overrides for shared components inside the cinematic hero */
#cinematic-experience .hero-badge,
#scene3-overlay .hero-badge {
  background: rgba(var(--rgb-cyan), 0.08);
  border-color: rgba(var(--rgb-cyan), 0.22);
  color: rgba(255, 255, 255, 0.75);
}
#cinematic-experience .stat-num, #scene3-overlay .stat-num { color: #fff; }
#cinematic-experience .stat-lbl, #scene3-overlay .stat-lbl { color: rgba(255, 255, 255, 0.5); }
#cinematic-experience .glass-card, #scene3-overlay .glass-card {
  background: rgba(10, 20, 40, 0.7);
  border: 1px solid rgba(var(--rgb-cyan), 0.15);
  box-shadow: none;
}
#cinematic-experience .progress-track, #scene3-overlay .progress-track { background: rgba(255,255,255,0.08); }
#scene3-overlay .section-title, #cinematic-experience .section-title { color: #fff; }

@keyframes blinkGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.animate-pulse-slow { animation: blinkGlow 2.5s ease-in-out infinite; }

/* ── Command-center chrome (Scene 3) ─────────────────────────────── */
/* Signature 3-bar "E" brand mark */
.hud-brand-mark {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(var(--rgb-cyan), 0.22);
  display: inline-flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  flex-shrink: 0;
  box-shadow: inset 0 0 14px rgba(var(--rgb-cyan), 0.10);
}
.hud-brand-mark i { display: block; height: 3px; border-radius: 2px; }
.hud-brand-mark i:nth-child(1) { width: 15px; background: linear-gradient(90deg, var(--brand-purple), rgba(129,38,244,0)); }
.hud-brand-mark i:nth-child(2) { width: 11px; background: linear-gradient(90deg, var(--brand-teal),   rgba(43,170,169,0)); }
.hud-brand-mark i:nth-child(3) { width: 15px; background: linear-gradient(90deg, var(--brand-cyan),   rgba(10,172,255,0)); }

.hud-eyebrow {
  font-family: 'Inter', monospace;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  background: var(--brand-gradient-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hud-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 99px;
  font-family: monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  color: #4ADE80;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.25);
}
.hud-live-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80; box-shadow: 0 0 8px #4ADE80;
  animation: blinkGlow 1.6s ease-in-out infinite;
}
.hud-clock {
  font-family: monospace; font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  padding: 4px 10px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  font-variant-numeric: tabular-nums;
}
.hud-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rgb-cyan), 0.28), transparent); }

/* Metric tile inside system panels */
.hud-metric {
  padding: 14px;
  background: rgba(2, 7, 16, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.hud-metric:hover { border-color: rgba(var(--card-accent, var(--rgb-cyan)), 0.32); background: rgba(2, 7, 16, 0.65); }
.hud-metric-lbl { color: rgba(255, 255, 255, 0.4); font-size: 9px; font-family: monospace; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.hud-metric-val { color: #fff; font-size: 1.9rem; font-family: monospace; font-weight: 700; line-height: 1; }
.hud-metric-unit { display: block; font-size: 10px; color: rgba(255, 255, 255, 0.4); font-weight: 500; margin-top: 1px; font-family: monospace; letter-spacing: 0.02em; }

/* Panel status pill (top-right of each panel) */
.hud-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px; border-radius: 99px;
  font-family: monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(var(--card-accent, var(--rgb-cyan)), 0.10);
  border: 1px solid rgba(var(--card-accent, var(--rgb-cyan)), 0.28);
  color: rgb(var(--card-accent, var(--rgb-cyan)));
}
.hud-panel-eyebrow { color: rgb(var(--card-accent, var(--rgb-cyan))); font-size: 10px; font-family: monospace; text-transform: uppercase; letter-spacing: 0.18em; font-weight: 700; }
.hud-insight {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: 13px;
  background: rgba(var(--card-accent, var(--rgb-cyan)), 0.06);
  border: 1px solid rgba(var(--card-accent, var(--rgb-cyan)), 0.16);
}
.hud-insight-icon {
  width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgb(var(--card-accent, var(--rgb-cyan)));
  background: rgba(var(--card-accent, var(--rgb-cyan)), 0.16);
}
/* Accent per panel id */
#hud-system-engineering { --card-accent: var(--rgb-cyan); }
#hud-system-energy      { --card-accent: 16, 185, 129; }
#hud-system-security    { --card-accent: 59, 130, 246; }
#hud-system-facility    { --card-accent: var(--rgb-purple); }

/* ── Scene 3 light-mode overrides ─────────────────────────────────
   JS tab-switching adds/removes hardcoded dark Tailwind classes.
   These selectors beat Tailwind's single-class specificity on light. */
#scene3-overlay.light-hud { color: var(--ink); }
/* dark bg → white */
#scene3-overlay.light-hud .bg-\[\#020710\]\/40 { background-color: #fff !important; }
#scene3-overlay.light-hud .bg-\[\#071329\]\/80 { background-color: rgba(var(--rgb-cyan),0.07) !important; }
/* dark border → light border */
#scene3-overlay.light-hud .border-white\/5  { border-color: var(--line) !important; }
#scene3-overlay.light-hud .border-white\/10 { border-color: var(--line) !important; }
/* icon colours */
#scene3-overlay.light-hud .bg-white\/5   { background-color: rgba(var(--rgb-cyan),0.06) !important; }
#scene3-overlay.light-hud .text-white\/50 { color: var(--ink-muted) !important; }
/* tab link text */
#scene3-overlay.light-hud .hud-tab > div span.text-white   { color: var(--ink-strong) !important; }
#scene3-overlay.light-hud .hud-tab > div span.text-white\/70 { color: var(--ink-muted) !important; }
/* panel text */
#scene3-overlay.light-hud .text-white   { color: var(--ink-strong) !important; }
#scene3-overlay.light-hud .text-white\/45 { color: var(--ink-muted) !important; }
/* clock & brand mark on white bg */
#scene3-overlay.light-hud .hud-clock {
  background: var(--bg-mute); border-color: var(--line-strong); color: var(--ink-muted);
}
#scene3-overlay.light-hud .hud-brand-mark {
  background: rgba(var(--rgb-cyan),0.07); border-color: rgba(var(--rgb-cyan),0.25);
}
/* bottom footer text */
#scene3-overlay.light-hud .text-white\/35 { color: var(--ink-faint) !important; }
#scene3-overlay.light-hud .text-white\/15 { color: var(--line-strong) !important; }

/* Tab chevron follows the per-tab accent; hidden until hover/active */
.hud-tab > i { color: rgba(255, 255, 255, 0.18); transition: color 0.3s ease, transform 0.3s ease; }
.hud-tab:hover > i { color: rgb(var(--card-accent, var(--rgb-cyan))); transform: translateX(2px); }
.hud-tab.active > i { color: rgb(var(--card-accent, var(--rgb-cyan))); }
.hud-tab .hud-tab-icon { transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.hud-tab:hover .hud-tab-icon { transform: scale(1.05); }

/* Tech-grid overlay needs light lines to read on the dark command center */
#cinematic-experience .tech-grid-bg, #scene3-overlay .tech-grid-bg {
  background-image: none !important;
}

/* ════════════════════════════════════════════════════════════════
   CUSTOM CURSOR (recoloured for light)
   ════════════════════════════════════════════════════════════════ */
.custom-cursor { display: none; }
@media (pointer: fine) {
  body { cursor: none; }
  a, button, .magnetic-btn, .svc-card, .tech-float-card, .trust-badge { cursor: none; }
  .custom-cursor { display: block; position: fixed; top: 0; left: 0; pointer-events: none; z-index: 99999; will-change: contents; }
  .cursor-dot {
    width: 6px; height: 6px;
    background-color: var(--brand-cyan);
    border-radius: 50%; position: absolute;
    transform: translate(-50%, -50%);
    scale: 1;
    box-shadow: 0 0 8px var(--cyan-glow);
    transition: opacity 0.2s ease, scale 0.2s ease;
  }
  .cursor-ring {
    width: 34px; height: 34px;
    border: 1.5px solid rgba(var(--rgb-cyan), 0.45);
    border-radius: 50%; position: absolute;
    transform: translate(-50%, -50%);
    transition: width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                height 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background-color 0.3s, border-color 0.3s;
  }
  .custom-cursor.hovering .cursor-dot {
    scale: 0;
    opacity: 0;
  }
  .custom-cursor.hovering .cursor-ring {
    width: 52px; height: 52px;
    background-color: transparent;
    border-color: rgba(var(--rgb-cyan), 0.7);
  }
  body:has(.no-cursor-expand:hover) .custom-cursor .cursor-ring {
    width: 34px !important;
    height: 34px !important;
    background-color: transparent !important;
    border-color: rgba(var(--rgb-cyan), 0.45) !important;
  }
  body:has(.no-cursor-expand:hover) .custom-cursor .cursor-dot {
    scale: 1 !important;
    opacity: 1 !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   DATA STREAMS
   ════════════════════════════════════════════════════════════════ */
.energy-stream {
  stroke-dasharray: 60 1000; stroke-dashoffset: 1000;
  animation: streamUp 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes streamUp {
  0% { stroke-dashoffset: 1000; opacity: 0; }
  10% { opacity: 1; } 90% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ================================================================
   PERFORMANCE / MOTION PREFERENCES
   ================================================================ */
.tech-float-card { will-change: transform; }
.hero-radial-red, .hero-radial-blue, .why-bg-red { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .tech-float-card    { animation: none !important; }
  .badge-pulse        { animation: none !important; }
  .scroll-wheel::after{ animation: none !important; }
  .tech-grid-bg       { animation: none !important; }
}

/* ── Premium Nexza Brand Icon Capsule ──────────────────────────────── */
.brand-icon-capsule {
  position: relative;
  background: radial-gradient(circle at 20% 20%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.14) 0%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.03) 100%) !important;
  border: 1px solid rgba(var(--icon-accent, var(--rgb-cyan)), 0.24) !important;
  border-top-color: rgba(var(--icon-accent, var(--rgb-cyan)), 0.45) !important;
  box-shadow: 
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 4px 10px rgba(var(--icon-accent, var(--rgb-cyan)), 0.04);
  color: rgb(var(--icon-accent, var(--rgb-cyan))) !important;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition), box-shadow var(--transition);
}

@keyframes iconCapsulePulse {
  0% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 6px 15px rgba(var(--icon-accent, var(--rgb-cyan)), 0.16),
      0 0 0 0px rgba(var(--icon-accent, var(--rgb-cyan)), 0.28);
  }
  50% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 6px 15px rgba(var(--icon-accent, var(--rgb-cyan)), 0.16),
      0 0 0 8px rgba(var(--icon-accent, var(--rgb-cyan)), 0);
  }
  100% {
    box-shadow: 
      inset 0 1px 0 rgba(255, 255, 255, 0.75),
      0 6px 15px rgba(var(--icon-accent, var(--rgb-cyan)), 0.16),
      0 0 0 0px rgba(var(--icon-accent, var(--rgb-cyan)), 0);
  }
}

.brand-icon-capsule:hover {
  transform: scale(1.1) rotate(6deg);
  background: radial-gradient(circle at 20% 20%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.22) 0%, rgba(var(--icon-accent, var(--rgb-cyan)), 0.06) 100%) !important;
  animation: iconCapsulePulse 1.5s infinite ease-in-out;
}

/* ── Premium Hamburger Menu Button ─────────────────────────────── */
#mobile-toggle {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  transition: color 0.3s ease;
  color: var(--ink-muted);
  outline: none;
}

#mobile-toggle:hover {
  color: var(--ink-strong) !important;
}

/* When menu is active (is-active) */
#mobile-toggle.is-active {
  color: var(--brand-purple) !important; /* Brand Purple */
}

/* Dark mode overrides */
.navbar--dark #mobile-toggle {
  color: rgba(255, 255, 255, 0.65) !important;
}

.navbar--dark #mobile-toggle:hover {
  color: #fff !important;
}

.navbar--dark #mobile-toggle.is-active {
  color: rgb(10, 172, 255) !important; /* Brand Cyan for dark mode */
}

.burger-lines {
  position: relative;
  width: 18px;
  height: 12px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.burger-line {
  position: absolute;
  left: 0;
  height: 1.5px;
  background-color: currentColor;
  border-radius: 99px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s ease,
              width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.burger-line-top {
  top: 0;
  width: 100%;
  transform-origin: center;
}

.burger-line-mid {
  top: 5px;
  width: 70%; /* premium asymmetrical shorter mid line */
  left: auto;
  right: 0;
  transform-origin: center;
}

.burger-line-bot {
  bottom: 0;
  width: 100%;
  transform-origin: center;
}

/* Hover micro-interactions: expand mid line to full width! */
#mobile-toggle:hover:not(.is-active) .burger-line-mid {
  width: 100%;
}

/* Active Symmetrical Morphing to X */
#mobile-toggle.is-active .burger-line-top {
  transform: translateY(5.25px) rotate(45deg);
}

#mobile-toggle.is-active .burger-line-mid {
  opacity: 0;
  transform: scaleX(0);
}

#mobile-toggle.is-active .burger-line-bot {
  transform: translateY(-5.25px) rotate(-45deg);
}

/* ── Holographic Preloader Screen ────────────────────────────── */
@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideInRight {
  from { transform: translateX(60px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes scaleInMid {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

@keyframes pulseOpacity {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

.bar-top-container {
  will-change: transform, opacity;
  animation: slideInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bar-top {
  background: linear-gradient(90deg, #8126F4 0%, rgba(129, 38, 244, 0) 100%);
  will-change: opacity;
  animation: pulseOpacity 2.2s ease-in-out infinite alternate;
}

.bar-mid-container {
  transform-origin: left center;
  will-change: transform, opacity;
  animation: scaleInMid 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.bar-mid {
  background: linear-gradient(90deg, rgba(43, 170, 169, 0) 0%, #2BAAA9 100%);
  will-change: opacity;
  animation: pulseOpacity 2.2s ease-in-out infinite alternate;
}

.bar-bot-container {
  will-change: transform, opacity;
  animation: slideInRight 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.bar-bot {
  background: linear-gradient(90deg, #0AACFF 0%, rgba(10, 172, 255, 0) 100%);
  will-change: opacity;
  animation: pulseOpacity 2.2s ease-in-out infinite alternate;
}

.nexza-wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: letterFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.letter-n { animation-delay: 0.6s !important; }
.letter-e { animation-delay: 0.7s !important; }
.letter-x { animation-delay: 0.8s !important; }
.letter-z { animation-delay: 0.9s !important; }
.letter-a { animation-delay: 1.0s !important; }

@keyframes letterFadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Thai Font Stacking & Vowel/Tone Mark Alignment Override ─────── */
/* The loaded Thai faces (Anuphan / IBM Plex Sans Thai) top out at weight 700.
   Any font-weight:800/900 was therefore FAUX-BOLDED by the browser, which
   shifts/mangles สระ & วรรณยุกต์ on mobile (Android/iOS). font-synthesis:none
   forces the real 700 glyph instead. letter-spacing on Thai also detaches the
   marks — neutralise both across every element on Thai pages. */
html[lang="th"] *,
html[lang="th"] *::before,
html[lang="th"] *::after,
html[lang="th"] ::placeholder,
html[lang="th"] input::placeholder,
html[lang="th"] textarea::placeholder {
  text-transform: none !important;
  font-synthesis: none !important;
  letter-spacing: normal !important;
}

html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6,
html[lang="th"] .hero-title-main,
html[lang="th"] .hero-title-accent,
html[lang="th"] .hero-h1,
html[lang="th"] .hero-huge-text,
html[lang="th"] .section-title,
html[lang="th"] .page-hero-title,
html[lang="th"] .news-title,
html[lang="th"] .svc-title,
html[lang="th"] .why-title {
  line-height: 1.25 !important;
}

html[lang="th"] h1,
html[lang="th"] h2,
html[lang="th"] h3,
html[lang="th"] h4,
html[lang="th"] h5,
html[lang="th"] h6,
html[lang="th"] p,
html[lang="th"] input,
html[lang="th"] textarea,
html[lang="th"] button,
html[lang="th"] select,
html[lang="th"] .hero-h1,
html[lang="th"] .section-title,
html[lang="th"] .page-hero-title,
html[lang="th"] .news-title,
html[lang="th"] .svc-title,
html[lang="th"] .why-title,
html[lang="th"] .tech-kpi-num,
html[lang="th"] .stat-num {
  letter-spacing: normal !important;
}

/* ── Services Page & Filter Component Custom Styling ── */
select#services-filter-select {
  background-image: none; /* Hide default select chevron to use Lucide icon */
}

/* Focus/Active animations for selected card */
.bento-card.filtered-single {
  grid-column: span 2 / span 2 !important;
  max-width: 720px !important;
  margin: 2rem auto !important;
  width: 100% !important;
  box-shadow: 0 20px 50px rgba(var(--rgb-purple), 0.15) !important;
  border-color: rgba(var(--rgb-purple), 0.4) !important;
  animation: filterFocusFade 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes filterFocusFade {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Premium Custom Select Component ── */
.custom-select-trigger {
  border: 1px solid rgba(129, 38, 244, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 15px -3px rgba(16, 24, 40, 0.02), 0 2px 6px -2px rgba(16, 24, 40, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-select-trigger:hover {
  border-color: rgba(129, 38, 244, 0.3);
  background: #ffffff;
  box-shadow: 0 10px 25px -5px rgba(129, 38, 244, 0.08);
}
.custom-select-trigger:active {
  transform: scale(0.975);
}
.custom-options-container {
  transform-origin: top center;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.25s cubic-bezier(0.34, 1.3, 0.64, 1), 
              visibility 0.25s;
}
.custom-options-container .glass-card {
  background: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(129, 38, 244, 0.06) !important;
  box-shadow: 0 20px 45px -10px rgba(129, 38, 244, 0.12), 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
  padding: 0.5rem !important;
}
.custom-option {
  position: relative;
  border-left: 3px solid transparent;
  padding: 0.75rem 1rem !important;
  margin: 0.125rem 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-option:hover {
  transform: translateX(4px);
}
/* Individual Color Accent Hover & Selection States */
.custom-option[data-accent="all"]:hover {
  background: rgba(129, 38, 244, 0.04);
  color: var(--brand-purple) !important;
}
.custom-option[data-accent="all"].selected {
  background: rgba(129, 38, 244, 0.07);
  border-left-color: var(--brand-purple);
  color: var(--brand-purple) !important;
}
.custom-option[data-accent="purple"]:hover {
  background: rgba(129, 38, 244, 0.04);
  color: var(--brand-purple) !important;
}
.custom-option[data-accent="purple"].selected {
  background: rgba(129, 38, 244, 0.07);
  border-left-color: var(--brand-purple);
  color: var(--brand-purple) !important;
}
.custom-option[data-accent="cyan"]:hover {
  background: rgba(10, 172, 255, 0.04);
  color: var(--brand-cyan) !important;
}
.custom-option[data-accent="cyan"].selected {
  background: rgba(10, 172, 255, 0.07);
  border-left-color: var(--brand-cyan);
  color: var(--brand-cyan) !important;
}
.custom-option[data-accent="teal"]:hover {
  background: rgba(43, 170, 169, 0.04);
  color: var(--brand-teal) !important;
}
.custom-option[data-accent="teal"].selected {
  background: rgba(43, 170, 169, 0.07);
  border-left-color: var(--brand-teal);
  color: var(--brand-teal) !important;
}

/* ── Services Redesign Support Styles ────────── */

/* Radar scan animated sweeper */
.radar-sweeper-cone {
  background: conic-gradient(from 0deg, rgba(129, 38, 244, 0.22) 0deg, rgba(129, 38, 244, 0) 110deg);
  animation: radar-sweep 5s linear infinite;
  transform-origin: center;
}

@keyframes radar-sweep {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Card highlight cyber border glow */
.cyber-border-glow {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.cyber-border-glow:hover {
  border-color: rgba(var(--card-accent), 0.3) !important;
  box-shadow: 0 0 24px rgba(var(--card-accent), 0.18);
}

/* Premium bento card hover glow effect */
.animate-card-glow {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.animate-card-glow:hover {
  box-shadow: 0 10px 30px rgba(var(--card-accent), 0.08), 0 0 1px rgba(var(--card-accent), 0.2);
}

/* ══════════════════════════════════════════════════════════════════════════
   ADMIN-AUTHORED RICH TEXT
   Service descriptions, testimonial quotes, award blurbs and site copy are
   written in the admin's editor and printed unescaped (after sanitising). The
   editor emits inline styles for colour/size/alignment, but indentation only
   ever comes through as a `ql-indent-*` class, so the site has to style it.
   `.rich` is the opt-in wrapper for those surfaces.
   ══════════════════════════════════════════════════════════════════════════ */
.rich > :first-child { margin-top: 0; }
.rich > :last-child  { margin-bottom: 0; }
.rich p { margin: 0 0 0.85em; }
.rich strong, .rich b { font-weight: 700; color: var(--ink-strong); }
.rich em, .rich i { font-style: italic; }
.rich u { text-decoration: underline; text-underline-offset: 2px; }
.rich s, .rich del { text-decoration: line-through; opacity: 0.75; }
.rich sub { vertical-align: sub; font-size: 0.8em; }
.rich sup { vertical-align: super; font-size: 0.8em; }
.rich a { color: var(--brand-teal); text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rich h1, .rich h2, .rich h3, .rich h4, .rich h5, .rich h6 {
  font-family: var(--font-display); font-weight: 700; color: var(--ink-strong);
  line-height: 1.3; margin: 1.4em 0 0.5em;
}
html[lang="th"] .rich h1, html[lang="th"] .rich h2, html[lang="th"] .rich h3,
html[lang="th"] .rich h4, html[lang="th"] .rich h5, html[lang="th"] .rich h6 { line-height: 1.5; }
.rich h1 { font-size: 1.5em; }
.rich h2 { font-size: 1.3em; }
.rich h3 { font-size: 1.15em; }
.rich h4, .rich h5, .rich h6 { font-size: 1em; }
.rich ul { list-style: disc;    padding-left: 1.4em; margin: 0 0 0.85em; }
.rich ol { list-style: decimal; padding-left: 1.4em; margin: 0 0 0.85em; }
.rich li { margin-bottom: 0.3em; }
.rich blockquote {
  margin: 1em 0; padding: 0.7em 1.1em; border-left: 3px solid rgba(var(--rgb-purple), 0.45);
  background: rgba(var(--rgb-purple), 0.045); border-radius: 4px 10px 10px 4px; font-style: italic;
}
.rich pre, .rich code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
.rich pre { background: #f4f6fb; padding: 12px 14px; border-radius: 10px; overflow-x: auto; margin: 0 0 0.85em; }
.rich img { max-width: 100%; height: auto; border-radius: 12px; margin: 0.8em 0; }
.rich hr { border: 0; border-top: 1px solid var(--line); margin: 1.4em 0; }
/* wide content scrolls inside its own box rather than widening the page */
.rich table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 0.85em; }
.rich th, .rich td { border: 1px solid var(--line); padding: 7px 11px; text-align: left; }

/* Editor classes the site must interpret itself (quill.snow.css is admin-only) */
.rich .ql-align-center  { text-align: center; }
.rich .ql-align-right   { text-align: right; }
.rich .ql-align-justify { text-align: justify; }
.rich .ql-indent-1 { padding-left: 2em; }
.rich .ql-indent-2 { padding-left: 4em; }
.rich .ql-indent-3 { padding-left: 6em; }
.rich .ql-indent-4 { padding-left: 8em; }