/* IDPROIT SRL - European consulting design system
   Restrained, premium, intentional · pure static · dual-mode · light/dark a11y */

.u-offscreen-hit {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

:root {
  /* Structural tokens (theme-independent) */
  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
  --max: 1120px;
  --nap-h: 36px;
  --bar-h: 96px;
  --touch: 44px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.25, 0.1, 0.25, 1);
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.5rem;
  --space-7: 4rem;
  --space-8: 5.5rem;
  --mode-transition: background 0.35s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  /* Default = dark SMB (overridden by data-theme + FOUC script) */
  --bg: #070c0a;
  --bg-2: #0c1411;
  --bg-3: #111c18;
  --bg-card: rgba(14, 28, 24, 0.92);
  --bg-elev: #152420;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shine: rgba(255, 255, 255, 0.05);
  --text: #f2f7f4;
  --muted: #b4c5bd;
  --faint: #8a9d94;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #2dd4a8;
  --accent-2: #5ee4c0;
  --accent-3: #a7f0d8;
  --accent-deep: #0f766e;
  --on-accent: #042f2e;
  --glow: rgba(45, 212, 168, 0.16);
  --glow-soft: rgba(45, 212, 168, 0.1);
  --danger: #f87171;
  --shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-glow: 0 16px 40px rgba(0, 0, 0, 0.3);
  --hud-bg: rgba(0, 0, 0, 0.55);
  --canvas-bg: #040c0a;
  color-scheme: dark;
}

/* -- Dark theme · SMB (default) -- */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070c0a;
  --bg-2: #0c1411;
  --bg-3: #111c18;
  --bg-card: rgba(14, 28, 24, 0.92);
  --bg-elev: #152420;
  --glass: rgba(255, 255, 255, 0.04);
  --glass-strong: rgba(255, 255, 255, 0.07);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-shine: rgba(255, 255, 255, 0.05);
  --text: #f2f7f4;
  --muted: #b4c5bd;
  --faint: #8a9d94;
  --line: rgba(255, 255, 255, 0.12);
  --accent: #2dd4a8;
  --accent-2: #5ee4c0;
  --accent-3: #a7f0d8;
  --accent-deep: #0f766e;
  --on-accent: #042f2e;
  --glow: rgba(45, 212, 168, 0.16);
  --glow-soft: rgba(45, 212, 168, 0.1);
  --danger: #f87171;
  --shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.28);
  --hud-bg: rgba(0, 0, 0, 0.55);
  --canvas-bg: #040c0a;
}

/* -- Light theme · SMB (WCAG AA body text + solid cards) -- */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f8f6;
  --bg-2: #eef4f1;
  --bg-3: #e4ece8;
  --bg-card: rgba(255, 255, 255, 0.96);
  --bg-elev: #ffffff;
  --glass: rgba(15, 40, 32, 0.03);
  --glass-strong: rgba(15, 40, 32, 0.06);
  --glass-border: rgba(15, 40, 32, 0.12);
  --glass-shine: rgba(255, 255, 255, 0.8);
  --text: #0c1a15; /* ~16.7:1 on --bg - AAA */
  --muted: #3a4f47; /* ~8.2:1 on --bg - AAA body */
  --faint: #4d6159; /* tightened from #5a6e65 for AA+ on light plates */
  --line: rgba(15, 40, 32, 0.12);
  /* Interactive accent: deep enough for large text / UI (3:1+); body copy uses --text/--muted */
  --accent: #0b7a62;
  --accent-2: #0a6b56;
  --accent-3: #085544;
  --accent-deep: #0f766e;
  --on-accent: #ffffff;
  --glow: rgba(13, 143, 114, 0.12);
  --glow-soft: rgba(13, 143, 114, 0.08);
  --danger: #b91c1c;
  --shadow: 0 20px 40px rgba(12, 30, 24, 0.08);
  --shadow-sm: 0 6px 18px rgba(12, 30, 24, 0.08);
  --shadow-glow: 0 12px 32px rgba(13, 143, 114, 0.1);
  --hud-bg: rgba(255, 255, 255, 0.88);
  --canvas-bg: #e8f2ee;
}

/* -- Enterprise gold accents (dark) - metallic, luminous -- */
html[data-theme="dark"] body[data-mode="enterprise"],
body[data-mode="enterprise"] {
  --bg: #0b0a07;
  --bg-2: #12100c;
  --bg-3: #1c1810;
  --bg-card: rgba(30, 26, 16, 0.94);
  --bg-elev: #242018;
  --glass: rgba(255, 236, 180, 0.045);
  --glass-strong: rgba(255, 220, 140, 0.08);
  --glass-border: rgba(232, 196, 110, 0.22);
  --glass-shine: rgba(255, 248, 220, 0.12);
  --text: #faf6eb;
  --muted: #d0c4a8;
  --faint: #a89878;
  --line: rgba(232, 196, 110, 0.18);
  --accent: #e0b84a;
  --accent-2: #f0d078;
  --accent-3: #fff0b8;
  --accent-deep: #a67c1a;
  --on-accent: #1a1204;
  --glow: rgba(224, 184, 74, 0.28);
  --glow-soft: rgba(224, 184, 74, 0.14);
  --gold-shine: linear-gradient(
    125deg,
    #8a6a18 0%,
    #c9a227 18%,
    #f0d78c 38%,
    #fff6d0 50%,
    #e8c04a 62%,
    #b8860b 82%,
    #d4af37 100%
  );
  --gold-shine-soft: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.15),
    rgba(255, 240, 180, 0.35),
    rgba(212, 175, 55, 0.12)
  );
  --canvas-bg: #0c0a06;
  --shadow-glow: 0 12px 40px rgba(212, 175, 55, 0.18);
}

/* -- Enterprise gold · light - warm foil accents -- */
html[data-theme="light"] body[data-mode="enterprise"] {
  --bg: #fbf8f0;
  --bg-2: #f5f0e4;
  --bg-3: #ebe3d2;
  --bg-card: rgba(255, 253, 248, 0.98);
  --bg-elev: #ffffff;
  --glass: rgba(120, 90, 20, 0.04);
  --glass-strong: rgba(120, 90, 20, 0.07);
  --glass-border: rgba(154, 112, 32, 0.22);
  --glass-shine: rgba(255, 255, 255, 0.9);
  --text: #1a1508;
  --muted: #4a3f28;
  --faint: #6b5c3a;
  --line: rgba(154, 112, 32, 0.16);
  --accent: #b8860b;
  --accent-2: #9a7209;
  --accent-3: #7a5a08;
  --accent-deep: #8a7028;
  --on-accent: #1a1204;
  --glow: rgba(184, 134, 11, 0.18);
  --glow-soft: rgba(184, 134, 11, 0.1);
  --gold-shine: linear-gradient(
    125deg,
    #8a6810 0%,
    #c9a227 22%,
    #f0d070 42%,
    #fff3c4 52%,
    #d4af37 68%,
    #a67c12 100%
  );
  --gold-shine-soft: linear-gradient(
    135deg,
    rgba(184, 134, 11, 0.1),
    rgba(255, 230, 150, 0.35),
    rgba(184, 134, 11, 0.08)
  );
  --danger: #b91c1c;
  --shadow: 0 20px 40px rgba(60, 40, 8, 0.1);
  --shadow-sm: 0 6px 18px rgba(60, 40, 8, 0.08);
  --shadow-glow: 0 12px 36px rgba(184, 134, 11, 0.16);
  --hud-bg: rgba(255, 253, 246, 0.92);
  --canvas-bg: #f3efe4;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nap-h) + var(--bar-h) + 12px);
}
html.is-lang-switching {
  scroll-behavior: auto !important;
}

/* Touch / coarse pointer: native scroll inertia (smoother than CSS smooth) */
@media (hover: none), (pointer: coarse) {
  html { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  letter-spacing: -0.01em;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 800px 400px at 100% 0%, var(--glow-soft), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: var(--mode-transition);
}

body::before,
body::after { display: none; }

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

img { display: block; max-width: 100%; height: auto; }
canvas { display: block; }

::selection {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--text);
}

a {
  color: var(--accent-2);
  text-underline-offset: 3px;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--accent-3); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent);
  font-weight: 700;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-xs);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}
.skip-link:focus { top: 0.9rem; }

/* -- NAP -- */
.nap {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  align-items: center;
  justify-content: center;
  min-height: var(--nap-h);
  padding: 0.4rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--muted);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nap a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}
.nap a:hover { color: var(--accent-2); }
.nap-entity {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.nap-dot { opacity: 0.32; user-select: none; }

/* Phone / email / place icons */
.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: inherit;
  text-decoration: none;
  max-width: 100%;
}
.contact-link:hover {
  color: var(--accent-2);
}
.contact-icon {
  flex-shrink: 0;
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.9;
  color: var(--accent);
}
.nap .contact-icon {
  width: 0.85rem;
  height: 0.85rem;
}
.contact-link span {
  min-width: 0;
  overflow-wrap: anywhere;
}
a.contact-link--phone,
a.contact-link--email {
  color: var(--muted);
}
.nap a.contact-link--phone:hover,
.nap a.contact-link--email:hover {
  color: var(--accent-2);
}
.geo-hint {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
}

/* -- Top bar -- */
.topbar {
  position: sticky;
  top: var(--nap-h);
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: none;
}

.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  min-height: var(--bar-h);
  padding: 0 1.35rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

/*
 * Desktop: Services + mode on the main header line (between logo and actions).
 * Mobile: becomes a full-width second row with 3 equal columns.
 */
.topbar-secondary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  order: 2;
}
.topbar-inner > .logo { order: 1; }
.topbar-inner > .top-actions {
  order: 3;
  margin-left: auto;
}
.topbar-secondary .mode-switch {
  display: inline-grid;
  grid-template-columns: minmax(11.5rem, 1.35fr) minmax(8.75rem, 1fr);
  align-items: stretch;
  margin-left: 0;
  min-width: 20.5rem;
  max-width: 26rem;
  flex: 1 1 20.5rem;
}
.topbar-secondary .mode-btn {
  min-width: 0;
  align-items: center;
}
.topbar-secondary .mode-btn[data-mode="enterprise"] {
  min-width: 8.75rem;
}
.topbar-secondary .mode-label-full {
  display: none;
}
.topbar-secondary .mode-label-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
  text-align: left;
}
.topbar-secondary .mode-label-short {
  display: block;
  font-weight: 750;
  letter-spacing: -0.015em;
  line-height: 1.15;
  white-space: nowrap;
  color: inherit;
}
.topbar-secondary .mode-label-micro {
  display: block;
  font-size: 0.58rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--faint);
}
.topbar-secondary .mode-btn[data-mode="enterprise"] .mode-label-short,
.topbar-secondary .mode-btn[data-mode="enterprise"] .mode-label-full {
  white-space: nowrap;
}

/*
 * Compact Home - lives in .top-actions after theme toggle (not in Services row).
 * Sticky with topbar mid-page. Hidden on the home/hero page (logo is home).
 */
body:not(.services-smb-page):not(.services-enterprise-page):not(.legal-page):not(.article-geo-page) .nav-home-link {
  display: none !important;
}
.top-actions .nav-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 2.25rem;
  min-width: 0;
  height: var(--touch, 2.5rem);
  margin: 0;
  padding: 0 0.55rem;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.top-actions .nav-home-link:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-border));
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--accent));
  color: var(--text);
}
.top-actions .nav-home-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.top-actions .nav-home-label {
  pointer-events: none;
}

/* -- Services menu (match language menu: solid panel, no glass blur) -- */
.services-menu {
  position: relative;
  z-index: 70;
  flex-shrink: 0;
}
.services-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  min-width: 7.5rem;
  border: 1px solid var(--glass-border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.services-menu-btn:hover,
.services-menu.is-open .services-menu-btn {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent));
}
.services-menu-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.services-menu-label {
  flex: 1;
  text-align: left;
}
.services-menu-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
  flex-shrink: 0;
}
.services-menu.is-open .services-menu-chevron {
  transform: rotate(225deg) translateY(-1px);
}
.services-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 13.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  z-index: 80;
}
.services-menu-list[hidden] { display: none !important; }
.services-menu-list li { margin: 0; }
.services-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.75rem;
  border-radius: 7px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  outline: none;
  transition: background 0.15s var(--ease);
}
.services-menu-item:hover,
.services-menu-item:focus,
.services-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
  outline: none;
}
body[data-mode="smb"] .services-menu-item-smb {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-mode="enterprise"] .services-menu-item-ent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
body[data-mode="enterprise"] .services-menu-item-euai {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.svc-path-cta-secondary {
  display: inline-flex;
  margin-top: 0.55rem;
  font-size: 0.92em;
  opacity: 0.95;
}
.nav-svc-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-svc-dot-smb {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
}
.nav-svc-dot-ent {
  background: linear-gradient(145deg, #a67c12, #f0d070 50%, #d4af37);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.45);
}

/* -- Services path cards (mid-page conversion gateway) -- */
.services-paths .band-head { margin-bottom: 1.35rem; }
.svc-paths-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
}
.svc-path-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.35rem 1.4rem 1.25rem;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--glass-border);
  transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s;
  min-height: 100%;
  cursor: default;
}
/* Select card only when CTA link is hovered/focused (not whole card) */
.svc-path-card:has(.svc-path-cta:hover),
.svc-path-card:has(.svc-path-cta:focus-visible) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 12%, transparent);
}
.svc-path-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 3px;
}
.svc-path-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.svc-path-card h3 {
  margin: 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.svc-path-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
  flex: 1;
}
.svc-path-cta {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-2);
  text-decoration: none;
  cursor: pointer;
  align-self: flex-start;
}
.svc-path-smb:has(.svc-path-cta:hover),
.svc-path-smb:has(.svc-path-cta:focus-visible) {
  border-color: color-mix(in srgb, #10b981 45%, transparent);
}
.svc-path-ent:has(.svc-path-cta:hover),
.svc-path-ent:has(.svc-path-cta:focus-visible) {
  border-color: color-mix(in srgb, #d4af37 50%, transparent);
}
body[data-mode="smb"] .svc-path-smb {
  box-shadow: 0 0 0 1px color-mix(in srgb, #10b981 25%, transparent), var(--shadow-sm);
}
body[data-mode="enterprise"] .svc-path-ent {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), var(--shadow-sm);
}

.logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
  line-height: 1.1;
  flex-shrink: 0;
}
.logo-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* Free-standing shield mark - core stays sharp; only outer rim shines */
.logo-mark {
  position: relative;
  width: 72px;
  height: 88px;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
  pointer-events: none;
}
/* Full logo core: static, high readability (no brightness pulse) */
.logo-img-core {
  z-index: 1;
  filter: saturate(1.06) contrast(1.08) brightness(1.03)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
/* Outer shield rim only: animated metallic shine */
.logo-img-shine {
  z-index: 2;
}
/* Mode visibility - both core + shine for active palette */
.logo-img-smb.logo-img-core,
.logo-img-smb.logo-img-shine {
  opacity: 1;
  visibility: visible;
}
.logo-img-ent.logo-img-core,
.logo-img-ent.logo-img-shine {
  opacity: 0;
  visibility: hidden;
}
body[data-mode="enterprise"] .logo-img-smb.logo-img-core,
body[data-mode="enterprise"] .logo-img-smb.logo-img-shine {
  opacity: 0;
  visibility: hidden;
}
body[data-mode="enterprise"] .logo-img-ent.logo-img-core,
body[data-mode="enterprise"] .logo-img-ent.logo-img-shine,
.logo-img-ent.logo-img-core.is-visible,
.logo-img-ent.logo-img-shine.is-visible {
  opacity: 1;
  visibility: visible;
}
/* Shine animations - rim only (core never animated) */
.logo-img-smb.logo-img-shine {
  animation: logo-shield-shine-emerald 2.6s ease-in-out infinite;
}
body[data-mode="enterprise"] .logo-img-ent.logo-img-shine,
.logo-img-ent.logo-img-shine.is-visible {
  animation: logo-shield-shine-gold 2.8s ease-in-out infinite;
}
@keyframes logo-shield-shine-emerald {
  0%, 100% {
    opacity: 0.55;
    filter:
      brightness(1)
      drop-shadow(0 0 3px rgba(16, 185, 129, 0.35))
      drop-shadow(0 0 8px rgba(52, 211, 153, 0.25));
  }
  50% {
    opacity: 1;
    filter:
      brightness(1.35)
      drop-shadow(0 0 8px rgba(52, 211, 153, 0.85))
      drop-shadow(0 0 18px rgba(16, 185, 129, 0.55));
  }
}
@keyframes logo-shield-shine-gold {
  0%, 100% {
    opacity: 0.55;
    filter:
      brightness(1)
      drop-shadow(0 0 3px rgba(212, 175, 55, 0.4))
      drop-shadow(0 0 8px rgba(240, 208, 120, 0.28));
  }
  50% {
    opacity: 1;
    filter:
      brightness(1.4)
      drop-shadow(0 0 10px rgba(255, 230, 140, 0.9))
      drop-shadow(0 0 20px rgba(212, 175, 55, 0.55));
  }
}
.logo:hover .logo-word { color: var(--accent-2); }
/* Shine hover boost - not for light-theme Enterprise gold (stays stable for readability) */
.logo:hover .logo-img-shine:not(.logo-img-ent) {
  filter:
    brightness(1.45)
    drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 65%, transparent));
}
html[data-theme="dark"] body[data-mode="enterprise"] .logo:hover .logo-img-ent.logo-img-shine,
html[data-theme="dark"] .logo:hover .logo-img-ent.logo-img-shine.is-visible {
  filter:
    brightness(1.45)
    drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 65%, transparent));
}

/*
 * Light theme + Enterprise gold:
 * - Core uses flat-monogram light asset (shield keeps metallic multi-tone)
 * - No drop-shadow / multi-yellow filter on the inscription
 * Emerald / SMB unchanged. Dark theme keeps original multi-tone gold asset.
 */
.logo-img-ent.logo-img-core-light {
  opacity: 0 !important;
  visibility: hidden !important;
}
html[data-theme="light"] body[data-mode="enterprise"] .logo-img-ent.logo-img-core-default,
html[data-theme="light"] .logo-img-ent.logo-img-core-default.is-visible {
  opacity: 0 !important;
  visibility: hidden !important;
}
html[data-theme="light"] body[data-mode="enterprise"] .logo-img-ent.logo-img-core-light,
html[data-theme="light"] .logo-img-ent.logo-img-core-light.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  /* Flat, readable gold monogram - no shadow stack */
  filter: none;
}
html[data-theme="light"] body[data-mode="enterprise"] .logo:hover .logo-img-ent.logo-img-core-light,
html[data-theme="light"] .logo:hover .logo-img-ent.logo-img-core-light.is-visible {
  filter: none;
}
/* Shield rim only may still breathe lightly; keep soft (no harsh multi-yellow core) */
html[data-theme="light"] body[data-mode="enterprise"] .logo-img-ent.logo-img-shine,
html[data-theme="light"] .logo-img-ent.logo-img-shine.is-visible {
  animation: logo-shield-shine-gold-light 2.8s ease-in-out infinite;
}
@keyframes logo-shield-shine-gold-light {
  0%, 100% {
    opacity: 0.4;
    filter: brightness(1) saturate(1.05);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.12) saturate(1.1);
  }
}
html[data-theme="light"] body[data-mode="enterprise"] .logo:hover .logo-img-ent.logo-img-shine,
html[data-theme="light"] .logo:hover .logo-img-ent.logo-img-shine.is-visible {
  filter: unset;
  animation: logo-shield-shine-gold-light 2.8s ease-in-out infinite;
}

.logo-word {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.16em;
  color: var(--text);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.logo-legal {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 2px;
}
/* Header shows brand suffix SRL; footer keeps legal S.R.L. */

.mode-switch {
  display: inline-flex;
  margin-left: auto;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--bg-elev);
}
.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s;
  max-width: 100%;
  line-height: 1.25;
  text-align: left;
}
.mode-btn span:not(.mode-swatch):not(.mode-label-short) {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.mode-btn[data-mode="enterprise"] .mode-label-full,
.mode-btn[data-mode="enterprise"] .mode-label-short {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
}
/* Desktop: full labels. Mobile: short + micro stack (premium segmented control) */
.mode-label-stack { display: none; }
.mode-label-short { display: none; }
.mode-label-micro { display: none; }
.mode-label-full { display: inline; }
.mode-btn:hover { color: var(--text); }
.mode-btn.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  box-shadow: none;
}
.mode-swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* No permanent will-change - only promote while visible-desktop animating */
}
/* Star-like constant pulse (both modes always live, like globe stars) */
@keyframes mode-swatch-emerald-pulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(0.92);
    filter: brightness(0.95);
    box-shadow:
      0 0 0 0 rgba(16, 185, 129, 0.15),
      0 0 4px rgba(16, 185, 129, 0.35);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    filter: brightness(1.25);
    box-shadow:
      0 0 0 3px rgba(16, 185, 129, 0.12),
      0 0 12px rgba(52, 211, 153, 0.85),
      0 0 20px rgba(16, 185, 129, 0.45);
  }
}
@keyframes mode-swatch-gold-pulse {
  0%, 100% {
    opacity: 0.75;
    transform: scale(0.92);
    filter: brightness(0.95);
    box-shadow:
      0 0 0 1px rgba(255, 240, 180, 0.25),
      0 0 5px rgba(212, 175, 55, 0.35);
  }
  50% {
    opacity: 1;
    transform: scale(1.18);
    filter: brightness(1.3);
    box-shadow:
      0 0 0 3px rgba(255, 248, 220, 0.18),
      0 0 12px rgba(255, 220, 120, 0.9),
      0 0 22px rgba(212, 175, 55, 0.55);
  }
}
.mode-swatch-smb {
  background: #10b981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  animation: mode-swatch-emerald-pulse 2.4s ease-in-out infinite;
}
.mode-swatch-ent {
  background: linear-gradient(145deg, #a67c12 0%, #f0d070 45%, #fff6d0 55%, #d4af37 100%);
  box-shadow: 0 0 0 1px rgba(255, 240, 180, 0.35), 0 0 10px rgba(212, 175, 55, 0.45);
  animation: mode-swatch-gold-pulse 2.9s ease-in-out infinite;
  animation-delay: 0.35s; /* offset so dots twinkle out of phase like stars */
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

/* -- Theme toggle (sun / moon) -- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  min-height: var(--touch);
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  background: color-mix(in srgb, var(--bg-elev) 88%, var(--accent));
  color: var(--accent-2);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.theme-toggle .theme-icon {
  width: 1.2rem;
  height: 1.2rem;
  display: none;
}
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html:not([data-theme]) .theme-toggle .icon-sun { display: block; }
.theme-toggle svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -- Language menu (full names visible) -- */
.lang-menu {
  position: relative;
  z-index: 70;
}
.lang-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 9.5rem;
  border: 1px solid var(--glass-border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.lang-menu-btn:hover,
.lang-menu.is-open .lang-menu-btn {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  background: color-mix(in srgb, var(--bg-elev) 90%, var(--accent));
}
.lang-menu-code {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.04em;
  color: var(--accent);
  min-width: 1.5rem;
}
.lang-menu-current {
  flex: 1;
  text-align: left;
  white-space: nowrap;
}
.lang-menu-chevron {
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s var(--ease);
  flex-shrink: 0;
}
.lang-menu.is-open .lang-menu-chevron {
  transform: rotate(225deg) translateY(-1px);
}
.lang-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 13.5rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--bg-elev);
  box-shadow: var(--shadow);
  z-index: 80;
}
.lang-menu-list[hidden] { display: none !important; }
.lang-menu-list [role="option"] {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  outline: none;
  transition: background 0.15s var(--ease);
}
.lang-menu-list [role="option"]:hover,
.lang-menu-list [role="option"]:focus {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.lang-menu-list [role="option"].is-active,
.lang-menu-list [role="option"][aria-selected="true"] {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.lang-menu-list [role="option"].is-active .lang-opt-name::after,
.lang-menu-list [role="option"][aria-selected="true"] .lang-opt-name::after {
  content: "✓";
  margin-left: auto;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}
.lang-opt-code {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 650;
  color: var(--faint);
  min-width: 1.4rem;
}
.lang-opt-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
}

/* -- Buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  border-radius: 8px;
  padding: 0.7rem 1.2rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s var(--ease), border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: var(--accent-2);
  color: var(--on-accent);
  filter: none;
  box-shadow: 0 8px 24px var(--glow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--glass-border);
}
.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent-2);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: none;
}

/* -- Hero -- */
.hero {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) 1.35rem var(--space-6);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 2.5rem;
  align-items: center;
}

.eyebrow {
  margin: 0 0 1rem;
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}
.eyebrow::before { display: none; }

.hero h1 {
  margin: 0 0 1.15rem;
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 650;
  text-wrap: balance;
  color: var(--text);
  background: none;
  -webkit-text-fill-color: unset;
}
.hero-h1-claim {
  display: none;
  margin-top: 0.18em;
}
body[data-mode="enterprise"] .hero-h1-claim:not(:empty) {
  display: block;
  color: color-mix(in srgb, var(--accent) 42%, var(--text));
  font-weight: 550;
}
.hero-platform {
  display: none;
  margin: 0 0 1.6rem;
  max-width: 38rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.65;
  font-weight: 550;
}
.hero-platform:not(:empty) {
  display: block;
}
.hero:has(.hero-platform:not(:empty)) .lead {
  margin-bottom: 0.55rem;
}

.lead {
  margin: 0 0 1.6rem;
  color: var(--muted);
  font-size: 1.125rem;
  line-height: 1.75;
  max-width: 38rem;
  text-wrap: pretty;
  font-weight: 450;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.hero-stat {
  margin: 0 0 1.25rem;
  max-width: 38rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--accent-2);
  text-wrap: pretty;
}

.pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.5rem;
}
.pills li {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.pills .pill-link {
  --stat-ink: color-mix(in srgb, var(--accent-2) 90%, var(--text));
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-family: "Cascadia Mono", "Cascadia Code", "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--stat-ink);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--glass-border));
  border-radius: 999px;
  padding: 0.4rem 0.78rem 0.36rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 20%, transparent), transparent 64%),
    color-mix(in srgb, var(--bg) 38%, transparent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 36%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 14%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  cursor: pointer;
  transition: border-color 0.25s, color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s, text-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.pills .pill-link:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--accent-2);
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%),
    color-mix(in srgb, var(--bg) 30%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    0 8px 22px color-mix(in srgb, var(--accent) 22%, transparent);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 48%, transparent);
}
.pills .pill-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 3px;
  border-color: color-mix(in srgb, var(--accent) 75%, transparent);
  color: var(--accent-2);
}
.pills .pill-link:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 12%, transparent);
}
body[data-mode="smb"] .pills .pill-link {
  border-color: color-mix(in srgb, #2dd4a8 48%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #9ff5dc 18%, transparent),
    0 0 22px color-mix(in srgb, #10b981 18%, transparent);
}
body[data-mode="enterprise"] .pills .pill-link {
  border-color: color-mix(in srgb, #e0b84a 55%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffe9a8 16%, transparent),
    0 0 22px color-mix(in srgb, #d4a017 22%, transparent);
}
body[data-mode="enterprise"] .pills .pill-link:hover,
body[data-mode="enterprise"] .pills .pill-link:focus-visible {
  border-color: color-mix(in srgb, #f0d078 80%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff3c4 22%, transparent),
    0 8px 24px color-mix(in srgb, #d4a017 28%, transparent);
}
html[data-theme="light"] .pills .pill-link {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 12%, #fff), #fff 72%);
  text-shadow: none;
}
/* Keep focus ring readable when section receives programmatic focus */
#capabilities:focus {
  outline: none;
}
#cap-h2:focus {
  outline: none;
}
#cap-h2:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* Earth showcase */
.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-visual::before,
.hero-visual::after { display: none; }

.earth-frame {
  position: relative;
  z-index: 1;
  /* Floating globe only - no dark disc / plate behind the planet */
  border-radius: 0;
  overflow: visible;
  border: none;
  background: transparent;
  box-shadow: none;
  width: min(100%, 520px);
  aspect-ratio: 1 / 1;
  height: auto;
  min-width: 220px;
  min-height: 220px;
  max-width: 100%;
  margin-inline: auto;
  transition: filter 0.25s var(--ease);
}
/* Optional soft ambient (transparent center) - never a solid dark circle */
.earth-frame::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 38% 32%,
    rgba(100, 180, 255, 0.14) 0%,
    rgba(60, 140, 220, 0.05) 42%,
    transparent 70%
  );
  box-shadow: none;
  filter: blur(2px);
}
body[data-mode="enterprise"] .earth-frame::before {
  /* Warm sun-side bloom only - gold light, not a dark gold plate */
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 230, 160, 0.28) 0%,
    rgba(212, 175, 55, 0.1) 38%,
    transparent 68%
  );
  box-shadow: none;
}
html[data-theme="light"] .earth-frame {
  background: transparent;
  box-shadow: none;
  border: none;
}
html[data-theme="light"] .earth-frame::before {
  background: radial-gradient(
    circle at 38% 32%,
    rgba(120, 180, 230, 0.16) 0%,
    rgba(90, 150, 210, 0.05) 40%,
    transparent 68%
  );
  box-shadow: none;
}
html[data-theme="light"] body[data-mode="enterprise"] .earth-frame::before {
  background: radial-gradient(
    circle at 34% 30%,
    rgba(255, 220, 140, 0.22) 0%,
    rgba(200, 160, 60, 0.08) 40%,
    transparent 68%
  );
  box-shadow: none;
}
.earth-frame #cyber-earth {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  /* Square canvas is fine; planet pixels have soft alpha - no circular dark clip */
  border-radius: 0;
  overflow: visible;
  background: transparent;
  /* iOS Safari: keep the 2D canvas on a composited layer so it does not paint blank */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.earth-frame:hover {
  border: none;
  box-shadow: none;
  filter: brightness(1.025);
  transform: none;
}
.earth-frame:hover::before {
  box-shadow: none;
  filter: blur(2px) brightness(1.08);
}
#cyber-earth {
  width: 100%;
  height: 100%;
  max-width: none;
  image-rendering: auto;
  image-rendering: high-quality;
  /* pan-y: page can scroll through the globe square; pinch-zoom still blocked */
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
}
#cyber-earth:focus-visible {
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Mouse/touch on empty earth must not flash the focus ring as a “reaction” */
#cyber-earth:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
.earth-hint {
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: -0.35rem; /* just under the globe frame edge */
  margin: 0;
  text-align: center;
  font-size: 0.68rem;
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: 0.04em;
  /* Cosmic green - readable on dark and light */
  color: #34e8b0;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 10px rgba(52, 232, 176, 0.35);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
}
html[data-theme="light"] .earth-hint {
  color: #0a8f6e;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(10, 143, 110, 0.22);
}
/* Enterprise: golden “Click a hub” to match gold twin atmosphere */
body[data-mode="enterprise"] .earth-hint {
  color: #f0d078;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75),
    0 0 12px rgba(212, 175, 55, 0.45);
}
html[data-theme="light"] body[data-mode="enterprise"] .earth-hint {
  color: #9a7209;
  text-shadow:
    0 1px 1px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(184, 134, 11, 0.28);
}
.earth-loading {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  display: none;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  z-index: 3;
  backdrop-filter: blur(6px);
}
.earth-frame.is-loading .earth-loading {
  display: grid;
}
.earth-loading span {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 0.55rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--bg-elev);
}
.hud-fps {
  opacity: 0.55;
  font-size: 0.6rem;
}
@media (max-width: 720px) {
  .hud-fps { display: none; }
  .earth-hint { font-size: 0.62rem; bottom: -0.32rem; }
}
.earth-hud {
  position: absolute;
  inset: 0.9rem 0.9rem auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
  gap: 0.4rem;
  z-index: 2;
}
.hud {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--hud-bg);
  color: var(--accent-2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
#hub-status {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  flex: 1 1 auto;
  text-align: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.hub-card {
  position: absolute;
  z-index: 6;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.55rem;
  max-width: 22rem;
  margin: 0 auto;
  padding: 0.95rem 1.05rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--bg-card);
  color: var(--text);
  box-shadow: var(--shadow-sm);
  pointer-events: auto;
  animation: hub-card-in 0.28s var(--ease-out);
}
@keyframes hub-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.hub-card[hidden] { display: none !important; }
.hub-card-close {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.hub-card-close:hover,
.hub-card-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
  outline: none;
}
.hub-card-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 2.4rem 0.35rem 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hub-card-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
.hub-card-name {
  margin: 0 2rem 0.15rem 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.hub-card-region {
  margin: 0 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--faint);
}
.hub-card-desc {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.hub-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 0.7rem;
  margin: 0;
}
.hub-card-metrics div { margin: 0; }
.hub-card-metrics dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.hub-card-metrics dd {
  margin: 0.12rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}
@media (min-width: 721px) {
  .hub-card {
    left: auto;
    right: 0.65rem;
    top: 3.15rem;
    bottom: auto;
    width: 17.75rem;
    margin: 0;
    animation-name: hub-card-in-desk;
  }
  @keyframes hub-card-in-desk {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}
@media (max-width: 720px) {
  .hub-card-close {
    width: 44px;
    height: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hub-card { animation: none !important; }
}
html[data-motion="off"] .hub-card {
  animation: none !important;
}

/* -- Workspace / tabs -- */
.workspace {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-5) 1.35rem var(--space-8);
  /* Always paint text on fast scroll (no content-visibility lag) */
  content-visibility: visible;
}

.workspace-head {
  margin-bottom: 0.25rem;
}
.workspace-visual {
  margin: 0 0 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-card);
  box-shadow: none;
}
.workspace-visual picture,
.workspace-visual img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
@media (min-width: 981px) {
  .workspace-visual picture,
  .workspace-visual img {
    max-height: 420px;
    object-fit: cover;
    object-position: center 40%;
  }
}
.workspace-visual figcaption {
  margin: 0;
  padding: 0.55rem 0.85rem 0.65rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}

.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 1.25rem;
  padding: 0;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid var(--glass-border);
  background: transparent;
  box-shadow: none;
}
.tab {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  text-align: left;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 0;
  padding: 0.85rem 0.75rem 0.95rem;
  margin-bottom: -1px;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s var(--ease), border-color 0.2s, background 0.2s;
}
.tab:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 4%, transparent);
  transform: none;
}
.tab.is-active {
  color: var(--text);
  border-bottom-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.tab-num {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 750;
  color: var(--accent);
  letter-spacing: 0.16em;
}
.tab-label {
  font-size: 0.88rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 1.5rem 1.5rem 1.6rem;
  box-shadow: none;
  animation: panelIn 0.3s var(--ease-out);
}
@keyframes panelIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.panel[hidden] { display: none !important; }
.panel h3 {
  margin: 0 0 0.55rem;
  font-size: 1.32rem;
  letter-spacing: -0.025em;
  font-weight: 750;
}
.panel > p,
.panel-grid > div > p {
  margin: 0 0 1.2rem;
  color: var(--muted);
  line-height: 1.68;
}
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}

/* -- Forms -- */
.form { display: grid; gap: 1rem; }
.form-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.field {
  display: grid;
  gap: 0.42rem;
  font-size: 0.88rem;
  font-weight: 580;
}
.field span { color: var(--text); letter-spacing: 0.015em; font-weight: 600; }
.field select,
.field input,
.field textarea {
  width: 100%;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xs);
  background: var(--bg-elev);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: 0.78rem 0.95rem;
  min-height: var(--touch);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: border-color 0.2s, box-shadow 0.25s, background 0.2s;
}
.field select:hover,
.field input:hover,
.field textarea:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
}
.field select:focus,
.field input:focus,
.field textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
  outline: none;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
}
.field textarea { resize: vertical; min-height: 112px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; }

.result {
  margin-top: 1.25rem;
  padding: 1.4rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:
    radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--glass));
  text-align: center;
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 12%, transparent);
}
.result-score {
  margin: 0;
  font-weight: 850;
  font-size: 3.25rem;
  letter-spacing: -0.045em;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.result-score small {
  font-size: 1rem;
  color: var(--faint);
  background: none;
  -webkit-text-fill-color: var(--faint);
}
#scan-msg { margin: 0.55rem 0 0; color: var(--muted); line-height: 1.55; }

.holo-wrap, #swarm { border-radius: var(--radius-sm); }
#holo-scanner,
#swarm {
  width: 100%;
  max-width: 100%;
  background:
    radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    rgba(0, 0, 0, 0.4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow:
    inset 0 0 50px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 var(--glass-shine);
}
.orch-stage {
  position: relative;
}
#swarm {
  height: 280px;
  touch-action: pan-y;
  cursor: default;
}
body[data-mode="enterprise"] #swarm {
  height: 380px;
}
.orch-card {
  position: absolute;
  z-index: 6;
  left: 0.45rem;
  right: 0.45rem;
  bottom: 0.45rem;
  max-width: 22rem;
  margin: 0 auto;
  padding: 0.9rem 1rem 0.95rem;
  border: 1px solid var(--line, var(--glass-border));
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text);
  box-shadow: none;
  pointer-events: auto;
  transform-origin: var(--orch-ox, 50%) var(--orch-oy, 50%);
  animation: orch-card-in 0.22s var(--ease-out, ease-out);
}
@keyframes orch-card-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to { opacity: 1; transform: none; }
}
.orch-card[hidden] { display: none !important; }
.orch-card-close {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  width: 36px;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.orch-card-close:hover,
.orch-card-close:focus-visible {
  border-color: var(--accent);
  color: var(--accent-2);
  outline: none;
}
.orch-card-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 2.2rem 0.3rem 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.orch-card-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
.orch-card-name {
  margin: 0 2rem 0.2rem 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.orch-card-job {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.orch-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.7rem;
  margin: 0 0 0.75rem;
}
.orch-card-metrics dt {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.orch-card-metrics dd {
  margin: 0.12rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
}
.orch-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.orch-legend {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}
.orch-legend li { margin-bottom: 0.28rem; }
@media (min-width: 721px) {
  .orch-card {
    left: auto;
    right: 0.55rem;
    top: 0.55rem;
    bottom: auto;
    width: 17.5rem;
    margin: 0;
  }
}
@media (max-width: 720px) {
  .orch-card-close {
    width: 44px;
    height: 44px;
  }
  #swarm { height: 240px; }
  body[data-mode="enterprise"] #swarm { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .orch-card { animation: none !important; }
}
.caption {
  margin: 0.6rem 0 0;
  font-size: 0.74rem;
  color: var(--faint);
  text-align: center;
  letter-spacing: 0.04em;
  font-family: var(--mono);
}

.kv { margin: 0; display: grid; gap: 0.9rem; }
.kv div {
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--glass-border);
}
.kv dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--faint);
  font-weight: 700;
}
.kv dd { margin: 0.25rem 0 0; font-weight: 750; font-size: 1.05rem; }

.impact-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  margin-top: 1.35rem;
}
.card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: linear-gradient(165deg, var(--glass-strong), var(--glass));
  padding: 1.25rem 1.2rem;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--glass-shine);
  transition: transform 0.3s var(--ease-out), border-color 0.25s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--glass-border));
  box-shadow: var(--shadow-sm), 0 0 30px color-mix(in srgb, var(--accent) 10%, transparent);
}
.card h4 {
  margin: 0 0 0.45rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.card .big {
  margin: 0;
  font-size: clamp(1.45rem, 2.7vw, 2.05rem);
  font-weight: 850;
  color: var(--accent-2);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.card-human {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--glass-border));
  background:
    radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 55%),
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 12%, transparent), var(--glass));
}
.fine {
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  color: var(--faint);
  line-height: 1.5;
}
.card .fine { margin-top: 0.55rem; }

.nap-block {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-style: normal;
  margin: 0 0 1.2rem;
  padding: 1.3rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: linear-gradient(165deg, var(--glass-strong), var(--glass));
  color: var(--muted);
  line-height: 1.5;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
.nap-block .logo-word,
.nap-block-entity {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--text);
  font-weight: 700;
}
.nap-block .contact-link {
  color: var(--muted);
  font-size: 0.95rem;
}
.nap-block .contact-icon {
  width: 1rem;
  height: 1rem;
}
.nap-block a.contact-link:hover {
  color: var(--accent-2);
}
.nap-block-social {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.35rem;
  font-size: 0.95rem;
}
.nap-block-social .contact-link {
  color: var(--muted);
}
.nap-block-social .contact-link:hover {
  color: var(--accent-2);
}
.nap-block-social .contact-icon {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
}
.bullets {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--muted);
}
.bullets li { margin-bottom: 0.45rem; }
/* Sticky NAP + topbar + mobile bottom CTA must not cover the form target */
#contact,
#contact-form,
#contact .field {
  scroll-margin-top: calc(var(--nap-h, 2.25rem) + var(--bar-h, 3.75rem) + 0.75rem);
  scroll-margin-bottom: 5.5rem;
}
@media (max-width: 980px) {
  #contact,
  #contact-form,
  #contact .field {
    scroll-margin-top: calc(var(--nap-h, 2rem) + var(--bar-h, 8.25rem) + 0.85rem);
    scroll-margin-bottom: 6.25rem;
  }
}

.contact-box {
  padding: 1.4rem 1.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background:
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%),
    linear-gradient(165deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--glass));
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-shine), var(--shadow-sm);
}
.contact-box h3 {
  margin: 0 0 1.05rem;
  font-size: 1.12rem;
  letter-spacing: -0.015em;
}

/* -- Process + capability bands -- */
.band {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--space-7) 1.35rem;
  /* Always paint band copy instantly while scrolling */
  content-visibility: visible;
}
.band-inner { width: 100%; }
.band-head {
  max-width: 42rem;
  margin-bottom: var(--space-6);
}
.band-lead {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 450;
}
.process-h2-claim {
  display: none;
  margin-top: 0.35rem;
}
body[data-mode="enterprise"] .process-h2-claim:not(:empty) {
  display: block;
  color: color-mix(in srgb, var(--accent) 42%, var(--text));
  font-weight: 600;
}
.cap-h2-claim {
  display: none;
  margin-top: 0.35rem;
}
body[data-mode="enterprise"] .cap-h2-claim:not(:empty) {
  display: block;
  color: color-mix(in srgb, var(--accent) 42%, var(--text));
  font-weight: 600;
}
.cap-lead-2 {
  display: none;
  margin: 0.7rem 0 0;
  max-width: 42rem;
  color: var(--muted);
  font-size: 1.08rem;
  line-height: 1.75;
  font-weight: 450;
}
body[data-mode="enterprise"] .cap-lead-2:not(:empty) {
  display: block;
}
.band h2 {
  margin: 0.75rem 0 0;
  font-size: clamp(1.65rem, 3.2vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}
.band-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-6);
}

.glass-card {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--bg-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s;
}
html[data-theme="light"] .glass-card {
  box-shadow: 0 1px 2px rgba(12, 30, 24, 0.04), 0 8px 24px rgba(12, 30, 24, 0.06);
}
.glass-card:hover {
  transform: none;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--glass-border));
  box-shadow: var(--shadow-sm);
}

.process-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  position: relative;
}
.process-card {
  padding: 1.5rem 1.35rem 1.5rem;
  list-style: none;
  position: relative;
  overflow: hidden;
}
.process-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: var(--accent);
  opacity: 0.85;
}
.process-num {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.process-meta {
  margin: 0 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.process-card h3 {
  margin: 0 0 0.65rem;
  font-size: 1.18rem;
  letter-spacing: -0.025em;
  line-height: 1.25;
  font-weight: 750;
}
.process-card > p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.65;
}

.tag-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tag-row li {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  background: var(--glass);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.cap-card {
  padding: 1.4rem 1.3rem 1.45rem;
  position: relative;
}
.cap-card h3 {
  margin: 0 0 0.55rem;
  font-size: 1.08rem;
  letter-spacing: -0.02em;
  font-weight: 750;
}
.cap-card > p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

.close-cta { padding-bottom: var(--space-8); }
.close-inner {
  padding: 2.4rem 2rem;
  text-align: left;
  background:
    radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%),
    radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent-deep) 15%, transparent), transparent 45%),
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 10%, transparent), var(--bg-card));
  position: relative;
  overflow: hidden;
}
.close-inner::after {
  content: "";
  position: absolute;
  inset: -40% auto auto 60%;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-soft), transparent 70%);
  pointer-events: none;
}
.close-inner .band-lead { max-width: 38rem; position: relative; z-index: 1; }
.close-inner h2,
.close-inner .eyebrow,
.close-inner .band-cta { position: relative; z-index: 1; }
.close-inner h2 { margin: 0.65rem 0 0.55rem; }

/* -- FAQ (geo-bluf styled separately below) -- */
.faq {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.35rem var(--space-6);
}
.faq h2 {
  margin: 0 0 0.9rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.faq details {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  padding: 0 1.25rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  box-shadow: inset 0 1px 0 var(--glass-shine);
}
.faq details:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 8%, transparent);
}
.faq details[open] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--bg-card));
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1.05rem 0;
  list-style: none;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  margin-left: 0.75rem;
  transition: transform 0.25s var(--ease);
}
.faq details[open] summary::after {
  content: "–";
  transform: scale(1.1);
}
.faq p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  padding-right: 1.5rem;
  line-height: 1.7;
}

/* -- Footer -- */
.footer {
  border-top: 1px solid var(--glass-border);
  padding: 2.25rem 1.35rem 3rem;
  background:
    linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 90%, #000)),
    color-mix(in srgb, var(--bg) 92%, #000);
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: start;
}
.footer-brand p,
.footer-inner p {
  margin: 0.2rem 0;
  color: var(--faint);
  font-size: 0.88rem;
}
.footer-inner .logo-word { font-size: 1.05rem; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.5rem;
}
.footer-nap {
  margin: 0.35rem 0 0.45rem !important;
  color: var(--muted) !important;
  font-size: 0.82rem !important;
  line-height: 1.45;
  max-width: 28rem;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.footer-col-title {
  margin: 0 0 0.2rem !important;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent) !important;
}
.footer-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: color 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.footer-col a:hover { color: var(--accent-2); }
.footer-col a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Tablet: keep brand | nav, tighten gaps, roomy tap targets */
@media (max-width: 1024px) {
  .footer {
    padding: 2rem 1.25rem 2.75rem;
    padding-bottom: max(2.75rem, calc(1.5rem + env(safe-area-inset-bottom, 0px)));
  }
  .footer-inner {
    gap: 1.35rem 2rem;
  }
  .footer-col a {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0;
  }
}

/* Phones / small tablets: stacked brand, then nav plate */
@media (max-width: 720px) {
  .footer {
    padding: 1.65rem 1.1rem 2.25rem;
    padding-bottom: max(2.25rem, calc(1.25rem + env(safe-area-inset-bottom, 0px)));
  }
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .footer-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
    gap: 1rem 1.35rem;
  }
  .footer-nav .footer-col:last-child {
    grid-column: 1 / -1;
  }
  .footer-col-title {
    font-size: 0.68rem;
  }
  .footer-col a {
    min-height: 2.85rem;
    font-size: 0.95rem;
    width: 100%;
  }
  .svc-paths-grid {
    grid-template-columns: 1fr;
  }
  .svc-path-card {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 3rem;
  }
}

@media (max-width: 380px) {
  .footer-nav {
    grid-template-columns: 1fr;
    gap: 1.1rem;
  }
}

/* -- Floating actions -- */
.mobile-cta {
  --float-btn-h: 3.05rem; /* matches Contact: 0.875rem × 1.65 + 1.6rem padding */
  display: none;
  position: fixed;
  left: 1rem;
  right: 5rem;
  bottom: 1rem;
  z-index: 60;
  height: var(--float-btn-h);
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  padding: 0 1rem;
  border-radius: 8px;
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
}

.audio-toggle {
  --float-btn-h: 3.05rem;
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 60;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 3.25rem;
  max-width: 3.95rem;
  width: auto;
  height: var(--float-btn-h);
  min-height: var(--float-btn-h);
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: var(--bg-elev);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.15;
  white-space: pre-line;
  text-align: center;
  font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.audio-toggle:hover,
.audio-toggle[aria-pressed="true"] {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: none;
}
.audio-toggle:active { transform: none; }
.audio-toggle[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 720px) {
  .mobile-cta { display: flex; }
  body { padding-bottom: 5.5rem; }
  .audio-toggle {
    bottom: 1rem;
    right: 1rem;
    height: var(--float-btn-h);
    min-height: var(--float-btn-h);
  }
  .nap {
    font-size: 0.65rem;
    gap: 0.25rem 0.4rem;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .geo-hint { display: none; }
  .hero {
    padding-top: var(--space-5);
  }
  .topbar-inner {
    min-height: 60px;
  }
  .lang-menu-btn {
    min-width: 0;
    padding: 0.45rem 0.6rem;
  }
  .lang-menu-current {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lang-menu-list {
    right: 0;
    left: auto;
    min-width: min(16rem, calc(100vw - 1.5rem));
  }
}

/*
 * Reveal - NEVER hide text (opacity must stay 1).
 * Fast scroll / mobile: no opacity fade, no content-visibility skip.
 * Crawlable for SEO/GEO with or without JS.
 */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  content-visibility: visible !important;
  contain: none;
}
/* While scrolling: freeze text-section transitions so paint stays instant */
html.is-scrolling .reveal,
html.is-scrolling .band,
html.is-scrolling .workspace,
html.is-scrolling .faq,
html.is-scrolling .geo-bluf,
html.is-scrolling .process-card,
html.is-scrolling .cap-card,
html.is-scrolling .svc-path-card,
html.is-scrolling .glass-card {
  transition: none !important;
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Mobile: disable expensive blurs that lag finger scroll (text stays crisp) */
@media (max-width: 900px), (pointer: coarse) {
  .glass-card,
  .topbar,
  .services-menu,
  .hud,
  .earth-loading {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* -- Responsive: tablet (portrait/landscape) -- */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-visual {
    width: 100%;
    max-width: min(420px, 86vw);
    margin-inline: auto;
  }
}

@media (max-width: 1024px) {
  :root { --bar-h: 88px; }
  .hero {
    gap: 1.75rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .band-inner,
  .workspace { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (max-width: 980px) {
  :root { --bar-h: 132px; }
  .hero,
  .panel-grid,
  .form-grid,
  .impact-cards,
  .process-grid,
  .cap-grid { grid-template-columns: 1fr; }
  .tabs { grid-template-columns: 1fr 1fr; }
  .hero-visual::before,
  .hero-visual::after { display: none; }
  .topbar-inner {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-top: 0.45rem;
    padding-bottom: 0.5rem;
    align-items: center;
  }
  /* Row 1: logo · language / theme / contact */
  .topbar-inner > .logo {
    order: 1;
  }
  .logo-mark { width: 48px; height: 58px; }
  .topbar-inner > .top-actions {
    order: 2;
    margin-left: auto;
  }

  /*
   * Row 2 - original order restored:
   * [ Services ▾ ]     [ SMB  |  Enterprise ]
   * Home sits in row 1 after theme (not here).
   */
  .topbar-secondary {
    order: 3;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100%;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0;
  }
  .top-actions .nav-home-link {
    height: var(--touch, 2.75rem);
    min-height: var(--touch, 2.75rem);
    padding: 0 0.5rem;
    font-size: 0.68rem;
    border-radius: 8px;
  }
  .topbar-secondary .services-menu {
    display: flex;
    width: auto;
    min-width: 0;
    max-width: none !important;
    flex: none !important;
  }
  .topbar-secondary .services-menu-btn {
    width: auto;
    min-width: 5.5rem;
    min-height: 3.25rem;
    height: 100%;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--bg-elev);
    box-shadow: none;
  }
  .topbar-secondary .services-menu-label {
    overflow: visible;
    white-space: nowrap;
  }
  .topbar-secondary .services-menu-list {
    left: 0;
    right: auto;
    min-width: min(15rem, calc(100vw - 1.5rem));
    width: max-content;
    max-width: calc(100vw - 1.25rem);
  }
  /* Standalone segmented control - own plate, not glued to Services */
  .topbar-secondary .mode-switch {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(8.5rem, 1fr);
    gap: 0;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 3px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--bg-elev);
    box-shadow: none;
  }
  .topbar-secondary .mode-switch .mode-btn {
    min-width: 0 !important;
    min-height: 3.1rem;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    text-align: center;
    border-radius: 6px;
  }
  /* Calm dots on mobile (no pulse / no “check” look) */
  .topbar-secondary .mode-swatch {
    width: 7px;
    height: 7px;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    flex-shrink: 0;
  }
  .topbar-secondary .mode-swatch-smb {
    box-shadow: 0 0 0 1px color-mix(in srgb, #10b981 50%, transparent);
  }
  .topbar-secondary .mode-swatch-ent {
    box-shadow: 0 0 0 1px color-mix(in srgb, #d4af37 55%, transparent);
  }
  .topbar-secondary .mode-label-full {
    display: none !important;
  }
  .topbar-secondary .mode-label-stack {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
  }
  .topbar-secondary .mode-label-short {
    display: block !important;
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    color: inherit;
  }
  .topbar-secondary .mode-label-micro {
    display: block !important;
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    line-height: 1.2;
    white-space: normal;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
    color: var(--faint);
  }
  .topbar-secondary .mode-btn[data-mode="enterprise"] .mode-label-short {
    white-space: nowrap !important;
    overflow: visible !important;
    word-break: keep-all;
    hyphens: none;
  }
  /* SMB cell needs a bit more room for the full expansion line */
  .topbar-secondary .mode-switch .mode-btn[data-mode="smb"] {
    padding-left: 0.4rem;
    padding-right: 0.35rem;
  }
  .topbar-secondary .mode-switch .mode-btn[data-mode="smb"] .mode-label-micro {
    font-size: 0.56rem;
    line-height: 1.18;
  }
  .topbar-secondary .mode-btn.is-active {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .topbar-secondary .mode-btn.is-active .mode-label-micro {
    color: var(--accent-2);
  }
  .earth-frame { max-width: min(420px, 100%); margin-inline: auto; }
}

/* -- Responsive: large phones / small tablets -- */
@media (max-width: 720px) {
  .lang-menu-current { display: none; }
  .lang-menu-btn { min-width: var(--touch); justify-content: center; gap: 0.25rem; }
  .lang-menu-chevron { display: none; }
}

/* -- Responsive: phones -- */
@media (max-width: 580px) {
  .topbar-secondary {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.45rem;
  }
  .topbar-secondary .services-menu-btn {
    min-width: 5.25rem;
    font-size: 0.76rem;
    min-height: 3.2rem;
    padding: 0.5rem 0.6rem;
  }
  .topbar-secondary .mode-switch .mode-btn {
    min-height: 3.05rem;
    padding: 0.38rem 0.42rem;
    gap: 0.35rem;
  }
  .topbar-secondary .mode-label-short {
    font-size: 0.86rem;
  }
  .topbar-secondary .mode-label-micro {
    font-size: 0.54rem;
  }
  .topbar-secondary .mode-switch .mode-btn[data-mode="smb"] .mode-label-micro {
    font-size: 0.52rem;
  }
  .topbar-inner { gap: 0.4rem; padding: 0.4rem 0.75rem; }
  .top-actions .btn { display: none; }
  .theme-toggle { width: var(--touch); height: var(--touch); }
  .hero { padding: var(--space-5) 1rem var(--space-4); gap: 1.4rem; }
  .hero h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .hero .lead { font-size: 1rem; line-height: 1.7; }
  .workspace { padding: var(--space-4) 1rem var(--space-7); }
  .band { padding: var(--space-6) 1rem; }
  .panel { padding: 1.2rem 1rem 1.3rem; }
  .tabs { gap: 0; }
  .tab {
    padding: 0.7rem 0.5rem;
    min-height: var(--touch);
    align-items: center;
  }
  .tab-label { font-size: 0.72rem; letter-spacing: 0.03em; }
  .logo-word { font-size: 1.05rem; letter-spacing: 0.08em; }
  .close-inner { padding: 1.5rem 1.15rem; }
  .form-grid { grid-template-columns: 1fr; }
  .impact-cards { grid-template-columns: 1fr; }
  .panel-grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .pills { gap: 0.4rem; }
  .btn { min-height: var(--touch); padding-inline: 1.1rem; }
  input, select, textarea {
    font-size: 16px; /* prevent iOS zoom */
    min-height: var(--touch);
  }
  textarea { min-height: 7rem; }
}

/* -- Landscape phones -- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { padding-top: var(--space-4); padding-bottom: var(--space-4); }
  .earth-frame { max-width: 260px; }
}

/* -- Enterprise gold shine (premium foil / metallic) -- */
@keyframes gold-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.25), 0 8px 28px rgba(212, 175, 55, 0.2); }
  50% { box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.08), 0 12px 36px rgba(240, 208, 120, 0.35); }
}
@keyframes gold-swatch {
  0%, 100% { filter: brightness(1); box-shadow: 0 0 0 1px rgba(255, 240, 180, 0.4), 0 0 8px rgba(212, 175, 55, 0.4); }
  50% { filter: brightness(1.2); box-shadow: 0 0 0 1px rgba(255, 248, 220, 0.7), 0 0 14px rgba(255, 220, 120, 0.7); }
}

body[data-mode="enterprise"] {
  background-image:
    radial-gradient(ellipse 900px 480px at 85% -5%, var(--glow), transparent 55%),
    radial-gradient(ellipse 600px 360px at 10% 20%, var(--glow-soft), transparent 50%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}

/* Logo wordmark stays neutral: white (dark) / black (light) - not gold foil */
body[data-mode="enterprise"] .logo-word {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  animation: none;
  filter: none;
}
body[data-mode="enterprise"] .logo:hover .logo-word {
  color: var(--text);
  filter: none;
  opacity: 0.92;
}
html[data-theme="dark"] body[data-mode="enterprise"] .logo-word {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
html[data-theme="light"] body[data-mode="enterprise"] .logo-word {
  color: #000000;
  -webkit-text-fill-color: #000000;
}
html[data-theme="dark"] body[data-mode="enterprise"] .logo:hover .logo-word {
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}
html[data-theme="light"] body[data-mode="enterprise"] .logo:hover .logo-word {
  color: #000000;
  -webkit-text-fill-color: #000000;
}
/* Legal form under logo (footer only; header wordmark is brand IDPROIT SRL) */
html[data-theme="dark"] body[data-mode="enterprise"] .logo-legal {
  color: rgba(255, 255, 255, 0.72);
}
html[data-theme="light"] body[data-mode="enterprise"] .logo-legal {
  color: rgba(0, 0, 0, 0.72);
}

body[data-mode="enterprise"] .mode-btn.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 220, 0.25),
    0 0 20px rgba(212, 175, 55, 0.18);
  color: var(--text);
}
/* Keep gold star-pulse always (do not replace with weaker gold-swatch) */
body[data-mode="enterprise"] .mode-btn.is-active .mode-swatch-ent,
body[data-mode="enterprise"] .mode-swatch-ent {
  animation: mode-swatch-gold-pulse 2.9s ease-in-out infinite;
  animation-delay: 0.35s;
}

body[data-mode="enterprise"] .btn-primary {
  background-image: var(--gold-shine, linear-gradient(125deg, #c9a227, #fff0b8, #d4af37));
  background-size: 220% 220%;
  background-color: var(--accent);
  color: var(--on-accent);
  border: 1px solid color-mix(in srgb, var(--accent-3) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 16px rgba(212, 175, 55, 0.35),
    0 0 24px rgba(212, 175, 55, 0.2);
  animation: gold-shimmer 4.5s ease-in-out infinite, gold-pulse 3.2s ease-in-out infinite;
  text-shadow: 0 1px 0 rgba(255, 248, 220, 0.25);
}
body[data-mode="enterprise"] .btn-primary:hover {
  filter: brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 8px 28px rgba(240, 208, 120, 0.45),
    0 0 36px rgba(212, 175, 55, 0.3);
  color: var(--on-accent);
  background-image: var(--gold-shine, linear-gradient(125deg, #c9a227, #fff0b8, #d4af37));
}
body[data-mode="enterprise"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 48%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: gold-shimmer 3.2s linear infinite;
  pointer-events: none;
  mix-blend-mode: soft-light;
  border-radius: inherit;
}

body[data-mode="enterprise"] .mobile-cta {
  background-image: var(--gold-shine, linear-gradient(125deg, #c9a227, #fff0b8, #d4af37));
  background-size: 200% 200%;
  color: var(--on-accent);
  border: 1px solid color-mix(in srgb, var(--accent-3) 40%, transparent);
  box-shadow: 0 6px 24px rgba(212, 175, 55, 0.35);
  animation: gold-shimmer 4.5s ease-in-out infinite;
}

body[data-mode="enterprise"] .tab.is-active {
  border-bottom-color: var(--accent-2);
  color: var(--accent-3);
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.35);
}
body[data-mode="enterprise"] .eyebrow {
  color: var(--accent-2);
  letter-spacing: 0.06em;
}
body[data-mode="enterprise"] .contact-icon,
body[data-mode="enterprise"] .lang-menu-code {
  color: var(--accent-2);
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.4));
}
/* Light + Enterprise: deeper gold text for AA contrast (no glow) */
html[data-theme="light"] body[data-mode="enterprise"] .lang-menu-code,
html[data-theme="light"] body[data-mode="enterprise"] .contact-icon {
  color: var(--accent-3);
  filter: none;
}
body[data-mode="enterprise"] .glass-card:hover,
body[data-mode="enterprise"] .panel:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border));
  box-shadow: var(--shadow-sm), 0 0 28px rgba(212, 175, 55, 0.12);
}
body[data-mode="enterprise"] .topbar {
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  box-shadow: 0 1px 0 rgba(255, 236, 180, 0.06);
}
body[data-mode="enterprise"] .skip-link {
  background-image: var(--gold-shine, linear-gradient(125deg, #c9a227, #fff0b8, #d4af37));
  color: var(--on-accent);
}
body[data-mode="enterprise"] .audio-toggle[aria-pressed="true"]::before {
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.8);
}

html[data-theme="light"] body[data-mode="enterprise"] .btn-primary {
  color: #1a1204;
  text-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  body[data-mode="enterprise"] .btn-primary,
  body[data-mode="enterprise"] .btn-primary::after,
  body[data-mode="enterprise"] .mobile-cta,
  body[data-mode="enterprise"] .mode-swatch-ent,
  .mode-swatch-smb,
  .mode-swatch-ent,
  .logo-img-shine,
  .logo-img-smb.logo-img-shine,
  body[data-mode="enterprise"] .logo-img-ent.logo-img-shine,
  .logo-img-ent.logo-img-shine.is-visible {
    animation: none !important;
    opacity: 0.85 !important;
    filter: none !important;
  }
  html[data-theme="light"] body[data-mode="enterprise"] .logo-img-ent.logo-img-core-light,
  html[data-theme="light"] .logo-img-ent.logo-img-core-light.is-visible {
    filter: none !important;
  }
  html[data-theme="light"] body[data-mode="enterprise"] .logo-img-ent.logo-img-shine,
  html[data-theme="light"] .logo-img-ent.logo-img-shine.is-visible {
    opacity: 0.65 !important;
    filter: none !important;
  }
  body[data-mode="enterprise"] .btn-primary {
    background-position: 40% 50%;
  }
  .mode-swatch-smb {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.45);
  }
  .mode-swatch-ent {
    opacity: 1;
    transform: none;
    box-shadow: 0 0 0 1px rgba(255, 240, 180, 0.35), 0 0 10px rgba(212, 175, 55, 0.45);
  }
}

@media print {
  .nap, .topbar, .earth-hud, canvas, .audio-toggle,
  body::before, body::after, .hero-visual::before, .hero-visual::after {
    display: none !important;
  }
  body { background: #fff; color: #000; }
}

/* -- Legal / Terms page (Sebes-style document) -- */
/* Mode switch kept visible - home-parity chrome on all pages */
/* Quieter canvas than home: no leftover marketing glow, still IDPROIT SRL tokens */
body.legal-page {
  background-image:
    radial-gradient(
      ellipse 640px 280px at 100% 0%,
      color-mix(in srgb, var(--glow-soft) 30%, transparent),
      transparent 55%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
.legal-main {
  max-width: 48rem;
  margin: 0 auto;
  padding: var(--space-6) 1.35rem var(--space-8);
}
.legal-hero {
  margin-bottom: var(--space-5);
}
.legal-hero h1 {
  margin: 0.5rem 0 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.35rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.legal-lead {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.6;
}
.legal-bluf {
  margin: 0.85rem 0 0.65rem;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.65;
  font-weight: 500;
}
.legal-breadcrumb {
  margin: 0 0 1.25rem;
  font-size: 0.8125rem;
}
.legal-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--faint);
  align-items: center;
}
.legal-breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: var(--faint);
  opacity: 0.75;
}
/* Ancestors (Home, etc.): muted - not selected */
.legal-breadcrumb a {
  color: var(--faint);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s var(--ease);
}
.legal-breadcrumb a:hover {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-breadcrumb a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Current page: accent (emerald on SMB, gold on Enterprise) */
.legal-breadcrumb [aria-current="page"] span,
.legal-breadcrumb li[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
}
/* Explicit service-page accents (all breakpoints) */
body.services-smb-page .legal-breadcrumb [aria-current="page"] span {
  color: var(--accent);
}
body.services-enterprise-page .legal-breadcrumb [aria-current="page"] span {
  color: var(--accent);
}
html[data-theme="light"] body.services-smb-page .legal-breadcrumb a,
html[data-theme="light"] body.services-enterprise-page .legal-breadcrumb a,
html[data-theme="light"] .legal-breadcrumb a {
  color: var(--faint);
}
html[data-theme="light"] .legal-breadcrumb a:hover {
  color: var(--muted);
}
.legal-document {
  padding: 1.5rem 1.35rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
/* Filed register: opaque paper + 3px accent binding (emerald SMB / gold Enterprise) */
body.legal-page .legal-document {
  border-radius: var(--radius-xs);
  background: var(--bg-elev);
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow-sm);
}
body.legal-page .legal-document:hover {
  border-color: color-mix(in srgb, var(--line) 85%, transparent);
  border-left-color: var(--accent);
  box-shadow: var(--shadow-sm);
}
html[data-theme="light"] body.legal-page .legal-document,
html[data-theme="light"] body.legal-page .legal-document:hover {
  background: var(--bg-elev);
  box-shadow: 0 1px 2px rgba(12, 30, 24, 0.04), 0 8px 24px rgba(12, 30, 24, 0.05);
}
html[data-theme="light"] body[data-mode="enterprise"].legal-page .legal-document,
html[data-theme="light"] body[data-mode="enterprise"].legal-page .legal-document:hover {
  box-shadow: 0 1px 2px rgba(60, 40, 8, 0.04), 0 8px 24px rgba(60, 40, 8, 0.05);
}
@media (max-width: 640px) {
  body.legal-page .legal-document,
  body.legal-page .legal-document:hover {
    box-shadow: none;
  }
}
@media (prefers-reduced-data: reduce) {
  body.legal-page {
    background-image: none;
  }
  body.legal-page .legal-document,
  body.legal-page .legal-document:hover {
    box-shadow: none;
  }
}
@media print {
  body.legal-page {
    background: #fff;
    background-image: none;
  }
  body.legal-page .legal-document,
  body.legal-page .legal-document:hover {
    background: #fff;
    box-shadow: none;
    border: 1px solid #bbb;
  }
}
.legal-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  scroll-margin-top: 5.5rem;
}
.legal-section h3 {
  margin: 1.15rem 0 0.55rem;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text);
  scroll-margin-top: 5.5rem;
}
.legal-section p {
  margin: 0 0 0.75rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-toc {
  position: relative;
  padding: 0.9rem 2.85rem 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.legal-toc-mark {
  position: absolute;
  top: 0.72rem;
  right: 0.72rem;
  width: 1.72rem;
  height: 1.72rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #0a0a0a;
  color: #f3f4f6;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 16%, transparent);
  pointer-events: none;
  z-index: 2;
}
.legal-toc-mark svg {
  display: block;
  width: 1.02rem;
  height: 1.02rem;
}
html[data-theme="light"] .legal-toc-mark {
  background: #0a0a0a;
  color: #f3f4f6;
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.2);
}
.legal-toc-title {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal-toc ol,
.legal-toc-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.legal-toc a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}
.legal-toc a:hover {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.legal-facts {
  display: grid;
  grid-template-columns: minmax(8rem, 34%) 1fr;
  gap: 0.45rem 1rem;
  margin: 0.35rem 0 0.9rem;
}
.legal-facts dt {
  margin: 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 650;
}
.legal-facts dd {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.legal-facts a { color: var(--accent); }
@media (max-width: 640px) {
  .legal-facts { grid-template-columns: 1fr; gap: 0.15rem 0; }
  .legal-facts dt { margin-top: 0.45rem; }
}
.legal-faq-block .legal-faq {
  margin: 0.55rem 0 0;
}
.legal-page .legal-faq {
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 0.15rem 0.85rem 0.15rem;
}
.legal-page .legal-faq summary {
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
  padding: 0.7rem 0;
}
.legal-page .legal-faq p {
  margin: 0 0 0.85rem;
  color: var(--muted);
}
.legal-bullets li strong {
  color: var(--text);
  font-weight: 650;
}
.legal-bullets {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.legal-bullets li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}
.legal-bullets li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.5rem;
}
.footer-legal-links a {
  color: var(--accent-2);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.footer-legal-links a:hover {
  text-decoration: underline;
  color: var(--accent-3);
}

/* -- Subpage footer (Services / Terms): compact, not homepage mega layout --
   Avoids .footer-inner 2-col grid dumping brand + links into wrong cells. */
.footer.footer-sub {
  padding: 1.85rem 1.35rem 2.5rem;
}
.footer-sub-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(12rem, 0.9fr);
  gap: 1.5rem 2.75rem;
  align-items: start;
}
.footer-sub-brand {
  min-width: 0;
}
.footer-sub-name {
  margin: 0 0 0.4rem !important;
  color: var(--text) !important;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.footer-sub-name .logo-word {
  font-size: 1.08rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--text);
}
.footer-sub-tag {
  margin: 0 0 0.7rem !important;
  max-width: 28rem;
  color: var(--muted) !important;
  font-size: 0.86rem !important;
  line-height: 1.5;
}
.footer-sub-copy {
  margin: 0 !important;
  color: var(--faint) !important;
  font-size: 0.8rem !important;
}
.footer-sub-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem 1.75rem;
  justify-items: stretch;
  min-width: 0;
}
.footer-sub-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.38rem;
  min-width: 0;
}
.footer-sub-col .footer-col-title {
  margin: 0 0 0.15rem !important;
}
.footer-sub-col a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  transition: color 0.18s ease;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.footer-sub-col a:hover {
  color: var(--accent-2);
}
.footer-sub-col a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.footer-sub-col a[aria-current="page"],
.footer-sub-col span[aria-current="page"] {
  color: var(--accent);
  font-weight: 700;
  cursor: default;
  font-size: 0.9rem;
  line-height: 1.35;
  min-height: 2.65rem;
  display: inline-flex;
  align-items: center;
}
.footer-sub-nap {
  margin: 0.55rem 0 0 !important;
  color: var(--faint) !important;
  font-size: 0.78rem !important;
  line-height: 1.45;
  max-width: 28rem;
}
.footer-sub-nap a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.footer-sub-nap a:hover {
  color: var(--accent-2);
}

/* Tablet: subpage footer stays two-zone, larger taps */
@media (max-width: 1024px) {
  .footer.footer-sub {
    padding: 1.7rem 1.25rem 2.4rem;
    padding-bottom: max(2.4rem, calc(1.35rem + env(safe-area-inset-bottom, 0px)));
  }
  .footer-sub-inner {
    gap: 1.35rem 2rem;
  }
  .footer-sub-col a {
    min-height: 2.65rem;
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0;
  }
}

/* Phones: brand stack + Explore | Legal with full-width taps */
@media (max-width: 720px) {
  .footer.footer-sub {
    padding: 1.55rem 1.1rem 2.15rem;
    padding-bottom: max(2.15rem, calc(1.2rem + env(safe-area-inset-bottom, 0px)));
  }
  .footer-sub-inner {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .footer-sub-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.35rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--glass-border);
  }
  .footer-sub-tag {
    max-width: none;
    font-size: 0.84rem !important;
  }
  .footer-sub-col a {
    min-height: 2.85rem;
    font-size: 0.95rem;
    width: 100%;
  }
  /* Breadcrumb + logo home are primary mobile paths when Back is hidden */
  .legal-breadcrumb a {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0.2rem 0.15rem;
  }
  .logo {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
}

@media (max-width: 380px) {
  .footer-sub-nav {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
}

/* Service/Terms: keep a compact Home control on narrow screens (Back btn otherwise hidden) */
@media (max-width: 580px) {
  body.services-smb-page .top-actions .btn#svc-back,
  body.services-enterprise-page .top-actions .btn#svc-back,
  body.legal-page .top-actions .btn#terms-back {
    display: inline-flex !important;
    min-width: 0;
    min-height: var(--touch, 2.75rem);
    padding: 0.45rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .nap, .topbar, .panel, .tab, .card, .contact-box, .geo-bluf p,
  .faq details, .glass-card, .hud {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .panel, .glass-card, .tabs { background: var(--bg-2); }
}

/* ============================================================
   Scroll / animation performance (mobile · tablet · desktop)
   - Solid sticky chrome on touch (no backdrop-filter over scroll)
   - Pause expensive sticky infinite anims while scrolling
   - data-motion=lite|off from app.js
   ============================================================ */

/* Sticky blur only on fine-pointer desktop - biggest pure-scroll win on iOS/Android */
@media (hover: none), (pointer: coarse), (max-width: 1024px) {
  .nap,
  .topbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: color-mix(in srgb, var(--bg) 97%, transparent);
  }
  html[data-theme="light"] .nap,
  html[data-theme="light"] .topbar {
    background: color-mix(in srgb, var(--bg) 98%, #fff);
  }
  /* Sticky chrome: opacity/transform only - no filter/box-shadow thrash */
  .logo-img-smb.logo-img-shine,
  .logo-img-ent.logo-img-shine,
  .mode-swatch-smb,
  .mode-swatch-ent,
  body[data-mode="enterprise"] .mode-swatch-ent,
  body[data-mode="enterprise"] .mode-btn.is-active .mode-swatch-ent {
    animation: none !important;
    filter: none !important;
    will-change: auto !important;
  }
  body[data-mode="enterprise"] .btn-primary,
  body[data-mode="enterprise"] .btn-primary::after,
  body[data-mode="enterprise"] .mobile-cta {
    animation: none !important;
  }
  body[data-mode="enterprise"] .btn-primary {
    background-size: 100% 100%;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.35),
      0 4px 16px rgba(212, 175, 55, 0.28);
  }
}

/* While user is scrolling: freeze sticky infinite decorations (passive class) */
html.is-scrolling .logo-img-smb.logo-img-shine,
html.is-scrolling .logo-img-ent.logo-img-shine,
html.is-scrolling .mode-swatch-smb,
html.is-scrolling .mode-swatch-ent,
html.is-scrolling body[data-mode="enterprise"] .btn-primary,
html.is-scrolling body[data-mode="enterprise"] .btn-primary::after,
html.is-scrolling body[data-mode="enterprise"] .mobile-cta,
html.is-scrolling section.is-animating::before,
html.is-scrolling section.is-animating::after,
html.is-scrolling section.is-animating .process-card::before,
html.is-scrolling section.is-animating .process-card::after,
html.is-scrolling section.is-animating .cap-card::before,
html.is-scrolling section.is-animating .cap-card::after,
html.is-scrolling section.is-animating .svc-path-card::before,
html.is-scrolling section.is-animating .svc-path-card::after {
  animation-play-state: paused !important;
}

/* JS motion tiers */
html[data-motion="off"] .logo-img-smb.logo-img-shine,
html[data-motion="off"] .logo-img-ent.logo-img-shine,
html[data-motion="off"] .mode-swatch-smb,
html[data-motion="off"] .mode-swatch-ent,
html[data-motion="lite"] .logo-img-smb.logo-img-shine,
html[data-motion="lite"] .logo-img-ent.logo-img-shine {
  animation: none !important;
  filter: none !important;
}
html[data-motion="lite"] .mode-swatch-smb,
html[data-motion="lite"] .mode-swatch-ent {
  /* Keep a soft static glow - no continuous filter animation */
  animation: none !important;
  filter: none !important;
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 45%, transparent);
}
html[data-motion="off"] body[data-mode="enterprise"] .btn-primary,
html[data-motion="off"] body[data-mode="enterprise"] .btn-primary::after,
html[data-motion="off"] body[data-mode="enterprise"] .mobile-cta,
html[data-motion="lite"] body[data-mode="enterprise"] .btn-primary,
html[data-motion="lite"] body[data-mode="enterprise"] .btn-primary::after,
html[data-motion="lite"] body[data-mode="enterprise"] .mobile-cta {
  animation: none !important;
}

/* Services / article: fixed full-viewport fields hurt scroll - pin to main instead on touch */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
  body.services-smb-page .services-main::before,
  body.services-enterprise-page .services-main::before,
  body.services-enterprise-page .legal-main::before,
  body.article-geo-page .services-main::before,
  body.article-geo-page .legal-main::before {
    position: absolute !important;
    opacity: 0.16 !important;
  }
  body.services-smb-page .services-hero::before,
  body.services-smb-page .services-hero::after,
  body.services-enterprise-page .services-hero::before,
  body.services-enterprise-page .services-hero::after {
    animation: none !important;
  }
}

/* === Services SMB page === */
.services-main { max-width: 960px; }
.services-hero .services-markets {
  margin-top: 0.85rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 52rem;
}
.svc-grid {
  display: grid;
  gap: 1rem;
  margin: 1.5rem 0 2rem;
}
@media (min-width: 720px) {
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.svc-card {
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 16px;
}
.svc-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin: 0 0 0.4rem;
}
.svc-title {
  font-size: 1.1rem;
  line-height: 1.3;
  margin: 0 0 0.55rem;
}
.svc-body {
  margin: 0 0 0.75rem;
  color: var(--text);
  line-height: 1.55;
}
.svc-benefits {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.5;
}
.svc-why, .svc-cta {
  padding: 1.25rem 1.35rem;
  margin: 0 0 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border);
}
.svc-why h2, .svc-cta h2, .svc-faq-block h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
}
.svc-why-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.7rem 0.9rem;
  margin: 0 0 0.75rem;
}
.svc-why-head h2 {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.12rem;
}
.svc-why-mark {
  position: relative;
  flex: 0 0 auto;
  width: 2.85rem;
  line-height: 0;
  z-index: 2;
  pointer-events: none;
}
.svc-why-mark img {
  display: block;
  width: 100%;
  height: auto;
}
.svc-why-mark-light { display: none; }
.svc-why-mark-dark { display: block; }
html[data-theme="light"] .svc-why-mark-light { display: block; }
html[data-theme="light"] .svc-why-mark-dark { display: none; }
@media print {
  .svc-why-mark-light { display: block !important; }
  .svc-why-mark-dark { display: none !important; }
}
@media (min-width: 768px) {
  .svc-why-mark {
    width: 3.65rem;
  }
}
@media (min-width: 1100px) {
  .svc-why-mark {
    width: 4.5rem;
  }
}
.svc-why-list {
  margin: 0;
  padding-left: 1.15rem;
  line-height: 1.55;
}
.svc-why-list li { margin-bottom: 0.45rem; }
.svc-cta .band-cta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.65rem; }
.svc-faq-block { margin: 1.5rem 0 2.5rem; }
/* FAQ section title - match home FAQ eyebrow weight */
.svc-faq-block > h2 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
/* FAQ items - same pattern as home .faq (bold Q + / – toggle) */
.svc-faq {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm, 12px);
  background: var(--bg-card);
  padding: 0 1.25rem;
  margin-bottom: 0.6rem;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  box-shadow: inset 0 1px 0 var(--glass-shine, transparent);
}
.svc-faq:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--glass-border));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 8%, transparent);
}
.svc-faq[open] {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 8%, transparent), var(--bg-card));
}
.svc-faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 1.05rem 0;
  list-style: none;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--text);
}
.svc-faq summary::-webkit-details-marker { display: none; }
.svc-faq summary::after {
  content: "+";
  float: right;
  color: var(--accent);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  margin-left: 0.75rem;
  transition: transform 0.25s var(--ease, ease);
}
.svc-faq[open] summary::after {
  content: "–";
  transform: scale(1.1);
}
.svc-faq p {
  margin: 0 0 1.1rem;
  color: var(--muted);
  padding-right: 1.5rem;
  line-height: 1.7;
}
html[data-theme="light"] .svc-faq {
  background: #fff;
}
html[data-theme="light"] .svc-faq[open] {
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 6%, transparent), #fff);
}

/* === Enterprise services page === */
body.services-enterprise-page,
body[data-mode="enterprise"].services-enterprise-page {
  --accent: var(--gold, #d4a017);
}
.services-enterprise .svc-section-title {
  margin: 1.75rem 0 0.85rem;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.ent-regions {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  line-height: 1.5;
  max-width: 52rem;
}
.svc-bullets {
  margin: 0.65rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}
.svc-bullets li { margin-bottom: 0.28rem; }
.ent-core-grid,
.ent-plat-grid {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .ent-core-grid,
  .ent-plat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .ent-core-grid .svc-card:last-child:nth-child(odd),
  .ent-plat-grid .svc-card:last-child:nth-child(odd) {
    grid-column: auto;
  }
}
.ent-platform .svc-benefits { margin-top: 0.55rem; }
body[data-mode="enterprise"] .svc-num {
  color: var(--accent);
}

/* === Enterprise GEO extras === */
.geo-bluf-ent {
  border-left: 3px solid var(--accent);
  padding-left: 0.85rem;
  margin: 0.85rem 0 1rem;
  font-weight: 500;
}
.method-lead {
  color: var(--muted);
  max-width: 52rem;
  line-height: 1.55;
  margin: 0 0 1rem;
}
.method-grid {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}
@media (min-width: 720px) {
  .method-grid { grid-template-columns: 1fr 1fr; }
}
.method-step {
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.method-title {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}
.method-body {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.95rem;
}

/* ==========================================================================
   PROCESS SECTION - technical dark layer (hero left pure)
   Dot field + orbital rings + scan (no square grid); respects reduced-motion
   ========================================================================== */

/* Break out of .band max-width so the tech field spans the viewport */
section#process.band.process {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-8) 0;
  overflow: hidden;
  isolation: isolate;
  /* Deeper technical plate vs flat page black */
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(ellipse 50% 40% at 85% 80%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, #020605) 0%, #030806 45%, color-mix(in srgb, var(--bg-2) 70%, #020504) 100%);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--glass-border));
  content-visibility: visible;
}

/* Dot constellation + orbital rings (circular tech - no squares) */
section#process.band.process::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    /* fine circular node field */
    radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent) 0.85px, transparent 1.1px),
    /* sparse brighter nodes */
    radial-gradient(circle, color-mix(in srgb, var(--accent) 55%, transparent) 1.35px, transparent 1.7px),
    /* radar / orbit rings (right field, soft) */
    radial-gradient(circle at 78% 28%, transparent 14%, color-mix(in srgb, var(--accent) 11%, transparent) 14.4%, transparent 15.2%),
    radial-gradient(circle at 78% 28%, transparent 26%, color-mix(in srgb, var(--accent) 8%, transparent) 26.5%, transparent 27.5%),
    radial-gradient(circle at 78% 28%, transparent 40%, color-mix(in srgb, var(--accent) 6%, transparent) 40.6%, transparent 42%),
    /* soft left orbit echo */
    radial-gradient(circle at 12% 72%, transparent 10%, color-mix(in srgb, var(--accent) 7%, transparent) 10.5%, transparent 11.5%),
    radial-gradient(circle at 12% 72%, transparent 22%, color-mix(in srgb, var(--accent) 5%, transparent) 22.5%, transparent 24%),
    /* vignette */
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 28%, rgba(0, 0, 0, 0.58) 100%);
  background-size:
    26px 26px,
    64px 64px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    12px 18px,
    center,
    center,
    center,
    center,
    center,
    center;
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  animation: process-dot-drift 32s linear infinite;
}

/* Horizontal scan / telemetry sweep */
section#process.band.process::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -20%;
  height: 28%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 0%, transparent) 35%,
    color-mix(in srgb, var(--accent) 9%, transparent) 50%,
    color-mix(in srgb, var(--accent) 0%, transparent) 65%,
    transparent 100%
  );
  animation: process-scan-sweep 7.5s ease-in-out infinite;
  mix-blend-mode: screen;
}

section#process.band.process > .band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

/* Pipeline connector under the three phases (desktop) */
section#process .process-grid {
  gap: 1.15rem;
}
section#process .process-grid::before {
  content: "";
  position: absolute;
  top: 2.35rem;
  left: 8%;
  right: 8%;
  height: 1px;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 15%, transparent) 8%,
    color-mix(in srgb, var(--accent) 45%, transparent) 50%,
    color-mix(in srgb, var(--accent) 15%, transparent) 92%,
    transparent 100%
  );
  opacity: 0.7;
}
section#process .process-grid::after {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: 8%;
  width: 12%;
  height: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 75%, #fff);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: process-packet 5.5s ease-in-out infinite;
  opacity: 0.85;
}

section#process .process-card {
  z-index: 1;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elev) 92%, var(--accent)) 0%, var(--bg-card) 42%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 4%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease-out);
}
section#process .process-card:hover {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 18px 48px rgba(0, 0, 0, 0.4),
    0 0 32px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transform: translateY(-2px);
}

/* Live node pulse (round, not square corners) */
section#process .process-card::after {
  content: "";
  position: absolute;
  top: 0.85rem;
  right: 0.9rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: color-mix(in srgb, var(--accent) 85%, #fff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0.8;
  pointer-events: none;
  animation: process-node-pulse 2.8s ease-in-out infinite;
}
section#process .process-card:nth-child(2)::after { animation-delay: 0.7s; }
section#process .process-card:nth-child(3)::after { animation-delay: 1.4s; }

/* Accent rail: soft energy flow */
section#process .process-card::before {
  width: 2px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 20%, transparent) 0%,
    var(--accent) 35%,
    var(--accent-2) 55%,
    color-mix(in srgb, var(--accent) 20%, transparent) 100%
  );
  background-size: 100% 200%;
  animation: process-rail-flow 3.8s ease-in-out infinite;
  opacity: 1;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
}

section#process .process-num {
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent);
  letter-spacing: 0.2em;
}

/* Stagger rail animation per phase */
section#process .process-card:nth-child(2)::before {
  animation-delay: 0.9s;
}
section#process .process-card:nth-child(3)::before {
  animation-delay: 1.8s;
}

@keyframes process-dot-drift {
  0% {
    background-position:
      0 0,
      12px 18px,
      center, center, center, center, center, center;
  }
  100% {
    background-position:
      26px 26px,
      76px 82px,
      center, center, center, center, center, center;
  }
}
@keyframes process-node-pulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.9);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent),
      0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent),
      0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
@keyframes process-scan-sweep {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.9; }
  50% { opacity: 0.55; }
  88% { opacity: 0.85; }
  100% { transform: translateY(380%); opacity: 0; }
}
@keyframes process-packet {
  0% { left: 8%; opacity: 0; }
  8% { opacity: 0.9; }
  50% { left: 44%; opacity: 1; }
  92% { opacity: 0.85; }
  100% { left: 80%; opacity: 0; }
}
@keyframes process-rail-flow {
  0%, 100% { background-position: 0% 0%; opacity: 0.75; }
  50% { background-position: 0% 100%; opacity: 1; }
}

/* Enterprise gold process field */
body[data-mode="enterprise"] section#process.band.process {
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(ellipse 45% 40% at 15% 85%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    linear-gradient(180deg, #0a0906 0%, #0c0a06 50%, #100e08 100%);
  border-top-color: color-mix(in srgb, var(--accent) 22%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
body[data-mode="enterprise"] section#process.band.process::before {
  opacity: 0.38;
}

/* Light theme: technical, softer - keep WCAG AA body text on solid cards */
html[data-theme="light"] section#process.band.process {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    linear-gradient(180deg, #e8f2ee 0%, #e2ebe7 50%, #dce6e1 100%);
  border-top-color: color-mix(in srgb, var(--accent) 18%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-theme="light"] section#process.band.process::before {
  /* Decorative only - low opacity so body text contrast is never compromised */
  opacity: 0.22;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 45%, transparent) 0.9px, transparent 1.15px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 1.3px, transparent 1.7px),
    radial-gradient(circle at 78% 28%, transparent 14%, color-mix(in srgb, var(--accent) 14%, transparent) 14.4%, transparent 15.2%),
    radial-gradient(circle at 78% 28%, transparent 26%, color-mix(in srgb, var(--accent) 10%, transparent) 26.5%, transparent 27.5%),
    radial-gradient(circle at 78% 28%, transparent 40%, color-mix(in srgb, var(--accent) 8%, transparent) 40.6%, transparent 42%),
    radial-gradient(circle at 12% 72%, transparent 10%, color-mix(in srgb, var(--accent) 10%, transparent) 10.5%, transparent 11.5%),
    radial-gradient(circle at 12% 72%, transparent 22%, color-mix(in srgb, var(--accent) 7%, transparent) 22.5%, transparent 24%),
    radial-gradient(ellipse 90% 70% at 50% 40%, transparent 40%, rgba(255, 255, 255, 0.55) 100%);
  background-size:
    26px 26px,
    64px 64px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
}
html[data-theme="light"] section#process.band.process::after {
  /* Soft scan without multiply darkening text regions */
  mix-blend-mode: normal;
  opacity: 0.35;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 0%, transparent) 40%,
    color-mix(in srgb, var(--accent) 7%, transparent) 50%,
    color-mix(in srgb, var(--accent) 0%, transparent) 60%,
    transparent 100%
  );
}
html[data-theme="light"] section#process .process-card {
  background: #fff;
  box-shadow: 0 8px 28px rgba(12, 30, 24, 0.08);
  /* Ensure card text sits on opaque white (AA body text) */
  isolation: isolate;
}
html[data-theme="light"] section#process .process-card > * {
  position: relative;
  z-index: 1;
}
/* Accent labels on white: use deeper tone for small caps / meta (AA) */
html[data-theme="light"] section#process .process-num {
  color: var(--accent-3);
  text-shadow: none;
}
html[data-theme="light"] section#process .process-meta {
  color: var(--muted);
}
html[data-theme="light"] section#process .process-card h3 {
  color: var(--text);
}
html[data-theme="light"] section#process .process-card > p {
  color: var(--muted);
}
html[data-theme="light"] section#process .eyebrow {
  color: var(--accent-3);
}
/* Enterprise light process: gold accents deeper for small text */
html[data-theme="light"] body[data-mode="enterprise"] section#process .process-num,
html[data-theme="light"] body[data-mode="enterprise"] section#process .eyebrow {
  color: var(--accent-3);
}
html[data-theme="light"] body[data-mode="enterprise"] section#process.band.process {
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, #f5f0e4 0%, #f0eadc 50%, #ebe3d2 100%);
}

/* Mobile: hide pipeline line (stacked cards) */
@media (max-width: 720px) {
  section#process .process-grid::before,
  section#process .process-grid::after {
    display: none;
  }
  section#process.band.process {
    padding: var(--space-7) 0;
  }
}

/* Accessibility: no continuous motion when reduced */
@media (prefers-reduced-motion: reduce) {
  section#process.band.process::before,
  section#process.band.process::after,
  section#process .process-grid::after,
  section#process .process-card::before,
  section#process .process-card::after {
    animation: none !important;
  }
  section#process .process-card:hover {
    transform: none;
  }
  section#process .process-grid::after {
    display: none;
  }
}

/* ==========================================================================
   CAPABILITIES SECTION - technical dark layer (hero pure; no square grid)
   Dot constellation + signal arcs + card telemetry; reduced-motion safe
   SEO/GEO: CSS only - headings, Service schema, anchors unchanged
   ========================================================================== */

section#capabilities.band.capabilities {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-8) 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 65% 50% at 20% 10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 58%),
    radial-gradient(ellipse 55% 45% at 90% 70%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    linear-gradient(185deg, color-mix(in srgb, var(--bg-2) 55%, #020605) 0%, #030907 48%, color-mix(in srgb, var(--bg) 50%, #020504) 100%);
  border-top: 1px solid color-mix(in srgb, var(--accent) 16%, var(--glass-border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--glass-border));
  content-visibility: visible;
}

/* Constellation + orbital arcs (circular tech field - no squares) */
section#capabilities.band.capabilities::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.52;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent) 0.8px, transparent 1.05px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 50%, transparent) 1.25px, transparent 1.6px),
    /* large soft orbits - left/center bias (differs from process right-bias) */
    radial-gradient(circle at 22% 35%, transparent 12%, color-mix(in srgb, var(--accent) 10%, transparent) 12.5%, transparent 13.4%),
    radial-gradient(circle at 22% 35%, transparent 24%, color-mix(in srgb, var(--accent) 7%, transparent) 24.6%, transparent 25.8%),
    radial-gradient(circle at 22% 35%, transparent 38%, color-mix(in srgb, var(--accent) 5%, transparent) 38.7%, transparent 40.2%),
    radial-gradient(circle at 88% 75%, transparent 8%, color-mix(in srgb, var(--accent) 8%, transparent) 8.5%, transparent 9.5%),
    radial-gradient(circle at 88% 75%, transparent 18%, color-mix(in srgb, var(--accent) 5%, transparent) 18.5%, transparent 20%),
    radial-gradient(ellipse 92% 72% at 50% 45%, transparent 26%, rgba(0, 0, 0, 0.56) 100%);
  background-size:
    28px 28px,
    72px 72px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    18px 10px,
    center, center, center, center, center, center;
  mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 7%, #000 93%, transparent 100%);
  animation: cap-dot-drift 36s linear infinite;
}

/* Soft diagonal signal beam (not a grid) */
section#capabilities.band.capabilities::after {
  content: "";
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    118deg,
    transparent 0%,
    transparent 42%,
    color-mix(in srgb, var(--accent) 0%, transparent) 46%,
    color-mix(in srgb, var(--accent) 10%, transparent) 50%,
    color-mix(in srgb, var(--accent) 0%, transparent) 54%,
    transparent 58%,
    transparent 100%
  );
  background-size: 220% 220%;
  animation: cap-signal-sweep 9s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.75;
}

section#capabilities.band.capabilities > .band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

section#capabilities .cap-grid {
  position: relative;
  gap: 1.15rem;
  z-index: 1;
}

/* Subtle mesh links between engagement cards (curved feel via soft glows) */
section#capabilities .cap-grid::before {
  content: "";
  position: absolute;
  inset: 12% 6% 18% 6%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 0.35;
  animation: cap-ring-breathe 6.5s ease-in-out infinite;
}
section#capabilities .cap-grid::after {
  content: "";
  position: absolute;
  inset: 22% 14% 28% 14%;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--accent) 16%, transparent);
  opacity: 0.28;
  animation: cap-ring-breathe 8s ease-in-out infinite reverse;
}

section#capabilities .cap-card {
  z-index: 1;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--bg-elev) 90%, var(--accent)) 0%, var(--bg-card) 38%, var(--bg-card) 100%);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 4%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease-out);
  overflow: hidden;
}
section#capabilities .cap-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    0 16px 44px rgba(0, 0, 0, 0.38),
    0 0 28px color-mix(in srgb, var(--accent) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  transform: translateY(-2px);
}

/* Top energy line (distinct from process side rail) */
section#capabilities .cap-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 35%, transparent) 20%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 35%, transparent) 80%,
    transparent 100%
  );
  background-size: 200% 100%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: cap-top-flow 4.2s ease-in-out infinite;
  opacity: 0.85;
  pointer-events: none;
}

/* Round live node */
section#capabilities .cap-card::after {
  content: "";
  position: absolute;
  top: 0.9rem;
  right: 0.95rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, #fff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 48%, transparent);
  animation: cap-node-pulse 3s ease-in-out infinite;
  pointer-events: none;
}

section#capabilities .cap-card:nth-child(1)::before { animation-delay: 0s; }
section#capabilities .cap-card:nth-child(2)::before { animation-delay: 0.35s; }
section#capabilities .cap-card:nth-child(3)::before { animation-delay: 0.7s; }
section#capabilities .cap-card:nth-child(4)::before { animation-delay: 1.05s; }
section#capabilities .cap-card:nth-child(5)::before { animation-delay: 1.4s; }
section#capabilities .cap-card:nth-child(6)::before { animation-delay: 1.75s; }

section#capabilities .cap-card:nth-child(1)::after { animation-delay: 0s; }
section#capabilities .cap-card:nth-child(2)::after { animation-delay: 0.4s; }
section#capabilities .cap-card:nth-child(3)::after { animation-delay: 0.8s; }
section#capabilities .cap-card:nth-child(4)::after { animation-delay: 1.2s; }
section#capabilities .cap-card:nth-child(5)::after { animation-delay: 1.6s; }
section#capabilities .cap-card:nth-child(6)::after { animation-delay: 2s; }

section#capabilities .cap-card h3 {
  padding-right: 1.25rem; /* room for live node */
}
section#capabilities #cap-agentic-ai h3,
section#capabilities #cap-crm-automation h3,
section#capabilities #cap-sales-funnel h3 {
  padding-right: 3.2rem;
}
section#capabilities .cap-glyph {
  position: absolute;
  top: 1.02rem;
  right: 1.88rem;
  width: 1.52rem;
  height: 1.52rem;
  color: var(--accent);
  opacity: 0.92;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 42%, transparent));
}
section#capabilities .cap-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}
html[data-theme="light"] section#capabilities .cap-card > .cap-glyph {
  position: absolute;
  top: 1.02rem;
  right: 1.88rem;
  width: 1.52rem;
  height: 1.52rem;
  z-index: 2;
  filter: none;
  opacity: 0.95;
}
body[data-mode="smb"] section#capabilities .cap-glyph-ent {
  display: none;
}
body[data-mode="enterprise"] section#capabilities .cap-glyph-smb {
  display: none;
}

@keyframes cap-dot-drift {
  0% {
    background-position: 0 0, 18px 10px, center, center, center, center, center, center;
  }
  100% {
    background-position: 28px 28px, 90px 82px, center, center, center, center, center, center;
  }
}
@keyframes cap-signal-sweep {
  0% { background-position: 0% 50%; opacity: 0.2; }
  20% { opacity: 0.85; }
  50% { background-position: 100% 50%; opacity: 0.55; }
  80% { opacity: 0.9; }
  100% { background-position: 200% 50%; opacity: 0.2; }
}
@keyframes cap-ring-breathe {
  0%, 100% { opacity: 0.2; transform: scale(0.98); }
  50% { opacity: 0.4; transform: scale(1.02); }
}
@keyframes cap-top-flow {
  0%, 100% { background-position: 0% 0%; opacity: 0.55; }
  50% { background-position: 100% 0%; opacity: 1; }
}
@keyframes cap-node-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.9);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent),
      0 0 8px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow:
      0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent),
      0 0 16px color-mix(in srgb, var(--accent) 52%, transparent);
  }
}

/* Enterprise gold capabilities field */
body[data-mode="enterprise"] section#capabilities.band.capabilities {
  background:
    radial-gradient(ellipse 65% 50% at 25% 15%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 40% at 85% 80%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 55%),
    linear-gradient(185deg, #0a0906 0%, #0d0b07 50%, #110e09 100%);
  border-top-color: color-mix(in srgb, var(--accent) 20%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 14%, transparent);
}
body[data-mode="enterprise"] section#capabilities.band.capabilities::before {
  opacity: 0.4;
}

/* Light mode: softer tech, solid cards for AA text */
html[data-theme="light"] section#capabilities.band.capabilities {
  background:
    radial-gradient(ellipse 65% 50% at 20% 10%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 58%),
    linear-gradient(185deg, #e8f2ee 0%, #e4ece8 50%, #dde8e3 100%);
  border-top-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-theme="light"] section#capabilities.band.capabilities::before {
  opacity: 0.2;
}
html[data-theme="light"] section#capabilities.band.capabilities::after {
  mix-blend-mode: normal;
  opacity: 0.3;
}
html[data-theme="light"] section#capabilities .cap-card {
  background: #fff;
  box-shadow: 0 8px 28px rgba(12, 30, 24, 0.08);
  isolation: isolate;
}
html[data-theme="light"] section#capabilities .cap-card > *:not(.cap-glyph) {
  position: relative;
  z-index: 1;
}
html[data-theme="light"] section#capabilities .cap-card h3 {
  color: var(--text);
}
html[data-theme="light"] section#capabilities .cap-card > p {
  color: var(--muted);
}
html[data-theme="light"] section#capabilities .eyebrow {
  color: var(--accent-3);
}
html[data-theme="light"] body[data-mode="enterprise"] section#capabilities.band.capabilities {
  background:
    radial-gradient(ellipse 65% 50% at 25% 12%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 58%),
    linear-gradient(185deg, #f5f0e4 0%, #f0eadc 50%, #ebe3d2 100%);
}
html[data-theme="light"] body[data-mode="enterprise"] section#capabilities .eyebrow {
  color: var(--accent-3);
}

@media (max-width: 720px) {
  section#capabilities.band.capabilities {
    padding: var(--space-6) 0 0.75rem;
  }
  .workspace {
    padding-top: 0.55rem;
  }
  .workspace-visual {
    margin-bottom: 0.7rem;
  }
  .workspace-visual img {
    max-height: none;
    object-fit: contain;
  }
  .tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .tab {
    padding: 0.55rem 0.2rem 0.65rem;
    align-items: center;
    text-align: center;
  }
  .tab-label {
    font-size: 0.58rem;
    letter-spacing: 0.02em;
  }
}
  section#capabilities .cap-grid::before,
  section#capabilities .cap-grid::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  section#capabilities.band.capabilities::before,
  section#capabilities.band.capabilities::after,
  section#capabilities .cap-grid::before,
  section#capabilities .cap-grid::after,
  section#capabilities .cap-card::before,
  section#capabilities .cap-card::after {
    animation: none !important;
  }
  section#capabilities .cap-card:hover {
    transform: none;
  }
}

/* ==========================================================================
   BOTTOM LINE (geo-bluf) - high-tech executive brief
   Business tone + subtle telemetry; no square grids; SEO content untouched
   ========================================================================== */

section.geo-bluf {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-6) 0 var(--space-7);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 55% 70% at 8% 50%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    radial-gradient(ellipse 40% 50% at 95% 40%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 70%, #020605) 0%, #040a08 100%);
  border-top: 1px solid color-mix(in srgb, var(--accent) 14%, var(--glass-border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 10%, var(--glass-border));
}

/* Soft node field only (circular, no squares) */
section.geo-bluf::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 38%, transparent) 0.75px, transparent 1px),
    radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 1.2px, transparent 1.55px),
    radial-gradient(circle at 92% 50%, transparent 8%, color-mix(in srgb, var(--accent) 8%, transparent) 8.4%, transparent 9.2%),
    radial-gradient(circle at 92% 50%, transparent 18%, color-mix(in srgb, var(--accent) 5%, transparent) 18.5%, transparent 19.8%);
  background-size: 32px 32px, 70px 70px, 100% 100%, 100% 100%;
  background-position: 0 0, 14px 8px, center, center;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  animation: bluf-dot-drift 40s linear infinite;
}

/* Horizontal executive scan */
section.geo-bluf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--accent) 6%, transparent) 48%,
    transparent 100%
  );
  animation: bluf-scan 8s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.65;
}

/* Constrain content */
section.geo-bluf > h2,
section.geo-bluf > p {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  box-sizing: border-box;
  width: 100%;
}

/* Eyebrow as live status line */
section.geo-bluf > h2 {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 auto 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent);
}
section.geo-bluf > h2::before {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: bluf-node-pulse 2.6s ease-in-out infinite;
}

/* Executive brief panel */
section.geo-bluf > p {
  margin: 0 auto;
  padding: 1.55rem 1.65rem 1.55rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elev) 88%, var(--accent)) 0%, var(--bg-card) 45%, var(--bg-card) 100%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--muted);
  line-height: 1.75;
  font-size: 1.04rem;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  overflow: hidden;
}

/* Left energy rail on the brief */
section.geo-bluf > p::before {
  content: "";
  position: absolute;
  left: 1.35rem;
  top: calc(0.78rem + 1.6rem); /* roughly under h2 - rail on panel instead */
  display: none;
}

/* Rail attached to panel via wrapper-less trick: use box + pseudo on p */
section.geo-bluf > p {
  position: relative;
}
section.geo-bluf > p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 2px;
  display: block;
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--accent) 25%,
    var(--accent-2) 55%,
    transparent 100%
  );
  background-size: 100% 200%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 45%, transparent);
  animation: bluf-rail 3.5s ease-in-out infinite;
}

/* Top hairline telemetry */
section.geo-bluf > p::after {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 50%, transparent) 30%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 50%, transparent) 70%,
    transparent
  );
  background-size: 200% 100%;
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: bluf-top-flow 4.5s ease-in-out infinite;
  opacity: 0.85;
  pointer-events: none;
}

@keyframes bluf-dot-drift {
  0% { background-position: 0 0, 14px 8px, center, center; }
  100% { background-position: 32px 32px, 84px 78px, center, center; }
}
@keyframes bluf-scan {
  0%, 100% { transform: translateY(0); opacity: 0.25; }
  45% { opacity: 0.7; }
  100% { transform: translateY(180%); opacity: 0.2; }
}
@keyframes bluf-node-pulse {
  0%, 100% {
    opacity: 0.55;
    transform: scale(0.92);
    box-shadow:
      0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent),
      0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent),
      0 0 14px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}
@keyframes bluf-rail {
  0%, 100% { background-position: 0% 0%; opacity: 0.7; }
  50% { background-position: 0% 100%; opacity: 1; }
}
@keyframes bluf-top-flow {
  0%, 100% { background-position: 0% 0%; opacity: 0.5; }
  50% { background-position: 100% 0%; opacity: 1; }
}

/* Enterprise gold brief */
body[data-mode="enterprise"] section.geo-bluf {
  background:
    radial-gradient(ellipse 55% 70% at 10% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, #0a0906 0%, #0c0a07 100%);
  border-top-color: color-mix(in srgb, var(--accent) 18%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Light mode - business paper + AA-safe text */
html[data-theme="light"] section.geo-bluf {
  background:
    radial-gradient(ellipse 50% 60% at 8% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 60%),
    linear-gradient(180deg, #eef4f1 0%, #e8f0ec 100%);
  border-top-color: color-mix(in srgb, var(--accent) 14%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 10%, transparent);
}
html[data-theme="light"] section.geo-bluf::before {
  opacity: 0.18;
}
html[data-theme="light"] section.geo-bluf::after {
  mix-blend-mode: normal;
  opacity: 0.28;
}
html[data-theme="light"] section.geo-bluf > h2 {
  color: var(--accent-3);
  text-shadow: none;
}
html[data-theme="light"] section.geo-bluf > p {
  background: #fff;
  color: var(--muted);
  box-shadow: 0 10px 28px rgba(12, 30, 24, 0.08);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--glass-border));
}
html[data-theme="light"] body[data-mode="enterprise"] section.geo-bluf {
  background:
    radial-gradient(ellipse 50% 60% at 8% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%),
    linear-gradient(180deg, #f5f0e4 0%, #f0eadc 100%);
}
html[data-theme="light"] body[data-mode="enterprise"] section.geo-bluf > h2 {
  color: var(--accent-3);
}

@media (max-width: 720px) {
  section.geo-bluf {
    padding: var(--space-5) 0 var(--space-6);
  }
  section.geo-bluf > p {
    padding: 1.25rem 1.2rem 1.25rem 1.35rem;
    font-size: 0.98rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  section.geo-bluf::before,
  section.geo-bluf::after,
  section.geo-bluf > h2::before,
  section.geo-bluf > p::before,
  section.geo-bluf > p::after {
    animation: none !important;
  }
}

/* ==========================================================================
   SERVICE PATHS - high-tech business CTA gateway
   Dual-path conversion hotspot: emerald vs gold; dots/orbits (no squares)
   SEO: CSS only - links, copy, anchors unchanged
   ========================================================================== */

section#services-paths.band.services-paths {
  position: relative;
  max-width: none;
  width: 100%;
  margin: 0;
  padding: var(--space-8) 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 50% 55% at 18% 40%, color-mix(in srgb, #10b981 14%, transparent), transparent 58%),
    radial-gradient(ellipse 50% 55% at 82% 45%, color-mix(in srgb, #d4af37 12%, transparent), transparent 58%),
    radial-gradient(ellipse 80% 40% at 50% 100%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    linear-gradient(180deg, #030806 0%, #050a08 45%, #040907 100%);
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-border));
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 14%, var(--glass-border));
  content-visibility: visible;
}

/* Dual constellation field - emerald left / gold right bias */
section#services-paths.band.services-paths::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(circle, color-mix(in srgb, #10b981 45%, transparent) 0.8px, transparent 1.05px),
    radial-gradient(circle, color-mix(in srgb, #d4af37 40%, transparent) 0.8px, transparent 1.05px),
    radial-gradient(circle, color-mix(in srgb, #10b981 55%, transparent) 1.3px, transparent 1.65px),
    radial-gradient(circle, color-mix(in srgb, #d4af37 50%, transparent) 1.3px, transparent 1.65px),
    /* left emerald orbit */
    radial-gradient(circle at 22% 48%, transparent 10%, color-mix(in srgb, #10b981 12%, transparent) 10.5%, transparent 11.6%),
    radial-gradient(circle at 22% 48%, transparent 22%, color-mix(in srgb, #10b981 7%, transparent) 22.6%, transparent 24%),
    /* right gold orbit */
    radial-gradient(circle at 78% 48%, transparent 10%, color-mix(in srgb, #d4af37 12%, transparent) 10.5%, transparent 11.6%),
    radial-gradient(circle at 78% 48%, transparent 22%, color-mix(in srgb, #d4af37 7%, transparent) 22.6%, transparent 24%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
  background-size:
    26px 26px,
    26px 26px,
    64px 64px,
    64px 64px,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    13px 13px,
    8px 4px,
    40px 36px,
    center, center, center, center, center;
  mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  animation: paths-field-drift 34s linear infinite;
}

/* Center choice pulse / cross-fade beam */
section#services-paths.band.services-paths::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  bottom: 18%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, #10b981 35%, transparent) 20%,
    color-mix(in srgb, #d4af37 40%, transparent) 50%,
    color-mix(in srgb, #10b981 35%, transparent) 80%,
    transparent 100%
  );
  box-shadow:
    0 0 18px color-mix(in srgb, #10b981 25%, transparent),
    0 0 18px color-mix(in srgb, #d4af37 25%, transparent);
  opacity: 0.55;
  animation: paths-spine-pulse 4s ease-in-out infinite;
}

section#services-paths.band.services-paths > .band-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: 1.35rem;
  padding-right: 1.35rem;
}

section#services-paths .band-head {
  margin-bottom: 1.75rem;
  text-align: center;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
section#services-paths .band-head .eyebrow {
  justify-content: center;
}
section#services-paths .band-lead {
  margin-left: auto;
  margin-right: auto;
}

section#services-paths .svc-paths-grid {
  position: relative;
  z-index: 1;
  gap: 1.35rem;
}

/* Gateway cards - CTA grade */
section#services-paths .svc-path-card {
  position: relative;
  z-index: 1;
  gap: 0.7rem;
  padding: 1.65rem 1.55rem 1.45rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--bg-elev) 88%, var(--accent)) 0%, var(--bg-card) 40%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 5%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);
  transition:
    border-color 0.25s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease-out),
    background 0.25s;
}
/* Highlight whole gateway only when the CTA chip is pointed at / focused */
section#services-paths .svc-path-card:has(.svc-path-cta:hover),
section#services-paths .svc-path-card:has(.svc-path-cta:focus-visible) {
  transform: translateY(-4px);
}

/* Top telemetry bar */
section#services-paths .svc-path-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 40%, transparent) 25%,
    var(--accent) 50%,
    color-mix(in srgb, var(--accent) 40%, transparent) 75%,
    transparent
  );
  background-size: 200% 100%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
  animation: paths-top-flow 3.8s ease-in-out infinite;
  pointer-events: none;
}

/* Live node */
section#services-paths .svc-path-card::after {
  content: "";
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 90%, #fff);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent),
    0 0 14px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: paths-node-pulse 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* SMB card - emerald gateway */
section#services-paths .svc-path-smb {
  border-color: color-mix(in srgb, #10b981 28%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, #0a1f18 40%, transparent) 0%, var(--bg-card) 42%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 10%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 40px color-mix(in srgb, #10b981 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, #10b981 8%, transparent);
}
section#services-paths .svc-path-smb::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #10b981 45%, transparent) 25%,
    #34d399 50%,
    color-mix(in srgb, #10b981 45%, transparent) 75%,
    transparent
  );
  background-size: 200% 100%;
  box-shadow: 0 0 14px color-mix(in srgb, #10b981 45%, transparent);
}
section#services-paths .svc-path-smb::after {
  background: #34d399;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #10b981 20%, transparent),
    0 0 14px color-mix(in srgb, #10b981 55%, transparent);
}
section#services-paths .svc-path-smb .svc-path-kicker { color: #34d399; }
section#services-paths .svc-path-smb .svc-path-cta { color: #5ee4c0; }
section#services-paths .svc-path-smb:has(.svc-path-cta:hover),
section#services-paths .svc-path-smb:has(.svc-path-cta:focus-visible) {
  border-color: color-mix(in srgb, #10b981 55%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 22%, transparent),
    0 22px 52px rgba(0, 0, 0, 0.42),
    0 0 48px color-mix(in srgb, #10b981 16%, transparent),
    inset 0 1px 0 color-mix(in srgb, #10b981 12%, transparent);
}

/* Enterprise card - gold gateway */
section#services-paths .svc-path-ent {
  border-color: color-mix(in srgb, #d4af37 30%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, #1a160c 45%, transparent) 0%, var(--bg-card) 42%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 12%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 40px color-mix(in srgb, #d4af37 7%, transparent),
    inset 0 1px 0 color-mix(in srgb, #d4af37 10%, transparent);
}
section#services-paths .svc-path-ent::before {
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, #d4af37 45%, transparent) 25%,
    #f0d070 50%,
    color-mix(in srgb, #d4af37 45%, transparent) 75%,
    transparent
  );
  background-size: 200% 100%;
  box-shadow: 0 0 14px color-mix(in srgb, #d4af37 45%, transparent);
  animation-delay: 0.6s;
}
section#services-paths .svc-path-ent::after {
  background: #f0d070;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #d4af37 22%, transparent),
    0 0 14px color-mix(in srgb, #d4af37 55%, transparent);
  animation-delay: 0.5s;
}
section#services-paths .svc-path-ent .svc-path-kicker { color: #f0d070; }
section#services-paths .svc-path-ent .svc-path-cta { color: #f0d078; }
section#services-paths .svc-path-ent:has(.svc-path-cta:hover),
section#services-paths .svc-path-ent:has(.svc-path-cta:focus-visible) {
  border-color: color-mix(in srgb, #d4af37 58%, transparent);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 25%, transparent),
    0 22px 52px rgba(0, 0, 0, 0.42),
    0 0 48px color-mix(in srgb, #d4af37 18%, transparent),
    inset 0 1px 0 color-mix(in srgb, #d4af37 14%, transparent);
}

/* CTA line - business urgency */
section#services-paths .svc-path-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.65rem;
  padding: 0.55rem 0.95rem;
  font-size: 0.86rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  background: color-mix(in srgb, currentColor 8%, transparent);
  width: fit-content;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 2;
}
section#services-paths .svc-path-cta:hover,
section#services-paths .svc-path-cta:focus-visible {
  background: color-mix(in srgb, currentColor 16%, transparent);
  border-color: color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 20px color-mix(in srgb, currentColor 18%, transparent);
  transform: translateX(3px);
}

section#services-paths .svc-path-kicker {
  font-family: var(--mono);
  letter-spacing: 0.12em;
  font-weight: 700;
}
section#services-paths .svc-path-card h3 {
  font-size: 1.28rem;
  font-weight: 750;
  letter-spacing: -0.025em;
  padding-right: 1.4rem;
  color: var(--text);
}
section#services-paths .svc-path-card p {
  font-size: 0.94rem;
  line-height: 1.62;
}

/* Active mode highlight already in base - reinforce */
body[data-mode="smb"] section#services-paths .svc-path-smb {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 30%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 48px color-mix(in srgb, #10b981 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #10b981 10%, transparent);
}
body[data-mode="enterprise"] section#services-paths .svc-path-ent {
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 32%, transparent),
    0 18px 44px rgba(0, 0, 0, 0.38),
    0 0 48px color-mix(in srgb, #d4af37 14%, transparent),
    inset 0 1px 0 color-mix(in srgb, #d4af37 12%, transparent);
}

@keyframes paths-field-drift {
  0% {
    background-position: 0 0, 13px 13px, 8px 4px, 40px 36px, center, center, center, center, center;
  }
  100% {
    background-position: 26px 26px, 39px 39px, 72px 68px, 104px 100px, center, center, center, center, center;
  }
}
@keyframes paths-spine-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.75; }
}
@keyframes paths-top-flow {
  0%, 100% { background-position: 0% 0%; opacity: 0.55; }
  50% { background-position: 100% 0%; opacity: 1; }
}
@keyframes paths-node-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Light mode - CTA still strong, AA text on white cards */
html[data-theme="light"] section#services-paths.band.services-paths {
  background:
    radial-gradient(ellipse 45% 50% at 20% 40%, color-mix(in srgb, #0d8f72 10%, transparent), transparent 58%),
    radial-gradient(ellipse 45% 50% at 80% 45%, color-mix(in srgb, #b8860b 9%, transparent), transparent 58%),
    linear-gradient(180deg, #eef4f1 0%, #e6efe9 100%);
  border-top-color: color-mix(in srgb, var(--accent) 16%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
html[data-theme="light"] section#services-paths.band.services-paths::before {
  opacity: 0.2;
}
html[data-theme="light"] section#services-paths.band.services-paths::after {
  opacity: 0.35;
  box-shadow: none;
}
html[data-theme="light"] section#services-paths .svc-path-card,
html[data-theme="light"] section#services-paths .svc-path-smb,
html[data-theme="light"] section#services-paths .svc-path-ent {
  background: #fff;
  box-shadow: 0 12px 32px rgba(12, 30, 24, 0.1);
}
html[data-theme="light"] section#services-paths .svc-path-smb {
  border-color: color-mix(in srgb, #0b7a62 30%, transparent);
}
html[data-theme="light"] section#services-paths .svc-path-ent {
  border-color: color-mix(in srgb, #9a7209 32%, transparent);
}
html[data-theme="light"] section#services-paths .svc-path-card h3 {
  color: var(--text);
}
html[data-theme="light"] section#services-paths .svc-path-card p {
  color: var(--muted);
}
html[data-theme="light"] section#services-paths .svc-path-smb .svc-path-kicker,
html[data-theme="light"] section#services-paths .svc-path-smb .svc-path-cta {
  color: #085544;
}
html[data-theme="light"] section#services-paths .svc-path-ent .svc-path-kicker,
html[data-theme="light"] section#services-paths .svc-path-ent .svc-path-cta {
  color: #7a5a08;
}
html[data-theme="light"] section#services-paths .eyebrow {
  color: var(--accent-3);
}

@media (max-width: 720px) {
  section#services-paths.band.services-paths {
    padding: var(--space-7) 0;
  }
  section#services-paths.band.services-paths::after {
    display: none; /* spine between stacked cards less useful */
  }
  section#services-paths .band-head {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  section#services-paths.band.services-paths::before,
  section#services-paths.band.services-paths::after,
  section#services-paths .svc-path-card::before,
  section#services-paths .svc-path-card::after {
    animation: none !important;
  }
  section#services-paths .svc-path-card:has(.svc-path-cta:hover),
  section#services-paths .svc-path-card:has(.svc-path-cta:focus-visible) {
    transform: none;
  }
  section#services-paths .svc-path-cta:hover,
  section#services-paths .svc-path-cta:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   PERFORMANCE - pause decorative motion when off-screen; cheaper paint
   ========================================================================== */

/* Text sections always paint (fast scroll must never blank copy) */
section#process.band.process,
section#capabilities.band.capabilities,
section#services-paths.band.services-paths,
section.geo-bluf,
section.faq,
section.close-cta {
  content-visibility: visible;
}

/* Default: freeze infinite CSS animations until .is-animating (IO sets it) */
section#process.band.process:not(.is-animating)::before,
section#process.band.process:not(.is-animating)::after,
section#process:not(.is-animating) .process-grid::after,
section#process:not(.is-animating) .process-card::before,
section#process:not(.is-animating) .process-card::after,
section#capabilities.band.capabilities:not(.is-animating)::before,
section#capabilities.band.capabilities:not(.is-animating)::after,
section#capabilities:not(.is-animating) .cap-grid::before,
section#capabilities:not(.is-animating) .cap-grid::after,
section#capabilities:not(.is-animating) .cap-card::before,
section#capabilities:not(.is-animating) .cap-card::after,
section#services-paths.band.services-paths:not(.is-animating)::before,
section#services-paths.band.services-paths:not(.is-animating)::after,
section#services-paths:not(.is-animating) .svc-path-card::before,
section#services-paths:not(.is-animating) .svc-path-card::after,
section.geo-bluf:not(.is-animating)::before,
section.geo-bluf:not(.is-animating)::after,
section.geo-bluf:not(.is-animating) > h2::before,
section.geo-bluf:not(.is-animating) > p::before,
section.geo-bluf:not(.is-animating) > p::after {
  animation-play-state: paused !important;
}

/* On low-end / small screens: drop continuous field drift + scans/pulses */
@media (max-width: 720px) {
  section#process.band.process::before,
  section#process.band.process::after,
  section#capabilities.band.capabilities::before,
  section#capabilities.band.capabilities::after,
  section#services-paths.band.services-paths::before,
  section#services-paths.band.services-paths::after,
  section.geo-bluf::before,
  section.geo-bluf::after,
  section#process .process-grid::after,
  section#process .process-card::before,
  section#process .process-card::after,
  section#capabilities .cap-grid::before,
  section#capabilities .cap-grid::after,
  section#capabilities .cap-card::before,
  section#capabilities .cap-card::after,
  section#services-paths .svc-path-card::before,
  section#services-paths .svc-path-card::after {
    animation: none !important;
  }
  /* Fewer simultaneous glow layers on mobile */
  section#process .process-card,
  section#capabilities .cap-card,
  section#services-paths .svc-path-card {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28) !important;
  }
  section#process.is-animating .process-card::after,
  section#capabilities.is-animating .cap-card::after,
  section#services-paths.is-animating .svc-path-cta {
    will-change: auto !important;
  }
}

/* Prefer compositor-friendly transforms only while visible */
section#process.is-animating .process-card::after,
section#capabilities.is-animating .cap-card::after,
section#services-paths.is-animating .svc-path-cta {
  will-change: transform, opacity;
}
section#process:not(.is-animating) .process-card::after,
section#capabilities:not(.is-animating) .cap-card::after {
  will-change: auto;
}

/* ==========================================================================
   SMB SERVICES PAGE - expert business atmosphere (not flat black/white)
   Hero + page field; CSS only; SEO copy untouched
   ========================================================================== */

/* Page canvas: professional emerald slate (dark) / mint paper (light) */
body.services-smb-page {
  background-color: #050b09;
  background-image:
    radial-gradient(ellipse 70% 80% at 0% 18%, rgba(16, 185, 129, 0.16), transparent 58%),
    radial-gradient(ellipse 55% 70% at 100% 42%, rgba(13, 148, 112, 0.11), transparent 52%),
    radial-gradient(ellipse 90% 42% at 50% -8%, rgba(52, 211, 153, 0.1), transparent 48%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(6, 40, 30, 0.55), transparent 55%),
    linear-gradient(180deg, #06100c 0%, #08140f 42%, #050c09 100%);
}
html[data-theme="light"] body.services-smb-page {
  background-color: #eef5f1;
  background-image:
    radial-gradient(ellipse 70% 70% at 0% 12%, rgba(13, 143, 114, 0.12), transparent 55%),
    radial-gradient(ellipse 55% 60% at 100% 30%, rgba(11, 122, 98, 0.08), transparent 50%),
    radial-gradient(ellipse 90% 40% at 50% 0%, rgba(16, 185, 129, 0.06), transparent 50%),
    linear-gradient(180deg, #f3f8f5 0%, #e8f1ec 55%, #e4ede8 100%);
}

/* Full-bleed datacenter aisle: tablet and desktop (phones stay a solid column) */
body.services-smb-page .svc-smb-stage {
  display: none;
}
@media (min-width: 768px) {
  body.services-smb-page .svc-smb-stage {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }
  body.services-smb-page .svc-smb-stage picture,
  body.services-smb-page .svc-smb-stage img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  body.services-smb-page .svc-smb-stage img {
    object-fit: cover;
    object-position: center 42%;
    opacity: 0.52;
  }
  body.services-smb-page .svc-smb-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(5, 11, 9, 0.1) 0%, rgba(5, 11, 9, 0.62) 16%, rgba(5, 11, 9, 0.88) 50%, rgba(5, 11, 9, 0.62) 84%, rgba(5, 11, 9, 0.1) 100%),
      linear-gradient(180deg, rgba(5, 11, 9, 0.48) 0%, rgba(5, 11, 9, 0.18) 18%, rgba(5, 11, 9, 0.22) 64%, rgba(5, 11, 9, 0.76) 100%);
  }
}
@media (min-width: 1100px) {
  body.services-smb-page .svc-smb-stage img {
    opacity: 0.58;
  }
  body.services-smb-page .svc-smb-stage::after {
    background:
      linear-gradient(90deg, rgba(5, 11, 9, 0.12) 0%, rgba(5, 11, 9, 0.78) 24%, rgba(5, 11, 9, 0.92) 50%, rgba(5, 11, 9, 0.78) 76%, rgba(5, 11, 9, 0.12) 100%),
      linear-gradient(180deg, rgba(5, 11, 9, 0.5) 0%, rgba(5, 11, 9, 0.18) 20%, rgba(5, 11, 9, 0.22) 64%, rgba(5, 11, 9, 0.78) 100%);
  }
}
html[data-theme="light"] body.services-smb-page .svc-smb-stage {
  display: none;
}
@media (prefers-reduced-data: reduce) {
  body.services-smb-page .svc-smb-stage {
    display: none !important;
  }
}

/* Soft circular node field behind main (no squares) */
body.services-smb-page .services-main {
  position: relative;
  z-index: 1;
}
body.services-smb-page .services-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  /* absolute (not fixed): scrolls with page → far cheaper on mobile GPUs */
  background-image:
    radial-gradient(circle, rgba(16, 185, 129, 0.35) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(52, 211, 153, 0.22) 1.1px, transparent 1.45px);
  background-size: 36px 36px, 72px 72px;
  background-position: 0 0, 18px 12px;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
html[data-theme="light"] body.services-smb-page .services-main::before {
  opacity: 0.14;
  background-image:
    radial-gradient(circle, rgba(11, 122, 98, 0.35) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(8, 85, 68, 0.2) 1.1px, transparent 1.45px);
}

/* Hero: executive brief banner */
body.services-smb-page .services-hero {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: 1.75rem 1.65rem 1.85rem 1.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--glass-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 92%, #0a1f18) 0%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 6%, transparent),
    0 20px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
  overflow: hidden;
}

/* Left emerald energy rail */
body.services-smb-page .services-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #10b981 20%,
    #34d399 50%,
    #10b981 80%,
    transparent 100%
  );
  background-size: 100% 200%;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.45);
  animation: smb-hero-rail 4s ease-in-out infinite;
  pointer-events: none;
}

/* Soft orbit + top telemetry (circular tech, not grid) */
body.services-smb-page .services-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 92% 18%, transparent 6%, rgba(16, 185, 129, 0.12) 6.4%, transparent 7.2%),
    radial-gradient(circle at 92% 18%, transparent 14%, rgba(16, 185, 129, 0.07) 14.5%, transparent 16%),
    linear-gradient(
      90deg,
      transparent 8%,
      rgba(16, 185, 129, 0.25) 30%,
      rgba(52, 211, 153, 0.55) 50%,
      rgba(16, 185, 129, 0.25) 70%,
      transparent 92%
    );
  background-size: 100% 100%, 100% 100%, 200% 2px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat;
  animation: smb-hero-top 5s ease-in-out infinite;
  mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%);
}

body.services-smb-page .services-hero > * {
  position: relative;
  z-index: 1;
}

body.services-smb-page .services-hero .eyebrow {
  color: #34d399;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(16, 185, 129, 0.25);
}
body.services-smb-page .services-hero h1 {
  color: var(--text);
  letter-spacing: -0.032em;
}
body.services-smb-page .services-hero .legal-lead {
  color: var(--muted);
  max-width: 46rem;
}
body.services-smb-page .services-hero .legal-bluf {
  border-left-color: #10b981;
  background: color-mix(in srgb, #10b981 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #10b981 10%, transparent);
}
/* Multi-paragraph GEO intro: equal-width fields (copy/schema unchanged) */
body.services-smb-page .services-hero #svc-intro,
body.services-smb-page .services-hero [data-intro-extra] {
  margin-top: 0.75rem;
  margin-bottom: 0;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}
body.services-smb-page .services-hero #svc-intro {
  margin-top: 0.85rem;
}
body.services-smb-page .services-hero [data-intro-extra]:last-of-type {
  margin-bottom: 0.15rem;
}
body.services-smb-page .services-hero .services-markets {
  color: var(--faint);
  font-size: 0.92rem;
}

/* Light: expert paper panel (not flat white page) */
html[data-theme="light"] body.services-smb-page .services-hero {
  background:
    linear-gradient(145deg, rgba(13, 143, 114, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #f4faf7 100%);
  border-color: color-mix(in srgb, #0b7a62 22%, rgba(15, 40, 32, 0.12));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9),
    0 16px 40px rgba(12, 40, 32, 0.08);
}
html[data-theme="light"] body.services-smb-page .services-hero::before {
  background: linear-gradient(180deg, transparent, #0b7a62 25%, #0d8f72 55%, #0b7a62 80%, transparent);
  box-shadow: 0 0 10px rgba(11, 122, 98, 0.25);
}
html[data-theme="light"] body.services-smb-page .services-hero .eyebrow {
  color: #085544;
  text-shadow: none;
}
html[data-theme="light"] body.services-smb-page .services-hero .legal-bluf {
  border-left-color: #0b7a62;
  background: color-mix(in srgb, #0b7a62 8%, #fff);
}

/* Breadcrumb sits cleanly on the page field */
body.services-smb-page .legal-breadcrumb {
  position: relative;
  z-index: 1;
}

@keyframes smb-hero-rail {
  0%, 100% { background-position: 0% 0%; opacity: 0.75; }
  50% { background-position: 0% 100%; opacity: 1; }
}
@keyframes smb-hero-top {
  0%, 100% { background-position: center, center, 0% 0; opacity: 0.4; }
  50% { background-position: center, center, 100% 0; opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
  body.services-smb-page .services-hero::before,
  body.services-smb-page .services-hero::after {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  body.services-smb-page .services-hero {
    padding: 1.35rem 1.2rem 1.45rem 1.4rem;
  }
}

/* ==========================================================================
   ENTERPRISE SERVICES PAGE - expert gold business atmosphere
   Mirror of SMB treatment; gold foil field (not flat black/white)
   SEO copy untouched
   ========================================================================== */

body.services-enterprise-page {
  background-color: #0b0a07;
  background-image:
    radial-gradient(ellipse 90% 55% at 12% -5%, rgba(212, 175, 55, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 45% at 95% 18%, rgba(184, 134, 11, 0.08), transparent 50%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(40, 32, 12, 0.55), transparent 55%),
    linear-gradient(180deg, #0c0a06 0%, #12100c 42%, #0e0c08 100%);
}
html[data-theme="light"] body.services-enterprise-page {
  background-color: #f7f3ea;
  background-image:
    radial-gradient(ellipse 90% 50% at 8% 0%, rgba(184, 134, 11, 0.1), transparent 55%),
    radial-gradient(ellipse 60% 40% at 100% 15%, rgba(154, 112, 9, 0.07), transparent 50%),
    linear-gradient(180deg, #fbf8f0 0%, #f3eee2 55%, #ebe4d6 100%);
}

/* Full-bleed gold datacenter aisle: tablet and desktop (phones stay a solid column) */
body.services-enterprise-page .svc-ent-stage {
  display: none;
}
@media (min-width: 768px) {
  body.services-enterprise-page .svc-ent-stage {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }
  body.services-enterprise-page .svc-ent-stage picture,
  body.services-enterprise-page .svc-ent-stage img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  body.services-enterprise-page .svc-ent-stage img {
    object-fit: cover;
    object-position: center 42%;
    opacity: 0.5;
  }
  body.services-enterprise-page .svc-ent-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(12, 10, 6, 0.08) 0%, rgba(12, 10, 6, 0.62) 16%, rgba(12, 10, 6, 0.88) 50%, rgba(12, 10, 6, 0.62) 84%, rgba(12, 10, 6, 0.08) 100%),
      linear-gradient(180deg, rgba(12, 10, 6, 0.5) 0%, rgba(12, 10, 6, 0.2) 18%, rgba(12, 10, 6, 0.24) 64%, rgba(12, 10, 6, 0.78) 100%);
  }
}
@media (min-width: 1100px) {
  body.services-enterprise-page .svc-ent-stage img {
    opacity: 0.56;
  }
  body.services-enterprise-page .svc-ent-stage::after {
    background:
      linear-gradient(90deg, rgba(12, 10, 6, 0.1) 0%, rgba(12, 10, 6, 0.78) 24%, rgba(12, 10, 6, 0.93) 50%, rgba(12, 10, 6, 0.78) 76%, rgba(12, 10, 6, 0.1) 100%),
      linear-gradient(180deg, rgba(12, 10, 6, 0.52) 0%, rgba(12, 10, 6, 0.2) 20%, rgba(12, 10, 6, 0.24) 64%, rgba(12, 10, 6, 0.8) 100%);
  }
}
html[data-theme="light"] body.services-enterprise-page .svc-ent-stage {
  display: none;
}
@media (prefers-reduced-data: reduce) {
  body.services-enterprise-page .svc-ent-stage {
    display: none !important;
  }
}

/* EU AI Act guide: gold-brown legal archive aisle, tablet and desktop gutters */
body.article-geo-page .svc-euai-stage {
  display: none;
}
@media (min-width: 768px) {
  body.article-geo-page .svc-euai-stage {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 0 !important;
    pointer-events: none;
    overflow: hidden;
  }
  body.article-geo-page .svc-euai-stage picture,
  body.article-geo-page .svc-euai-stage img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
  }
  body.article-geo-page .svc-euai-stage img {
    object-fit: cover;
    object-position: center 46%;
    opacity: 0.52;
  }
  body.article-geo-page .svc-euai-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgba(12, 10, 6, 0.08) 0%, rgba(12, 10, 6, 0.64) 16%, rgba(12, 10, 6, 0.9) 50%, rgba(12, 10, 6, 0.64) 84%, rgba(12, 10, 6, 0.08) 100%),
      linear-gradient(180deg, rgba(12, 10, 6, 0.52) 0%, rgba(12, 10, 6, 0.22) 18%, rgba(12, 10, 6, 0.26) 64%, rgba(12, 10, 6, 0.8) 100%);
  }
}
@media (min-width: 1100px) {
  body.article-geo-page .svc-euai-stage img {
    opacity: 0.58;
  }
  body.article-geo-page .svc-euai-stage::after {
    background:
      linear-gradient(90deg, rgba(12, 10, 6, 0.1) 0%, rgba(12, 10, 6, 0.8) 24%, rgba(12, 10, 6, 0.94) 50%, rgba(12, 10, 6, 0.8) 76%, rgba(12, 10, 6, 0.1) 100%),
      linear-gradient(180deg, rgba(12, 10, 6, 0.54) 0%, rgba(12, 10, 6, 0.22) 20%, rgba(12, 10, 6, 0.26) 64%, rgba(12, 10, 6, 0.82) 100%);
  }
}
html[data-theme="light"] body.article-geo-page .svc-euai-stage {
  display: none;
}
@media (prefers-reduced-data: reduce) {
  body.article-geo-page .svc-euai-stage {
    display: none !important;
  }
}
body.article-geo-page .legal-main,
body.article-geo-page .article-main {
  position: relative;
  z-index: 1;
}

body.services-enterprise-page .services-main,
body.services-enterprise-page .legal-main {
  position: relative;
  z-index: 1;
}
body.services-enterprise-page .legal-main::before,
body.services-enterprise-page .services-main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.26;
  /* absolute not fixed - smooth scroll on mobile/tablet */
  background-image:
    radial-gradient(circle, rgba(212, 175, 55, 0.38) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(240, 208, 112, 0.22) 1.1px, transparent 1.45px);
  background-size: 36px 36px, 72px 72px;
  background-position: 0 0, 18px 12px;
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}
html[data-theme="light"] body.services-enterprise-page .legal-main::before,
html[data-theme="light"] body.services-enterprise-page .services-main::before {
  opacity: 0.13;
  background-image:
    radial-gradient(circle, rgba(154, 112, 9, 0.35) 0.7px, transparent 1px),
    radial-gradient(circle, rgba(122, 90, 8, 0.22) 1.1px, transparent 1.45px);
}

/* Hero: executive gold brief banner */
body.services-enterprise-page .services-hero {
  position: relative;
  margin: 0 0 var(--space-6);
  padding: 1.75rem 1.65rem 1.85rem 1.85rem;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--glass-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 42%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 90%, #1a160c) 0%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
    0 20px 48px rgba(0, 0, 0, 0.4),
    0 0 40px color-mix(in srgb, var(--accent) 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff8dc 8%, transparent);
  overflow: hidden;
}

body.services-enterprise-page .services-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  bottom: 10%;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    #a67c12 18%,
    #f0d070 48%,
    #d4af37 72%,
    transparent 100%
  );
  background-size: 100% 200%;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.5);
  animation: ent-hero-rail 4.2s ease-in-out infinite;
  pointer-events: none;
}

body.services-enterprise-page .services-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 92% 18%, transparent 6%, rgba(212, 175, 55, 0.14) 6.4%, transparent 7.2%),
    radial-gradient(circle at 92% 18%, transparent 14%, rgba(212, 175, 55, 0.08) 14.5%, transparent 16%),
    linear-gradient(
      90deg,
      transparent 8%,
      rgba(184, 134, 11, 0.28) 30%,
      rgba(240, 208, 112, 0.55) 50%,
      rgba(184, 134, 11, 0.28) 70%,
      transparent 92%
    );
  background-size: 100% 100%, 100% 100%, 200% 2px;
  background-position: center, center, 0 0;
  background-repeat: no-repeat;
  animation: ent-hero-top 5.2s ease-in-out infinite;
  mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 12%, transparent 45%);
}

body.services-enterprise-page .services-hero > * {
  position: relative;
  z-index: 1;
}

body.services-enterprise-page .services-hero .eyebrow {
  color: #f0d070;
  letter-spacing: 0.14em;
  font-weight: 700;
  text-shadow: 0 0 18px rgba(212, 175, 55, 0.28);
}
body.services-enterprise-page .services-hero h1 {
  color: var(--text);
  letter-spacing: -0.032em;
}
body.services-enterprise-page .services-hero .legal-lead {
  color: var(--muted);
  max-width: 48rem;
}
body.services-enterprise-page .services-hero .legal-bluf,
body.services-enterprise-page .services-hero .geo-bluf-ent,
body.services-enterprise-page .legal-bluf {
  border-left-color: #d4af37;
  background: color-mix(in srgb, #d4af37 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #d4af37 12%, transparent);
}
body.services-enterprise-page .services-hero .services-markets,
body.services-enterprise-page #svc-regions {
  color: var(--faint);
}

body.services-enterprise-page .legal-breadcrumb {
  position: relative;
  z-index: 1;
}

/* Light: warm paper + gold executive panel */
html[data-theme="light"] body.services-enterprise-page .services-hero {
  background:
    linear-gradient(145deg, rgba(184, 134, 11, 0.09) 0%, transparent 45%),
    linear-gradient(180deg, #ffffff 0%, #fbf7ef 100%);
  border-color: color-mix(in srgb, #9a7209 24%, rgba(60, 40, 8, 0.12));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95),
    0 16px 40px rgba(60, 40, 8, 0.09);
}
html[data-theme="light"] body.services-enterprise-page .services-hero::before {
  background: linear-gradient(180deg, transparent, #9a7209 25%, #c9a227 55%, #9a7209 80%, transparent);
  box-shadow: 0 0 10px rgba(154, 112, 9, 0.28);
}
html[data-theme="light"] body.services-enterprise-page .services-hero .eyebrow {
  color: #7a5a08;
  text-shadow: none;
}
html[data-theme="light"] body.services-enterprise-page .services-hero .legal-bluf,
html[data-theme="light"] body.services-enterprise-page .legal-bluf {
  border-left-color: #9a7209;
  background: color-mix(in srgb, #b8860b 9%, #fff);
}

@keyframes ent-hero-rail {
  0%, 100% { background-position: 0% 0%; opacity: 0.75; }
  50% { background-position: 0% 100%; opacity: 1; }
}
@keyframes ent-hero-top {
  0%, 100% { background-position: center, center, 0% 0; opacity: 0.4; }
  50% { background-position: center, center, 100% 0; opacity: 0.8; }
}

@media (prefers-reduced-motion: reduce) {
  body.services-enterprise-page .services-hero::before,
  body.services-enterprise-page .services-hero::after {
    animation: none !important;
  }
}

@media (max-width: 720px) {
  body.services-enterprise-page .services-hero {
    padding: 1.35rem 1.2rem 1.45rem 1.4rem;
  }
}

/* ==========================================================================
   SMB SERVICES - full-page expert treatment (all sections)
   Topbar → hero → cards → why → CTA → FAQ → footer; SEO HTML untouched
   ========================================================================== */

/* Stronger page field + full-height node wash (no square grid) */
body.services-smb-page .services-main::before {
  opacity: 0.32;
  mask-image: none;
  -webkit-mask-image: none;
}
html[data-theme="light"] body.services-smb-page .services-main::before {
  opacity: 0.16;
}

/* Keep content above the fixed node field */
body.services-smb-page .legal-breadcrumb,
body.services-smb-page .services-hero,
body.services-smb-page .svc-grid,
body.services-smb-page .svc-why,
body.services-smb-page .svc-cta,
body.services-smb-page .svc-faq-block {
  position: relative;
  z-index: 1;
}

/* Topbar + NAP blend into SMB field */
body.services-smb-page .topbar {
  background: color-mix(in srgb, #070f0c 92%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #10b981 18%, var(--glass-border));
}
html[data-theme="light"] body.services-smb-page .topbar {
  background: color-mix(in srgb, #f3f8f5 94%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #0b7a62 16%, rgba(15, 40, 32, 0.1));
}
body.services-smb-page .nap {
  background: color-mix(in srgb, #060d0a 94%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #10b981 12%, var(--glass-border));
}
html[data-theme="light"] body.services-smb-page .nap {
  background: color-mix(in srgb, #eef5f1 96%, transparent) !important;
}

/* Breadcrumb accents */
body.services-smb-page .legal-breadcrumb a:hover {
  color: #34d399;
}
html[data-theme="light"] body.services-smb-page .legal-breadcrumb a:hover {
  color: #085544;
}
body.services-smb-page .legal-breadcrumb [aria-current="page"] span {
  color: #34d399;
}
html[data-theme="light"] body.services-smb-page .legal-breadcrumb [aria-current="page"] span {
  color: #085544;
}

/* Back button + lang control sit in the field */
body.services-smb-page .top-actions .btn#svc-back:hover,
body.services-smb-page .top-actions .btn#svc-back:focus-visible {
  border-color: color-mix(in srgb, #10b981 45%, var(--glass-border));
  color: #34d399;
}
html[data-theme="light"] body.services-smb-page .top-actions .btn#svc-back:hover,
html[data-theme="light"] body.services-smb-page .top-actions .btn#svc-back:focus-visible {
  color: #085544;
  border-color: color-mix(in srgb, #0b7a62 40%, transparent);
}

/* Service cards - executive emerald panels */
body.services-smb-page .svc-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #0a1f18 55%, transparent) 0%, var(--bg-card) 40%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 5%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease-out);
}
body.services-smb-page .svc-card:hover,
body.services-smb-page .svc-card:focus-within {
  border-color: color-mix(in srgb, #10b981 40%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 12%, transparent),
    0 16px 42px rgba(0, 0, 0, 0.38),
    0 0 28px color-mix(in srgb, #10b981 10%, transparent);
  transform: translateY(-2px);
}
body.services-smb-page .svc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #10b981 30%, #34d399 55%, transparent);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
  pointer-events: none;
  z-index: 1;
}
body.services-smb-page .svc-card::after {
  content: "";
  position: absolute;
  top: 0.78rem;
  right: 0.72rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15), 0 0 10px rgba(16, 185, 129, 0.45);
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}
body.services-smb-page .svc-glyph {
  position: absolute;
  top: 0.95rem;
  right: 1.15rem;
  width: 1.7rem;
  height: 1.7rem;
  color: #34d399;
  opacity: 0.92;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}
body.services-smb-page .svc-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}
body.services-smb-page .svc-num {
  color: #34d399;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}
body.services-smb-page #ecommerce .svc-vendor-row {
  position: absolute;
  top: 1.18rem;
  right: 3.12rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.42rem;
  height: 1.25rem;
  padding: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}
body.services-smb-page #ecommerce .svc-vendor-row img {
  display: block;
  width: auto;
  height: 0.95rem;
  object-fit: contain;
  flex: 0 0 auto;
  background: none;
}
body.services-smb-page #ecommerce .svc-vendor-shopify {
  max-width: 4.15rem;
  filter: drop-shadow(0 0 6px rgba(149, 191, 71, 0.38));
}
body.services-smb-page #ecommerce .svc-vendor-woo {
  max-width: 3.55rem;
}
body.services-smb-page #ecommerce .svc-title {
  padding-right: 10.6rem;
}
body.services-smb-page .svc-title {
  padding-right: 2.85rem;
  color: var(--text);
}
body.services-smb-page .svc-body {
  color: var(--muted);
}
body.services-smb-page .svc-benefits {
  color: var(--faint);
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, #10b981 12%, transparent);
}
body.services-smb-page .svc-benefits strong {
  color: #34d399;
  font-weight: 700;
}

/* Why + CTA panels - executive brief blocks */
body.services-smb-page .svc-why,
body.services-smb-page .svc-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #10b981 20%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #10b981 10%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 90%, #0a1f18), var(--bg-card));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 5%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent);
}
body.services-smb-page .svc-why::before,
body.services-smb-page .svc-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #10b981 40%, #34d399 50%, #10b981 60%, transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.35);
  animation: smb-panel-top 5s ease-in-out infinite;
  pointer-events: none;
}
body.services-smb-page .svc-why h2,
body.services-smb-page .svc-cta h2 {
  color: var(--text);
  letter-spacing: -0.02em;
}
body.services-smb-page .svc-faq-block > h2 {
  color: #34d399;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 800;
}
body.services-smb-page .svc-why-list li {
  color: var(--muted);
}
body.services-smb-page .svc-why-list li::marker {
  color: #10b981;
}
body.services-smb-page .svc-cta p {
  color: var(--muted);
}

/* CTA buttons - emerald primary / ghost on field */
body.services-smb-page .svc-cta .btn-primary {
  background: linear-gradient(180deg, #12c48a 0%, #0d9f72 100%);
  border-color: color-mix(in srgb, #34d399 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #10b981 20%, transparent), 0 8px 22px rgba(16, 185, 129, 0.22);
  color: #04140f;
  font-weight: 700;
}
body.services-smb-page .svc-cta .btn-primary:hover,
body.services-smb-page .svc-cta .btn-primary:focus-visible {
  background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #34d399 35%, transparent), 0 10px 28px rgba(16, 185, 129, 0.32);
}
body.services-smb-page .svc-cta .btn-ghost {
  border-color: color-mix(in srgb, #10b981 28%, var(--glass-border));
  color: #34d399;
}
body.services-smb-page .svc-cta .btn-ghost:hover,
body.services-smb-page .svc-cta .btn-ghost:focus-visible {
  border-color: color-mix(in srgb, #34d399 50%, transparent);
  background: color-mix(in srgb, #10b981 10%, transparent);
  color: #6ee7b7;
}

/* FAQ block - section header rail + panel items */
body.services-smb-page .svc-faq-block {
  padding: 1.35rem 1.25rem 1.4rem;
  border: 1px solid color-mix(in srgb, #10b981 14%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, #10b981 7%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, #0a1f18), var(--bg-card));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #10b981 4%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
body.services-smb-page .svc-faq-block h2 {
  position: relative;
  padding-bottom: 0.65rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, #10b981 14%, transparent);
}
body.services-smb-page .svc-faq {
  border-color: color-mix(in srgb, #10b981 14%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, #0a1f18 40%, transparent), var(--bg-card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent);
}
body.services-smb-page .svc-faq:hover {
  border-color: color-mix(in srgb, #10b981 32%, var(--glass-border));
  box-shadow: 0 8px 24px color-mix(in srgb, #10b981 10%, transparent);
}
body.services-smb-page .svc-faq[open] {
  border-color: color-mix(in srgb, #10b981 38%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, #10b981 10%, transparent), var(--bg-card));
}
body.services-smb-page .svc-faq summary {
  color: var(--text);
  font-weight: 700;
}
body.services-smb-page .svc-faq summary::after {
  color: #34d399;
}
body.services-smb-page .svc-faq summary:focus-visible {
  outline: 2px solid color-mix(in srgb, #10b981 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
body.services-smb-page .svc-faq-list {
  margin: 0.25rem 0 0.7rem 1.15rem;
  padding: 0;
}
body.services-smb-page .svc-faq-list li {
  margin: 0.2rem 0;
  color: var(--muted);
}
body.services-smb-page .svc-faq p {
  color: var(--muted);
}

/* Footer blends into SMB field */
body.services-smb-page .footer.footer-sub {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, #060d0a 40%, transparent) 20%),
    linear-gradient(180deg, #08110e 0%, #060d0a 100%);
  border-top: 1px solid color-mix(in srgb, #10b981 16%, var(--glass-border));
}
body.services-smb-page .footer-sub-name .logo-word {
  color: #34d399;
}
body.services-smb-page .footer-sub-tag {
  color: var(--muted);
}
body.services-smb-page .footer-sub-col .footer-col-title {
  color: #34d399 !important;
}
body.services-smb-page .footer-sub-col a:hover {
  color: #34d399;
}
body.services-smb-page .footer-sub-col a[aria-current="page"],
body.services-smb-page .footer-sub-col span[aria-current="page"] {
  color: #34d399;
}

/* Audio toggle sits on the field */
body.services-smb-page .audio-toggle {
  border-color: color-mix(in srgb, #10b981 22%, var(--glass-border));
  background: color-mix(in srgb, #070f0c 90%, transparent);
}
body.services-smb-page .audio-toggle:hover,
body.services-smb-page .audio-toggle:focus-visible {
  border-color: color-mix(in srgb, #10b981 45%, transparent);
  color: #34d399;
}

/* Light mode full-page cohesion (AA-friendly emerald, not flat white) */
html[data-theme="light"] body.services-smb-page .svc-card {
  background: #fff;
  border-color: color-mix(in srgb, #0b7a62 18%, rgba(15, 40, 32, 0.1));
  box-shadow: 0 10px 28px rgba(12, 40, 32, 0.07);
}
html[data-theme="light"] body.services-smb-page .svc-card:hover,
html[data-theme="light"] body.services-smb-page .svc-card:focus-within {
  border-color: color-mix(in srgb, #0b7a62 35%, transparent);
  box-shadow: 0 14px 36px rgba(12, 40, 32, 0.1);
  transform: translateY(-2px);
}
html[data-theme="light"] body.services-smb-page .svc-card::before {
  background: linear-gradient(180deg, transparent, #0b7a62 30%, #0d8f72 55%, transparent);
  box-shadow: none;
}
html[data-theme="light"] body.services-smb-page .svc-card::after {
  background: #0b7a62;
  box-shadow: 0 0 0 3px rgba(11, 122, 98, 0.12);
  opacity: 0.85;
}
html[data-theme="light"] body.services-smb-page .svc-glyph {
  color: #0b7a62;
  filter: none;
  opacity: 0.95;
}
html[data-theme="light"] body.services-smb-page #ecommerce .svc-vendor-shopify {
  filter: none;
}
html[data-theme="light"] body.services-smb-page .svc-num {
  color: #085544;
  text-shadow: none;
}
html[data-theme="light"] body.services-smb-page .svc-benefits {
  border-top-color: color-mix(in srgb, #0b7a62 12%, transparent);
}
html[data-theme="light"] body.services-smb-page .svc-benefits strong {
  color: #085544;
}
html[data-theme="light"] body.services-smb-page .svc-why,
html[data-theme="light"] body.services-smb-page .svc-cta {
  background:
    linear-gradient(145deg, rgba(13, 143, 114, 0.06) 0%, transparent 50%),
    #fff;
  border-color: color-mix(in srgb, #0b7a62 18%, rgba(15, 40, 32, 0.1));
  box-shadow: 0 12px 32px rgba(12, 40, 32, 0.07);
}
html[data-theme="light"] body.services-smb-page .svc-cta .btn-primary {
  background: linear-gradient(180deg, #0d8f72 0%, #0b7a62 100%);
  color: #fff;
  border-color: #085544;
  box-shadow: 0 6px 18px rgba(11, 122, 98, 0.22);
}
html[data-theme="light"] body.services-smb-page .svc-cta .btn-primary:hover,
html[data-theme="light"] body.services-smb-page .svc-cta .btn-primary:focus-visible {
  background: linear-gradient(180deg, #0b7a62 0%, #085544 100%);
  color: #fff;
}
html[data-theme="light"] body.services-smb-page .svc-cta .btn-ghost {
  color: #085544;
  border-color: color-mix(in srgb, #0b7a62 28%, transparent);
}
html[data-theme="light"] body.services-smb-page .svc-cta .btn-ghost:hover,
html[data-theme="light"] body.services-smb-page .svc-cta .btn-ghost:focus-visible {
  color: #064e3b;
  background: color-mix(in srgb, #0b7a62 8%, #fff);
}
html[data-theme="light"] body.services-smb-page .svc-faq-block {
  background:
    linear-gradient(160deg, rgba(13, 143, 114, 0.05) 0%, transparent 50%),
    #fff;
  border-color: color-mix(in srgb, #0b7a62 14%, rgba(15, 40, 32, 0.1));
  box-shadow: 0 12px 32px rgba(12, 40, 32, 0.06);
}
html[data-theme="light"] body.services-smb-page .svc-faq-block h2 {
  border-bottom-color: color-mix(in srgb, #0b7a62 12%, transparent);
}
html[data-theme="light"] body.services-smb-page .svc-faq {
  background: #f8fbf9;
  border-color: color-mix(in srgb, #0b7a62 14%, rgba(15, 40, 32, 0.1));
  box-shadow: none;
}
html[data-theme="light"] body.services-smb-page .svc-faq[open] {
  background: color-mix(in srgb, #0b7a62 5%, #fff);
  border-color: color-mix(in srgb, #0b7a62 28%, transparent);
}
html[data-theme="light"] body.services-smb-page .svc-faq summary::after {
  color: #085544;
}
html[data-theme="light"] body.services-smb-page .footer.footer-sub {
  background: linear-gradient(180deg, #e8f1ec 0%, #e2ebe6 100%);
  border-top-color: color-mix(in srgb, #0b7a62 14%, transparent);
}
html[data-theme="light"] body.services-smb-page .footer-sub-name .logo-word,
html[data-theme="light"] body.services-smb-page .footer-sub-col .footer-col-title {
  color: #085544 !important;
}
html[data-theme="light"] body.services-smb-page .footer-sub-col a:hover,
html[data-theme="light"] body.services-smb-page .footer-sub-col a[aria-current="page"],
html[data-theme="light"] body.services-smb-page .footer-sub-col span[aria-current="page"] {
  color: #085544;
}
html[data-theme="light"] body.services-smb-page .audio-toggle {
  background: color-mix(in srgb, #f3f8f5 94%, transparent);
  border-color: color-mix(in srgb, #0b7a62 18%, transparent);
  color: #085544;
}

@keyframes smb-panel-top {
  0%, 100% { background-position: 0% 0; opacity: 0.55; }
  50% { background-position: 100% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.services-smb-page .svc-why::before,
  body.services-smb-page .svc-cta::before {
    animation: none !important;
  }
  body.services-smb-page .svc-card:hover,
  body.services-smb-page .svc-card:focus-within {
    transform: none;
  }
}

/* Mobile: slightly tighter panels, same atmosphere */
@media (max-width: 720px) {
  body.services-smb-page .svc-card {
    padding: 1.05rem 1.1rem 1.15rem;
  }
  body.services-smb-page #ecommerce .svc-vendor-row {
    top: 1.12rem;
    right: 2.95rem;
    gap: 0.32rem;
  }
  body.services-smb-page #ecommerce .svc-vendor-row img {
    height: 0.82rem;
  }
  body.services-smb-page #ecommerce .svc-vendor-shopify {
    max-width: 3.45rem;
  }
  body.services-smb-page #ecommerce .svc-vendor-woo {
    max-width: 2.95rem;
  }
  body.services-smb-page #ecommerce .svc-title {
    padding-right: 8.8rem;
  }
  body.services-smb-page .svc-faq-block {
    padding: 1.1rem 1rem 1.15rem;
  }
  body.services-smb-page .svc-why,
  body.services-smb-page .svc-cta {
    padding: 1.1rem 1.1rem 1.2rem;
  }
}

/* ==========================================================================
   ENTERPRISE SERVICES - full-page expert gold treatment (all sections)
   Cards, method, why, CTA, FAQ (+/–), footer; SEO HTML untouched
   ========================================================================== */

body.services-enterprise-page .legal-main::before,
body.services-enterprise-page .services-main::before {
  opacity: 0.3;
  mask-image: none;
  -webkit-mask-image: none;
}
html[data-theme="light"] body.services-enterprise-page .legal-main::before,
html[data-theme="light"] body.services-enterprise-page .services-main::before {
  opacity: 0.15;
}

body.services-enterprise-page .legal-breadcrumb,
body.services-enterprise-page .services-hero,
body.services-enterprise-page .svc-section-title,
body.services-enterprise-page .svc-grid,
body.services-enterprise-page .method-block,
body.services-enterprise-page .svc-why,
body.services-enterprise-page .svc-cta,
body.services-enterprise-page .svc-faq-block {
  position: relative;
  z-index: 1;
}

/* Topbar + NAP */
body.services-enterprise-page .topbar {
  background: color-mix(in srgb, #0c0a06 92%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #d4af37 20%, var(--glass-border));
}
html[data-theme="light"] body.services-enterprise-page .topbar {
  background: color-mix(in srgb, #fbf8f0 94%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #9a7009 16%, rgba(40, 32, 12, 0.1));
}
body.services-enterprise-page .nap {
  background: color-mix(in srgb, #0b0a07 94%, transparent) !important;
  border-bottom-color: color-mix(in srgb, #d4af37 14%, var(--glass-border));
}
html[data-theme="light"] body.services-enterprise-page .nap {
  background: color-mix(in srgb, #f7f3ea 96%, transparent) !important;
}

body.services-enterprise-page .legal-breadcrumb a:hover {
  color: #f0d070;
}
html[data-theme="light"] body.services-enterprise-page .legal-breadcrumb a:hover {
  color: #7a5a08;
}
body.services-enterprise-page .legal-breadcrumb [aria-current="page"] span {
  color: #f0d070;
}
html[data-theme="light"] body.services-enterprise-page .legal-breadcrumb [aria-current="page"] span {
  color: #7a5a08;
}

body.services-enterprise-page .top-actions .btn#svc-back:hover,
body.services-enterprise-page .top-actions .btn#svc-back:focus-visible {
  border-color: color-mix(in srgb, #d4af37 45%, var(--glass-border));
  color: #f0d070;
}
html[data-theme="light"] body.services-enterprise-page .top-actions .btn#svc-back:hover,
html[data-theme="light"] body.services-enterprise-page .top-actions .btn#svc-back:focus-visible {
  color: #7a5a08;
  border-color: color-mix(in srgb, #9a7009 40%, transparent);
}

/* Section titles */
body.services-enterprise-page .svc-section-title {
  color: var(--text);
  letter-spacing: -0.02em;
  border-left: 3px solid #d4af37;
  padding-left: 0.75rem;
  text-shadow: 0 0 20px color-mix(in srgb, #d4af37 12%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .svc-section-title {
  border-left-color: #9a7009;
  text-shadow: none;
}

/* Cards - gold executive panels */
body.services-enterprise-page .svc-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #d4af37 20%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #1a160c 50%, transparent) 0%, var(--bg-card) 42%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 6%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 color-mix(in srgb, #fff8dc 6%, transparent);
  transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease-out);
}
body.services-enterprise-page .svc-card:hover,
body.services-enterprise-page .svc-card:focus-within {
  border-color: color-mix(in srgb, #d4af37 42%, var(--glass-border));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 14%, transparent),
    0 16px 42px rgba(0, 0, 0, 0.4),
    0 0 28px color-mix(in srgb, #d4af37 12%, transparent);
  transform: translateY(-2px);
}
body.services-enterprise-page .svc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, #a67c12 28%, #f0d070 55%, transparent);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.45);
  pointer-events: none;
  z-index: 1;
}
body.services-enterprise-page .svc-card::after {
  content: "";
  position: absolute;
  top: 0.78rem;
  right: 0.72rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0d070;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16), 0 0 10px rgba(212, 175, 55, 0.5);
  opacity: 0.8;
  pointer-events: none;
  z-index: 3;
}
body.services-enterprise-page .svc-glyph {
  position: absolute;
  top: 0.95rem;
  right: 1.15rem;
  width: 1.7rem;
  height: 1.7rem;
  color: #f0d070;
  opacity: 0.94;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.42));
}
body.services-enterprise-page .svc-glyph svg {
  display: block;
  width: 100%;
  height: 100%;
}
body.services-enterprise-page .svc-vendor {
  position: absolute;
  top: 0.78rem;
  right: 1.15rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  max-width: 5.8rem;
  height: 1.55rem;
  padding: 0;
  background: none;
  pointer-events: none;
  z-index: 2;
}
body.services-enterprise-page .svc-vendor picture {
  display: block;
}
body.services-enterprise-page .svc-vendor img {
  display: block;
  width: auto;
  max-width: 5.6rem;
  height: 1.45rem;
  object-fit: contain;
  filter: drop-shadow(0 0 8px color-mix(in srgb, #f0d070 18%, transparent));
}
body.services-enterprise-page #dynamics .svc-vendor img {
  height: 1.55rem;
}
body.services-enterprise-page #netsuite .svc-vendor img {
  height: 1.55rem;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px color-mix(in srgb, #f0d070 18%, transparent));
}
body.services-enterprise-page .svc-num {
  color: #f0d070;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}
body.services-enterprise-page .svc-title {
  padding-right: 2.85rem;
  color: var(--text);
}
body.services-enterprise-page .ent-platform .svc-title {
  padding-right: 6.4rem;
}
body.services-enterprise-page .svc-body,
body.services-enterprise-page .svc-bullets {
  color: var(--muted);
}
body.services-enterprise-page .svc-bullets li::marker {
  color: #d4af37;
}
body.services-enterprise-page .svc-benefits {
  color: var(--faint);
  padding-top: 0.35rem;
  border-top: 1px solid color-mix(in srgb, #d4af37 14%, transparent);
}
body.services-enterprise-page .svc-benefits strong {
  color: #f0d070;
  font-weight: 700;
}

/* Method steps */
body.services-enterprise-page .method-step {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #d4af37 18%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(165deg, color-mix(in srgb, #1a160c 45%, transparent) 0%, var(--bg-card) 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 5%, transparent),
    0 12px 28px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 color-mix(in srgb, #fff8dc 5%, transparent);
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
}
body.services-enterprise-page .method-step:hover {
  border-color: color-mix(in srgb, #d4af37 38%, var(--glass-border));
  transform: translateY(-1px);
}
body.services-enterprise-page .method-title {
  color: var(--text);
}
body.services-enterprise-page .method-body,
body.services-enterprise-page .method-lead {
  color: var(--muted);
}
body.services-enterprise-page .method-block .svc-section-title {
  margin-top: 0.5rem;
}

/* Why + CTA */
body.services-enterprise-page .svc-why,
body.services-enterprise-page .svc-cta {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #d4af37 22%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(145deg, color-mix(in srgb, #d4af37 12%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, #1a160c), var(--bg-card));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 6%, transparent),
    0 16px 40px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 color-mix(in srgb, #fff8dc 6%, transparent);
}
body.services-enterprise-page .svc-why::before,
body.services-enterprise-page .svc-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #a67c12 35%, #f0d070 50%, #d4af37 65%, transparent);
  background-size: 200% 100%;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.4);
  animation: ent-panel-top 5.2s ease-in-out infinite;
  pointer-events: none;
}
body.services-enterprise-page .svc-why h2,
body.services-enterprise-page .svc-cta h2 {
  color: var(--text);
  letter-spacing: -0.02em;
}
body.services-enterprise-page .svc-faq-block > h2 {
  color: #f0d070;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.78rem;
  font-weight: 800;
}
body.services-enterprise-page .svc-why-list li {
  color: var(--muted);
}
body.services-enterprise-page .svc-why-list li::marker {
  color: #d4af37;
}
body.services-enterprise-page .svc-cta p {
  color: var(--muted);
}

body.services-enterprise-page .svc-cta .btn-primary {
  background: linear-gradient(180deg, #e8c84a 0%, #c9a227 100%);
  border-color: color-mix(in srgb, #f0d070 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, #d4af37 22%, transparent), 0 8px 22px rgba(212, 175, 55, 0.25);
  color: #1a1406;
  font-weight: 700;
}
body.services-enterprise-page .svc-cta .btn-primary:hover,
body.services-enterprise-page .svc-cta .btn-primary:focus-visible {
  background: linear-gradient(180deg, #f0d070 0%, #d4af37 100%);
  box-shadow: 0 0 0 1px color-mix(in srgb, #f0d070 40%, transparent), 0 10px 28px rgba(212, 175, 55, 0.35);
}
body.services-enterprise-page .svc-cta .btn-ghost {
  border-color: color-mix(in srgb, #d4af37 30%, var(--glass-border));
  color: #f0d070;
}
body.services-enterprise-page .svc-cta .btn-ghost:hover,
body.services-enterprise-page .svc-cta .btn-ghost:focus-visible {
  border-color: color-mix(in srgb, #f0d070 50%, transparent);
  background: color-mix(in srgb, #d4af37 10%, transparent);
  color: #fde68a;
}

/* FAQ block - home-style +/– questions in gold field */
body.services-enterprise-page .svc-faq-block {
  padding: 1.35rem 1.25rem 1.4rem;
  border: 1px solid color-mix(in srgb, #d4af37 16%, var(--glass-border));
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, #d4af37 8%, transparent) 0%, transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 86%, #1a160c), var(--bg-card));
  box-shadow:
    0 0 0 1px color-mix(in srgb, #d4af37 5%, transparent),
    0 14px 36px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 color-mix(in srgb, #fff8dc 5%, transparent);
}
body.services-enterprise-page .svc-faq-block h2 {
  position: relative;
  padding-bottom: 0.65rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, #d4af37 16%, transparent);
}
body.services-enterprise-page .svc-faq {
  border-color: color-mix(in srgb, #d4af37 16%, var(--glass-border));
  background:
    linear-gradient(165deg, color-mix(in srgb, #1a160c 40%, transparent), var(--bg-card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff8dc 4%, transparent);
}
body.services-enterprise-page .svc-faq:hover {
  border-color: color-mix(in srgb, #d4af37 36%, var(--glass-border));
  box-shadow: 0 8px 24px color-mix(in srgb, #d4af37 12%, transparent);
}
body.services-enterprise-page .svc-faq[open] {
  border-color: color-mix(in srgb, #d4af37 42%, transparent);
  background:
    linear-gradient(165deg, color-mix(in srgb, #d4af37 12%, transparent), var(--bg-card));
}
body.services-enterprise-page .svc-faq summary {
  color: var(--text);
  font-weight: 700;
}
body.services-enterprise-page .svc-faq summary::after {
  color: #f0d070;
}
body.services-enterprise-page .svc-faq summary:focus-visible {
  outline: 2px solid color-mix(in srgb, #d4af37 55%, transparent);
  outline-offset: 2px;
  border-radius: 4px;
}
body.services-enterprise-page .svc-faq p {
  color: var(--muted);
}

/* Footer */
body.services-enterprise-page .footer.footer-sub {
  position: relative;
  z-index: 1;
  background:
    linear-gradient(180deg, transparent 0%, color-mix(in srgb, #0b0a07 40%, transparent) 20%),
    linear-gradient(180deg, #0e0c08 0%, #0b0a07 100%);
  border-top: 1px solid color-mix(in srgb, #d4af37 18%, var(--glass-border));
}
body.services-enterprise-page .footer-sub-name .logo-word {
  color: #f0d070;
}
body.services-enterprise-page .footer-sub-col .footer-col-title {
  color: #f0d070 !important;
}
body.services-enterprise-page .footer-sub-col a:hover {
  color: #f0d070;
}
body.services-enterprise-page .footer-sub-col a[aria-current="page"],
body.services-enterprise-page .footer-sub-col span[aria-current="page"] {
  color: #f0d070;
}

body.services-enterprise-page .audio-toggle {
  border-color: color-mix(in srgb, #d4af37 24%, var(--glass-border));
  background: color-mix(in srgb, #0c0a06 90%, transparent);
}
body.services-enterprise-page .audio-toggle:hover,
body.services-enterprise-page .audio-toggle:focus-visible {
  border-color: color-mix(in srgb, #d4af37 48%, transparent);
  color: #f0d070;
}

/* Regions chip */
body.services-enterprise-page .ent-regions {
  border-color: color-mix(in srgb, #d4af37 32%, var(--border));
  background: color-mix(in srgb, #d4af37 10%, transparent);
}

/* Light mode full-page cohesion (AA gold) */
html[data-theme="light"] body.services-enterprise-page .svc-card {
  background: #fff;
  border-color: color-mix(in srgb, #9a7009 18%, rgba(40, 32, 12, 0.1));
  box-shadow: 0 10px 28px rgba(40, 32, 12, 0.07);
}
html[data-theme="light"] body.services-enterprise-page .svc-card:hover,
html[data-theme="light"] body.services-enterprise-page .svc-card:focus-within {
  border-color: color-mix(in srgb, #9a7009 36%, transparent);
  box-shadow: 0 14px 36px rgba(40, 32, 12, 0.1);
}
html[data-theme="light"] body.services-enterprise-page .svc-card::before {
  background: linear-gradient(180deg, transparent, #9a7009 30%, #b8860b 55%, transparent);
  box-shadow: none;
}
html[data-theme="light"] body.services-enterprise-page .svc-card::after {
  background: #9a7009;
  box-shadow: 0 0 0 3px rgba(154, 112, 9, 0.12);
}
html[data-theme="light"] body.services-enterprise-page .svc-glyph {
  color: #9a7009;
  filter: none;
  opacity: 0.95;
}
html[data-theme="light"] body.services-enterprise-page .svc-vendor {
  background: none;
}
html[data-theme="light"] body.services-enterprise-page .svc-vendor img,
html[data-theme="light"] body.services-enterprise-page #netsuite .svc-vendor img {
  filter: none;
}
html[data-theme="light"] body.services-enterprise-page .svc-num {
  color: #7a5a08;
  text-shadow: none;
}
html[data-theme="light"] body.services-enterprise-page .svc-benefits {
  border-top-color: color-mix(in srgb, #9a7009 12%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .svc-benefits strong {
  color: #7a5a08;
}
html[data-theme="light"] body.services-enterprise-page .method-step {
  background: #fff;
  border-color: color-mix(in srgb, #9a7009 16%, rgba(40, 32, 12, 0.1));
  box-shadow: 0 8px 22px rgba(40, 32, 12, 0.06);
}
html[data-theme="light"] body.services-enterprise-page .svc-why,
html[data-theme="light"] body.services-enterprise-page .svc-cta {
  background:
    linear-gradient(145deg, rgba(184, 134, 11, 0.07) 0%, transparent 50%),
    #fff;
  border-color: color-mix(in srgb, #9a7009 18%, rgba(40, 32, 12, 0.1));
  box-shadow: 0 12px 32px rgba(40, 32, 12, 0.07);
}
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-primary {
  background: linear-gradient(180deg, #b8860b 0%, #9a7009 100%);
  color: #fff;
  border-color: #7a5a08;
  box-shadow: 0 6px 18px rgba(154, 112, 9, 0.22);
}
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-primary:hover,
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-primary:focus-visible {
  background: linear-gradient(180deg, #9a7009 0%, #7a5a08 100%);
  color: #fff;
}
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-ghost {
  color: #7a5a08;
  border-color: color-mix(in srgb, #9a7009 28%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-ghost:hover,
html[data-theme="light"] body.services-enterprise-page .svc-cta .btn-ghost:focus-visible {
  color: #5c4406;
  background: color-mix(in srgb, #9a7009 8%, #fff);
}
html[data-theme="light"] body.services-enterprise-page .svc-faq-block {
  background:
    linear-gradient(160deg, rgba(184, 134, 11, 0.06) 0%, transparent 50%),
    #fff;
  border-color: color-mix(in srgb, #9a7009 14%, rgba(40, 32, 12, 0.1));
  box-shadow: 0 12px 32px rgba(40, 32, 12, 0.06);
}
html[data-theme="light"] body.services-enterprise-page .svc-faq-block h2 {
  border-bottom-color: color-mix(in srgb, #9a7009 12%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .svc-faq {
  background: #fbf8f0;
  border-color: color-mix(in srgb, #9a7009 14%, rgba(40, 32, 12, 0.1));
  box-shadow: none;
}
html[data-theme="light"] body.services-enterprise-page .svc-faq[open] {
  background: color-mix(in srgb, #9a7009 5%, #fff);
  border-color: color-mix(in srgb, #9a7009 28%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .svc-faq summary::after {
  color: #7a5a08;
}
html[data-theme="light"] body.services-enterprise-page .footer.footer-sub {
  background: linear-gradient(180deg, #f3eee2 0%, #ebe4d6 100%);
  border-top-color: color-mix(in srgb, #9a7009 14%, transparent);
}
html[data-theme="light"] body.services-enterprise-page .footer-sub-name .logo-word,
html[data-theme="light"] body.services-enterprise-page .footer-sub-col .footer-col-title {
  color: #7a5a08 !important;
}
html[data-theme="light"] body.services-enterprise-page .footer-sub-col a:hover,
html[data-theme="light"] body.services-enterprise-page .footer-sub-col a[aria-current="page"],
html[data-theme="light"] body.services-enterprise-page .footer-sub-col span[aria-current="page"] {
  color: #7a5a08;
}
html[data-theme="light"] body.services-enterprise-page .audio-toggle {
  background: color-mix(in srgb, #fbf8f0 94%, transparent);
  border-color: color-mix(in srgb, #9a7009 18%, transparent);
  color: #7a5a08;
}

@keyframes ent-panel-top {
  0%, 100% { background-position: 0% 0; opacity: 0.55; }
  50% { background-position: 100% 0; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  body.services-enterprise-page .svc-why::before,
  body.services-enterprise-page .svc-cta::before {
    animation: none !important;
  }
  body.services-enterprise-page .svc-card:hover,
  body.services-enterprise-page .svc-card:focus-within,
  body.services-enterprise-page .method-step:hover {
    transform: none;
  }
}

@media (max-width: 720px) {
  body.services-enterprise-page .svc-card {
    padding: 1.05rem 1.1rem 1.15rem;
  }
  body.services-enterprise-page .svc-faq-block {
    padding: 1.1rem 1rem 1.15rem;
  }
  body.services-enterprise-page .svc-why,
  body.services-enterprise-page .svc-cta {
    padding: 1.1rem 1.1rem 1.2rem;
  }
}

/* GEO depth: BPA comparison table (SMB services) */
.svc-bpa-depth {
  margin: 0 0 1.25rem;
  padding: 1.35rem 1.35rem 1.5rem;
  border-radius: 14px;
}
.svc-bpa-depth h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}
.svc-bpa-depth h3 {
  margin: 1.25rem 0 0.55rem;
  font-size: 1.02rem;
}
.svc-bpa-depth .bpa-answer {
  margin: 0 0 0.85rem;
}
.svc-bpa-depth .bpa-pipeline,
.svc-bpa-depth .bpa-first-list {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.2rem;
  line-height: 1.55;
  color: var(--muted);
}
.svc-bpa-depth .bpa-pipeline li,
.svc-bpa-depth .bpa-first-list li {
  margin-bottom: 0.4rem;
}
.svc-bpa-depth .bpa-regions {
  margin: 0.75rem 0 0;
  color: var(--faint);
  font-size: 0.92rem;
  line-height: 1.5;
}
.geo-table-hint {
  display: none;
}
.geo-table-wrap {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0.5rem 0 0.75rem;
  border-radius: 12px;
  border: 1px solid var(--glass-border, var(--border));
}
.geo-compare-table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
  line-height: 1.4;
}
.geo-compare-table th,
.geo-compare-table td {
  padding: 0.6rem 0.65rem;
  text-align: left;
  vertical-align: top;
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  border-bottom: 1px solid color-mix(in srgb, var(--glass-border, var(--border)) 80%, transparent);
}
.geo-compare-table thead th {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  white-space: normal;
}
.geo-compare-table thead th:nth-child(1),
.geo-compare-table tbody th {
  width: 22%;
}
.geo-compare-table thead th:nth-child(2),
.geo-compare-table tbody td:nth-child(2) {
  width: 30%;
}
.geo-compare-table thead th:nth-child(3),
.geo-compare-table tbody td:nth-child(3),
.geo-compare-table thead th:nth-child(4),
.geo-compare-table tbody td:nth-child(4) {
  width: 24%;
}
.geo-compare-table tbody th {
  font-weight: 700;
  color: var(--text);
  white-space: normal;
}
.geo-compare-table tbody td {
  color: var(--muted);
}
@media (min-width: 901px) and (max-width: 1180px) {
  .geo-compare-table {
    font-size: 0.8rem;
    line-height: 1.38;
  }
  .geo-compare-table th,
  .geo-compare-table td {
    padding: 0.5rem 0.48rem;
  }
  .geo-compare-table thead th {
    font-size: 0.66rem;
    letter-spacing: 0.03em;
  }
}
.geo-compare-table tbody tr:last-child th,
.geo-compare-table tbody tr:last-child td {
  border-bottom: none;
}
@media (max-width: 900px) {
  .geo-table-wrap {
    overflow: visible;
    border: none;
    border-radius: 0;
    margin: 0.55rem 0 0.4rem;
    max-width: 100%;
  }
  .geo-compare-table {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    table-layout: auto;
    border-collapse: separate;
    border-spacing: 0;
  }
  /* Keep thead in the DOM for SEO/GEO/crawlers; hide only visually */
  .geo-compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .geo-compare-table tbody {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }
  .geo-compare-table tbody tr {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 1.05rem 1.1rem 0.95rem;
    border: 1px solid var(--glass-border, var(--border));
    border-radius: 12px;
    background: color-mix(in srgb, var(--bg-card, #101816) 94%, transparent);
    box-shadow: none;
  }
  .geo-compare-table thead th:nth-child(1),
  .geo-compare-table tbody th,
  .geo-compare-table thead th:nth-child(2),
  .geo-compare-table tbody td:nth-child(2),
  .geo-compare-table thead th:nth-child(3),
  .geo-compare-table tbody td:nth-child(3),
  .geo-compare-table thead th:nth-child(4),
  .geo-compare-table tbody td:nth-child(4),
  .geo-compare-table tbody td {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
  }
  .geo-compare-table tbody th {
    white-space: normal;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    padding: 0 0 0.75rem;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border, var(--border)) 80%, transparent);
  }
  .geo-compare-table tbody td {
    padding: 0.7rem 0 0.65rem;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border, var(--border)) 45%, transparent);
    color: var(--muted);
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .geo-compare-table tbody td:last-child,
  .geo-compare-table tbody tr:last-child th,
  .geo-compare-table tbody tr:last-child td {
    border-bottom: none;
    padding-bottom: 0;
  }
  .geo-compare-table tbody td::before {
    content: attr(data-label);
    display: block;
    margin: 0 0 0.22rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    hyphens: none;
    -webkit-hyphens: none;
  }
  .geo-compare-table tbody td:not([data-label])::before,
  .geo-compare-table tbody td[data-label=""]::before {
    display: none;
  }
  html[data-theme="light"] .geo-compare-table tbody tr {
    background: #fff;
    box-shadow: none;
  }
}
body.services-smb-page .svc-bpa-depth {
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--glass-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, #10b981 9%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 90%, #0a1f18), var(--bg-card));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] body.services-smb-page .svc-bpa-depth {
  background: linear-gradient(145deg, rgba(13, 143, 114, 0.06) 0%, transparent 50%), #fff;
  border-color: color-mix(in srgb, #0b7a62 18%, rgba(15, 40, 32, 0.1));
  box-shadow: 0 12px 32px rgba(12, 40, 32, 0.07);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* GEO TechArticle page (EU AI Act · Dynamics) */
.article-geo-page .article-main { max-width: var(--max, 72rem); }
.article-geo-page .geo-article-block { margin-bottom: 1.25rem; }
.article-geo-page .geo-article-block h2 { margin-top: 0; }
.article-geo-page .geo-article-block h3 {
  margin: 1.15rem 0 0.45rem;
  font-size: 1.05rem;
  color: var(--text);
}
.article-geo-page .geo-article-block ul {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.2rem;
  color: var(--muted);
  line-height: 1.55;
}
.article-geo-page .geo-article-block li { margin-bottom: 0.4rem; }
.article-geo-page .article-exec strong { color: var(--text); }
/* GEO: question that the Direct answer resolves (answer-first pattern) */
.article-geo-page .geo-guide-question {
  margin: 0.35rem 0 0.65rem;
  max-width: 48rem;
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--text);
  font-weight: 600;
}
.article-geo-page .geo-guide-question strong {
  color: var(--accent, #d4a017);
  margin-right: 0.35rem;
  font-weight: 700;
}
.article-geo-page #art-exec-text {
  white-space: normal;
}
.article-geo-page #art-exec-important {
  margin: 0.75rem 0 0;
}
/* Founder E-E-A-T block (GEO/SEO Person entity - no comma bylines) */
.article-geo-page .article-founder-eeat {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent, #10b981) 22%, var(--glass-border, rgba(255,255,255,0.08)));
  background: color-mix(in srgb, var(--bg-elev, #0d1512) 92%, transparent);
  max-width: 48rem;
}
.article-geo-page .article-founder-line {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.45;
}
.article-geo-page .article-founder-bio,
.article-geo-page .article-founder-expertise {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}
.article-geo-page .article-founder-links {
  margin: 0.55rem 0 0;
  font-size: 0.85rem;
}
.article-geo-page .article-founder-links a {
  color: var(--accent, #10b981);
  text-decoration: none;
}
.article-geo-page .article-founder-links a:hover {
  text-decoration: underline;
}
html[data-theme="light"] .article-geo-page .article-founder-eeat {
  background: color-mix(in srgb, #fff 94%, var(--accent, #10b981));
  border-color: color-mix(in srgb, var(--accent, #059669) 16%, rgba(0,0,0,0.08));
}
body.services-enterprise-page .svc-bpa-depth {
  border: 1px solid color-mix(in srgb, #d4af37 18%, var(--glass-border));
  background:
    linear-gradient(145deg, color-mix(in srgb, #d4af37 9%, transparent) 0%, transparent 50%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-elev) 88%, #1a160c), var(--bg-card));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}
html[data-theme="light"] body.services-enterprise-page .svc-bpa-depth {
  background: linear-gradient(145deg, rgba(184, 134, 11, 0.06) 0%, transparent 50%), #fff;
  border-color: color-mix(in srgb, #9a7009 18%, rgba(40, 32, 12, 0.1));
  box-shadow: 0 12px 32px rgba(40, 32, 12, 0.07);
}

/* ============================================================
   Services-page GEO media only (SMB global network · Enterprise stack)
   ============================================================ */
.geo-media {
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--bg-card, var(--bg-elev));
  /* Captions + nearby copy stay instant; image decode can still be async */
  content-visibility: visible;
}
.geo-media picture,
.geo-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  background: #050a08;
}
.geo-media-cap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1.05rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}
.geo-media-cap strong {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}
.geo-media-solo {
  max-width: 42rem;
  margin: 0 auto 1.5rem;
}
body.services-smb-page .geo-media-solo {
  border-color: color-mix(in srgb, #10b981 22%, var(--glass-border));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
body.services-enterprise-page .geo-media-solo {
  border-color: color-mix(in srgb, #d4af37 22%, var(--glass-border));
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
}
html[data-theme="light"] .geo-media {
  background: #fff;
  box-shadow: 0 12px 32px rgba(12, 40, 32, 0.07);
}
html[data-theme="light"] .geo-media picture,
html[data-theme="light"] .geo-media img {
  background: #eef5f1;
}
@media (prefers-reduced-motion: reduce) {
  .geo-media { content-visibility: visible; }
}

/* Careers & Collaboration */
body.careers-page {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 8% -8%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
}
body.careers-page .careers-main {
  max-width: 52rem;
  position: relative;
  z-index: 1;
}
body.careers-page .careers-hero {
  margin-bottom: var(--space-5);
}
body.careers-page .careers-workspace {
  margin: 0 0 var(--space-6);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--glass-border));
}
body.careers-page .careers-workspace-ent {
  display: none;
  border-color: color-mix(in srgb, #d4af37 28%, var(--glass-border));
}
body.careers-page[data-mode="enterprise"] .careers-workspace-smb {
  display: none;
}
body.careers-page[data-mode="enterprise"] .careers-workspace-ent {
  display: block;
}
body.careers-page .careers-workspace picture,
body.careers-page .careers-workspace img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050a08;
}
html[data-theme="light"] body.careers-page .careers-workspace picture,
html[data-theme="light"] body.careers-page .careers-workspace img {
  background: #eef5f1;
}
body.careers-page .careers-quote {
  margin: 0 0 var(--space-6);
  padding: 1.35rem 1.5rem 1.2rem;
  border-left: 3px solid var(--accent);
}
body.careers-page .careers-quote p {
  margin: 0 0 0.85rem;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--text);
  letter-spacing: -0.015em;
}
body.careers-page .careers-quote cite {
  color: var(--muted);
  font-style: normal;
  font-size: 0.88rem;
}
body.careers-page .careers-block {
  margin: 0 0 var(--space-6);
}
body.careers-page .careers-block h2 {
  margin: 0 0 0.65rem;
  letter-spacing: -0.03em;
}
body.careers-page .careers-lead,
body.careers-page .careers-block > p {
  color: var(--muted);
  line-height: 1.6;
}
body.careers-page .careers-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.1rem;
}
@media (min-width: 720px) {
  body.careers-page .careers-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
body.careers-page .careers-card {
  padding: 1.1rem 1.15rem 1.15rem;
}
body.careers-page .careers-card h3 {
  margin: 0 0 0.45rem;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
body.careers-page .careers-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.55;
}
body.careers-page .careers-open {
  padding: 1.5rem 1.45rem 1.55rem;
}
body.careers-page .careers-open h3 {
  margin: 1.15rem 0 0.45rem;
  letter-spacing: -0.02em;
}
body.careers-page .car-intro-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: 1.15rem;
  max-width: 26.5rem;
}
body.careers-page .car-intro-actions .btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.18rem;
  width: 100%;
  min-height: var(--touch, 2.75rem);
  padding: 0.8rem 1.1rem;
  text-align: left;
  border-radius: var(--radius-xs);
}
body.careers-page .car-cta-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.78;
}
body.careers-page .car-cta-addr {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
  line-height: 1.3;
}
@media (min-width: 768px) {
  body.careers-page .car-intro-actions {
    max-width: 32rem;
  }
}
@media print {
  body.careers-page .car-intro-actions .btn {
    box-shadow: none;
    background: #fff;
    color: #000;
    border: 1px solid #bbb;
  }
}
body.article-geo-page .cta-workspace {
  margin: 0 auto var(--space-5);
  max-width: 52rem;
}
body.article-geo-page .cta-workspace picture,
body.article-geo-page .cta-workspace img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #050a08;
}

body.careers-page .svc-faq-block {
  margin-top: var(--space-6);
}
body.careers-page .svc-faq a.car-founder-link {
  color: var(--accent);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.16em;
  cursor: pointer;
}
body.careers-page .svc-faq a.car-founder-link:hover,
body.careers-page .svc-faq a.car-founder-link:focus-visible {
  color: var(--accent-2, var(--accent));
}
html[data-theme="light"] body.careers-page .careers-quote,
html[data-theme="light"] body.careers-page .careers-card,
html[data-theme="light"] body.careers-page .careers-open {
  background: #fff;
}

/* Light-mode photos (WCAG 2.2 AA / EN 301 549): dark rasters stay contained figures.
   Decorative aisle walls remain off. Caption and frame meet 3:1 non-text contrast. */
html[data-theme="light"] .geo-media,
html[data-theme="light"] .workspace-visual,
html[data-theme="light"] body.careers-page .careers-workspace {
  background: var(--bg-elev);
  border: 1.5px solid var(--faint);
  box-shadow: 0 10px 28px rgba(12, 30, 24, 0.08);
}
html[data-theme="light"] .geo-media-cap,
html[data-theme="light"] .workspace-visual figcaption {
  color: var(--muted);
  background: var(--bg-elev);
}
html[data-theme="light"] .geo-media picture,
html[data-theme="light"] .geo-media img,
html[data-theme="light"] .workspace-visual picture,
html[data-theme="light"] .workspace-visual img,
html[data-theme="light"] body.careers-page .careers-workspace picture,
html[data-theme="light"] body.careers-page .careers-workspace img {
  background: var(--bg-3);
}
html[data-theme="light"] body[data-mode="enterprise"] .geo-media,
html[data-theme="light"] body.careers-page[data-mode="enterprise"] .careers-workspace-ent {
  border-color: #6b5c3a;
}
html[data-theme="light"] .svc-smb-stage,
html[data-theme="light"] .svc-ent-stage,
html[data-theme="light"] .svc-euai-stage {
  display: none !important;
}

@media (prefers-contrast: more) {
  html[data-theme="light"] .geo-media,
  html[data-theme="light"] .workspace-visual,
  html[data-theme="light"] body.careers-page .careers-workspace {
    border-width: 2px;
    border-color: var(--text);
  }
  html[data-theme="light"] .geo-media-cap,
  html[data-theme="light"] .geo-media-cap strong,
  html[data-theme="light"] .workspace-visual figcaption {
    color: var(--text);
  }
}

@media (forced-colors: active) {
  .svc-smb-stage,
  .svc-ent-stage,
  .svc-euai-stage {
    display: none !important;
  }
  .geo-media,
  .workspace-visual,
  .careers-workspace {
    border: 2px solid CanvasText !important;
    background: Canvas !important;
  }
  .geo-media img,
  .workspace-visual img,
  .careers-workspace img {
    forced-color-adjust: none;
  }
  .geo-media-cap,
  .geo-media-cap strong,
  .workspace-visual figcaption {
    color: CanvasText !important;
    background: Canvas !important;
  }
}

.geo-media-cap,
.workspace-visual figcaption {
  overflow: visible;
}

.geo-media,
.careers-workspace,
.workspace-visual,
.svc-faq {
  scroll-margin-top: calc(var(--nap-h) + var(--bar-h) + 0.75rem);
}

@media print {
  .svc-smb-stage,
  .svc-ent-stage,
  .svc-euai-stage,
  .audio-toggle {
    display: none !important;
  }
  .geo-media,
  .workspace-visual,
  .careers-workspace {
    break-inside: avoid;
    box-shadow: none;
  }
}