/* Self-hosted fonts (Inter, Nunito) — served locally so they load under any CSP / offline. */
/* Inter 400 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 400 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 500 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 500 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 600 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 600 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 700 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 700 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter 800 latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter 800 latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito 600 latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito 600 latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito 700 latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito 700 latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito 800 latin-ext */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Nunito 800 latin */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================
   iT1 Nucleos — Modern Design System
   Bright, trustworthy, mission-driven
   ============================================================= */

:root {
  /* Backgrounds */
  --bg: #ffffff;
  --bg-soft: #f7f9fc;
  --bg-muted: #eef2f7;
  --bg-tint: #ecfeff;

  /* Text */
  --ink: #0b1220;
  --ink-2: #1e293b;
  --ink-soft: #334155;
  --ink-mute: #5b6680;
  --ink-faint: #94a3b8;

  /* Brand — Nucleos teal */
  --teal: #0099b8;
  --teal-deep: #007891;
  --teal-soft: #2dd4e5;
  --teal-tint: #cffafe;

  /* Brand — AchieveDXP */
  --dxp-teal: #119a96;
  --dxp-orange: #ef6c3a;
  --dxp-orange-soft: #f9a26c;

  /* Navy */
  --navy: #102e50;
  --navy-2: #1c3f6b;
  --navy-deep: #0a1f37;

  /* Accents */
  --emerald: #10b981;
  --rose: #f43f5e;
  --violet: #7c3aed;
  --amber: #f59e0b;

  /* Lines & shadows */
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow: 0 6px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 30px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 25px 50px -12px rgba(16, 46, 80, 0.22);
  --shadow-xl: 0 35px 70px -18px rgba(16, 46, 80, 0.32);

  /* Gradients */
  --grad-hero: radial-gradient(ellipse 80% 50% at 70% 0%, rgba(0, 153, 184, 0.08), transparent 70%),
               radial-gradient(ellipse 60% 50% at 0% 60%, rgba(239, 108, 58, 0.05), transparent 70%);
  --grad-warm: linear-gradient(135deg, #ef6c3a 0%, #f59e0b 100%);
  --grad-teal: linear-gradient(135deg, #2dd4e5 0%, #0099b8 100%);
  --grad-navy: linear-gradient(135deg, #102e50 0%, #1c3f6b 100%);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;

  /* Layout */
  --container: 1280px;
  --container-narrow: 980px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; transition: color 160ms; }
a:hover { color: var(--teal-deep); }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--teal-tint); color: var(--navy); }

/* =============================================================
   LAYOUT
   ============================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad);
}
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.section {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  position: relative;
}
.section-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.bg-soft { background: var(--bg-soft); }
.bg-tint { background: var(--bg-tint); }
.bg-navy { background: var(--navy); color: white; }

/* =============================================================
   NAV
   ============================================================= */
.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 1.25rem;
  max-width: 1360px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--navy);
  flex-shrink: 0;
}

.brand-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.6rem;
  background: var(--navy);
  color: white;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  flex-shrink: 0;
}

.brand-logo { height: 32px; width: auto; display: block; flex-shrink: 0; object-fit: contain; }

.brand-tagline {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  padding-left: 0.55rem;
  border-left: 1.5px solid var(--line);
  line-height: 1;
  white-space: nowrap;
  align-self: center;
}
/* Footer brand lockup stacks vertically so the "Achieve More" tagline
   doesn't overflow its grid column into the "Platform" heading. */
.footer-brand .brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
}
.footer-brand .brand-tagline {
  color: rgba(255, 255, 255, 0.82);
  padding-left: 0;
  border-left: none;
}

.nav-links {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-weight: 500;
  position: relative;
  padding: 0.5rem 0;
}
.nav-links a:hover { color: var(--navy); }
.nav-links a.active { color: var(--navy); font-weight: 600; }
.nav-links a.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--teal);
}

.nav-sep {
  width: 1px;
  height: 22px;
  background: var(--line-strong);
  padding: 0;
}

.nav-links a.nav-app {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.34rem 0.62rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  background: var(--app-color);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14);
  transition: filter 160ms, box-shadow 160ms, transform 160ms;
}
.nav-links a.nav-app::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
}
.nav-links a.nav-app::after {
  content: "↗";
  font-size: 0.82em;
  font-weight: 700;
  opacity: 0.85;
}
.nav-links a.nav-app:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 12px var(--app-shadow);
  transform: translateY(-1px);
}
.nav-app--workforce { --app-color: var(--teal); --app-shadow: rgba(0, 153, 184, 0.32); }
.nav-app--grants { --app-color: var(--dxp-orange); --app-shadow: rgba(239, 108, 58, 0.32); }

.nav-cta { display: flex; gap: 0.5rem; align-items: center; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  color: var(--navy);
  align-items: center;
  justify-content: center;
}

/* =============================================================
   BUTTONS
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.93rem;
  letter-spacing: -0.005em;
  transition: transform 180ms ease, box-shadow 220ms ease, background 220ms ease, color 200ms;
  border: 0;
  white-space: nowrap;
  text-decoration: none;
}

.btn-primary {
  background: var(--navy);
  color: white;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 10px 25px -8px rgba(16, 46, 80, 0.45);
}
.btn-primary:hover {
  background: var(--navy-2);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 16px 32px -10px rgba(16, 46, 80, 0.55);
}

.btn-teal {
  background: var(--teal);
  color: white;
  box-shadow: 0 10px 25px -8px rgba(0, 153, 184, 0.45);
}
.btn-teal:hover {
  background: var(--teal-deep);
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 16px 32px -10px rgba(0, 153, 184, 0.55);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover {
  background: white;
  color: var(--navy);
  border-color: var(--ink-faint);
  box-shadow: var(--shadow-sm);
}

.btn-lg { padding: 1.05rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: 0.55rem 1rem; font-size: 0.85rem; }
.btn .arrow { transition: transform 220ms; }
.btn:hover .arrow { transform: translateX(3px); }

/* =============================================================
   TYPOGRAPHY
   ============================================================= */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: var(--teal-tint);
  border: 1px solid rgba(0, 153, 184, 0.2);
  color: var(--teal-deep);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eyebrow.warm {
  background: #fef3eb;
  border-color: rgba(239, 108, 58, 0.22);
  color: var(--dxp-orange);
}

.eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 153, 184, 0.15);
  animation: pulse 2.4s ease-in-out infinite;
}
.eyebrow.warm .dot {
  background: var(--dxp-orange);
  box-shadow: 0 0 0 4px rgba(239, 108, 58, 0.18);
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.65; transform: scale(1.15); }
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.04;
  margin: 0;
  color: var(--navy);
}

h1 {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
}
h2 {
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  letter-spacing: -0.03em;
  line-height: 1.05;
}
h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}
h4 {
  font-size: 1.12rem;
  font-weight: 700;
}

.lead {
  font-size: clamp(1.08rem, 1.6vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.55;
  max-width: 62ch;
}

.text-mute { color: var(--ink-mute); }
.text-soft { color: var(--ink-soft); }
.teal { color: var(--teal); }
.orange { color: var(--dxp-orange); }
.navy-text { color: var(--navy); }

.brand-gradient {
  background: linear-gradient(135deg, var(--teal) 0%, var(--navy) 70%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

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

.section-head {
  max-width: 720px;
  margin: 0 auto 3.5rem;
  text-align: center;
}
.section-head h2 { margin-bottom: 1rem; }
.section-head .lead { margin: 0 auto; }
.section-head.left { text-align: left; margin: 0 0 3rem; }
.section-head.left .lead { margin: 0; }

/* =============================================================
   HERO
   ============================================================= */
.hero {
  position: relative;
  padding-top: clamp(3rem, 7vw, 5.5rem);
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
  background: white;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-hero);
  z-index: -2;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(16, 46, 80, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 46, 80, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 30%, black 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, black 25%, transparent 70%);
  z-index: -1;
  opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero-copy h1 {
  margin-top: 1.25rem;
  margin-bottom: 1.5rem;
  font-size: clamp(2.8rem, 7.5vw, 5.6rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
  font-weight: 800;
}
.hero-copy .lead { font-size: clamp(1.12rem, 1.55vw, 1.32rem); max-width: 56ch; }
.hero-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.hero-products { margin-top: 2rem; }
.hero-products-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.7;
  margin-bottom: 0.75rem;
}
.hero-products-row {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
}
.btn-product {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1 1 0;
  min-width: 190px;
  padding: 1rem 1.1rem 0.9rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  position: relative;
  transition: border-color 160ms, box-shadow 160ms, transform 160ms;
}
.btn-product::after {
  content: "↗";
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-weight: 700;
  color: var(--teal);
  opacity: 0.55;
  transition: transform 160ms;
}
.btn-product:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 22px rgba(0, 153, 184, 0.16);
  transform: translateY(-2px);
}
.btn-product:hover::after { transform: translate(2px, -2px); opacity: 0.9; }
.btn-product-logo {
  display: flex;
  align-items: center;
  height: 40px;
  padding-right: 1.5rem;
}
.btn-product-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
/* AchieveDXP is a single-line wordmark; the Navigator/Passport lockups stack a
   mark above tall type, so cap the wordmark-only lock a touch shorter to keep
   perceived weight even across the row. */
.btn-product:first-child .btn-product-logo { height: 30px; }
.btn-product-sub {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.hero-trust {
  display: flex;
  gap: 2rem;
  margin-top: 2.75rem;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.hero-trust-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.hero-trust-item .num {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--navy);
  line-height: 1;
}
.hero-trust-item .lbl {
  font-size: 0.78rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

/* Hero photo */
.hero-photo {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  aspect-ratio: 4 / 5;
  max-width: 540px;
  margin-left: auto;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(16, 46, 80, 0.65) 100%);
  pointer-events: none;
}
.hero-photo-caption {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  right: 1.5rem;
  color: white;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}
.hero-photo-caption .h {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.2rem;
}
.hero-photo-caption .s {
  font-size: 0.83rem;
  opacity: 0.85;
}

.hero-photo-stat {
  background: white;
  color: var(--navy);
  padding: 0.85rem 1.1rem;
  border-radius: 14px;
  text-align: right;
  box-shadow: var(--shadow);
  min-width: 130px;
}
.hero-photo-stat .num {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hero-photo-stat .lbl {
  font-size: 0.72rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 0.3rem;
}

/* Floating DXP badge over photo — positioned inside to avoid clipping */
.hero-photo-badge {
  position: absolute;
  top: 1.25rem;
  left: 1.25rem;
  background: white;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 0.7rem 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  z-index: 2;
}
.hero-photo-badge img { height: 26px; width: auto; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { max-width: 100%; margin: 2rem auto 0; aspect-ratio: 16 / 11; }
}

/* =============================================================
   PROOF STRIP (logos)
   ============================================================= */
.proof-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 800px) {
  .proof-strip { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}
.proof-strip .lg {
  color: var(--ink-mute);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-align: center;
  opacity: 0.65;
  transition: opacity 200ms, color 200ms;
}
.proof-strip .lg:hover { opacity: 1; color: var(--navy); }

/* =============================================================
   VALUE PROP (3-step like reference)
   ============================================================= */
.values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .values { grid-template-columns: 1fr; } }

.value {
  position: relative;
  padding: 2rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
}
.value:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.value .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 800;
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
}
.value h3 { margin-bottom: 0.65rem; }
.value p { color: var(--ink-soft); margin: 0; font-size: 0.97rem; line-height: 1.6; }

/* =============================================================
   ACHIEVE DXP SHOWCASE
   ============================================================= */
.dxp-showcase {
  position: relative;
  background: linear-gradient(180deg, var(--bg-soft) 0%, white 100%);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5rem);
}
.dxp-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(0, 153, 184, 0.07), transparent 55%),
              radial-gradient(ellipse at bottom left, rgba(239, 108, 58, 0.05), transparent 55%);
  pointer-events: none;
}
.dxp-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
@media (max-width: 960px) { .dxp-showcase-grid { grid-template-columns: 1fr; } }

.dxp-product-logo { height: 56px; width: auto; margin-bottom: 1.75rem; }

/* =============================================================
   FEATURE GRID (numbered 01-07)
   ============================================================= */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width: 960px) { .features { grid-template-columns: 1fr; } }

.feature {
  padding: 2.25rem 2rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 200ms, box-shadow 200ms, border-color 200ms;
  position: relative;
  overflow: hidden;
}
.feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}
.feature .f-num {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--teal-deep);
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
  display: inline-block;
}
.feature .f-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}
.feature h3 { margin-bottom: 0.65rem; color: var(--navy); }
.feature p { color: var(--ink-soft); margin: 0; font-size: 0.96rem; line-height: 1.6; }

.feature .f-icon.orange { background: #fef3eb; color: var(--dxp-orange); }
.feature .f-icon.violet { background: #f3e8ff; color: var(--violet); }
.feature .f-icon.emerald { background: #d1fae5; color: var(--emerald); }
.feature .f-icon.navy { background: rgba(16, 46, 80, 0.08); color: var(--navy); }
.feature .f-icon.amber { background: #fef3c7; color: var(--amber); }

/* =============================================================
   STATS (verified)
   ============================================================= */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: white;
  box-shadow: var(--shadow);
}
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  padding: 2.25rem 1.75rem;
  border-right: 1px solid var(--line);
}
.stat:last-child { border-right: 0; }
@media (max-width: 800px) {
  .stat { border-bottom: 1px solid var(--line); }
  .stat:nth-child(2n) { border-right: 0; }
  .stat:nth-last-child(-n+2) { border-bottom: 0; }
}
.stat .num {
  font-size: clamp(2.2rem, 4vw, 2.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--teal);
  display: block;
  line-height: 1;
}
.stat .lbl {
  margin-top: 0.7rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

/* =============================================================
   HUMAN TECH SECTION
   ============================================================= */
.humantech {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, #1a1144 0%, #2a1a5e 50%, #3b2275 100%);
  color: white;
  overflow: hidden;
}
.humantech::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(45, 212, 229, 0.18), transparent 50%),
              radial-gradient(circle at 20% 80%, rgba(167, 139, 250, 0.15), transparent 55%);
  pointer-events: none;
}
.humantech-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
@media (max-width: 900px) { .humantech-grid { grid-template-columns: 1fr; text-align: center; } }

.humantech-robot {
  position: relative;
  display: grid;
  place-items: center;
}
.humantech-robot img {
  max-width: 280px;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 25px 60px rgba(45, 212, 229, 0.35));
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.humantech h2 { color: white; }
.humantech .lead { color: rgba(255, 255, 255, 0.78); }
.humantech .eyebrow {
  background: rgba(45, 212, 229, 0.15);
  border-color: rgba(45, 212, 229, 0.35);
  color: #67e8f9;
}
.humantech .eyebrow .dot {
  background: #67e8f9;
  box-shadow: 0 0 0 4px rgba(45, 212, 229, 0.2);
}
.humantech .quote-marks {
  font-family: Georgia, serif;
  font-size: 3.5rem;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.humantech-quote {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0 0 1.5rem;
  color: white;
}

/* =============================================================
   COMPLIANCE GRID
   ============================================================= */
.compliance-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}
.compliance-badge {
  flex: 0 0 calc((100% - 3rem) / 4);
  padding: 1.5rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  background: white;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.compliance-badge:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.compliance-badge .cb-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  margin: 0 auto 0.85rem;
}
.compliance-badge .cb-name {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.compliance-badge .cb-desc {
  font-size: 0.78rem;
  color: var(--ink-mute);
  line-height: 1.4;
}

/* =============================================================
   SOLUTION CARDS (sectors)
   ============================================================= */
.sectors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 960px) { .sectors { grid-template-columns: 1fr; } }

.sector {
  position: relative;
  padding: 2rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform 220ms, box-shadow 220ms, border-color 220ms;
  display: flex;
  flex-direction: column;
}
.sector:hover {
  transform: translateY(-4px);
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
}
.sector .s-icon {
  width: 52px; height: 52px;
  border-radius: 13px;
  background: var(--grad-teal);
  display: grid;
  place-items: center;
  color: white;
  margin-bottom: 1.5rem;
}
.sector h3 { margin-bottom: 0.65rem; }
.sector p { color: var(--ink-soft); margin: 0; line-height: 1.6; font-size: 0.96rem; }
.sector .s-link {
  margin-top: auto;
  padding-top: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--teal);
}

/* =============================================================
   PHOTO + CONTENT SPLIT
   ============================================================= */
.split-photo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 960px) { .split-photo { grid-template-columns: 1fr; } }

.split-photo-img {
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.split-photo-img img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 22%;
}
@media (max-width: 960px) {
  /* On stacked mobile the tall 4/3 crop chops faces off — go wider/shorter
     so the framed photo keeps the learners in view and scales cleanly. */
  .split-photo-img img { aspect-ratio: 16 / 10; }
}

/* =============================================================
   QUOTE
   ============================================================= */
.quote {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: white;
  position: relative;
}
.quote::before {
  content: "\201C";
  position: absolute;
  top: 0.2rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--teal);
}
.quote blockquote {
  font-size: clamp(1.2rem, 2.3vw, 1.55rem);
  font-weight: 500;
  color: var(--navy);
  margin: 1.75rem 0 2rem;
  letter-spacing: -0.015em;
  line-height: 1.45;
}
.quote cite {
  font-style: normal;
  display: block;
  color: var(--ink);
  font-weight: 700;
}
.quote cite span {
  display: block;
  color: var(--ink-mute);
  font-weight: 400;
  font-size: 0.92rem;
  margin-top: 0.3rem;
}

/* =============================================================
   CTA
   ============================================================= */
.cta-banner {
  position: relative;
  padding: clamp(2.5rem, 6vw, 5rem);
  border-radius: var(--r-2xl);
  text-align: center;
  overflow: hidden;
  background: var(--navy);
  color: white;
}
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 0%, rgba(0, 153, 184, 0.35), transparent 55%),
              radial-gradient(ellipse at 80% 100%, rgba(45, 212, 229, 0.22), transparent 60%);
  pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 { color: white; margin-bottom: 1rem; }
.cta-banner .lead { margin: 0 auto 2.25rem; color: rgba(255, 255, 255, 0.85); }
.cta-banner .eyebrow {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: white;
}
.cta-banner .eyebrow .dot { background: var(--teal-soft); }
.cta-actions {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.cta-banner .btn-primary { background: var(--teal); }
.cta-banner .btn-primary:hover { background: var(--teal-deep); }
.cta-banner .btn-ghost { color: white; border-color: rgba(255, 255, 255, 0.25); }
.cta-banner .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
  border-color: rgba(255, 255, 255, 0.45);
}

/* --- Acquisition hero: text + brand-fusion graphic (scoped modifier) --- */
.cta-banner--acq {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  text-align: left;
}
.cta-banner--acq .lead { margin-left: 0; margin-right: 0; }
.cta-banner--acq .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: flex-start; }

.acq-graphic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  min-height: 340px;
  padding: 2rem 1rem;
}
.acq-orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.acq-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(45, 212, 229, 0.22);
}
.acq-ring--1 { width: 230px; height: 230px; animation: acqSpin 24s linear infinite; }
.acq-ring--2 { width: 340px; height: 340px; border-color: rgba(255, 255, 255, 0.08); animation: acqSpin 40s linear infinite reverse; }
.acq-ring::before {
  content: "";
  position: absolute;
  top: -5px; left: 50%;
  width: 9px; height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--teal-soft);
  box-shadow: 0 0 14px 3px rgba(45, 212, 229, 0.75);
}
.acq-ring--2::before { background: rgba(255, 255, 255, 0.85); box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.55); }

.acq-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}
.acq-logo { display: block; filter: brightness(0) invert(1); }
.acq-logo--it1 { width: 88px; height: 88px; }
.acq-logo--nuc { width: 200px; height: auto; }
.acq-plus {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--teal);
  box-shadow: 0 0 0 6px rgba(0, 153, 184, 0.16), 0 6px 20px rgba(0, 153, 184, 0.5);
  animation: acqPulse 3.2s ease-in-out infinite;
}
.acq-plus svg { width: 20px; height: 20px; }
.acq-become {
  position: relative;
  z-index: 1;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.acq-become strong { color: var(--teal-soft); font-weight: 700; }

@keyframes acqSpin { to { transform: rotate(360deg); } }
@keyframes acqPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(0, 153, 184, 0.16), 0 6px 20px rgba(0, 153, 184, 0.5); }
  50% { box-shadow: 0 0 0 13px rgba(0, 153, 184, 0.04), 0 6px 28px rgba(0, 153, 184, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .acq-ring, .acq-plus { animation: none; }
}
@media (max-width: 860px) {
  .cta-banner--acq { grid-template-columns: 1fr; text-align: center; }
  .cta-banner--acq .lead { margin-left: auto; margin-right: auto; }
  .cta-banner--acq .hero-actions { justify-content: center; }
  .acq-graphic { min-height: 280px; }
}

/* =============================================================
   FOOTER
   ============================================================= */
.footer {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.78);
  padding-block: 4.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
.footer-brand .brand { color: white; }
.footer-brand .brand-tag { background: white; color: var(--navy); }
.footer-brand .brand-logo { filter: brightness(0) invert(1); }
.footer-brand p {
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1.25rem;
  font-size: 0.93rem;
  line-height: 1.6;
  max-width: 36ch;
}
.footer-col h5 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: white;
  margin: 0 0 1rem;
  font-weight: 700;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}
.footer-col a {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.92rem;
}
.footer-col a:hover { color: white; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer-bottom .legal { display: flex; gap: 1.5rem; }
.footer-bottom .legal a { color: rgba(255, 255, 255, 0.65); }

/* =============================================================
   PAGE HEADER
   ============================================================= */
.page-head {
  padding-top: clamp(3rem, 7vw, 5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.page-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0, 153, 184, 0.10), transparent 55%);
  z-index: -1;
}
.page-head h1 { margin-bottom: 1.25rem; }
.page-head .lead { margin: 0 auto; }

/* =============================================================
   FEATURE LIST (with checkmarks)
   ============================================================= */
.feature-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.95rem;
}
.feature-list li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 0.85rem;
  color: var(--ink-soft);
  font-size: 1rem;
  align-items: flex-start;
}
.feature-list li::before {
  content: "";
  width: 22px; height: 22px;
  border-radius: 7px;
  background: var(--teal);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 1px;
}
.feature-list li strong { color: var(--navy); font-weight: 700; }

/* =============================================================
   SPLIT
   ============================================================= */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-rev { direction: rtl; }
.split-rev > * { direction: ltr; }

/* =============================================================
   STEPS
   ============================================================= */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 1.85rem;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: white;
  position: relative;
  transition: border-color 220ms, box-shadow 220ms;
}
.step:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-weight: 800;
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.step h4 { font-size: 1.1rem; margin-bottom: 0.6rem; }
.step p { color: var(--ink-soft); margin: 0; font-size: 0.93rem; }

/* =============================================================
   MOBILE PANEL
   ============================================================= */
.mobile-panel {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 200;
  padding: 6rem 2rem 2rem;
  display: none;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-panel.open { display: flex; }
.mobile-panel a {
  font-size: 1.25rem;
  font-weight: 700;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--navy);
}
.mobile-panel a:hover { color: var(--teal); }
.mobile-panel a.mobile-app {
  color: var(--app-color);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.mobile-panel a.mobile-app::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--app-color);
}
.mobile-panel a.mobile-app::after {
  content: "↗";
  font-size: 0.85em;
  opacity: 0.8;
}
.mobile-app--workforce { --app-color: var(--teal); }
.mobile-app--grants { --app-color: var(--dxp-orange); }
.mobile-panel .btn { margin-top: 1.5rem; align-self: flex-start; }
/* The generic .mobile-panel a rule paints links navy — on the navy
   btn-primary pill that made the label invisible. Restore the CTA. */
.mobile-panel a.btn { border-bottom: none; font-size: 0.95rem; padding: 0.85rem 1.5rem; }
.mobile-panel a.btn-primary,
.mobile-panel a.btn-primary:hover { color: #fff; }
.mobile-panel .close {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--bg-muted);
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  place-items: center;
}

@media (max-width: 1366px) {
  .nav-links { display: none; }
  .menu-toggle { display: flex; }
}
@media (max-width: 600px) {
  .nav-cta .btn-ghost { display: none; }
}

/* =============================================================
   REVEAL
   ============================================================= */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms ease, transform 700ms ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================
   FORMS
   ============================================================= */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: 0.4rem; }
.field label {
  font-size: 0.82rem;
  color: var(--ink);
  font-weight: 600;
}
.field input,
.field select,
.field textarea {
  background: white;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 180ms, box-shadow 180ms;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.15);
}
.field textarea { resize: vertical; min-height: 120px; }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }

/* Partners grid */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}
.partner {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.75rem 1rem;
  text-align: center;
  transition: border-color 200ms, box-shadow 200ms, transform 200ms;
}
.partner:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.partner .p-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
}
.partner .p-type {
  margin-top: 0.4rem;
  font-size: 0.74rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 2.25rem;
  display: grid;
  gap: 2rem;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--teal), var(--teal-tint));
}
.tl-item { position: relative; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--teal);
  box-shadow: 0 0 0 3px white, 0 0 0 5px var(--teal-tint);
}
.tl-item .tl-date {
  font-size: 0.82rem;
  color: var(--teal-deep);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
.tl-item h4 { margin-bottom: 0.5rem; }
.tl-item p { color: var(--ink-soft); margin: 0; }

/* ============================================================
   GIT-TREE STORY TIMELINE — two branches (iT1 + Nucleos) that
   run in parallel and merge into one trunk at the acquisition.
   All layout in classes (CSP-safe). Desktop = 3-col graph;
   mobile collapses to a single left-rail stream.
   ============================================================ */
.gittree { --gt-it1: var(--navy); --gt-nuc: var(--brand-teal-deep); --gt-merge: var(--brand-orange, #ef6c3a); }
.gittree__legend {
  display: flex; gap: 1.5rem; justify-content: center;
  margin-bottom: 2.25rem; flex-wrap: wrap;
}
.gt-legend {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-weight: 700; font-size: 0.9rem; letter-spacing: 0.02em;
}
.gt-legend .gt-swatch { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.gt-legend--it1 { color: var(--gt-it1); }
.gt-legend--it1 .gt-swatch { background: var(--gt-it1); }
.gt-legend--nuc { color: var(--gt-nuc); }
.gt-legend--nuc .gt-swatch { background: var(--gt-nuc); }

.gittree__rows { display: grid; gap: 0; max-width: 960px; margin: 0 auto; }

/* one milestone row: [iT1 card] [graph spine] [Nucleos card] */
.gt-row {
  display: grid;
  grid-template-columns: 1fr 96px 1fr;
  align-items: stretch;
  min-height: 92px;
}
.gt-spine { position: relative; }
/* the two vertical rails inside the spine */
.gt-spine::before, .gt-spine::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px;
}
.gt-spine::before { left: calc(50% - 22px); background: var(--gt-it1); opacity: 0.5; }
.gt-spine::after  { left: calc(50% + 19px); background: var(--gt-nuc); opacity: 0.5; }

/* the milestone node dot on its rail */
.gt-node {
  position: absolute; top: 30px; width: 20px; height: 20px; border-radius: 50%;
  background: white; z-index: 2; transform: translate(-50%, -50%);
}
.gt-row--it1 .gt-node { left: calc(50% - 21px); border: 4px solid var(--gt-it1); box-shadow: 0 0 0 4px white; }
.gt-row--nuc .gt-node { left: calc(50% + 20px); border: 4px solid var(--gt-nuc); box-shadow: 0 0 0 4px white; }

/* the card */
.gt-card {
  background: white; border: 1px solid var(--line); border-radius: var(--r-md, 14px);
  padding: 1.1rem 1.25rem; box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,46,80,.06));
  align-self: start;
}
.gt-card .gt-year {
  font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.gt-card h4 { margin: 0 0 0.35rem; font-size: 1.02rem; line-height: 1.25; }
.gt-card p { margin: 0; color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.gt-row--it1 .gt-card { margin-right: 1.5rem; }
.gt-row--it1 .gt-card .gt-year { color: var(--gt-it1); }
.gt-row--nuc .gt-card { margin-left: 1.5rem; grid-column: 3; }
.gt-row--nuc .gt-card .gt-year { color: var(--gt-nuc); }
/* keep the empty side truly empty */
.gt-row--it1 .gt-card { grid-column: 1; }

/* convergence: the row where both rails bend toward center */
.gt-row--converge .gt-spine::before { left: calc(50% - 22px); }
.gt-row--converge .gt-spine { }
.gt-converge-note {
  grid-column: 1 / -1; text-align: center; color: var(--ink-mute);
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.4rem 0 1.4rem;
}

/* MERGE row — the two rails join into one trunk + a single big node */
.gt-row--merge { grid-template-columns: 1fr; min-height: auto; margin-top: 0.5rem; }
.gt-merge-join {
  position: relative; height: 46px; width: 100%;
}
/* a centered "Y": two angled lines coming together into one */
.gt-merge-join::before, .gt-merge-join::after {
  content: ""; position: absolute; top: 0; height: 30px; width: 3px; border-radius: 3px;
}
.gt-merge-join::before { left: calc(50% - 21px); background: var(--gt-it1); transform: rotate(30deg); transform-origin: bottom; }
.gt-merge-join::after  { left: calc(50% + 21px); background: var(--gt-nuc); transform: rotate(-30deg); transform-origin: bottom; }
.gt-merge-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-2, #1c3f6b));
  color: white; border-radius: var(--r-lg, 18px); padding: 1.6rem 1.75rem;
  position: relative; box-shadow: var(--shadow-md, 0 10px 30px rgba(16,46,80,.18));
}
.gt-merge-card::before {
  content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--gt-merge); box-shadow: 0 0 0 5px rgba(239,108,58,0.22);
}
.gt-merge-card .gt-year { color: var(--brand-teal-soft, #2dd4e5); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.gt-merge-card h4 { color: white; margin: 0.3rem 0 0.4rem; font-size: 1.35rem; }
.gt-merge-card p { color: rgba(255,255,255,0.82); margin: 0; font-size: 0.96rem; line-height: 1.55; }

@media (max-width: 720px) {
  /* collapse to a single left-rail stream; all cards full width */
  .gt-row { grid-template-columns: 40px 1fr; min-height: auto; margin-bottom: 1.1rem; }
  .gt-spine { grid-column: 1; }
  .gt-spine::before { left: 12px; opacity: 0.6; }
  .gt-spine::after  { display: none; }
  .gt-row--nuc .gt-spine::before { background: var(--gt-nuc); }
  .gt-node { left: 12px !important; top: 26px; }
  .gt-row--it1 .gt-card, .gt-row--nuc .gt-card { grid-column: 2 !important; margin: 0 !important; }
  .gt-row--nuc .gt-card { border-left: 3px solid var(--gt-nuc); }
  .gt-row--it1 .gt-card { border-left: 3px solid var(--gt-it1); }
  .gt-merge-join::before { left: 12px; transform: none; }
  .gt-merge-join::after { display: none; }
  .gt-merge-card { text-align: left; }
  .gt-merge-card::before { left: 12px; transform: none; }
  .gt-row--converge { display: block; margin: 0.25rem 0 1.1rem; }
  .gt-converge-note { padding: 0.9rem 0 0.4rem 40px; text-align: left; grid-column: auto; }
}

/* Manifesto (restored Nucleos voice) */
.manifesto { max-width: 820px; margin: 1.75rem auto 0; text-align: left; }
.manifesto__hook {
  font-size: clamp(1.45rem, 3vw, 2.05rem); line-height: 1.28; font-weight: 700;
  letter-spacing: -0.02em; color: var(--navy); margin: 0 0 1.4rem;
}
.manifesto__hook .teal { color: var(--brand-teal-deep); }
.manifesto p {
  font-size: clamp(1.02rem, 1.8vw, 1.16rem); line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 1.15rem;
}
.manifesto .mf-ht { color: var(--brand-teal-deep); font-weight: 700; background: none; }
.manifesto__mission {
  margin: 1.9rem 0 0; padding: 1.4rem 1.6rem; border-left: 4px solid var(--brand-teal-deep);
  background: var(--brand-teal-tint); border-radius: 0 12px 12px 0;
}
.manifesto__mission .lbl {
  display: block; font-size: 0.76rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--brand-teal-deep); margin-bottom: 0.4rem;
}
.manifesto__mission .stmt {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.35; font-weight: 700;
  color: var(--navy); letter-spacing: -0.01em;
}

/* Card */
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.85rem;
  position: relative;
  overflow: hidden;
  transition: border-color 220ms, transform 220ms, box-shadow 220ms;
}
.card:hover {
  border-color: var(--line-strong);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.card h3 { margin-bottom: 0.65rem; color: var(--navy); }
.card p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; line-height: 1.6; }

/* =============================================================
   COMPAT LAYER — for interior pages built with prior class names
   ============================================================= */

:root {
  --brand-teal: var(--teal);
  --brand-teal-deep: var(--teal-deep);
  --brand-teal-soft: var(--teal-soft);
  --brand-teal-tint: var(--teal-tint);
}

/* Cards system */
.cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cards.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) {
  .cards.cards-3, .cards.cards-4 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
}
.card-icon.navy { background: rgba(16, 46, 80, 0.08); color: var(--navy); }
.card-icon.violet { background: #f3e8ff; color: var(--violet); }
.card-icon.gold { background: #fef3c7; color: var(--amber); }
.card-icon.emerald { background: #d1fae5; color: var(--emerald); }
.card-icon.rose { background: #fee2e2; color: var(--rose); }
.card-icon.indigo { background: #e0e7ff; color: #4f46e5; }
.card-icon.orange { background: #fef3eb; color: var(--dxp-orange); }
.card-icon.amber { background: #fef3c7; color: var(--amber); }

/* AchieveDXP inline mark (used in showcases) */
.dxp-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.95rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.5rem;
}
.dxp-logo .dxp-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--teal);
  display: grid;
  place-items: center;
  color: white;
}
.dxp-logo .dxp-mark svg { width: 16px; height: 16px; }
.dxp-logo .dxp-text {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.dxp-logo .dxp-text span {
  color: var(--teal);
  font-weight: 800;
  font-size: 0.78rem;
  margin-left: 0.35rem;
  letter-spacing: 0.04em;
}

/* Showcase */
.showcase {
  position: relative;
  background: linear-gradient(180deg, var(--bg-soft) 0%, white 100%);
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 5rem);
}
.showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, rgba(0, 153, 184, 0.07), transparent 55%),
              radial-gradient(ellipse at bottom left, rgba(239, 108, 58, 0.05), transparent 55%);
  pointer-events: none;
}
.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}
@media (max-width: 960px) { .showcase-grid { grid-template-columns: 1fr; } }

/* Trust badges */
.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  max-width: 1080px;
  margin: 0 auto;
}
.trust-badge {
  flex: 0 0 calc((100% - 3rem) / 4);
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-align: center;
  background: white;
  transition: border-color 200ms, box-shadow 200ms;
}
.trust-badge:hover { border-color: var(--teal); box-shadow: var(--shadow); }
.trust-badge .b-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--teal-tint);
  color: var(--teal-deep);
  display: grid;
  place-items: center;
  margin: 0 auto 0.85rem;
}
.trust-badge .b-name {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
  color: var(--navy);
}
.trust-badge .b-desc { font-size: 0.8rem; color: var(--ink-mute); }

/* Matrix table */
.matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: white;
}
.matrix th, .matrix td {
  padding: 1.1rem 1.25rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
.matrix th {
  background: var(--bg-soft);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.matrix tr:last-child td { border-bottom: 0; }
.matrix td:first-child { color: var(--navy); font-weight: 600; }
.matrix td.check { color: var(--emerald); font-weight: 700; }

/* Mockup (kept for any remaining references) */
.mockup {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.mockup-top {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.mockup-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mockup-dot.r { background: #fca5a5; }
.mockup-dot.y { background: #fcd34d; }
.mockup-dot.g { background: #86efac; }
.mockup-tab {
  margin-left: 0.85rem;
  font-size: 0.75rem;
  color: var(--ink-mute);
  padding: 0.25rem 0.75rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-weight: 500;
}
.mock-tile {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 0.75rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mock-tile .lbl {
  font-size: 0.62rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.mock-tile .val {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--navy);
}
.mock-tile.accent { background: var(--teal-tint); border-color: rgba(0, 153, 184, 0.25); }
.mock-tile.accent .val { color: var(--teal-deep); }

/* =============================================================
   iT1 OFFICIAL LOGO
   ============================================================= */
.brand-it1 {
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
}
.footer-brand .brand-it1 {
  height: 36px;
  width: 36px;
  filter: brightness(0) invert(1) brightness(0.95);
}

/* =============================================================
   DARK LAYERED PROCUREMENT PANEL
   ============================================================= */
.layered-section {
  background: linear-gradient(180deg, #f7f9fc 0%, #eef2f7 100%);
  padding-block: clamp(4rem, 8vw, 7rem);
}

.layered-panel {
  position: relative;
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--r-2xl);
  background: linear-gradient(140deg, #051427 0%, #07203d 35%, #0a2e44 70%, #0b3447 100%);
  border: 1px solid rgba(45, 212, 229, 0.18);
  box-shadow: 0 40px 80px -20px rgba(5, 20, 39, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  color: white;
}

.layered-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(45, 212, 229, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 229, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 30%, transparent 80%);
  opacity: 0.7;
  pointer-events: none;
}

.layered-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 10%, rgba(45, 212, 229, 0.12), transparent 55%),
              radial-gradient(ellipse at 10% 90%, rgba(239, 108, 58, 0.08), transparent 55%);
  pointer-events: none;
}

.layered-head {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 2rem;
  margin-bottom: 2.5rem;
  position: relative;
  align-items: start;
}
@media (max-width: 900px) {
  .layered-head { grid-template-columns: 1fr; gap: 1rem; }
}

.layered-eyebrow {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--teal-soft);
  text-transform: uppercase;
  font-weight: 600;
  padding-top: 0.4rem;
}

.layered-head h2 {
  color: white;
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}

.layered-stack {
  display: grid;
  gap: 0.75rem;
  position: relative;
}

.layer {
  position: relative;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--r-md);
  padding: 1.2rem 1.5rem 1.2rem 1.8rem;
  display: grid;
  grid-template-columns: 80px 1fr 1.4fr;
  gap: 1.5rem;
  align-items: center;
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease;
  overflow: hidden;
}

.layer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 4px;
  border-radius: 2px;
  background: var(--accent-color, var(--teal-soft));
}

.layer:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateX(4px);
}

.layer-num {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--accent-color, var(--teal-soft));
  font-weight: 700;
  line-height: 1.3;
}

.layer-name {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.15rem;
  color: white;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.layer-items {
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: right;
}

@media (max-width: 800px) {
  .layer {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
  }
  .layer-items { text-align: left; }
}

.layer-amber { --accent-color: #fbbf24; }
.layer-violet { --accent-color: #a78bfa; }
.layer-teal { --accent-color: #2dd4e5; }
.layer-cyan { --accent-color: #67e8f9; }
.layer-orange { --accent-color: #f9a26c; }

.layered-ribbon {
  margin-top: 2rem;
  padding: 1rem 1.5rem;
  border: 1px solid rgba(45, 212, 229, 0.3);
  background: rgba(45, 212, 229, 0.05);
  border-radius: var(--r-md);
  font-family: "JetBrains Mono", "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  color: var(--teal-soft);
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.layered-ribbon::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal-soft);
  box-shadow: 0 0 12px var(--teal-soft);
  flex-shrink: 0;
}

/* =============================================================
   PARALLAX & ENHANCED REVEALS
   ============================================================= */

/* Base reveal — used everywhere */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Directional reveals — data-reveal attribute */
[data-reveal] {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
[data-reveal="up"] { transform: translateY(40px); }
[data-reveal="down"] { transform: translateY(-30px); }
[data-reveal="left"] { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal="fade"] { transform: none; }

[data-reveal].visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger children — children get incremental delays */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
[data-stagger].visible > * {
  opacity: 1;
  transform: translateY(0);
}
[data-stagger].visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger].visible > *:nth-child(2) { transition-delay: 90ms; }
[data-stagger].visible > *:nth-child(3) { transition-delay: 180ms; }
[data-stagger].visible > *:nth-child(4) { transition-delay: 270ms; }
[data-stagger].visible > *:nth-child(5) { transition-delay: 360ms; }
[data-stagger].visible > *:nth-child(6) { transition-delay: 450ms; }
[data-stagger].visible > *:nth-child(7) { transition-delay: 540ms; }
[data-stagger].visible > *:nth-child(8) { transition-delay: 630ms; }

/* Parallax targets — JS applies translateY */
[data-parallax] {
  will-change: transform;
  transition: transform 50ms linear;
}

/* Subtle floating elements that get parallax */
.float-y {
  will-change: transform;
}

/* Section background shift */
.parallax-bg::before {
  will-change: transform;
}

/* Magnetic hover */
.magnetic {
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* =============================================================
   RICH PARTNER CARDS
   ============================================================= */
.partners-rich-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.partner-rich {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding: 1.5rem 1.6rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 250ms, box-shadow 250ms, transform 250ms;
  position: relative;
}

.partner-rich:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--ink);
}

.pr-head {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pr-name {
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.2;
}

.pr-cat {
  font-size: 0.7rem;
  color: var(--teal-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.pr-desc {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1;
}

.pr-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  margin-top: 0.25rem;
}

.partner-rich:hover .pr-link { color: var(--teal-deep); }
.partner-rich:hover .pr-link svg { transform: translateX(3px); }
.pr-link svg { transition: transform 250ms; }

/* =============================================================
   ACHIEVE DXP REAL LOGO (replaces the old pill placeholder)
   ============================================================= */
.dxp-real-logo {
  height: 56px;
  width: auto;
  margin: 0 auto 1.75rem;
  display: block;
}

@media (max-width: 600px) {
  .dxp-real-logo { height: 44px; }
}

/* =============================================================
   RICH PARTNER CARDS — with real logos
   ============================================================= */
.partner-rich {
  /* Re-define to accommodate logo */
  display: grid;
  grid-template-rows: 60px auto 1fr auto;
  gap: 0.85rem;
}

.pr-logo {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.pr-logo img {
  max-height: 50px;
  max-width: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.pr-fallback {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.015em;
}

.pr-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* =============================================================
   APP MARQUEE — for the 68+ additional integrations
   ============================================================= */
.app-marquee-wrap {
  overflow: hidden;
  position: relative;
  padding: 1rem 0;
  margin-inline: calc(var(--pad) * -1);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.app-marquee {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  padding-inline: var(--pad);
  max-width: 1200px;
  margin: 0 auto;
}

.app-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 70px;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 250ms, box-shadow 250ms, transform 250ms;
  flex-shrink: 0;
}

.app-tile:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.app-tile img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(20%);
  opacity: 0.9;
  transition: filter 250ms, opacity 250ms;
}

.app-tile:hover img {
  filter: grayscale(0);
  opacity: 1;
}

/* =============================================================
   STRATEGIC PARTNER CAROUSEL
   ============================================================= */
.carousel {
  position: relative;
  margin: 0 calc(var(--pad) * -1);
  padding: 0 var(--pad);
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 0.5rem 0 2rem;
  /* Hide scrollbar visually but keep accessibility */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }

.cs-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  display: grid;
  grid-template-rows: 70px auto 1fr auto;
  gap: 0.85rem;
  padding: 1.75rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: var(--ink);
  transition: border-color 250ms, box-shadow 250ms, transform 250ms;
}
.cs-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  color: var(--ink);
}

.cs-logo {
  height: 56px;
  display: flex;
  align-items: center;
}
.cs-logo img {
  max-height: 56px;
  max-width: 180px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cs-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.cs-cat {
  font-size: 0.7rem;
  color: var(--teal-deep);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.cs-name {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.2;
}
.cs-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0;
}
.cs-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--teal);
}
.cs-link svg { transition: transform 250ms; }
.cs-card:hover .cs-link { color: var(--teal-deep); }
.cs-card:hover .cs-link svg { transform: translateX(3px); }

/* Carousel arrows */
.carousel-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-bottom: 1rem;
  padding-right: 4px;
}
.cs-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--line);
  color: var(--navy);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color 220ms, background 220ms, transform 220ms, color 220ms;
}
.cs-arrow:hover {
  border-color: var(--teal);
  background: var(--teal);
  color: white;
  transform: translateY(-1px);
}
.cs-arrow:active { transform: translateY(0); }
.cs-arrow[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.cs-arrow[disabled]:hover {
  border-color: var(--line);
  background: white;
  color: var(--navy);
  transform: none;
}

/* Progress bar */
.carousel-progress {
  height: 3px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 0.5rem;
}
.cs-bar {
  height: 100%;
  width: 20%;
  background: var(--teal);
  border-radius: 999px;
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), width 300ms;
}

/* =============================================================
   APP MARQUEE — infinite scroll
   ============================================================= */
.marquee-wrap {
  margin-inline: calc(var(--pad) * -1);
  overflow: hidden;
  position: relative;
}

.marquee-head {
  text-align: center;
  margin-bottom: 2rem;
  padding: 0 var(--pad);
}

.marquee-row {
  display: flex;
  overflow: hidden;
  padding: 0.6rem 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.marquee-track {
  display: flex;
  gap: 0.85rem;
  flex-shrink: 0;
  /* Animation: translateX from 0 to -50% (because we duplicate content) */
  animation: marquee-scroll 60s linear infinite;
  will-change: transform;
}

.marquee-track-left {
  animation-name: marquee-left;
}

.marquee-track-right {
  animation-name: marquee-right;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Pause when hovering anywhere in marquee-wrap */
.marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

.mq-tile {
  flex: 0 0 auto;
  width: 130px;
  height: 70px;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 220ms, box-shadow 220ms, transform 220ms;
}

.mq-tile:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px) scale(1.04);
  z-index: 2;
  position: relative;
}

.mq-tile img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(35%);
  opacity: 0.85;
  transition: filter 220ms, opacity 220ms;
}

.mq-tile:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* =============================================================
   HIGH-TECH MICRO-INTERACTIONS
   ============================================================= */

/* Cursor-following spotlight on cards */
.feature, .sector, .trust-badge, .compliance-badge, .step {
  background-image: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 153, 184, 0.06),
    transparent 40%
  );
  background-color: white;
  background-blend-mode: normal;
}

/* === ICON ANIMATIONS === */
.f-icon, .card-icon, .sol-icon, .cb-icon, .b-icon, .s-icon {
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 450ms ease,
              background 400ms ease,
              color 350ms ease;
  position: relative;
}

.feature:hover .f-icon,
.card:hover .card-icon,
.compliance-badge:hover .cb-icon,
.trust-badge:hover .b-icon {
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 0 0 6px rgba(0, 153, 184, 0.08), 0 14px 28px -8px rgba(0, 153, 184, 0.4);
}

.sector:hover .s-icon {
  transform: scale(1.1) rotate(-8deg);
  box-shadow: 0 0 0 6px rgba(0, 153, 184, 0.12), 0 18px 36px -10px rgba(0, 153, 184, 0.55);
}

/* Inner SVG rotates opposite to icon container for fun effect */
.f-icon svg, .card-icon svg, .sol-icon svg, .cb-icon svg, .b-icon svg, .s-icon svg {
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.feature:hover .f-icon svg,
.card:hover .card-icon svg,
.sector:hover .s-icon svg,
.compliance-badge:hover .cb-icon svg,
.trust-badge:hover .b-icon svg {
  transform: rotate(8deg) scale(1.05);
}

/* Pulse ring expanding from icon on hover */
.f-icon::after, .card-icon::after, .sol-icon::after, .cb-icon::after, .b-icon::after, .s-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--teal);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.feature:hover .f-icon::after,
.card:hover .card-icon::after,
.sector:hover .s-icon::after,
.compliance-badge:hover .cb-icon::after,
.trust-badge:hover .b-icon::after {
  animation: icon-pulse-ring 900ms ease-out;
}
@keyframes icon-pulse-ring {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* === LIGHT SWEEP ACROSS CARDS === */
.feature::after, .card::after, .sector::after, .compliance-badge::after, .trust-badge::after, .step::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(120deg, transparent 35%, rgba(45, 212, 229, 0.1) 50%, transparent 65%);
  transform: translateX(-110%);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.feature:hover::after,
.card:hover::after,
.sector:hover::after,
.compliance-badge:hover::after,
.trust-badge:hover::after,
.step:hover::after {
  transform: translateX(110%);
}

/* Card content above the sweep */
.feature > *, .card > *, .sector > *, .compliance-badge > *, .trust-badge > *, .step > * {
  position: relative;
  z-index: 2;
}

/* === BUTTON SHIMMER === */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::before, .btn-teal::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 0;
}
.btn-primary:hover::before, .btn-teal:hover::before {
  transform: translateX(110%);
}
.btn-primary > *, .btn-teal > * { position: relative; z-index: 1; }

/* === STAT NUMBER GLOW === */
.stat .num, .hero-trust-item .num {
  transition: text-shadow 450ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stat:hover .num {
  text-shadow: 0 0 28px rgba(0, 153, 184, 0.5), 0 0 4px rgba(0, 153, 184, 0.3);
  transform: scale(1.08);
}
.hero-trust-item:hover .num {
  text-shadow: 0 0 20px rgba(0, 153, 184, 0.45);
  transform: scale(1.06);
}

/* === VALUE PROP NUMBER BOUNCE === */
.value .num {
  transition: transform 550ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 350ms ease,
              color 300ms,
              box-shadow 400ms;
}
.value:hover .num {
  transform: scale(1.18) rotate(-10deg);
  background: var(--teal);
  color: white;
  box-shadow: 0 12px 24px -8px rgba(0, 153, 184, 0.45), 0 0 0 6px rgba(0, 153, 184, 0.1);
}

/* === BRAND LOGO INTERACTIONS === */
.brand-it1 {
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 350ms ease;
}
.brand:hover .brand-it1 {
  transform: rotate(20deg) scale(1.08);
  filter: drop-shadow(0 0 10px rgba(26, 75, 165, 0.5));
}
.brand-logo {
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 350ms;
}
.brand:hover .brand-logo {
  transform: translateX(3px);
  filter: drop-shadow(0 4px 10px rgba(16, 46, 80, 0.15));
}

/* Mobile menu / footer keep simpler effects */
.footer-brand .brand:hover .brand-it1 {
  filter: brightness(0) invert(1) brightness(0.95) drop-shadow(0 0 10px rgba(255, 255, 255, 0.4));
}

/* === HERO PHOTO ZOOM === */
.hero-photo img {
  transition: transform 7s ease-out;
  transform: scale(1.02);
}
.hero-photo:hover img {
  transform: scale(1.08);
}
.hero-photo-badge {
  transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 450ms;
}
.hero-photo:hover .hero-photo-badge {
  transform: scale(1.08) rotate(-4deg);
  box-shadow: 0 30px 60px -16px rgba(16, 46, 80, 0.4);
}
.hero-photo-stat {
  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hero-photo:hover .hero-photo-stat {
  transform: translateY(-3px);
}

/* === SPLIT PHOTO ZOOM (DXP showcase) === */
.split-photo-img img {
  transition: transform 8s ease-out;
}
.split-photo-img:hover img {
  transform: scale(1.06);
}

/* === CAROUSEL CARD LOGO BOUNCE === */
.cs-card:hover .cs-logo img {
  animation: logo-bounce 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes logo-bounce {
  0% { transform: translateY(0) scale(1); }
  40% { transform: translateY(-6px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* === LAYERED PROCUREMENT === */
.layer {
  transition: background 400ms ease, border-color 400ms, transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}
.layer::before {
  transition: width 400ms ease, box-shadow 400ms ease, top 400ms, bottom 400ms;
}
.layer:hover::before {
  width: 6px;
  top: 0;
  bottom: 0;
  box-shadow: 0 0 24px var(--accent-color, var(--teal-soft));
}
.layer-num, .layer-name, .layer-items {
  transition: color 350ms ease;
}
.layer:hover .layer-name { color: white; }
.layer:hover .layer-items { color: rgba(255, 255, 255, 0.75); }

/* === STEP NUMBER ROTATE === */
.step .step-num {
  transition: transform 700ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 350ms, color 300ms,
              box-shadow 400ms;
}
.step:hover .step-num {
  transform: scale(1.18) rotate(360deg);
  background: var(--teal);
  color: white;
  box-shadow: 0 10px 22px -6px rgba(0, 153, 184, 0.5);
}

/* === "WHAT TO EXPECT" STEP LIST (contact/demo) ===
   Structural styling lives here in the external stylesheet, NOT inline on the
   page, so a strict style-src CSP can never strip it. Inline list-style/grid
   used to get dropped under CSP, which surfaced the <ol>'s default 1./2./3.
   markers on top of the badge digits (double numbering) and left the badges
   unstyled. Keeping it in a class makes that regression impossible. */
.expect-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.expect-list li { display: grid; grid-template-columns: 32px 1fr; gap: 0.75rem; }
.expect-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--teal);
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; color: #fff;
}
.expect-list .expect-body { font-size: 0.95rem; color: var(--ink-soft); }
.expect-list .expect-body strong { color: var(--navy); }
.expect-list .expect-sub { color: var(--ink-mute); font-size: 0.88rem; margin-top: 0.15rem; }

/* === ARROW LINK NUDGE === */
.card-link svg, .s-link svg, .cs-link svg, .pr-link svg {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:hover .card-link svg,
.sector:hover .s-link svg,
.cs-card:hover .cs-link svg {
  animation: arrow-nudge 1.4s ease-in-out infinite;
}
@keyframes arrow-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

/* === CAROUSEL ARROW FILL === */
.cs-arrow {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.cs-arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--teal);
  border-radius: 50%;
  transform: scale(0);
  transition: transform 450ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.cs-arrow:hover::before {
  transform: scale(1);
}

/* === GRID BACKGROUND PULSE ON HERO === */
.hero::after {
  animation: grid-pulse 9s ease-in-out infinite;
}
@keyframes grid-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 0.85; }
}

/* === ACHIEVE DXP REAL LOGO PULSE ON HEADER === */
.dxp-real-logo {
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 400ms;
}
.dxp-real-logo:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 8px 16px rgba(239, 108, 58, 0.25));
}

/* === MARQUEE TILE PING === */
.mq-tile {
  position: relative;
  isolation: isolate;
}
.mq-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--teal);
  opacity: 0;
  pointer-events: none;
}
.mq-tile:hover::after {
  animation: tile-ping 700ms ease-out;
}
@keyframes tile-ping {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* === SECTION EYEBROW DOT EXTRA PULSE === */
.eyebrow {
  transition: background 300ms, border-color 300ms, transform 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.section-head:hover .eyebrow {
  transform: translateY(-2px) scale(1.03);
}

/* === HUMAN TECH ROBOT EXTRA INTERACTIVITY === */
.humantech-robot img {
  transition: filter 500ms, transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.humantech-robot:hover img {
  filter: drop-shadow(0 30px 80px rgba(45, 212, 229, 0.65));
  transform: scale(1.05);
}

/* === RICH PARTNER CARD LOGO TILT === */
.partner-rich .pr-logo img {
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.partner-rich:hover .pr-logo img {
  transform: translateY(-3px) scale(1.04);
}

/* === RESPECT REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }
}

/* =============================================================
   REENTRY BRIDGE — "The story doesn't end at release"
   ============================================================= */
.reentry-panel {
  position: relative;
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, #fdf6f1 0%, #ffffff 45%, #ecfeff 100%);
  border: 1px solid var(--line);
  overflow: hidden;
}

.reentry-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 0% 0%, rgba(239, 108, 58, 0.10), transparent 55%),
              radial-gradient(ellipse at 100% 100%, rgba(0, 153, 184, 0.10), transparent 55%);
  pointer-events: none;
}

.reentry-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
}

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

/* Bridge visual */
.bridge-visual {
  position: relative;
  display: grid;
  gap: 1.25rem;
}

.bridge-line {
  position: absolute;
  left: 40px;
  top: 36px;
  bottom: 36px;
  width: 2px;
  background: linear-gradient(180deg, var(--dxp-orange) 0%, var(--amber) 35%, var(--teal) 70%, var(--teal-deep) 100%);
  border-radius: 2px;
  z-index: 0;
}

.bridge-stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 1.4rem 1.1rem 0;
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  z-index: 1;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 400ms, border-color 400ms;
}

.bridge-stage:hover {
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
  border-color: var(--teal);
}

.bridge-stage .bs-icon {
  width: 64px;
  height: 100%;
  min-height: 70px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg) 0 0 var(--r-lg);
  color: white;
  flex-shrink: 0;
  margin-left: 0;
}

.stage-1 .bs-icon { background: linear-gradient(135deg, var(--dxp-orange), var(--dxp-orange-soft)); }
.stage-2 .bs-icon { background: linear-gradient(135deg, var(--amber), var(--dxp-orange-soft)); }
.stage-3 .bs-icon { background: linear-gradient(135deg, var(--teal-soft), var(--teal)); }

.bridge-stage .bs-icon svg {
  transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.bridge-stage:hover .bs-icon svg {
  transform: rotate(-8deg) scale(1.1);
}

.bs-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bs-label {
  font-size: 0.7rem;
  color: var(--teal-deep);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.stage-1 .bs-label { color: var(--dxp-orange); }
.stage-2 .bs-label { color: var(--amber); }

.bs-text {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--navy);
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.bs-tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.bs-tags span {
  font-size: 0.65rem;
  padding: 0.25rem 0.55rem;
  background: var(--bg-soft);
  color: var(--ink-soft);
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--line);
  white-space: nowrap;
}

.stage-1 .bs-tags span { background: rgba(239, 108, 58, 0.08); color: var(--dxp-orange); border-color: rgba(239, 108, 58, 0.2); }
.stage-3 .bs-tags span { background: rgba(0, 153, 184, 0.08); color: var(--teal-deep); border-color: rgba(0, 153, 184, 0.2); }

@media (max-width: 600px) {
  .bridge-stage { grid-template-columns: 56px 1fr; }
  .bs-tags { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; padding: 0 1.4rem 0 80px; }
  .bridge-stage .bs-icon { width: 56px; min-height: 56px; }
  .bridge-line { left: 28px; }
}

/* =============================================================
   PRODUCT SHOT — high-fidelity AchieveDXP UI preview
   ============================================================= */
.product-shot {
  background: white;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}

/* Browser frame */
.ps-frame {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0 1rem;
  background: #f1f5f9;
  border-bottom: 1px solid var(--line);
}
.ps-frame-dots { display: flex; gap: 0.4rem; }
.ps-frame-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--line-strong);
}
.ps-frame-dots span:nth-child(1) { background: #f87171; }
.ps-frame-dots span:nth-child(2) { background: #fbbf24; }
.ps-frame-dots span:nth-child(3) { background: #10b981; }
.ps-frame-url {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-mute);
  background: white;
  padding: 0.3rem 0.9rem;
  border-radius: 6px;
  max-width: 380px;
  margin: 0 auto;
  border: 1px solid var(--line);
}

/* App shell */
.ps-app {
  display: grid;
  grid-template-columns: 215px 1fr;
  min-height: 480px;
}

/* Sidebar — matching the actual product's dark-teal nav */
.ps-side {
  background: linear-gradient(180deg, #0d7e7c 0%, #0a6c6a 100%);
  color: white;
  padding: 1.25rem 0.65rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.ps-side-logo {
  height: 32px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-left: 0.5rem;
  margin-bottom: 0.5rem;
}
.ps-nav { display: flex; flex-direction: column; gap: 0.1rem; }
.ps-nav-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.75rem;
  border-radius: 8px;
  font-size: 0.84rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  cursor: default;
  transition: background 200ms;
}
.ps-nav-item:hover { background: rgba(255, 255, 255, 0.08); }
.ps-nav-item.active {
  background: white;
  color: var(--teal-deep);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.ps-nav-item.open { background: rgba(255, 255, 255, 0.08); color: white; }
.ps-nav-item svg { flex-shrink: 0; }
.ps-nav-divider { height: 1px; background: rgba(255, 255, 255, 0.15); margin: 0.6rem 0.75rem; }

.ps-nav-parent { display: contents; }
.ps-nav-sub {
  padding: 0.45rem 0.75rem 0.45rem 2.6rem;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  margin-left: 0.5rem;
}
.ps-nav-sub.active {
  background: white;
  color: var(--teal-deep);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* Main content */
.ps-main {
  padding: 1.5rem 1.75rem;
  background: white;
  overflow: hidden;
}

.ps-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.ps-h {
  font-size: 1.4rem;
  color: var(--navy);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}
.ps-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--ink-mute);
  min-width: 180px;
}
.ps-chip {
  padding: 0.35rem 0.85rem;
  background: var(--teal-tint);
  color: var(--teal-deep);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  border: 1px solid rgba(0, 153, 184, 0.2);
}

/* Categories row */
.ps-cats {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-cats::-webkit-scrollbar { display: none; }
.ps-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--ink-mute);
  font-weight: 600;
  cursor: default;
  white-space: nowrap;
  padding-bottom: 0.6rem;
  position: relative;
}
.ps-cat .ps-cat-i {
  font-size: 1.15rem;
  filter: grayscale(0.6);
}
.ps-cat.active { color: var(--teal-deep); }
.ps-cat.active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
}

/* App cards grid */
.ps-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 800px) {
  .ps-apps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .ps-apps { grid-template-columns: 1fr; }
  .ps-app { grid-template-columns: 1fr; }
  .ps-side { display: none; }
}
.ps-app-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-xs);
  transition: border-color 220ms, box-shadow 220ms, transform 220ms;
  cursor: default;
}
.ps-app-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.ps-app-logo {
  height: 36px;
  width: auto;
  max-width: 130px;
  object-fit: contain;
  object-position: left;
}
.ps-app-name {
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.ps-app-desc {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Activity chart */
.ps-chart {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0.6rem;
  height: 280px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem;
  background: var(--bg-soft);
}
.ps-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 0.65rem;
  color: var(--ink-mute);
  font-weight: 600;
  text-align: right;
  padding-right: 0.3rem;
  padding-bottom: 24px;
}
.ps-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.85rem;
  align-items: end;
}
.ps-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.ps-bar {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.03);
}
.ps-bar .bs {
  width: 100%;
  display: block;
  transition: opacity 200ms;
}
.ps-bar:hover .bs { opacity: 0.9; }
.ps-bar-lbl {
  font-size: 0.65rem;
  color: var(--ink-mute);
  margin-top: 0.45rem;
  font-weight: 600;
  white-space: nowrap;
}

.ps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.ps-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 500;
}
.ps-legend i {
  width: 10px; height: 10px;
  border-radius: 2px;
  display: inline-block;
}

@media (max-width: 900px) {
  .ps-app { min-height: 380px; }
  .ps-main { padding: 1rem; }
  .ps-bars { grid-template-columns: repeat(8, 1fr); gap: 0.4rem; }
  .ps-bar-lbl { font-size: 0.55rem; }
  .ps-cats { gap: 1rem; }
}

/* =============================================================
   TEXT-ONLY MARQUEE TILES (apps without logos)
   ============================================================= */
.mq-tile.mq-text {
  background: linear-gradient(135deg, var(--bg-soft) 0%, white 100%);
  border: 1px solid var(--line);
  padding: 0.65rem 0.95rem;
  position: relative;
}

.mq-tile.mq-text span {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  letter-spacing: -0.005em;
  line-height: 1.2;
  max-width: 100%;
  white-space: normal;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.mq-tile.mq-text:hover {
  background: white;
  border-color: var(--teal);
}

.mq-tile.mq-text:hover span {
  color: var(--teal-deep);
}

/* =============================================================
   LIVE PRODUCT DEMO — animated mockup states
   ============================================================= */

/* "Recently opened" floating badge on active app card */
.ps-app-card {
  position: relative;
  transition: border-color 350ms, box-shadow 400ms, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ps-app-card.live-active {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 153, 184, 0.1), 0 12px 24px -8px rgba(0, 153, 184, 0.25);
  transform: translateY(-4px);
  z-index: 2;
}
.ps-app-card.live-active::after {
  content: "● Recently opened";
  position: absolute;
  top: -10px;
  right: 12px;
  font-size: 0.62rem;
  background: var(--teal);
  color: white;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  animation: badge-in 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 10px -2px rgba(0, 153, 184, 0.45);
}
@keyframes badge-in {
  from { opacity: 0; transform: translateY(6px) scale(0.85); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sidebar item hover ripple */
.ps-nav-item {
  position: relative;
  overflow: hidden;
}
.ps-nav-item::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.6s ease;
  pointer-events: none;
}
.ps-nav-item:hover::after { left: 100%; }

/* Search field that "types" — text rendered by JS */
.ps-search {
  transition: border-color 250ms, background 250ms, box-shadow 250ms;
}
.ps-search.live-typing {
  border-color: var(--teal);
  background: white;
  box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.12);
}
.ps-search-text {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: -0.005em;
}
.ps-search-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  background: var(--teal);
  margin-left: 1px;
  vertical-align: middle;
  animation: cursor-blink 1s steps(2, end) infinite;
}
@keyframes cursor-blink {
  to { opacity: 0; }
}

/* Category auto-cycle indicator */
.ps-cat {
  transition: color 350ms;
  cursor: pointer;
}
.ps-cat .ps-cat-i {
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1), filter 250ms;
}
.ps-cat:hover .ps-cat-i {
  transform: scale(1.18) rotate(-4deg);
  filter: grayscale(0);
}
.ps-cat.active .ps-cat-i {
  filter: grayscale(0);
}
.ps-cat.active::after {
  animation: cat-underline-in 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes cat-underline-in {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}

/* Chart bar growth */
.ps-chart .bs {
  transform-origin: bottom;
  transition: filter 250ms, opacity 250ms;
}
.ps-chart.live-animate .bs {
  animation: bar-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
@keyframes bar-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Chart bar hover — entire column glows */
.ps-bar-col {
  cursor: pointer;
  transition: filter 250ms;
}
.ps-bar-col:hover .bs {
  filter: brightness(1.15) saturate(1.2);
}
.ps-bar-col:hover .ps-bar-lbl {
  color: var(--navy);
  font-weight: 700;
}

/* Tooltip that follows hovered bar column */
.ps-bar-col {
  position: relative;
}
.ps-bar-col::before {
  content: attr(data-total);
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--navy);
  color: white;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms, transform 220ms;
  z-index: 4;
}
.ps-bar-col::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}
.ps-bar-col:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ps-bar-col:hover::after { opacity: 1; }

/* Floating notification toast inside mockup */
.ps-toast {
  position: absolute;
  bottom: 1.2rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem 0.85rem 0.85rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 38px -10px rgba(15, 23, 42, 0.2);
  z-index: 5;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms, transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  max-width: 280px;
}
.ps-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.ps-toast-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ps-toast-body { display: flex; flex-direction: column; gap: 0.1rem; line-height: 1.2; }
.ps-toast-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
}
.ps-toast-text {
  font-size: 0.74rem;
  color: var(--ink-soft);
}

/* Sidebar active item — small pulse */
.ps-nav-item.active {
  animation: side-active-glow 3s ease-in-out infinite;
}
@keyframes side-active-glow {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); }
  50% { box-shadow: 0 4px 14px rgba(0, 153, 184, 0.25); }
}

/* Make mockup feel interactive: lift slightly on container hover */
.product-shot {
  position: relative;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms;
}
.product-shot:hover {
  transform: translateY(-4px);
  box-shadow: 0 50px 95px -25px rgba(16, 46, 80, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .ps-app-card.live-active,
  .ps-chart.live-animate .bs,
  .ps-nav-item.active,
  .ps-toast { animation: none !important; transition: none !important; }
}

/* =============================================================
   INTERACTIVE MOCKUP — multi-view + clickable categories
   ============================================================= */

/* View panels */
.ps-view { display: none; }
.ps-view.active { display: block; animation: view-in 350ms cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes view-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sidebar nav cursor */
.ps-nav-item, .ps-cat, .ps-home-card, .ps-tr, .ps-app-card {
  cursor: pointer;
}

/* Apps grid — when filtered, cards animate out then in */
.ps-app-card { transition: opacity 250ms, transform 350ms; }
.ps-app-card.hidden {
  display: none;
}

/* Text-only app card fallback */
.ps-app-logo-wrap { height: 40px; display: flex; align-items: center; }
.ps-app-logo.ps-app-text {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.01em;
  height: auto !important;
  width: auto !important;
  max-width: none !important;
}

/* HOME VIEW grid */
.ps-home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media (max-width: 700px) { .ps-home-grid { grid-template-columns: 1fr; } }
.ps-home-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.5rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-size: 1rem;
  transition: border-color 250ms, box-shadow 250ms, transform 250ms;
}
.ps-home-card:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  color: var(--navy);
}
.ps-home-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

/* TABLE VIEW (records + toolset) */
.ps-table {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.ps-tr {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1.4fr 1fr 0.6fr;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 0.82rem;
  color: var(--ink-soft);
  transition: background 200ms;
}
.ps-tr:last-child { border-bottom: 0; }
.ps-tr:hover { background: var(--bg-soft); }
.ps-tr.ps-th {
  background: var(--bg-soft);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  cursor: default;
}
.ps-learner {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  color: var(--navy);
}
.ps-learner i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 800;
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ps-pbar {
  background: var(--bg-muted);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  width: 70%;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
}
.ps-pbar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-soft), var(--teal));
  border-radius: 3px;
}
.ps-link-c {
  font-weight: 700;
  color: var(--teal);
  font-size: 0.78rem;
}
.ps-table-log .ps-tr {
  grid-template-columns: 0.7fr 1fr 1.2fr 1.4fr 0.8fr;
}
.ps-mono { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-size: 0.78rem; color: var(--ink-mute); }
.ps-status { font-weight: 700; font-size: 0.75rem; padding: 0.2rem 0.55rem; border-radius: 999px; }
.ps-status.ok { background: #d1fae5; color: #065f46; }
.ps-status.review { background: #fef3c7; color: #92400e; }

/* MESSENGER VIEW */
.ps-chat {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 320px;
}
.ps-msg {
  display: flex;
  gap: 0.6rem;
  max-width: 78%;
}
.ps-msg.ps-msg-you {
  align-self: flex-end;
  flex-direction: row-reverse;
  text-align: right;
}
.ps-msg i {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--teal);
  color: white;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ps-msg.ps-msg-you i { background: var(--navy); }
.ps-bubble {
  background: white;
  border: 1px solid var(--line);
  padding: 0.6rem 0.85rem;
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--navy);
  display: inline-block;
}
.ps-msg.ps-msg-you .ps-bubble {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}
.ps-time {
  font-size: 0.65rem;
  color: var(--ink-mute);
  margin-top: 0.25rem;
  font-weight: 600;
}
.ps-chat-input {
  margin-top: 0.8rem;
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0.4rem 0.4rem 1rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  align-items: center;
}
.ps-chat-input input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink);
}
.ps-chat-input button {
  background: var(--teal);
  color: white;
  border: 0;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

/* Empty / placeholder views */
.ps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-soft);
  border: 1px dashed var(--line-strong);
  border-radius: 12px;
  color: var(--ink-mute);
  font-size: 0.9rem;
  line-height: 1.5;
  gap: 1rem;
  min-height: 280px;
}
.ps-empty em { color: var(--teal-deep); font-style: normal; font-weight: 600; }

/* =============================================================
   IFRAME OVERLAY — click an app card to load its site in-app
   ============================================================= */
.ps-iframe-overlay {
  position: absolute;
  inset: 0;
  background: white;
  z-index: 10;
  display: none;
  flex-direction: column;
  border-radius: 0;
}
.ps-iframe-overlay.open {
  display: flex;
  animation: iframe-in 350ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iframe-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* The library view needs to be a positioning context for the overlay */
.ps-view[data-view-panel="library"] { position: relative; }

.ps-iframe-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.ps-iframe-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem 0.45rem 0.6rem;
  background: white;
  border: 1px solid var(--line);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 200ms, color 200ms, background 200ms;
}
.ps-iframe-back:hover {
  border-color: var(--teal);
  color: var(--teal-deep);
}

.ps-iframe-app {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.ps-iframe-logo {
  max-height: 26px;
  max-width: 100px;
  width: auto;
  object-fit: contain;
}
.ps-iframe-name {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ps-iframe-external {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  background: var(--teal);
  color: white;
  font-weight: 700;
  font-size: 0.78rem;
  border-radius: 8px;
  text-decoration: none;
  transition: background 200ms, transform 220ms;
}
.ps-iframe-external:hover {
  background: var(--teal-deep);
  color: white;
  transform: translateY(-1px);
}

.ps-iframe-stage {
  flex: 1;
  position: relative;
  background: var(--bg-muted);
  overflow: hidden;
  min-height: 380px;
}
.ps-iframe-el {
  width: 100%;
  height: 100%;
  border: 0;
  background: white;
  position: absolute;
  inset: 0;
  display: none;
}
.ps-iframe-el.loaded { display: block; }

.ps-iframe-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: white;
  color: var(--ink-mute);
  font-size: 0.92rem;
}
.ps-iframe-loader.hide { display: none; }
.ps-iframe-loader p { margin: 0; }
.ps-iframe-loader p span { color: var(--navy); font-weight: 700; }

.ps-spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--bg-muted);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ps-iframe-blocked {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  text-align: center;
  background: linear-gradient(135deg, var(--bg-soft) 0%, white 100%);
  padding: 2rem;
}
.ps-iframe-blocked.show { display: flex; }
.ps-iframe-blocked-logo {
  max-height: 64px;
  max-width: 240px;
  width: auto;
  object-fit: contain;
}
.ps-iframe-blocked h4 {
  font-size: 1.35rem;
  color: var(--navy);
  margin: 0;
}
.ps-iframe-blocked p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.5;
  max-width: 380px;
}

/* App card hover/active state for clickability */
.ps-app-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.ps-app-card:hover { border-color: var(--teal); }
.ps-app-card:active { transform: translateY(0) scale(0.98); }

/* =============================================================
   NEW HERO VISUAL — layered photo + product card + floating notifs
   ============================================================= */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 580px;
  margin-left: auto;
  aspect-ratio: 4 / 5;
  min-height: 480px;
}

/* Real product screenshot hero (framed PNG carries its own chrome + shadow) */
.hero-visual.hv-shot {
  aspect-ratio: auto;
  min-height: 0;
  max-width: 680px;
}
.hv-shot-frame {
  display: block;
}
.hv-shot img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .hero-visual.hv-shot { max-width: 560px; margin: 1.5rem auto 0; }
}

/* Photo card — slightly tilted */
.hv-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  height: 80%;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 46, 80, 0.4),
              0 18px 36px -16px rgba(16, 46, 80, 0.25);
  transform: rotate(2deg);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hv-photo:hover { transform: rotate(0deg); }
.hv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  transition: transform 8s ease-out;
  transform: scale(1.04);
}
.hv-photo:hover img { transform: scale(1.1); }
.hv-photo-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 153, 184, 0.06) 0%, transparent 50%, rgba(16, 46, 80, 0.18) 100%);
  pointer-events: none;
}

/* Product card — floats in front, bottom-left */
.hv-card {
  position: absolute;
  left: 0;
  bottom: 4%;
  width: 68%;
  background: white;
  border-radius: 18px;
  padding: 1.2rem 1.3rem 1.1rem;
  box-shadow: 0 30px 60px -16px rgba(16, 46, 80, 0.35);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  z-index: 3;
  transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 500ms;
}
.hv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 40px 80px -16px rgba(16, 46, 80, 0.5);
}

.hv-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hv-card-logo {
  height: 22px;
  width: auto;
}
.hv-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.22rem 0.55rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--teal-tint);
  color: var(--teal-deep);
  border-radius: 999px;
  border: 1px solid rgba(0, 153, 184, 0.25);
}
.hv-card-pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 153, 184, 0.2);
  animation: pulse 2.4s ease-in-out infinite;
}
.hv-card-title {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}

.hv-card-apps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.hv-app {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--navy);
}
.hv-app img {
  height: 18px;
  width: auto;
  max-width: 38px;
  object-fit: contain;
  flex-shrink: 0;
}
.hv-app span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hv-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
}
.hv-count {
  font-size: 0.72rem;
  color: var(--ink-mute);
  font-weight: 600;
}
.hv-explore {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--teal);
  text-decoration: none;
}
.hv-explore:hover { color: var(--teal-deep); }
.hv-explore svg { transition: transform 250ms; }
.hv-explore:hover svg { transform: translateX(3px); }

/* Floating credential notification — top of photo */
.hv-notif {
  position: absolute;
  top: 6%;
  left: 8%;
  background: white;
  border-radius: 14px;
  padding: 0.65rem 0.9rem;
  box-shadow: 0 18px 38px -12px rgba(16, 46, 80, 0.4);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  z-index: 4;
  border: 1px solid var(--line);
  animation: notif-bob 4s ease-in-out infinite;
}
@keyframes notif-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.hv-notif-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
  flex-shrink: 0;
}
.hv-notif-body { line-height: 1.2; }
.hv-notif-title {
  font-weight: 800;
  color: var(--navy);
  font-size: 0.78rem;
  letter-spacing: -0.005em;
}
.hv-notif-sub {
  font-size: 0.66rem;
  color: var(--ink-mute);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Floating Azure badge — bottom-right */
.hv-azure {
  position: absolute;
  bottom: 24%;
  right: -4%;
  background: var(--navy);
  color: white;
  border-radius: 12px;
  padding: 0.75rem 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 18px 38px -12px rgba(16, 46, 80, 0.55);
  z-index: 4;
  animation: notif-bob 5s ease-in-out infinite;
  animation-delay: 1s;
}
.hv-azure svg {
  color: var(--teal-soft);
  flex-shrink: 0;
}
.hv-azure-body { line-height: 1.2; }
.hv-azure-title {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: white;
}
.hv-azure-sub {
  font-size: 0.64rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 600;
  margin-top: 0.15rem;
}

@media (max-width: 900px) {
  .hero-visual { max-width: 100%; aspect-ratio: 16 / 12; margin: 2rem auto 0; min-height: 380px; }
  .hv-photo { width: 75%; height: 75%; }
  .hv-card { width: 70%; }
  .hv-azure { right: -2%; }
}

@media (max-width: 600px) {
  .hero-visual { aspect-ratio: 4 / 4.2; min-height: 420px; }
  .hv-card-apps { grid-template-columns: 1fr 1fr; }
}

/* Suppress old hero-photo styles by hiding them (they're no longer used) */
.hero-photo, .hero-photo-badge, .hero-photo-stat, .hero-photo-caption, .hero-photo-overlay {
  display: none;
}

/* Meta pills below the preview-card button */
.ps-iframe-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.4rem;
}
.ps-iframe-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.65rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.ps-iframe-meta-pill svg { color: var(--teal); }

/* Hide the iframe and loader since we always show the preview card */
.ps-iframe-el, .ps-iframe-loader { display: none !important; }

/* =============================================================
   PRODUCT-ONLY HERO (no photo)
   ============================================================= */
.hv-product-only {
  display: grid;
  place-items: center;
  position: relative;
  min-height: 540px;
}

/* Hide the old photo + Azure badge when product-only mode active */
.hv-product-only .hv-photo,
.hv-product-only .hv-azure { display: none; }

.hv-card-large {
  position: relative !important;
  inset: auto !important;
  width: 88% !important;
  max-width: 460px;
  margin: 0 auto;
  padding: 1.5rem 1.6rem 1.35rem !important;
  z-index: 2;
}

.hv-card-large .hv-card-title {
  font-size: 1.05rem;
}

.hv-card-large .hv-card-logo {
  height: 26px;
}

/* 3x2 app grid in the large card */
.hv-card-apps-grid {
  grid-template-columns: repeat(2, 1fr) !important;
}

.hv-card-large .hv-app {
  padding: 0.55rem 0.7rem;
}

/* Floating credential notification — top-left, sticking out of the card */
.hv-product-only .hv-notif {
  position: absolute;
  top: 4%;
  left: 2%;
  z-index: 3;
}

/* Floating learner-record card — bottom-right, sticking out */
.hv-record {
  position: absolute;
  bottom: 4%;
  right: 0;
  background: white;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: 0 18px 38px -12px rgba(16, 46, 80, 0.35);
  border: 1px solid var(--line);
  min-width: 200px;
  z-index: 3;
  animation: notif-bob 5s ease-in-out infinite;
  animation-delay: 1.2s;
}

.hv-record-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.hv-record-label {
  font-size: 0.62rem;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}
.hv-record-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hv-record-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}

.hv-record-name {
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.hv-record-course {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.hv-record-bar {
  height: 5px;
  background: var(--bg-muted);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.6rem;
}
.hv-record-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--teal-soft), var(--teal));
  border-radius: 3px;
}
.hv-record-meta {
  display: flex;
  gap: 0.3rem;
  font-size: 0.68rem;
  color: var(--ink-mute);
  font-weight: 600;
  margin-top: 0.45rem;
}

/* Subtle background panel behind the product card to add depth */
.hv-product-only::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 4%;
  right: 4%;
  bottom: 6%;
  background: linear-gradient(135deg, var(--teal-tint) 0%, transparent 40%, #ddd6fe 100%);
  border-radius: 28px;
  opacity: 0.45;
  filter: blur(30px);
  z-index: 0;
}

@media (max-width: 900px) {
  .hv-product-only { min-height: 440px; max-width: 500px; margin: 2rem auto 0; }
  .hv-card-large { width: 86% !important; }
  .hv-record { right: -2%; min-width: 180px; }
}

/* =============================================================
   HOMEPAGE LOGO CAROUSEL — infinite scrolling rows of partner logos
   ============================================================= */
.logo-carousel {
  overflow: hidden;
  position: relative;
  padding-block: 2.5rem 1.5rem;
  background: white;
}

.lc-row {
  display: flex;
  overflow: hidden;
  padding: 0.6rem 0;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}

.lc-track {
  display: flex;
  gap: 0.85rem;
  flex-shrink: 0;
  animation: marquee-left 70s linear infinite;
  will-change: transform;
}
.lc-track-left {
  animation-name: marquee-left;
}
.lc-track-right {
  animation-name: marquee-right;
  animation-duration: 80s;
}

@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.logo-carousel:hover .lc-track {
  animation-play-state: paused;
}

.ls-tile {
  flex: 0 0 auto;
  width: 140px;
  height: 72px;
  padding: 0.95rem 1.1rem;
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 220ms, box-shadow 220ms, transform 220ms;
  text-decoration: none;
}

.ls-tile:hover {
  border-color: var(--teal);
  box-shadow: var(--shadow);
  transform: translateY(-2px) scale(1.04);
  z-index: 2;
  position: relative;
}

.ls-tile img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(35%);
  opacity: 0.9;
  transition: filter 250ms, opacity 250ms;
}

.ls-tile:hover img {
  filter: grayscale(0);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .lc-track { animation: none; }
}

/* =============================================================
   MOBILE RESPONSIVENESS PASS
   Critical: grid children need min-width: 0 to allow shrinking
   ============================================================= */

/* Universal grid-child min-width fix */
.hero-grid > *, .split > *, .dxp-showcase-grid > *,
.showcase-grid > *, .reentry-grid > *, .humantech-grid > *,
.layered-head > *, .footer-grid > *, .cards > *, .features > *,
.sectors > *, .values > * {
  min-width: 0;
}

/* MOBILE — 768px and below, plus phones held landscape (wide but short):
   without the height clause a landscape phone got full desktop type sizes
   on a 393px-tall screen. */
@media (max-width: 768px), (max-width: 1000px) and (max-height: 500px) {
  :root {
    --pad: 1.1rem;
  }

  /* Headings shrink */
  h1 { font-size: 2.4rem; }
  h2 { font-size: 1.85rem; }
  h3 { font-size: 1.15rem; }

  /* Tighter section padding */
  .section { padding-block: 3rem; }
  .section-tight { padding-block: 2rem; }

  /* === NAV === */
  .nav { height: 60px; gap: 0.5rem; }
  .brand-it1 { height: 30px; width: 30px; }
  .brand-logo { height: 26px; }
  /* Logo + tagline + demo CTA + toggle exceed a 393px viewport and push
     the menu toggle off-screen. Drop the tagline and slim the CTA so the
     hamburger always stays reachable. */
  .brand-tagline { display: none; }
  .nav-cta { gap: 0.4rem; }
  .nav-cta .btn-ghost { display: none; }
  .nav-cta .btn-primary { padding: 0.55rem 0.85rem; font-size: 0.8rem; }
  .nav-cta .btn-primary .arrow { display: none; }
  .menu-toggle { width: 40px; height: 40px; }

  /* === HERO === */
  .hero {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
  .hero-copy h1 { font-size: clamp(2rem, 9vw, 2.6rem); line-height: 1.05; }
  .hero-copy .lead { font-size: 0.98rem; }
  .hero-actions { gap: 0.5rem; }
  .hero-actions .btn { padding: 0.85rem 1.25rem; font-size: 0.9rem; }
  .hero-actions .btn-lg { padding: 0.9rem 1.35rem; font-size: 0.95rem; }
  .hero-trust {
    gap: 1rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
  }
  .hero-trust-item .num { font-size: 1.3rem; }
  .hero-trust-item .lbl { font-size: 0.7rem; }

  /* === PRODUCT-ONLY HERO === */
  .hero-visual {
    aspect-ratio: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    margin: 1.5rem 0 0 !important;
  }
  .hv-product-only {
    min-height: 0 !important;
    padding-block: 1rem;
  }
  .hv-product-only::before { display: none; }

  .hv-card-large {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1.1rem 1.15rem !important;
  }
  .hv-card-apps-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
  }
  .hv-card-large .hv-card-title { font-size: 0.95rem; }
  .hv-card-large .hv-card-logo { height: 22px; }
  .hv-app { padding: 0.45rem 0.55rem !important; }
  .hv-app img { height: 16px; max-width: 30px; }
  .hv-app span { font-size: 0.72rem; }

  /* Floating notif/record cards reposition on mobile — sit between hero and product card */
  .hv-product-only .hv-notif,
  .hv-product-only .hv-record {
    position: relative !important;
    inset: auto !important;
    margin-bottom: 0.65rem;
    animation: none !important;
    min-width: 0;
  }
  .hv-notif { padding: 0.6rem 0.85rem; }
  .hv-notif-title { font-size: 0.78rem; }
  .hv-notif-sub { font-size: 0.66rem; }
  .hv-record { min-width: 0 !important; padding: 0.7rem 0.85rem; }

  /* === LOGO CAROUSEL === */
  .logo-carousel { padding-block: 1.75rem 1rem; }
  .ls-tile { width: 110px; height: 60px; padding: 0.65rem 0.75rem; }
  .ls-tile img { max-height: 34px; }
  .lc-track { gap: 0.55rem; animation-duration: 50s; }

  /* === VALUE PROP === */
  .values { gap: 0.85rem; }
  .value { padding: 1.5rem 1.35rem; }
  .value .num { width: 36px; height: 36px; font-size: 0.85rem; }

  /* === DXP SHOWCASE === */
  .dxp-showcase {
    padding: 1.75rem 1.35rem;
    border-radius: 18px;
  }
  .dxp-showcase-grid { gap: 1.5rem; }
  .dxp-product-logo { height: 42px; margin-bottom: 1rem; }

  /* === DARK LAYERED PANEL === */
  .layered-panel {
    padding: 1.75rem 1.25rem;
    border-radius: 18px;
  }
  .layered-head h2 { font-size: 1.05rem; line-height: 1.4; }
  .layered-eyebrow { font-size: 0.68rem; }
  .layer {
    grid-template-columns: 1fr !important;
    gap: 0.4rem;
    padding: 1rem 1.15rem 1rem 1.4rem;
  }
  .layer-name { font-size: 1rem; }
  .layer-items { font-size: 0.72rem; text-align: left !important; }
  .layered-ribbon {
    font-size: 0.66rem;
    padding: 0.85rem 1rem;
    letter-spacing: 0.12em;
  }

  /* === CAPABILITIES === */
  .features { gap: 0.85rem; }
  .feature { padding: 1.75rem 1.4rem; }

  /* === STATS === */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding: 1.5rem 1rem; }
  .stat .num { font-size: 1.5rem; }
  .stat .lbl { font-size: 0.82rem; margin-top: 0.5rem; }

  /* === REENTRY BRIDGE === */
  .reentry-panel { padding: 1.75rem 1.25rem; border-radius: 18px; }
  .reentry-grid { gap: 1.5rem; }
  .bridge-stage {
    grid-template-columns: 48px 1fr;
    padding: 0.85rem 1rem 0.85rem 0;
    gap: 0.7rem;
  }
  .bridge-stage .bs-icon {
    width: 48px;
    min-height: 56px;
    border-radius: 10px 0 0 10px;
  }
  .bridge-stage .bs-icon svg { width: 22px; height: 22px; }
  .bs-text { font-size: 0.86rem; line-height: 1.3; }
  .bs-tags { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; padding: 0 0 0 60px; align-items: flex-start; }
  .bs-tags span { font-size: 0.6rem; padding: 0.18rem 0.45rem; }
  .bridge-line { left: 22px; }

  /* === HUMAN TECH === */
  .humantech {
    padding: 1.75rem 1.25rem;
    border-radius: 18px;
  }
  .humantech-grid { gap: 1.5rem; text-align: center; }
  .humantech-robot img { max-width: 180px; }
  .humantech-quote { font-size: 1.05rem; }
  .quote-marks { font-size: 2.5rem; }

  /* === SECTORS === */
  .sectors { gap: 0.85rem; }
  .sector { padding: 1.5rem 1.35rem; min-height: 0; }

  /* === COMPLIANCE === */
  .compliance-grid { gap: 0.6rem; }
  .compliance-badge { flex-basis: calc((100% - 0.6rem) / 2); padding: 1.1rem 0.85rem; }
  .compliance-badge .cb-name { font-size: 0.88rem; }
  .compliance-badge .cb-desc { font-size: 0.7rem; }

  /* === TRUST === */
  .trust-grid { gap: 0.6rem; }
  .trust-badge { flex-basis: calc((100% - 0.6rem) / 2); padding: 1.1rem 0.85rem; }
  .trust-badge .b-name { font-size: 0.88rem; }
  .trust-badge .b-desc { font-size: 0.7rem; }

  /* === QUOTE === */
  .quote { padding: 1.75rem 1.25rem; border-radius: 18px; }
  .quote blockquote { font-size: 1.05rem; line-height: 1.5; }

  /* === CTA BANNER === */
  .cta-banner { padding: 1.75rem 1.25rem; border-radius: 18px; }
  .cta-actions { flex-direction: column; gap: 0.5rem; width: 100%; }
  .cta-actions .btn { width: 100%; justify-content: center; }

  /* === FOOTER === */
  .footer { padding-block: 2.5rem 1.25rem; }
  .footer-grid { gap: 1.75rem; margin-bottom: 1.75rem; }
  .footer-bottom { font-size: 0.78rem; }
  .footer-bottom .legal { gap: 1rem; }

  /* === PLATFORM PAGE MOCKUP === */
  .ps-frame { display: none; }  /* Hide browser chrome on mobile */
  .ps-app { grid-template-columns: 1fr; }
  .ps-side { display: none; }
  .ps-main { padding: 1rem; }
  .ps-h { font-size: 1.05rem; }
  .ps-search { display: none; }
  .ps-cats { gap: 0.85rem; padding-bottom: 0.85rem; margin-bottom: 1rem; }
  .ps-cat { font-size: 0.7rem; }
  .ps-cat .ps-cat-i { font-size: 0.95rem; }
  .ps-apps {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem;
  }
  .ps-app-card { padding: 0.8rem 0.7rem; }
  .ps-app-name { font-size: 0.82rem; }
  .ps-app-desc { font-size: 0.7rem; line-height: 1.35; }
  .ps-app-logo { height: 28px; max-width: 90px; }

  /* iframe overlay on mobile */
  .ps-iframe-bar { padding: 0.5rem 0.6rem; gap: 0.4rem; }
  .ps-iframe-back { padding: 0.4rem 0.6rem 0.4rem 0.5rem; font-size: 0.75rem; }
  .ps-iframe-external { padding: 0.4rem 0.65rem; font-size: 0.72rem; }
  .ps-iframe-name { font-size: 0.85rem; }
  .ps-iframe-logo { max-height: 22px; max-width: 80px; }
  .ps-iframe-blocked { padding: 1.5rem 1.25rem; gap: 0.85rem; }
  .ps-iframe-blocked h4 { font-size: 1.15rem; }
  .ps-iframe-blocked-logo { max-height: 50px; }
  .ps-iframe-blocked p { font-size: 0.85rem; }

  /* Records table on mobile becomes cards */
  .ps-tr {
    grid-template-columns: 1fr !important;
    gap: 0.35rem;
    padding: 0.85rem 0.85rem;
    font-size: 0.78rem;
  }
  .ps-tr.ps-th { display: none; }

  /* Chart on platform page mobile */
  .ps-bars { gap: 0.3rem; }
  .ps-bar-lbl { font-size: 0.52rem; }
  .ps-y { font-size: 0.6rem; }
  .ps-bar-col::before, .ps-bar-col::after { display: none; }

  /* Messenger view */
  .ps-msg { max-width: 90%; }
  .ps-bubble { font-size: 0.82rem; padding: 0.55rem 0.75rem; }

  /* Form */
  .field-row { grid-template-columns: 1fr !important; }

  /* Page head */
  .page-head { padding-top: 2rem; padding-bottom: 2rem; }

  /* Stop horizontal overflow globally */
  html, body { overflow-x: hidden; max-width: 100vw; }
}

/* PHONE — 480px and below */
@media (max-width: 480px) {
  h1 { font-size: 2rem; }
  .hero-trust { gap: 0.75rem; }
  .hero-trust-item { flex: 1 1 100px; }
  .hero-trust-item .num { font-size: 1.15rem; }
  .stats { grid-template-columns: 1fr; }
  .compliance-badge { flex-basis: 100%; }
  .trust-badge { flex-basis: 100%; }
  .ps-apps { grid-template-columns: 1fr !important; }
  .nav-cta { gap: 0.25rem; }
  .nav-cta .btn-sm { padding: 0.5rem 0.75rem; font-size: 0.78rem; }
  .brand-it1 { height: 26px; width: 26px; }
  .brand-logo { height: 22px; }
}

/* PHONES — per Noah (2026-07-24): drop the header Request-demo pill on
   phone widths entirely so nothing competes with the hamburger; the
   mobile menu + hero carry the demo CTA. */
@media (max-width: 480px) {
  .nav-cta .btn-primary { display: none; }
}

/* ============================================================
   COOKIE CONSENT BANNER
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 120%);
  width: min(720px, calc(100% - 2rem));
  z-index: 9999;
  background: #fff;
  border: 1px solid rgba(16, 46, 80, 0.12);
  border-radius: 16px;
  box-shadow:
    0 24px 60px rgba(7, 23, 43, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  font-family: 'Inter', system-ui, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1), opacity 350ms ease;
}
.cookie-banner--visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  padding: 1.1rem 1.35rem;
}
.cookie-banner-body { min-width: 0; }
.cookie-banner-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: #102e50;
  margin-bottom: 0.2rem;
  letter-spacing: -0.005em;
}
.cookie-banner-text {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #475569;
  margin: 0 0 0.4rem;
}
.cookie-banner-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #007891;
  text-decoration: underline;
}
.cookie-banner-link:hover { color: #005b6e; }
.cookie-banner-actions {
  display: flex;
  gap: 0.55rem;
  flex-shrink: 0;
  align-items: center;
}
.cookie-btn {
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.65rem 1.1rem;
  border-radius: 10px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, transform 180ms;
  white-space: nowrap;
}
.cookie-btn:focus-visible {
  outline: 2px solid #0099b8;
  outline-offset: 2px;
}
.cookie-btn-reject {
  background: #fff;
  color: #102e50;
  border-color: rgba(16, 46, 80, 0.2);
}
.cookie-btn-reject:hover {
  background: #f6f8fb;
  border-color: rgba(16, 46, 80, 0.4);
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #2dd4e5 0%, #0099b8 100%);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 153, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.cookie-btn-accept:hover {
  background: linear-gradient(135deg, #5fe3f0 0%, #00b3d4 100%);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .cookie-banner { bottom: 0.75rem; }
  .cookie-banner-inner {
    grid-template-columns: 1fr;
    gap: 0.85rem;
    padding: 1rem 1.1rem;
  }
  .cookie-banner-actions {
    width: 100%;
    flex-direction: row;
  }
  .cookie-btn { flex: 1; padding: 0.7rem 0.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner { transition: opacity 200ms ease; transform: translate(-50%, 0); }
}

/* ============================================================
   ACQUISITION ANNOUNCEMENT BAR (top ribbon)
   ============================================================ */
.announce-bar {
  position: relative;
  z-index: 101;
  background: var(--grad-navy);
  color: #fff;
}
.announce-bar__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 0.6rem 3rem 0.6rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
}
.announce-bar__pill {
  flex: none;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.22rem 0.6rem;
  border-radius: 999px;
  background: var(--teal);
  color: #fff;
}
.announce-bar a.announce-bar__link {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 1px;
}
.announce-bar a.announce-bar__link:hover { border-bottom-color: #fff; }
.announce-bar__msg { opacity: 0.95; }
.announce-bar__close {
  position: absolute;
  right: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  padding: 0.3rem;
  line-height: 0;
  border-radius: 6px;
}
.announce-bar__close:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.announce-bar[hidden] { display: none; }
@media (max-width: 640px) {
  .announce-bar__inner { font-size: 0.82rem; flex-wrap: wrap; gap: 0.5rem; padding-right: 2.5rem; }
}

/* ============================================================
   NEWS / PRESS  (index + article)
   ============================================================ */
.news-featured {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0;
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #fff;
}
.news-featured__body { padding: clamp(1.75rem, 4vw, 3rem); }
.news-featured__aside {
  background: var(--grad-navy);
  color: #fff;
  padding: clamp(1.75rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.news-featured__aside h3 { color: #fff; font-size: 1.25rem; }
.news-featured__aside p { color: rgba(255,255,255,0.82); font-size: 0.95rem; }
@media (max-width: 820px) { .news-featured { grid-template-columns: 1fr; } }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.news-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}
.news-card { overflow: hidden; }
.news-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); }
.news-card__thumb {
  margin: -1.5rem -1.5rem 0.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-soft);
}
.news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
.news-card:hover .news-card__thumb img { transform: scale(1.04); }
.news-card__thumb--ext {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal-deep) 100%);
}
.news-card__thumb--ext span {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.news-card__tag { color: var(--teal-deep); }
.news-card__tag--press { color: var(--dxp-orange); }
.news-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.news-card__ext { font-size: 0.8rem; color: var(--ink-mute); margin-top: auto; }
.news-source { font-weight: 600; color: var(--ink-soft); }

.news-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
.news-tab {
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.news-tab--active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* article body */
.article-body { max-width: 720px; margin: 0 auto; }
.article-body p { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.35rem; }
.article-body h2 { margin: 2.5rem 0 1rem; }
.article-body h3 { margin: 2rem 0 0.85rem; font-size: 1.2rem; }
.article-body h4 { margin: 1.75rem 0 0.75rem; font-size: 1.05rem; }
.article-body ul, .article-body ol { margin: 0 0 1.35rem; padding-left: 1.3rem; color: var(--ink-soft); }
.article-body li { font-size: 1.05rem; line-height: 1.7; margin: 0 0 0.5rem; }
.article-body a { color: var(--teal-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body img { max-width: 100%; height: auto; border-radius: 14px; margin: 1.5rem 0; display: block; }
.article-body figure { margin: 1.5rem 0; }
.article-body figcaption { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.5rem; text-align: center; }
.article-body blockquote { margin: 1.75rem 0; padding: 0.5rem 0 0.5rem 1.25rem; border-left: 3px solid var(--teal); color: var(--ink-2); font-size: 1.1rem; font-style: italic; }
.article-body strong { color: var(--ink-2); }
.article-hero { width: 100%; max-width: 720px; height: auto; border-radius: 16px; margin: 0 auto 2rem; display: block; }
.article-body .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.75rem 0; border-radius: 14px; overflow: hidden; background: #000; }
.article-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.article-lede { font-size: 1.2rem !important; color: var(--ink-2) !important; font-weight: 500; }
.press-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r-lg);
  background: var(--bg-tint);
  border: 1px solid var(--teal-tint);
  margin: 2rem 0;
}
.press-callout__pending {
  font-size: 0.82rem;
  color: var(--ink-mute);
  font-style: italic;
}

/* ==========================================================================
   Acquisition announcement article (news-it1-nucleos-acquisition).
   All styling lives here as classes (not inline) so it survives a strict CSP.
   ========================================================================== */
.acq-hero {
  position: relative;
  background: var(--grad-navy);
  color: #fff;
  padding: clamp(2.5rem, 5vw, 4.25rem) 0 clamp(2.75rem, 5vw, 4.25rem);
  overflow: hidden;
}
.acq-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 65% at 88% -10%, rgba(45, 212, 229, 0.20), transparent 62%);
  pointer-events: none;
}
.acq-hero .container { position: relative; z-index: 1; }
.acq-hero__back {
  display: flex; align-items: center; gap: 0.4rem;
  width: fit-content;
  font-size: 0.85rem; font-weight: 600; color: rgba(255, 255, 255, 0.72);
  text-decoration: none; margin: 0 0 1.5rem;
}
.acq-hero__back:hover { color: #fff; }
.acq-hero .eyebrow {
  display: inline-flex;
  background: rgba(45, 212, 229, 0.12);
  border-color: rgba(45, 212, 229, 0.35);
  color: var(--teal-soft);
}
.acq-hero .eyebrow + h1 { margin-top: 1.1rem; }
.acq-hero .eyebrow .dot { background: var(--teal-soft); }
.acq-hero h1 { color: #fff; margin: 1.1rem 0 0; max-width: 18ch; }
.acq-hero__lead {
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.06rem, 1.35vw, 1.26rem);
  line-height: 1.6; max-width: 60ch; margin: 1.25rem 0 0;
}
.acq-hero__lockup {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 16px;
  padding: 1.15rem 1.9rem; margin-top: 2.25rem;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55);
}
.acq-hero__lockup img { height: 46px; width: auto; display: block; }
@media (max-width: 560px) { .acq-hero__lockup img { height: 34px; } }

/* full-bleed-in-container banner photo under the hero */
.acq-banner {
  margin: 0 auto; max-width: 1040px;
}
.acq-banner figure { margin: 0; }
.acq-banner img {
  width: 100%; height: auto; display: block;
  border-radius: 18px;
  box-shadow: var(--shadow-lg, 0 30px 60px -24px rgba(16, 46, 80, 0.28));
}
.acq-banner figcaption {
  font-size: 0.85rem; color: var(--ink-mute);
  margin-top: 0.75rem; text-align: center;
}

/* stat tiles WITH icons */
.acq-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1rem; margin: 1.75rem 0 2.25rem;
}
@media (max-width: 720px) { .acq-stats { grid-template-columns: repeat(2, 1fr); } }
.acq-stat {
  background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 1.4rem 1.1rem; text-align: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.acq-stat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(16, 46, 80, 0.35); }
.acq-stat__icon {
  width: 46px; height: 46px; margin: 0 auto 0.85rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; background: var(--teal-tint); color: var(--teal-deep);
}
.acq-stat__icon svg { width: 24px; height: 24px; }
.acq-stat__num { font-size: 1.85rem; font-weight: 800; color: var(--navy); line-height: 1; }
.acq-stat__lbl { margin: 0.45rem 0 0; font-size: 0.86rem; color: var(--ink-soft); line-height: 1.35; }

/* founder pull-quotes */
.acq-quote {
  position: relative;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 14px;
  padding: 1.5rem 1.75rem; margin: 1.5rem 0;
}
.acq-quote p {
  font-size: 1.12rem !important; line-height: 1.6; font-style: italic;
  color: var(--ink-2) !important; margin: 0 0 0.85rem !important;
}
.acq-quote cite {
  font-style: normal; font-size: 0.9rem; font-weight: 700; color: var(--navy);
}
.acq-quote cite span { display: block; font-weight: 500; color: var(--ink-mute); font-size: 0.85rem; margin-top: 0.15rem; }

/* inline article figure (photo + caption) */
.acq-figure { margin: 2rem 0; }
.acq-figure img { width: 100%; height: auto; display: block; border-radius: 14px; }
.acq-figure figcaption { font-size: 0.85rem; color: var(--ink-mute); margin-top: 0.6rem; text-align: center; }

/* ==========================================================================
   Workforce Navigator page (moved out of inline <style> so it renders under
   strict CSP surfaces too — e.g. the echo.nucleos.com preview)
   ========================================================================== */
.wfn-hero{ padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.wfn-hero-grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items:center; }
@media (max-width: 900px){ .wfn-hero-grid{ grid-template-columns:1fr; } }
.wfn-hero h1{ margin-bottom:1.1rem; }
.wfn-hero .lead{ margin-bottom:1.6rem; }
.mt-eyebrow{ margin-top:1.25rem; }
.wfn-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--teal-tint); color: var(--teal-deep);
  font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.4rem .85rem; border-radius:999px; margin-bottom:1.1rem;
}
.wfn-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--teal); display:inline-block; }

/* reusable card-icon color modifiers */
.card-icon--teal{ background:var(--teal-tint); color:var(--teal-deep); }
.card-icon--emerald{ background:#ecfdf5; color:#047857; }
.card-icon--orange{ background:#fff1ec; color:var(--dxp-orange); }

/* device preview */
.wfn-device{
  background:#fff; border:1px solid var(--line); border-radius:20px;
  box-shadow: var(--shadow-lg, 0 30px 60px -20px rgba(16,46,80,.28));
  overflow:hidden; position:relative;
}
.wfn-device__bar{
  display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem;
  background: var(--bg-soft); border-bottom:1px solid var(--line);
}
.wfn-device__dot{ width:10px; height:10px; border-radius:50%; background:#d7dde6; }
.wfn-device__url{
  margin-left:.5rem; flex:1; background:#fff; border:1px solid var(--line); border-radius:999px;
  font-size:.72rem; color:var(--ink-mute); padding:.28rem .8rem; text-align:center;
}
.wfn-preview-tag{
  position:absolute; top:14px; right:14px; z-index:3;
  background: var(--navy); color:#fff; font-size:.66rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; padding:.3rem .7rem; border-radius:999px;
  box-shadow: 0 6px 16px -6px rgba(16,46,80,.5);
}
.wfn-device__body{ padding: 1.15rem 1.15rem 1.4rem; }
.wfn-app-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; }
.wfn-app-head img{ height:26px; width:auto; }
.wfn-app-head span{ font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); }
.wfn-jobcard{
  border:1px solid var(--line); border-radius:14px; padding:1rem 1.1rem; margin-bottom:.8rem;
  background:#fff; transition: box-shadow .2s, transform .2s;
}
.wfn-jobcard:hover{ box-shadow: var(--shadow-md, 0 12px 28px -14px rgba(16,46,80,.25)); transform: translateY(-2px); }
.wfn-jobcard__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.wfn-jobcard__title{ font-weight:700; color:var(--navy); font-size:1.02rem; }
.wfn-jobcard__meta{ font-size:.82rem; color:var(--ink-mute); margin-top:.15rem; }
.wfn-score{
  flex-shrink:0; text-align:center; background:var(--teal-tint); border-radius:12px;
  padding:.4rem .6rem; min-width:64px;
}
.wfn-score b{ display:block; font-size:1.35rem; font-weight:800; color:var(--teal-deep); line-height:1; }
.wfn-score small{ font-size:.6rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--teal-deep); }
.wfn-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem; }
.wfn-tag{
  font-size:.72rem; font-weight:600; color:var(--ink-soft);
  background:var(--bg-soft); border:1px solid var(--line); border-radius:999px; padding:.25rem .65rem;
  display:inline-flex; align-items:center; gap:.3rem;
}
.wfn-tag--match{ background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
.wfn-why{
  margin-top:.9rem; font-size:.78rem; color:var(--ink-soft);
  background: var(--bg-tint); border-radius:10px; padding:.6rem .75rem;
  border:1px dashed #a5e6ef;
}
.wfn-why b{ color:var(--teal-deep); }

/* value chips under hero */
.wfn-mini-trust{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:1.75rem; }
.wfn-mini-trust div{ font-size:.86rem; color:var(--ink-soft); display:flex; align-items:center; gap:.5rem; }
.wfn-mini-trust svg{ color:var(--teal); flex-shrink:0; }

/* funnel steps */
.wfn-steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1.25rem; }
@media (max-width: 900px){ .wfn-steps{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .wfn-steps{ grid-template-columns: 1fr; } }
.wfn-step{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem; position:relative; }
.wfn-step__num{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--grad-teal, linear-gradient(135deg,#2dd4e5,#0099b8)); color:#fff; font-weight:800; font-size:1.05rem;
  margin-bottom:1rem;
}
.wfn-step h3{ font-size:1.08rem; margin-bottom:.4rem; }
.wfn-step p{ font-size:.9rem; color:var(--ink-soft); line-height:1.5; }

.wfn-audience{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
@media (max-width: 780px){ .wfn-audience{ grid-template-columns:1fr; } }
.wfn-aud-card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:2rem; }
.wfn-aud-card h3{ font-size:1.25rem; margin-bottom:.6rem; }
.wfn-aud-card p{ color:var(--ink-soft); line-height:1.6; }


/* ===== homepage: migrated from inline <style> blocks (CSP-safe) ===== */
  .patchwork-stage{
    display:grid;
    grid-template-columns:1fr 1.05fr;
    gap:2rem;
    align-items:stretch;
    margin-top:3rem;
  }
  @media (max-width: 960px){
    .patchwork-stage{grid-template-columns:1fr;gap:1.5rem;}
  }

  /* LEFT — broken stack */
  .patchwork-broken{
    position:relative;
    padding:1.75rem 1.5rem 1.5rem;
    background:#fff;
    border:1px dashed rgba(16,46,80,.2);
    border-radius:20px;
    display:flex;flex-direction:column;
    gap:1.25rem;
  }
  .pw-stack-label{
    font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--ink-mute);
  }
  .pw-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:.85rem;
    flex:1;
  }
  @media (max-width: 540px){ .pw-grid{grid-template-columns:1fr;} }
  .pw-card{
    background:rgba(11,31,58,.04);
    border:1px solid rgba(16,46,80,.12);
    border-radius:14px;
    padding:1rem 1.1rem;
    display:flex;flex-direction:column;gap:.5rem;
    transition: background 200ms, border-color 200ms;
  }
  .pw-card:hover{
    background:rgba(11,31,58,.06);
    border-color:rgba(16,46,80,.2);
  }
  .pw-card-cat{
    font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-mute);
  }
  .pw-card-vendors{
    font-weight:700;color:var(--navy);font-size:.92rem;line-height:1.35;
    letter-spacing:-.005em;
  }
  .pw-card-missing{
    font-size:.78rem;color:var(--ink-soft);line-height:1.45;
    padding-top:.45rem;border-top:1px solid rgba(16,46,80,.08);
  }
  .pw-missing-label{
    display:block;
    font-size:.62rem;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:#c8344f;
    margin-bottom:.25rem;
  }
  .pw-stack-foot{
    font-size:.82rem;color:var(--ink-soft);font-style:italic;
    text-align:center;padding-top:.5rem;
    border-top:1px dashed rgba(16,46,80,.12);
  }

  /* RIGHT — unified replacement */
  .patchwork-one{
    position:relative;
    padding:2rem 2rem 1.75rem;
    border-radius:20px;
    background:
      radial-gradient(80% 60% at 100% 0%, rgba(255,182,76,.18), transparent 55%),
      radial-gradient(70% 60% at 0% 100%, rgba(0,151,145,.22), transparent 55%),
      linear-gradient(180deg, #0a1f37 0%, #102e50 70%, #07172b 100%);
    color:#fff;
    box-shadow:
      0 30px 70px rgba(7,23,43,.4),
      0 0 0 1px rgba(255,255,255,.05),
      inset 0 1px 0 rgba(255,255,255,.06);
    overflow:hidden;
  }
  .patchwork-one::before{
    content:"";position:absolute;inset:0;
    background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(120% 80% at 50% 50%, #000 40%, transparent 80%);
    pointer-events:none;
  }
  .po-eyebrow{
    position:relative;z-index:1;
    font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:#FFB64C;
  }
  .po-brand{
    position:relative;z-index:1;margin-top:.75rem;
    display:flex;align-items:center;gap:.7rem;
  }
  .po-brand-mark-svg{
    height:38px;width:auto;display:block;flex:none;
    filter:drop-shadow(0 0 14px rgba(255,182,76,.4));
  }
  .po-brand-word{
    font-family:'Nunito','Nunito Sans',Inter,system-ui,sans-serif;
    font-weight:600;font-size:1.7rem;letter-spacing:-.01em;
    color:#fff;line-height:1;
  }
  .po-brand-word b{font-weight:800;color:#FFB64C;}
  .po-tagline{
    position:relative;z-index:1;
    margin-top:1rem;
    color:rgba(255,255,255,.85);
    font-size:1.02rem;line-height:1.55;
    max-width:42ch;
  }
  .po-list{
    position:relative;z-index:1;
    list-style:none;padding:0;margin:1.5rem 0 1.75rem;
    display:flex;flex-direction:column;gap:.7rem;
  }
  .po-list li{
    display:grid;grid-template-columns:22px 1fr;gap:.85rem;align-items:start;
    color:rgba(255,255,255,.95);font-size:.93rem;line-height:1.5;
  }
  .po-list strong{color:#fff;font-weight:700;}
  .po-check{
    width:22px;height:22px;border-radius:50%;
    background:linear-gradient(135deg, #2dd4e5, #009791);
    position:relative;
    box-shadow:0 0 14px rgba(0,151,145,.55), 0 2px 6px rgba(0,0,0,.3);
    flex:none;
  }
  .po-check::after{
    content:"";position:absolute;
    left:7px;top:5px;
    width:5px;height:10px;
    border:solid #fff;border-width:0 2.5px 2.5px 0;
    transform:rotate(45deg);
  }
  .po-cta-row{
    position:relative;z-index:1;
    display:flex;gap:.75rem;flex-wrap:wrap;
    padding-top:1.25rem;
    border-top:1px solid rgba(255,255,255,.1);
  }
  /* Button overrides — the default light-bg styles disappear on this dark panel */
  .patchwork-one .btn-primary{
    background:linear-gradient(135deg, #2dd4e5 0%, #0099b8 100%);
    color:#fff;
    border:none;
    box-shadow:0 6px 20px rgba(0,153,184,.45), inset 0 1px 0 rgba(255,255,255,.2);
  }
  .patchwork-one .btn-primary:hover{
    background:linear-gradient(135deg, #5fe3f0 0%, #00b3d4 100%);
    box-shadow:0 8px 26px rgba(0,153,184,.6), inset 0 1px 0 rgba(255,255,255,.25);
    transform:translateY(-1px);
  }
  .patchwork-one .btn-ghost{
    background:rgba(255,255,255,.08);
    color:#fff;
    border:1.5px solid rgba(255,255,255,.35);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .patchwork-one .btn-ghost:hover{
    background:rgba(255,255,255,.16);
    border-color:rgba(255,255,255,.6);
    color:#fff;
  }
  .flow-stage{
    position:relative;
    margin-top:3rem;
    aspect-ratio: 1200 / 600;
    width:100%;
    border-radius:28px;
    overflow:hidden;
    background:
      radial-gradient(120% 80% at 8% 50%, rgba(0,153,184,.22), transparent 55%),
      radial-gradient(120% 80% at 92% 50%, rgba(255,182,76,.16), transparent 55%),
      linear-gradient(180deg, #0a1f37 0%, #102e50 55%, #07172b 100%);
    box-shadow:
      0 30px 80px rgba(7,23,43,.45),
      inset 0 1px 0 rgba(255,255,255,.06);
    isolation:isolate;
  }
  /* Subtle dot grid */
  .flow-stage::before{
    content:"";position:absolute;inset:0;
    background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(120% 80% at 50% 50%, #000 40%, transparent 80%);
    pointer-events:none;z-index:0;
  }
  .flow-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
  .flow-bg-glow{
    position:absolute;top:50%;width:340px;height:340px;border-radius:50%;
    filter:blur(80px);transform:translateY(-50%);opacity:.55;
    animation: flow-pulse-glow 6s ease-in-out infinite;
  }
  .flow-bg-glow-l{left:-60px;background:radial-gradient(circle, #0099b8, transparent 65%);}
  .flow-bg-glow-r{right:-60px;background:radial-gradient(circle, #009791, transparent 50%, #FFB64C, transparent 80%);animation-delay:3s;}
  @keyframes flow-pulse-glow{
    0%,100%{opacity:.4;transform:translateY(-50%) scale(1);}
    50%    {opacity:.7;transform:translateY(-50%) scale(1.1);}
  }

  /* World layer — holds the constellation overview */
  .flow-world{
    position:absolute;inset:0;z-index:1;
  }

  /* ============================================================
     CINEMATIC DATA TUNNEL — POV camera flying through the network
     ============================================================ */
  /* Cinematic light sweep across the stage */
  .flow-sweep{
    position:absolute;inset:-20% -40%;pointer-events:none;
    background:linear-gradient(115deg,
      transparent 38%,
      rgba(45,212,229,.10) 47%,
      rgba(255,255,255,.06) 50%,
      rgba(255,182,76,.10) 53%,
      transparent 62%);
    filter:blur(8px);
    animation:flow-sweep-x 22s linear infinite;
    mix-blend-mode:screen;
  }
  @keyframes flow-sweep-x{
    0%   { transform: translateX(-30%); }
    100% { transform: translateX(30%); }
  }

  /* Vignette for cinematic depth */
  .flow-vignette{
    position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%);
  }

  /* App chip — real partner logo on a white tile (favicon-style) */
  .fapp-icon{
    width:22px;height:22px;flex:none;
    border-radius:5px;
    background:#fff;
    padding:2px;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 0 0 1px rgba(255,255,255,.15), 0 2px 6px rgba(0,0,0,.35);
  }
  .fapp-icon img{
    width:100%;height:100%;
    object-fit:contain;
    display:block;
  }

  .flow-svg{
    position:absolute;inset:0;width:100%;height:100%;
    pointer-events:none;z-index:1;
  }
  .flow-paths use{
    fill:none;stroke:rgba(45,212,229,.18);stroke-width:1.2;
  }
  .flow-paths use.in{stroke:rgba(255,182,76,.18);}

  /* Hub rings — three concentric rings expanding outward */
  .hub-group .hub-ring,
  .rec-group .rec-ring{
    fill:none;stroke:rgba(45,212,229,.6);stroke-width:1.5;
    transform-origin:center;transform-box:fill-box;
  }
  .rec-group .rec-ring{stroke:rgba(255,182,76,.7);fill:none;stroke-width:1.5;}
  .rec-group .rec-ring-2{stroke:rgba(0,151,145,.55);}
  .hub-group .r1{animation:hub-ring 2.8s ease-out infinite;}
  .hub-group .r2{animation:hub-ring 2.8s ease-out infinite;animation-delay:.93s;}
  .hub-group .r3{animation:hub-ring 2.8s ease-out infinite;animation-delay:1.86s;}
  .rec-group .rec-ring{animation:hub-ring 3.2s ease-out infinite;}
  .rec-group .rec-ring-2{animation:hub-ring 3.2s ease-out infinite;animation-delay:1.6s;}
  @keyframes hub-ring{
    0%  {transform:scale(.6);opacity:.9;}
    100%{transform:scale(2.4);opacity:0;}
  }

  /* App chips constellation */
  .flow-apps{position:absolute;inset:0;z-index:2;pointer-events:none;}
  .fapp{
    position:absolute;left:var(--x);top:var(--y);
    transform:translate(-50%,-50%);
    display:flex;align-items:center;gap:.55rem;
    padding:.55rem .9rem;border-radius:999px;
    font-size:.85rem;font-weight:600;color:#fff;letter-spacing:.005em;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(14px) saturate(140%);
    -webkit-backdrop-filter:blur(14px) saturate(140%);
    box-shadow:
      0 6px 20px rgba(0,0,0,.35),
      inset 0 1px 0 rgba(255,255,255,.1);
    white-space:nowrap;
    opacity:0;
    animation:
      flow-app-reveal 1s ease both,
      flow-app-float 6s ease-in-out infinite;
    animation-delay: var(--d, 0s), calc(1s + var(--d, 0s));
  }
  /* One-shot fade-in, staggered per-chip via --d, then gentle perpetual float */
  @keyframes flow-app-reveal{
    from { opacity: 0; transform: translate(-50%, calc(-50% + 14px)); filter: blur(6px); }
    to   { opacity: 1; transform: translate(-50%, -50%);              filter: blur(0); }
  }
  @keyframes flow-app-float{
    0%, 100% { transform: translate(-50%, -50%); }
    50%      { transform: translate(-50%, calc(-50% - 5px)); }
  }
  .fapp i{
    width:8px;height:8px;border-radius:50%;
    box-shadow:0 0 10px currentColor, 0 0 0 2px rgba(255,255,255,.08);
  }
  .fapp-more{
    background:linear-gradient(135deg, rgba(45,212,229,.18), rgba(255,182,76,.18));
    border-color:rgba(255,255,255,.28);
    font-weight:700;
  }

  /* Endpoint labels */
  .flow-endpoint{
    position:absolute;z-index:3;color:#fff;
    background:rgba(7,23,43,.55);
    border:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-radius:14px;padding:.85rem 1rem;
    max-width:230px;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
  }
  .flow-endpoint-l{left:1.5rem;bottom:1.5rem;}
  .flow-endpoint-r{right:1.5rem;top:1.5rem;}
  .fe-eyebrow{
    font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    color:#2dd4e5;margin-bottom:.25rem;
  }
  .flow-endpoint-r{
    border-color:rgba(0,151,145,.45);
    background:linear-gradient(180deg, rgba(0,151,145,.18), rgba(7,23,43,.6) 60%);
    box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 24px rgba(255,182,76,.15);
  }
  .flow-endpoint-r .fe-eyebrow{color:#FFB64C;}
  .fe-title{font-weight:700;font-size:1rem;color:#fff;}
  .fe-meta{font-size:.78rem;color:rgba(255,255,255,.7);margin-top:.25rem;line-height:1.45;}
  .fe-stats{display:flex;gap:.85rem;margin-top:.6rem;font-size:.72rem;color:rgba(255,255,255,.8);}
  .fe-stats b{color:#fff;font-weight:700;}

  /* AchieveDXP brand block inside the right endpoint */
  .fe-brand{
    display:flex;align-items:center;gap:.55rem;
    margin:.15rem 0 .4rem;
  }
  .fe-brand-mark{
    height:24px;width:auto;flex:none;
    filter:drop-shadow(0 0 8px rgba(255,182,76,.55));
  }
  .fe-brand-word{
    font-weight:600;font-size:1.05rem;letter-spacing:.005em;color:#fff;
    font-family:'Nunito','Nunito Sans',Inter,system-ui,sans-serif;
  }
  .fe-brand-word b{font-weight:800;color:#FFB64C;}

  /* ============================================================
     LEARNER RECORD CARD — glimpse of the AchieveDXP product
     ============================================================ */
  /* Follow-up section: the learner record sits BELOW the animation stage */
  .flow-followup{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:2rem;
    margin-top:2.5rem;
    flex-wrap:wrap;
  }
  .flow-followup-label{
    flex:1 1 280px;
    max-width:340px;
    display:flex;flex-direction:column;gap:.5rem;
    padding-top:.75rem;
  }
  .flow-followup-eyebrow{
    font-size:.72rem;font-weight:800;letter-spacing:.12em;
    text-transform:uppercase;color:var(--teal-deep, #007891);
  }
  .flow-followup-sub{
    font-size:.95rem;color:var(--ink-soft, #475569);
    line-height:1.5;
  }
  .learner-record{
    width:340px;
    padding:16px 18px 14px;
    background:#fff;
    border-radius:16px;
    box-shadow:
      0 24px 60px rgba(0,0,0,.18),
      0 0 0 1px rgba(0,151,145,.18),
      0 12px 36px rgba(0,151,145,.18);
    font-family:'Nunito','Nunito Sans',Inter,system-ui,sans-serif;
    color:#102e50;
    font-size:12.5px;
    line-height:1.35;
    opacity:0;
    animation: lr-reveal 1.2s ease both;
    animation-delay:.4s;
  }
  @keyframes lr-reveal{
    from { opacity: 0; transform: translateY(20px); filter: blur(8px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
  }
  @media (max-width: 720px){
    .flow-followup{flex-direction:column;align-items:center;gap:1.5rem;}
    .flow-followup-label{text-align:center;max-width:none;padding-top:0;}
    .learner-record{width:100%;max-width:340px;}
  }

  .lr-head{
    display:flex;align-items:center;gap:10px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(0,151,145,.18);
  }
  .lr-avatar{
    width:38px;height:38px;border-radius:50%;
    background:linear-gradient(135deg, #009791, #003a45);
    color:#fff;font-weight:800;
    display:grid;place-items:center;
    font-size:13px;letter-spacing:.02em;
    box-shadow:0 4px 10px rgba(0,151,145,.4);
  }
  .lr-head-text{flex:1;min-width:0;}
  .lr-name{font-weight:800;font-size:14px;color:#102e50;letter-spacing:.005em;}
  .lr-meta{font-size:10.5px;color:#6b7c91;font-weight:600;margin-top:1px;}
  .lr-badge{
    background:rgba(0,151,145,.13);
    color:#009791;
    font-size:9.5px;font-weight:800;
    padding:4px 8px;border-radius:999px;
    letter-spacing:.05em;text-transform:uppercase;
    white-space:nowrap;
  }

  .lr-section{
    display:flex;justify-content:space-between;align-items:baseline;
    text-transform:uppercase;
    font-size:9.5px;font-weight:800;
    color:#8092a8;letter-spacing:.1em;
    margin:11px 0 6px;
  }
  .lr-section-count{
    text-transform:none;
    letter-spacing:0;
    font-size:10px;
    color:#009791;
    font-weight:800;
  }

  /* Pathway progress section */
  .lr-pathway{
    display:flex;justify-content:space-between;align-items:center;
    font-size:13px;font-weight:700;color:#102e50;
  }
  .lr-pathway-pct{color:#009791;font-weight:800;font-size:14px;}
  .lr-pathway-bar{
    height:6px;background:rgba(0,151,145,.15);
    border-radius:999px;overflow:hidden;
    margin-top:5px;
  }
  .lr-pathway-fill{
    width:68%;height:100%;
    background:linear-gradient(90deg, #009791, #5fd9d4);
    border-radius:999px;
    box-shadow:0 0 6px rgba(0,151,145,.4);
    animation:lr-pathway-grow 1.4s ease-out both;
    animation-delay:3.4s;
    transform-origin:left center;
  }
  @keyframes lr-pathway-grow{
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Recent activity section */
  .lr-activity{
    display:grid;grid-template-columns:8px 1fr auto;gap:9px;
    align-items:center;
    padding:4px 0;
    font-size:11.5px;
  }
  .lr-act-dot{
    width:7px;height:7px;border-radius:50%;
    background:#FFB64C;
    box-shadow:0 0 6px rgba(255,182,76,.55);
  }
  .lr-act-text{font-weight:600;color:#102e50;}
  .lr-act-time{
    font-size:10px;color:#009791;font-weight:800;
    background:rgba(0,151,145,.1);
    padding:2px 6px;border-radius:6px;
    letter-spacing:.02em;
  }

  .lr-row{
    display:grid;grid-template-columns:18px 1fr auto;
    align-items:center;gap:8px;
    padding:4px 0;
    font-size:12px;
  }
  .lr-check{
    width:16px;height:16px;border-radius:50%;
    background:#009791;
    position:relative;
    box-shadow:0 2px 5px rgba(0,151,145,.35);
  }
  .lr-check::after{
    content:"";position:absolute;
    left:5px;top:3px;
    width:4px;height:8px;
    border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg);
  }
  .lr-row-title{font-weight:700;color:#102e50;overflow:hidden;text-overflow:ellipsis;}
  .lr-row-src{
    font-size:10.5px;color:#8092a8;font-weight:700;
    padding:2px 7px;border-radius:6px;
    background:rgba(0,151,145,.06);
    white-space:nowrap;
  }

  .lr-progress{
    display:flex;align-items:center;gap:10px;
    margin-top:2px;
  }
  .lr-progress-bar{
    flex:1;height:6px;
    background:rgba(0,151,145,.15);
    border-radius:999px;
    overflow:hidden;
  }
  .lr-progress-fill{
    width:76%;height:100%;
    background:linear-gradient(90deg, #009791, #FFB64C);
    border-radius:999px;
    box-shadow:0 0 8px rgba(255,182,76,.5);
    animation:lr-progress-grow 1.6s ease-out both;
    animation-delay:3.8s;
    transform-origin:left center;
  }
  .lr-progress-text{font-weight:800;font-size:12px;color:#009791;}
  @keyframes lr-progress-grow{
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  .lr-footer{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:11px;padding-top:9px;
    border-top:1px solid rgba(0,151,145,.18);
  }
  .lr-status{
    display:flex;align-items:center;gap:6px;
    font-size:10.5px;font-weight:800;color:#009791;
    letter-spacing:.03em;
  }
  .lr-status-dot{
    width:7px;height:7px;border-radius:50%;
    background:#FFB64C;
    box-shadow:0 0 10px #FFB64C;
    animation:lr-status-pulse 1.6s ease-in-out infinite;
  }
  @keyframes lr-status-pulse{
    0%,100% { opacity:.7; transform:scale(.9); }
    50%     { opacity:1; transform:scale(1.15); }
  }
  .lr-stamp{font-size:10px;color:#8092a8;font-weight:600;}

  /* Mobile */
  @media (max-width: 760px){
    .flow-stage{aspect-ratio: 4 / 5;}
    .fapp{font-size:.72rem;padding:.4rem .65rem;}
    .flow-endpoint{max-width:160px;padding:.65rem .75rem;}
    .flow-endpoint-l{left:.75rem;bottom:.75rem;}
    .flow-endpoint-r{right:.75rem;top:.75rem;}
    .fe-stats{display:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .fapp, .learner-record, .lr-progress-fill, .lr-pathway-fill,
    .lr-status-dot, .flow-bg-glow, .flow-sweep, .hub-group circle,
    .rec-group circle { animation: none !important; }
    .fapp, .learner-record { opacity: 1 !important; transform: translate(-50%,-50%); filter: none !important; }
    .learner-record { transform: none !important; }
    .lr-progress-fill, .lr-pathway-fill { transform: none !important; }
    .flow-svg animateMotion { display: none; }
  }
  /* ============================================================
     TRUST WALL — agency tiles
     ============================================================ */
  .trust-wall{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
    max-width:1080px;margin:0 auto;
  }
  @media (max-width: 900px){ .trust-wall{grid-template-columns:repeat(2,1fr);} }
  @media (max-width: 560px){ .trust-wall{grid-template-columns:1fr;} }
  .tw-tile{
    background:#fff;
    border:1px solid var(--line);
    border-left:4px solid var(--teal);
    border-radius:14px;
    padding:1.25rem 1.4rem;
    display:flex;flex-direction:column;gap:.3rem;
    transition: border-color 200ms, transform 200ms, box-shadow 200ms;
  }
  .tw-tile:hover{
    border-left-color: var(--dxp-orange, #FFB64C);
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(16,46,80,.08);
  }
  .tw-tile-cat{
    font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
    color:var(--teal-deep);
  }
  .tw-tile-name{
    font-weight:800;font-size:1rem;color:var(--navy);
    letter-spacing:-.005em;line-height:1.3;
  }
  .tw-tile-meta{
    font-size:.82rem;color:var(--ink-soft);line-height:1.4;
  }
  .tw-disclaimer{
    text-align:center;margin-top:2rem;
    font-size:.82rem;color:var(--ink-mute);font-weight:600;
  }

  /* ============================================================
     TESTIMONIALS
     ============================================================ */
  .testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.25rem;
    max-width:1120px;margin:0 auto;
    align-items:stretch;
  }
  @media (max-width: 900px){ .testimonial-grid{grid-template-columns:1fr;max-width:640px;} }
  .testimonial{
    position:relative;
    display:flex;flex-direction:column;
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:1.75rem 1.85rem 1.5rem;
    margin:0;
    overflow:hidden;
    transition: transform 200ms, box-shadow 200ms;
  }
  .testimonial blockquote{ flex:1 1 auto; }
  .testimonial:hover{ transform: translateY(-3px); box-shadow: 0 18px 44px rgba(16,46,80,.1); }
  .t-logo{
    position:relative;z-index:1;
    display:flex;align-items:center;
    height:42px;margin-bottom:1.25rem;
  }
  .t-logo img{
    max-height:42px;max-width:170px;
    width:auto;height:auto;
    object-fit:contain;object-position:left center;
    display:block;
  }
  .t-quote-mark{
    position:absolute;top:-.5rem;right:1rem;
    font-family:Georgia, serif;
    font-size:7rem;line-height:1;
    color:var(--teal-tint);
    font-weight:700;
    pointer-events:none;user-select:none;
  }
  .testimonial blockquote{
    position:relative;z-index:1;
    margin:0;font-size:1.05rem;line-height:1.55;
    color:var(--navy);font-weight:500;
    letter-spacing:-.005em;
  }
  .testimonial figcaption{
    position:relative;z-index:1;
    margin-top:1.25rem;padding-top:1rem;
    border-top:1px solid var(--line);
    display:flex;align-items:center;gap:.85rem;
  }
  .testimonial .t-avatar{
    width:52px;height:52px;border-radius:50%;
    object-fit:cover;flex:0 0 52px;
    border:2px solid var(--teal-tint);
    background:var(--bg-soft);
  }
  .testimonial .t-meta{
    display:flex;flex-direction:column;gap:.15rem;min-width:0;
  }
  .testimonial figcaption strong{
    font-weight:800;color:var(--navy);font-size:.92rem;
  }
  .testimonial .t-meta span{
    font-size:.82rem;color:var(--ink-mute);font-weight:600;line-height:1.3;
  }
  .t-disclaimer{
    text-align:center;margin-top:2rem;
    font-size:.78rem;color:var(--ink-mute);font-style:italic;
  }

  /* ============================================================
     SCROLL-REVEAL ENHANCEMENT — bigger fade-in moments
     ============================================================ */
  [data-reveal="up"]{ opacity:0; transform: translateY(28px); transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1); }
  [data-reveal="up"].visible{ opacity:1; transform: translateY(0); }
  [data-reveal="scale"]{ opacity:0; transform: scale(.96); transition: opacity 800ms cubic-bezier(.16,1,.3,1), transform 800ms cubic-bezier(.16,1,.3,1); }
  [data-reveal="scale"].visible{ opacity:1; transform: scale(1); }
  [data-reveal="left"]{ opacity:0; transform: translateX(-28px); transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1); }
  [data-reveal="left"].visible{ opacity:1; transform: translateX(0); }
  [data-reveal="right"]{ opacity:0; transform: translateX(28px); transition: opacity 750ms cubic-bezier(.16,1,.3,1), transform 750ms cubic-bezier(.16,1,.3,1); }
  [data-reveal="right"].visible{ opacity:1; transform: translateX(0); }
  @media (prefers-reduced-motion: reduce){
    [data-reveal]{ opacity:1 !important; transform:none !important; }
  }

/* ===== homepage: migrated inline style= attributes ===== */
.u-01{padding-top:2.5rem;padding-bottom:0}
.u-02{margin-top:1.25rem}
.u-03{max-width:640px}
.u-04{justify-content:center}
.u-05{margin-left:0.35rem}
.u-06{color:var(--navy);font-weight:700}
.u-07{width:92%}
.u-08{text-align:center;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;margin:0 0 2rem;color:var(--ink-mute)}
.u-09{font-style:normal;color:var(--teal-deep)}
.u-10{--x:30%;--y:20%;--d:0s}
.u-11{--x:40%;--y:11.7%;--d:.4s}
.u-12{--x:50%;--y:18.3%;--d:.8s}
.u-13{--x:60%;--y:13.3%;--d:1.2s}
.u-14{--x:70%;--y:23.3%;--d:1.6s}
.u-15{--x:31.7%;--y:45%;--d:.2s}
.u-16{--x:45%;--y:48.3%;--d:.6s}
.u-17{--x:58.3%;--y:43.3%;--d:1.0s}
.u-18{--x:71.7%;--y:48.3%;--d:1.4s}
.u-19{--x:33.3%;--y:71.7%;--d:.3s}
.u-20{--x:46.7%;--y:78.3%;--d:.7s}
.u-21{--x:60%;--y:75%;--d:1.1s}
.u-22{--x:71.7%;--y:78.3%;--d:1.5s}
.u-23{--x:80%;--y:60%;--d:1.8s}
.u-24{margin-top:2rem;display:flex;gap:0.75rem;flex-wrap:wrap}
.u-25{margin-top:1.25rem;color:white}
.u-26{font-style:normal;font-weight:700;color:var(--navy)}
.u-27{background:linear-gradient(135deg,#f9a26c,#ef6c3a)}
.u-28{background:linear-gradient(135deg,#10b981,#0099b8)}
.u-29{background:var(--navy)}
.u-30{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.u-31{background:linear-gradient(135deg,#2dd4e5,#0099b8)}
.u-32{text-align:center;margin-top:2.5rem;color:var(--ink-soft);font-size:0.95rem}
.u-33{color:var(--navy)}

/* ===== homepage: client category totals (replaces per-client trust wall) ===== */
.trust-totals{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.25rem;
  margin-top:1rem;
}
.tt-tile{
  background:var(--bg,#fff);
  border:1px solid var(--line,#e2e8f0);
  border-radius:16px;
  padding:1.75rem 1.5rem;
  text-align:center;
  box-shadow:0 1px 2px rgba(16,46,80,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tt-tile:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 28px rgba(16,46,80,.10);
  border-color:#cbd5e1;
}
.tt-num{
  font-size:clamp(2.6rem,5vw,3.4rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,#2dd4e5 0%,#0099b8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#0099b8;
}
.tt-plus{ font-size:.6em; vertical-align:super; margin-left:.02em; }
.tt-label{
  margin-top:.9rem;
  font-weight:700;
  font-size:1rem;
  color:var(--ink,#0b1220);
  line-height:1.3;
}
.tt-sub{
  margin-top:.45rem;
  font-size:.85rem;
  color:var(--ink-mute,#5b6680);
  line-height:1.45;
}
@media (max-width:900px){
  .trust-totals{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .trust-totals{ grid-template-columns:1fr; }
}
/* headline reach row — states / facilities / apps */
.trust-topline{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:1.5rem 2.75rem;
  margin:0 auto 2rem;
  padding:2rem 2.25rem;
  max-width:900px;
  background:linear-gradient(135deg,#102e50 0%,#1c3f6b 100%);
  border-radius:20px;
  box-shadow:0 14px 34px rgba(16,46,80,.16);
}
.tw-stat{ text-align:center; }
.tw-stat-num{
  font-size:clamp(2.8rem,6vw,3.8rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(135deg,#2dd4e5 0%,#5eead4 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:#2dd4e5;
}
.tw-stat-label{
  margin-top:.6rem;
  font-weight:600;
  font-size:.95rem;
  color:rgba(255,255,255,.86);
  line-height:1.3;
}
.tw-stat-sep{
  width:1px;
  align-self:stretch;
  min-height:2.75rem;
  background:rgba(255,255,255,.16);
}
@media (max-width:560px){
  .trust-topline{ gap:1.25rem 1.75rem; padding:1.75rem 1.25rem; }
  .tw-stat-sep{ display:none; }
}

/* IT Services — manufacturer / technology partner pills (class-based so they survive strict CSP) */
.mfr-pills{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.85rem; max-width:820px; margin:0 auto; }
.mfr-pill{ padding:0.65rem 1.35rem; background:#fff; border:1px solid var(--line-strong); border-radius:999px; font-size:0.95rem; font-weight:700; color:var(--navy); }

/* =============================================================
   NAV DROPDOWN — Solutions subpage tree (desktop) + mobile accordion
   Added 2026-07-23: subpages (esp. Workforce Navigator) were unreachable
   from the nav; the flat menu also had no way to expand Solutions.
   ============================================================= */
.nav-links li.has-dropdown { position: relative; }
.nav-links > li > a { white-space: nowrap; }
.nav-links a .nav-caret,
.nav-links .nav-caret-btn .nav-caret {
  margin-left: 4px;
  vertical-align: -1px;
  opacity: 0.65;
  transition: transform 180ms ease;
}
.nav-links .nav-caret-btn:hover .nav-caret { opacity: 0.9; }
.nav-links li.has-dropdown:hover .nav-caret,
.nav-links li.has-dropdown:focus-within .nav-caret,
.nav-links li.has-dropdown.open .nav-caret { transform: rotate(180deg); }

/* caret is its own click/tap target (separate from the Solutions link) so
   clicking the text navigates and clicking the caret toggles the menu */
.nav-caret-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  vertical-align: middle;
}
.nav-caret-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; }

/* hover bridge so the 10px gap to the panel doesn't drop the hover */
.nav-links li.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 14px;
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 22px 48px -16px rgba(16, 46, 80, 0.28), 0 2px 8px rgba(16, 46, 80, 0.07);
  padding: 0.6rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  z-index: 210;
}
.nav-links li.has-dropdown:hover .nav-dropdown,
.nav-links li.has-dropdown:focus-within .nav-dropdown,
.nav-links li.has-dropdown.open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown a { padding: 0; }
.nav-dropdown a.active::after { display: none; }

.nav-dd-feature {
  display: block;
  padding: 0.8rem 0.9rem;
  border-radius: 11px;
  background: var(--brand-teal-tint);
  border: 1px solid rgba(0, 153, 184, 0.18);
  margin-bottom: 0.5rem;
  transition: background 160ms ease;
}
.nav-dd-feature:hover { background: rgba(0, 153, 184, 0.16); }
.nav-dd-feature.is-current { box-shadow: inset 0 0 0 2px var(--teal); }
.nav-dd-feature-title { display: block; font-weight: 700; color: var(--navy); font-size: 0.95rem; }
.nav-dd-feature-sub { display: block; margin-top: 2px; font-size: 0.79rem; font-weight: 500; color: var(--ink-soft); line-height: 1.4; }

.nav-dd-list { display: flex; flex-direction: column; }
.nav-dd-list a {
  padding: 0.52rem 0.9rem;
  border-radius: 9px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.nav-dd-list a:hover { background: var(--bg-muted); color: var(--navy); }

.nav-dd-all {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.45rem;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--brand-teal-deep);
}

/* ---- mobile accordion (Solutions subpages) ---- */
.mobile-panel .m-group { border-bottom: 1px solid var(--line); }
.mobile-panel .m-group-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 1rem 0;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.mobile-panel .m-group-toggle * { pointer-events: none; }
.mobile-panel .m-caret { opacity: 0.6; transition: transform 220ms ease; }
.mobile-panel .m-group.open .m-caret { transform: rotate(180deg); }
.mobile-panel .m-sub { display: none; flex-direction: column; padding: 0.2rem 0 0.9rem; }
.mobile-panel .m-group.open .m-sub { display: flex; }
.mobile-panel .m-sub a {
  font-size: 1.02rem;
  font-weight: 600;
  padding: 0.62rem 0 0.62rem 1rem;
  border-bottom: 0;
  color: var(--ink-soft);
}
.mobile-panel .m-sub a:hover { color: var(--teal); }
.mobile-panel .m-sub a.m-sub-feature { color: var(--brand-teal-deep); }

/* =============================================================
   REAL PRODUCT SCREENS (platform page) — framed V5 captures
   ============================================================= */
.product-media img { width: 100%; height: auto; display: block; }
.pv-gallery { display: flex; flex-direction: column; gap: 3.75rem; margin-top: 2.75rem; }
.pv-shot { margin: 0; }
.pv-shot img { width: 100%; max-width: 1040px; height: auto; display: block; margin: 0 auto; }
.pv-shot figcaption {
  max-width: 760px;
  margin: 1.15rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.02rem;
  line-height: 1.6;
}
.pv-shot figcaption strong { color: var(--navy); }