/* Animatable custom properties — registered so calc(var(--tilt-x) * 1deg)
   is always valid (no fallback to transform: none on first paint) and so the
   tilt vars themselves can be interpolated/animated by the CSS engine. */
@property --tilt-x {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
@property --tilt-y {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Self-hosted fonts — assets/fonts/, Latin subset, woff2 only */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/barlow-v12-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/barlow-v12-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("assets/fonts/barlow-v12-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("assets/fonts/barlowcondensed-v12-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("assets/fonts/barlowcondensed-v12-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("assets/fonts/barlowcondensed-v12-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("assets/fonts/barlowcondensed-v12-latin-800.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("assets/fonts/spacemono-v13-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("assets/fonts/spacemono-v13-latin-700.woff2") format("woff2"); }

/* =============================================================
   DESIGN TOKENS
   ============================================================= */
:root {
  --header-h: 92px;
  --bg: #f2f7fb;
  --bg-alt: #eaf2f8;
  --surface: #ffffff;
  /* === SRT Brand Palette — derived from logo === */
  /* SRT palette, softened toward glassy steel/teal so blue does not dominate */
  --primary: #0b355f;
  --primary-2: #2f6f8f;
  --primary-light: #6fb8c9;
  --accent: #b8d2dd;
  --accent-2: #7f9baa;
  --vivid: #5fa8cc;
  --cyan-soft: #5fa8cc;
  --teal-soft: #4a8fb5;
  --ice-white: #e4f0f8;
  --silver: #a8bccc;         /* metallic silver — SRT wordmark */
  --text: #ddeefb;
  --muted: rgba(192,220,244,0.80);
  --ok: #19a974;
  --danger: #e05656;

  --dark-bg: #04101e;
  --dark-surface: rgba(255,255,255,0.055);
  --dark-border: rgba(26,106,184,0.22);
  --dark-text: #ddeefb;
  --dark-muted: rgba(180,218,248,0.72);

  --border: rgba(14,61,120,0.22);
  --border-card: rgba(14,61,120,0.28);

  --shadow-sm: 0 4px 18px rgba(10,24,44,0.08);
  --shadow-md: 0 12px 36px rgba(10,24,44,0.13);
  --shadow-lg: 0 24px 60px rgba(10,24,44,0.18);
  --shadow-glow: 0 8px 40px rgba(111,184,201,0.22);

  --grad-brand: linear-gradient(135deg, #0b355f 0%, #2f6f8f 52%, #8fd5de 100%);
  --grad-hero: linear-gradient(165deg, #04101e 0%, #081823 52%, #122531 100%);
  --grad-card: linear-gradient(160deg, rgba(255,255,255,0.13) 0%, rgba(93,188,165,0.06) 100%);

  /* Typography */
  --font-display: "Barlow Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", sans-serif;
  --font-mono: "Space Mono", "Fira Code", monospace;

  /* Accent palette — silver-white for eyebrows/CTAs, electric for glows */
  --amber: #a8cde8;          /* steel-blue — eyebrow labels, section underlines (logo wordmark tone) */
  --amber-light: #c8e0f0;    /* near-white highlight */
  --amber-glow: rgba(168,205,232,0.22);
  --electric: #5fa8cc;
  --electric-glow: rgba(95,168,204,0.18);
  /* Per-lane architecture accent colors */
  --lane-input: #5fa8cc;
  --lane-proc: #8b72f0;      /* purple — AI processing */
  --lane-output: #22c98a;    /* teal green — dashboard output */

  --liquid-site-wash:
    linear-gradient(120deg, rgba(255,255,255,0.075), transparent 28%, rgba(143,213,222,0.045) 58%, transparent 82%),
    radial-gradient(ellipse 70% 45% at 18% 8%, rgba(234,247,251,0.09), transparent 58%),
    radial-gradient(ellipse 55% 40% at 86% 18%, rgba(93,188,165,0.08), transparent 62%);

  /* Premium motion tokens */
  --duration-premium: 0.7s;
  --duration-fast: 0.32s;
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out-premium: cubic-bezier(0, 0, 0.2, 1);

  /* Liquid glass system — Apple iOS recipe */
  --glass-bg:
    linear-gradient(180deg, rgba(255,255,255,0.31), rgba(255,255,255,0.10) 44%, rgba(255,255,255,0.16)),
    rgba(255,255,255,0.145);
  --glass-bg-hover:
    linear-gradient(180deg, rgba(255,255,255,0.39), rgba(255,255,255,0.12) 44%, rgba(255,255,255,0.20)),
    rgba(255,255,255,0.20);
  --glass-border: rgba(255,255,255,0.34);
  --glass-border-hover: rgba(255,255,255,0.72);
  --glass-blur: blur(36px) saturate(150%) contrast(1.04);
  --glass-shadow:
    0 30px 80px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.84),
    inset 0 -1px 0 rgba(255,255,255,0.15),
    inset 18px 18px 52px rgba(255,255,255,0.055),
    inset -22px -22px 54px rgba(0,0,0,0.13);
  --glass-shadow-hover:
    0 42px 112px rgba(0,0,0,0.38),
    0 0 46px rgba(255,255,255,0.13),
    inset 0 1px 0 rgba(255,255,255,0.92),
    inset 0 -1px 0 rgba(255,255,255,0.22),
    inset 20px 20px 58px rgba(255,255,255,0.08),
    inset -24px -24px 58px rgba(0,0,0,0.16);
}

/* =============================================================
   RESET & BASE
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
  scrollbar-color: rgba(143,213,222,0.42) #06111f;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text);
  background: transparent;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden;
}

/* Base background — plain dark navy */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #04101e;
  pointer-events: none;
}

/* Full-site Vanta NET canvas — fixed layer 0, all sections transparent above it */
#vanta-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #04101e;
}
#vanta-bg > canvas {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
@media (prefers-reduced-motion: reduce) {
  #vanta-bg { display: none; }
}

/* Everything on page stacks above the Vanta layer */
.site-header, .mobile-nav, .aurora,
.hero, .section, .site-footer, .scroll-top {
  position: relative;
  z-index: 1;
}

/* =============================================================
   AURORA — independent animated light blobs
   ============================================================= */
.aurora {
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Single blend + single compositor layer — orbs composite internally */
  mix-blend-mode: screen;
  will-change: transform;
  isolation: isolate;
}

.ao {
  position: absolute;
  border-radius: 50%;
  /* translateZ(0) hints GPU without creating a separate compositor layer */
  transform: translateZ(0);
}

/* Orb 1: Deep electric navy — top-left foundation */
.ao-1 {
  width: 85vw; height: 85vw;
  top: -12%; left: -14%;
  background: radial-gradient(circle at 50% 50%, rgba(5,35,90,0.92) 0%, rgba(8,28,72,0.55) 42%, transparent 68%);
  filter: blur(100px);
  opacity: 0.95;
  animation: aoFloat1 24s ease-in-out infinite;
}

/* Orb 2: Steel blue — top-right, logo palette */
.ao-2 {
  width: 58vw; height: 58vw;
  top: -6%; right: -8%;
  background: radial-gradient(circle at 50% 50%, rgba(47,111,175,0.70) 0%, rgba(30,80,140,0.38) 40%, transparent 68%);
  filter: blur(78px);
  opacity: 0.68;
  animation: aoFloat2 18s ease-in-out infinite 3.5s;
}

/* Orb 3: Royal purple — mid-screen AI depth layer */
.ao-3 {
  width: 68vw; height: 68vw;
  top: 26%; left: 12%;
  background: radial-gradient(circle at 50% 50%, rgba(110,50,215,0.60) 0%, rgba(80,30,175,0.32) 42%, transparent 65%);
  filter: blur(105px);
  opacity: 0.52;
  animation: aoFloat3 30s ease-in-out infinite 8s;
}

/* Orb 4: Vivid emerald — bottom-right */
.ao-4 {
  width: 52vw; height: 52vw;
  bottom: -2%; right: -4%;
  background: radial-gradient(circle at 50% 50%, rgba(0,175,145,0.65) 0%, rgba(0,140,115,0.35) 42%, transparent 68%);
  filter: blur(82px);
  opacity: 0.60;
  animation: aoFloat4 21s ease-in-out infinite 6s;
}

/* Orb 5: Deep indigo — bottom-left, grounding */
.ao-5 {
  width: 48vw; height: 48vw;
  bottom: 2%; left: 0%;
  background: radial-gradient(circle at 50% 50%, rgba(45,18,155,0.55) 0%, rgba(30,10,120,0.28) 42%, transparent 65%);
  filter: blur(95px);
  opacity: 0.45;
  animation: aoFloat5 27s ease-in-out infinite 12s;
}

/* Orb 6: Steel-silver specular — top-center, logo highlight tone */
.ao-6 {
  width: 44vw; height: 44vw;
  top: -10%; left: 28%;
  background: radial-gradient(circle at 50% 50%, rgba(168,205,238,0.26) 0%, rgba(130,175,215,0.10) 42%, transparent 68%);
  filter: blur(85px);
  opacity: 0.52;
  animation: aoFloat6 22s ease-in-out infinite 5s;
}

/* Organic drift paths — Lissajous-like curves */
@keyframes aoFloat1 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  25%  { transform: translate3d(5%, 4%, 0) scale(1.06); }
  50%  { transform: translate3d(2%, 9%, 0) scale(0.96); }
  75%  { transform: translate3d(-4%, 5%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aoFloat2 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(-9%, 5%, 0) scale(1.09); }
  60%  { transform: translate3d(-4%, 10%, 0) scale(0.93); }
  85%  { transform: translate3d(-2%, 3%, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aoFloat3 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  20%  { transform: translate3d(6%, -5%, 0) scale(0.91); }
  50%  { transform: translate3d(-5%, 4%, 0) scale(1.12); }
  75%  { transform: translate3d(3%, 7%, 0) scale(0.97); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aoFloat4 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  35%  { transform: translate3d(-6%, -6%, 0) scale(1.07); }
  65%  { transform: translate3d(5%, -3%, 0) scale(0.95); }
  85%  { transform: translate3d(2%, 4%, 0) scale(1.02); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aoFloat5 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  40%  { transform: translate3d(8%, -4%, 0) scale(1.08); }
  70%  { transform: translate3d(3%, 7%, 0) scale(0.94); }
  90%  { transform: translate3d(-2%, 3%, 0) scale(1.03); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes aoFloat6 {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  30%  { transform: translate3d(4%, 6%, 0) scale(1.07); }
  55%  { transform: translate3d(-6%, 3%, 0) scale(0.95); }
  80%  { transform: translate3d(2%, -3%, 0) scale(1.04); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

/* Section-stage aurora tint shifts (requires :has() — Chrome 105+, Safari 15.4+, FF 121+) */
body:has(.journey-scene.is-stage-architecture) .ao-3 { opacity: 0.68; filter: blur(110px); }
body:has(.journey-scene.is-stage-solutions)    .ao-2 { opacity: 0.78; }
body:has(.journey-scene.is-stage-impact)       .ao-5 { opacity: 0.62; filter: blur(95px); }
body:has(.journey-scene.is-stage-coverage)     .ao-4 { opacity: 0.72; }
body:has(.journey-scene.is-stage-contact)      .ao-3 { opacity: 0.56; }

.ao-1, .ao-2, .ao-3, .ao-4, .ao-5, .ao-6 { transition: opacity 1.4s ease, filter 1.4s ease; }

/* Kill aurora for reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ao { animation: none; }
  .aurora { display: none; }
}

/* Fine film-grain texture for cinematic depth */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.075;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0.16), transparent 19%, rgba(143,213,222,0.10) 43%, transparent 68%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 100% 100%, 180px 180px;
  background-repeat: no-repeat, repeat;
  mix-blend-mode: screen;
}

.journey-scene {
  display: none;
  --journey-progress: 0;
  --journey-depth: 0;
  --journey-x: 0;
  --journey-tilt: 0;
  --journey-opacity: 0.5;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  opacity: var(--journey-opacity);
  mix-blend-mode: screen;
  transition: opacity 0.35s ease;
}

.journey-camera {
  position: absolute;
  inset: -18% -10%;
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--journey-x) * 1px), calc(var(--journey-progress) * -210px), 0)
    rotateX(calc(60deg + var(--journey-tilt) * 1deg))
    rotateZ(calc(var(--journey-progress) * -4deg));
  will-change: transform;
}

.journey-plane {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(1180px, 138vw);
  height: 860px;
  transform-style: preserve-3d;
  border-radius: 50%;
  opacity: 0.62;
}

.journey-plane--floor {
  transform: translate3d(-50%, -50%, -260px) rotateX(80deg);
  background:
    linear-gradient(rgba(143,213,222,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,213,222,0.18) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(143,213,222,0.28) 0%, rgba(47,111,143,0.12) 38%, transparent 68%),
    linear-gradient(180deg, transparent 0%, rgba(143,213,222,0.07) 48%, transparent 100%);
  background-size: 86px 86px, 86px 86px, 100% 100%, 100% 100%;
  mask-image: radial-gradient(ellipse at center, #000 0%, #000 52%, transparent 78%);
}

/* Scan-line that sweeps the floor grid */
.journey-plane--floor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(143,213,222,0.0) 40%,
    rgba(143,213,222,0.55) 50%,
    rgba(143,213,222,0.0) 60%,
    transparent 100%
  );
  animation: gridScan 6s ease-in-out infinite;
  opacity: 0.7;
}

@keyframes gridScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(100%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .journey-plane--floor::after { display: none; }
}

.journey-plane--wall {
  transform: translate3d(-50%, -54%, -520px) rotateX(18deg);
  background:
    linear-gradient(90deg, transparent 0 48%, rgba(168,188,204,0.18) 49% 51%, transparent 52%),
    radial-gradient(circle at 50% 35%, rgba(139,114,240,0.20), transparent 52%),
    radial-gradient(ellipse at 50% 82%, rgba(143,213,222,0.12), transparent 54%);
  mask-image: radial-gradient(ellipse at center, #000 0%, transparent 68%);
}

.journey-beam,
.journey-node,
.journey-orbit {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.journey-beam {
  left: 50%;
  top: 52%;
  width: min(860px, 96vw);
  height: 3px;
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.80), rgba(143,213,222,0.66), rgba(34,201,138,0.68), transparent);
  box-shadow: 0 0 36px rgba(143,213,222,0.30), 0 0 90px rgba(34,201,138,0.13);
  opacity: calc(0.22 + var(--journey-depth) * 0.42);
}

.journey-beam--one { transform: translate3d(-50%, -180px, -80px) rotateZ(-18deg); }
.journey-beam--two { transform: translate3d(-46%, 20px, -180px) rotateZ(12deg); }
.journey-beam--three { transform: translate3d(-54%, 210px, -320px) rotateZ(-7deg); }

.journey-node {
  width: clamp(82px, 10vw, 142px);
  aspect-ratio: 1;
  border: 1px solid rgba(168,188,204,0.34);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.16), rgba(30,106,184,0.07)),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,0.42), transparent 16%),
    rgba(4,16,30,0.44);
  box-shadow:
    0 26px 80px rgba(0,0,0,0.32),
    0 0 56px rgba(143,213,222,0.17),
    inset 0 1px 0 rgba(255,255,255,0.42);
  opacity: calc(0.22 + var(--journey-depth) * 0.55);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.journey-node::before,
.journey-node::after {
  content: "";
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(143,213,222,0.20);
  border-radius: inherit;
}

.journey-node::after {
  inset: 36%;
  background: radial-gradient(circle, rgba(143,213,222,0.66), rgba(143,213,222,0.045) 68%, transparent 70%);
  box-shadow: 0 0 32px rgba(143,213,222,0.30);
}

.journey-node--store {
  left: 12%;
  top: 18%;
  transform: translate3d(calc(var(--journey-progress) * -70px), calc(var(--journey-progress) * 120px), -80px) rotateX(-18deg) rotateY(28deg);
}

.journey-node--core {
  left: 68%;
  top: 22%;
  transform: translate3d(calc(var(--journey-progress) * 90px), calc(var(--journey-progress) * 40px), -170px) rotateX(-22deg) rotateY(-30deg);
}

.journey-node--dashboard {
  left: 18%;
  top: 68%;
  transform: translate3d(calc(var(--journey-progress) * 120px), calc(var(--journey-progress) * -70px), -260px) rotateX(-16deg) rotateY(34deg);
}

.journey-node--network {
  left: 76%;
  top: 70%;
  transform: translate3d(calc(var(--journey-progress) * -130px), calc(var(--journey-progress) * -120px), -360px) rotateX(-22deg) rotateY(-36deg);
}

.journey-orbit {
  width: clamp(260px, 34vw, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(143,213,222,0.13);
  border-top-color: rgba(226,242,252,0.55);
  border-radius: 50%;
  filter: drop-shadow(0 0 28px rgba(143,213,222,0.16));
  opacity: calc(0.16 + var(--journey-depth) * 0.32);
}

.journey-orbit--one {
  left: 52%;
  top: 28%;
  transform: translate3d(-50%, -50%, -220px) rotateX(72deg) rotateZ(calc(var(--journey-progress) * 62deg));
}

.journey-orbit--two {
  left: 48%;
  top: 58%;
  transform: translate3d(-50%, -50%, -380px) rotateX(76deg) rotateZ(calc(var(--journey-progress) * -82deg));
  border-color: rgba(34,201,138,0.18);
  border-left-color: rgba(34,201,138,0.58);
}

.journey-scene.is-stage-architecture .journey-node--core,
.journey-scene.is-stage-solutions .journey-node--store,
.journey-scene.is-stage-impact .journey-node--dashboard,
.journey-scene.is-stage-coverage .journey-node--network,
.journey-scene.is-stage-contact .journey-orbit {
  opacity: 0.82;
  filter: drop-shadow(0 0 34px rgba(143,213,222,0.24));
}

.journey-scene.is-stage-impact .journey-beam {
  opacity: 0.7;
  box-shadow: 0 0 42px rgba(34,201,138,0.32);
}

.journey-scene.is-stage-contact {
  --journey-opacity: 0.32;
}

.scroll-top,
.skip-link {
  position: relative;
  z-index: 2;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #06111f; }
::-webkit-scrollbar-thumb { background: rgba(143,213,222,0.30); border-radius: 999px; border: 2px solid #06111f; }
::-webkit-scrollbar-thumb:hover { background: rgba(143,213,222,0.46); }

.container {
  width: min(1160px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section {
  padding: 6rem 0;
  scroll-margin-top: var(--header-h);
  position: relative;
}

.section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,0.045), transparent 22%, rgba(143,213,222,0.035) 52%, transparent 78%),
    radial-gradient(ellipse 65% 28% at 50% 0%, rgba(255,255,255,0.035), transparent 70%);
  opacity: 0.55;
  mix-blend-mode: screen;
}

.hero::after,
.map-section::after,
.site-footer::after {
  mix-blend-mode: normal;
}

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
h1, h2, h3 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #ddeefb;
}

h1 { font-size: clamp(2.8rem, 5.2vw, 5.4rem); font-weight: 800; }
h2 { font-size: clamp(2rem, 3.8vw, 3.8rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.1vw, 1.7rem); font-weight: 600; }

h3 { line-height: 1.2; letter-spacing: 0.01em; }

p { margin: 0 0 1rem; color: rgba(192,220,244,0.78); }
ul { margin: 0; padding-left: 1.25rem; }

a, button, input, textarea, p, h1, h2, h3, span {
  overflow-wrap: anywhere;
}

img, video, canvas, svg {
  max-width: 100%;
}

.eyebrow {
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.55em;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.7rem;
  font-weight: 400;
  font-family: var(--font-mono);
  color: var(--amber);
  line-height: 1;
}

.eyebrow::before {
  content: "//";
  letter-spacing: 0;
  opacity: 0.55;
  flex-shrink: 0;
  font-weight: 400;
}

.section-head { max-width: 760px; margin-bottom: 2.75rem; }
.section-sub { max-width: 680px; margin-top: 0.5rem; }

.section-head h2 {
  text-shadow: 0 0 60px rgba(143,213,222,0.15);
}

.section-head h2 {
  position: relative;
  padding-bottom: 0.85rem;
}
.section-head h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--electric) 0%,
    var(--amber) 38%,
    rgba(143,213,222,0.18) 72%,
    transparent 100%
  );
  border-radius: 1px;
  box-shadow: 0 0 14px rgba(56,200,224,0.32);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;
}
.section-head.reveal.visible h2::after,
.section-head:not(.reveal) h2::after {
  transform: scaleX(1);
}

/* =============================================================
   SKIP LINK
   ============================================================= */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 999;
  padding: 0.6rem 1.2rem;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-md);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* =============================================================
   FOCUS VISIBLE
   ============================================================= */
:focus-visible {
  outline: 2.5px solid var(--vivid);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =============================================================
   TOUCH / POINTER
   ============================================================= */
a, button, [role="button"], input[type="button"], input[type="submit"], summary {
  touch-action: manipulation;
}

a, button, [role="button"], summary {
  cursor: pointer;
}

button[disabled], a[aria-disabled="true"] {
  cursor: not-allowed;
}

/* =============================================================
   HEADER / NAV
   ============================================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  /* Apple liquid glass nav */
  backdrop-filter: blur(60px) saturate(220%) brightness(1.05);
  -webkit-backdrop-filter: blur(60px) saturate(220%) brightness(1.05);
  background: rgba(4,16,30,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06),
    0 24px 60px rgba(4,16,30,0.45),
    inset 0 1px 0 rgba(255,255,255,0.1);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}

/* Glass top shimmer line */
.site-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 30%, rgba(143,213,222,0.24) 55%, rgba(255,255,255,0.12) 80%, transparent 100%);
  pointer-events: none;
}

.site-header.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-115%);
}

.site-header.is-compact {
  backdrop-filter: blur(72px) saturate(260%) brightness(1.02);
  -webkit-backdrop-filter: blur(72px) saturate(260%) brightness(1.02);
  background: rgba(4,16,30,0.72);
}

.site-header.is-compact .nav-wrap {
  min-height: 86px;
  transition: min-height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.site-header.is-compact .nav-brand-shell {
  width: 72px;
  height: 72px;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-wrap {
  width: min(1320px, 94vw);
  min-height: 110px;
  padding: 0.55rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.55rem, 1.4vw, 1rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo-shell {
    width: 120px;
    height: 120px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    padding: 5px 4px;
    background:
      linear-gradient(155deg, rgba(35,86,134,0.5) 0%, rgba(11,53,95,0.5) 46%, #04101e 100%);
    border: 1px solid rgba(143,213,222,0.28);
    /* 3D chip face */
    box-shadow:
      inset 0 1.5px 0 rgba(255,255,255,0.24),
      inset 0 -2px 7px rgba(0,0,0,0.5),
      0 7px 20px rgba(4,16,30,0.5),
      0 0 24px rgba(95,168,204,0.14);
    flex-shrink: 0;
    overflow: hidden;
    perspective: 480px;
    transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.brand:hover .brand-logo-shell {
  transform: rotateX(8deg) rotateY(-9deg) translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.3),
    inset 0 -2px 7px rgba(0,0,0,0.5),
    0 11px 26px rgba(4,16,30,0.55),
    0 0 32px rgba(143,213,222,0.3);
}

.brand-logo {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  filter:
    contrast(1.12) brightness(1.12)
    drop-shadow(0 2px 3px rgba(0,0,0,0.5))
    drop-shadow(0 0 7px rgba(143,213,222,0.34));
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.brand:hover .brand-logo {
  transform: translateZ(14px) scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .nav-brand:hover .nav-brand-shell,
  .nav-brand:hover .nav-brand-logo,
  .brand:hover .brand-logo-shell,
  .brand:hover .brand-logo {
    transform: none;
  }
}

.brand-text {
  color: rgba(238,243,250,0.95);
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.1;
  max-width: 230px;
  text-transform: uppercase;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0;
  background: none;
  border: none;
}

nav[aria-label="Primary"] {
  flex: 1 1 auto;
  min-width: 0;
}

nav[aria-label="Primary"] .nav-list {
  justify-content: center;
}

.nav-list a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 clamp(0.45rem, 0.85vw, 0.85rem);
  color: rgba(200,224,248,0.78);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.84rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.22s ease;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.nav-list a::after {
  content: "";
  position: absolute;
  bottom: 6px;
  left: 1rem;
  right: 1rem;
  height: 1.5px;
  background: var(--vivid);
  transform: scaleX(0);
  transform-origin: center;
  border-radius: 1px;
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-list a:hover,
.nav-list a:focus-visible {
  color: #fff;
}

.nav-list a:hover::after,
.nav-list a:focus-visible::after {
  transform: scaleX(1);
}

/* Nav brand */
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
  padding: 0.15rem 0;
  transition: opacity 0.2s ease;
}
.nav-brand:hover { opacity: 0.88; }

.nav-brand-shell {
  width: 96px;
  height: 96px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  padding: 4px 3px;
  background:
    linear-gradient(155deg, rgba(35,86,134,0.55) 0%, rgba(11,53,95,0.55) 48%, rgba(4,16,30,0.85) 100%);
  border: 1px solid rgba(143,213,222,0.30);
  /* 3D chip: top bevel highlight + bottom inner shadow + outer lift */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.28),
    inset 0 -2px 6px rgba(0,0,0,0.45),
    0 6px 16px rgba(4,16,30,0.55),
    0 0 22px rgba(95,168,204,0.18);
  flex-shrink: 0;
  overflow: hidden;
  backdrop-filter: blur(8px);
  perspective: 420px;
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nav-brand:hover .nav-brand-shell {
  transform: rotateX(8deg) rotateY(-10deg) translateY(-1px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.34),
    inset 0 -2px 6px rgba(0,0,0,0.45),
    0 10px 22px rgba(4,16,30,0.6),
    0 0 30px rgba(143,213,222,0.32);
}

.nav-brand-logo {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: contain;
  display: block;
  /* lift the mark off the chip face for depth */
  filter:
    contrast(1.14) brightness(1.16)
    drop-shadow(0 2px 3px rgba(0,0,0,0.55))
    drop-shadow(0 0 7px rgba(143,213,222,0.40));
  image-rendering: -webkit-optimize-contrast;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}

.nav-brand:hover .nav-brand-logo {
  transform: translateZ(14px) scale(1.04);
}

.nav-brand-name {
  color: rgba(238,243,250,0.95);
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.15;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}
/* "SECURITY RETAIL" — larger, logo-weight */
.nav-brand-name > span:first-child {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #fff;
}
/* "TECHNOLOGIES" — secondary line */
.nav-brand-name > span:last-child {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: rgba(168,205,238,0.82);
}
.nav-brand-name > span { display: block; }

.site-header .btn {
  flex-shrink: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.site-header .site-language {
  flex-shrink: 0;
}

/* Nav active state */
.nav-list a.is-active {
  color: #fff;
}
.nav-list a.is-active::after {
  transform: scaleX(1);
}

/* Hamburger toggle */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(190,215,236,0.18);
  border-radius: 9px;
  background: rgba(255,255,255,0.07);
  cursor: pointer;
  transition: background 0.18s;
  flex-shrink: 0;
}

.nav-toggle:hover { background: rgba(255,255,255,0.14); }

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  background: rgba(218,235,250,0.9);
  border-radius: 2px;
  transition: transform 0.26s ease, opacity 0.26s ease;
  pointer-events: none;
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 80px 0 0;
  z-index: 99;
  background: rgba(4,16,30,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-top: 1px solid rgba(190,215,236,0.1);
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 2rem;
  gap: 0;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s ease, opacity 0.26s ease;
}

.mobile-nav.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.mobile-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0 1rem;
  color: rgba(218,235,250,0.86);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  transition: background 0.18s, color 0.18s;
}

.mobile-nav a:hover { background: rgba(255,255,255,0.09); color: #fff; }

.mobile-nav .btn {
  margin-top: 1.5rem;
  align-self: flex-start;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 0.78rem 1.55rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.btn:not(.btn-outline):not(.btn-ghost)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255,255,255,0.22) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: -150% 0;
  transition: background-position 0.55s ease;
  pointer-events: none;
}

.btn:not(.btn-outline):not(.btn-ghost):hover::after {
  background-position: 250% 0;
}

.btn:not(.btn-outline):not(.btn-ghost) {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03)),
    linear-gradient(135deg, #0e4472 0%, #1a5f96 45%, #2e8ac0 100%);
  box-shadow: 0 6px 28px rgba(46,138,192,0.32),
              inset 0 1px 0 rgba(255,255,255,0.40),
              inset 0 -1px 0 rgba(0,0,0,0.22);
  letter-spacing: 0.03em;
}

.btn:not(.btn-outline):not(.btn-ghost):hover,
.btn:not(.btn-outline):not(.btn-ghost):focus-visible {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 16px 48px rgba(56,200,224,0.46),
              0 0 0 1px rgba(143,213,222,0.38),
              inset 0 1px 0 rgba(255,255,255,0.40),
              inset 0 -1px 0 rgba(0,0,0,0.22);
}

.btn-outline {
  color: rgba(218,235,250,0.9);
  background: rgba(255,255,255,0.08);
  border-color: rgba(190,215,236,0.22);
}

.btn-outline:hover, .btn-outline:focus-visible {
  background: rgba(255,255,255,0.14);
  color: #fff;
  transform: translateY(-2px);
}

.btn-ghost {
  color: var(--primary-2);
  background: rgba(47,114,179,0.09);
  border-color: rgba(47,114,179,0.28);
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background: rgba(47,114,179,0.16);
  transform: translateY(-2px);
}

/* =============================================================
   CARD ICONS
   ============================================================= */
.card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  background: var(--grad-brand);
  box-shadow: 0 6px 22px rgba(14,61,120,0.3);
  flex-shrink: 0;
}

.card-icon svg {
  width: 24px;
  height: 24px;
}

.solution-card .card-icon {
  background: rgba(143,213,222,0.12);
  border: 1px solid rgba(143,213,222,0.20);
  box-shadow: 0 4px 16px rgba(4,16,30,0.22);
  position: relative;
  z-index: 1;
}

/* Per-solution-card icon tints */
.solutions-grid .solution-card:nth-child(1) .card-icon {
  background: rgba(143,213,222,0.12);
  border-color: rgba(143,213,222,0.20);
}
.solutions-grid .solution-card:nth-child(2) .card-icon {
  background: rgba(124,92,223,0.16);
  border-color: rgba(124,92,223,0.3);
}
.solutions-grid .solution-card:nth-child(3) .card-icon {
  background: rgba(25,201,138,0.14);
  border-color: rgba(25,201,138,0.28);
}

.solution-card h3,
.solution-card p,
.solution-card .solution-anim { position: relative; z-index: 1; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  --mx: 0;
  --my: 0;
  --hero-glow-x: 50%;
  --hero-glow-y: 62%;
  --hero-sheen-rotate: 0deg;
  position: relative;
  padding-top: 9rem;
  padding-bottom: 10rem;
  min-height: min(860px, 100svh);
  background:
    radial-gradient(ellipse 80% 44% at 52% 100%, rgba(143,213,222,0.10) 0%, rgba(30,106,184,0.06) 34%, transparent 72%),
    linear-gradient(180deg, rgba(4,16,30,0) 0%, rgba(4,16,30,0.04) 60%, rgba(4,16,30,0.55) 100%);
  overflow: hidden;
  perspective: 900px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -1px;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, transparent 66%, rgba(4,16,30,0.62) 88%, rgba(4,16,30,0.96) 100%),
    radial-gradient(ellipse 90% 18% at 50% 100%, rgba(143,213,222,0.20) 0%, rgba(143,213,222,0.075) 38%, transparent 72%),
    radial-gradient(ellipse 65% 55% at 18% 28%, rgba(47,114,179,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 45% 65% at 82% 72%, rgba(14,61,120,0.1) 0%, transparent 70%);
  pointer-events: none;
}

/* Surveillance camera scanline overlay */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 0%, transparent 70%, rgba(4,16,30,0.72) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.055) 2px,
      rgba(0,0,0,0.055) 4px
    );
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  filter: brightness(0.22) saturate(0.65);
  transform: translateZ(-160px) scale(1.18);
}

.hero-depth {
  display: none;
  position: absolute;
  inset: -10% -10% -22%;
  z-index: 1;
  pointer-events: none;
  transform-style: preserve-3d;
  transform: rotateX(64deg) translateY(18%) translateZ(-90px);
  background:
    linear-gradient(rgba(143,213,222,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,213,222,0.095) 1px, transparent 1px),
    radial-gradient(ellipse at 50% 96%, rgba(143,213,222,0.20), transparent 54%);
  background-size: 76px 76px, 76px 76px, 100% 100%;
  opacity: 0.36;
  filter: drop-shadow(0 0 22px rgba(143,213,222,0.24));
  mask-image: linear-gradient(180deg, transparent 0%, #000 16%, #000 82%, transparent 100%);
  will-change: transform, background-position;
  animation: depthGridMove 14s linear infinite;
}

.hero-depth::before,
.hero-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}

.hero-depth::before {
  background:
    radial-gradient(circle at var(--hero-glow-x) var(--hero-glow-y), rgba(226,242,252,0.24), transparent 16%),
    repeating-linear-gradient(90deg, transparent 0 72px, rgba(226,242,252,0.12) 73px, transparent 75px);
  opacity: 0.34;
  transform: translateZ(42px) scale(0.92);
  filter: blur(0.2px) drop-shadow(0 0 26px rgba(143,213,222,0.16));
  mask-image: radial-gradient(ellipse at 50% 74%, #000 0%, transparent 68%);
}

.hero-depth::after {
  background:
    linear-gradient(90deg, transparent, rgba(143,213,222,0.24), transparent),
    linear-gradient(180deg, transparent, rgba(34,201,138,0.16), transparent);
  opacity: 0.22;
  transform: translateZ(96px) rotateZ(var(--hero-sheen-rotate)) scale(0.72);
  filter: blur(1px) drop-shadow(0 0 40px rgba(143,213,222,0.23));
  mask-image: radial-gradient(ellipse at 50% 60%, #000 0%, transparent 54%);
}

@keyframes depthGridMove {
  from { background-position: 0 0; }
  to { background-position: 0 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-premium: 0.01ms;
    --duration-fast: 0.01ms;
  }
  .hero-video { display: none; }
  .hero-depth { animation: none; }
  .journey-scene { display: none; }
  .metric.is-counted { animation: none; }
  .value-card:hover::before,
  .feature-card:hover::before,
  .solution-card:hover::before,
  .map-card.glass-card:hover::before { animation: none !important; opacity: 0 !important; }
  .btn:not(.btn-outline):not(.btn-ghost)::after { display: none; }
  .reveal, .reveal-left, .reveal-right {
    transition: opacity 0.3s ease;
    transform: none;
  }
  .reveal-left, .reveal-right { transform: none; }
  .reveal, .reveal-left, .reveal-right { filter: none !important; }
  .hl-word { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hl-inside { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hl-inside::after { transform: scaleX(1) !important; animation: none !important; }
  body::before { animation: none; }
  .value-card, .solution-card, .feature-card, .partner-card,
  .arch-lane, .dashboard-panel, .map-card.glass-card, .why-list li,
  .metric, .performance-board, .demo-player, .cta-wrap { transform: translateZ(0) !important; }
  .value-card:hover, .feature-card:hover, .solution-card:hover, .map-card:hover,
  .arch-inputs:hover, .arch-processing:hover, .arch-output:hover {
    transform: translateY(-4px) !important;
  }
  .arch-lane::before { display: none; }
}

/* Old hero canvas hidden — full-site Vanta runs in #vanta-bg */
.hero-canvas { display: none; }

/* Cinematic vignette over the hero to keep text readable */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 70% at 50% 55%, transparent 35%, rgba(4,16,30,0.55) 70%, rgba(4,16,30,0.90) 100%),
    linear-gradient(180deg, rgba(4,16,30,0.20) 0%, transparent 20%, transparent 70%, rgba(4,16,30,0.55) 100%);
}

.hero-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  max-width: 820px;
  gap: 0;
}

.hero-copy h1 {
  color: #fff;
  margin-bottom: 1.2rem;
}

.country-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgba(168,188,204,0.24);
  border-radius: 999px;
  color: rgba(226,242,252,0.86);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.035)),
    rgba(4,16,30,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 16px 40px rgba(0,0,0,0.16);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.country-badge span:not(.mini-flag) + span:not(.mini-flag)::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 0.5rem 0 0.1rem;
  border-radius: 50%;
  background: rgba(143,213,222,0.64);
  vertical-align: middle;
  box-shadow: 0 0 10px rgba(143,213,222,0.38);
}

.mini-flag {
  display: inline-grid;
  grid-template-columns: repeat(3, 1fr);
  width: 1.28rem;
  height: 0.86rem;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20), 0 0 14px rgba(143,213,222,0.13);
  flex-shrink: 0;
}

.mini-flag i:nth-child(1) { background: #002b7f; }
.mini-flag i:nth-child(2) { background: #fcd116; }
.mini-flag i:nth-child(3) { background: #ce1126; }

/* hl-word: each word in the hero headline */
.hl-word {
  display: inline-block;
  opacity: 0;
  animation: hlWordReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--wi, 0) * 0.072s + 0.22s);
}

@keyframes hlWordReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* "Inside" — gradient text + glow + self-drawing underline */
.hero-copy h1 em,
.hl-inside {
  font-style: normal;
  display: inline-block;
  background: linear-gradient(
    105deg,
    #fff 0%,
    #9ef8ff 18%,
    #8fd5de 40%,
    #22d3f0 58%,
    #fff 78%,
    #9ef8ff 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  transform: translateZ(0);
}

.hl-inside {
  opacity: 0;
  animation: hlWordReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1)
             calc(var(--wi, 4) * 0.072s + 0.22s) forwards;
}


.hl-inside::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--vivid), var(--primary-light), var(--vivid), transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: insideUnderline 0.6s cubic-bezier(0.16, 1, 0.3, 1)
             calc(var(--wi, 4) * 0.072s + 0.85s) forwards;
}

@keyframes insideUnderline {
  to { transform: scaleX(1); }
}

.lead {
  font-size: 1.18rem;
  line-height: 1.72;
  max-width: 58ch;
  color: rgba(218,238,254,0.85);
}

.hero-actions {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin: 1.8rem 0;
}

.trust-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.trust-inline span {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.13), rgba(255,255,255,0.04)),
    rgba(255,255,255,0.06);
  border: 1px solid rgba(143,213,222,0.22);
  color: rgba(218,235,250,0.88);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    0 2px 12px rgba(0,0,0,0.16);
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.trust-inline span:hover {
  border-color: rgba(143,213,222,0.5);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    0 0 18px rgba(143,213,222,0.2),
    0 2px 12px rgba(0,0,0,0.18);
}

/* Hero visual — liquid glass container */
.hero-visual {
  position: relative;
  min-height: 460px;
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Liquid glass panel behind the canvas */
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow:
    0 0 0 1px rgba(143,213,222,0.08),
    0 32px 80px rgba(4,16,30,0.55),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.1);
}

/* Specular shimmer */
.hero-visual::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0) 65%);
  pointer-events: none;
  z-index: 2;
}

/* Ambient glow center */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 55%, rgba(143,213,222,0.09) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

/* Decorative node dots inside the glass panel */
.hero-visual-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.hv-node {
  position: absolute;
  left: var(--hx); top: var(--hy);
  transform: translate(-50%,-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--hc);
  box-shadow: 0 0 12px var(--hc), 0 0 28px color-mix(in srgb, var(--hc) 40%, transparent);
  animation: hvPulse 3.2s ease-in-out infinite;
  animation-delay: calc(var(--hx, 50%) * 0.04s);
}
.hv-node--hub {
  width: 14px; height: 14px;
  box-shadow: 0 0 18px var(--hc), 0 0 48px color-mix(in srgb, var(--hc) 35%, transparent);
  animation-duration: 2.6s;
}
@keyframes hvPulse {
  0%,100% { opacity: 0.55; transform: translate(-50%,-50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.35); }
}

/* =============================================================
   VALUE PROPS
   ============================================================= */
.value-prop {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}

.value-prop::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -5%, rgba(143,213,222,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 80%, rgba(124,92,223,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.value-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(4, 1fr);
}

.value-card {
  --card-glow: rgba(34,114,184,0.2);
  --tilt-x: 0;
  --tilt-y: 0;
  padding: 2rem 1.75rem;
  border-radius: 24px;
  border: 1px solid transparent;
  background:
    var(--glass-bg)
    padding-box,
    linear-gradient(145deg,
      rgba(255,255,255,0.28) 0%,
      rgba(143,213,222,0.18) 40%,
      rgba(255,255,255,0.06) 100%
    ) border-box;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition:
    transform 140ms cubic-bezier(.2,.8,.2,1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

/* iOS shine sweep — activates on hover */
.value-card::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.94) 47%,
    rgba(255,255,255,0.20) 53%,
    transparent 63%
  );
  transform: translateX(-64%) rotate(8deg);
  transition: opacity 220ms ease;
}

/* Inner gloss — top-left corner highlight + depth */
.value-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,0.54), transparent 24%),
    radial-gradient(90% 80% at 88% 100%, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.25), transparent 38%, rgba(255,255,255,0.10));
  opacity: 0.7;
}

.value-card:hover,
.value-card:focus-visible {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow-hover),
    0 0 60px var(--card-glow),
    0 0 28px var(--electric-glow);
}

.value-card:hover::before,
.value-card:focus-visible::before {
  opacity: 1;
  animation: iosShine 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.value-card:active {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-1px) scale(0.982);
  border-color: rgba(255,255,255,0.84);
}

/* Per-card: colored ambient glow only — glass stays uniform and transparent */
.value-grid .value-card:nth-child(1) { --card-glow: rgba(34,114,184,0.22); }
.value-grid .value-card:nth-child(2) { --card-glow: rgba(14,168,194,0.2); }
.value-grid .value-card:nth-child(3) { --card-glow: rgba(25,169,116,0.2); }
.value-grid .value-card:nth-child(4) { --card-glow: rgba(124,92,223,0.2); }

/* Per-card icon backgrounds */
.value-grid .value-card:nth-child(1) .card-icon { background: linear-gradient(135deg,#1a5fa8,#2e88d4); }
.value-grid .value-card:nth-child(2) .card-icon { background: linear-gradient(135deg,#0991ae,#25c4dd); }
.value-grid .value-card:nth-child(3) .card-icon { background: linear-gradient(135deg,#12895c,#22c98a); }
.value-grid .value-card:nth-child(4) .card-icon { background: linear-gradient(135deg,#5a3dc4,#9b7aef); }

.value-card h3 { color: var(--dark-text); margin-bottom: 0.55rem; position: relative; z-index: 1; }
.value-card p { margin: 0; color: var(--dark-muted); position: relative; z-index: 1; }
.value-card .card-icon { position: relative; z-index: 1; }

/* =============================================================
   ARCHITECTURE
   ============================================================= */
.architecture {
  background: rgba(4,10,20,0.75);
  backdrop-filter: blur(32px) saturate(155%);
  -webkit-backdrop-filter: blur(32px) saturate(155%);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  perspective: 1400px;
}

/* Drifting 3D orbs behind the lanes (matches lane accents: cyan / violet / mint) */
.architecture::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 28%, rgba(143,213,222,0.28), transparent 60%),
    radial-gradient(34% 32% at 50% 72%, rgba(139,114,240,0.22), transparent 62%),
    radial-gradient(36% 30% at 82% 30%, rgba(34,201,138,0.20), transparent 60%);
  filter: blur(48px) saturate(140%);
  animation: archOrbsDrift 22s ease-in-out infinite alternate;
  will-change: transform, opacity;
  transform-origin: 50% 50%;
}

/* Perspective grid floor — adds depth and slow scroll */
.architecture::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8%;
  width: 180%;
  height: 70%;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(transparent 0%, rgba(143,213,222,0.045) 100%),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(143,213,222,0.10) 78px 79px),
    repeating-linear-gradient(0deg,  transparent 0 78px, rgba(143,213,222,0.08) 78px 79px);
  transform: translateX(-50%) rotateX(68deg);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(60% 100% at 50% 100%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(60% 100% at 50% 100%, #000 30%, transparent 75%);
  animation: archGridFlow 14s linear infinite;
  opacity: 0.7;
}

.architecture > * { position: relative; z-index: 1; }

@keyframes archOrbsDrift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1);    opacity: 0.85; }
  50%  { transform: translate3d( 4%,  3%, 0) scale(1.06); opacity: 1;    }
  100% { transform: translate3d( 2%, -3%, 0) scale(1.02); opacity: 0.9;  }
}

@keyframes archGridFlow {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: 0 0, 78px 0, 0 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .architecture::before,
  .architecture::after { animation: none; }
}

.architecture-board {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr 80px 1.1fr 80px 1fr;
  gap: 0;
  min-height: 390px;
  padding: 1.5rem;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 40%, rgba(255,255,255,0.04) 100%),
    rgba(8,18,36,0.72);
  background-size: 28px 28px, 28px 28px, 100% 100%, 100% 100%;
  border: 0.5px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.06),
    inset 18px 18px 52px rgba(255,255,255,0.02),
    inset -22px -22px 54px rgba(0,0,0,0.18);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
}

.architecture-boundary {
  position: absolute;
  inset: 1rem;
  z-index: -1;
  border: 1.5px dashed rgba(14,61,120,0.22);
  border-radius: 14px;
  pointer-events: none;
}

.architecture-boundary span,
.architecture-boundary strong {
  position: absolute;
  top: -0.72rem;
  background: rgba(8,18,36,0.88);
  backdrop-filter: blur(12px);
  padding: 0 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-mono);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 4px;
}

.architecture-boundary span { left: 1.2rem; color: var(--electric); }
.architecture-boundary strong {
  right: 1.2rem;
  color: #ff6b6b;
  border-color: rgba(224,86,86,0.28);
  background: rgba(32,8,8,0.90);
  text-shadow: 0 0 10px rgba(255,80,80,0.4);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.architecture-boundary strong::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6b6b;
  box-shadow: 0 0 6px rgba(255,80,80,0.8);
  animation: alertPulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

.arch-lane {
  position: relative;
  align-self: stretch;
  display: grid;
  align-content: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px;
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 4px 20px rgba(0,0,0,0.22);
  transition:
    opacity  0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
    transform 160ms cubic-bezier(.2,.8,.2,1),
    filter   0.55s ease var(--reveal-delay, 0s),
    border-color 280ms ease,
    box-shadow   280ms ease;
}

/* Shine sweep on hover — matches value-card / solution-card */
.arch-lane {
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}
.arch-lane::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.88) 47%,
    rgba(255,255,255,0.18) 53%,
    transparent 63%
  );
  transform: translateX(-64%) rotate(8deg);
  transition: opacity 220ms ease;
}
.arch-lane:hover::before {
  opacity: 1;
  animation: iosShine 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.arch-inputs {
  border-color: rgba(143,213,222,0.16);
  border-top: 2px solid rgba(143,213,222,0.36);
  box-shadow:
    inset 0 1px 0 rgba(143,213,222,0.10),
    0 4px 24px rgba(0,0,0,0.24);
}

.arch-inputs:hover {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  border-color: rgba(143,213,222,0.27);
  border-top-color: rgba(143,213,222,0.58);
  box-shadow:
    inset 0 1px 0 rgba(143,213,222,0.22),
    0 20px 48px rgba(0,0,0,0.32),
    0 0 36px rgba(143,213,222,0.10);
}

.arch-processing {
  border-color: rgba(139,114,240,0.22);
  border-top: 2px solid rgba(139,114,240,0.52);
  box-shadow:
    inset 0 1px 0 rgba(139,114,240,0.14),
    0 4px 24px rgba(0,0,0,0.24);
}

.arch-processing:hover {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  border-color: rgba(139,114,240,0.38);
  border-top-color: rgba(139,114,240,0.80);
  box-shadow:
    inset 0 1px 0 rgba(139,114,240,0.28),
    0 20px 48px rgba(0,0,0,0.32),
    0 0 36px rgba(139,114,240,0.12);
}

.arch-output {
  border-color: rgba(34,201,138,0.22);
  border-top: 2px solid rgba(34,201,138,0.52);
  box-shadow:
    inset 0 1px 0 rgba(34,201,138,0.14),
    0 4px 24px rgba(0,0,0,0.24);
}

.arch-output:hover {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  border-color: rgba(34,201,138,0.38);
  border-top-color: rgba(34,201,138,0.80);
  box-shadow:
    inset 0 1px 0 rgba(34,201,138,0.28),
    0 20px 48px rgba(0,0,0,0.32),
    0 0 36px rgba(34,201,138,0.12);
}

.arch-stage { display: grid; gap: 0.4rem; }
.arch-stage h3 { margin: 0; font-size: 1.1rem; color: rgba(220,240,255,0.92); }
.arch-stage p { margin: 0; font-size: 0.9rem; color: rgba(190,215,235,0.92); }

.arch-inputs .arch-stage h3 { color: rgba(160,230,255,0.92); }
.arch-processing .arch-stage h3 { color: rgba(200,185,255,0.92); }
.arch-output .arch-stage h3 { color: rgba(160,245,210,0.92); }

.stage-index {
  width: 36px;
  height: 26px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--grad-brand);
  border-radius: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.84rem;
}

.arch-inputs .stage-index {
  background: linear-gradient(135deg, rgba(143,213,222,0.58) 0%, rgba(143,213,222,0.52) 100%);
  box-shadow: 0 2px 10px rgba(143,213,222,0.24);
}

.arch-processing .stage-index {
  background: linear-gradient(135deg, rgba(100,80,200,0.9) 0%, rgba(139,114,240,0.8) 100%);
  box-shadow: 0 2px 10px rgba(139,114,240,0.35);
}

.arch-output .stage-index {
  background: linear-gradient(135deg, rgba(20,168,100,0.9) 0%, rgba(34,201,138,0.8) 100%);
  box-shadow: 0 2px 10px rgba(34,201,138,0.35);
}

.signal-list,
.processor-stack,
.mini-dashboard { display: grid; gap: 0.5rem; }

.signal-list span,
.processor-stack span,
.mini-dashboard div {
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.09);
  border-left: 3px solid var(--lane-input);
  border-radius: 8px;
  color: rgba(200,228,250,0.88);
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 200ms ease, border-left-color 200ms ease;
}

.signal-list span:hover {
  background: rgba(143,213,222,0.075);
  border-left-color: var(--vivid);
}

.processor-stack span {
  border-left-color: var(--lane-proc);
  color: rgba(210,200,255,0.88);
}

.processor-stack span:hover {
  background: rgba(139,114,240,0.10);
  border-left-color: #a893ff;
}

.mini-dashboard div {
  display: flex;
  justify-content: space-between;
  border-left-color: var(--lane-output);
  color: rgba(180,245,220,0.88);
}

.mini-dashboard div:hover {
  background: rgba(34,201,138,0.10);
  border-left-color: #3ddda8;
}

.mini-dashboard span { color: rgba(140,220,185,0.58); }
.mini-dashboard strong { color: var(--lane-output); }

.arch-flow {
  position: relative;
  display: grid;
  place-items: center;
}

.arch-flow::before {
  content: "";
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(168,188,204,0.28), transparent);
}

.arch-inputs + .arch-flow::before {
  background: linear-gradient(90deg, rgba(143,213,222,0.22), rgba(139,114,240,0.30));
}

.arch-processing + .arch-flow::before {
  background: linear-gradient(90deg, rgba(139,114,240,0.30), rgba(34,201,138,0.30));
}

.arch-flow span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(168,188,204,0.70);
  box-shadow: 0 0 8px rgba(168,188,204,0.45);
  animation: dataPacket 2.6s linear infinite;
}

.arch-flow span:nth-child(2) { animation-delay: 0.45s; }
.arch-flow span:nth-child(3) { animation-delay: 0.9s; }

.arch-inputs + .arch-flow span {
  background: rgba(143,213,222,0.58);
  box-shadow: 0 0 8px rgba(143,213,222,0.38);
}

.arch-processing + .arch-flow span {
  background: rgba(34,201,138,0.80);
  box-shadow: 0 0 8px rgba(34,201,138,0.55);
}

/* =============================================================
   SOLUTIONS — dark section
   ============================================================= */
.solutions-section {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.solutions-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 82% 50%, rgba(47,114,179,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(14,61,120,0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(255,255,255,0) 18%);
  pointer-events: none;
}

/* Top-edge gloss accent line */
.solutions-section::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(143,213,222,0.32) 25%, rgba(124,92,223,0.5) 50%, rgba(25,201,138,0.45) 75%, transparent 100%);
  pointer-events: none;
}

.solutions-section .section-head {
  position: relative;
  z-index: 1;
}

.solutions-section .eyebrow { color: var(--amber); }
.solutions-section h2 { color: var(--dark-text); }
.solutions-section .section-head p { color: var(--dark-muted); }

.solutions-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(3, 1fr);
}

.solution-card {
  --sol-accent: #6fb8c9;
  --sol-glow: rgba(143,213,222,0.14);
  --tilt-x: 0;
  --tilt-y: 0;
  padding: 2rem 1.75rem;
  border-radius: 22px;
  border: 1px solid transparent;
  background:
    var(--glass-bg) padding-box,
    linear-gradient(145deg,
      rgba(255,255,255,0.26) 0%,
      color-mix(in srgb, var(--sol-accent) 40%, transparent) 50%,
      rgba(255,255,255,0.05) 100%
    ) border-box;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--glass-shadow),
    inset 0 1.5px 0 rgba(255,255,255,0.28);
  transition:
    transform 140ms cubic-bezier(.2,.8,.2,1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

/* iOS shine sweep */
.solution-card::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.94) 47%,
    rgba(255,255,255,0.20) 53%,
    transparent 63%
  );
  transform: translateX(-64%) rotate(8deg);
  transition: opacity 220ms ease;
}

/* Inner gloss */
.solution-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,0.54), transparent 24%),
    radial-gradient(90% 80% at 88% 100%, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.25), transparent 38%, rgba(255,255,255,0.10));
  opacity: 0.7;
}

.solution-card:hover,
.solution-card:focus-visible {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  background:
    var(--glass-bg-hover) padding-box,
    linear-gradient(145deg,
      rgba(255,255,255,0.55) 0%,
      color-mix(in srgb, var(--sol-accent) 65%, transparent) 50%,
      rgba(255,255,255,0.12) 100%
    ) border-box;
  box-shadow:
    var(--glass-shadow-hover),
    0 0 60px var(--sol-glow),
    0 0 28px var(--electric-glow);
}

.solution-card:hover::before,
.solution-card:focus-visible::before {
  opacity: 1;
  animation: iosShine 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.solution-card:active {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-1px) scale(0.982);
  border-color: rgba(255,255,255,0.84);
}

/* Per-card personalities */
.solutions-grid .solution-card:nth-child(1) {
  --sol-accent: #6fb8c9;
  --sol-glow: rgba(143,213,222,0.16);
  --sol-tint: rgba(143,213,222,0.045);
  --sol-top: rgba(143,213,222,0.72);
}
.solutions-grid .solution-card:nth-child(2) {
  --sol-accent: #7c5cdf;
  --sol-glow: rgba(124,92,223,0.22);
  --sol-tint: rgba(124,92,223,0.055);
  --sol-top: rgba(124,92,223,0.72);
}
.solutions-grid .solution-card:nth-child(3) {
  --sol-accent: #19c98a;
  --sol-glow: rgba(25,201,138,0.2);
  --sol-tint: rgba(25,201,138,0.045);
  --sol-top: rgba(25,201,138,0.72);
}

/* Coloured top accent bar per card */
.solutions-grid .solution-card::after {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--sol-top, rgba(143,213,222,0.6)) 30%,
    var(--sol-top, rgba(143,213,222,0.6)) 70%,
    transparent 100%
  );
  border-radius: 0 0 2px 2px;
  z-index: 2;
  filter: blur(0.5px);
  box-shadow: 0 0 14px var(--sol-glow);
}

.solution-card h3 { color: var(--dark-text); margin-bottom: 0.75rem; }
.solution-card p { color: var(--dark-muted); margin: 0; }

a.solution-card {
  text-decoration: none;
  cursor: pointer;
  display: block;
}

/* =============================================================
   SOLUTION CARD ANIMATIONS
   ============================================================= */
.solution-anim {
  position: relative;
  width: 100%;
  height: 148px;
  margin-bottom: 1.35rem;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(14,61,120,0.38) 0%, rgba(11,28,48,0.6) 100%);
  border: 1px solid rgba(143,213,222,0.16);
  box-shadow: inset 0 0 26px rgba(4,16,30,0.35);
  isolation: isolate;
}

.solution-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(143,213,222,0.13) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 10% 90%, rgba(14,61,120,0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.solution-anim svg {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

.solution-card:hover .solution-anim {
  border-color: rgba(143,213,222,0.26);
  box-shadow: inset 0 0 30px rgba(143,213,222,0.11);
}

/* --- GPAI Self-Checkout (realistic CV view) --- */
@keyframes ck-rec-blink {
  0%, 60%, 100% { opacity: 1; }
  70%, 85%      { opacity: 0.15; }
}
.solution-anim--checkout .ck-rec,
.solution-anim--people .pp-rec,
.solution-anim--planogram .pg-rec {
  animation: ck-rec-blink 1.6s ease-in-out infinite;
}

@keyframes ck-laser-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.solution-anim--checkout .ck-laser {
  animation: ck-laser-pulse 0.9s ease-in-out infinite;
}

@keyframes ck-prod-slide {
  0%   { transform: translate(-20px, 0); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translate(240px, 0); opacity: 0; }
}
.solution-anim--checkout .ck-product {
  animation: ck-prod-slide 10.5s linear infinite;
}
.solution-anim--checkout .ck-p1 { animation-delay: 0s; }
.solution-anim--checkout .ck-p2 { animation-delay: -3.5s; }
.solution-anim--checkout .ck-p3 { animation-delay: -7s; }

@keyframes ck-bbox-march {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -12; }
}
.solution-anim--checkout .ck-bbox {
  animation: ck-bbox-march 1.4s linear infinite;
}
.solution-anim--checkout .ck-bbox-alert {
  animation: ck-bbox-march 0.7s linear infinite;
}

@keyframes ck-led-alert-blink {
  0%, 55%, 100% { opacity: 1; }
  65%, 85%      { opacity: 0.15; }
}
.solution-anim--checkout .ck-led-alert {
  animation: ck-led-alert-blink 0.8s ease-in-out infinite;
}

/* --- People Counting (realistic top-down) --- */
@keyframes pp-walk {
  0%   { transform: translateX(-14px); opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { transform: translateX(216px); opacity: 0; }
}
.solution-anim--people .pp-person {
  animation: pp-walk 6.8s linear infinite;
}
.solution-anim--people .pp-p1 { animation-duration: 6.4s; animation-delay: 0s; }
.solution-anim--people .pp-p2 { animation-duration: 7.6s; animation-delay: -1.6s; }
.solution-anim--people .pp-p3 { animation-duration: 6.2s; animation-delay: -3.4s; }
.solution-anim--people .pp-p4 { animation-duration: 7.1s; animation-delay: -5s; }

.solution-anim--people .pp-track {
  animation: ck-bbox-march 1.4s linear infinite;
}

@keyframes pp-zone-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.94); }
  50%      { opacity: 0.85; transform: scale(1.06); }
}
.solution-anim--people .pp-zone {
  transform-box: fill-box;
  transform-origin: center;
  animation: pp-zone-pulse 1.8s ease-in-out infinite;
}

@keyframes pp-cam-blink {
  0%, 45%, 100% { fill: #5eff9e; }
  55%, 80%      { fill: #6fb8c9; }
}
.solution-anim--people .pp-cam-led {
  animation: pp-cam-blink 1.6s ease-in-out infinite;
}

@keyframes pp-num-cycle {
  0%, 22%   { opacity: 1; }
  25%, 100% { opacity: 0; }
}
.solution-anim--people .pp-count .num {
  opacity: 0;
  animation: pp-num-cycle 5.2s steps(1) infinite;
}
.solution-anim--people .pp-count .n1 { animation-delay: 0s; }
.solution-anim--people .pp-count .n2 { animation-delay: 1.3s; }
.solution-anim--people .pp-count .n3 { animation-delay: 2.6s; }
.solution-anim--people .pp-count .n4 { animation-delay: 3.9s; }

@keyframes pp-graph-dot-pulse {
  0%, 100% { opacity: 0.6; r: 1.2; }
  50%      { opacity: 1;   r: 1.8; }
}
.solution-anim--people .pp-graph-dot {
  animation: pp-graph-dot-pulse 1.6s ease-in-out infinite;
}

/* --- Planogram Degradation (realistic shelf) --- */
@keyframes pg-scan-sweep {
  0%   { transform: translateY(0); }
  100% { transform: translateY(142px); }
}
.solution-anim--planogram .pg-scan {
  animation: pg-scan-sweep 4s linear infinite;
}

@keyframes pg-alert-pulse {
  0%, 100% { opacity: 0.65; }
  50%      { opacity: 1; }
}
.solution-anim--planogram .pg-alert-box {
  animation:
    pg-alert-pulse 1.3s ease-in-out infinite,
    ck-bbox-march 1.4s linear infinite;
}
.solution-anim--planogram .pg-alert-1 { animation-delay: 0s, 0s; }
.solution-anim--planogram .pg-alert-2 { animation-delay: -0.6s, -0.3s; }
.solution-anim--planogram .pg-alert-3 { animation-delay: -1s, -0.7s; }

@media (prefers-reduced-motion: reduce) {
  .solution-anim--checkout .ck-rec,
  .solution-anim--people .pp-rec,
  .solution-anim--planogram .pg-rec,
  .solution-anim--checkout .ck-laser,
  .solution-anim--checkout .ck-product,
  .solution-anim--checkout .ck-bbox,
  .solution-anim--checkout .ck-bbox-alert,
  .solution-anim--checkout .ck-led-alert,
  .solution-anim--people .pp-person,
  .solution-anim--people .pp-track,
  .solution-anim--people .pp-zone,
  .solution-anim--people .pp-cam-led,
  .solution-anim--people .pp-count .num,
  .solution-anim--people .pp-graph-dot,
  .solution-anim--planogram .pg-scan,
  .solution-anim--planogram .pg-alert-box {
    animation: none;
  }
  .solution-anim--people .pp-count .n1 { opacity: 1; }
}

/* =============================================================
   IMPACT SECTION
   ============================================================= */
.impact {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.impact::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 50% 0%, rgba(143,213,222,0.05) 0%, transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 18%);
  pointer-events: none;
}

.impact-copy { margin-bottom: 2rem; }

.disclaimer {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.81rem;
  color: rgba(160,200,235,0.62);
  background: rgba(143,213,222,0.045);
  border: 1px solid rgba(143,213,222,0.10);
  padding: 0.24rem 0.78rem;
  border-radius: 999px;
}

.metrics {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 1.5rem;
}

.metric {
  --met-accent: #8fd5de;
  --met-glow: rgba(143,213,222,0.16);
  --met-grad: linear-gradient(135deg,#6fb8c9,#8fd5de);
  padding: 1.6rem 1.4rem;
  border: 0.5px solid var(--glass-border);
  border-radius: 18px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  isolation: isolate;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow var(--duration-fast) var(--ease-premium), border-color var(--duration-fast) var(--ease-premium);
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

/* Specular hairline */
.metric::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
}

.metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--met-grad);
  z-index: 1;
  opacity: 0.7;
}

.metric:hover {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translate3d(0, -6px, 0) scale(1.012);
  box-shadow: var(--glass-shadow-hover), 0 16px 40px var(--met-glow);
  border-color: rgba(255,255,255,0.2);
  transition-duration: 0.18s;
}

/* Per-metric personalities */
.metrics .metric:nth-child(1) {
  --met-accent: #e05656;
  --met-glow: rgba(224,86,86,0.22);
  --met-grad: linear-gradient(135deg,#b83030,#e05656);
}
.metrics .metric:nth-child(2) {
  --met-accent: #19dc8c;
  --met-glow: rgba(25,220,140,0.22);
  --met-grad: linear-gradient(135deg,#0fb870,#19dc8c);
}
.metrics .metric:nth-child(3) {
  --met-accent: #8fd5de;
  --met-glow: rgba(143,213,222,0.16);
  --met-grad: linear-gradient(135deg,#6fb8c9,#8fd5de);
}

.metric-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.4rem;
  background: var(--met-grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.metric-label {
  display: block;
  color: rgba(175,215,245,0.72);
  font-size: 0.84rem;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.performance-board {
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(6,14,28,0.70);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.36),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  margin-top: 2rem;
  isolation: isolate;
  will-change: transform;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease;
  transform:
    perspective(900px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

.performance-board:hover {
  transform:
    perspective(900px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-4px);
  box-shadow:
    0 40px 100px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 0 50px rgba(143,213,222,0.10);
}

.performance-header {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}

.performance-header span,
.performance-breakdown span { display: block; color: rgba(155,198,232,0.62); font-size: 0.81rem; }
.performance-header strong { display: block; font-family: var(--font-display); font-size: 1.55rem; color: rgba(215,238,255,0.95); }

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(25,220,140,0.9);
  font-weight: 700;
  font-size: 0.85rem;
}

.status-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ok);
  box-shadow: 0 0 0 5px rgba(25,169,116,0.16);
}

.performance-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 1rem;
  padding: 1.25rem;
}

.performance-chart { min-height: 390px; }
.performance-chart canvas { width: 100%; height: 390px; }

.performance-breakdown { display: grid; gap: 0.75rem; }

.performance-breakdown div {
  display: grid;
  align-content: center;
  min-height: 82px;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

.performance-breakdown strong {
  font-family: var(--font-display);
  font-size: 1.8rem;
  line-height: 1.1;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* =============================================================
   ANALYTICS SHOWCASE
   ============================================================= */
.analytics-showcase {
  background: radial-gradient(ellipse 70% 60% at 50% 40%, rgba(14,61,120,0.18) 0%, transparent 70%),
              radial-gradient(ellipse 50% 50% at 80% 80%, rgba(143,213,222,0.045) 0%, transparent 70%),
              #04101e;
}

.dashboard-shell {
  overflow: hidden;
  border: 0.5px solid rgba(255,255,255,0.12);
  border-radius: 22px;
  background: rgba(5,12,26,0.80);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.40),
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -1px 0 rgba(255,255,255,0.05);
  isolation: isolate;
}

.dashboard-toolbar {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
}

.dashboard-title { display: grid; gap: 0.15rem; }
.dashboard-title span {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: rgba(220,240,255,0.95);
  font-weight: 700;
}
.dashboard-title small { color: rgba(160,200,235,0.6); font-weight: 600; font-size: 0.81rem; }

.dashboard-toolbar > div:last-child { display: flex; gap: 0.4rem; }

.dashboard-toolbar button {
  min-height: 34px;
  padding: 0 0.9rem;
  color: rgba(170,210,240,0.65);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}

.dashboard-toolbar button:hover { background: rgba(255,255,255,0.1); color: rgba(220,240,255,0.9); }
.dashboard-toolbar button.active { color: #fff; background: var(--vivid); border-color: var(--vivid); box-shadow: 0 0 16px rgba(143,213,222,0.20); }

.store-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.store-summary div {
  min-height: 104px;
  padding: 1.1rem 1.5rem;
  display: grid;
  align-content: center;
  gap: 0.12rem;
  background: rgba(4,16,30,0.55);
}

.store-summary span {
  color: rgba(160,200,235,0.58);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-family: var(--font-mono);
}

.store-summary strong {
  font-family: var(--font-display);
  font-size: 2.25rem;
  line-height: 1;
  background: linear-gradient(135deg, #8fd5de 0%, #7c6af0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.store-summary small { color: rgba(160,200,235,0.68); font-weight: 600; font-size: 0.81rem; }

.dashboard-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
  padding: 1rem;
}

.dashboard-panel {
  border: 0.5px solid rgba(255,255,255,0.1);
  background: rgba(8,18,36,0.65);
  backdrop-filter: blur(32px) saturate(155%);
  -webkit-backdrop-filter: blur(32px) saturate(155%);
  border-radius: 16px;
  padding: 1.1rem;
  box-shadow:
    0 8px 32px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transition:
    transform 140ms cubic-bezier(.2,.8,.2,1),
    border-color 300ms ease,
    box-shadow 300ms ease;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

.dashboard-panel:hover,
.dashboard-panel:focus-visible {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-6px) scale(1.008);
  border-color: rgba(143,213,222,0.28);
  box-shadow:
    0 18px 48px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 36px rgba(143,213,222,0.10);
}

.panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.panel-heading h3 { margin: 0; color: rgba(215,238,255,0.92); font-size: 1.05rem; }
.panel-heading span { color: rgba(150,195,230,0.6); font-size: 0.78rem; font-weight: 700; font-family: var(--font-mono); }

.dashboard-panel canvas { width: 100%; height: 340px; }
.dashboard-products canvas { height: 430px; }
.dashboard-heatmap { grid-column: span 2; }

.heatmap-grid {
  display: grid;
  grid-template-columns: 52px repeat(17, minmax(36px, 1fr));
  gap: 4px;
  font-size: 0.76rem;
  color: rgba(160,200,235,0.6);
  align-items: center;
}

.heatmap-grid .cell {
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.04);
  opacity: 0;
  transform: scale(0.78);
  transition: transform 0.18s ease-out;
  animation: heatmapIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  cursor: default;
}

.heatmap-grid .cell:hover { transform: scale(1.07); }
.heatmap-grid .head, .heatmap-grid .label {
  font-weight: 700;
  text-align: center;
  color: rgba(180,218,248,0.62);
  font-size: 0.78rem;
}
.heatmap-grid .label { text-align: left; padding-left: 0.2rem; }

.cell.lvl0 { background: rgba(255,255,255,0.04); }
.cell.lvl1 { background: rgba(143,213,222,0.13); }
.cell.lvl2 { background: rgba(143,213,222,0.30); }
.cell.lvl3 { background: rgba(143,213,222,0.52); }

.heatmap-legend {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: rgba(150,195,230,0.58);
  font-size: 0.79rem;
}

.heatmap-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.heatmap-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.heatmap-legend .lvl0 { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
.heatmap-legend .lvl1 { background: rgba(143,213,222,0.13); }
.heatmap-legend .lvl2 { background: rgba(143,213,222,0.30); }
.heatmap-legend .lvl3 { background: rgba(143,213,222,0.52); }

/* =============================================================
   FEATURE BREAKDOWN
   ============================================================= */
.feature-breakdown {
  background: rgba(4,12,24,0.72);
  backdrop-filter: blur(32px) saturate(155%);
  -webkit-backdrop-filter: blur(32px) saturate(155%);
  border-top: 1px solid rgba(255,255,255,0.07);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.feature-breakdown::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 20% 50%, rgba(143,213,222,0.04) 0%, transparent 70%),
              linear-gradient(180deg, rgba(255,255,255,0.025) 0%, transparent 20%);
  pointer-events: none;
}

.feature-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, 1fr);
}

.feature-card {
  --feat-glow: rgba(34,114,184,0.2);
  padding: 2rem 1.75rem;
  border-radius: 24px;
  border: 0.5px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  transition:
    transform 300ms cubic-bezier(.2,.8,.2,1),
    border-color 300ms ease,
    background 300ms ease,
    box-shadow 300ms ease;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

/* iOS shine sweep */
.feature-card::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.94) 47%,
    rgba(255,255,255,0.20) 53%,
    transparent 63%
  );
  transform: translateX(-64%) rotate(8deg);
  transition: opacity 220ms ease;
}

/* Inner gloss */
.feature-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,0.54), transparent 24%),
    radial-gradient(90% 80% at 88% 100%, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.25), transparent 38%, rgba(255,255,255,0.10));
  opacity: 0.7;
}

.feature-card:hover,
.feature-card:focus-visible {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-8px) scale(1.012);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow-hover),
    0 0 60px var(--feat-glow);
}

.feature-card:hover::before,
.feature-card:focus-visible::before {
  opacity: 1;
  animation: iosShine 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.feature-card:active {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-1px) scale(0.982);
  border-color: rgba(255,255,255,0.84);
}

/* Colored ambient glow identity per card */
.feature-grid .feature-card:nth-child(1) { --feat-glow: rgba(34,114,184,0.22); }
.feature-grid .feature-card:nth-child(2) { --feat-glow: rgba(25,169,116,0.2); }
.feature-grid .feature-card:nth-child(3) { --feat-glow: rgba(224,157,26,0.2); }
.feature-grid .feature-card:nth-child(4) { --feat-glow: rgba(124,92,223,0.2); }


/* Per-card icon backgrounds */
.feature-grid .feature-card:nth-child(1) .card-icon { background: linear-gradient(135deg,#1a5fa8,#2e88d4); }
.feature-grid .feature-card:nth-child(2) .card-icon { background: linear-gradient(135deg,#12895c,#22c98a); }
.feature-grid .feature-card:nth-child(3) .card-icon { background: linear-gradient(135deg,#b87a0e,#e8b83a); }
.feature-grid .feature-card:nth-child(4) .card-icon { background: linear-gradient(135deg,#5a3dc4,#9b7aef); }

.feature-card h3 { color: var(--dark-text); margin-bottom: 0.75rem; position: relative; z-index: 1; }
.feature-card li { margin-bottom: 0.45rem; color: var(--dark-muted); font-size: 0.95rem; }
.feature-card .card-icon { position: relative; z-index: 1; }

/* =============================================================
   WHY US — dark section
   ============================================================= */
.why-us {
  background: rgba(3,12,24,0.80);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.why-us::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 12% 50%, rgba(47,114,179,0.1) 0%, transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 20%);
  pointer-events: none;
}

.why-us::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(47,114,179,0.4) 35%, rgba(74,158,212,0.4) 65%, transparent 100%);
  pointer-events: none;
}

.why-grid {
  position: relative;
  z-index: 1;
  padding: 3rem 2.5rem;
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1.1fr 1fr;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(60px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(60px) saturate(180%) brightness(1.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.1),
    0 24px 60px rgba(4,16,30,0.4);
  overflow: hidden;
}

.why-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40%;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(160deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

.why-grid .eyebrow { color: var(--amber); }
.why-grid h2 { color: var(--dark-text); }
.why-grid p { color: var(--dark-muted); }

.why-list {
  display: grid;
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  align-self: center;
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--dark-muted);
  font-size: 0.96rem;
  line-height: 1.6;
  padding: 0.8rem 1rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(190,215,236,0.1);
  border-radius: 10px;
  will-change: transform;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 140ms cubic-bezier(.2,.8,.2,1);
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

.why-list li:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(143,213,222,0.16);
  color: rgba(220,238,250,0.88);
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-3px);
}

.why-list li::before {
  content: "";
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border-radius: 50%;
  background: rgba(143,213,222,0.13);
  border: 1.5px solid rgba(143,213,222,0.32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpolyline points='2,6 5,9 10,3' fill='none' stroke='%2338a7d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 70%;
  background-repeat: no-repeat;
  background-position: center;
  margin-top: 0.18rem;
}

/* =============================================================
   CTA / CONTACT
   ============================================================= */
.cta {
  background:
    linear-gradient(140deg, rgba(255,255,255,0.08), transparent 34%, rgba(143,213,222,0.08)),
    linear-gradient(140deg, #08233d 0%, #1e5662 48%, #3f7d75 100%);
  position: relative;
  overflow: hidden;
  padding: 5rem 0;
}

.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 80% at 88% 50%, rgba(255,255,255,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 10% 20%, rgba(255,255,255,0.05) 0%, transparent 70%);
}

.cta-wrap {
  position: relative;
  z-index: 1;
  padding: 3rem 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1.35fr 0.65fr;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    rgba(255,255,255,0.07) padding-box,
    linear-gradient(145deg,
      rgba(255,255,255,0.38) 0%,
      rgba(143,213,222,0.42) 35%,
      rgba(124,92,223,0.22) 65%,
      rgba(255,255,255,0.08) 100%
    ) border-box;
  backdrop-filter: blur(60px) saturate(180%) brightness(1.05);
  -webkit-backdrop-filter: blur(60px) saturate(180%) brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -1px 0 rgba(0,0,0,0.12),
    0 32px 80px rgba(4,16,30,0.45),
    0 0 60px rgba(143,213,222,0.08);
  overflow: hidden;
  will-change: transform;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease;
  transform:
    perspective(1100px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

.cta-wrap:hover {
  transform:
    perspective(1100px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-4px);
}

.cta-wrap::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 48%;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(ellipse 70% 60% at 30% 0%, rgba(143,213,222,0.10) 0%, transparent 65%),
    linear-gradient(158deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* Top edge accent glow line on CTA */
.cta-wrap::after {
  content: "";
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1.5px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(143,213,222,0.7) 25%,
    rgba(200,228,248,0.9) 50%,
    rgba(143,213,222,0.7) 75%,
    transparent 100%
  );
  border-radius: 0 0 2px 2px;
  filter: blur(0.5px);
  box-shadow: 0 0 20px rgba(143,213,222,0.35);
  pointer-events: none;
}

.cta-wrap .eyebrow { color: var(--amber); }
.cta-wrap h2 {
  background: linear-gradient(110deg,
    #fff 0%,
    #c8f0fa 35%,
    #8fd5de 58%,
    #fff 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
.cta-wrap p { color: rgba(218,235,250,0.82); }

.contact-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  padding: 1.6rem;
}

.contact-block p { color: rgba(218,235,250,0.88); margin: 0; }
.contact-block strong { color: #fff; }

.contact-block .btn {
  margin-top: 0.75rem;
  align-self: flex-start;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.03)),
    linear-gradient(135deg, #0e4472 0%, #1a5f96 45%, #2e8ac0 100%);
  border: 1px solid transparent;
  box-shadow:
    0 4px 20px rgba(46,138,192,0.28),
    inset 0 1px 0 rgba(255,255,255,0.36);
}

.contact-block .btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 12px 36px rgba(56,200,224,0.42),
    0 0 0 1px rgba(143,213,222,0.35),
    inset 0 1px 0 rgba(255,255,255,0.36);
}

/* =============================================================
   PARTNERS SECTION
   ============================================================= */
.partners-section {
  background: linear-gradient(180deg, rgba(4,16,30,0) 0%, rgba(8,22,42,0.7) 50%, rgba(4,16,30,0) 100%);
  position: relative;
  overflow: hidden;
}
.partners-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 50%, rgba(143,213,222,0.045) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 80% 50%, rgba(124,92,223,0.06) 0%, transparent 65%);
  pointer-events: none;
}
.partners-head {
  text-align: center;
  margin-bottom: 3rem;
}
.partners-head h2 { color: var(--dark-text); }
.partners-head .section-sub { color: var(--dark-muted); margin-top: 0.75rem; }
.partners-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.partner-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  box-shadow:
    0 8px 32px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.1),
    inset 0 -1px 0 rgba(0,0,0,0.1);
  padding: 2rem 1.5rem;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease;
  will-change: transform;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}
.partner-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0) 60%);
  pointer-events: none;
  z-index: 0;
}
.partner-card:hover {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(143,213,222,0.16), inset 0 1px 0 rgba(255,255,255,0.15);
}
.partner-card--featured {
  border-color: rgba(143,213,222,0.16);
  box-shadow:
    0 8px 40px rgba(0,0,0,0.5),
    0 0 0 1px rgba(143,213,222,0.10),
    inset 0 1px 0 rgba(255,255,255,0.12);
}
.partner-synapse {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.partner-logo {
  position: relative;
  z-index: 1;
  height: 52px;
  width: auto;
  object-fit: contain;
  border-radius: 8px;
  display: block;
  margin-bottom: 1.1rem;
  filter: drop-shadow(0 2px 12px rgba(226,0,26,0.3));
}
.partner-info {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
}
.partner-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff;
  letter-spacing: 0.02em;
}
.partner-desc {
  font-size: 0.82rem;
  color: rgba(190,215,236,0.7);
}
.partner-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(143,213,222,0.10);
  border: 1px solid rgba(143,213,222,0.22);
  color: #8fd5de;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
}
.partner-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8fd5de;
  box-shadow: 0 0 6px #8fd5de;
  animation: partnerPulse 2s ease-in-out infinite;
}
@keyframes partnerPulse {
  0%,100% { opacity: 1; } 50% { opacity: 0.35; }
}
.partner-card--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  border-style: dashed;
  border-color: rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  text-decoration: none;
}
.partner-placeholder-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(190,215,236,0.35);
  font-size: 0.85rem;
}
.partner-placeholder-icon {
  font-size: 2rem;
  font-weight: 200;
  line-height: 1;
  color: rgba(190,215,236,0.2);
}

/* Contact email / phone prominent links */
.contact-direct {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-top: 2rem;
}
.contact-email-link,
.contact-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: all 0.2s ease;
  width: fit-content;
}
.contact-email-link {
  font-family: var(--font-display);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8fd5de;
  text-shadow: 0 0 20px rgba(143,213,222,0.36);
}
.contact-email-link svg { width: 22px; height: 22px; stroke: #8fd5de; flex-shrink: 0; }
.contact-email-link:hover {
  color: #fff;
  text-shadow: 0 0 30px rgba(143,213,222,0.64), 0 0 60px rgba(143,213,222,0.22);
}
.contact-phone-link {
  font-size: 1rem;
  color: rgba(190,215,236,0.7);
}
.contact-phone-link svg { width: 18px; height: 18px; flex-shrink: 0; }
.contact-phone-link:hover { color: #fff; }

@media (max-width: 760px) {
  .partners-grid { grid-template-columns: 1fr; }
  .contact-email-link { font-size: 1.15rem; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.site-footer {
  background: rgba(3,11,22,0.55);
  backdrop-filter: blur(24px) saturate(130%);
  -webkit-backdrop-filter: blur(24px) saturate(130%);
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid rgba(190,215,236,0.1);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(143,213,222,0.24) 30%, rgba(74,158,212,0.35) 70%, transparent 100%);
  pointer-events: none;
}

.footer-wrap {
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-nav {
  display: flex;
  gap: 0.25rem;
  flex-wrap: wrap;
}

.footer-nav a {
  color: rgba(190,215,236,0.6);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  transition: color 0.18s, background 0.18s;
}

.footer-link-button {
  appearance: none;
  background: transparent;
  border: 0;
  color: rgba(190,215,236,0.6);
  cursor: pointer;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 7px;
  transition: color 0.18s, background 0.18s;
}

.footer-nav a:hover,
.footer-link-button:hover {
  color: rgba(218,235,250,0.92);
  background: rgba(255,255,255,0.07);
}

.site-language,
.policy-language {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.18rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

.site-language a,
.policy-language a {
  min-width: 38px;
  border-radius: 999px;
  color: rgba(190,215,236,0.72);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.42rem 0.62rem;
  text-align: center;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.site-language a:hover,
.site-language a[aria-current="page"],
.policy-language a:hover,
.policy-language a[aria-current="page"] {
  background: rgba(143,213,222,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(143,213,222,0.18);
}

.site-footer .brand-text { font-size: 0.8rem; }
.site-footer p { color: rgba(190,215,236,0.55); font-size: 0.82rem; margin: 0; }

.value-card,
.solution-card,
.feature-card,
.partner-card,
.dashboard-panel,
.map-card.glass-card {
  overflow: hidden;
}

.value-card h3,
.solution-card h3,
.feature-card h3,
.partner-card h3,
.map-card h3 {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
}

.value-card p,
.solution-card p,
.feature-card li,
.partner-card span,
.map-card p,
.dashboard-panel p {
  overflow-wrap: break-word;
  word-break: normal;
}

.cookie-consent,
.cookie-preferences {
  position: fixed;
  z-index: 80;
}

.cookie-consent[hidden],
.cookie-preferences[hidden] {
  display: none;
}

.cookie-consent {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  background: transparent;
}

.cookie-consent-card,
.cookie-preferences-card {
  background: rgba(4,12,28,0.92);
  border: 1px solid rgba(143,213,222,0.28);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
  color: rgba(218,235,250,0.88);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

.cookie-consent-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
}

.cookie-copy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.2rem;
}

.cookie-language {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
}

.cookie-language button {
  min-width: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(190,215,236,0.72);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.34rem 0.58rem;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.cookie-language button:hover,
.cookie-language button.is-active,
.cookie-language button[aria-pressed="true"] {
  background: rgba(143,213,222,0.18);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(143,213,222,0.18);
}

.cookie-consent h2,
.cookie-preferences h2 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2vw, 2rem);
  margin: 0 0 0.35rem;
}

.cookie-consent p,
.cookie-preferences p,
.cookie-preferences small {
  color: rgba(218,235,250,0.76);
  margin: 0;
}

.cookie-consent a,
.cookie-preferences a {
  color: #8fd5de;
  font-weight: 700;
  text-decoration: none;
}

.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

.cookie-actions .btn {
  min-width: 150px;
  justify-content: center;
}

.cookie-preferences {
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(2,8,18,0.62);
}

.cookie-preferences-card {
  width: min(720px, 100%);
  max-height: min(720px, calc(100vh - 2rem));
  overflow: auto;
  padding: 1.25rem;
}

.cookie-preferences-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.cookie-close {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.cookie-option {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.cookie-option strong {
  display: block;
  color: #fff;
  margin-bottom: 0.2rem;
}

.cookie-option input {
  width: 20px;
  height: 20px;
  accent-color: var(--cyan);
}

.cookie-required {
  color: rgba(143,213,222,0.92);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.policy-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(143,213,222,0.18), transparent 30rem),
    linear-gradient(180deg, #04101e 0%, #07182a 48%, #04101e 100%);
  color: rgba(218,235,250,0.88);
}

.policy-header {
  position: sticky;
}

.policy-main {
  padding: 8rem 0 4rem;
}

.policy-container {
  max-width: 980px;
}

.policy-container h1 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  line-height: 0.95;
  margin: 0.3rem 0 0.8rem;
  text-transform: uppercase;
}

.policy-meta {
  color: rgba(190,215,236,0.68);
  margin-bottom: 2rem;
}

.policy-meta a,
.policy-document a {
  color: #8fd5de;
  font-weight: 700;
  text-decoration: none;
}

.policy-document {
  background: rgba(4,12,28,0.58);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 16px 48px rgba(0,0,0,0.24);
  overflow-wrap: break-word;
  word-break: normal;
}

.policy-document h2,
.policy-document h3 {
  color: #fff;
  font-family: var(--font-display);
  line-height: 1.05;
  margin: 1.8rem 0 0.6rem;
}

.policy-document h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.policy-document h3 { font-size: clamp(1.3rem, 2vw, 1.75rem); }

.policy-document p {
  color: rgba(218,235,250,0.84);
  line-height: 1.65;
  margin: 0 0 0.95rem;
}

.policy-lead {
  font-size: 1.05rem;
  color: rgba(255,255,255,0.9) !important;
}

.policy-note {
  background: rgba(143,213,222,0.10);
  border-left: 3px solid rgba(143,213,222,0.75);
  padding: 0.8rem 1rem;
}

.policy-table-wrap {
  overflow-x: auto;
  margin: 1rem 0 1.3rem;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.policy-table td {
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(218,235,250,0.84);
  line-height: 1.5;
  padding: 0.8rem;
  vertical-align: top;
}

.policy-table td:first-child {
  color: #fff;
  font-weight: 700;
  width: 26%;
}

/* =============================================================
   REVEAL ANIMATIONS
   ============================================================= */
.reveal {
  opacity: 0;
  filter: blur(3px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0s),
              filter 0.55s ease var(--reveal-delay, 0s);
  will-change: transform, opacity;
}

.reveal.visible {
  opacity: 1;
  filter: blur(0);
}

/* reveal-left/right keep their slide-in transform because they're applied
   to text blocks (.impact-copy) that don't get pointer-tilt */
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-left.visible  { transform: translateX(0); }
.reveal-right.visible { transform: translateX(0); }

/* =============================================================
   KEYFRAMES
   ============================================================= */
@keyframes ringPulse {
  0%, 100% { transform: scale(1); opacity: 0.38; }
  50% { transform: scale(1.055); opacity: 0.82; }
}

@keyframes corePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 44px rgba(143,213,222,0.30), 0 0 88px rgba(47,114,179,0.2); }
  50% { transform: scale(1.1); box-shadow: 0 0 66px rgba(143,213,222,0.40), 0 0 120px rgba(47,114,179,0.28); }
}

@keyframes tagFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(-9px) rotate(0.6deg); }
  70%  { transform: translateY(-5px) rotate(-0.4deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes dataPacket {
  0%       { opacity: 0; transform: translateX(-34px) scale(0.75); }
  14%, 86% { opacity: 1; transform: translateX(0) scale(1); }
  100%     { opacity: 0; transform: translateX(34px) scale(0.75); }
}

@keyframes alertPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255,80,80,0.8); }
  50%      { opacity: 0.45; box-shadow: 0 0 2px rgba(255,80,80,0.3); }
}

@keyframes metricPop {
  0%   { transform: translateY(0) scale(1); }
  45%  { transform: translateY(-5px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes heatmapIn {
  to { opacity: 1; transform: scale(1); }
}

@keyframes iosShine {
  from { transform: translateX(-64%) rotate(8deg); }
  to   { transform: translateX(64%)  rotate(8deg); }
}


/* Metric pop on counter complete */
.metric.is-counted {
  animation: metricPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   DEMO SECTION
   ============================================================= */
.demo-section {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: relative;
  overflow: hidden;
}

.demo-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(143,213,222,0.055) 0%, transparent 60%),
    linear-gradient(160deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 35%);
  pointer-events: none;
}

.demo-section .section-head h2 { color: var(--dark-text); }
.demo-section .section-head p { color: var(--dark-muted); }
.demo-section .section-head .eyebrow { color: var(--amber); }

.demo-player {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(4,16,30,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.07);
  aspect-ratio: 16 / 9;
  will-change: transform;
  transition: transform 140ms cubic-bezier(.2,.8,.2,1), box-shadow 300ms ease;
  transform:
    perspective(1000px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateZ(0);
}

.demo-player:hover {
  transform:
    perspective(1000px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translateY(-4px) scale(1.005);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 60px rgba(143,213,222,0.10);
}

.demo-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.demo-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  background: rgba(4,16,30,0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  transition: background 0.3s ease;
  cursor: pointer;
}

.demo-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.demo-play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.55);
  background: rgba(14,61,120,0.82);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  box-shadow: 0 8px 36px rgba(4,16,30,0.55), 0 0 0 12px rgba(14,61,120,0.18);
}

.demo-play-btn svg { margin-left: 4px; }

.demo-overlay:hover .demo-play-btn,
.demo-play-btn:hover {
  transform: scale(1.1);
  background: var(--primary-2);
  border-color: rgba(255,255,255,0.8);
}

.demo-label {
  color: rgba(218,235,250,0.82);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.demo-caption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: center;
  align-items: center;
  padding: 0.9rem 1.5rem;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(190,215,236,0.1);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.demo-caption-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: rgba(190,215,236,0.72);
  font-size: 0.82rem;
  font-weight: 600;
}

.demo-caption-item svg { stroke: var(--vivid); flex-shrink: 0; }

/* =============================================================
   TRUST BAR
   ============================================================= */
.trust-bar {
  margin-top: -3.25rem;
  background:
    linear-gradient(180deg, rgba(8,24,42,0.16) 0%, rgba(4,16,30,0.72) 100%),
    rgba(255,255,255,0.075);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid rgba(143,213,222,0.17);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding: 1rem 0 1.15rem;
  position: relative;
  overflow: hidden;
  z-index: 4;
  box-shadow:
    0 -36px 90px rgba(143,213,222,0.075),
    0 18px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.18);
}

.trust-bar::after {
  content: "";
  position: absolute;
  inset: -80px 0 auto;
  height: 120px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(143,213,222,0.15), transparent 62%);
}

/* Specular shimmer on trust bar */
.trust-bar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(143,213,222,0.23) 20%,
    rgba(255,255,255,0.62) 50%,
    rgba(143,213,222,0.23) 80%,
    transparent
  );
  pointer-events: none;
}

.trust-bar-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  align-items: center;
}

.trust-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(200,228,250,0.82);
  font-size: 0.86rem;
  font-weight: 600;
}

.trust-bar-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--electric);
  opacity: 0.92;
  filter: drop-shadow(0 0 5px rgba(143,213,222,0.55));
}

.js .trust-bar-item {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 0.55s var(--ease-premium),
    transform 0.55s var(--ease-premium);
}
.js .trust-bar-item.is-visible {
  opacity: 1;
  transform: none;
}

.demo-coming-soon {
  color: rgba(218,235,250,0.85);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  padding: 1rem 1.5rem;
}

/* =============================================================
   SCROLL-TO-TOP BUTTON
   ============================================================= */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 90;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(190,215,236,0.22);
  background: rgba(14,61,120,0.9);
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 20px rgba(4,16,30,0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s;
  pointer-events: none;
}

.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.scroll-top:hover {
  background: var(--primary-2);
  transform: translateY(-3px);
}

/* =============================================================
   RESPONSIVE — 1080px
   ============================================================= */
@media (max-width: 1080px) {
  .hero-grid,
  .why-grid,
  .cta-wrap { grid-template-columns: 1fr; }

  .value-grid { grid-template-columns: repeat(2, 1fr); }

  .architecture-board {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .arch-flow {
    min-height: 40px;
    transform: rotate(90deg);
  }

  .architecture-boundary strong {
    top: auto;
    right: 1.2rem;
    bottom: -0.72rem;
  }

  .hero-visual { min-height: 360px; }

  .dashboard-grid { grid-template-columns: 1fr; }
  .store-summary { grid-template-columns: 1fr; }
  .performance-content { grid-template-columns: 1fr; }
  .performance-breakdown { grid-template-columns: repeat(2, 1fr); }
  .dashboard-heatmap { grid-column: span 1; overflow-x: auto; }
  .heatmap-grid { overflow-x: auto; padding-bottom: 0.5rem; min-width: 720px; }
}

@media (max-width: 900px) {
  .solutions-grid { grid-template-columns: 1fr; }
  .nav-brand-name { display: none; }
  .trust-bar-inner { justify-content: flex-start; gap: 0.6rem 1.5rem; }
}

/* =============================================================
   RESPONSIVE — 760px
   ============================================================= */
@media (max-width: 760px) {
  :root { --header-h: 80px; }

  .container { width: min(100% - 2rem, 1160px); }

  h1 { font-size: clamp(2.35rem, 13vw, 3.6rem); line-height: 0.98; }
  h2 { font-size: clamp(1.85rem, 9.5vw, 2.65rem); line-height: 1.02; }
  h3 { font-size: clamp(1.1rem, 6vw, 1.45rem); }

  .lead {
    font-size: 1rem;
    line-height: 1.58;
  }

  .section-head { margin-bottom: 1.8rem; }

  .journey-scene { display: none; }

  .journey-node {
    width: 84px;
    border-radius: 14px;
  }

  .journey-plane--floor {
    background-size: 64px 64px, 64px 64px, 100% 100%;
  }

  .nav-wrap { min-height: 86px; padding: 0.45rem 0; }

  .nav-brand-shell {
    width: 72px;
    height: 72px;
  }

  .nav-brand-shell { border-radius: 11px; padding: 4px 3px; }

  nav[aria-label="Primary"],
  .btn-outline { display: none; }

  .nav-toggle { display: inline-flex; }

  .mobile-nav {
    inset: 70px 0 0;
    padding: 1rem;
    overflow-y: auto;
  }

  .mobile-nav a {
    min-height: 48px;
    border-radius: 8px;
  }

  .mobile-nav .btn {
    width: 100%;
    justify-content: center;
    margin-top: 1rem;
  }

  .section { padding: 4.5rem 0; }

  .value-grid,
  .metrics,
  .solutions-grid,
  .feature-grid,
  .performance-breakdown { grid-template-columns: 1fr; }

  .hero {
    min-height: auto;
    padding-top: 6.25rem;
    padding-bottom: 4.25rem;
  }

  .hero-depth {
    opacity: 0.24;
    background-size: 54px 54px, 54px 54px, 100% 100%;
  }

  .country-badge {
    max-width: 100%;
    flex-wrap: wrap;
    border-radius: 14px;
    gap: 0.35rem 0.45rem;
    font-size: 0.72rem;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin: 1.4rem 0;
  }

  .hero-actions .btn,
  .contact-form-block .btn {
    width: 100%;
    min-height: 48px;
  }

  .trust-inline { gap: 0.45rem; }

  .trust-inline span {
    font-size: 0.76rem;
    padding: 0.32rem 0.65rem;
  }

  .hero-visual { min-height: 290px; }

  .why-grid, .cta-wrap { padding: 1.6rem 1rem; }

  .cta-wrap {
    border-radius: 18px;
    gap: 1.35rem;
  }

  .brand-logo-shell { width: 99px; height: 99px; }
  .brand-text { max-width: 160px; font-size: 0.71rem; }

  .footer-wrap { flex-direction: column; align-items: flex-start; }
  .trust-bar-item { font-size: 0.8rem; }
  .scroll-top { bottom: 1.25rem; right: 1.25rem; }
  .demo-play-btn { width: 60px; height: 60px; }
  .demo-caption { gap: 0.4rem 1rem; padding: 0.75rem 1rem; }
  .demo-caption-item { font-size: 0.76rem; }

  .dashboard-toolbar,
  .performance-header { align-items: flex-start; flex-direction: column; }

  .dashboard-toolbar > div:last-child { width: 100%; }
  .dashboard-toolbar button { flex: 1; }

  .performance-chart,
  .performance-chart canvas { min-height: 330px; height: 330px; }

}

/* =============================================================
   CONTACT FORM
   ============================================================= */
.contact-form-block {
  background: rgba(4,12,28,0.52);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  padding: 1.6rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 32px rgba(0,0,0,0.28);
}

.contact-info {
  margin-bottom: 1.1rem;
}

.contact-info p { color: rgba(218,235,250,0.88); margin: 0 0 0.35rem; font-size: 0.9rem; }
.contact-info strong { color: #fff; }
.contact-info a { color: rgba(218,235,250,0.88); text-decoration: none; }
.contact-info a:hover { color: #fff; }

.consent-field {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: flex-start;
  color: rgba(218,235,250,0.86);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0.25rem 0 0.95rem;
}

.consent-field input {
  width: 18px;
  height: 18px;
  margin-top: 0.1rem;
  accent-color: var(--cyan);
}

.consent-field a {
  color: #8fd5de;
  font-weight: 700;
  text-decoration: none;
}

.consent-field a:hover { color: #fff; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  margin-bottom: 0.85rem;
}

.form-field label {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.form-field input,
.form-field textarea {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 10px;
  padding: 0.72rem 1rem;
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  width: 100%;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.15);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.08);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255,255,255,0.38);
}

.form-field textarea { resize: vertical; min-height: 88px; }

.contact-form-block .btn {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.32);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 4px 16px rgba(0,0,0,0.22);
}

.contact-form-block .btn:hover,
.contact-form-block .btn:focus-visible {
  background: rgba(255,255,255,0.26);
  border-color: rgba(255,255,255,0.48);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), 0 8px 24px rgba(0,0,0,0.28);
}

.form-success {
  color: #19a974;
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 0.6rem;
}

.form-error {
  color: var(--danger);
  font-weight: 600;
  font-size: 0.88rem;
  margin-top: 0.6rem;
}

@media (max-width: 760px) {
  .form-row { grid-template-columns: 1fr; }

  .cookie-consent {
    bottom: 0;
    width: 100%;
    padding: 0;
  }

  .cookie-consent-card {
    grid-template-columns: 1fr;
    padding: 1rem;
  }

  .cookie-copy-head,
  .cookie-preferences-head {
    flex-wrap: wrap;
  }

  .cookie-actions {
    justify-content: stretch;
  }

  .cookie-actions .btn {
    flex: 1 1 100%;
  }

  .cookie-option {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .policy-main {
    padding-top: 6rem;
  }

  .contact-form-block {
    padding: 1rem;
    border-radius: 14px;
  }

  .form-field input,
  .form-field textarea {
    min-height: 46px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .container { width: min(100% - 1.25rem, 1160px); }

  .section { padding: 3.5rem 0; }

  .eyebrow {
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    line-height: 1.25;
  }

  .hero {
    padding-top: 5.7rem;
    padding-bottom: 3.6rem;
  }

  .hero-copy h1 { margin-bottom: 0.9rem; }

  .country-badge span:not(.mini-flag) + span:not(.mini-flag)::before {
    margin-right: 0.35rem;
  }

  .btn {
    min-height: 46px;
    padding: 0.72rem 1rem;
  }

  .trust-inline span {
    flex: 1 1 calc(50% - 0.45rem);
    text-align: center;
  }

  .partners-grid { gap: 0.85rem; }

  .partner-card {
    min-height: 132px;
    padding: 1.25rem 1rem;
    border-radius: 14px;
  }

  .contact-email-link {
    font-size: 1rem;
    line-height: 1.25;
  }

  .contact-phone-link { font-size: 0.95rem; }

  .demo-player { border-radius: 14px; }

  .demo-caption { align-items: flex-start; }
}

/* =============================================================
   ROMANIA MAP SECTION
   ============================================================= */
.map-section {
  background: #020b18;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: relative;
  overflow: hidden;
}

.map-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 60%, rgba(143,213,222,0.045) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 80% 30%, rgba(167,139,250,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 40% at 55% 80%, rgba(251,191,36,0.04) 0%, transparent 50%);
  pointer-events: none;
}

.map-section::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(143,213,222,0.30) 25%, rgba(167,139,250,0.4) 60%, rgba(251,191,36,0.3) 85%, transparent 100%);
  pointer-events: none;
}

.map-section .section-head { position: relative; z-index: 1; }
.map-section .eyebrow { color: var(--amber); }
.map-section h2 { color: var(--dark-text); }
.map-section .section-head p { color: var(--dark-muted); }

/* ── Auchan banner — Apple liquid glass ── */
.auchan-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 3rem;
  padding: 1.6rem 2.2rem;
  border-radius: 24px;
  overflow: hidden;
  /* Apple liquid glass: ultra-blur + subtle tint */
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(60px) saturate(200%) brightness(1.08);
  -webkit-backdrop-filter: blur(60px) saturate(200%) brightness(1.08);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow:
    /* outer glow — red brand hue */
    0 0 0 1px rgba(226,0,26,0.12),
    0 8px 16px rgba(0,0,0,0.3),
    0 32px 72px rgba(0,0,0,0.4),
    /* inner edge highlight — Apple glass feel */
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(0,0,0,0.15),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset -1px 0 0 rgba(255,255,255,0.05);
}

/* Specular top-left shimmer — core of Apple liquid glass */
.auchan-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(
    160deg,
    rgba(255,255,255,0.14) 0%,
    rgba(255,255,255,0.06) 35%,
    rgba(255,255,255,0) 60%
  );
  pointer-events: none;
  z-index: 1;
}

/* Bottom refraction edge */
.auchan-banner::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 30%, rgba(226,0,26,0.2) 55%, rgba(255,255,255,0.08) 80%, transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Synapse canvas lives behind all content */
.synapse-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  border-radius: 24px;
}

/* All direct children sit above canvas */
.auchan-banner > *:not(.synapse-canvas) {
  position: relative;
  z-index: 2;
}

/* Logo block */
.auchan-logo-block {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
}

.auchan-logo-img {
  height: 48px;
  width: auto;
  /* White logo bg removed via CSS — multiply blend on dark bg */
  border-radius: 8px;
  filter: drop-shadow(0 2px 12px rgba(226,0,26,0.45));
}

.auchan-country-pill {
  display: inline-block;
  padding: 0.25rem 0.72rem;
  border-radius: 999px;
  background: rgba(226,0,26,0.15);
  border: 1px solid rgba(226,0,26,0.3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #ff4455;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
}

.auchan-banner-sep {
  width: 1px;
  height: 52px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.15), transparent);
  flex-shrink: 0;
}

.auchan-banner-stats {
  display: flex;
  gap: 1.8rem;
  flex-shrink: 0;
}

.auchan-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

.auchan-stat-item strong {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--dark-text);
  line-height: 1;
}

.auchan-stat-item span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dark-muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.auchan-partner-badge {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.28rem;
  flex-shrink: 0;
}

.auchan-partner-label {
  display: inline-block;
  padding: 0.24rem 0.78rem;
  border-radius: 999px;
  /* Apple glass pill */
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.18);
}

.auchan-partner-desc {
  font-size: 0.76rem;
  color: var(--dark-muted);
  padding-right: 0.1rem;
}

/* ── Map showcase ── */
.map-showcase {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2.5rem;
  align-items: start;
}

.map-container {
  --map-rx: 0deg;
  --map-ry: 0deg;
  --map-glow-x: 50%;
  --map-glow-y: 50%;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 600 / 457;
  box-shadow:
    0 0 0 1px rgba(143,213,222,0.10),
    0 32px 80px rgba(0,0,0,0.6),
    0 0 80px rgba(143,213,222,0.04);
  transform: perspective(900px) rotateX(var(--map-rx)) rotateY(var(--map-ry)) translateZ(0);
  transform-style: preserve-3d;
  transition: transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}

.map-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #020b18;
  z-index: 0;
}

.map-container::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--map-glow-x) var(--map-glow-y), rgba(226,242,252,0.20) 0%, rgba(143,213,222,0.06) 18%, transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,0.16), transparent 38%, rgba(143,213,222,0.07) 72%, transparent),
    radial-gradient(ellipse 80% 60% at 55% 65%, rgba(143,213,222,0.025) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* PNG map: invert + hue-rotate so white bg becomes transparent-looking on dark,
   and the dark blue border glows cyan */
.romania-map-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: invert(1) hue-rotate(165deg) brightness(1.8) saturate(4) contrast(1.2);
  mix-blend-mode: screen;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.pins-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  transform: translateZ(46px);
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.34));
}

/* GPAI pins (cyan) */
.gpai-pin {
  fill: #8fd5de;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 4px rgba(143,213,222,0.76));
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175,0.885,0.32,1.275);
}

.gpai-pin.is-lit {
  opacity: 0.88;
  transform: scale(1);
}

/* Analytics pins (purple rings) */
.analytics-pin {
  fill: none;
  stroke: #a78bfa;
  stroke-width: 2;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px rgba(167,139,250,0.95));
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275);
}

.analytics-pin.is-lit { opacity: 1; transform: scale(1); }

@keyframes analyticsPulse {
  0%, 100% { stroke-opacity: 1; transform: scale(1); }
  50% { stroke-opacity: 0.35; transform: scale(1.35); }
}

.analytics-pin.is-pulsing {
  animation: analyticsPulse 2.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

/* Planogram pins (gold) */
.planogram-pin {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 2;
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 6px rgba(251,191,36,1));
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275);
}

.planogram-pin.is-lit { opacity: 1; transform: scale(1); }

@keyframes planogramPulse {
  0%, 100% { stroke-opacity: 1; transform: scale(1); }
  50% { stroke-opacity: 0.25; transform: scale(1.45); }
}

.planogram-pin.is-pulsing {
  animation: planogramPulse 2.5s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

#planRingOuter.is-lit {
  opacity: 0.5;
  animation: planRingRotate 14s linear infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes planRingRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#planRingInner.is-lit { opacity: 0.35; }

.city-label {
  font-size: 8.5px;
  font-family: var(--font-body);
  font-weight: 700;
  fill: #fbbf24;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
}

.analytics-glow { transition: opacity 0.6s ease; }

/* Map legend */
.map-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: rgba(2,11,24,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.map-legend.is-visible { opacity: 1; transform: translateY(0); }

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(218,235,250,0.7);
  white-space: nowrap;
}

.legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Liquid glass map cards — Apple visionOS style ── */
.map-cards {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding-top: 0.5rem;
}

.map-card.glass-card {
  padding: 1.6rem 1.75rem;
  border-radius: 24px;
  border: 0.5px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translate3d(28px, 0, 0);
  transition:
    opacity 0.55s var(--ease-premium),
    transform 160ms cubic-bezier(.2,.8,.2,1),
    box-shadow 300ms ease,
    background 300ms ease,
    border-color 300ms ease;
  will-change: transform, opacity;
}

/* iOS shine sweep */
.map-card.glass-card::before {
  content: "";
  position: absolute;
  inset: -62%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 34%,
    rgba(255,255,255,0.08) 40%,
    rgba(255,255,255,0.94) 47%,
    rgba(255,255,255,0.20) 53%,
    transparent 63%
  );
  transform: translateX(-64%) rotate(8deg);
  transition: opacity 220ms ease;
}

/* Inner gloss */
.map-card.glass-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(255,255,255,0.54), transparent 24%),
    radial-gradient(90% 80% at 88% 100%, rgba(255,255,255,0.14), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.25), transparent 38%, rgba(255,255,255,0.10));
  opacity: 0.7;
}

.map-card.glass-card.is-visible {
  opacity: 1;
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translate3d(0, 0, 0);
}

.map-card.glass-card:hover,
.map-card.glass-card:focus-visible {
  transform:
    perspective(700px)
    rotateX(calc(var(--tilt-x) * 1deg))
    rotateY(calc(var(--tilt-y) * 1deg))
    translate3d(-2px, -6px, 0) scale(1.012);
  border-color: var(--glass-border-hover);
  background: var(--glass-bg-hover);
  box-shadow:
    var(--glass-shadow-hover),
    0 0 50px var(--mc-glow, rgba(143,213,222,0.13));
}

.map-card.glass-card:hover::before,
.map-card.glass-card:focus-visible::before {
  opacity: 1;
  animation: iosShine 900ms cubic-bezier(.2,.8,.2,1) forwards;
}

.map-card.glass-card:active { transform: translate3d(-1px, -1px, 0) scale(0.982); }

.map-card.glass-card:not(.is-visible):hover { transform: translate3d(28px, 0, 0); }
.map-card.glass-card:not(.is-visible):hover::before { animation: none; opacity: 0; }

.map-cards .map-card:nth-child(2) { transition-delay: 0.15s; }
.map-cards .map-card:nth-child(3) { transition-delay: 0.3s; }

.map-card-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.55rem;
  position: relative;
  z-index: 1;
}

.map-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-card h3 {
  font-size: 0.98rem;
  color: var(--dark-text);
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.map-card p {
  color: var(--dark-muted);
  font-size: 0.84rem;
  margin: 0;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.map-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.7rem;
  padding: 0.26rem 0.7rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--mc-accent, #8fd5de);
  position: relative;
  z-index: 1;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.map-stat::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mc-accent, #8fd5de);
  box-shadow: 0 0 5px currentColor;
  flex-shrink: 0;
}

@media (max-width: 1080px) {
  .map-showcase { grid-template-columns: 1fr; gap: 2rem; }
  .map-container { max-width: 520px; margin: 0 auto; }
  .map-cards { grid-template-columns: repeat(3, 1fr); }
  .auchan-banner { flex-wrap: wrap; gap: 1.2rem; }
  .auchan-banner-sep { display: none; }
  .auchan-partner-badge { margin-left: 0; }
}

@media (max-width: 760px) {
  .map-showcase {
    gap: 1.25rem;
  }

  .map-container {
    width: min(100%, calc(100vw - 2rem));
    max-width: 430px;
    margin: 0 auto;
    border-radius: 14px;
    overflow: visible;
    box-shadow:
      0 0 0 1px rgba(143,213,222,0.10),
      0 18px 44px rgba(0,0,0,0.48);
  }

  .romania-map-img,
  .pins-overlay {
    border-radius: 14px;
  }

  .gpai-pin {
    r: 6;
  }

  .analytics-pin,
  .planogram-pin {
    stroke-width: 2.4;
  }

  .city-label {
    font-size: 10px;
  }

  .map-legend {
    position: static;
    margin-top: 0.75rem;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 10px;
    padding: 0.65rem;
    opacity: 1;
    transform: none;
  }

  .legend-item {
    font-size: 0.68rem;
  }

  .map-cards { grid-template-columns: 1fr; }

  .map-card.glass-card {
    padding: 1.15rem;
    border-radius: 16px;
    transform: translate3d(0, 18px, 0);
  }

  .auchan-banner {
    padding: 1rem;
    gap: 1rem;
    border-radius: 16px;
  }

  .auchan-logo-block {
    width: 100%;
    justify-content: space-between;
  }

  .auchan-logo-img {
    max-width: 155px;
    height: auto;
  }

  .auchan-banner-stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
  }

  .auchan-stat-item strong {
    font-size: 1.45rem;
  }

  .auchan-stat-item span {
    white-space: normal;
    text-align: center;
    line-height: 1.2;
  }

  .auchan-partner-badge {
    width: 100%;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .map-section .section-head {
    margin-bottom: 1.4rem;
  }

  .map-container {
    width: min(100%, calc(100vw - 1.25rem));
    max-width: 360px;
  }

  .map-legend {
    justify-content: flex-start;
  }

  .legend-item {
    flex: 1 1 100%;
  }

  .auchan-banner-stats {
    gap: 0.5rem;
  }

  .auchan-stat-item strong {
    font-size: 1.28rem;
  }
}