/* ============================================================
   Ascenda Dynamics — Global Stylesheet
   Deep-space black + precision engineering type + liquid-glass blue glow
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
/* Space Grotesk retired — body/UI face is now Montserrat (loaded via @import above) */

/* ---------- Tokens ---------- */
:root {
  --bg:            #000000;
  --bg-1:          #060708;
  --bg-2:          #0A0B0D;
  --bg-3:          #121316;
  --bg-card:       #0C0D10;
  --white:         #FFFFFF;
  --text:          #B0B3B8;
  --text-dim:      #6E7177;
  --blue:          #006BFF;
  --blue-soft:     #2A86FF;
  --hairline:      rgba(255,255,255,0.08);
  --hairline-2:    rgba(255,255,255,0.14);
  --glass:         rgba(255,255,255,0.035);
  --glow-blue:     rgba(0,107,255,0.35);
  --ease:          cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur:           0.33s;
  --maxw:          1320px;
  --maxw-c:        1080px;   /* narrower content width for sections */
  --nav-h:         68px;
  --island-top:    28px;     /* floating nav island offset from viewport top */
  --island-h:      52px;     /* island pill height */
  --island-w:      880px;    /* island pill max width — shorter than content sections */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  cursor: default;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input { font-family: inherit; }
ul { list-style: none; }

h1, h2, h3 { color: var(--white); font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; text-wrap: balance; }
.orbitron { font-family: 'Orbitron', 'Montserrat', sans-serif; letter-spacing: 0.02em; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }
.section { padding: 76px 0; position: relative; }
/* Content sections use a narrower, centered container — header/hero/footer stay wide */
.section .wrap { max-width: var(--maxw-c); }
.eyebrow {
  font-size: 13px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--blue-soft); margin-bottom: 18px;
}
.section-title { font-size: clamp(30px, 4vw, 52px); margin-bottom: 18px; }
.section-lead { color: var(--text); font-size: 18px; max-width: 620px; line-height: 1.55; }

/* ---------- Placeholder image block ---------- */
.ph {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, #16181C 0%, #0E0F12 100%);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.ph::after {
  content: attr(data-ph);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-dim); font-weight: 500;
}
.ph-grid::before {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 100%);
}

/* ---------- Liquid-glass glow border ---------- */
.glass {
  position: relative;
  background: var(--glass);
  /* note: no backdrop-filter here — blurring under every card is a big
     compositing cost while scrolling; the flat dark bg makes it invisible */
  border-radius: 20px;
  border: 1px solid var(--hairline);
}
.glow {
  box-shadow: 0 0 0 1px rgba(0,107,255,0.10), 0 24px 70px -30px var(--glow-blue);
}
@property --gb-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.glow-border { position: relative; box-shadow: 0 0 32px -8px rgba(0,107,255,0.28); }
.glow-border::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px;
  background: conic-gradient(from var(--gb-angle),
    rgba(0,107,255,0.9) 0deg,
    rgba(120,200,255,0.55) 60deg,
    rgba(0,107,255,0.18) 130deg,
    rgba(150,90,255,0.5) 200deg,
    rgba(0,107,255,0.12) 280deg,
    rgba(0,107,255,0.9) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: gb-sweep 9s linear infinite;
  animation-play-state: paused;          /* runs only while on screen (JS) */
}
.glow-border.gb-live::before { animation-play-state: running; }
@keyframes gb-sweep { to { --gb-angle: 360deg; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 26px; border-radius: 10px;
  font-size: 15px; font-weight: 500; letter-spacing: 0.01em;
  transition: transform var(--dur) var(--ease-bounce), background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 10px 30px -10px var(--glow-blue); }
.btn-primary:hover { background: #1a7bff; box-shadow: 0 14px 40px -8px var(--glow-blue); transform: translateY(-2px); }
.btn-ghost { background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--hairline-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* ============================================================
   HEADER / NAV
   ============================================================ */
/* Floating "dynamic island" pill — frosted glass, glowing gradient edge.
   Width is capped to the content-section width (--maxw-c). */
.nav {
  position: fixed; top: var(--island-top); left: 50%; transform: translateX(-50%);
  z-index: 100;
  width: calc(100vw - 44px);
  max-width: var(--island-w);
  height: var(--island-h);
  display: flex; align-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(0,107,255,0.22), rgba(10,18,32,0.42) 55%, rgba(0,80,200,0.16));
  -webkit-backdrop-filter: blur(22px) saturate(170%);
          backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(120,170,255,0.16);
  box-shadow:
    0 12px 40px rgba(0,0,0,0.40),
    0 0 28px rgba(0,107,255,0.20),
    inset 0 1px 0 rgba(160,200,255,0.13);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* glowing gradient hairline running around the pill edge */
.nav::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(115deg,
    rgba(0,167,255,0.55), rgba(160,200,255,0.20) 28%,
    rgba(0,107,255,0.10) 52%, rgba(160,200,255,0.14) 74%, rgba(0,167,255,0.48));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.nav.scrolled {
  background: linear-gradient(135deg, rgba(0,107,255,0.26), rgba(8,14,26,0.62) 55%, rgba(0,80,200,0.20));
  box-shadow:
    0 14px 44px rgba(0,0,0,0.5),
    0 0 32px rgba(0,107,255,0.24),
    inset 0 1px 0 rgba(160,200,255,0.14);
}
.nav-inner { width: 100%; height: 100%; padding: 0 10px 0 20px; display: flex; align-items: center; justify-content: space-between; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-img { height: 19px; width: auto; display: block; transition: opacity var(--dur) var(--ease); }
.logo:hover .logo-img { opacity: 0.85; }

.nav-links { display: flex; align-items: center; gap: 0; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 13px; border-radius: 999px;
  font-size: 14px; font-weight: 500; color: #fff;
  transition: color var(--dur) var(--ease), transform 0.2s var(--ease-bounce);
}
.nav-link .caret { width: 9px; height: 9px; opacity: 0.6; transition: transform var(--dur) var(--ease); }
.nav-link:hover { color: var(--text); }
.nav-link:hover .nav-underline { transform: scaleX(1); }
.nav-link.bounce { animation: navbounce 0.4s var(--ease-bounce); }
@keyframes navbounce { 0%{transform:translateY(0)} 40%{transform:translateY(-4px)} 100%{transform:translateY(0)} }
.nav-underline {
  position: absolute; left: 16px; right: 16px; bottom: 6px; height: 1.5px; background: var(--text);
  transform: scaleX(0); transform-origin: center; transition: transform var(--dur) var(--ease);
}
.nav-item.open .nav-link .caret { transform: rotate(180deg); }

.nav-right { display: flex; align-items: center; gap: 7px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px; border-radius: 999px; color: #fff; font-size: 13.5px; font-weight: 500;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline); transition: background var(--dur) var(--ease), transform 0.2s var(--ease-bounce);
}
.lang-toggle:hover { background: rgba(255,255,255,0.08); }
.lang-toggle svg { width: 16px; height: 16px; }
/* Day / night — sliding pill switch (sun ⟷ moon) */
.theme-switch {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between;
  width: 58px; height: 30px; padding: 0 7px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--hairline);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.theme-switch:hover { background: rgba(255,255,255,0.10); }
.theme-switch .ts-ico { width: 14px; height: 14px; position: relative; z-index: 1; transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.theme-switch .ts-sun  { color: #fff; opacity: 0.38; }
.theme-switch .ts-moon { color: #fff; opacity: 0.95; }
.theme-switch .ts-knob {
  position: absolute; top: 50%; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.07));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 0 12px rgba(0,107,255,0.45), 0 2px 6px rgba(0,0,0,0.35);
  transform: translate(30px, -50%);
  transition: transform 0.35s var(--ease-bounce), box-shadow var(--dur) var(--ease);
}
body.light .theme-switch .ts-knob {
  transform: translate(0px, -50%);
  box-shadow: 0 0 12px rgba(255,198,62,0.55), 0 2px 6px rgba(40,36,26,0.3);
}
body.light .theme-switch .ts-sun  { opacity: 1; }
body.light .theme-switch .ts-moon { opacity: 0.38; }

/* Dropdown — floating glass panel hanging below the island */
.dropdown {
  position: fixed; left: 50%; top: calc(var(--island-top) + var(--island-h) + 10px);
  width: calc(100vw - 44px); max-width: var(--maxw-c);
  background: rgba(10,12,16,0.62);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
          backdrop-filter: blur(26px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 28px;
  box-shadow: 0 18px 56px rgba(0,0,0,0.5), 0 0 24px rgba(0,107,255,0.10), inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 99;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
.dropdown.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown-inner { padding: 34px 36px 38px; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, 248px); justify-content: center; }
.dd-card { display: flex; flex-direction: column; gap: 14px; }
.dd-card .ph { aspect-ratio: 16/10; border-radius: 16px; transition: transform var(--dur) var(--ease); }
.dd-card:hover .ph { transform: translateY(-4px); }
.dd-card .label { font-size: 15px; font-weight: 500; color: #fff; }
.dd-card .sub { font-size: 13px; color: var(--text-dim); margin-top: -8px; }

/* mobile nav */
.nav-burger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; }
.nav-burger span { display: block; width: 20px; height: 1.5px; background: #fff; position: relative; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: #fff; }
.nav-burger span::before { top: -6px; } .nav-burger span::after { top: 6px; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.hero-track { display: flex; height: 100%; transition: transform 0.7s var(--ease); }
.hero-slide { position: relative; min-width: 100%; height: 100%; }
.hero-bg { position: absolute; inset: 0; }
/* Hero pixel-motion canvas (slide 1) */
.hero-bg.pixel-stage {
  display: flex; align-items: flex-end; justify-content: flex-end;
  /* right edge of the tractor = right edge of the section content below
     (sections: centered var(--maxw-c) container with 32px gutter) */
  padding: 0 calc(max((100vw - var(--maxw-c)) / 2, 0px) + 32px) 44px 0;
  /* no fill — canvas is transparent, page background shows through in both themes */
}
.hero-bg.pixel-stage::after, body.light .hero-bg.pixel-stage::after { background: none; }
#heroPixelCv { opacity: 0; transition: opacity 700ms ease; }
#heroPixelCv.ready { opacity: 1; }
.hero-bg .ph { width: 100%; height: 100%; border-radius: 0; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(0,107,255,0.12), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 38%, rgba(0,0,0,0.85) 100%);
}
.hero-content {
  position: absolute;
  left: calc(max((100vw - var(--maxw)) / 2, 0px) + 32px);
  top: calc(var(--nav-h) + 17vh);
  text-align: left; z-index: 2;
}
.hero-content h1 { font-size: clamp(22px, 3.7vw, 51px); font-weight: 600; color: #fff; line-height: 1.08; white-space: nowrap; }
.hero-content .hero-cta { margin-top: 34px; display: flex; gap: 14px; justify-content: flex-start; flex-wrap: wrap; }
/* Scroll-explode: letters + CTAs get per-element transforms from JS.
   Scoped to .hero-content (not .hero) — the block is re-parented to <body>
   while exploding, and inline elements ignore transforms. */
.hero-content h1 .hx { display: inline-block; will-change: transform, opacity; }
.hero-content .hero-cta .btn { will-change: transform, opacity; }
.hero-fade { transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }

/* Export guide — dashed bounds of the hero image area */
.img-guide { position: absolute; inset: 0; z-index: 6; pointer-events: none; outline: 2px dashed rgba(0,167,255,0.85); outline-offset: -2px; }
.img-guide-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: 'Orbitron'; font-size: 15px; letter-spacing: 0.08em; color: #fff;
  background: rgba(0,0,0,0.55); border: 1px dashed rgba(0,167,255,0.85); border-radius: 10px;
  padding: 10px 18px; backdrop-filter: blur(6px); white-space: nowrap;
}
/* Export guide — all other placeholders */
.ph.export-guide { outline: 2px dashed rgba(0,167,255,0.85); outline-offset: -2px; }
.ph-dim {
  position: absolute; left: 10px; top: 10px; z-index: 5;
  font-family: 'Orbitron'; font-size: 11px; letter-spacing: 0.06em; color: #fff;
  background: rgba(0,0,0,0.55); border: 1px dashed rgba(0,167,255,0.7); border-radius: 6px;
  padding: 4px 8px; white-space: nowrap; pointer-events: none;
}

.hero-arrow {
  position: absolute; top: 59.5%; transform: translateY(-50%); z-index: 5;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06); border: 1px solid var(--hairline);
  backdrop-filter: blur(8px); transition: background var(--dur) var(--ease), transform 0.2s var(--ease-bounce);
}
.hero-arrow:hover { background: rgba(255,255,255,0.16); }
.hero-arrow.prev { left: 24px; } .hero-arrow.next { right: 24px; }
/* prev arrow only appears once you've left the first slide */
.hero-arrow.prev { opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.hero.not-first .hero-arrow.prev { opacity: 1; pointer-events: auto; }
.hero-arrow svg { width: 18px; height: 18px; }
.hero-dots { position: absolute; bottom: 36px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; z-index: 5; }
.hero-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.3); transition: all var(--dur) var(--ease); }
.hero-dot.active { background: var(--blue); width: 26px; border-radius: 4px; }

/* ============================================================
   USE CASES
   ============================================================ */
.usecases-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; flex-wrap: wrap; }
.slider-ctrls { display: flex; gap: 10px; }
.slider-btn { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; background: var(--glass); transition: background var(--dur) var(--ease), transform 0.2s var(--ease-bounce); }
.slider-btn:hover { background: rgba(255,255,255,0.1); }
.slider-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.slider-btn svg { width: 18px; height: 18px; }
.uc-track { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; scrollbar-width: none; }
.uc-track::-webkit-scrollbar { display: none; }
.uc-card { position: relative; min-width: clamp(300px, 31%, 420px); scroll-snap-align: start; border-radius: 22px; overflow: hidden; }
.uc-card .ph { aspect-ratio: 3/4; border-radius: 22px; }
.uc-card::after { content: ""; position: absolute; inset: 0; border-radius: 22px; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.85)); pointer-events: none; }
.uc-meta { position: absolute; left: 24px; bottom: 24px; right: 24px; z-index: 2; }
.uc-meta .num { font-family: 'Orbitron'; font-size: 12px; color: var(--blue-soft); letter-spacing: 0.12em; }
.uc-meta .name { font-size: 22px; font-weight: 500; color: #fff; margin-top: 4px; }
.uc-meta .desc { font-size: 14px; color: var(--text); margin-top: 6px; opacity: 0; max-height: 0; transition: opacity var(--dur) var(--ease), max-height var(--dur) var(--ease); }
.uc-card:hover .uc-meta .desc { opacity: 1; max-height: 80px; }
.uc-card { transition: transform var(--dur) var(--ease); }
.uc-card:hover { transform: translateY(-6px); }

/* ============================================================
   STATS DASHBOARD + ROI
   ============================================================ */
.dash-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: stretch; }
.dash-visual { display: flex; }
.dash-visual .ph { width: 100%; height: 100%; min-height: 420px; border-radius: 26px; }
.dash-panel { padding: 4px; }
.dash-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 18px; overflow: hidden; margin: 32px 0; }
.metric { background: var(--bg-1); padding: 26px 24px; }
.metric .val { font-family: 'Orbitron'; font-size: 34px; font-weight: 600; color: #fff; }
.metric .val .u { font-size: 16px; color: var(--blue-soft); margin-left: 4px; font-family: 'Montserrat'; }
.metric .k { font-size: 13px; color: var(--text-dim); margin-top: 8px; letter-spacing: 0.04em; }
.metric.hl .val { color: var(--blue-soft); }
.dash-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.66); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur); }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; background: var(--bg-2); border-radius: 24px; padding: 38px; transform: scale(0.96) translateY(10px); transition: transform var(--dur) var(--ease-bounce); }
.modal-overlay.open .modal { transform: scale(1) translateY(0); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; }
.modal-head h3 { font-size: 26px; }
.modal-head .eyebrow { margin-bottom: 8px; }
.modal-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); }
.modal-close:hover { background: rgba(255,255,255,0.1); }
.roi-field { margin-bottom: 22px; }
.roi-field label { display: flex; justify-content: space-between; font-size: 14px; color: var(--text); margin-bottom: 12px; }
.roi-field label .v { color: #fff; font-weight: 500; font-family: 'Orbitron'; font-size: 14px; }
.roi-field input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--bg-3); outline: none; }
.roi-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); cursor: pointer; box-shadow: 0 0 0 4px rgba(0,107,255,0.2); transition: transform 0.2s var(--ease-bounce); }
.roi-field input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.roi-field input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border: none; border-radius: 50%; background: var(--blue); cursor: pointer; box-shadow: 0 0 0 4px rgba(0,107,255,0.2); }
.roi-result { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.roi-out .lbl { font-size: 13px; color: var(--text-dim); letter-spacing: 0.04em; }
.roi-out .big { font-family: 'Orbitron'; font-size: 32px; font-weight: 600; color: var(--blue-soft); margin-top: 6px; }
.roi-out .big.white { color: #fff; }

/* TCO modal — wider to fit chart + sliders side by side */
.modal.modal-tco { max-width: 1080px; padding: 20px 28px; }
.modal-tco .modal-head { margin-bottom: 12px; }
.modal-tco .tco-chart-wrap { min-height: 190px; }
/* theme the shared TCO engine to the Robotrac palette */
.modal-tco .tco-root {
  --tco-accent: var(--blue);
  --tco-accent-2: var(--blue-soft);
  --tco-surface: var(--bg-2);
  --tco-surface-2: var(--bg-3);
  --tco-line: var(--hairline);
  --tco-line-2: var(--hairline-2);
  --tco-text: var(--text);
  --tco-text-strong: #fff;
  --tco-axis: var(--text-dim);
  font-family: 'Montserrat', system-ui, sans-serif;
}
.modal-tco .tco-card-val { font-family: 'Orbitron', 'Montserrat', sans-serif; }

/* ============================================================
   3D VIEWER MODAL
   ============================================================ */
.viewer-modal {
  position: relative;
  width: 100%; max-width: 1040px; max-height: 90vh;
  background: var(--bg-2);
  border-radius: 24px; padding: 18px;
  transform: scale(0.96) translateY(10px);
  transition: transform var(--dur) var(--ease-bounce);
  overflow: hidden;
}
.viewer-overlay.open .viewer-modal { transform: scale(1) translateY(0); }
.viewer-close {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(10,12,16,0.6); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.viewer-close:hover { background: rgba(0,107,255,0.28); border-color: rgba(120,170,255,0.4); }

.viewer-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; height: min(72vh, 620px); }

/* Stage */
.viewer-stage {
  position: relative; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(0,107,255,0.16), transparent 60%),
    linear-gradient(180deg, #0C1119, #070A0F 70%);
  border: 1px solid var(--hairline);
}
.viewer-stage model-viewer { display: block; position: absolute; inset: 0; z-index: 1; }
.viewer-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; z-index: 4;
  padding: 8px 16px; border-radius: 999px; white-space: nowrap;
  background: rgba(8,11,16,0.55); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  font-size: 12px; color: var(--text); letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0; transition: opacity 0.5s var(--ease);
}
.viewer-overlay.open .viewer-hint { opacity: 1; transition-delay: 0.5s; }
.viewer-hint i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-dim); }
.viewer-tag {
  position: absolute; top: 16px; left: 18px; z-index: 4;
  pointer-events: none;
  font-size: 13px; letter-spacing: 0.1em; color: #fff;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(0,107,255,0.22); border: 1px solid rgba(120,170,255,0.32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Loader — percentage + light-flow progress bar */
.viewer-loader { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 5; }
/* always-on spinner so there is visible motion even before progress data arrives */
.vl-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(120,170,255,0.16);
  border-top-color: var(--blue);
  box-shadow: 0 0 18px rgba(0,107,255,0.45);
  animation: vlspin 0.85s linear infinite;
}
@keyframes vlspin { to { transform: rotate(360deg); } }
.vl-pct { display: flex; align-items: baseline; gap: 2px; font-size: 46px; font-weight: 600; color: #fff; letter-spacing: 0.02em; text-shadow: 0 0 24px rgba(0,107,255,0.55); }
.vl-pct i { font-size: 20px; font-style: normal; color: var(--blue-soft); }
.vl-bar {
  position: relative; width: 220px; max-width: 60%; height: 4px; border-radius: 999px; overflow: hidden;
  background: rgba(120,170,255,0.14);
}
.vl-fill {
  position: relative; height: 100%; width: 0%; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  box-shadow: 0 0 14px rgba(0,107,255,0.7);
  transition: width 0.35s var(--ease);
}
/* indeterminate mode: a segment slides across the track until real progress is known */
.vl-bar.indeterminate .vl-fill {
  width: 38% !important; transition: none;
  animation: vlindet 1.15s var(--ease) infinite;
}
.vl-bar.indeterminate .vl-fill::after { display: none; }
@keyframes vlindet {
  0%   { transform: translateX(-115%); }
  100% { transform: translateX(330%); }
}
/* light streak that flows across the filled portion to imply momentum */
.vl-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.85), transparent);
  width: 45%; transform: translateX(-120%);
  animation: vlflow 1.15s var(--ease) infinite;
}
@keyframes vlflow { from { transform: translateX(-120%); } to { transform: translateX(320%); } }
.vl-txt { font-size: 12.5px; color: var(--text); letter-spacing: 0.08em; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
  .vl-fill::after, .vl-ring, .vl-bar.indeterminate .vl-fill { animation: none; }
  .vl-fill::after { opacity: 0; }
  .vl-bar.indeterminate .vl-fill { transform: none; }
}

/* Side panel */
.viewer-side { display: flex; flex-direction: column; gap: 22px; padding: 26px 24px 22px; overflow-y: auto; }
.viewer-h3 { font-size: 30px; letter-spacing: 0.04em; margin-top: 8px; }
.viewer-lead { font-size: 14px; line-height: 1.6; color: var(--text); margin-top: 12px; }
.vcard-list { display: flex; flex-direction: column; gap: 12px; }
.vcard {
  display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  padding: 12px; border-radius: 16px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--hairline);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.2s var(--ease-bounce);
}
.vcard:hover { background: rgba(255,255,255,0.06); transform: translateY(-2px); }
.vcard.active { background: rgba(0,107,255,0.14); border-color: rgba(120,170,255,0.42); box-shadow: 0 0 22px rgba(0,107,255,0.16); }
.vcard-thumb { width: 64px; height: 52px; border-radius: 10px; flex-shrink: 0; }
.vcard-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vcard-title { font-size: 15px; font-weight: 500; color: #fff; }
.vcard-sub { font-size: 12.5px; color: var(--text-dim); }
.vcard-tick { color: var(--blue-soft); opacity: 0; flex-shrink: 0; transition: opacity var(--dur) var(--ease); }
.vcard.active .vcard-tick { opacity: 1; }
.viewer-note { margin-top: auto; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.viewer-note code { font-family: monospace; color: var(--blue-soft); font-size: 11px; }

@media (max-width: 820px) {
  .viewer-grid { grid-template-columns: 1fr; height: auto; max-height: 80vh; overflow-y: auto; }
  .viewer-stage { height: 46vh; min-height: 300px; }
  .viewer-side { padding: 20px 6px 6px; }
  .viewer-note { margin-top: 14px; }
}

/* Light theme */
body.light .viewer-modal { background: var(--bg-2); }
body.light .viewer-stage {
  background:
    radial-gradient(120% 90% at 50% 12%, rgba(255,198,62,0.18), transparent 60%),
    linear-gradient(180deg, #3A362A, #2A2620 70%);
}
body.light .viewer-tag { background: rgba(255,198,62,0.22); border-color: rgba(255,224,150,0.4); color: #F2F4E8; }
body.light .vcard.active { background: rgba(255,198,62,0.16); border-color: rgba(255,224,150,0.45); box-shadow: 0 0 22px rgba(255,198,62,0.14); }
body.light .vcard-tick { color: #F2F4E8; }
body.light .vcard-title { color: #F2F4E8; }
body.light .viewer-close:hover { background: rgba(255,198,62,0.26); border-color: rgba(255,224,150,0.4); }
body.light .vl-pct { text-shadow: 0 0 24px rgba(255,198,62,0.5); }
body.light .vl-pct i { color: #FFC63E; }
body.light .vl-bar { background: rgba(255,224,150,0.18); }
body.light .vl-fill { background: linear-gradient(90deg, #E0A93A, #FFC63E); box-shadow: 0 0 14px rgba(255,198,62,0.6); }
body.light .vl-ring { border-color: rgba(255,224,150,0.2); border-top-color: #FFC63E; box-shadow: 0 0 18px rgba(255,198,62,0.5); }

/* ============================================================
   FAQ (accordion)
   ============================================================ */
.faq-head { max-width: 640px; margin-bottom: 48px; }
.faq-list { display: flex; flex-direction: column; gap: 14px; max-width: 880px; }
.faq-item {
  border-radius: 16px;
  border: 1px solid var(--hairline);
  background: var(--glass);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item:hover { border-color: var(--hairline-2); }
.faq-item.open { border-color: rgba(120,170,255,0.42); background: rgba(0,107,255,0.06); box-shadow: 0 0 46px -4px rgba(0,107,255,0.6); }
/* animated conic edge: hidden on closed cards, bright + prominent when open */
.faq-item.glow-border { box-shadow: none; }
.faq-item.glow-border::before {
  padding: 2.5px; opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.faq-item.open.glow-border { box-shadow: 0 0 46px -4px rgba(0,107,255,0.6); }
.faq-item.open.glow-border::before {
  opacity: 1;
  animation-duration: 3.4s;   /* faster sweep than the 9s page default */
  background: conic-gradient(from var(--gb-angle),
    rgba(0,140,255,1) 0deg,
    rgba(150,215,255,0.95) 55deg,
    rgba(0,107,255,0.35) 130deg,
    rgba(150,90,255,0.85) 205deg,
    rgba(0,140,255,0.4) 285deg,
    rgba(0,140,255,1) 360deg);
}
body.light .faq-item.open.glow-border { box-shadow: 0 0 46px -4px rgba(255,122,26,0.6); }
body.light .faq-item.open.glow-border::before {
  background: conic-gradient(from var(--gb-angle),
    rgba(255,140,0,1) 0deg,
    rgba(255,214,120,0.95) 55deg,
    rgba(255,140,0,0.4) 130deg,
    rgba(255,90,30,0.85) 205deg,
    rgba(255,140,0,0.4) 285deg,
    rgba(255,140,0,1) 360deg);
}
/* streaming caret shown while the answer types in */
.faq-a-inner p.streaming::after {
  content: ""; display: inline-block; width: 0.5em; height: 1.05em;
  margin-left: 1px; vertical-align: -0.18em; border-radius: 1px;
  background: var(--blue-soft);
  animation: faq-caret 0.8s steps(1) infinite;
}
body.light .faq-a-inner p.streaming::after { background: #E0A93A; }
@keyframes faq-caret { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }
.faq-q {
  width: 100%; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 26px;
  font-size: clamp(16px, 1.6vw, 19px); font-weight: 500; color: #fff; line-height: 1.4;
  transition: color var(--dur) var(--ease);
}
.faq-item.open .faq-q { color: var(--blue-soft); }
/* animated +/- toggle */
.faq-ico { position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq-ico::before, .faq-ico::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 15px; height: 2px; border-radius: 2px; background: var(--blue-soft);
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-bounce), opacity var(--dur) var(--ease);
}
.faq-ico::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-ico::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-item.open .faq-ico::before { transform: translate(-50%, -50%) rotate(180deg); }
/* smooth height reveal — collapsed via height:0; opened by animating min-height
   up to the JS-measured content height (robust across rendering engines) */
.faq-a {
  overflow: hidden; height: 0; min-height: 0;
  transition: min-height 0.42s var(--ease);
}
.faq-a-inner p {
  padding: 0 26px 26px; margin: 0;
  font-size: 15.5px; line-height: 1.7; color: var(--text); max-width: 68ch;
  opacity: 0; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.faq-item.open .faq-a-inner p { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }
.faq-link { color: var(--blue-soft); border-bottom: 1px solid rgba(120,170,255,0.4); transition: border-color var(--dur) var(--ease); }
.faq-link:hover { border-bottom-color: var(--blue-soft); }
body.light .faq-item.open { border-color: rgba(255,224,150,0.5); background: rgba(255,198,62,0.08); box-shadow: 0 0 46px -4px rgba(255,122,26,0.6); }
body.light .faq-item.open .faq-q { color: #E0A93A; }
body.light .faq-ico::before, body.light .faq-ico::after { background: #E0A93A; }
body.light .faq-link { color: #E0A93A; border-bottom-color: rgba(224,169,58,0.4); }
@media (prefers-reduced-motion: reduce) {
  .faq-a { transition: none; }
  .faq-ico::before, .faq-ico::after, .faq-a-inner p { transition: none; }
}
@media (max-width: 640px) {
  .faq-q { padding: 20px; font-size: 16px; }
  .faq-a-inner p { padding: 0 20px 20px; }
}

/* ============================================================
   PARTNERS (right-to-left logo marquee)
   ============================================================ */
.partners-section { padding: 8px 0; overflow: hidden; }   /* neighbors add 76px each; total gap cut ~40% */
.partners-wrap { width: 100%; max-width: var(--maxw-c); margin: 0 auto; padding: 0 32px; }
.partners-wrap .eyebrow { margin-bottom: 54px; }   /* 3× the default gap to the cards */
.partners-marquee {
  width: 100%; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.partners-track {
  display: flex; width: max-content;
  animation: partners-scroll 70s linear infinite;
}
.partners-track:hover { animation-play-state: paused; }
.partner-logo {
  flex: 0 0 auto;
  width: 192px; height: 108px; margin-right: 68px;   /* 16:9, width unchanged */
  border-radius: 14px;
}
/* one full set = 8 × (192 + 68) = 2080px; shift by exactly that for a seamless loop */
@keyframes partners-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-2080px); }
}
@media (prefers-reduced-motion: reduce) {
  .partners-track { animation: none; }
}

/* ============================================================
   STATS HIGHLIGHTED BAR
   ============================================================ */
.statbar { display: grid; grid-template-columns: repeat(4, 1fr); }
.statbar .cell { padding: 48px 32px; }
.statbar .big { font-family: 'Orbitron'; font-weight: 600; font-size: clamp(36px, 4vw, 52px); color: var(--blue-soft); line-height: 1; }
.statbar .big .u { font-size: 18px; color: var(--white); font-family: 'Montserrat'; margin-left: 4px; }
.statbar .cap { margin-top: 14px; font-size: 15px; color: var(--text); line-height: 1.4; }

/* ============================================================
   FEATURES (interactive cards + big image)
   ============================================================ */
.feat-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px; align-items: stretch; }
.feat-cards { display: flex; flex-direction: column; gap: 16px; }
.feat-card { text-align: left; padding: 26px 28px; border-radius: 18px; border: 1px solid var(--hairline); background: var(--bg-1); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; overflow: hidden; }
.feat-card:hover { transform: translateX(4px); }
.feat-card .fc-top { display: flex; align-items: center; gap: 14px; }
.feat-card .fc-idx { font-family: 'Orbitron'; font-size: 13px; color: var(--text-dim); }
.feat-card h3 { font-size: 20px; }
.feat-card p { margin-top: 12px; font-size: 14.5px; color: var(--text); max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--dur) var(--ease), opacity var(--dur) var(--ease), margin var(--dur) var(--ease); }
.feat-card.active { background: var(--bg-3); border-color: rgba(0,107,255,0.4); }
.feat-card.active p { max-height: 140px; opacity: 1; }
.feat-card .fc-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); transform: scaleY(0); transform-origin: top; transition: transform var(--dur) var(--ease); }
.feat-card.active .fc-bar { transform: scaleY(1); }
.feat-visual { position: relative; border-radius: 26px; overflow: hidden; min-height: 460px; }
.feat-visual .ph { position: absolute; inset: 0; border-radius: 26px; opacity: 0; transform: scale(1.04); transition: opacity 0.5s var(--ease), transform 0.6s var(--ease); }
.feat-visual .ph.active { opacity: 1; transform: scale(1); }
.feat-tag { position: absolute; left: 26px; bottom: 26px; z-index: 3; font-family: 'Orbitron'; font-size: 14px; color: #fff; padding: 8px 16px; border-radius: 999px; background: rgba(0,0,0,0.4); border: 1px solid var(--hairline); backdrop-filter: blur(8px); }

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.cmp-wrap { border-radius: 24px; overflow: hidden; border: 1px solid var(--hairline); }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 20px 24px; text-align: center; border-bottom: 1px solid var(--hairline); font-size: 15px; }
.cmp th { font-weight: 500; color: var(--white); background: var(--bg-1); font-size: 14px; }
.cmp thead th { padding: 26px 24px; }
.cmp td:first-child, .cmp th:first-child { text-align: left; color: var(--text); }
.cmp .col-us { background: rgba(0,107,255,0.07); position: relative; }
.cmp thead .col-us { color: #fff; }
.cmp thead .col-us .badge { display: block; font-family: 'Orbitron'; font-size: 18px; color: #fff; }
.cmp thead .col-us .tag { font-size: 11px; color: var(--blue-soft); letter-spacing: 0.14em; text-transform: uppercase; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp .val-us { color: var(--blue-soft); font-weight: 600; font-family: 'Orbitron'; font-size: 14px; }
.cmp .chk { color: var(--blue-soft); } .cmp .no { color: var(--text-dim); }
.cmp td .ico { width: 20px; height: 20px; display: inline-block; }

/* ============================================================
   SUPPLY CHAIN / PILLARS
   ============================================================ */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.pillar { border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline); background: var(--bg-1); display: grid; grid-template-columns: 150px 1fr; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pillar:hover { transform: translateY(-4px); border-color: rgba(0,107,255,0.3); }
.pillar .ph { border-radius: 0; }
.pillar .p-body { padding: 30px 28px; }
.pillar .p-num { font-family: 'Orbitron'; font-size: 12px; color: var(--blue-soft); letter-spacing: 0.1em; }
.pillar h3 { font-size: 21px; margin: 12px 0 12px; }
.pillar p { font-size: 14.5px; color: var(--text); }

/* ============================================================
   FLOATING CTA BAR
   ============================================================ */
.cta-bar-spacer { height: 60px; }
.cta-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; transform: translateY(120%); transition: transform 0.5s var(--ease); }
.cta-bar.show { transform: translateY(0); }
.cta-bar-inner { width: calc(100% - 48px); max-width: calc(var(--maxw-c) - 64px); margin: 0 auto 16px; padding: 16px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cta-bar .ctab-text strong { color: #fff; font-weight: 500; font-size: 16px; }
.cta-bar .ctab-text span { display: block; font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.cta-form { display: flex; gap: 10px; flex: 1; max-width: 460px; min-width: 280px; }
.cta-form input { flex: 1; height: 46px; border-radius: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--hairline-2); padding: 0 16px; color: #fff; font-size: 15px; transition: border-color var(--dur) var(--ease); }
.cta-form input::placeholder { color: var(--text-dim); }
.cta-form input:focus { outline: none; border-color: var(--blue); }
.cta-bar-inner.glass { border-radius: 18px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { border-top: 1px solid var(--hairline); padding: 52px 0 28px; background: var(--bg-1); }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.foot-mission { font-size: 16px; color: var(--text); max-width: 360px; line-height: 1.55; }
.foot-col h4 { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); font-weight: 500; margin-bottom: 18px; }
.foot-col ul { display: flex; flex-direction: column; gap: 12px; }
.foot-col a, .foot-col li { font-size: 15px; color: var(--text); transition: color var(--dur) var(--ease); }
.foot-col a:hover { color: #fff; }
.foot-bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--hairline); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; position: relative; }
/* centered logo, top edge aligned with the WeChat QR top */
.foot-logo-center { position: absolute; left: 50%; top: 20px; transform: translateX(-50%); }
.foot-copy { font-size: 13px; color: var(--text-dim); }
.foot-right { display: flex; align-items: flex-end; gap: 28px; }
.socials { display: flex; gap: 12px; }
.social { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease), transform 0.2s var(--ease-bounce); }
.social:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.social svg { width: 18px; height: 18px; }
.qr { width: 84px; }
.qr .ph { aspect-ratio: 1; border-radius: 12px; }

.to-top { position: fixed; right: calc(max((100vw - var(--maxw)) / 2, 0px) + 32px); bottom: 92px; z-index: 95; width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur), transform 0.2s var(--ease-bounce); }
.to-top.show { opacity: 1; visibility: visible; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 18px; height: 18px; }

/* ============================================================
   MOUSE TRAIL
   ============================================================ */
.trail-sq { position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 3px; pointer-events: none; z-index: 9999; mix-blend-mode: screen; will-change: transform, opacity; }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; gap: 40px; }
  .feat-grid { grid-template-columns: 1fr; gap: 32px; }
  .feat-visual { min-height: 360px; }
  .pillars { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .wrap { padding: 0 22px; }
  .nav { width: calc(100vw - 20px); }
  .nav-inner { padding: 0 8px 0 18px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .statbar { grid-template-columns: 1fr 1fr; }
  .roi-result { grid-template-columns: 1fr; gap: 16px; }
  .pillar { grid-template-columns: 1fr; }
  .pillar .ph { aspect-ratio: 16/9; }
  .foot-grid { grid-template-columns: 1fr; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .foot-logo-center { position: static; transform: none; }
  .cta-form { max-width: 100%; }
  .hero-arrow { display: none; }
}
@media (max-width: 480px) {
  .statbar { grid-template-columns: 1fr; }
  .dash-metrics { grid-template-columns: 1fr; }
}

/* ============================================================
   LIGHT THEME — warm olive ground, cream text, amber accent,
   fluorescent-orange card glow. Colors only; layout unchanged.
   ============================================================ */
body.light {
  --bg:         #70695A;
  --bg-1:       #7A7363;          /* cards slightly lighter */
  --bg-2:       #6A6355;
  --bg-3:       #5F594B;
  --bg-card:    #7A7363;
  --white:      #F2F4E8;          /* headings: bright cream */
  --text:       #E5E7DB;          /* body text */
  --text-dim:   #C2BFAE;
  --blue:       #FFC63E;          /* accent becomes amber */
  --blue-soft:  #FFC63E;
  --hairline:   rgba(229,231,219,0.16);
  --hairline-2: rgba(229,231,219,0.26);
  --glass:      rgba(229,231,219,0.07);
  --glow-blue:  rgba(255,140,40,0.4);
  background: var(--bg);
  color: var(--text);
}

/* Nav island — warm glass in light mode, amber edge glow */
body.light .nav {
  background: rgba(58,54,42,0.30);
  border-color: rgba(242,244,232,0.16);
  box-shadow:
    0 12px 40px rgba(40,36,26,0.35),
    0 0 24px rgba(255,198,62,0.14),
    inset 0 1px 0 rgba(255,255,255,0.14);
}
body.light .nav::before {
  background: linear-gradient(115deg,
    rgba(255,198,62,0.50), rgba(255,255,255,0.20) 28%,
    rgba(255,198,62,0.08) 52%, rgba(255,255,255,0.14) 74%, rgba(255,198,62,0.42));
}
body.light .nav.scrolled { background: rgba(50,46,36,0.5); }
body.light .dropdown {
  background: rgba(70,65,54,0.72);
  border-color: rgba(242,244,232,0.16);
  box-shadow: 0 18px 56px rgba(40,36,26,0.45), 0 0 24px rgba(255,198,62,0.10), inset 0 1px 0 rgba(255,255,255,0.12);
}
body.light .theme-switch, body.light .lang-toggle { border-color: rgba(242,244,232,0.22); background: rgba(242,244,232,0.08); }
body.light .theme-switch:hover, body.light .lang-toggle:hover { background: rgba(242,244,232,0.16); }
body.light .theme-switch .ts-ico { color: #F2F4E8; }
body.light .theme-switch .ts-knob { background: linear-gradient(180deg, rgba(255,224,150,0.5), rgba(255,198,62,0.18)); border-color: rgba(255,224,150,0.45); }
body.light .nav-link,
body.light .lang-toggle { color: #F2F4E8; }
body.light .nav-link:hover { color: #C2BFAE; }
body.light .nav-burger span,
body.light .nav-burger span::before,
body.light .nav-burger span::after { background: #F2F4E8; }

body.light .logo-img { content: url('assets/ascenda-logo-light.png'); }

/* Dropdown panels */
body.light .dropdown { background: rgba(106,99,85,0.94); }
body.light .dd-card .label { color: #F2F4E8; }

/* Buttons — amber primary needs dark text */
body.light .btn-primary { background: var(--blue); color: #2A2415; }
body.light .btn-primary:hover { background: #FFD262; }

/* Placeholders: beige instead of black */
body.light .ph { background: linear-gradient(135deg, #EAE6D7 0%, #DBD6C3 100%); }
body.light .ph::after { color: #847E6C; }
body.light .ph-grid::before {
  background-image:
    linear-gradient(rgba(58,54,42,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58,54,42,0.12) 1px, transparent 1px);
}

/* Hero overlay: lighter veil so beige placeholder reads as a bright scene */
body.light .hero-bg::after {
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(255,150,40,0.10), transparent 55%),
    linear-gradient(180deg, rgba(40,36,26,0.62) 0%, rgba(40,36,26,0.22) 38%, rgba(40,36,26,0.78) 100%);
}

/* Use-case cards: text sits over the dark bottom gradient, keep light */
body.light .uc-meta .desc { color: #D8DACB; }

/* Metrics / stats */
body.light .metric .val { color: #F2F4E8; }
body.light .metric { background: var(--bg-1); }

/* Comparison table */
body.light .cmp thead .col-us { color: #F2F4E8; }
body.light .cmp thead .col-us .badge { color: #F2F4E8; }
body.light .cmp .col-us { background: rgba(255,198,62,0.08); }

/* Forms */
body.light .cta-form input { background: rgba(229,231,219,0.1); color: #F2F4E8; }
body.light .cta-form input::placeholder { color: #C2BFAE; }
body.light .ctab-text strong { color: #F2F4E8; }

/* Modal / ROI */
body.light .roi-field label .v { color: #F2F4E8; }
body.light .roi-out .big.white { color: #F2F4E8; }
body.light .roi-field input[type=range]::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255,198,62,0.25); }

/* Footer */
body.light .footer { background: var(--bg-2); }
body.light .foot-col a:hover { color: #F2F4E8; }

/* Fluorescent-orange card glow */
body.light .glow { box-shadow: 0 0 0 1px rgba(255,140,0,0.14), 0 24px 70px -30px rgba(255,122,26,0.5); }
body.light .glow-border { box-shadow: 0 0 34px -8px rgba(255,122,26,0.5); }
body.light .glow-border::before {
  background: conic-gradient(from var(--gb-angle),
    rgba(255,140,0,0.95) 0deg,
    rgba(255,198,62,0.6) 60deg,
    rgba(255,122,26,0.18) 130deg,
    rgba(255,90,0,0.55) 200deg,
    rgba(255,140,0,0.14) 280deg,
    rgba(255,140,0,0.95) 360deg);
}

/* Cursor trail: amber, screen-blend glows on olive */
body.light .trail-sq { mix-blend-mode: screen; }