/* ==========================================================================
   AxonSystems Technologies — Design System
   Palette derived from brand logo: deep navy, electric blue, chrome/silver, cyan glow
   ========================================================================== */

html {
  /* Base type scale bumped ~12.5% (16px -> 18px) — every rem-based size in
     this file scales from this. Uses % so it still respects user/browser
     font-size preferences instead of hard-locking to a pixel value. */
  font-size: 112.5%;
}

:root {
  /* Brand colors */
  --navy-950: #04060d;
  --navy-900: #070b16;
  --navy-800: #0b1224;
  --navy-700: #101a33;
  --navy-600: #16234a;

  --blue-300: #7fb0ff;
  --blue-400: #5b93ff;
  --blue-500: #2f6fef;
  --blue-600: #1e54c7;
  --blue-700: #163f97;

  --cyan-300: #8ff0ff;
  --cyan-400: #22d3ee;
  --cyan-500: #0fb8d8;

  --silver-100: #f4f7fb;
  --silver-200: #e3e9f2;
  --silver-300: #cbd5e1;
  --silver-400: #a8b6c9;
  --silver-500: #8593a8;

  --white: #ffffff;
  --ink-100: var(--navy-900);
  --ink-300: var(--navy-700);
  --ink-400: #45526b;
  --ink-500: #5b6a86;

  /* Pre-flip dark-theme ink values, kept as fixed hex (not tokens) for the
     few panels that intentionally stay dark on the light site — the
     footer, the CTA banner, and anything else with a navy/dark background.
     These must NOT be var(--ink-*) since those tokens now mean "dark text
     for a light body" — using them here would make footer text invisible
     against its own still-dark background. */
  --ink-on-dark-100: #eef2f8;
  --ink-on-dark-300: #b9c4d6;
  --ink-on-dark-400: #8b98b0;
  --ink-on-dark-500: #64708a;

  /* Same idea for borders — --border-soft/--border-strong are now navy
     tinted for the light page, which is invisible against the dark hero/
     CTA-banner/footer panels. These are the original silver-blue-tinted
     pre-flip values. */
  --border-on-dark-soft: rgba(148, 178, 216, 0.14);
  --border-on-dark-strong: rgba(148, 178, 216, 0.28);

  --success: #34d399;

  /* Retail accent pair — sale badges, "Save R" chips, deals-section
     eyebrow, the checkout-error tone. Consolidates hex values that used
     to be repeated ad hoc across css/store.css into one named pair. */
  --accent-deal: #dc2626;
  --accent-deal-2: #f97316;
  --accent-deal-soft: #fee2e2;
  --accent-success: #15803d;
  --accent-success-soft: #dcfce7;

  /* Surfaces — a soft off-white page canvas (not stark #fff) with crisp
     white cards/panels sitting on top of it, so elevation actually reads
     as depth instead of two identical flat whites. */
  --bg-body: var(--silver-100);
  --bg-elevated: var(--white);
  --bg-elevated-hover: var(--silver-200);
  --border-soft: rgba(22, 35, 74, 0.1);
  --border-strong: rgba(22, 35, 74, 0.22);

  /* Elevation — named so every card/tile/product-card hover state lifts
     by the same amount instead of each component inventing its own
     shadow values. */
  --shadow-card: 0 1px 2px rgba(22, 35, 74, 0.05);
  --shadow-card-hover: 0 22px 40px -20px rgba(22, 35, 74, 0.24);
  --shadow-pop: 0 16px 32px -14px rgba(47, 111, 239, 0.32);

  /* Skeleton loader shimmer sweep */
  --shimmer: linear-gradient(
    100deg,
    var(--silver-200) 30%,
    var(--silver-100) 50%,
    var(--silver-200) 70%
  );

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--blue-500) 0%, var(--cyan-400) 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(47, 111, 239, 0.18) 0%, rgba(34, 211, 238, 0.12) 100%);
  --grad-chrome: linear-gradient(160deg, var(--silver-100) 0%, var(--silver-400) 45%, var(--silver-200) 100%);
  /* Hero sections stay deliberately dark (a bold, dramatic entry point)
     while the rest of the site is light — see .hero/.page-hero. Base is
     navy-900, a touch lighter/richer than the old near-black navy-950. */
  --grad-hero-bg: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(47, 111, 239, 0.3), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 20%, rgba(34, 211, 238, 0.16), transparent 60%),
    var(--navy-900);
  --tint-panel: rgba(226, 232, 245, 0.6);

  /* Typography */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Motion */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
  --dur-slow: 0.9s;

  /* Layout */
  --container-w: 1600px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --header-h: 84px;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@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;
    scroll-behavior: auto !important;
  }
}

/* ---------- Cross-page navigation transitions ----------
   Opts every page on the site into the browser's native cross-document
   View Transition (Chrome/Edge 111+; a no-op elsewhere, so this is purely
   additive) — clicking a link crossfades into the next page instead of
   the old page vanishing and the new one snapping in with a blank flash
   between them. No JS router needed: the browser handles it as part of
   the normal full-page navigation. Kept quick and subtle on purpose —
   this should read as "the page settled in," not as a slideshow effect. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

body {
  background: var(--bg-body);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Ambient full-site 3D background ---------- */
/* Fixed, faint, behind all page content on every page. See js/hero3d.js */
.bg-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.bg-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

main,
.site-footer {
  position: relative;
  z-index: 1;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy-900);
}

/* ---------- Utility layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin-inline: auto;
  padding-inline: 24px;
}

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 128px);
}

.section-head {
  max-width: 720px;
  margin-bottom: clamp(36px, 6vw, 64px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-600);
  margin-bottom: 14px;
}

.eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--grad-brand);
  border-radius: 2px;
}

.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  margin-bottom: 16px;
}

.section-head p {
  color: var(--ink-300);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
}

.text-center {
  text-align: center;
  margin-inline: auto;
}

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chrome-text {
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out-quart), box-shadow var(--dur-fast) var(--ease-out-quart),
    border-color var(--dur-fast) var(--ease-out-quart), background var(--dur-fast) var(--ease-out-quart);
  white-space: nowrap;
  text-align: center;
  max-width: 100%;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-primary {
  background: var(--grad-brand);
  color: var(--navy-950);
  box-shadow: 0 8px 30px -8px rgba(47, 111, 239, 0.65);
}

.btn-primary span {
  color: var(--navy-950);
}

.btn-primary:hover {
  box-shadow: 0 12px 40px -8px rgba(34, 211, 238, 0.75);
}

.btn-outline {
  background: var(--white);
  color: var(--navy-900);
  border-color: var(--border-strong);
  backdrop-filter: blur(6px);
}

.btn-outline:hover {
  border-color: var(--blue-400);
  background: var(--grad-brand-soft);
}

.btn-block {
  width: 100%;
}

.btn-arrow {
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.btn:hover .btn-arrow {
  transform: translateX(4px);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--header-h);
  z-index: 100;
  display: flex;
  align-items: center;
  /* Sits directly over the dark hero on load, so it needs enough opacity
     and its own shadow to read as a crisp white bar rather than a hazy
     grey smear over the dark background behind it. */
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border-on-dark-soft);
  box-shadow: 0 4px 30px -16px rgba(4, 6, 13, 0.4);
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.98);
  border-color: var(--border-soft);
  box-shadow: 0 4px 24px -12px rgba(22, 35, 74, 0.18);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy-900);
  flex-shrink: 0;
}

.brand img {
  height: 52px;
  width: auto;
}

/* Footer sits on a dark panel with more vertical room than the header, so
   the logo can afford to run bigger there for a stronger sign-off. */
.footer-brand .brand img {
  height: 68px;
}

.brand-name span {
  display: block;
}

.brand-name .brand-sub {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-600);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.main-nav a {
  position: relative;
  padding: 10px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-300);
  border-radius: 999px;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--blue-600);
  background: rgba(47, 111, 239, 0.1);
}

.main-nav a[aria-current="page"] {
  color: var(--white);
  background: var(--grad-brand);
  box-shadow: 0 6px 16px -6px rgba(47, 111, 239, 0.55);
}

.main-nav .has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-out-quart), transform var(--dur-fast) var(--ease-out-quart),
    visibility var(--dur-fast);
  box-shadow: 0 24px 48px -16px rgba(22, 35, 74, 0.22);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  color: var(--ink-100);
}

.dropdown a small {
  color: var(--ink-400);
  font-weight: 400;
  font-size: 0.78rem;
}

.dropdown a:hover {
  background: rgba(47, 111, 239, 0.1);
  color: var(--blue-600);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-cta .btn {
  padding: 12px 22px;
  font-size: 0.88rem;
}

.header-phone {
  display: none;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-300);
}

.header-phone svg {
  width: 16px;
  height: 16px;
  color: var(--blue-500);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(22, 35, 74, 0.05);
  border: 1px solid var(--border-soft);
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin-inline: auto;
  background: var(--navy-900);
  transition: transform var(--dur-fast) ease, opacity var(--dur-fast) ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--header-h);
  background: var(--grad-hero-bg);
  overflow: hidden;
}

.hero-grid-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: linear-gradient(rgba(148, 178, 216, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 178, 216, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, black, transparent);
}

/* Two-column layout: copy on the left, a product/website mockup panel on
   the right (.hero-visual) so the wide desktop hero doesn't read as a
   centered headline floating in empty space — it also does double duty
   selling the web/software build capability right at the top of the page. */
.hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  text-align: left;
  gap: clamp(32px, 5vw, 64px);
  padding-block: 48px;
}

.hero .hero-copy {
  max-width: 640px;
}

.hero .hero-lede {
  max-width: 560px;
  margin-inline: 0;
  font-size: clamp(1.1rem, 1.4vw, 1.25rem);
}

.hero .hero-actions {
  justify-content: flex-start;
}

.hero .hero-stats {
  justify-content: flex-start;
}

.hero .eyebrow {
  font-size: 0.86rem;
}

/* .hero/.page-hero stay dark (see --grad-hero-bg) while the rest of the
   site is light — so their text pins to light-on-dark values instead of
   following the page's flipped (dark-on-light) defaults. */
.hero-copy .eyebrow {
  color: var(--cyan-400);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.1s forwards;
}

.hero h1 {
  /* Sized to fit comfortably in the narrower copy column now that the hero
     shares width with .hero-visual — the old 5rem max was tuned for a wide
     centered column and wrapped to 5 cramped lines here. */
  font-size: clamp(2.1rem, 4.2vw, 3.6rem);
  margin-bottom: 22px;
  color: var(--white);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.25s forwards;
}

.hero-lede {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: var(--ink-on-dark-300);
  max-width: 540px;
  margin-bottom: 34px;
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.4s forwards;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-bottom: 46px;
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.55s forwards;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 48px);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.7s forwards;
}

.hero-stats .stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  color: var(--white);
}

.hero-stats .stat-label {
  font-size: 0.82rem;
  color: var(--ink-on-dark-400);
  margin-top: 2px;
}

/* ---------- Hero visual: browser/code mockup ---------- */
/* Fills the right column of the hero with a stylized "we build this"
   preview — a browser chrome around a code snippet + a site-preview block
   — plus a couple of floating proof-point chips. Pure CSS/SVG, no image
   asset required. */
.hero-visual {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 460px;
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.5s forwards;
}

.mockup-window {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(165deg, rgba(22, 35, 74, 0.85), rgba(7, 11, 22, 0.95));
  border: 1px solid var(--border-on-dark-soft);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.65);
  transform: perspective(1400px) rotateY(-6deg) rotateX(2deg);
}

.mockup-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid var(--border-on-dark-soft);
}

.mockup-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-on-dark-500);
}

.mockup-dot:nth-child(1) {
  background: #f97066;
}

.mockup-dot:nth-child(2) {
  background: #f6c344;
}

.mockup-dot:nth-child(3) {
  background: var(--success);
}

.mockup-url {
  margin-left: 10px;
  font-size: 0.72rem;
  color: var(--ink-on-dark-400);
  background: rgba(255, 255, 255, 0.05);
  padding: 4px 12px;
  border-radius: 999px;
}

.mockup-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mockup-code {
  font-family: "Courier New", monospace;
  font-size: 0.8rem;
  line-height: 1.8;
  color: var(--ink-on-dark-300);
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  border: 1px solid var(--border-on-dark-soft);
}

.mockup-code .c-kw {
  color: var(--cyan-400);
}

.mockup-code .c-fn {
  color: var(--blue-300);
}

.mockup-code .c-str {
  color: #f6c344;
}

.mockup-preview {
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-on-dark-soft);
  padding: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.mockup-preview-bar {
  height: 10px;
  width: 65%;
  border-radius: 6px;
  background: var(--grad-brand);
  opacity: 0.75;
  margin-bottom: 8px;
}

.mockup-preview-bar--short {
  width: 38%;
  opacity: 0.35;
  background: var(--ink-on-dark-500);
}

.mockup-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}

.mockup-preview-grid span {
  display: block;
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-on-dark-soft);
}

/* ---------- Hero mockup: typed code + "console output" sell copy ----------
   #heroCode and #heroConsoleLines start out with real, final markup in the
   HTML (so it reads fine with no JS / prefers-reduced-motion); js/main.js
   clears them on load and types the same markup back in character-by-
   character, tag-aware, so the syntax highlighting stays intact mid-type. */
.mockup-console-label {
  margin: 0 0 10px;
  font-family: "Courier New", monospace;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-on-dark-500);
}

.mockup-console-lines {
  min-height: 148px;
  font-family: "Courier New", monospace;
  font-size: 0.76rem;
  line-height: 1.85;
  color: var(--ink-on-dark-300);
}

.console-line {
  display: inline-block;
}

.console-dim {
  color: var(--ink-on-dark-500);
}

.console-ok {
  margin-right: 6px;
  color: var(--success);
  font-weight: 700;
}

.console-result {
  margin-top: 2px;
  color: var(--ink-on-dark-100);
  font-weight: 600;
}

.mockup-code.is-typing::after,
.mockup-console-lines.is-typing::after,
.mockup-cursor {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  vertical-align: text-bottom;
  background: var(--cyan-400);
  animation: caretBlink 0.9s step-end infinite;
}

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

.floating-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--white);
  color: var(--navy-900);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 24px 44px -18px rgba(0, 0, 0, 0.55);
  animation: floatSlow 6s ease-in-out infinite;
}

.floating-chip svg {
  width: 18px;
  height: 18px;
  color: var(--blue-500);
  flex-shrink: 0;
}

.floating-chip--1 {
  top: -18px;
  left: -20px;
  animation-delay: 0s;
}

.floating-chip--2 {
  bottom: -10px;
  right: -34px;
  animation-delay: 1.4s;
}

.floating-chip--3 {
  bottom: -42px;
  left: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 20px;
  animation-delay: 2.6s;
}

.floating-chip--3 .chip-metric {
  font-size: 1.25rem;
  font-weight: 700;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-orb {
  position: relative;
  width: min(420px, 90%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(47, 111, 239, 0.35), rgba(7, 11, 22, 0) 70%);
  border: 1px solid var(--border-on-dark-soft);
  display: grid;
  place-items: center;
  animation: floatSlow 7s ease-in-out infinite;
}

.hero-orb::before,
.hero-orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark-soft);
}

.hero-orb::before {
  inset: -26px;
  animation: spin 22s linear infinite;
  border-style: dashed;
  opacity: 0.5;
}

.hero-orb::after {
  inset: -52px;
  opacity: 0.25;
}

.hero-orb img {
  width: 62%;
  filter: drop-shadow(0 20px 45px rgba(47, 111, 239, 0.45));
}

.hero-orb--sm {
  width: min(260px, 80%);
}

.hero-orb--sm::before {
  inset: -18px;
}

.hero-orb--sm::after {
  inset: -34px;
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-dark-400);
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 1s forwards;
}

.scroll-cue .mouse {
  width: 22px;
  height: 34px;
  border: 1px solid var(--border-on-dark-strong);
  border-radius: 12px;
  position: relative;
}

.scroll-cue .mouse::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 3px;
  height: 6px;
  background: var(--cyan-400);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: scrollDot 1.8s ease-in-out infinite;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + 88px);
  padding-bottom: 72px;
  background: var(--grad-hero-bg);
  overflow: hidden;
  border-bottom: 1px solid var(--border-on-dark-soft);
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

/* Base .breadcrumbs is also used inside the (light) store pages — this is
   the light-appropriate default. .page-hero overrides it below since that
   context stays dark. */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--ink-400);
  margin-bottom: 22px;
}

.breadcrumbs a {
  color: var(--ink-300);
  transition: color var(--dur-fast) ease;
}

.breadcrumbs a:hover {
  color: var(--blue-600);
}

.page-hero .breadcrumbs {
  color: var(--ink-on-dark-400);
}

.page-hero .breadcrumbs a {
  color: var(--ink-on-dark-300);
}

.page-hero .breadcrumbs a:hover {
  color: var(--cyan-400);
}

.page-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem);
  max-width: 780px;
  margin-bottom: 18px;
}

.page-hero .hero-lede {
  margin-bottom: 0;
}

/* ---------- Page-hero two-column variant with a visual (software-development.html) ---------- */
.page-hero--split .page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

@media (max-width: 960px) {
  .page-hero--split .page-hero-grid {
    grid-template-columns: 1fr;
  }

  .page-hero--split .automation-scene {
    order: -1;
    margin-inline: auto;
  }
}

/* ---------- Before/after automation scene ----------
   Two absolutely-stacked panels crossfade on a loop inside the same
   mockup-window chrome as the homepage hero, so it reads as one family of
   visuals across the site rather than a one-off graphic. */
.automation-scene {
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  opacity: 0;
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) 0.4s forwards;
}

.scene-stage {
  position: relative;
  min-height: 300px;
  padding: 26px 22px;
}

.scene-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 22px;
  text-align: center;
}

.scene-before {
  animation: sceneBefore 10s ease-in-out infinite;
}

.scene-after {
  animation: sceneAfter 10s ease-in-out infinite;
}

@keyframes sceneBefore {
  0%,
  35% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  45%,
  85% {
    opacity: 0;
    transform: translateY(-10px) scale(0.94);
  }
  95%,
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sceneAfter {
  0%,
  35% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  45%,
  85% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
}

/* Freeze on the finished, "After" state when motion is reduced — the
   pleasant outcome, held still, rather than the tedious "before" or a
   half-animated jump cut. Placed after the rules above so it wins the
   cascade for these two selectors specifically. */
@media (prefers-reduced-motion: reduce) {
  .scene-before,
  .scene-after {
    animation: none;
  }
  .scene-before {
    opacity: 0;
  }
  .scene-after {
    opacity: 1;
    transform: none;
  }
}

.scene-tag {
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene-tag--before {
  background: rgba(148, 178, 216, 0.14);
  color: var(--ink-on-dark-400);
}

.scene-tag--after {
  background: rgba(52, 211, 153, 0.16);
  color: var(--success);
}

.paper-pile {
  position: relative;
  width: 84px;
  height: 96px;
  margin: 6px auto 2px;
}

.paper-pile span {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(160deg, #ffffff, #e9edf5);
  border: 1px solid rgba(7, 11, 22, 0.08);
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, 0.4);
}

.paper-pile span:nth-child(1) {
  z-index: 1;
  transform: rotate(-7deg) translateY(7px);
}

.paper-pile span:nth-child(2) {
  z-index: 2;
  transform: rotate(-3deg) translateY(3px);
}

.paper-pile span:nth-child(3) {
  z-index: 3;
  transform: rotate(2deg);
}

.paper-pile span:nth-child(4) {
  z-index: 4;
  transform: rotate(-1deg) translateY(-3px);
}

.paper-pile span:nth-child(5) {
  z-index: 5;
  background: linear-gradient(160deg, #ffffff, #dfe5f0);
  transform: rotate(5deg) translateY(-6px);
}

.paper-pile span:last-child::before {
  content: "";
  position: absolute;
  inset: 20px 14px;
  background: repeating-linear-gradient(to bottom, rgba(7, 11, 22, 0.14) 0 2px, transparent 2px 10px);
}

.scene-check {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 6px auto 2px;
  border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 0 8px rgba(34, 211, 238, 0.12);
  color: var(--white);
}

.scene-check svg {
  width: 28px;
  height: 28px;
}

.scene-time {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.scene-time svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

.scene-time--before {
  color: var(--ink-on-dark-300);
}

.scene-time--after {
  color: var(--cyan-400);
}

.scene-caption {
  max-width: 260px;
  color: var(--ink-on-dark-400);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* ---------- Cards ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.tilt-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  transition: transform var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) ease,
    background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card:hover {
  border-color: var(--border-strong);
  background: var(--bg-elevated-hover);
  box-shadow: 0 30px 60px -30px rgba(47, 111, 239, 0.45);
}

.tilt-card .card-icon {
  width: 54px;
  height: 54px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--grad-brand-soft);
  border: 1px solid var(--border-soft);
  margin-bottom: 20px;
  transform: translateZ(30px);
}

.tilt-card .card-icon svg {
  width: 26px;
  height: 26px;
  color: var(--blue-500);
}

.tilt-card h3 {
  font-size: 1.2rem;
  margin-bottom: 10px;
  transform: translateZ(24px);
}

.tilt-card p {
  color: var(--ink-300);
  font-size: 0.95rem;
  transform: translateZ(18px);
}

.tilt-card .card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue-600);
  transform: translateZ(24px);
}

.tilt-card .card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-fast) ease;
}

.tilt-card:hover .card-link svg {
  transform: translateX(4px);
}

.tilt-card .card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(34, 211, 238, 0.12), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-fast) ease;
  pointer-events: none;
}

.tilt-card:hover .card-glow {
  opacity: 1;
}

/* checklist grid used on service detail pages */
.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.check-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  font-size: 0.95rem;
  color: var(--ink-100);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
}

.check-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.check-item svg {
  width: 20px;
  height: 20px;
  color: var(--blue-500);
  flex-shrink: 0;
  margin-top: 2px;
}

/* feature list bullets used inside service cards/pages */
.feature-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  color: var(--ink-300);
  font-size: 0.95rem;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--grad-brand);
}

/* ---------- Inverted (dark) section variant ---------- */
/* A handful of sections intentionally break from the light page to a dark
   navy panel for visual rhythm (Process, Industries, Vision & Mission, the
   service-page "why it matters" splits). They used to just set an inline
   navy background and inherit the page's normal dark-on-light text colors,
   which made headings/copy nearly invisible against their own background.
   This class swaps in the on-dark tokens instead, and adds a soft brand
   glow so the panel reads as an intentional dark section rather than a
   flat, muddy block. */
.section-invert {
  position: relative;
  background: var(--navy-900);
  border-block: 1px solid var(--border-on-dark-soft);
  overflow: hidden;
}

.section-invert::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 55% at 10% 0%, rgba(47, 111, 239, 0.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 100% 100%, rgba(34, 211, 238, 0.12), transparent 60%);
  pointer-events: none;
}

.section-invert > .container {
  position: relative;
  z-index: 1;
}

.section-invert .eyebrow {
  color: var(--cyan-400);
}

.section-invert h2,
.section-invert h3,
.section-invert h4 {
  color: var(--white);
}

.section-invert .section-head p:not(.eyebrow) {
  color: var(--ink-on-dark-300);
}

.section-invert .tilt-card,
.section-invert .process-step {
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.55);
}

.section-invert .tilt-card:hover,
.section-invert .process-step:hover {
  box-shadow: 0 30px 60px -24px rgba(34, 211, 238, 0.4);
}

/* ---------- Pain-point hook (software-development.html) ----------
   Rhetorical "sound familiar?" questions naming the exact friction each
   platform module below then answers — the agitate-then-relieve beat that
   makes the platform map that follows land as a payoff rather than a cold
   feature list. */
.pain-hook {
  margin-top: 64px;
}

.pain-hook .eyebrow {
  margin-bottom: 10px;
}

.pain-hook h2 {
  max-width: 640px;
  margin-bottom: 10px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.pain-hook-lede {
  max-width: 640px;
  margin-bottom: 28px;
  color: var(--ink-400);
}

.pain-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  align-items: start;
}

.pain-group {
  padding: 26px 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}

.pain-group-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}

.pain-group-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--grad-brand-soft);
}

.pain-group-icon svg {
  width: 18px;
  height: 18px;
  color: var(--blue-500);
}

.pain-group-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.pain-item + .pain-item {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--border-soft);
}

.pain-q {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.96rem;
  line-height: 1.4;
  color: var(--ink-100);
}

.pain-q::before {
  content: "\201C";
  margin-right: 2px;
  color: var(--blue-500);
}

.pain-a {
  color: var(--ink-300);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------- Platform showcase (software-development.html) ----------
   A hub-and-spoke "system map": one central platform card with department
   modules branching off it, joined by simple connector lines. Deliberately
   states outcomes only (what each module does for the business) — never
   implementation detail — while still making the "one connected system,
   not four separate tools" pitch concrete rather than abstract. */
.platform-map {
  max-width: 980px;
  margin: 0 auto;
}

.platform-hub {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 32px;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-on-dark-strong);
  background: linear-gradient(165deg, rgba(47, 111, 239, 0.18), rgba(34, 211, 238, 0.08)), var(--navy-800);
  box-shadow: 0 30px 60px -30px rgba(34, 211, 238, 0.4);
}

.platform-hub-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.14);
  color: var(--success);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.platform-hub-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.platform-hub h3 {
  margin-bottom: 8px;
  color: var(--white);
  font-size: 1.25rem;
}

.platform-hub p {
  margin: 0;
  color: var(--ink-on-dark-300);
  font-size: 0.92rem;
}

.platform-spine {
  width: 2px;
  height: 36px;
  margin: 0 auto;
  background: linear-gradient(var(--blue-500), var(--cyan-400));
  opacity: 0.5;
}

.platform-modules {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding-top: 24px;
}

.platform-modules::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 2px;
  background: linear-gradient(90deg, var(--blue-500), var(--cyan-400));
  opacity: 0.35;
}

.platform-module {
  position: relative;
  padding: 22px 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-on-dark-soft);
  background: var(--navy-800);
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) ease;
}

.platform-module::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 50%;
  width: 2px;
  height: 24px;
  background: linear-gradient(var(--blue-500), var(--cyan-400));
  opacity: 0.35;
}

.platform-module:hover {
  transform: translateY(-3px);
  border-color: var(--border-on-dark-strong);
}

.platform-module-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 12px;
  background: var(--grad-brand-soft);
}

.platform-module-icon svg {
  width: 22px;
  height: 22px;
  color: var(--cyan-400);
}

.platform-module h4 {
  margin-bottom: 6px;
  color: var(--white);
  font-size: 1rem;
}

.platform-module p {
  margin: 0;
  color: var(--ink-on-dark-400);
  font-size: 0.84rem;
  line-height: 1.55;
}

.platform-note {
  max-width: 720px;
  margin: 36px auto 0;
  text-align: center;
}

.platform-note p {
  margin: 0;
  color: var(--ink-on-dark-300);
  font-size: 0.95rem;
}

.platform-note a {
  color: var(--cyan-400);
  font-weight: 600;
  text-underline-offset: 3px;
}

.platform-note strong {
  color: var(--white);
}

@media (max-width: 760px) {
  .platform-modules {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .platform-modules::before,
  .platform-module::before {
    display: none;
  }
}

/* ---------- Animated theme icons (looping SVG, transparent bg) ---------- */
.anim-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--blue-500);
}

.anim-icon__svg {
  overflow: visible;
}

.anim-icon--xl {
  width: 150px;
  height: 150px;
}

.anim-icon--xl .anim-icon__svg {
  width: 100%;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .anim-icon * {
    animation: none !important;
  }
}

/* Cloud — Microsoft 365 */
.anim-icon--cloud .anim-icon__float {
  transform-origin: center;
  animation: iconFloat 3.4s ease-in-out infinite;
}

.anim-icon--cloud .anim-icon__pulse {
  fill: none;
  stroke: var(--blue-400);
  stroke-width: 1.4;
  opacity: 0;
  transform-origin: 12px 10px;
  animation: iconPulseRing 2.6s ease-out infinite;
}

.anim-icon--cloud .anim-icon__dot {
  fill: var(--blue-400);
  opacity: 0;
}

.anim-icon--cloud .anim-icon__dot--1 {
  animation: iconDotRise 2.2s ease-in infinite;
}

.anim-icon--cloud .anim-icon__dot--2 {
  animation: iconDotRise 2.2s ease-in infinite 0.35s;
}

.anim-icon--cloud .anim-icon__dot--3 {
  animation: iconDotRise 2.2s ease-in infinite 0.7s;
}

/* Support — IT Support */
.anim-icon--support .anim-icon__pulse {
  fill: none;
  stroke: var(--cyan-400);
  stroke-width: 1.2;
  opacity: 0;
  transform-origin: 12px 12px;
  animation: iconPulseRing 2.4s ease-out infinite;
}

.anim-icon--support .anim-icon__pulse--delay {
  animation-delay: 1.2s;
}

.anim-icon--support .anim-icon__wiggle {
  transform-origin: 14px 12px;
  animation: iconWiggle 2.8s ease-in-out infinite;
}

/* Web — Website Design & Development */
.anim-icon--web .anim-icon__draw {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: iconDraw 2.6s ease-in-out infinite;
}

.anim-icon--web .anim-icon__draw--2 {
  animation-delay: 0.45s;
}

.anim-icon--web .anim-icon__blink {
  fill: var(--cyan-400);
  animation: iconBlink 1.3s steps(1) infinite;
}

/* Code — Custom Software Development */
.anim-icon--code .anim-icon__bracket--l {
  transform-origin: 9px 12px;
  animation: iconBracketL 2.6s ease-in-out infinite;
}

.anim-icon--code .anim-icon__bracket--r {
  transform-origin: 15px 12px;
  animation: iconBracketR 2.6s ease-in-out infinite;
}

.anim-icon--code .anim-icon__cursor {
  stroke: var(--cyan-400);
  animation: iconBlink 1s steps(1) infinite;
}

@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1.6px);
  }
}

@keyframes iconPulseRing {
  0% {
    opacity: 0.55;
    transform: scale(0.65);
  }
  100% {
    opacity: 0;
    transform: scale(1.35);
  }
}

@keyframes iconDotRise {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-7px);
  }
}

@keyframes iconWiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-9deg);
  }
  75% {
    transform: rotate(9deg);
  }
}

@keyframes iconDraw {
  0% {
    stroke-dashoffset: 1;
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
  55% {
    stroke-dashoffset: 0;
  }
  85% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 0.2;
  }
}

@keyframes iconBlink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0.15;
  }
}

@keyframes iconBracketL {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-2px);
  }
}

@keyframes iconBracketR {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(2px);
  }
}

/* ---------- Article / prose body (Insights, legal pages) ---------- */
.article-body {
  color: var(--ink-300);
  line-height: 1.85;
  font-size: 1.02rem;
}

.article-body p {
  margin-bottom: 20px;
}

.article-body h2 {
  color: var(--navy-900);
  font-size: 1.5rem;
  margin: 40px 0 14px;
}

.article-body h3 {
  color: var(--navy-900);
  font-size: 1.15rem;
  margin: 28px 0 12px;
}

.article-body ul,
.article-body ol {
  margin: 0 0 20px 0;
  padding-left: 22px;
}

.article-body li {
  margin-bottom: 10px;
}

.article-body ul li {
  list-style: none;
  position: relative;
  padding-left: 4px;
}

.article-body ul li::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--grad-brand);
}

.article-body a {
  color: var(--blue-600);
  text-decoration: underline;
  text-decoration-color: rgba(30, 84, 199, 0.35);
  text-underline-offset: 3px;
}

.article-body a:hover {
  text-decoration-color: var(--blue-600);
}

.article-body strong {
  color: var(--navy-900);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--ink-400);
  font-size: 0.88rem;
  margin-bottom: 8px;
}

.article-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.related-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.related-articles a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--ink-100);
  font-weight: 600;
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
}

.related-articles a:hover {
  border-color: var(--cyan-400);
  transform: translateY(-3px);
}

.related-articles a small {
  display: block;
  color: var(--ink-400);
  font-weight: 400;
  font-size: 0.82rem;
  margin-top: 6px;
}

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
}

.reveal.is-visible {
  animation: fadeUp var(--dur-slow) var(--ease-out-quart) forwards;
}

/* ---------- Stats band ---------- */
.stats-band {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(47, 111, 239, 0.05), transparent);
}

.stats-band .container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  padding-block: 56px;
  text-align: center;
}

.stat-block .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
}

.stat-block .stat-label {
  color: var(--ink-400);
  font-size: 0.9rem;
  margin-top: 6px;
}

/* ---------- Bold rallying-cry statement band (software-development.html) ---------- */
.statement-band {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: linear-gradient(180deg, rgba(47, 111, 239, 0.05), transparent);
}

.statement-band .container {
  padding-block: 52px;
  text-align: center;
}

.statement-band p {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  line-height: 1.3;
  color: var(--ink-100);
}

/* ---------- Why us / values ---------- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.value-item {
  display: flex;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  transition: transform var(--dur-fast) var(--ease-out-quart), border-color var(--dur-fast) ease;
}

.value-item:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.value-item .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan-400);
  flex-shrink: 0;
}

.value-item h4 {
  font-size: 1rem;
  margin-bottom: 4px;
}

.value-item p {
  color: var(--ink-400);
  font-size: 0.88rem;
}

/* ---------- Split section (image/content) ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.split-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-on-dark-soft);
  aspect-ratio: 4/3;
  background: var(--navy-800);
  display: grid;
  place-items: center;
}

.split-media canvas {
  width: 100%;
  height: 100%;
}

.split ul li {
  margin-bottom: 14px;
}

/* ---------- Process steps ---------- */
.process-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  position: relative;
}

.process-step {
  position: relative;
  padding: 26px 22px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}

.process-step .step-index {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  background: var(--grad-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 12px;
  display: block;
}

.process-step h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.process-step p {
  color: var(--ink-400);
  font-size: 0.88rem;
}

/* ---------- CTA banner ---------- */
.cta-banner {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  overflow: hidden;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-900));
  border: 1px solid var(--border-on-dark-soft);
  text-align: center;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: var(--grad-brand);
  opacity: 0.16;
  filter: blur(80px);
  z-index: 0;
}

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

.cta-banner h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  margin-bottom: 14px;
  /* .cta-banner keeps its dark background intentionally as an accent band
     — pin to a light ink color rather than the (now light-page) default
     heading color, which would be invisible here. */
  color: var(--white);
}

.cta-banner p {
  color: var(--ink-on-dark-300);
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: 30px;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* ---------- Forms ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-field.full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-300);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  color: var(--navy-900);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

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

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  background: var(--white);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--ink-500);
}

.form-note {
  font-size: 0.8rem;
  color: var(--ink-500);
  margin-top: 4px;
}

.form-status {
  margin-top: 16px;
  font-size: 0.9rem;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  display: none;
}

.form-status.is-success {
  display: block;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

.form-status.is-error {
  display: block;
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* ---------- Contact info cards ---------- */
.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.contact-info-card {
  padding: 24px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
}

.contact-info-card .card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--grad-brand-soft);
  border: 1px solid var(--border-soft);
  margin-bottom: 16px;
}

.contact-info-card .card-icon svg {
  width: 22px;
  height: 22px;
  color: var(--blue-500);
}

.contact-info-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}

.contact-info-card p,
.contact-info-card a {
  color: var(--ink-300);
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.contact-info-card a:hover {
  color: var(--blue-600);
}

.map-embed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
  aspect-ratio: 16/7;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.15) contrast(0.96);
}

/* ---------- Footer ----------
   Stays dark intentionally (a bookend panel, like .cta-banner) — every
   text color below is pinned to the --ink-on-dark-* / --border-on-dark-*
   values rather than the page's flipped light-theme tokens.
   Keep a space between that trailing star and the following slash above:
   writing the two variable prefixes back to back closed this comment
   early and silently dropped the whole .site-footer rule below it,
   which is why the marketing footer rendered with no background at all,
   on every page, until this was found. */
.site-footer {
  position: relative;
  border-top: 1px solid var(--border-on-dark-soft);
  background: var(--navy-900);
  padding-top: 56px;
  overflow: hidden;
}

/* Glowing horizon — the same radial-gradient language as --grad-hero-bg,
   so the footer reads as the hero's bookend (both are the site's only
   dark panels) rather than a flat rectangle bolted on at the end. */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 360px;
  background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(47, 111, 239, 0.22), transparent 70%),
    radial-gradient(ellipse 38% 80% at 82% 0%, rgba(34, 211, 238, 0.15), transparent 70%);
  pointer-events: none;
}

/* Oversized brand wordmark watermark — sits centered behind the whole
   footer as a background signature (used to bleed off the bottom-right
   corner, which `overflow: hidden` on .site-footer clipped down to a
   barely-visible sliver). Decorative only (a pseudo-element, so it's
   invisible to assistive tech), the kind of confident signature mark
   serious product footers (Stripe, Linear) use to make the close of the
   page feel deliberate. */
.site-footer::after {
  content: "AxonSystems";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(4rem, 14vw, 11.5rem);
  line-height: 1;
  color: rgba(148, 178, 216, 0.035);
  -webkit-text-stroke: 1px rgba(148, 178, 216, 0.08);
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

/* ---------- Footer CTA band ---------- */
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--border-on-dark-soft);
}

.footer-cta h3 {
  color: var(--white);
  font-size: clamp(1.3rem, 2.6vw, 1.85rem);
  margin-bottom: 6px;
}

.footer-cta p {
  color: var(--ink-on-dark-300);
  font-size: 0.95rem;
  max-width: 480px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr;
  gap: 32px;
  padding-bottom: 48px;
}

.footer-brand .brand {
  margin-bottom: 16px;
  color: var(--white);
}

.footer-brand p {
  color: var(--ink-on-dark-400);
  font-size: 0.9rem;
  max-width: 320px;
  margin-bottom: 20px;
}

.social-row {
  display: flex;
  gap: 10px;
}

.social-row a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-on-dark-soft);
  display: grid;
  place-items: center;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, transform var(--dur-fast) ease;
}

.social-row a svg {
  width: 16px;
  height: 16px;
  color: var(--ink-on-dark-300);
}

.social-row a:hover {
  border-color: var(--cyan-400);
  background: rgba(34, 211, 238, 0.1);
  transform: translateY(-3px);
}

/* ---------- Footer accordion (phones) ----------
   Mirrors the store footer's accordion treatment (css/store.css) at the
   same breakpoint this grid already collapses to a single column (640px)
   — each .footer-col becomes a tap-to-expand row reusing the site-wide
   .mobile-accordion__trigger/__chevron/__panel component instead of
   dumping four link lists on top of each other. Above 640px every panel
   is forced open and the trigger goes inert, restoring the original
   always-open column look. .footer-brand (logo/blurb/social icons) is
   left untouched — see scripts/add-footer-accordion.mjs. */
.footer-col__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}

.footer-col__trigger .mobile-accordion__chevron {
  display: none;
  color: var(--ink-on-dark-400);
}

.footer-col__panel-inner {
  padding-left: 0;
}

@media (max-width: 640px) {
  .footer-grid {
    display: block;
  }

  .footer-brand {
    margin-bottom: 28px;
  }

  .footer-col {
    border-bottom: 1px solid var(--border-on-dark-soft);
  }

  .footer-col:first-of-type {
    border-top: 1px solid var(--border-on-dark-soft);
  }

  .footer-col__trigger {
    padding-block: 16px;
    margin-inline: -4px;
    padding-inline: 4px;
    transition: background var(--dur-fast) ease;
  }

  .footer-col__trigger:active {
    background: rgba(255, 255, 255, 0.06);
  }

  .footer-col__trigger h4 {
    margin-bottom: 0;
  }

  .footer-col__trigger .mobile-accordion__chevron {
    display: block;
  }

  .footer-col__panel-inner {
    padding-bottom: 18px;
  }
}

@media (min-width: 641px) {
  .footer-col__trigger {
    pointer-events: none;
    cursor: default;
  }

  .footer-col .mobile-accordion__panel {
    grid-template-rows: 1fr !important;
  }
}

.footer-col h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-on-dark-300);
  margin-bottom: 18px;
}

.footer-col h4::before {
  content: "";
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  flex-shrink: 0;
}

.footer-col li {
  margin-bottom: 12px;
}

.footer-col a {
  display: inline-block;
  color: var(--ink-on-dark-400);
  font-size: 0.92rem;
  transition: color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
  overflow-wrap: anywhere;
}

.footer-col a:hover {
  color: var(--cyan-400);
  transform: translateX(3px);
}

/* Sept 2026 — the "Shop" column holds every product category (12+) plus
   Build a PC/Online Store/My Cart, easily 2-3x the links of Services/
   Company/Get In Touch, which made it visibly stretch the whole footer
   taller than its neighbors on tablet/laptop screens. Spreads it across
   two columns there instead of trimming the list — same breakpoint the
   footer accordion above already treats as "desktop" (mobile keeps the
   single-column accordion panel, which reads better on a narrow phone). */
@media (min-width: 641px) {
  #footer-shop-links {
    columns: 2;
    column-gap: 20px;
  }

  #footer-shop-links li {
    break-inside: avoid;
  }
}

.footer-bottom {
  position: relative;
  border-top: 1px solid var(--border-on-dark-soft);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--ink-on-dark-500);
}

.footer-bottom a {
  color: var(--ink-on-dark-500);
}

.footer-bottom a:hover {
  color: var(--cyan-400);
}

/* ---------- Back to top ---------- */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--grad-brand);
  display: grid;
  place-items: center;
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur-fast) ease, transform var(--dur-fast) ease, visibility var(--dur-fast);
  box-shadow: 0 12px 30px -10px rgba(47, 111, 239, 0.7);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  color: var(--navy-950);
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(36px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatSlow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmerSweep {
  0% {
    background-position: -120% 0;
  }
  100% {
    background-position: 220% 0;
  }
}

@keyframes scrollDot {
  0% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  70% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .split {
    grid-template-columns: 1fr;
  }

  .split-media {
    order: -1;
  }
}

/* Nav collapses to hamburger earlier than content stacking — six top-level
   links plus phone + two buttons need the full 1240px container to breathe. */
@media (max-width: 1240px) {
  .main-nav,
  .header-cta .btn-outline {
    display: none;
  }

  .header-phone {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 960px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .hero-visual {
    max-width: 320px;
    margin-inline: auto;
    /* No order override here (unlike the old code-mockup visual this
       replaced) — the hero-copy text (eyebrow + h1 + lede) must render
       FIRST on mobile, with the AdminCore callout following it, matching
       the DOM order; only the desktop two-column grid places them
       side by side. */
  }

  .mockup-window {
    transform: none;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .header-cta .btn-primary {
    padding: 10px 16px;
    font-size: 0.82rem;
  }

  .hero-stats {
    gap: 24px;
  }

  .floating-chip {
    padding: 9px 14px;
    font-size: 0.72rem;
  }

  .floating-chip--1 {
    top: -12px;
    left: -10px;
  }

  .floating-chip--2 {
    display: none;
  }

  .floating-chip--3 {
    left: 10px;
    bottom: -30px;
  }
}

/* Smallest phones — guard against any text/button overflow */
@media (max-width: 420px) {
  .container {
    padding-inline: 16px;
  }

  .btn {
    white-space: normal;
  }

  .hero-orb {
    width: min(260px, 84%);
  }

  .hero-orb--sm {
    width: min(200px, 78%);
  }
}

/* ---------- Mobile nav panel ---------- */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 95;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.mobile-nav.is-open {
  transform: translateX(0);
}

.mobile-nav a {
  padding: 16px 4px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-100);
  border-bottom: 1px solid var(--border-soft);
}

.mobile-nav .mobile-sub {
  padding-left: 16px;
  display: flex;
  flex-direction: column;
}

.mobile-nav .mobile-sub a {
  font-size: 0.92rem;
  color: var(--ink-400);
  border-bottom: none;
  padding: 10px 4px;
}

.mobile-nav .btn {
  margin-top: 16px;
}

/* Mobile nav accordion — Services expands/collapses instead of always showing */
.mobile-accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 4px;
  font-size: 1.05rem;
  font-weight: 500;
  font-family: var(--font-body);
  color: var(--ink-100);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}

.mobile-accordion__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-out-quart);
}

.mobile-accordion__trigger[aria-expanded="true"] .mobile-accordion__chevron {
  transform: rotate(180deg);
  color: var(--blue-500);
}

.mobile-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out-quart);
}

.mobile-accordion__trigger[aria-expanded="true"] + .mobile-accordion__panel {
  grid-template-rows: 1fr;
}

.mobile-accordion__panel-inner {
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-left: 14px;
}

.mobile-accordion__panel a {
  padding: 12px 4px;
  font-size: 0.94rem;
  color: var(--ink-400);
  border-bottom: none;
}

/* ---------- Legal pages (terms-of-service.html, returns-policy.html, privacy-policy.html) ---------- */
.legal-list {
  list-style: disc;
  padding-left: 22px;
  margin-bottom: 16px;
  color: var(--ink-300);
}

.legal-list li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.legal-list--check {
  list-style: none;
  padding-left: 0;
}

.legal-list--check li {
  position: relative;
  padding-left: 30px;
}

.legal-list--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--grad-brand);
}

.legal-list--check li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ---------- Legal page shell: sticky section nav + collapsible sections ----------
   Replaces one long centred column with a real two-column "docs" layout —
   a sticky jump-to-section sidebar on the left (scrollspy-highlighted as
   you scroll, see js/legal-page.js) and collapsible sections on the right
   so the page isn't a single wall of text end to end. Sections reuse the
   site's existing .mobile-accordion__trigger/__panel component (and its
   delegated click handler already wired in main.js) rather than a new
   accordion implementation. */
.legal-shell {
  max-width: 1080px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}

.legal-sidebar {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 116px);
  overflow-y: auto;
}

.legal-sidebar p {
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: 10px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.legal-sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid var(--border-soft, #e3e7f0);
}

.legal-sidebar a {
  padding: 7px 14px;
  font-size: 0.86rem;
  color: var(--ink-400);
  border-left: 2px solid transparent;
  margin-left: -2px;
  line-height: 1.4;
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.legal-sidebar a:hover {
  color: var(--navy-900);
}

.legal-sidebar a.is-active {
  color: var(--blue-600);
  border-left-color: var(--blue-600);
  font-weight: 600;
}

.legal-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 16px;
}

.legal-toolbar button {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue-600);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}

.legal-toolbar button:hover {
  text-decoration: underline;
}

.legal-section {
  border: 1px solid var(--border-soft, #e3e7f0);
  border-radius: var(--radius-lg, 16px);
  margin-bottom: 12px;
  background: var(--white);
  scroll-margin-top: 96px;
}

.legal-section .mobile-accordion__trigger {
  padding: 18px 22px;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy-900);
  border-bottom: none;
}

.legal-section .mobile-accordion__chevron {
  color: var(--ink-400);
}

/* Horizontal-only padding deliberately — any top/bottom padding here would
   survive the 0fr collapse trick above (padding is always rendered; only
   a grid item's shrinkable content is suppressed by min-height:0), leaving
   a sliver of the section visible even when collapsed. Vertical breathing
   room instead comes from margins on the actual content below, which DO
   correctly collapse to nothing along with the rest of the content. */
.legal-section .mobile-accordion__panel-inner {
  padding: 0 22px;
  color: var(--ink-300);
  line-height: 1.75;
}

.legal-section .mobile-accordion__panel-inner > *:last-child {
  margin-bottom: 20px;
}

.legal-section .mobile-accordion__panel-inner p {
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .legal-shell {
    grid-template-columns: 1fr;
  }
  .legal-sidebar {
    position: static;
    max-height: none;
  }
  .legal-sidebar nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-left: none;
    border-bottom: 1px solid var(--border-soft, #e3e7f0);
    padding-bottom: 4px;
  }
  .legal-sidebar a {
    border-left: none;
    border-bottom: 2px solid transparent;
    margin-left: 0;
    white-space: nowrap;
  }
  .legal-sidebar a.is-active {
    border-left-color: transparent;
    border-bottom-color: var(--blue-600);
  }
}

.legal-callout {
  border-radius: var(--radius-lg, 16px);
  padding: 24px 28px;
  margin: 24px 0 32px;
  background: linear-gradient(135deg, rgba(47, 111, 239, 0.08), rgba(34, 211, 238, 0.08));
  border: 1px solid rgba(47, 111, 239, 0.18);
}

.legal-callout h3 {
  color: var(--navy-900);
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.legal-callout p:last-child {
  margin-bottom: 0;
}

/* Friendly but firm — a time-sensitive note (e.g. the 30-day return
   deadline) that shouldn't get lost in a wall of text, but also shouldn't
   read as a warning/error. Amber, not red. */
.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--radius-md, 12px);
  padding: 14px 18px;
  margin: 16px 0;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.9rem;
  line-height: 1.6;
}

.legal-note svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.legal-note strong {
  color: #78350f;
}

/* ---------- Cookie consent modal (js/cookie-consent.js) ----------
   Built once and injected into <body> by the script itself — every page
   only needs the one <script> tag, no markup to keep in sync sitewide.
   Deliberately a blocking, full-screen modal rather than a dismissible
   bottom bar — no backdrop click-to-close, no Escape-to-close, no visible
   way to browse past it without choosing — matching how most real sites
   with a real consent requirement (not just a token banner) implement
   this. Same overlay + centred-card pattern as .auth-modal-overlay
   elsewhere in this file, for visual consistency between the two. */
.cookie-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(7, 11, 22, 0.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-out-quart);
}

.cookie-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.cookie-modal {
  width: 100%;
  max-width: 500px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--white);
  border-radius: var(--radius-lg, 24px);
  box-shadow: 0 32px 64px -16px rgba(4, 6, 13, 0.4);
  padding: clamp(24px, 4vw, 36px);
  transform: translateY(12px) scale(0.98);
  transition: transform var(--dur-med) var(--ease-out-quart);
}

.cookie-modal-overlay.is-visible .cookie-modal {
  transform: translateY(0) scale(1);
}

.cookie-modal__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--grad-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-bottom: 18px;
}

.cookie-modal__icon svg {
  width: 24px;
  height: 24px;
}

.cookie-modal h2 {
  font-size: 1.3rem;
  color: var(--navy-900);
  margin-bottom: 10px;
}

.cookie-modal__text {
  color: var(--ink-300);
  font-size: 0.92rem;
  line-height: 1.7;
  margin-bottom: 24px;
}

.cookie-modal__text strong {
  color: var(--navy-900);
}

.cookie-modal__text a {
  color: var(--blue-600);
  font-weight: 600;
}

.cookie-modal__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cookie-modal__actions button {
  flex: 1 1 160px;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 13px 20px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}

.cookie-modal__accept {
  border: none;
  background: var(--grad-brand);
  color: #fff;
  order: 2;
}

.cookie-modal__reject {
  border: 1px solid var(--border-soft, #cbd5e1);
  background: transparent;
  color: var(--ink-300);
  order: 1;
}

.cookie-modal__reject:hover {
  border-color: var(--blue-400);
  color: var(--blue-600);
}

/* Sept 2026 fix — this used to force both buttons to flex-direction:column
   + width:100%, so each one stretched edge-to-edge and stacked, reading
   as two oversized bars rather than a normal pair of buttons on a phone
   screen, live-reported by the user. Keeps them side by side (same idea
   as desktop) with tighter padding/font-size instead, so they scale down
   to a proportionate compact pair rather than growing to fill the modal. */
@media (max-width: 480px) {
  .cookie-modal__actions button {
    flex: 1 1 0;
    padding: 12px 12px;
    font-size: 0.84rem;
  }
}

/* =========================================================================
   ADMINCORE PRODUCT PAGE — Sept 2026
   Scoped to admincore.html. The hero mockup, pain-point tags, flow diagram
   and role graphic below are original abstract illustrations (styled divs,
   not a real product screenshot) — AdminCore is an internal platform with
   no public screens to show, so this represents it rather than faking one.
   ========================================================================= */

/* ---------- Hero product mockup (a stylized "app window") ---------- */
.admincore-mockup {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border-on-dark-soft);
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px -30px rgba(4, 10, 30, 0.55);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
}

.admincore-mockup__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--navy-800, #101a33);
  border-bottom: 1px solid rgba(148, 178, 216, 0.12);
}

.admincore-mockup__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(148, 178, 216, 0.35);
}

.admincore-mockup__title {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--ink-on-dark-400);
  letter-spacing: 0.02em;
}

.admincore-mockup__body {
  display: flex;
  min-height: 340px;
}

.admincore-mockup__nav {
  flex: 0 0 88px;
  background: var(--navy-900);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.admincore-mockup__nav span {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-on-dark-400);
  background: rgba(148, 178, 216, 0.06);
}

.admincore-mockup__nav span.is-active {
  color: #fff;
  background: var(--grad-brand);
}

.admincore-mockup__nav svg {
  width: 16px;
  height: 16px;
}

.admincore-mockup__main {
  flex: 1;
  padding: 22px;
  background: linear-gradient(180deg, #0c1428 0%, #0a1122 100%);
}

.admincore-mockup__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.admincore-stat {
  background: rgba(148, 178, 216, 0.06);
  border: 1px solid rgba(148, 178, 216, 0.1);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}

.admincore-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: #fff;
}

.admincore-stat span {
  font-size: 0.72rem;
  color: var(--ink-on-dark-400);
}

.admincore-mockup__chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 72px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(148, 178, 216, 0.12);
  margin-bottom: 16px;
}

.admincore-mockup__chart i {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--grad-brand);
  opacity: 0.85;
}

.admincore-mockup__kanban {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.admincore-mockup__col-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-on-dark-500);
  margin-bottom: 8px;
}

.admincore-mockup__card {
  background: rgba(148, 178, 216, 0.06);
  border: 1px solid rgba(148, 178, 216, 0.1);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  font-size: 0.72rem;
  color: var(--ink-on-dark-300);
  display: flex;
  align-items: center;
  gap: 6px;
}

.admincore-mockup__card i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: var(--cyan-400);
}

/* Sept 2026 fix — this grid used to be an inline style directly on the
   markup (display:grid;grid-template-columns:1.05fr 1fr;...), which has
   higher specificity than any class-based media query and so could never
   be overridden — the hero stayed a rigid 2-column grid at every width,
   squeezing the copy and the whole dashboard mockup into two narrow
   columns on a phone instead of stacking, live-reported as "totally not
   responsive." Moved to this class so the same breakpoint the mockup's
   own internal pieces below already use can actually reach it. */
.admincore-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .admincore-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 760px) {
  .admincore-mockup {
    transform: none;
  }
  .admincore-mockup__nav {
    flex: 0 0 56px;
  }
  .admincore-mockup__stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .admincore-mockup__kanban {
    grid-template-columns: 1fr;
  }
}

/* ---------- Pain-point cards (check-item + a "cost" tag) ---------- */
.pain-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  transition: border-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out-quart);
}

.pain-item:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.pain-item__icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.pain-item__icon svg {
  width: 19px;
  height: 19px;
}

.pain-item p {
  font-size: 0.95rem;
  color: var(--ink-100);
  margin: 0;
}

.pain-item__cost {
  font-size: 0.8rem;
  font-weight: 600;
  color: #ef4444;
}

/* ---------- Approval flow diagram ---------- */
.flow-diagram {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 28px 10px;
}

.flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 130px;
}

.flow-node__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--grad-brand-soft);
  color: var(--blue-400);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(47, 111, 239, 0.2);
}

.flow-node__icon svg {
  width: 24px;
  height: 24px;
}

.flow-node span {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-100);
}

.flow-arrow {
  color: var(--border-strong);
  flex: none;
}

.flow-arrow svg {
  width: 28px;
  height: 14px;
}

@media (max-width: 700px) {
  .flow-diagram {
    flex-direction: column;
  }
  .flow-arrow svg {
    transform: rotate(90deg);
  }
}

/* ---------- RBAC role graphic ---------- */
.role-graphic {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}

.role-tier {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.role-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(148, 178, 216, 0.18);
  background: rgba(148, 178, 216, 0.06);
  color: var(--ink-on-dark-100);
  font-size: 0.82rem;
  font-weight: 600;
}

.role-chip svg {
  width: 14px;
  height: 14px;
  color: var(--cyan-400);
}

.role-chip--lead {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
}

.role-connector {
  width: 1px;
  height: 18px;
  background: rgba(148, 178, 216, 0.25);
}

/* ---------- Hero mockup: alive, not static (Sept 2026) ---------- */
/* Bars breathe up/down forever, each offset so they never move in
   lockstep — reads as a live chart ticking rather than a frozen image. */
.admincore-mockup__chart i {
  transform-origin: bottom;
  animation: chartBarPulse 3s ease-in-out infinite;
}

.admincore-mockup__chart i:nth-child(1) { animation-delay: 0s; }
.admincore-mockup__chart i:nth-child(2) { animation-delay: 0.25s; }
.admincore-mockup__chart i:nth-child(3) { animation-delay: 0.5s; }
.admincore-mockup__chart i:nth-child(4) { animation-delay: 0.75s; }
.admincore-mockup__chart i:nth-child(5) { animation-delay: 1s; }
.admincore-mockup__chart i:nth-child(6) { animation-delay: 1.25s; }
.admincore-mockup__chart i:nth-child(7) { animation-delay: 1.5s; }
.admincore-mockup__chart i:nth-child(8) { animation-delay: 1.75s; }

@keyframes chartBarPulse {
  0%, 100% { transform: scaleY(0.88); }
  50% { transform: scaleY(1.07); }
}

/* Kanban cards float gently — a workspace with people still in it,
   not a screenshot. */
.admincore-mockup__card {
  animation: cardFloat 4.6s ease-in-out infinite;
}

.admincore-mockup__card:nth-child(2) { animation-delay: 0.5s; }
.admincore-mockup__card:nth-child(3) { animation-delay: 1s; }

@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Stat numbers tick up and down on their own (see the inline script on
   admincore.html) — this just gives each change a quiet "live update"
   flash so it reads as data changing, not a glitch. */
.admincore-stat {
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.admincore-stat b {
  font-variant-numeric: tabular-nums;
}

.admincore-stat.is-updating {
  border-color: rgba(34, 211, 238, 0.45);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.2), 0 10px 24px -10px rgba(34, 211, 238, 0.4);
}

/* Small pulsing "something just happened" dot on one sidebar icon —
   the same notification-badge language as any real inbox/ticket tool. */
.admincore-mockup__nav span {
  position: relative;
}

.admincore-mockup__nav span.has-live::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan-400);
  animation: dashDotPulse 2.2s ease-out infinite;
}

@keyframes dashDotPulse {
  0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .admincore-mockup__chart i,
  .admincore-mockup__card,
  .admincore-mockup__nav span.has-live::after {
    animation: none !important;
  }
}

/* =========================================================================
   ADMINCORE HOMEPAGE CALLOUT — Sept 2026
   A single slim band (not a full feature section) right after the hero:
   one typed-out line, then a glowing "Explore AdminCore" button. Kept
   deliberately light — no cards, no imagery — so it hooks attention
   without adding visual weight to an already busy homepage. See
   js/admincore-callout.js for the typing/reveal logic.
   ========================================================================= */
/* Sept 2026 — this used to be its own light-background section right
   after the hero; it now lives inside .hero-visual instead (replacing the
   old floating-code mockup there), so it needs its own dark-bg-friendly
   card rather than the page's plain centered-section look, and its typed
   text/cursor need to read light-on-dark like the rest of the hero. */
.hero-admincore {
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(28px, 4vw, 40px) clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(22, 35, 74, 0.85), rgba(7, 11, 22, 0.95));
  border: 1px solid var(--border-on-dark-soft);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.65);
  /* No fadeUp of its own — .hero-visual (the parent) already fades this
     whole block in; animating both would compound the opacity curve. */
}

.hero-admincore__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan-400);
  margin-bottom: 14px;
}

.admincore-callout__typed {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--white);
  min-height: 2.8em;
}

/* The blinking cursor — only ever visible while .is-typing is on; fades
   out once typing finishes rather than blinking forever after. */
.admincore-callout__typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.95em;
  margin-left: 3px;
  background: var(--blue-500);
  vertical-align: -0.1em;
  opacity: 0;
}

.admincore-callout__typed.is-typing::after {
  opacity: 1;
  animation: admincoreCursorBlink 0.85s steps(1) infinite;
}

@keyframes admincoreCursorBlink {
  50% {
    opacity: 0;
  }
}

.admincore-callout__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition: opacity 0.5s var(--ease-out-quart), transform 0.5s var(--ease-out-quart);
}

.admincore-callout__btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: admincoreGlowPulse 2.8s ease-in-out 0.5s infinite;
}

.admincore-callout__btn:hover {
  transform: translateY(-3px) scale(1.03);
}

.admincore-callout__btn .btn-arrow {
  transition: transform var(--dur-fast) ease;
}

.admincore-callout__btn:hover .btn-arrow {
  transform: translateX(4px);
}

@keyframes admincoreGlowPulse {
  0%,
  100% {
    box-shadow: 0 0 16px 1px rgba(47, 111, 239, 0.3), 0 8px 20px -8px rgba(47, 111, 239, 0.4);
  }
  50% {
    box-shadow: 0 0 34px 8px rgba(47, 111, 239, 0.5), 0 0 22px 4px rgba(34, 211, 238, 0.3);
  }
}

@media (prefers-reduced-motion: reduce) {
  .admincore-callout__typed::after {
    animation: none !important;
  }
  .admincore-callout__btn.is-visible {
    animation: none !important;
    box-shadow: 0 8px 20px -8px rgba(47, 111, 239, 0.4);
  }
}