/* SUPERX AI — company website stylesheet
   Direction: a quiet, wide studio in the spirit of the Zelostech site. Full-screen film at the top,
   big centred headings with room around them, sections that alternate white, haze and deep navy,
   one vehicle at a time on a clean floor. Brand: Midnight Blue #1C3564, Aurora gradient
   (navy → glacier → leaf, used as a short hairline), Poppins (Latin) + Prompt (Thai). */

:root {
  color-scheme: light;
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --header-bg: rgba(255, 255, 255, 0.94);
  --table-head: #16203A;
  --mist: #F3F6FC;
  --mist-2: #E7EDF8;
  --ink: #16203A;
  --text: #475069;
  --mute: #6A7390;
  --line: #E1E6F0;
  --midnight: #1C3564;
  --midnight-deep: #132A52;
  --night: #0A1530;
  --night-2: #10224A;
  --night-line: rgba(255, 255, 255, 0.14);
  --night-text: #BFCBE0;
  --glacier: #4FC8E9;
  --frost: #1C8CC9;
  --leaf: #8EC96D;
  --shadow: rgba(16, 28, 56, 0.12);
  --aurora: linear-gradient(100deg, #25326C 0%, #4FC8E9 55%, #8EC96D 100%);
  --font: "Poppins", "Prompt", system-ui, -apple-system, "Segoe UI", "Sukhumvit Set", "Thonburi", sans-serif;
  --font-zh: "Poppins", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Prompt", sans-serif;
  --wrap: 1280px;
  --gutter: clamp(18px, 4vw, 48px);
  --header-h: 72px;
  --section: clamp(72px, 9vw, 136px);
  --r: 16px;
  --r-sm: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 64px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-lang="zh"] body { font-family: var(--font-zh); line-height: 1.75; }
html[data-lang="en"] body { line-height: 1.6; }

/* Language switching: Thai by default; Chinese or English when chosen */
html[data-lang="th"] [data-l]:not([data-l="th"]),
html[data-lang="zh"] [data-l]:not([data-l="zh"]),
html[data-lang="en"] [data-l]:not([data-l="en"]),
html:not([data-lang]) [data-l]:not([data-l="th"]) { display: none !important; }

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 600; margin: 0; text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
:focus-visible { outline: 2px solid var(--glacier); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--midnight); color: #fff; padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 16px; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

/* ---------- Icons ---------- */
.ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ic-sm { width: 18px; height: 18px; }
.ic-lg { width: 34px; height: 34px; stroke-width: 1.4; }
.ic-aur { stroke: url(#aur); }
.ic-back { transform: rotate(180deg); }

/* ---------- Type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 0.95rem; font-weight: 500; color: var(--frost); }
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--aurora); flex: none; }
.h1 { font-size: clamp(2.3rem, 4.8vw, 4rem); line-height: 1.08; letter-spacing: -0.022em; }
html[data-lang="th"] .h1 { font-size: clamp(2.05rem, 4vw, 3.35rem); line-height: 1.3; letter-spacing: 0; }
html[data-lang="zh"] .h1 { font-size: clamp(2.05rem, 4vw, 3.35rem); line-height: 1.26; letter-spacing: 0.01em; }
.h2 { font-size: clamp(1.9rem, 3.8vw, 3.2rem); line-height: 1.12; letter-spacing: -0.02em; }
html[data-lang="th"] .h2 { font-size: clamp(1.75rem, 3.3vw, 2.7rem); line-height: 1.34; letter-spacing: 0; }
html[data-lang="zh"] .h2 { font-size: clamp(1.75rem, 3.3vw, 2.7rem); line-height: 1.3; letter-spacing: 0.01em; }
.h1 strong, .h2 strong { font-weight: inherit; color: var(--frost); }
.h3 { font-size: 1.25rem; line-height: 1.4; }
html[data-lang="th"] .h3 { line-height: 1.5; }
.lead { font-size: clamp(1.04rem, 1.3vw, 1.2rem); max-width: 40em; }
.small { font-size: 0.875rem; color: var(--mute); }
.note { font-size: 0.82rem; color: var(--mute); }
.muted { color: var(--mute); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0.72rem 1.45rem; border-radius: var(--r-sm); border: 1px solid transparent;
  font-weight: 500; font-size: 0.96rem; line-height: 1.3; cursor: pointer; white-space: nowrap;
  transition: background .2s, border-color .2s, color .2s;
}
.btn .ic { width: 18px; height: 18px; }
.btn-primary { background: var(--midnight); color: #fff; }
.btn-primary:hover { background: var(--midnight-deep); }
.btn-outline { background: transparent; border-color: rgba(22, 32, 58, 0.22); color: var(--ink); }
.btn-outline:hover { border-color: var(--midnight); color: var(--midnight); background: var(--card); }
.btn-light { background: #fff; color: var(--midnight); }
.btn-light:hover { background: #E8F4FB; }
.btn-ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0.45rem 1rem; font-size: 0.88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--midnight); font-weight: 500; }
.link-arrow .ic { width: 18px; height: 18px; transition: transform .2s; }
.link-arrow:hover .ic { transform: translateX(3px); }

/* ---------- Dark surfaces: film, photo heroes, night bands ---------- */
.hero, .phero--photo, .phero--chat, .section--night, .section--deep, .cta-band { color: var(--night-text); }
:is(.hero, .phero--photo, .phero--chat, .section--night, .section--deep, .cta-band, .has-bgv) :is(h1, h2, h3, .h1, .h2, .h3) { color: #fff; }
:is(.hero, .phero--photo, .phero--chat, .section--night, .section--deep, .cta-band, .has-bgv) .eyebrow { color: var(--glacier); }
:is(.hero, .phero--photo, .phero--chat, .section--night, .section--deep, .cta-band, .has-bgv) .lead { color: rgba(255, 255, 255, 0.84); }
:is(.hero, .phero--photo, .phero--chat, .section--night, .section--deep, .cta-band, .has-bgv) :is(.h1, .h2) strong { color: var(--glacier); }
:is(.phero--photo, .phero--chat, .section--night, .section--deep, .has-bgv) .btn-primary { background: #fff; color: var(--midnight); }
:is(.phero--photo, .phero--chat, .section--night, .section--deep, .has-bgv) .btn-primary:hover { background: #E8F4FB; }
:is(.phero--photo, .phero--chat, .section--night, .section--deep, .has-bgv) .btn-outline { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
:is(.phero--photo, .phero--chat, .section--night, .section--deep, .has-bgv) .btn-outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 60;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent; transition: background .25s, border-color .25s;
}
.site-header.is-scrolled { border-bottom-color: var(--line); }
.header-row { display: flex; align-items: center; gap: 24px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; padding-block: 10px; flex: none; }
.brand img { height: 30px; width: auto; }
.brand .logo-light, .footer-brand .logo-light { display: none; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.nav-link, .nav-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 13px; border-radius: 10px;
  font-size: 0.95rem; font-weight: 500; color: var(--ink); background: none; border: 0; cursor: pointer;
  transition: background .2s, color .2s;
}
.nav-link:hover, .nav-toggle:hover, .nav-item:focus-within > .nav-toggle { color: var(--midnight); background: var(--mist); }
.nav-link[aria-current="page"], .nav-item.is-current > .nav-toggle { color: var(--midnight); }
.nav-link[aria-current="page"]::after, .nav-item.is-current > .nav-toggle::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--aurora);
}
.nav-toggle .ic { width: 16px; height: 16px; transition: transform .2s; }
.nav-item { position: relative; }
.sub {
  position: absolute; top: calc(100% + 6px); left: -8px; min-width: 290px; display: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 8px;
  box-shadow: 0 24px 48px -24px rgba(16, 28, 56, 0.3);
}
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav-item:hover > .sub, .nav-item:focus-within > .sub, .nav-item.is-open > .sub { display: grid; }
.nav-item:hover > .nav-toggle .ic, .nav-item.is-open > .nav-toggle .ic { transform: rotate(180deg); }
.sub a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; }
.sub a:hover, .sub a[aria-current="page"] { background: var(--mist); }
.sub a b { color: var(--ink); font-weight: 500; font-size: 0.95rem; }
.sub a span.sub-hint { font-size: 0.8rem; color: var(--mute); }
.sub hr { border: 0; border-top: 1px solid var(--line); margin: 6px 4px; }
.header-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; background: var(--card); transition: background .25s, border-color .25s; }
.lang button {
  border: 0; background: transparent; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  font-size: 0.8rem; font-weight: 600; color: var(--mute); line-height: 1.6;
}
.lang button[aria-pressed="true"] { background: var(--midnight); color: #fff; }
.menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); cursor: pointer;
}

/* Over a film or photo hero the header is see-through with white type, then turns white once the page scrolls */
body.hero-dark .site-header { position: fixed; left: 0; right: 0; top: 0; }
body.hero-dark .site-header:not(.is-solid) {
  background: linear-gradient(180deg, rgba(5, 11, 26, 0.55) 0%, rgba(5, 11, 26, 0) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent;
}
body.hero-dark .site-header:not(.is-solid) .logo-dark { display: none; }
body.hero-dark .site-header:not(.is-solid) .logo-light { display: block; }
body.hero-dark .site-header:not(.is-solid) .lang { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
body.hero-dark .site-header:not(.is-solid) .lang button { color: rgba(255, 255, 255, 0.82); }
body.hero-dark .site-header:not(.is-solid) .lang button[aria-pressed="true"] { background: #fff; color: var(--midnight); }
body.hero-dark .site-header:not(.is-solid) .header-actions .btn-primary { background: #fff; color: var(--midnight); }
body.hero-dark .site-header:not(.is-solid) .menu-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
@media (min-width: 1021px) {
  body.hero-dark .site-header:not(.is-solid) :is(.nav-link, .nav-toggle) { color: #fff; }
  body.hero-dark .site-header:not(.is-solid) :is(.nav-link:hover, .nav-toggle:hover, .nav-item:focus-within > .nav-toggle) { color: #fff; background: rgba(255, 255, 255, 0.12); }
}

/* ---------- Home hero: full-screen film ---------- */
.hero {
  position: relative; overflow: hidden; background: var(--night);
  min-height: 100vh; min-height: 100svh; display: grid; align-items: end;
}
.hero-media { position: absolute; inset: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(5, 11, 26, 0.88) 0%, rgba(5, 11, 26, 0.42) 42%, rgba(5, 11, 26, 0) 72%),
    linear-gradient(90deg, rgba(5, 11, 26, 0.62) 0%, rgba(5, 11, 26, 0.12) 55%, rgba(5, 11, 26, 0) 100%);
}
.hero-inner { position: relative; z-index: 1; width: 100%; padding-block: calc(var(--header-h) + 56px) clamp(24px, 4.5vh, 44px); }
.hero-copy { display: grid; gap: 22px; max-width: 980px; }
.hero .h1 { font-size: clamp(2.6rem, 5.6vw, 4.8rem); line-height: 1.04; letter-spacing: -0.03em; }
html[data-lang="th"] .hero .h1 { font-size: clamp(2.2rem, 4.9vw, 4.1rem); line-height: 1.24; letter-spacing: 0; }
html[data-lang="zh"] .hero .h1 { font-size: clamp(2.2rem, 4.9vw, 4.1rem); line-height: 1.22; letter-spacing: 0.01em; word-break: keep-all; overflow-wrap: anywhere; }
.hero .lead { max-width: 36em; }
.hero-foot {
  margin-top: clamp(40px, 8vh, 88px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px;
}
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 4vw, 56px); }
.hero-fact { display: grid; }
.hero-fact b { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.25; }
.hero-fact span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.72); }
.hero-caption { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; color: rgba(255, 255, 255, 0.78); }
.play-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06);
  color: #fff; display: inline-grid; place-items: center; cursor: pointer;
}
.play-btn .ic { width: 16px; height: 16px; }
.play-btn:hover { background: rgba(255, 255, 255, 0.18); }

/* ---------- Proof band under the home film: pilot sites and partners in one row ---------- */
.proof { position: relative; padding-block: clamp(22px, 3vw, 32px); background: var(--paper); border-bottom: 1px solid var(--line); }
.proof-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px 24px; }
.proof-label { grid-column: 1; grid-row: 1; font-size: 0.85rem; font-weight: 600; color: var(--mute); }
.proof .link-arrow { grid-column: 2; grid-row: 1; justify-self: end; font-size: 0.92rem; }
.proof-list { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 28px; }
.proof-item { display: grid; gap: 2px; align-content: start; line-height: 1.35; }
.proof-item b { font-size: 1.02rem; font-weight: 600; color: var(--ink); transition: color .2s; }
.proof-item small { font-size: 0.8rem; color: var(--mute); }
.proof-item img { max-height: 34px; max-width: 150px; width: auto; height: auto; object-fit: contain; }
a.proof-item:hover b { color: var(--midnight); }

/* ---------- Inner page heroes ---------- */
/* Vehicle pages: the van large on a pale floor, copy beside it */
.phero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--mist) 0%, var(--paper) 100%); }
.phero::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(240px, 40vw); height: 3px; background: var(--aurora); z-index: 2; }
.phero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center;
  max-width: calc(var(--wrap) + (100vw - var(--wrap)) / 2); min-height: clamp(440px, 62vh, 660px);
}
.phero-media { position: relative; align-self: stretch; display: flex; align-items: center; min-width: 0; }
.phero-media.is-vehicle { padding-block: clamp(28px, 4vw, 56px); }
.phero-media.is-vehicle img { width: min(100%, 900px); height: auto; filter: drop-shadow(0 34px 36px rgba(16, 28, 56, 0.18)); }
.phero-media.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero-copy { display: grid; gap: 18px; padding: clamp(32px, 5vw, 72px) var(--gutter) clamp(32px, 5vw, 72px) clamp(20px, 4vw, 64px); min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.85rem; color: var(--mute); }
.crumbs a:hover { color: var(--midnight); }
.crumbs .sep { opacity: .6; }

/* Photo pages: the picture fills the width, copy sits on it at the lower left */
.phero--photo { background: var(--night); }
.phero--photo .phero-grid { grid-template-columns: minmax(0, 1fr); max-width: none; min-height: clamp(460px, 70vh, 720px); align-items: end; }
.phero--photo .phero-media { position: absolute; inset: 0; }
.phero--photo .phero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 11, 26, 0.9) 0%, rgba(5, 11, 26, 0.46) 46%, rgba(5, 11, 26, 0.12) 78%),
    linear-gradient(90deg, rgba(5, 11, 26, 0.55) 0%, rgba(5, 11, 26, 0) 66%);
}
.phero--photo .phero-copy {
  position: relative; z-index: 1; width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: calc(var(--header-h) + 64px) var(--gutter) clamp(40px, 7vh, 76px);
}
.phero--photo .phero-copy > * { max-width: 52rem; }
/* AI agent page: chat on a deep navy field */
.phero--chat { background: radial-gradient(90% 120% at 85% 15%, #1A3672 0%, var(--night) 62%); }
.phero--chat .phero-grid { max-width: var(--wrap); margin-inline: auto; min-height: clamp(520px, 80vh, 760px); padding-top: var(--header-h); }
.phero--chat .phero-media { order: 2; min-height: 420px; }
.phero--chat .chat-art { background: transparent; }
.phero--chat .phero-copy { padding-left: var(--gutter); }
:is(.phero--photo, .phero--chat) .crumbs { color: rgba(255, 255, 255, 0.7); }
:is(.phero--photo, .phero--chat) .crumbs a:hover { color: #fff; }
:is(.phero--photo, .phero--chat) .chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26); color: #fff; }
:is(.phero--photo, .phero--chat) .chip .ic { color: var(--glacier); }
:is(.phero--photo, .phero--chat) a.chip:hover { border-color: #fff; color: #fff; }

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); margin-top: 6px; }
.figures.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { padding: 14px 12px 4px 0; display: grid; gap: 2px; }
.fig + .fig { padding-left: 14px; border-left: 1px solid var(--line); }
.fig b { font-size: clamp(1.25rem, 1.7vw, 1.6rem); color: var(--ink); font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fig b small { font-size: 0.55em; font-weight: 500; color: var(--mute); margin-left: 3px; }
.fig span { font-size: 0.82rem; color: var(--mute); line-height: 1.4; }

/* ---------- In-page section nav (model pages) ---------- */
.subnav { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--header-h)); z-index: 40; background: var(--header-bg); border-block: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.subnav-row { display: flex; justify-content: safe center; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.subnav-row::-webkit-scrollbar { display: none; }
.subnav a { flex: none; padding: 7px 15px; border-radius: 8px; font-size: 0.9rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.subnav a:hover, .subnav a.is-active { background: var(--mist); color: var(--midnight); }

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-tight { padding-block: clamp(40px, 6vw, 72px); }
/* Light sections share the page colour, so the page reads as one continuous sheet (no grey bands) */
.section--mist { background: transparent; }
.section--night { background: #070E20; }
.section--deep { background: linear-gradient(180deg, #12275A 0%, #0A1530 100%); }
.section-head { display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 56rem; margin: 0 auto clamp(36px, 5vw, 64px); }
.section-head .lead { margin-inline: auto; }
.section-head.split { grid-template-columns: minmax(0, 1fr); }
.section-head.split > div { display: grid; gap: 16px; justify-items: center; }
.section-head.is-left { justify-items: start; text-align: left; margin-inline: 0; }
.section-head.is-left .lead { margin-inline: 0; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.split.wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.wide-right { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; }
.split > *, .line > *, .contact-grid > *, .case-detail > *, .control-grid > *, .news-feature > *, .spec-layout > *, .cta-inner > * { min-width: 0; }
.prose { display: grid; gap: 14px; max-width: 44em; }
.rounded-img { border-radius: var(--r); width: 100%; object-fit: cover; background: var(--mist); }
.ratio-16-10 { aspect-ratio: 16 / 10; }
.ratio-4-3 { aspect-ratio: 4 / 3; }

/* ---------- Positioning: three-party delivery flow ---------- */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.flow-step { position: relative; display: grid; gap: 10px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.flow-step.is-us { border-color: var(--midnight); box-shadow: 0 30px 60px -40px rgba(28, 53, 100, 0.55); }
.flow-step.is-us::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 3px; border-radius: 0 0 3px 3px; background: var(--aurora); }
.flow-step + .flow-step::after {
  content: ""; position: absolute; left: -31px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%);
  background: no-repeat center / 22px 22px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C3564' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
.flow-who { font-size: 0.85rem; font-weight: 500; color: var(--mute); }
.flow-name { font-size: 1.3rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.flow-step ul { display: grid; gap: 6px; font-size: 0.94rem; }
.flow-step li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; }
.flow-step li .ic { width: 16px; height: 16px; margin-top: 5px; color: var(--midnight); }
.statement { margin-top: clamp(28px, 4vw, 44px); font-size: clamp(1.1rem, 1.9vw, 1.42rem); line-height: 1.6; color: var(--ink); font-weight: 500; max-width: 48rem; }
html[data-lang="th"] .statement { line-height: 1.75; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-top: clamp(40px, 6vw, 72px); }
.stat { padding: 28px 22px 26px 0; display: grid; gap: 6px; align-content: start; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.stat b { font-size: clamp(2.4rem, 4.6vw, 3.8rem); font-weight: 600; color: var(--midnight); line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat b small { font-size: 0.4em; font-weight: 500; color: var(--mute); margin-left: 6px; letter-spacing: 0; }
.stats-note { margin-top: 12px; }

/* ---------- Business modules ---------- */
.modules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.modules.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.module { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r); overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s; }
.module:hover { border-color: var(--midnight); box-shadow: 0 30px 60px -44px rgba(16, 28, 56, 0.45); }
.module-media { aspect-ratio: 4 / 3; background: var(--mist-2); overflow: hidden; position: relative; }
.module-media img { width: 100%; height: 100%; object-fit: cover; }
.module-media.is-vehicle img { object-fit: contain; object-position: left bottom; padding: 18px 12px 10px 0; }
.module-body { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; }
.module-label { font-size: 0.85rem; font-weight: 500; color: var(--frost); }
.module h3 { font-size: 1.18rem; }
.module p { font-size: 0.94rem; }
.module .link-arrow { margin-top: 4px; font-size: 0.94rem; }

/* Chat illustration used for the AI Agent module and page */
.chat-art { position: absolute; inset: 0; display: grid; align-content: center; gap: 10px; padding: 18px; background: linear-gradient(160deg, #EAF6FB 0%, #F3F9EE 100%); }
.bubble { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 0.82rem; line-height: 1.45; box-shadow: 0 6px 18px -12px rgba(16, 28, 56, 0.35); }
.bubble.me { justify-self: end; background: var(--midnight); color: #fff; border-bottom-right-radius: 4px; }
.bubble.ai { justify-self: start; background: var(--card); color: var(--ink); border-bottom-left-radius: 4px; }
.bubble .who { display: block; font-size: 0.7rem; font-weight: 600; color: var(--mute); margin-bottom: 2px; }
.bubble.me .who { color: rgba(255, 255, 255, 0.7); }
.phero--chat .bubble.me { background: #2A4C8F; }
/* AI Agent page: the chat sits inside a phone */
.phero--chat .phero-media:has(.chat-phone) { justify-content: center; align-items: center; }
.chat-phone { position: relative; width: min(310px, 80vw); aspect-ratio: 9 / 18; margin: clamp(16px, 3vw, 32px) auto; padding: 10px; border-radius: 48px;
  background: linear-gradient(145deg, #2C3856 0%, #0B1120 60%); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.9), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14); }
.chat-phone::before { content: ""; position: absolute; top: 20px; left: 50%; z-index: 2; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 14px; background: #05080F; }
.chat-phone-screen { height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 39px; background: var(--mist); }
.chat-phone-top { display: flex; align-items: center; gap: 10px; padding: 52px 16px 12px; background: var(--card); border-bottom: 1px solid var(--line); }
.chat-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1C8CC9, #8EC96D); }
.chat-title { display: grid; line-height: 1.25; }
.chat-title b { color: var(--ink); font-size: 0.92rem; font-weight: 600; }
.chat-title small { color: #2FA84F; font-size: 0.72rem; }
.chat-title small::before { content: "● "; }
.chat-phone .chat-art { position: relative; inset: auto; flex: 1; align-content: end; gap: 10px; padding: 16px 12px; background: transparent; overflow: hidden; }
.chat-phone .bubble { font-size: 0.8rem; }
.chat-phone-input { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 10px 16px; padding: 10px 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--mute); font-size: 0.8rem; }
.chat-phone-input .ic { width: 16px; height: 16px; color: var(--frost); }
/* Chat plays like a real conversation: customer writes, AI Agent types, then answers (main.js) */
.chat-art.is-anim .bubble { opacity: 0; transform: translateY(12px) scale(.96); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .3, 1.2); }
.chat-art.is-anim .bubble.is-on { opacity: 1; transform: none; }
.chat-art.is-anim.is-fading .bubble { opacity: 0; transform: none; transition-duration: .6s; }
.chat-typing { position: absolute; display: flex; gap: 5px; padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--card); box-shadow: 0 6px 18px -12px rgba(16, 28, 56, 0.35); opacity: 0; transition: opacity .2s; pointer-events: none; }
.chat-typing.is-on { opacity: 1; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); animation: chat-dot 1s ease-in-out infinite; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Model line-up (home): one van at a time, chosen with tabs ---------- */
.lineup-nav { display: flex; justify-content: center; }
.lineup-tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--mist); border-radius: 12px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.lineup-tabs::-webkit-scrollbar { display: none; }
.lineup-tab {
  flex: none; border: 0; background: transparent; cursor: pointer; padding: 9px 20px; border-radius: 9px;
  font-size: 0.95rem; font-weight: 500; color: var(--text); white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s;
}
.lineup-tab:hover { color: var(--ink); }
.lineup-tab[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 28, 56, 0.08), 0 8px 18px -12px rgba(16, 28, 56, 0.4); }
.lineup-panel { display: grid; justify-items: center; text-align: center; gap: 20px; margin-top: clamp(16px, 3vw, 32px); }
.lineup-stage {
  position: relative; width: min(100%, 940px); min-height: clamp(220px, 32vw, 460px); display: flex; align-items: flex-end; justify-content: center;
  background: radial-gradient(46% 16% at 50% 94%, rgba(16, 28, 56, 0.14) 0%, rgba(16, 28, 56, 0) 100%);
}
.lineup-stage img { width: min(86%, 780px); height: auto; filter: drop-shadow(0 26px 28px rgba(16, 28, 56, 0.16)); }
.lineup-stage .pcard-tag { right: 6%; top: 8%; }
.lineup-panel.is-entering .lineup-stage img { animation: lineup-in .55s cubic-bezier(.2, .7, .25, 1); }
@keyframes lineup-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.lineup-name { display: grid; gap: 2px; }
.lineup-name h3 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); letter-spacing: -0.01em; }
.lineup-name span { color: var(--mute); }
.lineup-facts { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; }
.lineup-facts > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 4px clamp(18px, 3vw, 40px); }
.lineup-facts > div + div { border-left: 1px solid var(--line); }
.lineup-facts dd { margin: 0; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lineup-facts dt { font-size: 0.85rem; color: var(--mute); }
.lineup-panel .btn-row { justify-content: center; }
.lineup .more-models { justify-content: center; margin-top: clamp(36px, 5vw, 56px); }

/* ---------- Product cards ---------- */
.pcards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.pcards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcard { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); transition: border-color .2s, box-shadow .2s; }
.pcard:hover { border-color: rgba(28, 53, 100, 0.4); box-shadow: 0 30px 60px -46px rgba(16, 28, 56, 0.5); }
.pcard-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: radial-gradient(120% 90% at 30% 100%, var(--card) 0%, var(--mist) 60%, var(--mist-2) 100%); }
.pcard-media img { position: absolute; left: 0; bottom: 8%; width: 94%; height: auto; filter: drop-shadow(0 16px 18px rgba(16, 28, 56, 0.14)); }
.pcard-tag {
  position: absolute; right: 12px; top: 12px; z-index: 1; font-size: 0.76rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--card); color: var(--midnight); border: 1px solid var(--line);
}
.pcard-tag.cold { color: var(--frost); }
.pcard-body { display: grid; gap: 14px; align-content: start; padding: 20px 20px 22px; }
.pcard-title { display: grid; gap: 2px; }
.pcard-title h3 { font-size: 1.35rem; }
.pcard-title span { font-size: 0.9rem; color: var(--mute); }
.kv { display: grid; border-top: 1px solid var(--line); margin: 0; }
.kv div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.kv dt { font-size: 0.86rem; color: var(--mute); }
.kv dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }

.more-models { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 28px; }
.more-models > span { font-weight: 600; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.9rem; background: var(--card); color: var(--text); transition: border-color .2s, color .2s; }
.chip .ic { width: 16px; height: 16px; color: var(--midnight); }
a.chip:hover { border-color: var(--midnight); color: var(--midnight); }

/* ---------- SuperX AI Control (night band) ---------- */
.control-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.control-list { display: grid; gap: 0; border-top: 1px solid var(--night-line); margin-top: 8px; }
.control-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--night-line); color: #E8EEF7; }
.control-list .ic { color: var(--glacier); margin-top: 1px; }
.phones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.8vw, 24px); align-items: start; }
.phone-card { display: grid; gap: 12px; justify-items: center; text-align: center; }
.phone-card:nth-child(even) { margin-top: 44px; }
.phone { width: 100%; max-width: 220px; aspect-ratio: 560 / 1212; border-radius: 28px; border: 6px solid #02060F; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.08); }
.phone img { width: 100%; height: 100%; object-fit: cover; }
.phone-card span { font-size: 0.86rem; color: var(--night-text); }

/* ---------- Application scenarios: a row of cards that slides sideways ---------- */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 330px); gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 6px max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))) 10px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter)));
}
.rail::-webkit-scrollbar { display: none; }
.rail:focus-visible { outline-offset: -2px; border-radius: 0; }
.rail-card { scroll-snap-align: start; display: grid; grid-template-rows: auto 1fr; background: var(--card); border-radius: var(--r); overflow: hidden; }
.rail-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--mist-2); }
.rail-card figcaption { display: grid; gap: 6px; align-content: start; padding: 18px 20px 22px; }
.rail-card b { color: var(--ink); font-weight: 600; font-size: 1.05rem; line-height: 1.4; }
.rail-card p { font-size: 0.92rem; color: var(--mute); }
.rail-nav { display: flex; gap: 10px; margin-top: 22px; }
.rail-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); background: transparent;
  color: #fff; display: inline-grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s;
}
.rail-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
.rail-btn[disabled] { opacity: 0.32; cursor: default; background: transparent; border-color: rgba(255, 255, 255, 0.35); }
.rail-btn .ic { width: 20px; height: 20px; }
.rail-btn.prev .ic { transform: rotate(180deg); }

/* ---------- Cases ---------- */
.cases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.case { display: grid; gap: 12px; align-content: start; }
.case img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); background: var(--mist-2); }
a.case:hover h3 { color: var(--midnight); }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 0.85rem; color: var(--mute); }
.case-meta .ic { width: 16px; height: 16px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: #E6F5FB; color: var(--midnight); }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--glacier); }
.status.partner { background: #EEF7E8; color: #335A1E; }
.status.partner::before { background: var(--leaf); }
.case h3 { font-size: 1.15rem; transition: color .2s; }
.case p { font-size: 0.95rem; }
.partner-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: clamp(36px, 5vw, 56px); padding-top: 24px; border-top: 1px solid var(--line); }
.partner-strip > span { font-size: 0.85rem; color: var(--mute); }
.partner-name { font-weight: 600; color: var(--ink); font-size: 1.05rem; display: inline-flex; align-items: center; gap: 10px; }
.partner-name small { font-weight: 400; color: var(--mute); font-size: 0.85rem; }
/* Partner logos sliding to the left (logos added in the back office) */
.logo-marquee { flex: 1 1 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-track { display: flex; width: max-content; gap: clamp(32px, 5vw, 64px); align-items: center; padding: 8px 0; margin: 0; list-style: none; animation: logo-run 40s linear infinite; }
.logo-marquee:hover .logo-track { animation-play-state: paused; }
.logo-track li { flex: none; display: grid; place-items: center; height: 64px; }
.logo-track img { max-height: 52px; max-width: 170px; width: auto; height: auto; object-fit: contain; }
@keyframes logo-run { to { transform: translateX(calc(-50% - clamp(32px, 5vw, 64px) / 2)); } }
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; } .logo-track li[aria-hidden] { display: none; } }

/* Case detail blocks (projects page) */
.case-detail { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: start; padding-block: clamp(40px, 6vw, 80px); border-top: 1px solid var(--line); }
.case-detail:first-of-type { border-top: 0; padding-top: 0; }
.case-detail .gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.case-detail .gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--mist-2); }
.case-detail .gallery img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.facts { display: grid; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 0.94rem; }
.facts dt { color: var(--mute); }
.facts dd { margin: 0; color: var(--ink); }

/* ---------- Video blocks ---------- */
.video-card { display: grid; gap: 10px; }
.video-card video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r); background: #000; object-fit: cover; }
.video-card figcaption { font-size: 0.88rem; color: var(--mute); }

/* ---------- Features ---------- */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 36px; }
.features.f4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.features.f2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.feature { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.feature .ic { color: var(--midnight); width: 30px; height: 30px; }
.feature h3 { font-size: 1.08rem; }
.feature p { font-size: 0.95rem; }
.section--night .feature, .section--deep .feature { border-top-color: var(--night-line); }
.section--night .feature .ic, .section--deep .feature .ic { color: var(--glacier); }

.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; border-top: 1px solid var(--line); }
.uses li { display: flex; align-items: center; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.uses .ic { color: var(--midnight); }

.checks { display: grid; gap: 10px; }
.checks li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.checks .ic { width: 20px; height: 20px; color: var(--midnight); margin-top: 3px; }

/* ---------- Gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.gallery-grid figure { margin: 0; display: grid; gap: 8px; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; background: var(--mist-2); aspect-ratio: 4 / 3; }
.gallery-grid .g-wide { grid-column: span 7; }
.gallery-grid .g-tall { grid-column: span 5; }
.gallery-grid .g-third { grid-column: span 4; }
.gallery-grid .g-half { grid-column: span 6; }
.gallery-grid .g-wide img { aspect-ratio: 16 / 10; }
.gallery-grid .g-tall img { aspect-ratio: 4 / 3.2; }
.gallery-grid figcaption { font-size: 0.85rem; color: var(--mute); }
.studio { background: radial-gradient(120% 90% at 30% 100%, var(--card) 0%, var(--mist) 60%, var(--mist-2) 100%); border-radius: 12px; overflow: hidden; display: flex; align-items: flex-end; }
.gallery-grid .studio img { object-fit: contain; object-position: left bottom; background: transparent; border-radius: 0; padding: 18px 10px 12px 0; filter: drop-shadow(0 18px 18px rgba(16, 28, 56, 0.14)); }

/* ---------- Spec table ---------- */
.spec-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.spec { width: 100%; min-width: 560px; font-size: 0.95rem; }
.spec th, .spec td { text-align: start; padding: 12px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec thead th { position: sticky; top: 0; background: var(--table-head); color: #fff; font-weight: 600; font-size: 0.92rem; }
.spec thead th:first-child { width: 42%; color: rgba(255, 255, 255, 0.78); font-weight: 500; }
.spec tbody th { font-weight: 400; color: var(--text); }
.spec td { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.spec tr.group th { background: var(--mist); color: var(--midnight); font-weight: 600; font-size: 0.86rem; padding-block: 9px; }
.spec tbody tr:last-child th, .spec tbody tr:last-child td { border-bottom: 0; }
.spec-foot { margin-top: 12px; display: grid; gap: 4px; }
.spec-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.dims { border: 1px solid var(--line); border-radius: var(--r); padding: 18px; background: var(--card); display: grid; gap: 10px; position: sticky; top: calc(var(--header-h) + 80px); }
.dims svg { width: 100%; height: auto; display: block; }
.dims .dim-line { stroke: var(--midnight); stroke-width: 1.2; fill: none; }
.dims .dim-body { stroke: var(--ink); stroke-width: 1.6; fill: var(--card); stroke-linejoin: round; }
.dims .dim-soft { stroke: var(--ink); stroke-width: 1.2; fill: var(--mist); }
.dims .dim-wheel { fill: var(--ink); }
.dims .dim-hub { fill: var(--card); }
.dims text { font-family: "Poppins", sans-serif; font-size: 15px; fill: var(--midnight); font-weight: 500; }
.dims .dim-cap { font-size: 0.85rem; color: var(--mute); }

/* ---------- Options / downloads ---------- */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.option { border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; display: grid; gap: 6px; align-content: start; background: var(--card); }
.option b { color: var(--ink); font-weight: 600; }
.option p { font-size: 0.92rem; }
.swatches { display: flex; gap: 8px; margin-top: 4px; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line); }
.downloads { display: grid; gap: 10px; }
.dl { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .2s; }
.dl:hover { border-color: var(--midnight); }
.dl-ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--mist); color: var(--midnight); }
.dl b { display: block; color: var(--ink); font-weight: 600; }
.dl span { font-size: 0.85rem; color: var(--mute); }
.dl .ic-go { color: var(--midnight); }

/* ---------- Comparison table (products) ---------- */
.compare { width: 100%; min-width: 860px; font-size: 0.94rem; }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap; }
.compare thead th { font-size: 0.85rem; color: var(--mute); font-weight: 600; background: var(--card); }
.compare tbody th { color: var(--ink); font-weight: 600; }
.compare tbody th span { display: block; font-weight: 400; font-size: 0.8rem; color: var(--mute); }
.compare td { font-variant-numeric: tabular-nums; color: var(--ink); }
.compare tbody tr:hover { background: var(--mist); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .cold { color: var(--frost); font-weight: 600; }

/* ---------- Product line rows (products page) ---------- */
.line { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--line); }
.line:first-child { border-top: 0; padding-top: 0; }
.line-media { border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: var(--mist-2); position: relative; }
.line-media img { width: 100%; height: 100%; object-fit: cover; }
.line-media.studio img { object-fit: contain; object-position: left bottom; padding: 22px 12px 14px 0; filter: drop-shadow(0 18px 18px rgba(16, 28, 56, 0.14)); }

/* ---------- Steps (real sequences only) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; position: relative; }
.steps.s4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.step { position: relative; display: grid; gap: 10px; align-content: start; }
.step:not(:last-child)::after { content: ""; position: absolute; top: 22px; left: 54px; right: -18px; border-top: 2px dashed #B9C3D3; }
.pin { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; position: relative; z-index: 1; background: var(--card); border: 2px solid var(--midnight); color: var(--midnight); font-weight: 600; font-variant-numeric: tabular-nums; }
.step.is-goal .pin { border: 0; background: var(--aurora); color: #fff; }
.step h3 { font-size: 1.08rem; margin-top: 6px; }
.step p { font-size: 0.94rem; }
.section--mist .pin { background: var(--card); }
.section--mist .step.is-goal .pin { background: var(--aurora); }
.start-cta { justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.target { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 32px; align-items: center; margin-top: clamp(36px, 5vw, 56px); padding: clamp(22px, 3vw, 36px); border-radius: var(--r); background: var(--mist); }
.target b { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 600; color: var(--midnight); line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }

/* ---------- Vision / mission ---------- */
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.vm > div { padding: 30px 32px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); display: grid; gap: 12px; align-content: start; }
.vm dt { font-size: 0.95rem; font-weight: 600; color: var(--frost); }
.vm dd { margin: 0; color: var(--ink); font-size: 1.15rem; line-height: 1.7; }
.eco { display: grid; gap: 0; justify-items: center; text-align: center; }
.eco-node { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; background: var(--card); display: grid; gap: 2px; width: 100%; }
.eco-node b { color: var(--ink); font-weight: 600; }
.eco-node span { font-size: 0.86rem; color: var(--mute); }
.eco-node.is-us { border-color: var(--midnight); box-shadow: 0 18px 40px -30px rgba(28, 53, 100, 0.6); }
.eco-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; width: 100%; position: relative; padding-top: 20px; }
.eco-row::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 20px; border: 2px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; }

/* ---------- Business models ---------- */
.models2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.model-card { border: 1px solid var(--line); border-radius: var(--r); padding: 26px 28px; display: grid; gap: 10px; align-content: start; background: var(--card); }
.model-card .ic { color: var(--midnight); width: 32px; height: 32px; }
.model-card h3 { font-size: 1.18rem; }
.services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin-top: 24px; border-top: 1px solid var(--line); }
.service { display: flex; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 500; }
.service .ic { color: var(--midnight); }

/* ---------- News ---------- */
.news-feature { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.news-feature img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); background: var(--mist-2); }
.news-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.news-item { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.news-date { font-size: 0.9rem; color: var(--mute); font-variant-numeric: tabular-nums; }
.news-item h3 { font-size: 1.12rem; margin-bottom: 6px; }
.news-item p { font-size: 0.94rem; }
.news-src { font-size: 0.88rem; color: var(--midnight); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; font-weight: 500; }
.news-src .ic { width: 16px; height: 16px; }
.kicker { font-size: 0.85rem; font-weight: 500; color: var(--frost); }

/* ---------- Closing band ---------- */
.cta-band { position: relative; overflow: hidden; background: radial-gradient(70% 140% at 92% 0%, #1D3B7A 0%, var(--night) 62%); }
.cta-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 30px; padding-block: clamp(72px, 9vw, 128px); }
.cta-inner .h2 { max-width: 20em; }
.cta-inner .lead { margin-top: 16px; max-width: 40em; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.details { display: grid; border-top: 1px solid var(--line); }
.details li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--line); }
.details .ic { color: var(--midnight); width: 20px; height: 20px; }
.details .label { display: block; font-size: 0.8rem; color: var(--mute); }
.details .value { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.copy-btn { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; color: var(--text); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.copy-btn:hover { border-color: var(--midnight); color: var(--midnight); }
.copy-btn .ic { width: 14px; height: 14px; }
.form-card { border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 3vw, 40px); background: var(--card); box-shadow: 0 40px 80px -60px var(--shadow); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.req { color: var(--frost); }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; background: var(--card); min-height: 48px;
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--midnight); box-shadow: 0 0 0 3px rgba(28, 53, 100, 0.12); }
.consent { grid-column: 1 / -1; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 0.88rem; }
.consent input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--midnight); }
.form-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.hp { position: absolute; left: -9999px; }
.form-result { margin-top: 20px; padding: 18px 20px; border-radius: 12px; background: var(--mist); display: grid; gap: 10px; }
.form-result.ok { background: #EEF7E8; }
.form-result h3 { font-size: 1.05rem; }
.form-result textarea { width: 100%; min-height: 150px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); font-size: 0.88rem; resize: vertical; }
.status-line { font-size: 0.86rem; color: var(--midnight); min-height: 1.3em; }

/* ---------- Featured unit (security page): one large photo with smaller ones below ---------- */
.feature-media { display: grid; gap: 12px; align-content: start; }
.feature-media img { width: 100%; height: auto; border-radius: var(--r); background: var(--mist-2); }
.feature-thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.feature-thumbs img { border-radius: var(--r-sm); }

/* ---------- Footer ---------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--line); color: var(--text); padding-block: clamp(56px, 7vw, 88px) 28px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; }
.footer-grid.f5 { grid-template-columns: minmax(0, 3.2fr) repeat(4, minmax(0, 2fr)); gap: 28px; }
.footer-brand { display: grid; gap: 16px; align-content: start; }
.footer-brand img { height: 32px; width: auto; }
.footer-brand p { font-size: 0.92rem; max-width: 30rem; }
.footer-tag { font-weight: 500; color: var(--ink); }
.footer-col { display: grid; gap: 9px; align-content: start; font-size: 0.93rem; }
.footer-col h4 { font-size: 0.98rem; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.footer-col a:hover { color: var(--midnight); }
.footer-col .ic { width: 16px; height: 16px; color: var(--midnight); }
.footer-contact li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.footer-contact .ic { margin-top: 4px; }
.footer-bottom { margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.84rem; color: var(--mute); }
.footer-bottom a:hover { color: var(--ink); }

/* ---------- News article pages (news-*.html) ---------- */
.article { max-width: 820px; margin-inline: auto; display: grid; gap: 28px; }
.article-body { display: grid; gap: 16px; font-size: 1.05rem; line-height: 1.85; color: var(--text); overflow-wrap: break-word; }
.article-body > :first-child { margin-top: 0; }
.article-body h2, .article-body h3, .article-body h4 { color: var(--ink); margin: 14px 0 0; line-height: 1.4; font-weight: 600; }
.article-body h2 { font-size: 1.45rem; }
.article-body h3 { font-size: 1.2rem; }
.article-body h4 { font-size: 1.05rem; }
.article-body p { margin: 0; }
.article-body ul, .article-body ol { padding-left: 1.4em; display: grid; gap: 6px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body a { color: var(--midnight); text-decoration: underline; text-underline-offset: 3px; }
.article-body strong, .article-body b { color: var(--ink); font-weight: 600; }
.article-body img { border-radius: 12px; margin: 6px 0; }
.article-body blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--glacier); color: var(--mute); }
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 8px 0; }
.article-meta { font-size: 0.92rem; color: var(--mute); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.article-meta a { color: var(--midnight); display: inline-flex; gap: 6px; align-items: center; }
.article-meta .ic { width: 16px; height: 16px; }

/* ---------- Scroll reveal (added by main.js only when motion is welcome) ---------- */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .8s cubic-bezier(.2, .65, .25, 1), transform .8s cubic-bezier(.2, .65, .25, 1); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-link, .nav-toggle { padding-inline: 9px; font-size: 0.92rem; }
  .header-actions .btn { display: none; }
  .modules, .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modules.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .features.f4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid.f5 { grid-template-columns: minmax(0, 2.6fr) repeat(4, minmax(0, 2fr)); gap: 22px; }
}
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; margin: 0; display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line); padding: 6px var(--gutter) 18px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    box-shadow: 0 24px 40px -30px rgba(16, 28, 56, 0.35);
  }
  .nav.is-open { display: flex; }
  .nav-link, .nav-toggle { width: 100%; justify-content: space-between; padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
  .nav-link[aria-current="page"]::after, .nav-item.is-current > .nav-toggle::after { display: none; }
  .nav-link:hover, .nav-toggle:hover { background: none; }
  .nav-toggle .ic { display: none; }
  .sub { position: static; display: grid; min-width: 0; border: 0; box-shadow: none; padding: 4px 0 8px 12px; border-radius: 0; }
  .sub a span.sub-hint, .sub hr { display: none; }
  .header-actions { margin-inline-start: auto; }
  .phero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .phero-copy { padding: 8px var(--gutter) clamp(32px, 6vw, 48px); }
  .phero-media.is-vehicle { padding-block: 24px 0; }
  .phero-media.is-vehicle img { width: min(92%, 640px); }
  .phero--photo .phero-grid { min-height: clamp(440px, 76svh, 640px); }
  .phero--photo .phero-copy { padding: calc(var(--header-h) + 48px) var(--gutter) clamp(32px, 6vh, 48px); }
  .phero--chat .phero-grid { min-height: 0; padding-top: calc(var(--header-h) + 16px); }
  .phero--chat .phero-media { order: 2; min-height: 360px; }
  .phero--chat .phero-copy { padding: 24px var(--gutter) 8px; }
  .split, .split.wide-left, .split.wide-right, .control-grid, .contact-grid, .news-feature, .case-detail, .line, .spec-layout { grid-template-columns: minmax(0, 1fr); }
  .dims { position: static; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .flow-step + .flow-step::after { left: 50%; top: -28px; transform: translateX(-50%) rotate(90deg); }
  .grid-3, .cases, .features, .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .phone-card:nth-child(even) { margin-top: 0; }
  .uses, .services { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid, .footer-grid.f5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .steps, .steps.s4 { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .step .pin { grid-row: span 2; }
  .step h3 { margin-top: 9px; }
  .step:not(:last-child)::after { top: 50px; bottom: -18px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed #B9C3D3; }
  .lineup-facts > div { padding-inline: 18px; }
  .subnav-row { justify-content: flex-start; }
}
@media (max-width: 760px) {
  .grid-2, .grid-3, .grid-4, .modules, .modules.c3, .pcards, .pcards.c3, .pcards.c2, .cases, .features, .features.f4, .features.f2, .options, .vm, .models2, .uses, .services { grid-template-columns: minmax(0, 1fr); }
  .proof-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures.f3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fig:nth-child(3) { padding-left: 0; border-left: 0; }
  .figures.f3 .fig:nth-child(3) { padding-left: 14px; border-left: 1px solid var(--line); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .stat + .stat { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid .g-wide, .gallery-grid .g-tall, .gallery-grid .g-third, .gallery-grid .g-half { grid-column: 1 / -1; }
  .news-item { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .hero-facts { gap: 12px 24px; }
  .target { grid-template-columns: minmax(0, 1fr); }
  .eco-row { grid-template-columns: minmax(0, 1fr); }
  .eco-row::before { display: none; }
  .lineup-tabs { justify-content: flex-start; }
  .lineup-tab { padding: 8px 14px; }
  .lineup-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .lineup-facts > div { padding-inline: 8px; }
  .lineup-facts dd { font-size: 1.15rem; }
  .rail { grid-auto-columns: 78vw; gap: 14px; }
  .hero::after { background: linear-gradient(0deg, rgba(5, 11, 26, 0.92) 0%, rgba(5, 11, 26, 0.62) 55%, rgba(5, 11, 26, 0.38) 100%); }
}
@media (max-width: 460px) {
  .lang button { padding: 4px 8px; }
  .brand img { height: 26px; }
  .header-row { gap: 12px; }
  .details li { grid-template-columns: 20px minmax(0, 1fr); }
  .details li .copy-btn { grid-column: 2; justify-self: start; }
  .phones { gap: 10px; }
  .dl { grid-template-columns: 40px minmax(0, 1fr); }
  .dl .ic-go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .phones.reveal .phone-card { opacity: 1; transform: none; }
}

/* ---------- Living backgrounds (sections without film) ---------- */
/* 1) Aurora light drifting on dark bands */
.section--deep, .section--night, .cta-band, .phero--chat { position: relative; isolation: isolate; overflow: hidden; }
.section--deep::before, .section--night::before, .cta-band::before, .phero--chat::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; opacity: .75;
  background:
    radial-gradient(28% 22% at 20% 30%, rgba(79, 200, 233, .6), transparent 70%),
    radial-gradient(30% 24% at 75% 60%, rgba(142, 201, 109, .4), transparent 70%),
    radial-gradient(34% 26% at 55% 20%, rgba(37, 50, 108, .55), transparent 70%);
  filter: blur(24px); animation: aurora-drift 11s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0% { transform: translate3d(-14%, -8%, 0) rotate(0deg) scale(1); }
  50% { transform: translate3d(12%, 6%, 0) rotate(14deg) scale(1.2); }
  100% { transform: translate3d(-6%, 12%, 0) rotate(-10deg) scale(1.05); }
}
/* 2) Route grid with lights travelling along it (app control band) */
#control::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(79, 200, 233, .9) 50%, transparent 54% 100%) 0 0 / 360px 1px repeat-y,
    linear-gradient(0deg, transparent 0 46%, rgba(142, 201, 109, .8) 50%, transparent 54% 100%) 0 0 / 1px 360px repeat-x,
    linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 60px 60px;
  -webkit-mask-image: radial-gradient(80% 90% at 70% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(80% 90% at 70% 50%, #000 30%, transparent 80%);
  animation: route-run 9s linear infinite;
}
@keyframes route-run { from { background-position: -360px 0, 0 -360px, 0 0, 0 0; } to { background-position: 1800px 0, 0 1800px, 0 0, 0 0; } }
/* 3) LiDAR pulse behind the numbers */
/* Keep page-wide effects (like this pulse) from making phones zoom out */
main { overflow-x: clip; }
@supports not (overflow: clip) { main { overflow-x: hidden; } }
.stats { position: relative; isolation: isolate; }
.stats::before, .stats::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px; z-index: -1;
  border-radius: 50%; pointer-events: none; border: 2px solid rgba(28, 140, 201, .7);
  background: radial-gradient(circle, rgba(79, 200, 233, .22) 0 2px, transparent 3px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
  animation: lidar 3.2s cubic-bezier(.2, .6, .3, 1) infinite; opacity: 0;
}
.stats::after { animation-delay: 1.6s; }
@keyframes lidar { 0% { transform: scale(.2); opacity: .9; } 100% { transform: scale(1.6); opacity: 0; } }
/* 4) Curved lines on light sections that move a little slower than the page (the pattern joins up seamlessly every 1200 px) */
.section--mist { position: relative; isolation: isolate; }
.section--mist::before {
  content: ""; position: absolute; inset: -20% 0; z-index: -1; pointer-events: none; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600' fill='none' stroke='%231C3564' stroke-opacity='.13' stroke-width='1.4'%3E%3Cpath d='M0 413.4 C50 410.2 100 391.7 150 364.6 C200 337.6 250 304.4 300 286.8 C350 269.2 400 269.1 450 285.1 C500 301 550 330.8 600 353.6 C650 376.4 700 390.2 750 392.6 C800 395.1 850 388.1 900 386.2 C950 384.3 1000 389 1050 397.6 C1100 406.3 1150 416.6 1200 413.4'/%3E%3Cpath d='M0 463.4 C50 460.2 100 441.7 150 414.6 C200 387.6 250 354.4 300 336.8 C350 319.2 400 319.1 450 335.1 C500 351 550 380.8 600 403.6 C650 426.4 700 440.2 750 442.6 C800 445.1 850 438.1 900 436.2 C950 434.3 1000 439 1050 447.6 C1100 456.3 1150 466.6 1200 463.4'/%3E%3Cpath d='M0 513.4 C50 510.2 100 491.7 150 464.6 C200 437.6 250 404.4 300 386.8 C350 369.2 400 369.1 450 385.1 C500 401 550 430.8 600 453.6 C650 476.4 700 490.2 750 492.6 C800 495.1 850 488.1 900 486.2 C950 484.3 1000 489 1050 497.6 C1100 506.3 1150 516.6 1200 513.4'/%3E%3Cpath d='M0 170.9 C50 175.5 100 171.8 150 168.3 C200 164.8 250 162.9 300 164.1 C350 165.4 400 169 450 166.4 C500 163.8 550 153.9 600 138.2 C650 122.5 700 102.2 750 90.5 C800 78.7 850 76.9 900 86.8 C950 96.6 1000 117 1050 134.8 C1100 152.6 1150 166.3 1200 170.9' stroke='%234FC8E9' stroke-opacity='.3'/%3E%3C/svg%3E") 0 0 / 1200px 600px repeat;
  transform: translate3d(0, var(--drift, 0px), 0);
  animation: lines-flow 14s linear infinite;
  /* fade out softly where the lines reach past the section, so they never stop at a hard edge */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
@keyframes lines-flow { from { background-position: 0 0; } to { background-position: 1200px 0; } }
@media (prefers-reduced-motion: reduce) {
  .section--deep::before, .section--night::before, .cta-band::before, .phero--chat::before, #control::after, .stats::before, .stats::after { animation: none !important; }
  .stats::before, .stats::after { display: none; }
  .section--mist::before { transform: none; animation: none !important; }
}

/* ---------- Delivery flow (home): boxes slide in one after another, arrows keep moving ---------- */
/* ---------- App screens (home): slide in one by one, float, and take turns in the spotlight ---------- */
.phones.reveal { opacity: 1; transform: none; }
.phones.reveal .phone-card { opacity: 0; transform: translateY(60px); }
.phones.reveal.is-in .phone-card { animation: phone-in .9s cubic-bezier(.2, .7, .25, 1) forwards; }
.phones.reveal.is-in .phone-card:nth-child(2) { animation-delay: .15s; }
.phones.reveal.is-in .phone-card:nth-child(3) { animation-delay: .3s; }
.phones.reveal.is-in .phone-card:nth-child(4) { animation-delay: .45s; }
@keyframes phone-in { to { opacity: 1; transform: none; } }
.phones.is-alive .phone { animation: phone-float 6s ease-in-out infinite; transition: scale .6s cubic-bezier(.2, .7, .25, 1), box-shadow .6s, border-color .6s; }
.phones.is-alive .phone-card:nth-child(2) .phone { animation-delay: -1.5s; }
.phones.is-alive .phone-card:nth-child(3) .phone { animation-delay: -3s; }
.phones.is-alive .phone-card:nth-child(4) .phone { animation-delay: -4.5s; }
@keyframes phone-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }
.phones.has-focus .phone-card > span { transition: color .5s, opacity .5s; opacity: .55; }
.phones.has-focus .phone-card .phone { opacity: .7; transition: scale .6s cubic-bezier(.2, .7, .25, 1), box-shadow .6s, border-color .6s, opacity .6s; }
.phones.has-focus .phone-card.is-focus .phone { opacity: 1; scale: 1.07; border-color: #0E2A44;
  box-shadow: 0 40px 70px -34px rgba(0, 0, 0, 0.85), 0 0 0 2px rgba(79, 200, 233, 0.75), 0 0 40px 4px rgba(79, 200, 233, 0.35); }
.phones.has-focus .phone-card.is-focus > span { opacity: 1; color: #fff; }
.flow.reveal { opacity: 1; transform: none; }
.flow.reveal .flow-step { opacity: 0; transform: translateX(-60px); }
.flow.reveal .flow-step::after { opacity: 0; }
.flow.reveal.is-in .flow-step { animation: flow-in .8s cubic-bezier(.2, .7, .25, 1) forwards; }
.flow.reveal.is-in .flow-step:nth-child(2) { animation-delay: .35s; }
.flow.reveal.is-in .flow-step:nth-child(3) { animation-delay: .7s; }
.flow.reveal.is-in .flow-step + .flow-step::after { animation: arrow-in .4s ease forwards, arrow-nudge 1.6s ease-in-out 1.6s infinite; }
.flow.reveal.is-in .flow-step:nth-child(2)::after { animation-delay: .5s, 1.4s; }
.flow.reveal.is-in .flow-step:nth-child(3)::after { animation-delay: .85s, 1.75s; }
@keyframes flow-in { to { opacity: 1; transform: none; } }
@keyframes arrow-in { to { opacity: 1; } }
@keyframes arrow-nudge { 0%, 100% { opacity: 1; translate: 0 0; } 50% { opacity: .55; translate: 8px 0; } }
@media (max-width: 1020px) {
  .flow.reveal .flow-step { transform: translateY(40px); }
  @keyframes arrow-nudge { 0%, 100% { opacity: 1; translate: 0 0; } 50% { opacity: .55; translate: 0 6px; } }
}
@media (prefers-reduced-motion: reduce) {
  .flow.reveal .flow-step, .flow.reveal .flow-step::after { opacity: 1 !important; transform: none !important; }
}

/* ---------- Cards tilt a little toward the mouse (computers only, added by main.js) ---------- */
.tilt { transition: transform .25s ease-out, border-color .2s, box-shadow .2s; transform-style: preserve-3d; will-change: transform; }
.tilt.is-tilting { transition: transform .08s linear, border-color .2s, box-shadow .2s; }

/* ---------- Business pages: questions and answers ---------- */
.phero--chat .phero-media:empty { display: none; }
.phero--chat .phero-grid:has(.phero-media:empty) { grid-template-columns: minmax(0, 1fr); }
.faq { max-width: 860px; margin-inline: auto; display: grid; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; line-height: 1; color: var(--frost); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 0 20px; max-width: 46em; }


/* ---------- Phone quick bar: LINE / call / demo, always at the bottom of the screen ---------- */
.quickbar { display: none; }
@media (max-width: 760px) {
  .quickbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--header-bg);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--line); box-shadow: 0 -14px 30px -24px rgba(16, 28, 56, 0.5);
  }
  .qb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; border-radius: 12px; font-weight: 600; font-size: 0.92rem; color: var(--ink); background: var(--mist); }
  .qb .ic { width: 19px; height: 19px; }
  .qb-line { background: #06C755; color: #fff; }
  .qb-demo { background: var(--midnight); color: #fff; }
  body.has-quickbar { padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 360° view on vehicle pages ---------- */
.spin { position: relative; width: min(100%, 900px); cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.spin.is-dragging { cursor: grabbing; }
.spin img { width: 100%; height: auto; pointer-events: none; filter: drop-shadow(0 34px 36px rgba(16, 28, 56, 0.18)); }
.spin-hint {
  position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; background: rgba(22, 32, 58, 0.78); color: #fff; font-size: 0.82rem; white-space: nowrap; pointer-events: none;
}
.spin-hint .ic { width: 16px; height: 16px; }
.viewer3d { position: relative; width: 100%; }
.viewer3d model-viewer { width: 100%; height: clamp(320px, 40vw, 560px); background: transparent; --poster-color: transparent; }

/* ---------- ROI calculator ---------- */
.roi { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 48px); align-items: start; }
.roi-form { display: grid; gap: 14px; padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: 20px; background: var(--card); }
.roi-field { display: grid; gap: 6px; }
.roi-label { font-size: 0.92rem; font-weight: 500; color: var(--ink); }
.roi-input { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); transition: border-color .2s, box-shadow .2s; }
.roi-input:focus-within { border-color: var(--midnight); box-shadow: 0 0 0 3px rgba(28, 53, 100, 0.12); }
.roi-input input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 11px 14px; min-height: 48px; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.roi-input input:focus { outline: none; }
.roi-unit { padding: 0 14px; color: var(--mute); font-size: 0.9rem; white-space: nowrap; }
.roi-result {
  position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 14px; padding: clamp(24px, 3.5vw, 44px); border-radius: 22px; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, #1D3B7A 0%, var(--night) 60%); color: var(--night-text);
}
.roi-kicker { color: var(--glacier); font-weight: 500; }
.roi-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.roi-big b { font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1; font-weight: 600; color: #fff; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.roi-big span { color: rgba(255, 255, 255, 0.8); }
.roi-pct { color: rgba(255, 255, 255, 0.8); }
.roi-pct b { color: var(--leaf); font-weight: 600; }
.roi-none { display: none; color: #FFD9A8; }
.roi.is-loss .roi-none { display: block; }
.roi.is-loss .roi-big b { color: rgba(255, 255, 255, 0.55); }
.roi-break { display: grid; margin: 4px 0; border-top: 1px solid var(--night-line); }
.roi-break div { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--night-line); }
.roi-break dt { color: var(--night-text); }
.roi-break dd { margin: 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roi-result .btn { justify-self: start; }
.roi-result .note { color: rgba(255, 255, 255, 0.6); }

/* ---------- Model finder ---------- */
.quiz-qs { display: grid; gap: 18px; max-width: 980px; margin-inline: auto; }
.quiz-q fieldset { margin: 0; padding: clamp(18px, 2.6vw, 28px); border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.quiz-q legend { display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 16px; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.quiz-q legend .pin { width: 38px; height: 38px; font-size: 0.9rem; }
.quiz-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.quiz-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.quiz-opt:hover { border-color: var(--midnight); }
.quiz-opt input { width: 20px; height: 20px; flex: none; accent-color: var(--midnight); margin: 0; }
.quiz-opt:has(input:checked) { border-color: var(--midnight); background: var(--mist); }
.quiz-opt span { color: var(--ink); font-weight: 500; }
.quiz-result { max-width: 980px; margin: clamp(28px, 4vw, 48px) auto 0; text-align: center; }
.quiz-pending { color: var(--mute); padding: 24px; border: 1.5px dashed var(--line); border-radius: 16px; }
.quiz-out { display: grid; justify-items: center; gap: 18px; }
.quiz-also { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; color: var(--mute); }
.quiz-card.is-entering .lineup-stage img { animation: lineup-in .55s cubic-bezier(.2, .7, .25, 1); }

@media (max-width: 1020px) {
  .roi { grid-template-columns: minmax(0, 1fr); }
  .roi-result { position: static; }
}

/* ---------- Thailand map (about → แผนงานในประเทศไทย): a network console ---------- */
/* Dark panel in every colour mode. The country is a dot matrix; the provinces of each service zone light up,
   thin routes run from the head office to each zone with small packets travelling along them. */
.thmap {
  --thm-bg: #060D1E; --thm-ink: #F2F6FC; --thm-text: #A9B6CD; --thm-mute: #6F7E99; --thm-line: rgba(160, 190, 230, 0.12);
  --thm-dot: rgba(150, 178, 220, 0.30); --thm-zone: #4FC8E9; --thm-home: #8EC96D; --thm-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: center;
  margin: clamp(28px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); padding: clamp(18px, 3.2vw, 44px);
  border-radius: 24px; border: 1px solid rgba(120, 170, 230, 0.16); color: var(--thm-text);
  background: radial-gradient(90% 70% at 28% 42%, #0F2547 0%, rgba(15, 37, 71, 0) 70%), linear-gradient(160deg, #0A1834 0%, var(--thm-bg) 60%);
  box-shadow: 0 40px 80px -40px rgba(4, 10, 26, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.thmap::before { /* a faint aurora hairline along the top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--aurora); opacity: .8;
}
.thmap-art { position: relative; width: 100%; max-width: 560px; justify-self: center; }
.thmap-svg { display: block; width: 100%; height: auto; max-height: min(82vh, 760px); overflow: visible; }
.thmap-grid { fill: none; stroke: rgba(160, 190, 230, 0.07); stroke-width: .6; }
.thmap-grid-labels text, .thmap-scale text, .thmap-north text { font-family: var(--thm-mono); font-size: 6.2px; letter-spacing: .04em; fill: var(--thm-mute); }
.thmap-dots { fill: none; stroke: var(--thm-dot); stroke-width: .44; stroke-linecap: round; }
.thmap-dots.is-zone { stroke: var(--thm-zone); stroke-width: .5; opacity: .62; transition: opacity .3s; }
.thmap-dots.is-zone.is-hot { opacity: 1; }
.thmap-dots.is-home { stroke: var(--thm-home); stroke-width: .52; opacity: .9; }
.thmap-borders { fill: none; stroke: rgba(160, 190, 230, 0.10); stroke-width: .5; stroke-linejoin: round; }
.thmap-zone-edge { fill: rgba(79, 200, 233, 0.05); stroke: rgba(79, 200, 233, 0.38); stroke-width: .6; stroke-linejoin: round; transition: fill .3s, stroke .3s; }
.thmap-zone-edge.is-hot { fill: rgba(79, 200, 233, 0.14); stroke: rgba(79, 200, 233, 0.9); }
.thmap-home-edge { fill: rgba(142, 201, 109, 0.08); stroke: rgba(142, 201, 109, 0.55); stroke-width: .6; stroke-linejoin: round; }
.thmap-route { fill: none; stroke-width: 1.1; stroke-linecap: round; transition: stroke-width .3s; }
.thmap-route.is-hot { stroke-width: 1.9; }
.thmap-packet { fill: #DDF7FF; }
.thmap-packets > g .thmap-packet { fill: #4FC8E9; }
.thmap-node { cursor: default; }
.thmap-node-halo { fill: rgba(79, 200, 233, 0.12); stroke: rgba(79, 200, 233, 0.35); stroke-width: .6; transform-box: fill-box; transform-origin: center; transition: transform .3s, fill .3s; }
.thmap-node-ring { fill: #081631; stroke: var(--thm-zone); stroke-width: 1.1; }
.thmap-node text { font-family: var(--thm-mono); font-size: 7px; font-weight: 700; fill: #E6F8FF; pointer-events: none; }
.thmap-node.is-hot .thmap-node-halo { transform: scale(1.35); fill: rgba(79, 200, 233, 0.24); }
.thmap-node.is-hot .thmap-node-ring { fill: #0E3A5C; }
.thmap-hq-ring { fill: #081631; stroke: var(--thm-home); stroke-width: 1.2; }
.thmap-hq-core { fill: var(--thm-home); }
.thmap-hq-ticks { stroke: var(--thm-home); stroke-width: 1; stroke-linecap: round; }
.thmap-pulse { fill: none; stroke: var(--thm-home); stroke-width: .8; transform-box: fill-box; transform-origin: center; animation: thmap-pulse 3s ease-out infinite; }
.thmap-pulse.p2 { animation-delay: 1.5s; }
@keyframes thmap-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(4.2); opacity: 0; } }
.thmap-hq-tag rect { fill: rgba(6, 13, 30, 0.82); stroke: rgba(142, 201, 109, 0.45); stroke-width: .6; }
.thmap-hq-name { font-size: 7px; font-weight: 700; letter-spacing: .08em; fill: var(--thm-ink); }
.thmap-hq-badge { fill: var(--thm-home); }
.thmap-hq-coord { font-family: var(--thm-mono); font-size: 5.2px; letter-spacing: .03em; fill: var(--thm-text); }
.thmap-scale path { fill: none; stroke: var(--thm-mute); stroke-width: .7; }
.thmap-north path { fill: var(--thm-mute); }
/* zone list */
.thmap-info { min-width: 0; }
.thmap .thmap-title { color: var(--thm-ink); margin-bottom: 16px; }
.thmap-legend { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--thm-line); }
.thmap-legend li {
  position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 13px 10px; border-bottom: 1px solid var(--thm-line); transition: background .25s;
}
.thmap-legend li::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--thm-zone); opacity: 0; transition: opacity .25s; }
.thmap-legend li.is-hot { background: rgba(79, 200, 233, 0.07); }
.thmap-legend li.is-hot::before { opacity: 1; }
.thmap-legend b { display: block; color: var(--thm-ink); font-weight: 600; line-height: 1.45; }
.thmap-legend small { display: block; color: var(--thm-text); font-size: .86rem; line-height: 1.5; }
.thmap-num {
  display: inline-grid; place-items: center; height: 24px; min-width: 36px; padding: 0 6px; margin-top: 1px; border-radius: 6px;
  font-family: var(--thm-mono); font-size: .74rem; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--thm-zone); border: 1px solid rgba(79, 200, 233, 0.45); background: rgba(79, 200, 233, 0.06);
}
.is-hq .thmap-num { color: var(--thm-home); border-color: rgba(142, 201, 109, 0.55); background: rgba(142, 201, 109, 0.08); }
/* comes in when scrolled to: a scan line passes down the map, then routes draw out, the zones appear and packets start */
.thmap-scan { position: absolute; left: -4%; right: -4%; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(79, 200, 233, 0), #4FC8E9 30%, #DDF7FF 50%, #4FC8E9 70%, rgba(79, 200, 233, 0));
  box-shadow: 0 0 18px 2px rgba(79, 200, 233, 0.55); }
.thmap.reveal { opacity: 1; transform: none; }
.thmap.reveal .thmap-svg { clip-path: inset(0 0 100% 0); }
.thmap.reveal.is-in .thmap-svg { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.45, .05, .35, 1); }
.thmap.reveal.is-in .thmap-scan { animation: thmap-scan 1.5s cubic-bezier(.45, .05, .35, 1) forwards; }
@keyframes thmap-scan { 0% { top: 0; opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.thmap.reveal .thmap-route { stroke-dasharray: 1; stroke-dashoffset: 1; }
.thmap.reveal.is-in .thmap-route { animation: thmap-draw 1.2s cubic-bezier(.4, .1, .2, 1) forwards; animation-delay: calc(var(--i) * .14s + 1.1s); }
@keyframes thmap-draw { to { stroke-dashoffset: 0; } }
.thmap.reveal .thmap-node, .thmap.reveal .thmap-hq-tag { opacity: 0; }
.thmap.reveal.is-in .thmap-node { opacity: 1; transition: opacity .5s; transition-delay: calc(var(--i) * .14s + 1.6s); }
.thmap.reveal.is-in .thmap-hq-tag { opacity: 1; transition: opacity .6s 1.2s; }
.thmap.reveal .thmap-packets { opacity: 0; }
.thmap.reveal.is-in .thmap-packets { opacity: 1; transition: opacity .6s 2.6s; }
.thmap.reveal .thmap-legend li { opacity: 0; transform: translateX(14px); }
.thmap.reveal.is-in .thmap-legend li { opacity: 1; transform: none; transition: opacity .5s, transform .5s, background .25s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(2) { transition-delay: .08s, .08s, 0s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(3) { transition-delay: .16s, .16s, 0s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(4) { transition-delay: .24s, .24s, 0s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(5) { transition-delay: .32s, .32s, 0s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(6) { transition-delay: .4s, .4s, 0s; }
.thmap.reveal.is-in .thmap-legend li:nth-child(n+7) { transition-delay: .48s, .48s, 0s; }
@media (max-width: 860px) {
  .thmap { grid-template-columns: minmax(0, 1fr); border-radius: 18px; }
  .thmap-art { max-width: 460px; }
}
@media (prefers-reduced-motion: reduce) {
  .thmap-packets, .thmap-pulse, .thmap-scan { display: none; }
}

/* ---------- Background video on any section (🎬 in the back office) ---------- */
/* The section turns dark: same colour set as dark mode, so cards, chips and tables inside stay readable. */
.has-bgv {
  position: relative; isolation: isolate; background: #070E20; color-scheme: dark;
  --paper: #0A1120; --card: rgba(12, 21, 41, 0.86); --mist: rgba(255, 255, 255, 0.07); --mist-2: rgba(255, 255, 255, 0.12);
  --ink: #F2F5FB; --text: #C6D0E2; --mute: #9EAAC2; --line: rgba(255, 255, 255, 0.16);
  --midnight: #8DB8FF; --midnight-deep: #B3CFFF; --frost: #63C9F0; --shadow: rgba(0, 0, 0, 0.5); --table-head: rgba(255, 255, 255, 0.1);
  color: var(--text);
}
.has-bgv::before, #control.has-bgv::after { display: none; }
.bgv { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #070E20 center / cover no-repeat; }
.bgv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bgv::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 14, 32, 0.3) 0%, rgba(7, 14, 32, 0) 28%, rgba(7, 14, 32, 0) 70%, rgba(7, 14, 32, 0.35) 100%), rgba(7, 14, 32, var(--bgv-a, 0.5));
}
.bgv-light { --bgv-a: 0.3; }
.bgv-medium { --bgv-a: 0.5; }
.bgv-strong { --bgv-a: 0.72; }
.bgv-btn {
  position: absolute; right: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.45); background: rgba(7, 14, 32, 0.35);
  color: #fff; display: grid; place-items: center; cursor: pointer; opacity: 0.75; transition: opacity .2s, background .2s;
}
.bgv-btn[hidden] { display: none; }
.bgv-btn:hover, .bgv-btn:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.16); }
.bgv-btn .ic { width: 15px; height: 15px; }
.bgv-btn .i-play, .bgv-btn.is-paused .i-pause { display: none; }
.bgv-btn.is-paused .i-play { display: block; }
/* Page heroes: the photo shows until the film is playing, then fades away */
.phero--photo .phero-media { transition: opacity .8s ease; }
.phero.bgv-on .phero-media.is-photo { opacity: 0; }
.has-bgv :is(.btn-primary, .btn-light) { color: #1C3564; }
.has-bgv .bubble.me { background: #2D5DB8; }
.has-bgv .status { background: rgba(79, 200, 233, 0.16); color: var(--ink); }
.has-bgv .status.partner { background: rgba(142, 201, 109, 0.16); color: var(--ink); }
.has-bgv .chat-art { background: rgba(255, 255, 255, 0.05); }
.has-bgv :is(.phero-media.is-vehicle img, .lineup-stage img, .spin img) { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.6)); }
.has-bgv .lineup-stage { background: radial-gradient(46% 16% at 50% 94%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%); }

/* ---------- Pop-up (📣 in the back office): what we sell, 3 steps to start, the current promotion ---------- */
/* A native <dialog>: it sits above everything, keeps keyboard focus inside and closes with Esc. A centred card on
   computers, a sheet from the bottom on phones. main.js decides when it opens. */
dialog.promo:not([open]) { display: none; }
.promo {
  padding: 0; border: 0; margin: auto; background: transparent; color: var(--text); overflow: visible;
  width: min(900px, calc(100vw - 32px)); max-width: none;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
}
.promo:not(.has-steps) { width: min(600px, calc(100vw - 32px)); }
.promo:focus, .promo:focus-visible { outline: none; }
.promo::backdrop { background: rgba(7, 14, 32, 0.62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.promo-card {
  position: relative; max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card); border-radius: 22px; box-shadow: 0 40px 100px -30px rgba(4, 10, 26, 0.7);
}
.promo:not(.has-img) .promo-card::before { content: ""; display: block; height: 4px; background: var(--aurora); }
.promo-x {
  position: absolute; top: 14px; right: 14px; z-index: 2; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #fff;
  background: rgba(7, 14, 32, 0.52); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s;
}
.promo-x:hover { background: rgba(7, 14, 32, 0.78); }
.promo-x .ic { width: 20px; height: 20px; stroke-width: 2; }
.promo:not(.has-img) .promo-x { background: var(--mist); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.promo:not(.has-img) .promo-x:hover { background: var(--mist-2); }
.promo-media { position: relative; height: min(34vh, 40vw, 380px); overflow: hidden; background: #0A1530; }
.promo-media img { width: 100%; height: 100%; object-fit: cover; }
.promo-media.fit-contain { height: auto; display: grid; place-items: center; }
.promo-media.fit-contain img { width: auto; height: auto; max-width: 100%; max-height: 40vh; object-fit: contain; }
.promo-body { --px: clamp(24px, 3.4vw, 40px); --py: clamp(22px, 4.4vh, 40px); display: grid; gap: 22px; padding: var(--py) var(--px); }
.promo.has-steps .promo-body {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr;
  grid-template-areas: "head side" "foot side"; column-gap: clamp(24px, 3.4vw, 40px);
}
.promo.has-steps .promo-head { grid-area: head; }
.promo.has-steps .promo-side { grid-area: side; }
.promo.has-steps .promo-foot { grid-area: foot; align-self: start; }
.promo:not(.has-img) .promo-body { padding-top: clamp(56px, 8vh, 64px); }
.promo-head { display: grid; gap: 12px; align-content: start; justify-items: start; }
.promo-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: var(--midnight); background: rgba(79, 200, 233, 0.16);
}
.promo-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--aurora); flex: none; }
.promo-title { font-size: clamp(1.4rem, 2.1vw, 1.7rem); line-height: 1.28; letter-spacing: -0.015em; }
html[data-lang="th"] .promo-title { line-height: 1.45; letter-spacing: 0; }
html[data-lang="zh"] .promo-title { line-height: 1.4; letter-spacing: 0.01em; }
html[data-lang="zh"] :is(.promo-title, #start .h2) { word-break: keep-all; overflow-wrap: anywhere; }
.promo-title strong { font-weight: inherit; color: var(--frost); }
.promo-text { font-size: 0.98rem; }
.promo-text, .ps-text, .promo-offer-text { text-wrap: pretty; }
/* 🎁 the promotion box, only between its dates */
.promo-offer {
  display: grid; gap: 6px; justify-self: stretch; margin-top: 4px; padding: 14px 18px 16px; border-radius: 14px;
  border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--aurora) border-box;
}
.promo-offer-label { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; color: var(--frost); }
.promo-offer-label .ic { width: 18px; height: 18px; }
.promo-offer-title { font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.promo-offer-text { font-size: 0.9rem; line-height: 1.6; }
.promo-foot { display: grid; gap: 14px; }
.promo-note { font-size: 0.8rem; color: var(--mute); }
.promo-side { display: grid; gap: 16px; align-content: start; padding: 22px 24px; border-radius: 16px; background: var(--mist); }
.promo-steps-title { font-size: 1rem; line-height: 1.45; }
.promo-steps { display: grid; gap: 16px; }
.promo-steps li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.promo-steps li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 42px; bottom: -12px; border-left: 2px dashed #B9C3D3; }
.promo-steps .pin { width: 36px; height: 36px; font-size: 0.92rem; }
.promo-steps li:last-child .pin { border: 0; background: var(--aurora); color: #fff; }
.promo-steps b { display: block; margin-top: 6px; font-weight: 600; line-height: 1.45; color: var(--ink); }
.ps-text { margin-top: 3px; font-size: 0.86rem; line-height: 1.55; }
/* while open the page stops scrolling; its scroll bar goes away, so keep the page (and the fixed header over a film) still */
html.promo-lock { overflow: hidden; }
html.promo-lock body { padding-right: var(--promo-bar, 0px); }
html.promo-lock body.hero-dark .site-header { right: var(--promo-bar, 0px); }
@media (prefers-reduced-motion: no-preference) {
  .promo[open] { animation: promo-in .45s cubic-bezier(.2, .7, .25, 1); }
  .promo[open]::backdrop { animation: promo-fade .4s ease; }
  .promo.is-closing { animation: promo-out .22s ease forwards; }
  .promo.is-closing::backdrop { animation: promo-fade-out .22s ease forwards; }
}
@keyframes promo-in { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes promo-out { to { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes promo-fade { from { opacity: 0; } }
@keyframes promo-fade-out { to { opacity: 0; } }
/* short computer screens: the buttons stay in sight at the bottom of the card while the rest scrolls */
@media (min-width: 761px) and (max-height: 760px) {
  .promo-media { height: min(26vh, 40vw, 300px); }
  .promo.has-steps .promo-body { grid-template-rows: auto auto; grid-template-areas: "head side" "foot foot"; }
  .promo-foot {
    position: sticky; bottom: 0; z-index: 1; margin: 0 calc(-1 * var(--px)) calc(-1 * var(--py)); padding: 14px var(--px) 18px;
    background: var(--card); box-shadow: 0 -12px 18px -14px rgba(16, 28, 56, 0.35);
  }
}
@media (max-width: 760px) {
  .promo, .promo:not(.has-steps) {
    width: 100%; max-width: 100%; margin: auto 0 0;
    max-height: 92vh; max-height: 92svh;
  }
  .promo-card { border-radius: 22px 22px 0 0; }
  .promo-x { top: 12px; right: 12px; width: 40px; height: 40px; }
  .promo-media { height: min(25vh, 50vw); height: min(25svh, 50vw); }
  .promo-media.fit-contain { height: auto; }
  .promo-media.fit-contain img { max-height: 30vh; max-height: 30svh; }
  .promo-body, .promo.has-steps .promo-body {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "side" "foot";
    gap: 18px; padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .promo:not(.has-img) .promo-body { padding-top: 60px; }
  /* the buttons stay in sight at the bottom of the sheet while the rest scrolls */
  .promo-foot {
    position: sticky; bottom: 0; z-index: 1; gap: 10px;
    margin: 0 -20px calc(-20px - env(safe-area-inset-bottom, 0px)); padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--card); box-shadow: 0 -12px 18px -14px rgba(16, 28, 56, 0.35);
  }
  .promo-title { font-size: 1.35rem; }
  .promo-text { font-size: 0.94rem; }
  .promo-side { gap: 12px; padding: 16px 18px; }
  .promo-steps { gap: 12px; }
  .promo-steps li:not(:last-child)::after { top: 40px; bottom: -10px; }
  .promo-steps b { margin-top: 7px; font-size: 0.95rem; }
  .ps-text { display: none; }
  .promo-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; }
  .promo-btns .btn { white-space: normal; text-align: center; padding-inline: 12px; }
  @media (prefers-reduced-motion: no-preference) {
    .promo[open] { animation: promo-up .42s cubic-bezier(.2, .7, .25, 1); }
    .promo.is-closing { animation: promo-down .24s ease forwards; }
  }
}
@media (max-width: 760px) and (max-height: 760px) {
  .promo-media { height: min(18vh, 40vw); height: min(18svh, 40vw); }
  .promo-body, .promo.has-steps .promo-body { gap: 14px; padding-top: 18px; }
  .promo:not(.has-img) .promo-body { padding-top: 60px; }
  .promo-side { padding: 14px 16px; }
}
@keyframes promo-up { from { transform: translateY(100%); } }
@keyframes promo-down { to { transform: translateY(100%); } }
@media print { .promo { display: none !important; } }

/* ---------- Live chat (💬 in the back office): a round button bottom right, the box opens above it ---------- */
.chat { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: max(20px, env(safe-area-inset-bottom, 0px)); z-index: 66; }
.chat.is-open { z-index: 80; }
.chat-fab {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 22px 0 18px;
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.95rem; color: #fff;
  background: var(--midnight); box-shadow: 0 14px 34px -12px rgba(16, 28, 56, 0.55); transition: transform .2s, background .2s;
}
.chat-fab:hover { background: var(--midnight-deep); transform: translateY(-2px); }
.chat-fab .ic { width: 24px; height: 24px; }
.chat.is-open .chat-fab-label { display: none; }
.chat.is-open .chat-fab { padding: 0 15px; }
.chat-unread { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #E5484D; border: 2px solid #fff; }
.chat-panel {
  position: absolute; right: 0; bottom: 68px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--card); color: var(--text);
  border: 1px solid var(--line); box-shadow: 0 30px 80px -24px rgba(4, 10, 26, 0.55);
}
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 18px; background: var(--midnight); color: #fff; }
.chat-who { display: grid; gap: 2px; line-height: 1.35; }
.chat-who b { font-size: 1rem; }
.chat-status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.82); }
.chat-status i { width: 8px; height: 8px; border-radius: 50%; background: #46D27A; flex: none; }
.chat.is-offline .chat-status i { background: #F2B544; }
.chat-x { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; flex: none; }
.chat-x:hover { background: rgba(255, 255, 255, 0.22); }
.chat-x .ic { width: 18px; height: 18px; stroke-width: 2; }
.chat-head, .chat-form, .chat-new, .chat-error2 { flex: none; }
.chat-log { flex: 1 1 0; min-height: 110px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--mist); }
.chat-msg { max-width: 86%; padding: 9px 13px; border-radius: 14px; font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.chat-msg p { white-space: pre-wrap; }
.chat-msg.staff { align-self: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.chat-msg.me { align-self: flex-end; background: var(--midnight); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.sys { align-self: center; max-width: 94%; padding: 6px 12px; font-size: 0.8rem; text-align: center; color: var(--mute); background: transparent; }
.chat-meta { display: block; margin-bottom: 2px; font-size: 0.72rem; opacity: 0.7; }
.chat-start { flex: 0 1 auto; min-height: 0; display: grid; gap: 10px; padding: 14px 16px 16px; border-top: 1px solid var(--line); overflow-y: auto; }
.chat-start label { display: grid; gap: 4px; font-size: 0.82rem; font-weight: 500; color: var(--ink); }
.chat-start input:not([type="checkbox"]), .chat-start textarea, .chat-form textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-size: 16px; resize: none;
}
.chat-start input:focus, .chat-start textarea:focus, .chat-form textarea:focus { outline: 2px solid var(--glacier); outline-offset: 0; border-color: transparent; }
.chat-start .chat-consent { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; font-weight: 400; font-size: 0.76rem; color: var(--text); line-height: 1.5; }
.chat-consent input { margin-top: 3px; width: 16px; height: 16px; }
.chat-start .btn { width: 100%; min-height: 44px; }
.chat-hours { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.76rem; color: var(--mute); }
.chat-hours .ic { width: 15px; height: 15px; }
.chat-error { font-size: 0.8rem; color: #C93B3F; }
.chat-error2 { padding: 0 16px 8px; }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-send { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--midnight); color: #fff; cursor: pointer; }
.chat-send .ic { width: 20px; height: 20px; }
.chat-new { margin: 0 auto 10px; padding: 4px 10px; border: 0; background: none; color: var(--mute); font-size: 0.78rem; text-decoration: underline; cursor: pointer; }
.has-quickbar .chat { bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  .chat { right: 14px; bottom: 14px; }
  body.has-quickbar .chat { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .chat-fab { min-height: 50px; padding: 0 16px 0 14px; font-size: 0.9rem; }
  /* the box fills the screen on phones */
  .chat-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-height: none; height: 88vh; height: 88svh; border-radius: 18px 18px 0 0; border: 0; }
  .chat.is-open .chat-fab { display: none; }
  .chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .chat { display: none !important; } }

/* ---------- Dark mode (only when switched on in the back office: ⚙️ → ลูกเล่นและการแสดงผล) ---------- */
@media (prefers-color-scheme: dark) {
  html.auto-dark {
    color-scheme: dark;
    --paper: #0A1120; --card: #111B31; --mist: #0E182C; --mist-2: #17233E;
    --ink: #EEF2FA; --text: #B7C1D6; --mute: #8C97B1; --line: #233150;
    --midnight: #8DB8FF; --midnight-deep: #B3CFFF; --frost: #63C9F0; --shadow: rgba(0, 0, 0, 0.5);
    --header-bg: rgba(10, 17, 32, 0.9); --table-head: #1F2D4D;
  }
  html.auto-dark .brand .logo-dark, html.auto-dark .footer-brand .logo-dark { display: none; }
  html.auto-dark .brand .logo-light, html.auto-dark .footer-brand .logo-light { display: block; }
  html.auto-dark .btn-primary, html.auto-dark .lang button[aria-pressed="true"], html.auto-dark .qb-demo { background: #2D5DB8; color: #fff; }
  html.auto-dark .btn-primary:hover { background: #3A6CCB; }
  /* White buttons on dark photos keep dark text so they stay readable */
  html.auto-dark .btn-light,
  html.auto-dark :is(.phero--photo, .phero--chat, .section--night, .section--deep, .has-bgv) .btn-primary,
  html.auto-dark body.hero-dark .site-header:not(.is-solid) .header-actions .btn-primary,
  html.auto-dark body.hero-dark .site-header:not(.is-solid) .lang button[aria-pressed="true"] { background: #fff; color: #1C3564; }
  html.auto-dark .btn-outline { border-color: rgba(238, 242, 250, 0.25); }
  html.auto-dark .bubble.me { background: #2D5DB8; }
  html.auto-dark .status { background: rgba(79, 200, 233, 0.14); color: var(--ink); }
  html.auto-dark .status.partner { background: rgba(142, 201, 109, 0.14); color: var(--ink); }
  html.auto-dark .form-result.ok { background: rgba(142, 201, 109, 0.12); }
  html.auto-dark .section--mist::before { filter: invert(1) hue-rotate(180deg); }
  html.auto-dark :is(.chat-fab, .chat-head, .chat-msg.me, .chat-send) { background: #2D5DB8; }
  html.auto-dark .chat-fab:hover { background: #3A6CCB; }
  html.auto-dark .chat-art { background: linear-gradient(160deg, #13284A 0%, #15302A 100%); }
  html.auto-dark .phero-media.is-vehicle img, html.auto-dark .lineup-stage img, html.auto-dark .spin img { filter: drop-shadow(0 30px 34px rgba(0, 0, 0, 0.6)); }
  html.auto-dark .lineup-stage { background: radial-gradient(46% 16% at 50% 94%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%); }
}