/* ============================================================
   HexaShield, HexaCore Platform
   Global design system
   ============================================================ */

:root {
  /* Core palette */
  --bg:            #050a18;
  --bg-2:          #070e22;
  --bg-3:          #0a1430;
  --surface:       rgba(255, 255, 255, 0.028);
  --surface-2:     rgba(255, 255, 255, 0.05);
  --border:        rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text:          #eaf0fb;
  --text-2:        #b7c2db;
  --muted:         #8593b4;
  --muted-2:       #5f6d8f;

  /* Brand accents */
  --cyan:    #22d3ee;
  --violet:  #8b5cf6;
  --pink:    #ec4899;
  --blue:    #3b82f6;
  --amber:   #f59e0b;
  --lime:    #a3e635;
  --rose:    #f43f5e;
  --teal:    #2dd4bf;
  --orange:  #f97316;
  --emerald: #2ee6a8;

  /* Signature gradient */
  --grad:      linear-gradient(120deg, #22d3ee 0%, #8b5cf6 48%, #ec4899 100%);
  --grad-soft: linear-gradient(120deg, rgba(34, 211, 238, .16), rgba(139, 92, 246, .16), rgba(236, 72, 153, .16));

  /* Type */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --radius: 18px;
  --radius-sm: 12px;
  --radius-lg: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --shadow: 0 24px 60px -20px rgba(0, 0, 0, .7);
  --glow: 0 0 40px -6px rgba(139, 92, 246, .45);

  --nav-h: 92px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

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

/* Global ambient background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 600px at 12% -5%, rgba(34, 211, 238, .10), transparent 60%), radial-gradient(1000px 700px at 92% 8%, rgba(139, 92, 246, .12), transparent 55%), radial-gradient(900px 800px at 50% 110%, rgba(236, 72, 153, .08), transparent 60%), var(--bg);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  /* Honeycomb backdrop, on theme with the mark. One deduplicated fundamental
     domain of the lattice, repeated nine times inside the tile so an edge that
     crosses the boundary is completed by its neighbour rather than clipped.
     Regenerate with tools/build-hexbg.py. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='41.569' height='72' viewBox='0 0 41.569 72'%3E%3Cpath d='M-41.57 -48.00L-20.78 -60.00M-41.57 -24.00L-41.57 -48.00M-41.57 -24.00L-20.78 -12.00M-20.78 -60.00L-20.78 -84.00M-20.78 -60.00L0.00 -48.00M-20.78 -12.00L0.00 -24.00M-41.57 24.00L-20.78 12.00M-41.57 48.00L-41.57 24.00M-41.57 48.00L-20.78 60.00M-20.78 12.00L-20.78 -12.00M-20.78 12.00L0.00 24.00M-20.78 60.00L0.00 48.00M-41.57 96.00L-20.78 84.00M-41.57 120.00L-41.57 96.00M-41.57 120.00L-20.78 132.00M-20.78 84.00L-20.78 60.00M-20.78 84.00L0.00 96.00M-20.78 132.00L0.00 120.00M0.00 -48.00L20.78 -60.00M0.00 -24.00L0.00 -48.00M0.00 -24.00L20.78 -12.00M20.78 -60.00L20.78 -84.00M20.78 -60.00L41.57 -48.00M20.78 -12.00L41.57 -24.00M0.00 24.00L20.78 12.00M0.00 48.00L0.00 24.00M0.00 48.00L20.78 60.00M20.78 12.00L20.78 -12.00M20.78 12.00L41.57 24.00M20.78 60.00L41.57 48.00M0.00 96.00L20.78 84.00M0.00 120.00L0.00 96.00M0.00 120.00L20.78 132.00M20.78 84.00L20.78 60.00M20.78 84.00L41.57 96.00M20.78 132.00L41.57 120.00M41.57 -48.00L62.35 -60.00M41.57 -24.00L41.57 -48.00M41.57 -24.00L62.35 -12.00M62.35 -60.00L62.35 -84.00M62.35 -60.00L83.14 -48.00M62.35 -12.00L83.14 -24.00M41.57 24.00L62.35 12.00M41.57 48.00L41.57 24.00M41.57 48.00L62.35 60.00M62.35 12.00L62.35 -12.00M62.35 12.00L83.14 24.00M62.35 60.00L83.14 48.00M41.57 96.00L62.35 84.00M41.57 120.00L41.57 96.00M41.57 120.00L62.35 132.00M62.35 84.00L62.35 60.00M62.35 84.00L83.14 96.00M62.35 132.00L83.14 120.00' fill='none' stroke='%23ffffff' stroke-opacity='0.032' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 41.569px 72px;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 40%, transparent 100%);
  pointer-events: none;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: -.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { color: var(--text-2); }

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

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.section { padding: clamp(64px, 9vw, 120px) 0; position: relative; }
.section-sm { padding: clamp(48px, 6vw, 80px) 0; }
.narrow { max-width: 780px; margin-inline: auto; }
.center { text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--cyan);
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }

.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head.center { margin-inline: auto; }
.section-head p { margin-top: 16px; font-size: 1.08rem; color: var(--muted); }
.section-head h2 { margin-top: 18px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-display); font-weight: 600; font-size: .96rem;
  padding: 13px 24px; border-radius: 12px;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s;
  white-space: nowrap;
}
.btn svg { width: 17px; height: 17px; }
.btn-primary {
  color: #05070f;
  background: var(--grad);
  background-size: 160% 160%;
  box-shadow: 0 10px 30px -8px rgba(139, 92, 246, .6);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -8px rgba(236, 72, 153, .65); background-position: 100% 50%; }
.btn-ghost {
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { transform: translateY(-2px); border-color: var(--cyan); background: var(--surface-2); }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(5, 10, 24, .78);
  backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* Brand: the official HexaShield lockup SVG carries the mark, wordmark and strapline, so no adjacent text is needed. Sized by height; width follows the 693:197 ratio. */
.brand { display: flex; align-items: center; line-height: 0; }
.brand .logo { width: auto; height: 54px; flex: none; transition: opacity .2s var(--ease); }
.brand:hover .logo { opacity: .85; }
.brand:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 6px; }
.footer .brand .logo { height: 64px; }
@media (max-width: 860px) { .brand .logo { height: 44px; } }
@media (max-width: 420px) { .brand .logo { height: 38px; } }

.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > li > a,
.nav-item > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text-2); font-size: .92rem; font-weight: 500; white-space: nowrap;
  background: none; border: none;
  transition: color .2s, background .2s;
}
.nav-links > li > a:hover, .nav-item > button:hover, .nav-item:hover > button, .nav-item.open > button { color: var(--text); background: var(--surface-2); }
.nav-item > button .chev { width: 13px; height: 13px; transition: transform .25s; opacity: .7; }
.nav-item:hover > button .chev,
.nav-item.open > button .chev { transform: rotate(180deg); }

/* Mega dropdown */
.nav-item { position: relative; }
/* The panel sits 10px below the trigger. Without a bridge across that gap the
   pointer leaves .nav-item on the way down and the panel closes underneath it. */
.nav-item::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  width: min(700px, 88vw); height: 18px;
  transform: translateX(-50%);
  display: none;
}
.nav-item:hover::after, .nav-item:focus-within::after, .nav-item.open::after { display: block; }
.dropdown {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  width: max-content; max-width: min(720px, 88vw);
  background: rgba(9, 16, 36, .96);
  backdrop-filter: blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
  display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 4px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.nav-item:hover .dropdown,
.nav-item:focus-within .dropdown,
.nav-item.open .dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dropdown a { display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background .2s; min-width: 0; }
.dropdown.cols-1 { --cols: 1; width: min(340px, 88vw); }
.dropdown.cols-3 { --cols: 3; }
.dropdown a:hover { background: var(--surface-2); }
.dropdown .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); }
.dropdown .ic svg { width: 20px; height: 20px; }
.dropdown .tt { font-family: var(--font-display); font-weight: 600; font-size: .95rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dropdown .dd { font-size: .82rem; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.tag-soon { font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; padding: 2px 6px; border-radius: 5px; background: rgba(245, 158, 11, .16); color: var(--amber); border: 1px solid rgba(245, 158, 11, .3); font-family: var(--font-body); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .login { color: var(--text-2); font-size: .92rem; font-weight: 500; padding: 9px 8px; white-space: nowrap; }
.nav-cta .login:hover { color: var(--text); }

.nav-toggle { display: none; background: none; border: 1px solid var(--border-strong); border-radius: 10px; width: 42px; height: 42px; place-items: center; }
.nav-toggle svg { width: 22px; height: 22px; stroke: var(--text); }

/* Mobile nav panel */
.mobile-panel {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 999;
  background: rgba(5, 10, 24, .98);
  backdrop-filter: blur(20px);
  padding: 24px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.mobile-panel.open { transform: translateX(0); }
.mobile-panel h4 { color: var(--muted); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin: 18px 0 8px; }
.mobile-panel a { display: block; padding: 13px 12px; border-radius: 10px; color: var(--text-2); font-size: 1.02rem; border-bottom: 1px solid var(--border); }
.mobile-panel a:hover { color: var(--text); background: var(--surface-2); }
.mobile-panel .btn { width: 100%; margin-top: 20px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), border-color .35s, background .35s;
  overflow: hidden;
}
.card:hover { transform: translateY(-5px); border-color: var(--border-strong); background: var(--surface-2); }
.card .ic {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center; margin-bottom: 18px;
  border: 1px solid var(--border-strong);
  background: var(--grad-soft);
}
.card .ic svg { width: 26px; height: 26px; }
.card h3 { margin-bottom: 10px; }
.card p { font-size: .96rem; color: var(--muted); }

/* Accent-tinted module card */
.mcard { --accent: var(--cyan); }
.mcard::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
  opacity: 0; transition: opacity .35s;
}
.mcard:hover::before { opacity: 1; }
.mcard:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mcard .ic { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mcard .ic svg { color: var(--accent); }
.mcard .badge { font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; display: block; }
.mcard .more { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--accent); }
.mcard .more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.mcard:hover .more svg { transform: translateX(4px); }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 90px)); padding-bottom: clamp(40px, 7vw, 90px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { margin: 22px 0 20px; }
.hero .lead { font-size: 1.18rem; color: var(--text-2); max-width: 560px; }
.hero-cta { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }
.hero-trust { margin-top: 34px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: .86rem; }
.hero-trust .sep { width: 1px; height: 20px; background: var(--border-strong); }

/* Stats strip */
.stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.stat { flex: 1 1 140px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.stat .n { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; }
.stat .l { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* ---------- Proof pillars (hero message band) ---------- */
.pillars { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(40px, 6vw, 64px); }
.pillars-thread { position: absolute; top: -3px; left: 8px; right: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(34,211,238,.28), rgba(139,92,246,.28), rgba(236,72,153,.28), transparent); }
.pillars-thread::after { content: ""; position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: #67e8f9; box-shadow: 0 0 12px #67e8f9; animation: thread-run 6.5s linear infinite; }
@keyframes thread-run { 0% { left: -1%; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.pillar { position: relative; padding: 24px 22px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(162deg, var(--surface-2), var(--surface)); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.pillar:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--pc) 55%, var(--border));
  box-shadow: 0 20px 44px -26px var(--pc); }
.pillar-motif { color: var(--pc); display: inline-flex; }
.pillar-motif svg { width: 36px; height: 36px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pc) 45%, transparent)); }
.pillar-head { font-family: var(--font-display); font-size: 1.06rem; font-weight: 700; line-height: 1.24; letter-spacing: -.01em;
  color: #fff; margin: 16px 0 9px; text-wrap: balance; }
.pillar-sub { font-size: .86rem; color: var(--text-2); line-height: 1.5; }

/* staggered entrance (falls back to fully visible if .in never lands) */
.pillars.in .pillar { animation: pillar-in .55s var(--ease) both; }
.pillars.in .pillar:nth-child(2) { animation-delay: .05s; }
.pillars.in .pillar:nth-child(3) { animation-delay: .15s; }
.pillars.in .pillar:nth-child(4) { animation-delay: .25s; }
.pillars.in .pillar:nth-child(5) { animation-delay: .35s; }
@keyframes pillar-in { from { opacity: .001; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* motif animations */
.pm-spin { transform-box: view-box; transform-origin: 20px 20px; animation: pm-spin 16s linear infinite; }
@keyframes pm-spin { to { transform: rotate(360deg); } }
.pm-orbit { transform-box: view-box; transform-origin: 20px 20px; animation: pm-spin 4.5s linear infinite; }
.pm-bar { transform-box: fill-box; transform-origin: bottom; animation: pm-grow 2.6s ease-in-out infinite; }
.pm-bar.b2 { animation-delay: .22s; }
.pm-bar.b3 { animation-delay: .44s; }
@keyframes pm-grow { 0%, 100% { transform: scaleY(.5); opacity: .45; } 50% { transform: scaleY(1); opacity: 1; } }
.pm-shield { animation: pm-shieldpulse 3.4s ease-in-out infinite; }
@keyframes pm-shieldpulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 900px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; } .pillars-thread { display: none; } }

/* ---------- Interactive platform map (hero) ---------- */
.orbit-wrap { position: relative; width: 100%; max-width: 540px; margin-inline: auto; perspective: 1000px; }
.orbit-wrap svg {
  width: 100%; height: auto; aspect-ratio: 1 / 1; overflow: visible;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .5s var(--ease);
}
.orbit-ring { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.orbit-line { stroke-width: 1.4; fill: none; opacity: .45; transition: opacity .35s, stroke-width .35s; }
.spin { transform-origin: center; animation: spin 60s linear infinite; }
.spin-rev { transform-origin: center; animation: spin 90s linear infinite reverse; }
.orbit-spin-ring { transform-origin: 250px 250px; animation: spin 55s linear infinite; }
.orbit-spin-ring.rev { animation: spin 80s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse-dot { animation: pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.core-glow { animation: glow 5s ease-in-out infinite; transform-origin: 250px 250px; }
@keyframes glow { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }

/* Nodes are real links, so they carry real focus styling. */
.orbit-node { cursor: pointer; outline: none; }
.orbit-node > g { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease), opacity .35s; }
.orbit-node .node-hex { transition: stroke-width .3s, filter .3s; }
.orbit-node:hover > g, .orbit-node.is-active > g { transform: scale(1.08); }
.orbit-node.is-active .node-hex { stroke-width: 2.8; filter: drop-shadow(0 0 14px currentColor); }
.orbit-node:focus-visible > g { transform: scale(1.08); }
.orbit-node:focus-visible .node-hex { stroke: #fff; stroke-width: 3; }
.orbit-core > g { transition: transform .4s var(--ease); }
.orbit-core:hover > g { transform: scale(1.03); }
.core-orbit { transform-origin: 250px 250px; animation: spin 48s linear infinite; }
.core-hex-inner { transform-origin: 250px 250px; animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .42; transform: scale(1); } 50% { opacity: .72; transform: scale(1.04); } }
/* Everything that is not the selected module recedes. */
svg.is-exploring .orbit-node:not(.is-active) > g { opacity: .42; }
.orbit-line.is-active { opacity: 1; stroke-width: 2.6; }
svg.is-exploring .orbit-line:not(.is-active) { opacity: .16; }

.orbit-hint { text-align: center; font-size: .8rem; color: var(--muted-2); margin-top: 4px; }
.orbit-hint a { color: var(--muted); border-bottom: 1px solid var(--border-strong); }
.orbit-hint a:hover { color: var(--cyan); }

/* Readout: every module description stays in the DOM; one is shown at a time. */
/* Stacked in a single grid cell: the box is always as tall as the longest
   description, so switching modules never shifts the page. */
.orbit-readout {
  display: grid; list-style: none; padding: 0; margin: 14px auto 0; max-width: 460px;
}
.orbit-item {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 5px;
  padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(9, 16, 36, .72); backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.orbit-item.is-active { opacity: 1; transform: none; pointer-events: auto; }
.om-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; }
.om-kicker { font-size: .72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); }
.om-blurb { font-size: .86rem; color: var(--text-2); line-height: 1.5; }

/* ---------- Resilience flywheel ---------- */
.flywheel { display: grid; grid-template-columns: minmax(0, 350px) 1fr; gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: 44px; }
.fw-vis { position: relative; }
.fw-vis svg { overflow: visible; }
.fw-arc { stroke-width: 2.2; opacity: .32; transition: opacity .4s, stroke-width .4s; }
.fw-arc.is-active { opacity: 1; stroke-width: 4; }
.fw-node { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease), opacity .4s; }
.fw-node circle { transition: stroke-width .3s, filter .3s; }
.fw-node.is-active { transform: scale(1.08); }
.fw-node.is-active circle { stroke-width: 3; filter: drop-shadow(0 0 14px currentColor); }
.fw-node:not(.is-active) { opacity: .55; }

.flow-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.flow-step {
  position: relative; padding: 16px 22px; overflow: hidden;
  border: 1px solid var(--border); border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.flow-step.is-active {
  border-left-color: var(--step-accent, var(--cyan));
  background: var(--surface-2);
  transform: translateX(4px);
}
.fs-head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; background: none; border: none; text-align: left; cursor: pointer; color: inherit; }
.fs-head .num {
  flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
  transition: background .3s, color .3s, border-color .3s;
}
.flow-step.is-active .fs-head .num { background: var(--step-accent, var(--cyan)); border-color: transparent; color: #05070f; }
.fs-title { font-family: var(--font-display); font-weight: 600; font-size: 1.06rem; color: var(--text); }
.flow-step p { font-size: .9rem; color: var(--muted); margin-top: 8px; padding-left: 44px; }
.fs-link {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: .84rem;
  color: var(--step-accent, var(--cyan));
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity .3s, max-height .3s, margin-top .3s;
}
.flow-step.is-active .fs-link { opacity: 1; max-height: 40px; margin-top: 10px; }
.fs-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.fs-link:hover svg { transform: translateX(4px); }

/* flywheel diagram motion */
.fw-glow { transform-box: fill-box; transform-origin: center; animation: fw-glow 5s ease-in-out infinite; }
@keyframes fw-glow { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
.fw-ring-spin { transform-box: fill-box; transform-origin: center; animation: fw-spin 42s linear infinite; }
.fw-flow path { animation: fw-dash 2.8s linear infinite; }
@keyframes fw-dash { to { stroke-dashoffset: -22; } }
.fw-orbit { transform-box: view-box; transform-origin: 170px 170px; animation: fw-spin 8s linear infinite; filter: drop-shadow(0 0 6px #a5f3fc); }
@keyframes fw-spin { to { transform: rotate(360deg); } }

/* step outcome tag + auto-advance progress */
.fs-tag { margin-left: auto; align-self: center; flex: none; font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .02em; white-space: nowrap; padding: 3px 9px; border-radius: 999px;
  color: var(--step-accent, var(--cyan));
  background: color-mix(in srgb, var(--step-accent, var(--cyan)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--step-accent, var(--cyan)) 30%, transparent);
  opacity: .45; transition: opacity .3s; }
.flow-step.is-active .fs-tag { opacity: 1; }
.fs-progress { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 0 2px 2px 0;
  background: var(--step-accent, var(--cyan)); opacity: 0; }
.flow-step.is-active .fs-progress { opacity: .9; animation: fs-fill 4.2s linear both; }
@keyframes fs-fill { from { width: 0; } to { width: 100%; } }
.flywheel:hover .flow-step.is-active .fs-progress { animation-play-state: paused; }
@media (max-width: 560px) { .fs-tag { display: none; } }

/* ---------- Feature rows (module pages) ---------- */
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.frow + .frow { margin-top: clamp(48px, 7vw, 96px); }
.frow.rev .fvis { order: -1; }
.fvis {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  padding: 30px; min-height: 320px; position: relative; overflow: hidden;
  display: grid; place-items: center;
}
.feature-list { display: grid; gap: 14px; margin-top: 24px; }
.feature-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--text-2); font-size: .98rem; }
.feature-list .tick { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--grad-soft); border: 1px solid var(--border-strong); margin-top: 1px; }
.feature-list .tick svg { width: 14px; height: 14px; color: var(--cyan); }
.feature-list .li-text { flex: 1; min-width: 0; }
.feature-list .mod-link { color: var(--cyan); font-weight: 600; white-space: nowrap; }
.feature-list .mod-link:hover { text-decoration: underline; }
.feature-list .mod-link.is-violet { color: var(--violet); }
.feature-list .mod-link.is-pink { color: var(--pink); }
.feature-list .mod-link.is-amber { color: var(--amber); }
.feature-list .mod-link.is-rose { color: var(--rose); }
.feature-list .mod-link.is-lime { color: var(--lime); }
.feature-list .mod-link.is-blue { color: var(--blue); }
.feature-list .mod-link.is-teal { color: var(--teal); }

/* ---------- HexaCore data-core diagram ---------- */
.hc-diagram { width: 100%; height: auto; overflow: visible; display: block; }
.hc-aura { transform-box: fill-box; transform-origin: center; animation: hc-breathe 7s ease-in-out infinite; }
.hc-corepulse { transform-box: fill-box; transform-origin: center; animation: hc-breathe 5s ease-in-out infinite; }
.hc-ring { transform-box: fill-box; transform-origin: center; animation: hc-ring-spin 26s linear infinite; }
.hc-flows line { animation: hc-flow 2.6s linear infinite; }
.hc-comets circle { offset-distance: 0%; filter: drop-shadow(0 0 6px currentColor); animation: hc-travel 2.6s linear infinite; }
.hc-ports circle { transform-box: fill-box; transform-origin: center; animation: hc-port 2.6s ease-in-out infinite; }
.hc-node { transform-box: fill-box; transform-origin: center; animation: hc-float 6s ease-in-out infinite; }
.hc-core-inner { transform-box: fill-box; transform-origin: center; animation: hc-ring-spin 34s linear infinite reverse; }

@keyframes hc-breathe { 0%, 100% { opacity: .78; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes hc-ring-spin { to { transform: rotate(360deg); } }
@keyframes hc-flow { to { stroke-dashoffset: -26; } }
@keyframes hc-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes hc-port { 0%, 100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes hc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .hc-aura, .hc-corepulse, .hc-ring, .hc-flows line,
  .hc-ports circle, .hc-node, .hc-core-inner { animation: none; }
  .hc-comets circle { animation: none; opacity: 0; }
}

/* ---------- Agent orchestration diagram ---------- */
.ag-diagram { width: 100%; height: auto; overflow: visible; display: block; }
.ag-flow line, .ag-flow path { animation: ag-dash 2.6s linear infinite; }
.ag-comets circle, .ag-gate-comet { offset-distance: 0%; filter: drop-shadow(0 0 5px currentColor); animation: ag-travel 2.6s linear infinite; }
.ag-gate-comet { color: #a5b4fc; animation-duration: 3.2s; }
.ag-halo { transform-box: fill-box; transform-origin: center; animation: ag-pulse 4s ease-in-out infinite; }
.ag-orch-glow { transform-box: fill-box; transform-origin: center; animation: ag-breathe 5s ease-in-out infinite; }
.ag-orch-ring { transform-box: fill-box; transform-origin: center; animation: ag-spin 20s linear infinite; }
.ag-human-glow { transform-box: fill-box; transform-origin: center; animation: ag-breathe 4s ease-in-out infinite; }
.ag-check { animation: ag-approve 4s ease-in-out infinite; }

@keyframes ag-dash { to { stroke-dashoffset: -24; } }
@keyframes ag-travel { 0% { offset-distance: 0%; opacity: 0; } 12% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes ag-pulse { 0%, 100% { opacity: .2; } 50% { opacity: .7; } }
@keyframes ag-breathe { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes ag-spin { to { transform: rotate(360deg); } }
@keyframes ag-approve { 0%, 68%, 100% { opacity: .45; } 80% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ag-flow line, .ag-flow path, .ag-halo, .ag-orch-glow,
  .ag-orch-ring, .ag-human-glow, .ag-check { animation: none; }
  .ag-comets circle, .ag-gate-comet { animation: none; opacity: 0; }
}

/* ---------- Deploy-anywhere diagram ---------- */
.dp-diagram { width: 100%; height: auto; overflow: visible; display: block; }
.dp-flow path { animation: ag-dash 2.6s linear infinite; }
.dp-comets circle { offset-distance: 0%; filter: drop-shadow(0 0 5px currentColor); animation: ag-travel 2.8s linear infinite; }
.dp-core-glow { transform-box: fill-box; transform-origin: center; animation: ag-breathe 5s ease-in-out infinite; }
.dp-core-ring { transform-box: fill-box; transform-origin: center; animation: ag-spin 22s linear infinite; }
.dp-lock { transform-box: fill-box; transform-origin: center; animation: dp-lock 3s ease-in-out infinite; }

@keyframes dp-lock { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .dp-flow path, .dp-core-glow, .dp-core-ring, .dp-lock { animation: none; }
  .dp-comets circle { animation: none; opacity: 0; }
}

/* ---------- Modules / API diagram ---------- */
.mo-diagram { width: 100%; height: auto; overflow: visible; display: block; }
.mo-flow path { animation: ag-dash 2.6s linear infinite; }
.mo-comets circle { offset-distance: 0%; filter: drop-shadow(0 0 5px currentColor); animation: ag-travel 2.8s linear infinite; }
.mo-core-glow { transform-box: fill-box; transform-origin: center; animation: ag-breathe 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .mo-flow path, .mo-core-glow { animation: none; }
  .mo-comets circle { animation: none; opacity: 0; }
}

/* ---------- HexaCore hero (normalise -> one schema) ---------- */
.hv-glow { transform-box: fill-box; transform-origin: center; animation: ag-breathe 6s ease-in-out infinite; }
.hv-flow path { animation: ag-dash 2.8s linear infinite; }
.hv-comets circle { offset-distance: 0%; filter: drop-shadow(0 0 6px currentColor); animation: ag-travel 3s linear infinite; }
.hv-tile { animation: hv-tile 4s ease-in-out infinite; }
@keyframes hv-tile { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hv-glow, .hv-flow path, .hv-tile { animation: none; }
  .hv-comets circle { animation: none; opacity: 0; }
}

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { font-size: .84rem; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); }

/* ---------- Module hero (sub pages) ---------- */
.mhero { padding-top: calc(var(--nav-h) + 70px); padding-bottom: 40px; position: relative; }
.mhero .badge-lg { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; }
.mhero h1 { margin: 22px 0 20px; max-width: 15ch; }
.mhero .lead { font-size: 1.16rem; max-width: 620px; }
.breadcrumb { display: flex; gap: 8px; align-items: center; font-size: .85rem; color: var(--muted); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--text); }
.breadcrumb span { color: var(--muted-2); }

/* ---------- Industries ---------- */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.ind {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 18px 20px; border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); cursor: default;
  transition: border-color .35s, transform .35s var(--ease), background .35s;
}
.ind:hover, .ind:focus-visible { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-2); outline: none; }
.ind:focus-visible { border-color: var(--cyan); }
.ind-top { display: flex; align-items: center; gap: 14px; }
.ind svg { width: 24px; height: 24px; color: var(--cyan); flex: none; transition: transform .35s var(--ease); }
.ind:hover svg { transform: scale(1.12) rotate(-4deg); }
.ind-name { font-family: var(--font-display); font-weight: 500; font-size: .98rem; }
/* The detail line is always in the DOM - it only expands into view. */
.ind-note { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.ind-note > span { overflow: hidden; font-size: .84rem; line-height: 1.5; color: var(--muted); }
.ind:hover .ind-note, .ind:focus-visible .ind-note, .ind:focus-within .ind-note { grid-template-rows: 1fr; }
.ind:hover .ind-note > span, .ind:focus-visible .ind-note > span { padding-top: 10px; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 24px; height: 24px; position: relative; transition: transform .3s; }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; background: var(--cyan); border-radius: 2px; }
.faq summary .pm::before { top: 11px; left: 3px; right: 3px; height: 2px; }
.faq summary .pm::after { left: 11px; top: 3px; bottom: 3px; width: 2px; transition: transform .3s; }
.faq details[open] summary .pm::after { transform: rotate(90deg); opacity: 0; }
.faq details[open] summary { color: var(--text); }
.faq .ans { padding: 0 24px 22px; color: var(--muted); font-size: .98rem; }

/* ---------- CTA band ---------- */
.cta-band { position: relative; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: clamp(40px, 6vw, 72px); text-align: center; overflow: hidden; background: linear-gradient(150deg, rgba(34, 211, 238, .08), rgba(139, 92, 246, .10), rgba(236, 72, 153, .08)); }
.cta-band h2 { margin-bottom: 16px; }
.cta-band p { max-width: 560px; margin: 0 auto 30px; font-size: 1.08rem; color: var(--text-2); }
.cta-band .hero-cta { justify-content: center; }

/* ---------- Logos / marquee ---------- */
.trust-line { text-align: center; color: var(--muted); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 24px; }

/* ---------- Forms ---------- */
.form-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: clamp(26px, 4vw, 44px); }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .86rem; font-weight: 500; color: var(--text-2); margin-bottom: 7px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 15px; border-radius: 11px;
  background: var(--bg-3); border: 1px solid var(--border-strong); color: var(--text);
  font-family: inherit; font-size: .96rem; transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, .15); }
.field textarea { resize: vertical; min-height: 120px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-note { font-size: .82rem; color: var(--muted-2); margin-top: 14px; text-align: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 64px 0 32px; margin-top: 40px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25)); }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand { margin-bottom: 16px; }
.footer .desc { color: var(--muted); font-size: .92rem; max-width: 320px; }
.footer h5 { font-family: var(--font-display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.footer ul li { margin-bottom: 10px; }
.footer ul a { color: var(--text-2); font-size: .93rem; transition: color .2s; }
.footer ul a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: .85rem; }
.footer-bottom .links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a:hover { color: var(--text-2); }
.disclaimer { max-width: var(--maxw); margin: 20px auto 0; padding: 0 24px; color: var(--muted-2); font-size: .74rem; line-height: 1.6; }

/* ---------- Misc ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.divider { height: 1px; background: var(--border); margin: 0; border: none; }
.accent-cyan { --accent: var(--cyan); } .accent-violet { --accent: var(--violet); }
.accent-pink { --accent: var(--pink); } .accent-blue { --accent: var(--blue); }
.accent-amber { --accent: var(--amber); } .accent-lime { --accent: var(--lime); }
.accent-rose { --accent: var(--rose); } .accent-teal { --accent: var(--teal); }
.accent-orange { --accent: var(--orange); } .accent-emerald { --accent: var(--emerald); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav-links, .nav-cta .login, .nav-cta .btn-ghost { display: none; }
  .nav-toggle { display: grid; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .orbit-wrap { max-width: 440px; }
  .frow, .frow.rev .fvis { grid-template-columns: 1fr; }
  .frow.rev .fvis { order: 0; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }

}
@media (max-width: 620px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .hero-cta .btn { width: 100%; }
}


/* ============================================================
   Interactive layer (see assets/js/diagrams.js)
   ============================================================ */

/* Pointer-following highlight. Purely additive: with no JS the custom
   properties never change and the gradient sits harmlessly off-centre. */
.has-spotlight { position: relative; }
.has-spotlight::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .07), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.has-spotlight:hover::after { opacity: 1; }

/* Figures on module pages tilt gently toward the cursor. */
.fvis.hx-tilting { perspective: 1000px; }
.fvis.hx-tilting > svg {
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .5s var(--ease);
}

/* Travelling data pulses. */
.hx-pulse { pointer-events: none; }
.hx-connector { transition: opacity .35s, stroke-width .35s; }

/* Generic node highlight for the module-page figures. */
.hx-node { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease), opacity .35s; }
.hx-has-nodes.hx-focused .hx-node:not(.is-active) { opacity: .45; }
.hx-node.is-active { transform: scale(1.07); }
.hx-node.is-active circle, .hx-node.is-active rect { filter: drop-shadow(0 0 10px currentColor); }
.hx-node:focus-visible { outline: none; }
.hx-node:focus-visible circle, .hx-node:focus-visible rect { stroke: #fff; stroke-width: 2.6; }

@media (prefers-reduced-motion: reduce) {
  .hx-pulse { display: none; }
  .orbit-wrap svg, .fvis.hx-tilting > svg { transform: none !important; }
}

/* Keyboard users get a visible focus ring everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Skip link */
.skip-link {
  position: absolute; left: 16px; top: -70px; z-index: 2000;
  padding: 12px 20px; border-radius: 0 0 12px 12px;
  background: var(--bg-3); color: var(--text); border: 1px solid var(--border-strong);
  font-family: var(--font-display); font-weight: 600;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

@media (max-width: 900px) {
  .flywheel { grid-template-columns: 1fr; }
  .fw-vis { max-width: 320px; margin-inline: auto; }
}


/* ============================================================
   Global delivery map
   ------------------------------------------------------------
   The dot grid is a 100KB SVG generated by tools/build-worldmap.py.
   It is applied as a CSS mask rather than inlined, so it stays a
   cached external file while still taking brand colours.
   ============================================================ */
.globe-section { overflow: hidden; }
.globe { max-width: 1100px; margin-inline: auto; }
.globe-canvas { position: relative; width: 100%; aspect-ratio: 1196 / 281; }
.globe-map {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 120% at 22% 40%, rgba(34, 211, 238, .95), transparent 60%), radial-gradient(70% 120% at 52% 30%, rgba(139, 92, 246, .95), transparent 60%), radial-gradient(80% 130% at 82% 60%, rgba(45, 212, 191, .95), transparent 62%), rgba(150, 180, 235, .55);
  -webkit-mask: url("../img/world-dots.svg") center / contain no-repeat;
  mask: url("../img/world-dots.svg") center / contain no-repeat;
  opacity: .85;
  overflow: hidden;
}
/* A slow sweep of light across the continents - the only thing moving when
   nothing is hovered, so the section reads as live rather than static. */
.globe-map::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .55) 50%, transparent 58%);
  animation: globe-sweep 9s linear infinite;
}
@keyframes globe-sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

.globe-fx { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.globe-arc { opacity: .4; }
.globe-pin { color: var(--cyan); }
.globe-pin .dot { fill: #eaf6ff; }
.globe-pin .ping {
  fill: none; stroke: var(--cyan); stroke-width: 1.4;
  transform-box: fill-box; transform-origin: center;
  animation: pin-ping 3.2s ease-out infinite;
  animation-delay: var(--pin-delay, 0s);
}
.globe-pin.is-major { color: var(--violet); }
.globe-pin.is-major .ping { stroke: var(--violet); stroke-width: 1.8; }
.globe-pin.is-major .dot { fill: #fff; filter: drop-shadow(0 0 8px var(--violet)); }
.globe-pin text { fill: var(--text); paint-order: stroke; stroke: rgba(5, 10, 24, .85); stroke-width: 3px; }
@keyframes pin-ping {
  0%   { transform: scale(.6); opacity: .9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

.globe-legend {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 20px; font-size: .8rem; color: var(--muted);
}
.globe-legend span { display: inline-flex; align-items: center; gap: 8px; }
.globe-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }

/* Below ~700px the map would be under 170px tall and unreadable, so let it
   run wider than the container and bleed past the gutters. */
@media (max-width: 700px) {
  .globe-section .container { overflow: hidden; }
  .globe-canvas { width: 165%; margin-left: -32.5%; }
  .globe-pin text { font-size: 15px; stroke-width: 4px; }
  .globe-legend { gap: 8px 18px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .globe-map::after { display: none; }
  .globe-pin .ping { animation: none; opacity: .35; }
}

/* ---------- Regulatory grid (industry pages) ---------- */
.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.reg {
  padding: 22px 24px; border: 1px solid var(--border); border-left: 3px solid var(--cyan);
  border-radius: 0 14px 14px 0; background: var(--surface);
  transition: border-color .3s, background .3s, transform .3s var(--ease);
}
.reg:hover { background: var(--surface-2); transform: translateX(3px); }
.reg h3 { font-size: 1rem; margin-bottom: 8px; }
.reg p { font-size: .88rem; color: var(--muted); line-height: 1.55; }
@media (max-width: 960px) { .reg-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .reg-grid { grid-template-columns: 1fr; } }

/* ---------- Data tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.data-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.data-table th, .data-table td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table thead th {
  font-family: var(--font-display); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, .02);
}
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, .02); }
.data-table tbody th { font-family: var(--font-display); font-weight: 600; color: var(--text); white-space: nowrap; }
.data-table tbody th a { color: inherit; border-bottom: 1px solid var(--border-strong); }
.data-table tbody th a:hover { color: var(--cyan); border-color: var(--cyan); }
.data-table td { color: var(--muted); font-size: .92rem; }

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

/* ---------- Footer extras ---------- */
.footer-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.footer-meta { margin-top: 18px; display: grid; gap: 8px; }
.footer-meta a { color: var(--muted-2); font-size: .82rem; }
.footer-meta a:hover { color: var(--cyan); }
@media (max-width: 1100px) { .footer-top { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 760px)  { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .footer-top { grid-template-columns: 1fr; } }

/* Static step list used on solution and industry pages: keep every step
   readable rather than emphasising one, since nothing is cycling here. */
.flow-steps .flow-step .fs-head { cursor: default; }
.flow-steps > .flow-step.is-active + .flow-step.is-active { }

/* ---------- Framework chip grid (HexaComply) ---------- */
.fw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.fw-chip {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 62px; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--lime)) 34%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, var(--lime)) 8%, transparent);
  font-family: var(--font-display); font-weight: 600; font-size: .92rem;
  color: color-mix(in srgb, var(--accent, var(--lime)) 78%, #ffffff);
  transition: transform .3s var(--ease), background .3s, border-color .3s;
}
.fw-chip:hover {
  transform: translateY(-3px);
  background: color-mix(in srgb, var(--accent, var(--lime)) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent, var(--lime)) 60%, transparent);
}
.fw-note { margin-top: 18px; font-size: .86rem; color: var(--muted-2); }

/* Cards in a grid share a row height, so push the call-to-action to the bottom
   rather than letting it float mid-card on the shorter ones. */
.grid > .mcard { display: flex; flex-direction: column; }
.grid > .mcard .more { margin-top: auto; padding-top: 18px; }
.grid-4 > .card { padding: 24px; }
.grid-4 > .card h3 { font-size: 1.12rem; }
.grid-4 > .card p { font-size: .9rem; }
@media (max-width: 1180px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }


/* ============================================================
   Industry hero artwork
   ------------------------------------------------------------
   Pages with a hero illustration switch to two columns; the rest
   keep the full-width hero, so .mhero-grid has to degrade to a
   single column on its own.
   ============================================================ */
.mhero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.mhero.has-art .mhero-grid { grid-template-columns: 1.02fr .98fr; gap: clamp(32px, 4vw, 64px); }
.mhero.has-art h1 { max-width: 18ch; }
.mhero.has-art .lead { max-width: 56ch; }
.mhero .stats { max-width: 620px; }

.mhero-art { position: relative; width: 100%; min-width: 0; perspective: 1200px; }
.mhero-art svg {
  width: 100%; height: auto; overflow: visible;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .6s var(--ease);
}

/* --- the vessel ------------------------------------------------------- */
.m-ship { animation: m-bob 7s ease-in-out infinite; transform-origin: 290px 360px; }
@keyframes m-bob {
  0%, 100% { transform: translateY(0) rotate(-.35deg); }
  50%      { transform: translateY(-6px) rotate(.35deg); }
}

/* --- sea: each line drifts at its own pace so the water has depth ----- */
.mw { animation: m-drift 14s linear infinite; }
.mw1 { animation-duration: 18s; animation-direction: reverse; }
.mw2 { animation-duration: 22s; }
.mw3 { animation-duration: 27s; animation-direction: reverse; }
@keyframes m-drift { from { transform: translateX(-60px); } to { transform: translateX(0); } }

/* --- satellite and its downlink --------------------------------------- */
.m-sat { animation: m-float 9s ease-in-out infinite; transform-origin: 456px 84px; }
@keyframes m-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.m-ring { transform-box: fill-box; transform-origin: center top; animation: m-ping 3.6s ease-out infinite; }
.m-ring1 { animation-delay: .5s; }
.m-ring2 { animation-delay: 1s; }
@keyframes m-ping {
  0%   { opacity: 0; transform: scale(.55); }
  35%  { opacity: .55; }
  100% { opacity: 0; transform: scale(1.25); }
}

.m-beam { animation: m-dash 2.4s linear infinite; }
@keyframes m-dash { to { stroke-dashoffset: -24; } }

/* --- radar on the bridge ---------------------------------------------- */
.m-radar { animation: m-spin 5.5s linear infinite; }
@keyframes m-spin { to { transform: translate(132px, 227px) rotate(360deg); } }

/* --- the connected systems below deck --------------------------------- */
.m-node { transform-box: fill-box; transform-origin: center; animation: m-pulse 3.4s ease-in-out infinite; animation-delay: var(--nd, 0s); }

/* Radar range arcs breathe outward from the vessel. */
.m-range { transform-box: fill-box; transform-origin: center; animation: m-range 7s ease-out infinite; }
.m-range1 { animation-delay: 1.2s; }
.m-range2 { animation-delay: 2.4s; }
@keyframes m-range {
  0%   { opacity: 0; transform: scale(.86); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.12); }
}
.m-reflection { animation: m-shimmer 6s ease-in-out infinite; }
@keyframes m-shimmer { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes m-pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; transform: scale(1.06); } }

@media (max-width: 960px) {
  .mhero.has-art .mhero-grid { grid-template-columns: 1fr; }
  .mhero.has-art h1, .mhero.has-art .lead { max-width: none; }
  .mhero-art { max-width: 520px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .m-ship, .mw, .m-sat, .m-ring, .m-beam, .m-radar, .m-node, .m-range, .m-reflection { animation: none; }
  .m-radar { opacity: .5; }
}


/* ============================================================
   Converge diagram - "many signals, one picture"
   ------------------------------------------------------------
   Chips are HTML (real text, responsive); the curves are an SVG
   overlay anchored to measured chip positions by main.js. Below
   900px the overlay is dropped and the chips simply stack.
   ============================================================ */
.converge {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 280px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin-top: 44px;
}
.converge-links {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 0;
}
.converge-link { fill: none; stroke-width: 1.6; opacity: .7; }

.converge-col { display: grid; gap: 12px; position: relative; z-index: 1; }

.cchip {
  position: relative;
  padding: 13px 18px;
  border: 1px solid color-mix(in srgb, var(--c) 38%, transparent);
  border-radius: 12px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 9%, transparent), rgba(9, 16, 36, .9));
  backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s, background .3s;
}
.cchip:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
  background: linear-gradient(120deg, color-mix(in srgb, var(--c) 16%, transparent), rgba(9, 16, 36, .95));
}
.cchip-out:hover { transform: translateX(-4px); }
.cchip-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: .96rem; color: var(--text); }
.cchip-sub { display: block; margin-top: 3px; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.cchip-out { border-left-width: 3px; }

.converge-core { position: relative; display: grid; place-items: center; z-index: 1; }
.converge-core svg { width: 100%; height: auto; overflow: visible; }
.cvg-glow { transform-origin: center; animation: cvg-breathe 5s ease-in-out infinite; }
.cvg-inner { transform-origin: center; animation: cvg-spin 26s linear infinite; }
@keyframes cvg-breathe { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.05); } }
@keyframes cvg-spin { to { transform: rotate(360deg); } }

.converge-core-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; padding: 0 8%; }
.ccl-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: #fff; }
.ccl-kicker { font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ccl-sub { margin-top: 8px; font-size: .68rem; color: var(--cyan); letter-spacing: .03em; }

.converge-note { max-width: 760px; margin: 34px auto 0; text-align: center; font-size: .88rem; color: var(--muted-2); line-height: 1.6; }

@media (max-width: 900px) {
  .converge { grid-template-columns: 1fr; gap: 20px; }
  .converge-links { display: none; }
  .converge-core { order: 0; max-width: 200px; margin-inline: auto; }
  .converge-in { order: -1; }
  .cchip:hover, .cchip-out:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cvg-glow, .cvg-inner { animation: none; }
}


/* ---------- Book a meeting ---------- */
.book-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 64px); align-items: start; margin-top: 26px; }
.book-grid h1 { margin: 20px 0 18px; max-width: 16ch; }
.book-alt { margin-top: 26px; font-size: .92rem; color: var(--muted); }
.book-alt a { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }

.book-widget {
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--surface-2), var(--surface));
  overflow: hidden;
}
.book-widget-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px; border-bottom: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--text-2);
}
.bw-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
/* Calendly renders its own white card; give it a light surface to sit on so it
   does not look like a hole punched in the page. */
.calendly-inline-widget { background: #f7f9fc; }
.book-fallback { padding: 14px 22px; font-size: .82rem; color: var(--muted-2); border-top: 1px solid var(--border); }
.book-fallback a { color: var(--cyan); }

@media (max-width: 900px) {
  .book-grid { grid-template-columns: 1fr; }
  .book-grid h1 { max-width: none; }
}


/* ---------- Shared industry scene animation ---------- */
.sc-node { transform-box: fill-box; transform-origin: center; animation: m-pulse 3.4s ease-in-out infinite; animation-delay: var(--nd, 0s); }
.sc-spin { transform-box: fill-box; transform-origin: center; animation: cvg-spin 34s linear infinite; }
.sc-float { animation: m-float 8s ease-in-out infinite; }
.sc-play { transform-box: fill-box; transform-origin: center; animation: sc-beat 3s ease-in-out infinite; }
@keyframes sc-beat { 0%, 100% { opacity: .7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.sc-strip { animation: sc-slide 24s linear infinite; }
@keyframes sc-slide { from { transform: translateX(0); } to { transform: translateX(-52px); } }
.sc-arc { stroke-dashoffset: 380; animation: sc-fill 3.4s var(--ease) forwards; }
@keyframes sc-fill { to { stroke-dashoffset: 108; } }
.sc-arm { transform-box: fill-box; transform-origin: 132px 396px; animation: sc-reach 7s ease-in-out infinite; }
@keyframes sc-reach { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.sc-parts { animation: sc-feed 9s linear infinite; }
@keyframes sc-feed { from { transform: translateX(-100px); } to { transform: translateX(0); } }
.sc-roll { animation: sc-rollspin 2.6s linear infinite; }
@keyframes sc-rollspin { to { stroke-dashoffset: -20; } }
.sc-trace { stroke-dasharray: 900; stroke-dashoffset: 900; animation: sc-draw 4.5s ease-out infinite; }
@keyframes sc-draw { 0% { stroke-dashoffset: 900; } 45%, 100% { stroke-dashoffset: 0; } }
.sc-rotor { animation: cvg-spin 11s linear infinite; }
.sc-boundary { animation: sc-march 5s linear infinite; }
@keyframes sc-march { to { stroke-dashoffset: -40; } }
.sc-link { opacity: .62; }
/* Used by the HexaInt scene: a scan line travelling down the strata, and the
   soft halo on the one item that turned out to be yours. */
.sc-sweep { animation: sc-sweep 6s var(--ease) infinite; }
@keyframes sc-sweep { 0% { transform: translateY(0); opacity: .2; } 45% { transform: translateY(232px); opacity: .7; } 90%, 100% { transform: translateY(0); opacity: .2; } }
.sc-glow { transform-box: fill-box; transform-origin: center; animation: sc-glow 3.2s ease-in-out infinite; }
@keyframes sc-glow { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.14); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .sc-node, .sc-spin, .sc-float, .sc-play, .sc-strip, .sc-arc, .sc-arm,
  .sc-sweep, .sc-glow,
  .sc-parts, .sc-roll, .sc-trace, .sc-rotor, .sc-boundary { animation: none; }
  .sc-arc { stroke-dashoffset: 108; }
  .sc-trace { stroke-dasharray: none; stroke-dashoffset: 0; }
}


/* ---------- Legal pages ---------- */
.legal-meta { margin-top: 18px; font-size: .86rem; color: var(--muted-2); letter-spacing: .02em; }
.legal-banner {
  margin-top: 26px; max-width: 760px;
  padding: 16px 20px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
  color: var(--text-2); font-size: .9rem; line-height: 1.6;
}
.legal-banner strong { color: var(--amber); }

.legal-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.legal-toc { position: sticky; top: calc(var(--nav-h) + 24px); }
.legal-toc h2 { font-family: var(--font-display); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.legal-toc ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.legal-toc a { font-size: .88rem; color: var(--text-2); border-left: 2px solid var(--border); padding-left: 12px; display: block; transition: color .2s, border-color .2s; }
.legal-toc a:hover { color: var(--cyan); border-color: var(--cyan); }

.legal-body { max-width: 74ch; }
.legal-section + .legal-section { margin-top: 44px; }
.legal-section h2 { font-size: 1.32rem; margin-bottom: 16px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.legal-section p { color: var(--text-2); font-size: .98rem; line-height: 1.75; }
.legal-section p + p { margin-top: 14px; }
.legal-section a { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.legal-section strong { color: var(--text); }

@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}


/* ============================================================
   "Problems we are asked to solve"
   ------------------------------------------------------------
   Reads left to right: the situation, the capability we put
   against it, and what changes commercially. Three columns on
   desktop, stacked and labelled on small screens.
   ============================================================ */
.prob-list { display: grid; gap: 18px; }
.prob {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color .35s, background .35s;
}
.prob:hover { border-color: var(--border-strong); background: var(--surface-2); }
.prob-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 20px 26px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, .015);
}
.prob-n {
  font-family: var(--font-display); font-weight: 700; font-size: .82rem;
  width: 34px; height: 34px; flex: none; border-radius: 10px;
  display: grid; place-items: center;
  color: var(--accent, var(--cyan));
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 40%, transparent);
  background: color-mix(in srgb, var(--accent, var(--cyan)) 10%, transparent);
}
.prob-head h3 { font-size: 1.1rem; flex: 1 1 260px; }
.prob-tag {
  font-family: var(--font-display); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
  color: var(--accent, var(--cyan));
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 32%, transparent);
}
.prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.prob-col { padding: 22px 26px; border-left: 1px solid var(--border); }
.prob-col:first-child { border-left: none; }
.prob-col.is-solution { background: rgba(255, 255, 255, .02); }
.prob-label {
  display: block; margin-bottom: 10px;
  font-family: var(--font-display); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
}
.prob-col.is-solution .prob-label { color: var(--accent, var(--cyan)); }
.prob-col p { font-size: .91rem; line-height: 1.65; color: var(--text-2); }
.prob-plats { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; align-items: center; }
.prob-cap { font-family: var(--font-display); font-size: .72rem; font-weight: 600; color: var(--muted); margin-right: 4px; }
.pl-chip {
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  padding: 4px 9px; border-radius: 6px;
  color: var(--accent, var(--cyan));
  background: color-mix(in srgb, var(--accent, var(--cyan)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 26%, transparent);
}

@media (max-width: 1000px) {
  .prob-grid { grid-template-columns: 1fr; }
  .prob-col { border-left: none; border-top: 1px solid var(--border); }
  .prob-col:first-child { border-top: none; }
}

/* ---------- Frameworks note + sector CTA ---------- */
.frameworks-note {
  margin-top: 28px; padding: 26px 30px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.frameworks-note h3 { font-size: 1.02rem; margin-bottom: 12px; }
.frameworks-note p { font-size: .93rem; line-height: 1.7; color: var(--text-2); }
.fn-caveat { margin-top: 14px; font-size: .82rem !important; color: var(--muted-2) !important; }

.sector-cta {
  margin-top: 22px; padding: 26px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--grad-soft);
}
.sector-cta h3 { font-size: 1.14rem; margin-bottom: 6px; }
.sector-cta p { font-size: .92rem; color: var(--text-2); max-width: 52ch; }


/* ---------- Partner pages ---------- */
.psides { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pside {
  padding: 30px 32px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}
.pside-label { display: block; font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
.pside h3 { font-size: 1.3rem; margin-bottom: 12px; }
.pside p { font-size: .95rem; line-height: 1.7; color: var(--text-2); }
.pstrap { margin-top: 22px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; color: var(--text-2); letter-spacing: .01em; }

.pcap {
  position: relative; padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 7%, transparent), var(--surface));
  transition: transform .35s var(--ease), border-color .35s;
}
.pcap:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.pcap-n { font-family: var(--font-display); font-weight: 700; font-size: .78rem; color: var(--accent); letter-spacing: .08em; }
.pcap h3 { font-size: 1.08rem; margin: 8px 0 10px; }
.pcap p { font-size: .9rem; color: var(--muted); line-height: 1.62; }
.pcap-plat { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pcap-plat > span { font-family: var(--font-display); font-size: .64rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); margin-right: 2px; }

.pmodel { padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); transition: border-color .3s, background .3s; }
.pmodel:hover { border-color: var(--border-strong); background: var(--surface-2); }
.pmodel-tag { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.pmodel h3 { font-size: 1.1rem; margin: 10px 0 10px; }
.pmodel p { font-size: .9rem; color: var(--muted); line-height: 1.62; }

.pquote { margin: 0; padding: 28px 30px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pquote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.7; color: var(--text-2); }
/* Literal curly quotes rather than CSS escapes: an escaped \201C is easy
   to mangle when this file is rewritten by a script. */
.pquote blockquote::before { content: "“"; }
.pquote blockquote::after { content: "”"; }
.pquote figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 2px; }
.pquote figcaption strong { font-family: var(--font-display); color: var(--text); }
.pquote figcaption span { font-size: .84rem; color: var(--muted-2); }

/* Partner cards on the hub */
.partner-card { display: flex; flex-direction: column; }
.partner-kind { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, var(--cyan)); }
.partner-card h3 { margin: 8px 0 6px; }
.partner-sector { font-size: .82rem; color: var(--muted-2); margin-bottom: 10px; }

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


/* ============================================================
   Partner and vendor logo marquee
   ------------------------------------------------------------
   Marks arrive in a dozen different colourways, so they are
   normalised to white at rest and released to their own colours
   on hover. That keeps the wall coherent on navy without
   permanently repainting anyone's brand.
   ============================================================ */
.logo-band { padding-top: clamp(30px, 4vw, 48px); padding-bottom: clamp(30px, 4vw, 48px); }
.logo-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
/* A hairline above and below turns a floating row into a band. */
.logo-band .container { position: relative; }
.logo-marquee::before, .logo-marquee::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}
.logo-marquee::before { top: 0; }
.logo-marquee::after { bottom: 0; }

.logo-track {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 26px 0;
  width: max-content;
  gap: clamp(38px, 5vw, 68px);
  animation: logo-scroll 46s linear infinite;
}
/* Exactly half the track is the duplicate set, so -50% is a seamless loop. */
@keyframes logo-scroll { to { transform: translateX(-50%); } }
.logo-marquee:hover .logo-track { animation-play-state: paused; }

.lg { flex: none; display: grid; place-items: center; }
.lg img {
  display: block;
  width: auto; height: auto;
  max-width: calc(148px * var(--s, 1));
  max-height: calc(34px * var(--s, 1));
  object-fit: contain;
  /* brightness(0) flattens every mark to black, invert(1) lifts it to white,
     then a per-logo brand-colour glow gives the strip life without recolouring the mark */
  filter: brightness(0) invert(1) drop-shadow(0 0 7px color-mix(in srgb, var(--glow, var(--cyan)) 60%, transparent));
  opacity: .88;
  transition: opacity .35s var(--ease), filter .35s var(--ease), transform .35s var(--ease);
}
.lg:nth-child(7n+1) img { --glow: var(--cyan); }
.lg:nth-child(7n+2) img { --glow: var(--violet); }
.lg:nth-child(7n+3) img { --glow: var(--pink); }
.lg:nth-child(7n+4) img { --glow: var(--teal); }
.lg:nth-child(7n+5) img { --glow: var(--lime); }
.lg:nth-child(7n+6) img { --glow: var(--amber); }
.lg:nth-child(7n+7) img { --glow: var(--blue); }
.lg img:hover {
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--glow, var(--cyan)) 60%, transparent));
  opacity: 1;
  transform: scale(1.08);
}

@media (max-width: 700px) {
  .logo-track { gap: 34px; padding: 20px 0; animation-duration: 34s; }
  .lg img { max-width: calc(108px * var(--s, 1)); max-height: calc(27px * var(--s, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px 44px;
  }
  /* With the track wrapped there is no scroll, so the duplicate set would
     simply repeat every mark. */
  .logo-track .lg[aria-hidden="true"] { display: none; }
  .lg img { transition: none; }
}


/* ---------- Contact form: honeypot, Turnstile, status ---------- */
/* Off-screen rather than display:none, so bots that skip hidden inputs still
   fill it in. aria-hidden and tabindex keep it away from real users. */
.hp {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.cf-turnstile { margin: 4px 0 18px; min-height: 65px; }

.form-note.is-pending { color: var(--muted); }
.form-note.is-success { color: var(--lime); }
.form-note.is-error   { color: var(--rose); }
.form-note.is-success::before,
.form-note.is-error::before,
.form-note.is-pending::before { content: ""; }


/* ============================================================
   Learning Hub
   ============================================================ */
.lk-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 34px; }
.lk { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.lk-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; }
.lk div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lk strong { font-family: var(--font-display); font-size: .88rem; color: var(--text); }
.lk span { font-size: .76rem; color: var(--muted-2); line-height: 1.4; }

/* --- filters --- */
.lf { margin-bottom: 34px; display: grid; gap: 14px; }
.lf-row { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.lf-label { font-family: var(--font-display); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); min-width: 68px; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.lf-chip {
  font-family: var(--font-body); font-size: .82rem;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  transition: border-color .25s, background .25s, color .25s;
}
.lf-chip:hover { border-color: var(--border-strong); color: var(--text); }
.lf-chip.is-on { border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 14%, transparent); color: var(--cyan); }
.lf-count { font-size: .82rem; color: var(--muted-2); }
.lf-empty { text-align: center; color: var(--muted); padding: 40px 0; }
.lf-reset { background: none; border: none; color: var(--cyan); cursor: pointer; font: inherit; text-decoration: underline; }

/* --- cards --- */
.lcard { display: flex; flex-direction: column; }
.lcard-kind { font-family: var(--font-display); font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, var(--cyan)); }
.lcard h3 { margin: 10px 0 8px; font-size: 1.1rem; line-height: 1.35; }
.lcard p { font-size: .9rem; color: var(--muted); line-height: 1.6; }
.lcard-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--muted-2); }
.lcard-arrow svg { width: 15px; height: 15px; color: var(--accent, var(--cyan)); transition: transform .25s var(--ease); }
.lcard:hover .lcard-arrow svg { transform: translateX(4px); }
.lcard[hidden] { display: none; }

/* --- article --- */
.lp-meta { margin-top: 16px; font-size: .84rem; color: var(--muted-2); }
.lp-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.lp-topic { font-size: .78rem; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); transition: color .2s, border-color .2s; }
.lp-topic:hover { color: var(--cyan); border-color: var(--cyan); }

.lp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(32px, 5vw, 68px); align-items: start; }
.lp-aside { position: sticky; top: calc(var(--nav-h) + 24px); }
.lp-keys { padding: 26px 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.lp-keys h2 { font-family: var(--font-display); font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.lp-keys .feature-list { margin-top: 0; gap: 12px; }
.lp-keys .feature-list li { font-size: .88rem; line-height: 1.55; }

.lp-body { max-width: 72ch; }
.lp-section + .lp-section { margin-top: 42px; }
.lp-section h2 { font-size: 1.36rem; margin-bottom: 16px; scroll-margin-top: calc(var(--nav-h) + 20px); }
.lp-section p { color: var(--text-2); font-size: 1rem; line-height: 1.78; }
.lp-section p + p { margin-top: 16px; }
.lp-section strong { color: var(--text); }

@media (max-width: 1100px) { .lk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .lp-layout { grid-template-columns: 1fr; }
  .lp-aside { position: static; }
  .lf-label { min-width: 100%; }
}
@media (max-width: 620px) { .lk-grid { grid-template-columns: 1fr; } }

/* ---------- Capability tiles (about.html) ---------- */
.captile:not([class*="accent-"]) { --accent: var(--cyan); }
.captile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.captile {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto;
  column-gap: 14px; row-gap: 2px; align-items: center;
  padding: 20px 22px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .07));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 62%), var(--surface);
  backdrop-filter: blur(6px);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
/* The accent wash and the top rule are what carry the colour on hover. */
.captile::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.captile::after {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%;
  background: linear-gradient(90deg, var(--accent), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease);
}
.captile:hover, .captile:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--accent) 65%, transparent);
}
.captile:hover::before, .captile:focus-visible::before { opacity: 1; }
.captile:hover::after, .captile:focus-visible::after { transform: scaleX(1); }

.captile-mark { grid-row: 1 / 3; color: var(--accent); display: block; }
.captile-mark svg { width: 42px; height: 42px; transition: transform .4s var(--ease); }
.captile:hover .captile-mark svg { transform: rotate(30deg) scale(1.06); }
.captile-name { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; color: #fff; }
.captile-sub { font-size: .86rem; color: var(--muted); }

@media (max-width: 960px) { .captile-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .captile-grid { grid-template-columns: 1fr; } }

/* ---------- The about mission figure ---------- */
.ab-fig svg { overflow: visible; }
.ab-spin { transform-origin: 200px 200px; animation: ab-rot 46s linear infinite; }
@keyframes ab-rot { to { transform: rotate(360deg); } }
.ab-breathe { animation: ab-breathe 7s var(--ease) infinite; transform-origin: 200px 200px; }
@keyframes ab-breathe { 0%, 100% { opacity: .75; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } }
.ab-core { filter: drop-shadow(0 0 18px rgba(139, 92, 246, .3)); }

.ab-node { cursor: pointer; }
.ab-node .ab-hex, .ab-node .ab-halo, .ab-node .ab-pip, .ab-node text { transition: all .3s var(--ease); }
.ab-node:hover .ab-halo, .ab-node:focus-visible .ab-halo { fill-opacity: .16; }
.ab-node:hover .ab-hex, .ab-node:focus-visible .ab-hex { stroke-width: 2.6; }
.ab-node:hover .ab-pip, .ab-node:focus-visible .ab-pip { fill-opacity: .85; }
.ab-node:focus-visible { outline: none; }
.ab-node:focus-visible .ab-halo { fill-opacity: .22; }
/* Dim the siblings so the hovered capability reads as the subject. */
.ab-fig svg:hover .ab-node { opacity: .45; }
.ab-fig svg:hover .ab-node:hover { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ab-spin, .ab-breathe { animation: none; }
  .captile { transition: none; }
  .captile:hover { transform: none; }
}

/* ---------- About: trust layer ---------- */
.ab-facts { display: grid; gap: 12px; align-content: center; }
.ab-fact { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface)); transition: border-color .3s, transform .3s var(--ease); }
.ab-fact:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--c, var(--cyan)) 45%, var(--border)); }
.ab-fact-ic { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--c, var(--cyan)); background: color-mix(in srgb, var(--c, var(--cyan)) 12%, transparent); border: 1px solid color-mix(in srgb, var(--c, var(--cyan)) 30%, transparent); }
.ab-fact-ic svg { width: 20px; height: 20px; }
.ab-fact-k { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ab-fact-v { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); margin-top: 2px; }
.ab-fact-sub { display: block; font-size: .78rem; color: var(--muted); margin-top: 2px; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.team-card { position: relative; text-align: center; padding: 28px 20px 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(165deg, var(--surface-2), var(--surface)); transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.team-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c, var(--cyan)) 50%, var(--border)); box-shadow: 0 20px 44px -26px var(--c, var(--cyan)); }
.team-avatar { display: inline-grid; place-items: center; width: 84px; height: 84px; color: var(--c, var(--cyan)); }
.team-avatar svg { width: 100%; height: 100%; overflow: visible; }
.team-avatar .ta-ring { transform-box: fill-box; transform-origin: center; animation: team-spin 18s linear infinite; }
@keyframes team-spin { to { transform: rotate(360deg); } }
.team-name { display: block; margin-top: 14px; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: #fff; }
.team-role { display: block; margin-top: 3px; font-size: .82rem; font-weight: 600; color: var(--c, var(--cyan)); }
.team-bio { display: block; margin-top: 9px; font-size: .84rem; color: var(--muted); line-height: 1.5; }
.team-note { text-align: center; margin-top: 22px; font-size: .9rem; color: var(--muted); }
.team-note a { color: var(--cyan); border-bottom: 1px solid color-mix(in srgb, var(--cyan) 40%, transparent); }
.team-apply { display: inline-flex; align-items: center; gap: 6px; margin-top: 13px; font-family: var(--font-display); font-weight: 600; font-size: .84rem; color: var(--c, var(--cyan)); }
.team-apply svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.team-apply:hover svg { transform: translateX(4px); }

.partner-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.partner-card { display: flex; flex-direction: column; gap: 6px; padding: 22px 20px; border: 1px solid var(--border); border-top: 2px solid var(--c, var(--cyan)); border-radius: var(--radius-lg); background: var(--surface); transition: transform .3s var(--ease), background .3s, box-shadow .3s; }
.partner-card:hover { transform: translateY(-4px); background: var(--surface-2); box-shadow: 0 18px 40px -26px var(--c, var(--cyan)); }
.partner-name { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--text); }
.partner-tag { font-size: .82rem; color: var(--muted); }
.partner-more { margin-top: auto; padding-top: 12px; font-size: .8rem; font-weight: 600; color: var(--c, var(--cyan)); display: inline-flex; align-items: center; gap: 6px; }
.partner-more svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.partner-card:hover .partner-more svg { transform: translateX(4px); }

.cert-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.cert-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px dashed var(--border-strong); background: var(--surface); color: var(--text-2); font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.cert-chip svg { width: 16px; height: 16px; color: var(--cyan); }

@media (max-width: 920px) { .team-grid, .partner-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .team-grid, .partner-strip { grid-template-columns: 1fr; } }

/* jet-stream band across the regions */
.jetstream-band { position: relative; margin: 4px 0 6px; }
.jetstream-band svg { display: block; width: 100%; height: auto; overflow: visible; }
.js-flow { animation: js-dash 3s linear infinite; }
@keyframes js-dash { to { stroke-dashoffset: -28; } }
.js-dot { fill: currentColor; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 5px currentColor); animation: js-pulse 2.4s ease-in-out infinite; }
@keyframes js-pulse { 0%, 100% { opacity: .5; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.35); } }
.js-plane { color: #e0f2fe; filter: drop-shadow(0 0 6px #67e8f9);
  offset-path: path('M30 70 C90 55 130 48 167 48 C260 48 410 74 500 74 C610 74 760 46 833 46 C900 46 940 60 970 72');
  offset-rotate: auto; offset-distance: 0%; animation: js-fly 9s linear infinite; }
@keyframes js-fly { 0% { offset-distance: 0%; opacity: 0; } 5% { opacity: 1; } 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
@media (max-width: 640px) { .jetstream-band { display: none; } }

/* office location chips with a live location ping */
.offices { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.office-chip { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--rc, var(--cyan)) 35%, var(--border));
  background: color-mix(in srgb, var(--rc, var(--cyan)) 9%, var(--surface));
  color: color-mix(in srgb, var(--rc, var(--cyan)) 68%, #fff);
  font-family: var(--font-display); font-weight: 600; font-size: .84rem; letter-spacing: .01em;
  transition: transform .25s var(--ease), border-color .25s, background .25s; }
.office-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--rc, var(--cyan)) 60%, var(--border)); }
.office-ping { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rc, var(--cyan)); box-shadow: 0 0 6px var(--rc, var(--cyan)); }
.office-ping::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--rc, var(--cyan)); animation: office-ping 2.2s ease-out infinite; }
@keyframes office-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
.offices .office-chip:nth-child(2) .office-ping::after { animation-delay: .5s; }
.offices .office-chip:nth-child(3) .office-ping::after { animation-delay: 1s; }

/* certifications: verified shields + scanning sweep */
.cert-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; overflow: hidden; border-radius: var(--radius-lg); }
.cert-card { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--surface-2), var(--surface)); position: relative; z-index: 1; }
.cert-badge { flex: none; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: var(--cyan);
  background: color-mix(in srgb, var(--cyan) 12%, transparent); border: 1px solid color-mix(in srgb, var(--cyan) 30%, transparent);
  animation: cert-glow 3.4s ease-in-out infinite; }
.cert-badge svg { width: 24px; height: 24px; }
@keyframes cert-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 16px -2px color-mix(in srgb, var(--cyan) 55%, transparent); } }
.cert-check { stroke-dasharray: 13; stroke-dashoffset: 13; animation: cert-draw 4s ease-in-out infinite; }
@keyframes cert-draw { 0% { stroke-dashoffset: 13; } 22%, 86% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 13; } }
.cert-card:nth-child(3) .cert-check { animation-delay: .5s; }
.cert-card:nth-child(4) .cert-check { animation-delay: 1s; }
.cert-name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; }
.cert-desc { display: block; margin-top: 3px; font-size: .82rem; color: var(--muted); line-height: 1.4; }
.cert-scan { position: absolute; top: 0; bottom: 0; width: 150px; left: -150px; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 11%, transparent), transparent);
  animation: cert-scan 5.5s ease-in-out infinite; }
@keyframes cert-scan { 0% { left: -18%; } 55%, 100% { left: 100%; } }

/* technology accreditations marquee */
.vendor-block { margin-top: 24px; text-align: center; }
.vendor-label { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.vendor-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.vendor-track { display: flex; gap: 12px; width: max-content; animation: vendor-scroll 30s linear infinite; }
.vendor-marquee:hover .vendor-track { animation-play-state: paused; }
@keyframes vendor-scroll { to { transform: translateX(-50%); } }
.vendor-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2);
  font-family: var(--font-display); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.vendor-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

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

/* ---------- The end-to-end journey rail ---------- */
.jn-rail { position: relative; }
.jn-steps {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: stretch; gap: 0;
}
.jn-step {
  flex: 1 1 0; min-width: 0;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 20px 24px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, rgba(255, 255, 255, .07));
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--surface);
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.jn-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(130% 110% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%);
  opacity: 0; transition: opacity .35s var(--ease);
}
.jn-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 18px 44px -20px color-mix(in srgb, var(--accent) 70%, transparent); }
.jn-step:hover::before { opacity: 1; }

.jn-num { display: block; color: var(--accent); margin-bottom: 12px; }
.jn-num svg { width: 44px; height: 44px; transition: transform .4s var(--ease); }
.jn-step:hover .jn-num svg { transform: rotate(30deg); }
.jn-step h3 { font-size: 1rem; line-height: 1.3; }
.jn-step p { margin-top: 8px; font-size: .87rem; color: var(--muted); }

/* Decorative: the sequence is already carried by the ordered list. */
.jn-chev { flex: 0 0 34px; display: grid; place-items: center; color: color-mix(in srgb, var(--accent) 60%, transparent); }
.jn-chev svg { width: 20px; height: 20px; animation: jn-nudge 2.6s var(--ease) infinite; }
.jn-chev:nth-of-type(2) svg { animation-delay: .2s; }
.jn-chev:nth-of-type(3) svg { animation-delay: .4s; }
.jn-chev:nth-of-type(4) svg { animation-delay: .6s; }
@keyframes jn-nudge { 0%, 70%, 100% { transform: none; opacity: .6; } 35% { transform: translateX(4px); opacity: 1; } }

.jn-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 26px; border-radius: 16px; overflow: hidden;
  background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, .07));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255, 255, 255, .07));
}
.jn-stat { padding: 22px 24px; background: var(--bg-3); }
.jn-fig { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: #fff; }
.jn-lab { display: block; margin-top: 4px; font-size: .87rem; color: var(--muted); }

@media (max-width: 1080px) {
  .jn-steps { flex-wrap: wrap; gap: 16px; }
  .jn-step { flex: 1 1 260px; }
  .jn-chev { display: none; }
}
@media (max-width: 720px) {
  .jn-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .jn-chev svg { animation: none; }
  .jn-step, .jn-num svg { transition: none; }
  .jn-step:hover { transform: none; }
}

/* ================= Footer connect band ================= */
.footer-connect {
  display: grid;
  grid-template-columns: 1fr 1.55fr 1fr;
  gap: 46px;
  padding-bottom: 44px;
  margin-bottom: 42px;
  border-bottom: 1px solid var(--border);
}
.fc-block { min-width: 0; }
.fc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 13px;
}
.fc-line { width: 22px; height: 2px; border-radius: 2px; display: inline-block;
  background: linear-gradient(90deg, var(--cyan), var(--violet)); }
.fc-head { font-family: var(--font-display); font-size: 1.14rem; color: var(--text); margin-bottom: 12px; }
.fc-desc { color: var(--muted); font-size: .9rem; line-height: 1.6; max-width: 300px; }

/* HQ contact list */
.fc-contact { margin-top: 17px; display: grid; gap: 12px; }
.fc-contact li { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-size: .92rem; }
.fc-contact a { display: flex; align-items: center; gap: 12px; color: var(--text-2); transition: color .2s; }
.fc-contact a:hover { color: var(--cyan); }
.fc-contact em { color: var(--muted-2); font-style: normal; font-size: .8rem; }
.fc-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: rgba(34, 211, 238, .06); color: var(--cyan); }
.fc-ic svg { width: 16px; height: 16px; }
.fc-contact li:nth-child(2) .fc-ic { color: var(--violet); background: rgba(139, 92, 246, .07); }
.fc-contact li:nth-child(3) .fc-ic { color: var(--pink); background: rgba(236, 72, 153, .07); }

/* Locations mini-map */
.fmap { position: relative; width: 100%; aspect-ratio: 1196 / 281; margin: 4px 0 15px;
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(120% 150% at 50% -10%, rgba(139, 92, 246, .10), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .12)); }
.fmap-dots { position: absolute; inset: 12px 16px;
  background: linear-gradient(180deg, rgba(148, 163, 184, .60), rgba(148, 163, 184, .30));
  -webkit-mask: url(../img/world-dots.svg) center / contain no-repeat;
          mask: url(../img/world-dots.svg) center / contain no-repeat; }
.fmap-pins { position: absolute; inset: 12px 16px; overflow: visible; }
.fpin-dot { fill: var(--pc); filter: drop-shadow(0 0 5px var(--pc)); }
.fpin-ping { fill: none; stroke: var(--pc); stroke-width: 1.3;
  transform-box: fill-box; transform-origin: center;
  animation: fmap-ping 3s ease-out infinite; animation-delay: var(--pd); }
@keyframes fmap-ping {
  0%   { transform: scale(.45); opacity: .85; }
  70%  { transform: scale(2.8);  opacity: 0; }
  100% { transform: scale(2.8);  opacity: 0; }
}

/* Location legend */
.fmap-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.fmap-list li { display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--text-2); }
.loc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rc);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .04), 0 0 9px var(--rc);
  animation: loc-pulse 3s ease-in-out infinite; }
@keyframes loc-pulse { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }

/* Social */
.fc-social { display: flex; gap: 12px; margin-top: 18px; }
.fsoc { position: relative; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03);
  color: var(--text-2); overflow: hidden;
  transition: transform .25s, color .25s, border-color .25s, box-shadow .25s; }
.fsoc svg { width: 19px; height: 19px; position: relative; z-index: 1; }
.fsoc::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s;
  background: linear-gradient(135deg, var(--cyan), var(--violet), var(--pink)); }
.fsoc:hover { color: #fff; transform: translateY(-3px); border-color: transparent;
  box-shadow: 0 12px 26px rgba(139, 92, 246, .35); }
.fsoc:hover::before { opacity: 1; }

/* Sitemap heading accents */
.footer-top > div:nth-child(n+2) h5 { position: relative; padding-top: 13px; }
.footer-top > div:nth-child(n+2) h5::before { content: ""; position: absolute; top: 0; left: 0;
  width: 20px; height: 3px; border-radius: 3px; background: var(--muted); }
.footer-top > div:nth-child(2) h5::before { background: var(--cyan); }
.footer-top > div:nth-child(3) h5::before { background: var(--violet); }
.footer-top > div:nth-child(4) h5::before { background: var(--pink); }
.footer-top > div:nth-child(5) h5::before { background: var(--teal); }
.footer-top > div:nth-child(2) ul a:hover { color: var(--cyan); }
.footer-top > div:nth-child(3) ul a:hover { color: var(--violet); }
.footer-top > div:nth-child(4) ul a:hover { color: var(--pink); }
.footer-top > div:nth-child(5) ul a:hover { color: var(--teal); }

@media (max-width: 980px) {
  .footer-connect { grid-template-columns: 1fr; gap: 36px; }
  .fc-desc { max-width: none; }
  .fc-locations { max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .fpin-ping, .loc-dot { animation: none; }
  .fsoc { transition: none; }
}

/* ================= HexaInt, intelligence fusion ================= */
/* hero mesh animation */
.intel-mesh .int-stream { stroke: var(--sc); stroke-opacity: .55; stroke-width: 1.5;
  stroke-dasharray: 5 8; animation: int-flow 1.5s linear infinite; animation-delay: var(--sd); }
@keyframes int-flow { to { stroke-dashoffset: -13; } }
.intel-mesh .int-pulse { transform-box: fill-box; transform-origin: center;
  animation: int-arrive 1.5s ease-out infinite; animation-delay: var(--sd); }
@keyframes int-arrive { 0% { transform: scale(.4); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.intel-mesh .int-ring { animation: int-spin 46s linear infinite; }
.intel-mesh .int-ring.rev { animation-duration: 30s; animation-direction: reverse; }
@keyframes int-spin { to { transform: rotate(360deg); } }
.intel-mesh .int-corepulse { transform-box: fill-box; transform-origin: center;
  animation: int-core 3.6s ease-in-out infinite; }
@keyframes int-core { 0%, 100% { transform: scale(.9); opacity: .5; } 50% { transform: scale(1.12); opacity: 1; } }
.intel-mesh .int-outflow { animation: int-outflow 1.3s linear infinite; }
@keyframes int-outflow { to { stroke-dashoffset: -11; } }
.intel-mesh .int-src path { transition: filter .25s, transform .25s; transform-box: fill-box; transform-origin: center; }
.intel-mesh .int-src:hover path { filter: drop-shadow(0 0 7px var(--sc)); }

/* nine-source cards */
.int-chip { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  margin-bottom: 16px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  background: color-mix(in srgb, var(--sc) 12%, transparent);
  transition: transform .25s, box-shadow .25s; }
.int-chip svg { width: 24px; height: 24px; }
.int-sources .card { position: relative; overflow: hidden; }
.int-sources .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--sc); opacity: .85; }
.int-sources .card:hover .int-chip { transform: translateY(-2px);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 30%, transparent); }

/* mesh flow band */
.int-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.int-step { position: relative; border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); padding: 26px 22px; }
.int-step .int-ic { color: var(--pink); display: inline-flex; }
.int-step .int-ic svg { width: 26px; height: 26px; }
.int-step .n { display: block; margin: 12px 0 4px; font-family: var(--font-display);
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pink); }
.int-step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.int-step p { color: var(--muted); font-size: .9rem; line-height: 1.55; }
.int-flow .int-step:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%;
  width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
  border-left: 9px solid var(--pink); z-index: 2;
  animation: int-arrow 1.8s ease-in-out infinite; }
@keyframes int-arrow { 0%, 100% { opacity: .35; transform: translateY(-50%); } 50% { opacity: .95; transform: translateY(-50%) translateX(3px); } }

/* HexaView intelligence panel */
.hv-panel { border: 1px solid var(--border-strong); border-radius: 16px; overflow: hidden;
  background: linear-gradient(180deg, rgba(236, 72, 153, .05), rgba(11, 19, 48, .55));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.hv-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.hv-d { width: 10px; height: 10px; border-radius: 50%; background: var(--muted-2); opacity: .5; }
.hv-title { margin-left: 8px; font-family: var(--font-display); font-size: .84rem; color: var(--text-2); }
.hv-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display);
  font-size: .62rem; letter-spacing: .14em; color: #4ade80; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(74, 222, 128, .4); }
.hv-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: loc-pulse 2s ease-in-out infinite; }
.hv-rows { padding: 10px; display: grid; gap: 7px; }
.hv-row { display: flex; align-items: center; gap: 13px; padding: 13px 14px; border-radius: 12px;
  background: rgba(255, 255, 255, .02); border: 1px solid var(--border); transition: transform .2s, border-color .2s; }
.hv-row:hover { transform: translateX(3px); border-color: var(--border-strong); }
.hv-sev { flex: none; width: 10px; height: 10px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 9px currentColor; }
.hv-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.hv-name { font-size: .92rem; color: var(--text); line-height: 1.3; }
.hv-src { align-self: flex-start; font-family: var(--font-display); font-size: .58rem; letter-spacing: .1em;
  padding: 2px 8px; border-radius: 6px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent);
  background: color-mix(in srgb, var(--sc) 12%, transparent); }
.hv-score { flex: none; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--text-2); }
.hv-row.crit .hv-score { color: #fca5a5; }

@media (max-width: 860px) {
  .int-flow { grid-template-columns: 1fr 1fr; }
  .int-flow .int-step:nth-child(2n)::after { display: none; }
}
@media (max-width: 560px) {
  .int-flow { grid-template-columns: 1fr; }
  .int-flow .int-step::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intel-mesh .int-stream, .intel-mesh .int-pulse, .intel-mesh .int-ring,
  .intel-mesh .int-corepulse, .intel-mesh .int-outflow, .int-flow .int-step::after { animation: none; }
}

/* ================= HexaComply, continuous compliance loop ================= */
.loop-wrap { display: grid; grid-template-columns: 1fr minmax(300px, 440px) 1fr; gap: clamp(16px, 2.4vw, 40px); align-items: center; margin-bottom: 30px; }
.loop-center { min-width: 0; }
.loop-vis { width: 100%; height: auto; display: block; }
.loop-side { display: flex; flex-direction: column; justify-content: center; gap: clamp(20px, 3.2vh, 40px); }

/* loop animations */
.loop-marker { animation: loop-spin 15s linear infinite; }
@keyframes loop-spin { to { transform: rotate(360deg); } }
.loop-corepulse { transform-box: fill-box; transform-origin: center; animation: loop-core 3.8s ease-in-out infinite; }
@keyframes loop-core { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.14); opacity: .85; } }
.loop-node .loop-halo { transform-box: fill-box; transform-origin: center; animation: loop-halo 3.2s ease-in-out infinite; animation-delay: var(--nd); }
@keyframes loop-halo { 0%, 100% { transform: scale(.82); opacity: .18; } 50% { transform: scale(1.16); opacity: .7; } }
.loop-live circle { animation: loop-blink 1.7s ease-in-out infinite; }
@keyframes loop-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.loop-node { transition: transform .25s; transform-box: fill-box; }
.loop-node:hover circle:nth-of-type(2) { filter: drop-shadow(0 0 7px var(--nc)); }

/* old vs new comparison */
.loop-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 26px; }
.lc-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 18px 16px; background: var(--surface); }
.lc-tag { font-family: var(--font-display); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.lc-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.14rem; margin: 4px 0 12px; }
.lc-card ul { display: grid; gap: 9px; }
.lc-card li { position: relative; padding-left: 22px; font-size: .86rem; color: var(--text-2); line-height: 1.45; }
.lc-card li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.lc-old { border-color: color-mix(in srgb, var(--rose) 26%, transparent); background: color-mix(in srgb, var(--rose) 5%, transparent); }
.lc-old .lc-title { color: var(--rose); }
.lc-old li::before { content: "\00d7"; color: var(--rose); font-size: 1.05rem; line-height: 1; top: 1px; }
.lc-new { border-color: color-mix(in srgb, var(--lime) 30%, transparent); background: color-mix(in srgb, var(--lime) 6%, transparent); }
.lc-new .lc-title { color: var(--lime); }
.lc-new li::before { content: "\2713"; color: var(--lime); }

/* the six stages, flanking the loop */
.loop-stage { display: flex; gap: 13px; align-items: flex-start; }
.loop-left .loop-stage { flex-direction: row-reverse; text-align: right; }
.ls-num { flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 45%, transparent);
  background: color-mix(in srgb, var(--sc) 13%, transparent); }
.ls-body { min-width: 0; }
.ls-name { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; color: var(--text); margin-bottom: 3px; }
.loop-stage p { color: var(--muted); font-size: .88rem; line-height: 1.5; }
.loop-restart { display: flex; align-items: center; justify-content: center; gap: 10px; text-align: center;
  margin: 10px auto 52px; max-width: 620px; color: var(--text-2); font-size: .92rem; }
.loop-restart svg { flex: none; width: 20px; height: 20px; color: var(--lime); position: relative; top: 3px; animation: loop-spin 9s linear infinite; }
.loop-compare { max-width: 900px; margin-inline: auto; }

@media (max-width: 940px) {
  .loop-wrap { grid-template-columns: 1fr; gap: 6px; }
  .loop-center { order: -1; max-width: 440px; margin: 0 auto 8px; }
  .loop-side { gap: 20px; }
  .loop-left .loop-stage { flex-direction: row; text-align: left; }
}
@media (max-width: 480px) { .loop-compare { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .loop-marker, .loop-corepulse, .loop-node .loop-halo, .loop-live circle, .loop-restart svg { animation: none; }
}

/* ================= HexaComply, compliance hub hero ================= */
.hc-hub { width: 100%; height: auto; display: block; }
.hc-hub .hcp-link { stroke: var(--lc); stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 5 8;
  animation: hc-flow 1.6s linear infinite; animation-delay: var(--ld); }
@keyframes hc-flow { to { stroke-dashoffset: -13; } }
.hc-hub .hcp-pulse { transform-box: fill-box; transform-origin: center;
  animation: hc-arrive 1.6s ease-out infinite; animation-delay: var(--ld); }
@keyframes hc-arrive { 0% { transform: scale(.4); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.hc-hub .hc-ring { animation: hc-spin 50s linear infinite; }
.hc-hub .hc-ring.rev { animation-duration: 34s; animation-direction: reverse; }
@keyframes hc-spin { to { transform: rotate(360deg); } }
.hc-hub .hc-sweep { animation: hc-spin 9s linear infinite; }
.hc-hub .hc-corepulse { transform-box: fill-box; transform-origin: center; animation: hc-core 3.8s ease-in-out infinite; }
@keyframes hc-core { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.12); opacity: .85; } }
.hc-hub .hc-live circle { animation: hc-blink 1.7s ease-in-out infinite; }
@keyframes hc-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.hc-hub .hcp-pill { animation: hc-pill 4.5s ease-in-out infinite; animation-delay: var(--pd); }
@keyframes hc-pill { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
.hc-hub .hcp-pill:hover rect { filter: drop-shadow(0 0 6px var(--pc)); }
@media (prefers-reduced-motion: reduce) {
  .hc-hub .hcp-link, .hc-hub .hcp-pulse, .hc-hub .hc-ring, .hc-hub .hc-sweep,
  .hc-hub .hc-corepulse, .hc-hub .hc-live circle, .hc-hub .hcp-pill { animation: none; }
}

/* ================= HexaComply, features 2-4 animated ================= */
/* Feature 2: coverage matrix */
.cov-matrix { width: 100%; height: auto; }
.cov-chk { opacity: 0; animation: cov-in .5s ease forwards; animation-delay: var(--d); }
@keyframes cov-in { to { opacity: 1; } }
.cov-scan { animation: cov-scan 4.5s ease-in-out infinite; }
@keyframes cov-scan { 0% { transform: translateX(0); } 50% { transform: translateX(232px); } 100% { transform: translateX(0); } }
.cov-rowglow { animation: cov-glow 3s ease-in-out infinite; }
@keyframes cov-glow { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Feature 3: supplier risk board */
.tp-board { width: 100%; height: auto; }
.tp-live circle { animation: tp-blink 1.7s ease-in-out infinite; }
@keyframes tp-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.tp-alert rect:first-of-type { animation: tp-pulse 2s ease-in-out infinite; }
@keyframes tp-pulse { 0%, 100% { stroke-opacity: .4; } 50% { stroke-opacity: .95; } }

/* Feature 4: evidence -> report builder */
.rb-vis { width: 100%; height: auto; }
.rb-flow { animation: rb-flow 1.6s linear infinite; animation-delay: var(--ld); }
@keyframes rb-flow { to { stroke-dashoffset: -12; } }
.rb-line { transform-box: fill-box; transform-origin: left; animation: rb-line 5.5s ease-in-out infinite; animation-delay: var(--d); }
@keyframes rb-line { 0%, 12% { transform: scaleX(0); opacity: .3; } 32%, 100% { transform: scaleX(1); opacity: 1; } }
.rb-prog { transform-box: fill-box; transform-origin: left; animation: rb-prog 5.5s ease-in-out infinite; }
@keyframes rb-prog { 0% { transform: scaleX(0); } 68%, 100% { transform: scaleX(1); } }
.rb-ready { opacity: 0; animation: rb-ready 5.5s ease-in-out infinite; }
@keyframes rb-ready { 0%, 62% { opacity: 0; } 72%, 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cov-chk { opacity: 1; animation: none; }
  .cov-scan, .cov-rowglow, .tp-live circle, .tp-alert rect:first-of-type,
  .rb-flow, .rb-line, .rb-prog { animation: none; }
  .rb-line { transform: scaleX(1); opacity: 1; }
  .rb-prog { transform: scaleX(1); }
  .rb-ready { opacity: 1; animation: none; }
}

/* ================= HexaComply, TPRM in HexaView cockpit ================= */
.tv-cockpit { width: 100%; height: auto; }
.tv-cockpit .tv-live circle { animation: tv-blink 1.7s ease-in-out infinite; }
@keyframes tv-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.tv-cockpit .tv-q-bar { transform-box: fill-box; transform-origin: left; animation: tv-qbar 5.5s ease-in-out infinite; }
@keyframes tv-qbar { 0% { transform: scaleX(0); } 65%, 100% { transform: scaleX(.8); } }
.tv-cockpit .tv-task-chk { opacity: 0; animation: tv-task 4.5s ease-in-out infinite; }
@keyframes tv-task { 0%, 55% { opacity: 0; } 68%, 100% { opacity: 1; } }
.tv-cockpit .tv-radar { animation: tv-radar 4.5s linear infinite; }
@keyframes tv-radar { to { transform: rotate(360deg); } }
.tv-cockpit .tv-ping { transform-box: fill-box; transform-origin: center; animation: tv-ping 2.2s ease-out infinite; }
@keyframes tv-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tv-cockpit .tv-live circle, .tv-cockpit .tv-radar, .tv-cockpit .tv-ping { animation: none; }
  .tv-cockpit .tv-q-bar { animation: none; transform: scaleX(.8); }
  .tv-cockpit .tv-task-chk { animation: none; opacity: 1; }
}

/* ================= HexaStrike, offensive security console ================= */
/* hero radar */
.hs-radar { width: 100%; height: auto; display: block; }
.hs-radar .hs-sweep { animation: hs-spin 5s linear infinite; }
@keyframes hs-spin { to { transform: rotate(360deg); } }
.hs-radar .hs-corepulse { transform-box: fill-box; transform-origin: center; animation: hs-core 3.4s ease-in-out infinite; }
@keyframes hs-core { 0%, 100% { transform: scale(.9); opacity: .4; } 50% { transform: scale(1.12); opacity: .8; } }
.hs-radar .hs-find-ping { transform-box: fill-box; transform-origin: center; animation: hs-ping 2.2s ease-out infinite; animation-delay: var(--fd); }
@keyframes hs-ping { 0% { transform: scale(.5); opacity: .9; } 80%, 100% { transform: scale(2.6); opacity: 0; } }
.hs-radar .hs-live circle, .hs-console .hs-live circle, .hs-timeline .hs-live circle { animation: hs-blink 1.6s ease-in-out infinite; }
@keyframes hs-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* timeline */
.hs-timeline-wrap { max-width: 720px; margin: 0 auto; border: 1px solid var(--border); border-radius: 16px;
  background: linear-gradient(180deg, rgba(244,63,94,.04), rgba(11,19,48,.4)); padding: 18px 22px; }
.hs-timeline { width: 100%; height: auto; display: block; }
.hs-timeline .hs-scan-a { animation: hs-scanA 9s ease-in-out infinite; }
@keyframes hs-scanA { 0% { transform: translateX(0); opacity: .9; } 11% { transform: translateX(434px); opacity: .9; } 13% { opacity: 0; } 100% { transform: translateX(434px); opacity: 0; } }
.hs-timeline .an-hit { opacity: 0; animation: hs-anhit 9s ease-in-out infinite; animation-delay: var(--ad); }
@keyframes hs-anhit { 0%, 2% { opacity: 0; } 7% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }
.hs-timeline .hs-scan-b { animation: hs-scanB 2.4s linear infinite; }
@keyframes hs-scanB { 0% { transform: translateX(0); } 100% { transform: translateX(434px); } }
.hs-timeline .co-hit { opacity: 0; animation: hs-cohit 2.4s ease-in-out infinite; animation-delay: var(--cd); }
@keyframes hs-cohit { 0% { opacity: 0; } 12% { opacity: 1; } 60% { opacity: 1; } 82%, 100% { opacity: 0; } }
.hs-timeline .co-ping { opacity: 0; transform-box: fill-box; transform-origin: center; animation: hs-coping 2.4s ease-out infinite; animation-delay: var(--cd); }
@keyframes hs-coping { 0%, 8% { opacity: 0; transform: scale(1); } 14% { opacity: .8; } 42% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; } }

/* console */
.hs-console { width: 100%; height: auto; display: block; }
.hs-console .hs-row-new { animation: hs-rownew 3s ease-in-out infinite; }
@keyframes hs-rownew { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }

/* service / guardrail chip accents (reuses .int-chip + .int-sources rules) */
.hs-services .card::before { background: var(--sc); }

/* engagement flow */
.hs-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hs-step { position: relative; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 24px 18px; }
.hs-step-ic { color: var(--rose); display: inline-flex; }
.hs-step-ic svg { width: 24px; height: 24px; }
.hs-step-n { display: block; margin: 12px 0 4px; font-family: var(--font-display); font-size: .7rem; letter-spacing: .16em; color: var(--rose); }
.hs-step h3 { font-size: 1.02rem; margin-bottom: 7px; }
.hs-step p { color: var(--muted); font-size: .86rem; line-height: 1.5; }
.hs-flow .hs-step:not(:last-child)::after { content: ""; position: absolute; right: -13px; top: 50%; z-index: 2;
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 8px solid var(--rose);
  animation: hs-arrow 1.8s ease-in-out infinite; }
@keyframes hs-arrow { 0%, 100% { opacity: .35; transform: translateY(-50%); } 50% { opacity: .95; transform: translateY(-50%) translateX(3px); } }

@media (max-width: 900px) {
  .hs-flow { grid-template-columns: 1fr 1fr; }
  .hs-flow .hs-step:not(:last-child)::after { display: none; }
}
@media (max-width: 520px) { .hs-flow { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .hs-radar .hs-sweep, .hs-radar .hs-corepulse, .hs-radar .hs-find-ping,
  .hs-live circle, .hs-console .hs-row-new, .hs-flow .hs-step::after { animation: none; }
  .hs-timeline .hs-scan-a, .hs-timeline .hs-scan-b, .hs-timeline .co-ping { animation: none; opacity: 0; }
  .hs-timeline .an-hit, .hs-timeline .co-hit { animation: none; opacity: 1; }
}

/* ================= HexaView, single pane of glass ================= */
/* hero console */
.vw-hero { width: 100%; height: auto; display: block; }
.vw-hero .vw-idx-arc { stroke-dasharray: var(--len) var(--perim); stroke-dashoffset: var(--len); animation: vw-draw 2s ease-out forwards; }
@keyframes vw-draw { to { stroke-dashoffset: 0; } }
.vw-hero .vw-ring-arc { stroke-dasharray: var(--len) var(--cc); stroke-dashoffset: var(--len); animation: vw-draw2 1.4s ease-out forwards; animation-delay: var(--rd); }
@keyframes vw-draw2 { to { stroke-dashoffset: 0; } }
.vw-hero .vw-scan { animation: vw-scan 4.5s ease-in-out infinite; }
@keyframes vw-scan { 0% { transform: translateX(0); } 50% { transform: translateX(390px); } 100% { transform: translateX(0); } }
.vw-live circle, .vw-g2-live circle { animation: vw-blink 1.6s ease-in-out infinite; }
@keyframes vw-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* fragmentation -> single pane */
.vw-fragment-wrap { max-width: 760px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(120deg, rgba(244,63,94,.04), rgba(45,212,191,.05)); padding: 18px 24px; }
.vw-fragment { width: 100%; height: auto; display: block; }
.vw-fragment .vw-alert { animation: vw-alert 1.7s ease-in-out infinite; animation-delay: var(--adl); }
@keyframes vw-alert { 0%, 100% { opacity: .22; } 50% { opacity: 1; } }
.vw-fragment .vw-stream { animation: vw-stream 1.7s linear infinite; animation-delay: var(--sd); }
@keyframes vw-stream { to { stroke-dashoffset: -11; } }
.vw-fragment .vw-spark { stroke-dasharray: 120; stroke-dashoffset: 120; animation: vw-spark 3.4s ease-out infinite; }
@keyframes vw-spark { 0% { stroke-dashoffset: 120; } 55%, 100% { stroke-dashoffset: 0; } }
.vw-fragment .vw-pane-dots circle { animation: vw-blink 2s ease-in-out infinite; }

/* big resilience gauge */
.vw-gauge { width: 100%; height: auto; display: block; max-width: 340px; margin: 0 auto; }
.vw-gauge .vw-g2-arc { stroke-dasharray: var(--len) var(--perim); stroke-dashoffset: var(--len); animation: vw-draw 2.2s ease-out forwards; }
.vw-gauge .vw-g2-ring { animation: vw-gspin 42s linear infinite; transform-origin: 150px 150px; }
@keyframes vw-gspin { to { transform: rotate(360deg); } }

/* resilience dimensions list */
.vw-dims { display: grid; gap: 13px; margin-top: 8px; }
.vw-dim { display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 14px; }
.vw-dim-label { font-size: .9rem; color: var(--text-2); }
.vw-dim-track { height: 8px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.vw-dim-fill { display: block; height: 100%; width: var(--w); border-radius: 4px; background: var(--dc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--dc) 60%, transparent);
  transform-origin: left; animation: vw-dimfill 1.6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes vw-dimfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vw-dim-score { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--text); text-align: right; }

@media (max-width: 560px) {
  .vw-dim { grid-template-columns: 110px 1fr 30px; gap: 10px; }
  .vw-dim-label { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) {
  .vw-hero .vw-idx-arc, .vw-hero .vw-ring-arc, .vw-gauge .vw-g2-arc { animation: none; stroke-dashoffset: 0; }
  .vw-hero .vw-scan, .vw-live circle, .vw-g2-live circle, .vw-gauge .vw-g2-ring,
  .vw-fragment .vw-alert, .vw-fragment .vw-stream, .vw-fragment .vw-spark, .vw-fragment .vw-pane-dots circle { animation: none; }
  .vw-dim-fill { animation: none; transform: scaleX(1); }
}

/* ---------- HexaView row animations ---------- */
.hv-spark { stroke-dasharray: 170; stroke-dashoffset: 170; animation: hv-spark 3.4s ease-in-out infinite; }
@keyframes hv-spark { 0% { stroke-dashoffset: 170; } 55%, 100% { stroke-dashoffset: 0; } }
.hv-bars line { animation: hv-bars 2.6s ease-in-out infinite; }
.hv-bars line:nth-child(2) { animation-delay: .3s; }
.hv-bars line:nth-child(3) { animation-delay: .6s; }
@keyframes hv-bars { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.hv-flowg path { stroke-dasharray: 5 6; animation: hv-flow 1.7s linear infinite; }
@keyframes hv-flow { to { stroke-dashoffset: -11; } }
.hv-flowg2 line { animation: hv-flow2 1.5s linear infinite; }
@keyframes hv-flow2 { to { stroke-dashoffset: -16; } }
.hv-arrow { transform-box: fill-box; transform-origin: center; animation: hv-arrow 1.7s ease-in-out infinite; }
@keyframes hv-arrow { 0%, 100% { transform: translateX(0); opacity: .7; } 50% { transform: translateX(4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .hv-spark, .hv-bars line, .hv-flowg path, .hv-flowg2 line, .hv-arrow { animation: none; }
  .hv-spark { stroke-dashoffset: 0; }
}

/* ================= HexaSOC, alert funnel + hero ================= */
.soc .sc-link { stroke-dasharray: 5 6; animation: soc-flow 1.7s linear infinite; }
@keyframes soc-flow { to { stroke-dashoffset: -11; } }
.soc-alert { animation: soc-alert 1.5s ease-in-out infinite; }
@keyframes soc-alert { 0%, 100% { stroke-opacity: .35; } 50% { stroke-opacity: 1; } }
.soc-funnel-wrap { max-width: 620px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(139,92,246,.05), rgba(11,19,48,.4)); padding: 14px 22px; }
.soc-funnel { width: 100%; height: auto; display: block; }
.soc-funnel .fn-alert { opacity: 0; animation: soc-fall 2.2s linear infinite; animation-delay: var(--fd); }
@keyframes soc-fall { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 74% { opacity: 1; } 100% { transform: translateY(180px); opacity: 0; } }
.soc-funnel .fn-scan { animation: soc-fscan 3s ease-in-out infinite; }
@keyframes soc-fscan { 0% { transform: translateY(0); opacity: .7; } 100% { transform: translateY(128px); opacity: 0; } }
.soc-funnel .fn-out { opacity: 0; transform-box: fill-box; transform-origin: center; animation: soc-fout 2.2s ease-out infinite; animation-delay: var(--od); }
@keyframes soc-fout { 0% { transform: scale(0); opacity: 0; } 30% { transform: scale(1); opacity: 1; } 92%, 100% { opacity: 1; } }
.soc-funnel .fn-esc { animation: soc-fesc 1.4s linear infinite; }
@keyframes soc-fesc { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) {
  .soc .sc-link, .soc-alert, .soc-funnel .fn-alert, .soc-funnel .fn-scan, .soc-funnel .fn-out, .soc-funnel .fn-esc { animation: none; }
  .soc-funnel .fn-alert, .soc-funnel .fn-out { opacity: 1; }
}

/* ================= HexaOT, asset discovery + hero ================= */
.ot .sc-link { stroke-dasharray: 5 6; animation: ot-flow 1.7s linear infinite; }
@keyframes ot-flow { to { stroke-dashoffset: -11; } }
.ot-discovery-wrap { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(245,158,11,.05), rgba(11,19,48,.4)); padding: 14px 22px; }
.ot-discovery { width: 100%; height: auto; display: block; }
.ot-discovery .ot-node { opacity: 0; animation: ot-lit 4.5s ease-in-out infinite; animation-delay: var(--dd); }
@keyframes ot-lit { 0%, 4% { opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; } }
.ot-discovery .ot-node-ping { transform-box: fill-box; transform-origin: center; animation: ot-png 4.5s ease-out infinite; animation-delay: var(--dd); }
@keyframes ot-png { 0%, 4% { opacity: 0; transform: scale(.6); } 12% { opacity: .8; } 28% { opacity: 0; transform: scale(1.8); } 100% { opacity: 0; } }
.ot-discovery .ot-scan { animation: ot-scan 4.5s ease-in-out infinite; }
@keyframes ot-scan { 0% { transform: translateX(0); } 75% { transform: translateX(380px); } 100% { transform: translateX(380px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ot .sc-link, .ot-discovery .ot-node, .ot-discovery .ot-node-ping, .ot-discovery .ot-scan { animation: none; }
  .ot-discovery .ot-node { opacity: 1; }
}

/* ================= HexaCustody, chain of custody ================= */
.custody2 .sc-link { stroke-dasharray: 5 6; animation: cs-flow 1.7s linear infinite; }
@keyframes cs-flow { to { stroke-dashoffset: -11; } }
.cs-chain-wrap { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(59,130,246,.05), rgba(11,19,48,.4)); padding: 14px 22px; }
.cs-chain { width: 100%; height: auto; display: block; }
.cs-chain .cs-link { opacity: .45; animation: cs-flow 1.7s linear infinite; }
/* sealed progress line — the chain being forged */
.cs-chain .cs-seal-line { stroke-dasharray: 360; stroke-dashoffset: 360; opacity: 0;
  filter: drop-shadow(0 0 5px rgba(34,211,238,.65)); animation: cs-sealline 5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cs-sealline { 0% { stroke-dashoffset: 360; opacity: 0; } 6% { opacity: 1; } 25% { stroke-dashoffset: 240; }
  50% { stroke-dashoffset: 120; } 75% { stroke-dashoffset: 0; } 90% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
/* verification ring pulse as the asset arrives */
.cs-chain .cs-vring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cs-vring 5s ease-out infinite; animation-delay: var(--vd); }
@keyframes cs-vring { 0% { opacity: .6; transform: scale(.5); } 10% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; transform: scale(1.55); } }
/* seal stamp with a bounce */
.cs-chain .cs-seal { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cs-seal 5s ease-out infinite; animation-delay: var(--sd); }
@keyframes cs-seal { 0%, 4% { opacity: 0; transform: scale(0); } 8% { opacity: 1; transform: scale(1.35); } 12% { transform: scale(1); } 90% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* asset rides the leading edge, fading in/out at the ends */
.cs-chain .cs-asset { animation: cs-travel 5s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes cs-travel { 0% { transform: translateX(0); opacity: 0; } 5% { opacity: 1; } 25% { transform: translateX(120px); } 50% { transform: translateX(240px); } 75% { transform: translateX(360px); } 88% { transform: translateX(360px); opacity: 1; } 100% { transform: translateX(360px); opacity: 0; } }
.cs-chain .cs-asset-halo { transform-box: fill-box; transform-origin: center; animation: cs-halo 1.5s ease-in-out infinite; }
@keyframes cs-halo { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: .45; transform: scale(1.15); } }
/* tamper attempt, dramatically blocked */
.cs-chain .cs-tamper, .cs-chain .cs-tamper-lbl { opacity: 0; animation: cs-tamper 5s ease-in-out infinite; }
@keyframes cs-tamper { 0%, 36% { opacity: 0; } 42% { opacity: 1; } 58% { opacity: 1; } 64%, 100% { opacity: 0; } }
.cs-chain .cs-tamper-ring { transform-box: fill-box; transform-origin: center; animation: cs-tamperring 5s ease-out infinite; }
@keyframes cs-tamperring { 0%, 38% { transform: scale(.5); } 44% { transform: scale(1.18); } 49% { transform: scale(.94); } 58% { transform: scale(1); } 64%, 100% { transform: scale(1); } }
.cs-chain .cs-tamper-flash { transform-box: fill-box; transform-origin: center; animation: cs-flash 5s ease-out infinite; }
@keyframes cs-flash { 0%, 40% { opacity: 0; transform: scale(.6); } 44% { opacity: .5; transform: scale(1.5); } 54% { opacity: 0; transform: scale(2); } 100% { opacity: 0; } }

/* ================= HexaMatrix, coverage grid ================= */
.matrix .sc-link { stroke-dasharray: 5 6; animation: mx-flow 1.7s linear infinite; }
@keyframes mx-flow { to { stroke-dashoffset: -11; } }
.mx-grid-wrap { max-width: 640px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(249,115,22,.05), rgba(11,19,48,.4)); padding: 16px 22px; }
.mx-grid { width: 100%; height: auto; display: block; }
.mx-grid .mx-cell, .mx-grid .mx-chk, .mx-grid .mx-gap { opacity: 0; animation: mx-fill 6.5s ease-out infinite; animation-delay: var(--md); }
@keyframes mx-fill { 0%, 3% { opacity: 0; } 10% { opacity: 1; } 94% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .custody2 .sc-link, .cs-chain .cs-link, .cs-chain .cs-seal, .cs-chain .cs-asset, .cs-chain .cs-tamper, .cs-chain .cs-tamper-lbl,
  .cs-chain .cs-seal-line, .cs-chain .cs-vring, .cs-chain .cs-asset-halo, .cs-chain .cs-tamper-ring, .cs-chain .cs-tamper-flash,
  .matrix .sc-link, .mx-grid .mx-cell, .mx-grid .mx-chk, .mx-grid .mx-gap { animation: none; }
  .cs-chain .cs-seal, .cs-chain .cs-tamper-lbl, .mx-grid .mx-cell, .mx-grid .mx-chk, .mx-grid .mx-gap { opacity: 1; }
  .cs-chain .cs-seal-line { opacity: 1; stroke-dashoffset: 0; } .cs-chain .cs-vring, .cs-chain .cs-tamper-flash { opacity: 0; }
}

/* ================= HexaView feature-row visuals (v2) ================= */
.hv-console2, .hv-tenant, .hv-rbac, .hv-wl { width: 100%; height: auto; display: block; }
/* row 1, unified console */
.hv-console2 .u-dot, .hv-console2 .hv-live2 circle { animation: hvu-blink 1.7s ease-in-out infinite; animation-delay: var(--ud, 0s); }
@keyframes hvu-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.hv-console2 .u-scan { animation: hvu-scan 5.5s ease-in-out infinite; }
@keyframes hvu-scan { 0% { transform: translateX(0); } 50% { transform: translateX(254px); } 100% { transform: translateX(0); } }
/* row 2, multi-tenant switcher (synced selector + highlight + pulse) */
.hv-tenant .t-name, .hv-tenant .t-hl { opacity: 0; animation: hvt-cyc 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes hvt-cyc { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
.hv-tenant .t-pulse { opacity: 0; animation: hvt-pulse 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes hvt-pulse { 0% { transform: translate(0, 0); opacity: 0; } 2% { opacity: 1; } 22% { transform: translate(var(--tx), 80px); opacity: 1; } 28% { transform: translate(var(--tx), 80px); opacity: 0; } 100% { opacity: 0; } }
/* row 3, rbac matrix */
.hv-rbac .r-cell { opacity: 0; animation: hvr-cell .8s ease-out both; animation-delay: var(--rd); }
@keyframes hvr-cell { to { opacity: 1; } }
.hv-rbac .r-log { animation: hvr-log 4.5s ease-in-out infinite; }
@keyframes hvr-log { 0%, 18% { opacity: 0; } 30%, 82% { opacity: 1; } 96%, 100% { opacity: 0; } }
/* row 4, white-label re-brand cycle (Acme -> Northstar -> CyberGuard) */
.hv-wl .wl-brand, .hv-wl .wl-domain { opacity: 0; animation: hvt-cyc 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
.hv-wl .wl-accent { stroke: #2dd4bf; animation: hvwl-accent 6s ease-in-out infinite; }
@keyframes hvwl-accent { 0%, 28% { stroke: #2dd4bf; } 33%, 61% { stroke: #8b5cf6; } 66%, 94% { stroke: #f59e0b; } 100% { stroke: #2dd4bf; } }
.hv-wl .wl-accent-f { fill: #2dd4bf; animation: hvwl-accentf 6s ease-in-out infinite; }
@keyframes hvwl-accentf { 0%, 28% { fill: #2dd4bf; } 33%, 61% { fill: #8b5cf6; } 66%, 94% { fill: #f59e0b; } 100% { fill: #2dd4bf; } }
@media (prefers-reduced-motion: reduce) {
  .hv-console2 .u-dot, .hv-console2 .hv-live2 circle, .hv-console2 .u-scan,
  .hv-tenant .t-name, .hv-tenant .t-hl, .hv-tenant .t-pulse,
  .hv-rbac .r-cell, .hv-rbac .r-log,
  .hv-wl .wl-brand, .hv-wl .wl-domain, .hv-wl .wl-accent, .hv-wl .wl-accent-f { animation: none; }
  .hv-rbac .r-cell, .hv-rbac .r-log { opacity: 1; }
  .hv-tenant .t-name[style*="--i:0"], .hv-tenant .t-hl[style*="--i:0"],
  .hv-wl .wl-brand[style*="--i:0"], .hv-wl .wl-domain[style*="--i:0"] { opacity: 1; }
  .hv-wl .wl-arrow { stroke-dashoffset: 0; }
}

/* ================= HexaSOC hero, agentic SOC in action ================= */
.soc-hero { width: 100%; height: auto; display: block; }
.soc-hero .soc-sig { animation: soch-sig 1.7s linear infinite; animation-delay: var(--sd); }
@keyframes soch-sig { to { stroke-dashoffset: -10; } }
.soc-hero .soc-agt-halo { transform-box: fill-box; transform-origin: center; animation: soch-agt 3.2s ease-in-out infinite; animation-delay: var(--ad); }
@keyframes soch-agt { 0%, 100% { opacity: .2; transform: scale(.85); } 50% { opacity: .7; transform: scale(1.12); } }
.soc-hero .soc-agt-alert path[stroke="#f43f5e"] { animation: soch-alf 4.5s ease-in-out infinite; }
@keyframes soch-alf { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .3; } }
.soc-hero .soc-alertpulse { opacity: 0; animation: soch-apul 4.5s ease-in-out infinite; }
@keyframes soch-apul { 0% { opacity: 0; transform: translateY(0); } 4% { opacity: 1; } 20% { opacity: 1; transform: translateY(85px); } 24%, 100% { opacity: 0; transform: translateY(85px); } }
.soc-hero .soc-core { animation: soch-cor 4.5s ease-in-out infinite; }
@keyframes soch-cor { 0%, 22% { stroke-width: 1.6; } 30% { stroke-width: 2.8; } 40%, 100% { stroke-width: 1.6; } }
.soc-hero .soc-decpulse { opacity: 0; animation: soch-dpul 4.5s ease-in-out infinite; }
@keyframes soch-dpul { 0%, 38% { opacity: 0; transform: translateY(0); } 42% { opacity: 1; } 60% { opacity: 1; transform: translateY(52px); } 66%, 100% { opacity: 0; transform: translateY(52px); } }
.soc-hero .soc-human-halo { transform-box: fill-box; transform-origin: center; animation: soch-hum 4.5s ease-in-out infinite; }
@keyframes soch-hum { 0%, 60% { opacity: .12; transform: scale(.9); } 68% { opacity: .7; transform: scale(1.1); } 80%, 100% { opacity: .12; transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) {
  .soc-hero .soc-sig, .soc-hero .soc-agt-halo, .soc-hero .soc-agt-alert path, .soc-hero .soc-alertpulse,
  .soc-hero .soc-core, .soc-hero .soc-decpulse, .soc-hero .soc-human-halo { animation: none; }
  .soc-hero .soc-alertpulse, .soc-hero .soc-decpulse { opacity: 0; }
}

/* HexaSOC feature-visual flow animations */
.soc-spokes line { stroke-dasharray: 4 6; animation: soc-fin 1.9s linear infinite; }
@keyframes soc-fin { to { stroke-dashoffset: 10; } }
.soc-cyc path { stroke-dasharray: 5 6; animation: soc-fout 1.6s linear infinite; }
.soc-flowp { stroke-dasharray: 5 6; animation: soc-fout 1.5s linear infinite; }
.soc-gov path, .soc-gov line { stroke-dasharray: 4 6; animation: soc-fout 1.8s linear infinite; }
@keyframes soc-fout { to { stroke-dashoffset: -11; } }
@media (prefers-reduced-motion: reduce) {
  .soc-spokes line, .soc-cyc path, .soc-flowp, .soc-gov path, .soc-gov line { animation: none; }
}

/* HexaSOC, agent-team collaborative orbit */
.tm-orbit { width: 100%; height: auto; display: block; }
.tm-orbit .tm-spoke { animation: tm-spoke 1.9s linear infinite; animation-delay: var(--sd); }
@keyframes tm-spoke { to { stroke-dashoffset: 10; } }
.tm-orbit .tm-token { animation: tm-tok 7s linear infinite; }
@keyframes tm-tok { to { transform: rotate(360deg); } }
.tm-orbit .tm-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: tm-hl 7s ease-in-out infinite; animation-delay: var(--nd); }
@keyframes tm-hl { 0% { opacity: 0; transform: scale(.8); } 5% { opacity: .9; transform: scale(1.15); } 14% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; } }
.tm-orbit .tm-corepulse { transform-box: fill-box; transform-origin: center; animation: tm-cp 3.4s ease-in-out infinite; }
@keyframes tm-cp { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .tm-orbit .tm-spoke, .tm-orbit .tm-token, .tm-orbit .tm-halo, .tm-orbit .tm-corepulse { animation: none; }
  .tm-orbit .tm-halo { opacity: 0; }
}

/* ===== HexaSOC feature visuals v2 ===== */
.fe-loop, .tp-pipe, .gv-flow { width: 100%; height: auto; display: block; }
/* F2 detection loop */
.fe-loop .fe-arc { animation: fe-arc 1.7s linear infinite; animation-delay: var(--ad); }
@keyframes fe-arc { to { stroke-dashoffset: -11; } }
.fe-loop .fe-token { animation: fe-tok 4.5s linear infinite; }
@keyframes fe-tok { to { transform: rotate(360deg); } }
.fe-loop .fe-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: fe-hl 4.5s ease-in-out infinite; animation-delay: var(--nd); }
@keyframes fe-hl { 0% { opacity: 0; transform: scale(.8); } 6% { opacity: .9; transform: scale(1.15); } 20% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; } }
.fe-loop .fe-corepulse { transform-box: fill-box; transform-origin: center; animation: fe-cp 3.4s ease-in-out infinite; }
@keyframes fe-cp { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.1); } }
.fe-loop .fe-feed { animation: fe-feed 3.5s ease-in-out infinite; animation-delay: var(--fd); }
@keyframes fe-feed { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* F3 triage pipeline */
.tp-pipe .tp-alert { animation: tp-al 2.4s ease-in-out infinite; animation-delay: var(--td); }
@keyframes tp-al { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.tp-pipe .tp-in, .tp-pipe .tp-arrow { animation: tp-in 1.5s linear infinite; animation-delay: var(--pd, 0s); }
@keyframes tp-in { to { stroke-dashoffset: -9; } }
.tp-pipe .tp-hl { opacity: 0; animation: tp-hl 4.8s ease-in-out infinite; animation-delay: var(--pd); }
@keyframes tp-hl { 0%, 2% { opacity: 0; } 8% { opacity: 1; } 22% { opacity: 0; } 100% { opacity: 0; } }
/* F4 governance */
.gv-flow .gv-flowline, .gv-flow .gv-auto, .gv-flow .gv-human { animation: gv-f 1.6s linear infinite; }
@keyframes gv-f { to { stroke-dashoffset: -9; } }
.gv-flow .gv-gate path:first-child { animation: gv-g 3.5s ease-in-out infinite; }
@keyframes gv-g { 0%, 100% { stroke-width: 1.8; } 50% { stroke-width: 2.9; } }
.gv-flow .gv-hnode { animation: gv-h 4s ease-in-out infinite; }
@keyframes gv-h { 0%, 60% { opacity: .7; } 70% { opacity: 1; } 100% { opacity: .7; } }
.gv-flow .gv-log { animation: gv-l 5s ease-in-out infinite; }
@keyframes gv-l { 0%, 15% { opacity: 0; } 25%, 85% { opacity: 1; } 95%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .fe-loop .fe-arc, .fe-loop .fe-token, .fe-loop .fe-halo, .fe-loop .fe-corepulse, .fe-loop .fe-feed,
  .tp-pipe .tp-alert, .tp-pipe .tp-in, .tp-pipe .tp-arrow, .tp-pipe .tp-hl,
  .gv-flow .gv-flowline, .gv-flow .gv-auto, .gv-flow .gv-human, .gv-flow .gv-gate path, .gv-flow .gv-hnode, .gv-flow .gv-log { animation: none; }
  .tp-pipe .tp-alert, .gv-flow .gv-log { opacity: 1; }
}

/* ================= HexaOT, hero + feature visuals v2 ================= */
.ot-hero, .r1-inv, .r2-anom, .r3-map, .r4-soc { width: 100%; height: auto; display: block; }
/* hero */
.ot-hero .ot-spkt { animation: ot-spk 2.4s linear infinite; animation-delay: var(--pd); }
@keyframes ot-spk { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(calc(var(--y1) * 1px - var(--y0) * 1px)); opacity: 0; } }
.ot-hero .ot-mpkt { animation: ot-mpk 2.2s linear infinite; animation-delay: var(--md); }
@keyframes ot-mpk { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateX(var(--mx)); opacity: 0; } }
.ot-hero .ot-colpulse { transform-box: fill-box; transform-origin: center; animation: ot-cpul 3.4s ease-in-out infinite; }
@keyframes ot-cpul { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.1); } }
.ot-hero .ot-anom { animation: ot-anm 2.5s ease-in-out infinite; }
@keyframes ot-anm { 0%, 60% { opacity: 1; } 70%, 100% { opacity: .25; } }
/* row 1 inventory */
.r1-inv .r1-row { opacity: 0; animation: r1-row .6s ease-out both; animation-delay: var(--rd); }
@keyframes r1-row { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
/* row 2 anomaly */
.r2-anom .r2-base { stroke-dasharray: 400; stroke-dashoffset: 400; animation: r2-base 4.2s ease-out infinite; }
@keyframes r2-base { 0% { stroke-dashoffset: 400; } 40%, 100% { stroke-dashoffset: 0; } }
.r2-anom .r2-spike, .r2-anom .r2-after { opacity: 0; animation: r2-spike 4.2s ease-out infinite; }
@keyframes r2-spike { 0%, 45% { opacity: 0; } 52% { opacity: 1; } 100% { opacity: 1; } }
.r2-anom .r2-flag { opacity: 0; animation: r2-flag 4.2s ease-out infinite; }
@keyframes r2-flag { 0%, 55% { opacity: 0; } 62% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } }
/* row 3 intel map */
.r3-map .r3-cve { opacity: 0; animation: r3-cve .6s ease-out both; animation-delay: var(--cd); }
@keyframes r3-cve { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.r3-map .r3-beam { animation: r3-beam 1.4s linear infinite; animation-delay: var(--bd); }
@keyframes r3-beam { to { stroke-dashoffset: -9; } }
.r3-map .r3-asset { animation: r3-asset 3s ease-in-out infinite; animation-delay: var(--ad); }
@keyframes r3-asset { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.r3-map .r3-ring { transform-box: fill-box; transform-origin: center; animation: r3-ring 2.1s ease-out infinite; }
@keyframes r3-ring { 0% { transform: scale(.78); opacity: .55; } 70%, 100% { transform: scale(1.28); opacity: 0; } }
/* row 4 soc */
.r4-soc .r4-alert { opacity: 0; animation: r4-alert .5s ease-out both; animation-delay: var(--ad); }
@keyframes r4-alert { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.r4-soc .r4-beam, .r4-soc .r4-out { animation: r4-beam 1.5s linear infinite; animation-delay: var(--bd, 0s); }
@keyframes r4-beam { to { stroke-dashoffset: -9; } }
.r4-soc .r4-pulse { transform-box: fill-box; transform-origin: center; animation: ot-cpul 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ot-hero .ot-spkt, .ot-hero .ot-mpkt, .ot-hero .ot-colpulse, .ot-hero .ot-anom,
  .r1-inv .r1-row, .r2-anom .r2-base, .r2-anom .r2-spike, .r2-anom .r2-after, .r2-anom .r2-flag,
  .r3-map .r3-cve, .r3-map .r3-beam, .r3-map .r3-asset, .r3-map .r3-ring,
  .r4-soc .r4-alert, .r4-soc .r4-beam, .r4-soc .r4-out, .r4-soc .r4-pulse { animation: none; }
  .r3-map .r3-ring { opacity: 0; }
  .r1-inv .r1-row, .r3-map .r3-cve, .r2-anom .r2-base, .r2-anom .r2-spike, .r2-anom .r2-after, .r2-anom .r2-flag, .r4-soc .r4-alert { opacity: 1; stroke-dashoffset: 0; }
}

/* ================= HexaCustody, hero + feature visuals v2 ================= */
.cu-hero, .cm-lib, .cx-track, .ac-xfer, .by-store { width: 100%; height: auto; display: block; }
/* hero: asset journey + ledger */
.cu-hero .cu-asset { animation: cu-asset 8s ease-in-out infinite; }
@keyframes cu-asset { 0% { transform: translateX(0); } 22%, 28% { transform: translateX(125px); } 47%, 53% { transform: translateX(250px); } 72%, 78% { transform: translateX(375px); } 100% { transform: translateX(0); } }
.cu-hero .cu-seal { opacity: 0; transform-box: fill-box; transform-origin: center; animation: cu-seal 8s ease-in-out infinite; animation-delay: var(--sd); }
@keyframes cu-seal { 0%, 4% { opacity: 0; transform: scale(0); } 9% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 1; } }
.cu-hero .cu-block { opacity: 0; animation: cu-block .6s ease-out both; animation-delay: var(--bd); }
@keyframes cu-block { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cu-hero .cu-chain { stroke-dasharray: 16; stroke-dashoffset: 16; animation: cu-chain .5s ease-out both; animation-delay: var(--cd); }
@keyframes cu-chain { to { stroke-dashoffset: 0; } }
/* F1 CMS library */
.cm-lib .cm-asset { opacity: 0; animation: cm-asset .5s ease-out both; animation-delay: var(--md); }
@keyframes cm-asset { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
/* F2 cross-org agent */
.cx-track .cx-move { animation: cx-move 1.6s linear infinite; }
@keyframes cx-move { to { stroke-dashoffset: -11; } }
.cx-track .cx-file { animation: cx-file 4s ease-in-out infinite; }
@keyframes cx-file { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(96px); opacity: 1; } 55% { opacity: 0; } 100% { opacity: 0; } }
.cx-track .cx-evt { opacity: 0; animation: cx-evt .5s ease-out both; animation-delay: var(--ed); }
@keyframes cx-evt { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
/* F3 accelerated transfer */
.ac-xfer .ac-fast { transform-box: fill-box; transform-origin: left; animation: ac-fast 4s ease-out infinite; }
@keyframes ac-fast { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.ac-xfer .ac-std { transform-box: fill-box; transform-origin: left; animation: ac-std 4s linear infinite; }
@keyframes ac-std { 0% { transform: scaleX(.1); } 100% { transform: scaleX(1); } }
.ac-xfer .ac-head { animation: ac-head 4s ease-out infinite; }
@keyframes ac-head { 0% { transform: translateX(-270px); opacity: 0; } 10% { opacity: 1; } 70%, 100% { transform: translateX(0); opacity: 1; } }
/* F4 BYO storage */
.by-store .by-link.on { animation: by-link 1.5s linear infinite; }
@keyframes by-link { to { stroke-dashoffset: -9; } }
@media (prefers-reduced-motion: reduce) {
  .cu-hero .cu-asset, .cu-hero .cu-seal, .cu-hero .cu-block, .cu-hero .cu-chain, .cm-lib .cm-asset,
  .cx-track .cx-move, .cx-track .cx-file, .cx-track .cx-evt,
  .ac-xfer .ac-fast, .ac-xfer .ac-std, .ac-xfer .ac-head, .by-store .by-link.on { animation: none; }
  .cu-hero .cu-seal, .cu-hero .cu-block, .cm-lib .cm-asset, .cx-track .cx-evt { opacity: 1; }
  .cu-hero .cu-chain { stroke-dashoffset: 0; }
}

/* ================= HexaMatrix, console hero + feature visuals v2 ================= */
.mx-console, .mm-map, .mf-mats, .mw-weight, .mg-loop { width: 100%; height: auto; display: block; }
/* hero console */
.mx-console .mx-live circle { animation: mx-blink 1.6s ease-in-out infinite; }
@keyframes mx-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.mx-console .mx-col { opacity: 0; animation: mx-col .5s ease-out both; animation-delay: var(--md); }
@keyframes mx-col { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mx-console .mx-bar, .mx-console .mx-cov { transform-box: fill-box; transform-origin: left; animation: mx-bar 1.4s ease-out both; animation-delay: .4s; }
@keyframes mx-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.mx-console .mx-chip { opacity: 0; animation: mx-chip .4s ease-out both; animation-delay: var(--cd); }
@keyframes mx-chip { to { opacity: 1; } }
.mx-console .mx-scan { animation: mx-scan 5.5s ease-in-out infinite; }
@keyframes mx-scan { 0% { transform: translateX(0); } 50% { transform: translateX(448px); } 100% { transform: translateX(0); } }
/* F1 coverage map */
.mm-map .mm-beam { animation: mx-beam 1.5s linear infinite; animation-delay: var(--bd); }
@keyframes mx-beam { to { stroke-dashoffset: -9; } }
.mm-map .mm-cell { opacity: 0; animation: mm-cell .5s ease-out both; animation-delay: var(--md); }
@keyframes mm-cell { to { opacity: 1; } }
/* F2 matrices */
.mf-mats .mf-mat { opacity: 0; animation: mf-mat .5s ease-out both; animation-delay: var(--fd); }
@keyframes mf-mat { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.mf-mats .mf-beam { animation: mx-beam 1.5s linear infinite; animation-delay: var(--bd); }
.mf-mats .mf-corepulse { transform-box: fill-box; transform-origin: center; animation: mf-cp 3.4s ease-in-out infinite; }
@keyframes mf-cp { 0%, 100% { opacity: .4; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.1); } }
/* F3 weighted (staggered grow-in + live glow) */
.mw-weight .mw-bar { transform-box: fill-box; transform-origin: left;
  animation: mw-bar 1.2s cubic-bezier(.22,1,.36,1) both, mw-glow 3s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s), calc(1.2s + var(--i) * .16s); }
@keyframes mw-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mw-glow { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 4px #f97316); } }
.mw-weight .mw-dot { animation: mx-blink 1.6s ease-in-out infinite; }
/* F4 loop (travelling token lights each stage) */
.mg-loop .mg-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mg-halo 6s ease-in-out infinite; animation-delay: var(--hd); }
@keyframes mg-halo { 0%, 1% { opacity: 0; transform: scale(.8); } 4% { opacity: .9; transform: scale(1.15); } 16% { opacity: 0; transform: scale(1.2); } 100% { opacity: 0; } }
.mg-loop .mg-token { animation: mg-token 6s ease-in-out infinite; }
@keyframes mg-token { 0%, 4% { transform: translateX(0); opacity: 1; } 18%, 26% { transform: translateX(104px); } 40%, 48% { transform: translateX(208px); } 62%, 90% { transform: translateX(302px); opacity: 1; } 96%, 100% { transform: translateX(302px); opacity: 0; } }
.mg-loop .mg-tick { opacity: 0; animation: mg-tick 6s ease-in-out infinite; }
@keyframes mg-tick { 0%, 60% { opacity: 0; } 66% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
.mg-loop .mg-beam { animation: mx-beam 1.5s linear infinite; animation-delay: var(--bd); }
.mg-loop .mg-return { animation: mx-beam 2s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .mx-console .mx-live circle, .mx-console .mx-col, .mx-console .mx-bar, .mx-console .mx-cov, .mx-console .mx-chip, .mx-console .mx-scan,
  .mm-map .mm-beam, .mm-map .mm-cell, .mf-mats .mf-mat, .mf-mats .mf-beam, .mf-mats .mf-corepulse,
  .mw-weight .mw-bar, .mw-weight .mw-dot, .mg-loop .mg-halo, .mg-loop .mg-token, .mg-loop .mg-tick, .mg-loop .mg-beam, .mg-loop .mg-return { animation: none; }
  .mx-console .mx-col, .mx-console .mx-chip, .mm-map .mm-cell, .mf-mats .mf-mat, .mg-loop .mg-tick { opacity: 1; }
  .mx-console .mx-bar, .mx-console .mx-cov, .mw-weight .mw-bar { transform: scaleX(1); }
}

/* ================= Partners, white-label dashboard ================= */
.pw-dash { width: 100%; height: auto; display: block; }
.pw-dash .pw-brand, .pw-dash .pw-domain { opacity: 0; animation: pw-cyc 6s ease-in-out infinite; animation-delay: calc(var(--i) * -2s); }
@keyframes pw-cyc { 0%, 28% { opacity: 1; } 33%, 95% { opacity: 0; } 100% { opacity: 1; } }
.pw-dash .pw-accent { stroke: #2dd4bf; animation: pw-accent 6s ease-in-out infinite; }
@keyframes pw-accent { 0%, 28% { stroke: #2dd4bf; } 33%, 61% { stroke: #8b5cf6; } 66%, 94% { stroke: #f59e0b; } 100% { stroke: #2dd4bf; } }
.pw-dash .pw-accent-f, .pw-dash .pw-accent-bar { fill: #2dd4bf; animation: pw-accentf 6s ease-in-out infinite; }
.pw-dash .pw-accent-bar { fill-opacity: .07; }
@keyframes pw-accentf { 0%, 28% { fill: #2dd4bf; } 33%, 61% { fill: #8b5cf6; } 66%, 94% { fill: #f59e0b; } 100% { fill: #2dd4bf; } }
.pw-dash .pw-idx-arc { stroke-dasharray: var(--len) var(--perim); stroke-dashoffset: var(--len); animation: pw-draw 2s ease-out forwards; }
@keyframes pw-draw { to { stroke-dashoffset: 0; } }
.pw-dash .pw-ring-arc { stroke-dasharray: var(--len) var(--cc); stroke-dashoffset: var(--len); animation: pw-draw2 1.3s ease-out forwards; animation-delay: var(--rd); }
@keyframes pw-draw2 { to { stroke-dashoffset: 0; } }
.pw-dash .pw-live circle { animation: pw-blink 1.6s ease-in-out infinite; }
@keyframes pw-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pw-dash .pw-brand, .pw-dash .pw-domain, .pw-dash .pw-accent, .pw-dash .pw-accent-f, .pw-dash .pw-accent-bar,
  .pw-dash .pw-idx-arc, .pw-dash .pw-ring-arc, .pw-dash .pw-live circle { animation: none; }
  .pw-dash .pw-brand[style*="--i:0"], .pw-dash .pw-domain[style*="--i:0"] { opacity: 1; }
  .pw-dash .pw-idx-arc, .pw-dash .pw-ring-arc { stroke-dashoffset: 0; }
}

/* ================= Partners, partnership-model cards ================= */
.pm-card { position: relative; overflow: hidden; transition: transform .25s, border-color .25s, box-shadow .25s; }
.pm-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sc); opacity: .9; }
.pm-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sc) 14%, transparent), transparent 60%); }
.pm-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--sc) 20%, transparent); }
.pm-card:hover::after { opacity: 1; }
.pm-card .int-chip { color: var(--sc); border: 1px solid color-mix(in srgb, var(--sc) 42%, transparent);
  background: color-mix(in srgb, var(--sc) 12%, transparent); transition: transform .25s, box-shadow .25s; }
.pm-card:hover .int-chip { transform: translateY(-2px) scale(1.06); box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 30%, transparent); }
.pm-tag { display: inline-block; margin: 2px 0 10px; font-family: var(--font-display); font-size: .64rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--sc);
  padding: 3px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent);
  background: color-mix(in srgb, var(--sc) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .pm-card, .pm-card .int-chip { transition: none; } }

/* ================= Partners, console feature panels ================= */
.pd-panel, .pc-panel, .pl-panel { width: 100%; height: auto; display: block; }
/* deal registration */
.pd-panel .pd-row { opacity: 0; animation: pp-fin .5s ease-out both; animation-delay: var(--rd); }
@keyframes pp-fin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pd-panel .pd-check { stroke-dasharray: 44; stroke-dashoffset: 44; animation: pp-draw 1s ease-out .7s forwards; }
@keyframes pp-draw { to { stroke-dashoffset: 0; } }
.pd-panel .pd-shield { animation: pp-shield 3.4s ease-in-out infinite; }
@keyframes pp-shield { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
/* client management */
.pc-panel .pc-row { opacity: 0; animation: pp-fin .5s ease-out both; animation-delay: var(--rd); }
.pc-panel .pc-sub { opacity: 0; animation: pp-fin .5s ease-out both; animation-delay: var(--sd); }
.pc-panel .pc-knob { animation: pp-knob .5s ease-out both; animation-delay: calc(var(--sd) + .2s); }
@keyframes pp-knob { from { transform: translateX(-10px); } to { transform: none; } }
/* content library */
.pl-panel .pl-card { opacity: 0; animation: pp-fin .5s ease-out both; animation-delay: var(--md); }
.pl-panel .pl-mode-knob { animation: pp-mode 5.5s ease-in-out infinite; }
@keyframes pp-mode { 0%, 42% { transform: translateX(0); } 50%, 92% { transform: translateX(73px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .pd-panel .pd-row, .pd-panel .pd-check, .pd-panel .pd-shield,
  .pc-panel .pc-row, .pc-panel .pc-sub, .pc-panel .pc-knob,
  .pl-panel .pl-card, .pl-panel .pl-mode-knob { animation: none; }
  .pd-panel .pd-row, .pc-panel .pc-row, .pc-panel .pc-sub, .pl-panel .pl-card { opacity: 1; }
  .pd-panel .pd-check { stroke-dashoffset: 0; }
}

/* Cyber Dockside AI partner hero logo */
.cda-logo { display: flex; align-items: center; justify-content: center; }
.cda-logo img { width: 100%; max-width: 520px; height: auto; filter: drop-shadow(0 8px 30px rgba(43,147,223,.22)); }
@media (max-width: 900px) { .cda-logo { margin-top: 8px; } .cda-logo img { max-width: 380px; } }

/* ================= Partner/Platform cards v2 ================= */
.psides-v2 { grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.psides-v2 .pside { position: relative; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 7%, var(--surface)), var(--surface)); }
.psides-v2 .pside::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--sc); }
.psides-v2 .pside::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc) 20%, transparent), transparent 70%); opacity: .5; transition: opacity .3s; pointer-events: none; }
.psides-v2 .pside:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--sc) 18%, transparent); }
.psides-v2 .pside:hover::after { opacity: .9; }
.pside-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); background: color-mix(in srgb, var(--sc) 12%, transparent);
  transition: transform .3s, box-shadow .3s; }
.pside-ic svg { width: 26px; height: 26px; }
.psides-v2 .pside:hover .pside-ic { transform: translateY(-2px) scale(1.06); box-shadow: 0 10px 22px color-mix(in srgb, var(--sc) 30%, transparent); }
.psides-v2 .pside-label { color: var(--sc); opacity: .85; }
.pside-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pside-tags span { font-family: var(--font-display); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  padding: 5px 11px; border-radius: 999px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 32%, transparent); background: color-mix(in srgb, var(--sc) 9%, transparent); }
/* centre join node */
.pside-join { position: relative; width: 64px; display: flex; align-items: center; justify-content: center; }
.pside-join::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 40%, transparent) 45%, color-mix(in srgb, var(--violet) 40%, transparent) 55%, transparent);
  -webkit-mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); mask: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  height: 2px; top: 50%; transform: translateY(-50%);
  background-size: 200% 100%; animation: ps-flow 3s linear infinite; }
@keyframes ps-flow { to { background-position: -200% 0; } }
.pside-join-node { position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: #0b1330; border: 1px solid var(--border-strong); color: #cbd5e8;
  box-shadow: 0 0 0 6px rgba(11,19,48,.9); animation: ps-node 3s ease-in-out infinite; }
.pside-join-node svg { width: 20px; height: 20px; }
@keyframes ps-node { 0%, 100% { transform: rotate(0deg); box-shadow: 0 0 0 6px rgba(11,19,48,.9), 0 0 18px rgba(34,211,238,.25); }
  50% { transform: rotate(90deg); box-shadow: 0 0 0 6px rgba(11,19,48,.9), 0 0 22px rgba(139,92,246,.35); } }
/* strap */
.pstrap-v2 { margin-top: 30px; }
.pstrap-v2 .ps-a { background: linear-gradient(90deg, var(--violet), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pstrap-v2 .ps-b { background: linear-gradient(90deg, var(--cyan), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 900px) {
  .psides-v2 { grid-template-columns: 1fr; }
  .pside-join { width: auto; height: 48px; }
  .pside-join::before { width: 2px; height: 100%; top: 0; left: 50%; transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cyan) 40%, transparent) 45%, color-mix(in srgb, var(--violet) 40%, transparent) 55%, transparent);
    background-size: 100% 200%; animation: ps-flow-v 3s linear infinite; }
}
@keyframes ps-flow-v { to { background-position: 0 -200%; } }
@media (prefers-reduced-motion: reduce) {
  .psides-v2 .pside, .pside-ic, .pside-join::before, .pside-join-node { transition: none; animation: none; }
}

/* ================= Programme cards v2 (liven up) ================= */
.pcap { overflow: hidden; }
.pcap p { color: #cfd8ec; }
.pcap h3 { color: #fff; }
.pcap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%;
  opacity: .9; animation: pcap-sheen 4.5s linear infinite; }
@keyframes pcap-sheen { to { background-position: -200% 0; } }
.pcap::after { content: ""; position: absolute; width: 200px; height: 200px; right: -74px; top: -74px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  opacity: .35; transition: opacity .35s; pointer-events: none; }
.pcap:hover { box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 20%, transparent); }
.pcap:hover::after { opacity: .85; }
.pcap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pcap-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); background: color-mix(in srgb, var(--accent) 13%, transparent);
  transition: transform .3s, box-shadow .3s; }
.pcap-ic svg { width: 24px; height: 24px; }
.pcap:hover .pcap-ic { transform: translateY(-2px) scale(1.08); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.pcap-head .pcap-n { font-size: 1.15rem; opacity: .9; }
.pcap .pcap-plat { border-top-color: color-mix(in srgb, var(--accent) 24%, var(--border)); }
.pcap .pcap-plat > span:not(.pl-chip) { color: var(--text-2); }
.pcap .pl-chip {
  transition: background .25s, border-color .25s, color .25s;
  color: color-mix(in srgb, var(--accent) 68%, #fff);
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 46%, transparent);
}
.pcap:hover .pl-chip { color: #fff; background: color-mix(in srgb, var(--accent) 34%, transparent); border-color: color-mix(in srgb, var(--accent) 66%, transparent); }
@media (prefers-reduced-motion: reduce) { .pcap::before { animation: none; } .pcap, .pcap-ic { transition: none; } }

/* single-console card chips */
.pm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pm-chips span { font-family: var(--font-display); font-size: .62rem; font-weight: 600; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 6px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 30%, transparent); background: color-mix(in srgb, var(--sc) 9%, transparent);
  transition: background .25s, border-color .25s; }
.pm-card:hover .pm-chips span { background: color-mix(in srgb, var(--sc) 16%, transparent); border-color: color-mix(in srgb, var(--sc) 45%, transparent); }

/* ================= Maritime frameworks grid v2 ================= */
.reg-v2 { position: relative; overflow: hidden; padding: 22px 24px 22px 26px; border: 1px solid var(--border);
  border-left: 3px solid var(--sc); border-radius: 0 14px 14px 0;
  background: linear-gradient(120deg, color-mix(in srgb, var(--sc) 7%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.reg-v2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, transparent, var(--sc), transparent); background-size: 100% 200%;
  animation: reg-sheen 3.5s linear infinite; }
@keyframes reg-sheen { to { background-position: 0 -200%; } }
.reg-v2::after { content: ""; position: absolute; width: 150px; height: 150px; right: -60px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc) 20%, transparent), transparent 70%); opacity: .3; transition: opacity .3s; pointer-events: none; }
.reg-v2:hover { transform: translateX(4px); border-color: color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--sc) 18%, transparent); }
.reg-v2:hover::after { opacity: .8; }
.reg-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; margin-bottom: 14px; color: var(--sc);
  border: 1px solid color-mix(in srgb, var(--sc) 40%, transparent); background: color-mix(in srgb, var(--sc) 12%, transparent);
  transition: transform .3s; }
.reg-ic svg { width: 21px; height: 21px; }
.reg-v2:hover .reg-ic { transform: scale(1.1) rotate(-3deg); }
.reg-v2 h3 { color: var(--text); }
.reg-v2 p { color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .reg-v2::before { animation: none; } .reg-v2, .reg-ic { transition: none; } }

/* ================= Maritime chain radar (who it's for) ================= */
.ch-wrap { display: flex; align-items: center; justify-content: center; }
.ch-radar { width: 100%; height: auto; max-width: 520px; display: block; }
.ch-radar .ch-link { stroke: var(--lc); stroke-opacity: .5; stroke-width: 1.5; stroke-dasharray: 5 7; animation: ch-flow 1.7s linear infinite; animation-delay: var(--ld); }
@keyframes ch-flow { to { stroke-dashoffset: -12; } }
.ch-radar .ch-node { animation: ch-node .5s ease-out both; animation-delay: var(--nd); }
@keyframes ch-node { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.ch-radar .ch-halo { transform-box: fill-box; transform-origin: center; animation: ch-halo 3.2s ease-in-out infinite; animation-delay: var(--nd); }
@keyframes ch-halo { 0%, 100% { opacity: .15; transform: scale(.85); } 50% { opacity: .6; transform: scale(1.12); } }
.ch-radar .ch-ping { transform-box: fill-box; transform-origin: center; animation: ch-ping 3s ease-out infinite; animation-delay: var(--nd); }
@keyframes ch-ping { 0% { opacity: 0; transform: scale(.5); } 20% { opacity: 1; transform: scale(1); } 100% { opacity: 1; } }
.ch-radar .ch-ring { animation: ch-rot 42s linear infinite; }
.ch-radar .ch-sweep { animation: ch-rot 6.5s linear infinite; }
@keyframes ch-rot { to { transform: rotate(360deg); } }
.ch-radar .ch-corepulse { transform-box: fill-box; transform-origin: center; animation: ch-core 3.4s ease-in-out infinite; }
@keyframes ch-core { 0%, 100% { opacity: .4; transform: scale(.92); } 50% { opacity: .85; transform: scale(1.08); } }
.ch-radar .ch-sea { animation: ch-sea 6s ease-in-out infinite; }
@keyframes ch-sea { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-40px); } }
@media (prefers-reduced-motion: reduce) {
  .ch-radar .ch-link, .ch-radar .ch-node, .ch-radar .ch-halo, .ch-radar .ch-ping, .ch-radar .ch-ring,
  .ch-radar .ch-sweep, .ch-radar .ch-corepulse, .ch-radar .ch-sea { animation: none; }
  .ch-radar .ch-node, .ch-radar .ch-ping { opacity: 1; }
}

/* ================= Walking Comet — "why two firms" value cards ================= */
.wtwo { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px 24px 28px; background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.wtwo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 200% 100%;
  animation: pcap-sheen 3.4s linear infinite; }
.wtwo::after { content: ""; position: absolute; width: 180px; height: 180px; right: -70px; top: -70px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%);
  opacity: .5; transition: opacity .3s; pointer-events: none; }
.wtwo:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--accent) 20%, transparent); }
.wtwo:hover::after { opacity: .9; }
.wtwo-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  margin-bottom: 16px; transition: transform .3s, box-shadow .3s; }
.wtwo-ic svg { width: 25px; height: 25px; }
.wtwo:hover .wtwo-ic { transform: translateY(-2px) scale(1.08); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.wtwo h3 { color: #fff; margin: 0 0 10px; }
.wtwo p { color: #cfd8ec; line-height: 1.62; }
@media (prefers-reduced-motion: reduce) { .wtwo::before { animation: none; } .wtwo, .wtwo-ic { transition: none; } }

/* ================= Walking Comet — testimonial cards v2 ================= */
.pquote-v2 { position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 7%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.pquote-v2::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--sc), transparent); background-size: 200% 100%;
  animation: pcap-sheen 3.6s linear infinite; }
.pquote-v2::after { content: ""; position: absolute; width: 200px; height: 200px; right: -80px; top: -80px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sc) 18%, transparent), transparent 70%);
  opacity: .5; transition: opacity .3s; pointer-events: none; }
.pquote-v2:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 45%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--sc) 18%, transparent); }
.pquote-v2:hover::after { opacity: .85; }
.pquote-mark { position: absolute; top: 6px; left: 20px; font-family: var(--font-display); font-weight: 700;
  font-size: 5.5rem; line-height: 1; color: var(--sc); opacity: .16; pointer-events: none; }
.pquote-v2 blockquote { position: relative; color: #cfd8ec; }
.pquote-v2 figcaption { flex-direction: row; align-items: center; gap: 13px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--sc) 22%, var(--border)); }
.pquote-v2 figcaption .pquote-av { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: var(--sc);
  background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent);
  transition: transform .3s, box-shadow .3s; }
.pquote-v2:hover .pquote-av { transform: scale(1.08); box-shadow: 0 8px 20px color-mix(in srgb, var(--sc) 30%, transparent); }
.pquote-cap-txt { display: flex; flex-direction: column; gap: 2px; }
.pquote-v2 .pquote-cap-txt strong { color: #fff; }
.pquote-v2 .pquote-cap-txt span { color: var(--text-2); font-size: .84rem; }
@media (prefers-reduced-motion: reduce) { .pquote-v2::before { animation: none; } .pquote-v2, .pquote-av { transition: none; } }

/* ================= Copla partner page ================= */
.cp-modtag { display: inline-block; font-family: var(--font-display); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* --- one platform, one view: 3-layer stack --- */
.cp-layers { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }
.cp-layer { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--sc) 34%, var(--border)); border-radius: var(--radius);
  padding: 22px 26px; background: linear-gradient(150deg, color-mix(in srgb, var(--sc) 12%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s; }
.cp-layer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sc), transparent); background-size: 200% 100%; animation: pcap-sheen 3.4s linear infinite; }
.cp-layer:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sc) 60%, transparent); box-shadow: 0 16px 40px color-mix(in srgb, var(--sc) 18%, transparent); }
.cp-layer-tag { font-family: var(--font-display); font-size: .64rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sc); margin-bottom: 8px; }
.cp-layer-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: #fff; }
.cp-layer-view { display: flex; align-items: center; gap: 18px; }
.cp-layer-view .cp-layer-body { flex: 1; }
.cp-layer-sub { color: #cfd8ec; font-size: .92rem; line-height: 1.55; margin-top: 4px; }
.cp-modchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cp-modchips span { font-family: var(--font-display); font-size: .74rem; font-weight: 600; padding: 5px 11px; border-radius: 7px; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); border: 1px solid color-mix(in srgb, var(--c) 36%, transparent); }
.cp-eye { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 13px; display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent); }
.cp-eye svg { width: 30px; height: 30px; }
.cp-conn { position: relative; height: 46px; display: flex; align-items: center; justify-content: center; }
.cp-conn::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 60%, transparent), color-mix(in srgb, var(--teal) 60%, transparent));
  background-size: 100% 200%; animation: cp-flowdown 1.8s linear infinite; }
.cp-conn::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); }
.cp-conn-label { position: relative; z-index: 1; font-family: var(--font-display); font-size: .64rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--bg); padding: 3px 12px; border-radius: 20px; border: 1px solid var(--border); }
@keyframes cp-flowdown { from { background-position: 0 200%; } to { background-position: 0 0; } }

/* --- compliance as a service band --- */
.cp-caas { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 40px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--lime) 10%, var(--surface)), var(--surface) 60%);
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items: center; }
.cp-caas-head h2 { margin: 10px 0 12px; }
.cp-caas-head p { color: #cfd8ec; }
.cp-count { color: var(--lime); }
.cp-fwcloud { display: flex; flex-wrap: wrap; gap: 10px; align-content: center; }
.cp-fwcloud span { font-family: var(--font-display); font-weight: 600; font-size: .86rem; padding: 9px 15px; border-radius: 9px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent);
  animation: cp-float 4s ease-in-out infinite; }
.cp-fwcloud span:nth-child(2n){ animation-delay: -1.3s; } .cp-fwcloud span:nth-child(3n){ animation-delay: -2.6s; }
@keyframes cp-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.cp-note { max-width: 900px; margin: 18px auto 0; text-align: center; color: var(--muted); font-size: .82rem; line-height: 1.6; }

/* --- industry use-case cards --- */
.cp-ind-grid { gap: 22px; }
.cp-ind { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px 26px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 7%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.cp-ind::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--sc), transparent); background-size: 200% 100%; animation: pcap-sheen 3.6s linear infinite; }
.cp-ind:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 45%, transparent); box-shadow: 0 18px 44px color-mix(in srgb, var(--sc) 16%, transparent); }
.cp-ind-head { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid color-mix(in srgb, var(--sc) 20%, var(--border)); }
.cp-ind-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 33%, transparent); transition: transform .3s; }
.cp-ind-ic svg { width: 25px; height: 25px; }
.cp-ind:hover .cp-ind-ic { transform: scale(1.08); }
.cp-ind-head h3 { margin: 0; color: #fff; font-size: 1.18rem; }
.cp-ind-sub { font-size: .82rem; color: var(--sc); font-weight: 600; }
.cp-ind-list { margin: 6px 0 0; display: grid; gap: 2px; }
.cp-ind-list dt { font-family: var(--font-display); font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: color-mix(in srgb, var(--sc) 75%, #fff); margin-top: 14px; }
.cp-ind-list dd { margin: 3px 0 0; color: #cfd8ec; font-size: .9rem; line-height: 1.55; }

/* --- capability chip groups --- */
.cp-caps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cp-capgroup { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 8%, var(--surface)), var(--surface)); transition: transform .3s, border-color .3s, box-shadow .3s; }
.cp-capgroup:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sc) 45%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--sc) 15%, transparent); }
.cp-capgroup-head { display: flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; margin-bottom: 16px; }
.cp-cap-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 33%, transparent); }
.cp-cap-ic svg { width: 21px; height: 21px; }
.cp-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cp-chips li { position: relative; padding: 9px 12px 9px 32px; border-radius: 9px; font-size: .88rem; color: #cfd8ec;
  background: color-mix(in srgb, var(--sc) 7%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 20%, var(--border)); transition: background .25s, border-color .25s, transform .25s; }
.cp-chips li::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent); }
.cp-capgroup:hover .cp-chips li { border-color: color-mix(in srgb, var(--sc) 34%, transparent); }
.cp-chips li:hover { transform: translateX(3px); background: color-mix(in srgb, var(--sc) 14%, transparent); }

/* --- process flow 01-05 --- */
.cp-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.cp-step { position: relative; border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 18px 20px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--sc) 9%, var(--surface)), var(--surface)); transition: transform .3s, border-color .3s, box-shadow .3s; }
.cp-step::after { content: ""; position: absolute; top: 40px; right: -10px; width: 20px; height: 2px; background: color-mix(in srgb, var(--sc) 55%, transparent); z-index: 2; }
.cp-step:last-child::after { display: none; }
.cp-step:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc) 50%, transparent); box-shadow: 0 16px 38px color-mix(in srgb, var(--sc) 16%, transparent); }
.cp-step-n { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--sc); background: color-mix(in srgb, var(--sc) 15%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent); margin-bottom: 14px; transition: transform .3s; }
.cp-step:hover .cp-step-n { transform: scale(1.1); }
.cp-step h3 { font-size: 1rem; color: #fff; margin: 0 0 8px; }
.cp-step p { font-size: .84rem; color: #cfd8ec; line-height: 1.55; margin: 0; }

/* --- closing band --- */
.cp-close { position: relative; overflow: hidden; border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--border)); border-radius: var(--radius);
  padding: 48px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--lime) 14%, var(--surface)), var(--surface) 55%); text-align: center; }
.cp-close::after { content: ""; position: absolute; width: 320px; height: 320px; right: -120px; top: -120px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--lime) 22%, transparent), transparent 70%); pointer-events: none; }
.cp-close-inner { position: relative; z-index: 1; max-width: 820px; margin: 0 auto; }
.cp-close-inner h2 { margin: 12px 0 14px; }
.cp-close-inner p { color: #cfd8ec; max-width: 720px; margin: 0 auto; }
.cp-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.cp-badges span { font-family: var(--font-display); font-weight: 600; font-size: .84rem; padding: 9px 16px; border-radius: 24px;
  color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 34%, transparent); transition: transform .25s, box-shadow .25s; }
.cp-badges span:hover { transform: translateY(-2px); box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 26%, transparent); }
.cp-badge-more { background: color-mix(in srgb, var(--lime) 24%, transparent) !important; color: #fff !important; }

@media (max-width: 900px) {
  .cp-caas { grid-template-columns: 1fr; padding: 28px; }
  .cp-caps { grid-template-columns: 1fr; }
  .cp-flow { grid-template-columns: 1fr 1fr; }
  .cp-step::after { display: none; }
}
@media (max-width: 560px) { .cp-flow { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .cp-layer::before, .cp-ind::before, .cp-conn::before, .cp-fwcloud span { animation: none; }
  .cp-layer, .cp-ind, .cp-capgroup, .cp-step, .cp-chips li, .cp-ind-ic, .cp-step-n, .cp-badges span { transition: none; }
}

/* --- Copla hero logo card --- */
.cp-logocard { position: relative; background: #fff; border-radius: 20px; padding: 44px 48px;
  border: 1px solid color-mix(in srgb, var(--lime) 30%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 6px color-mix(in srgb, var(--lime) 10%, transparent);
  display: grid; place-items: center; transition: transform .4s var(--ease), box-shadow .4s; overflow: hidden; }
.cp-logocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%); animation: cp-logoshine 5.5s ease-in-out infinite; pointer-events: none; }
.cp-logocard img { width: 100%; max-width: 420px; height: auto; display: block; }
.cp-logocard:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 6px color-mix(in srgb, var(--lime) 18%, transparent); }
@keyframes cp-logoshine { 0%,72% { transform: translateX(-120%); } 88%,100% { transform: translateX(120%); } }
@media (max-width: 900px) { .cp-logocard { padding: 34px 36px; margin-top: 10px; } .cp-logocard img { max-width: 340px; } }
@media (prefers-reduced-motion: reduce) { .cp-logocard::after { animation: none; } .cp-logocard { transition: none; } }

/* ================= TeamLogic IT partner page ================= */
/* generic partner logo card (light-background logos on the dark hero) */
.plogocard { position: relative; background: #fff; border-radius: 20px; padding: 40px 48px;
  border: 1px solid color-mix(in srgb, var(--lc, var(--violet)) 30%, transparent);
  box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 0 6px color-mix(in srgb, var(--lc, var(--violet)) 10%, transparent);
  display: grid; place-items: center; transition: transform .4s var(--ease), box-shadow .4s; overflow: hidden; }
.plogocard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.5) 50%, transparent 60%);
  transform: translateX(-120%); animation: cp-logoshine 5.5s ease-in-out infinite; pointer-events: none; }
.plogocard img { width: 100%; max-width: 360px; height: auto; display: block; }
.plogocard:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(0,0,0,.5), 0 0 0 6px color-mix(in srgb, var(--lc, var(--violet)) 18%, transparent); }
@media (max-width: 900px) { .plogocard { padding: 32px 34px; margin-top: 10px; } .plogocard img { max-width: 300px; } }

/* --- white-label operating model --- */
.tl-wl { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.tl-wl-face { position: relative; padding: 26px 28px 28px; background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 9%, var(--surface)), var(--surface)); }
.tl-wl-engine { position: relative; padding: 28px 28px 30px; background: linear-gradient(160deg, color-mix(in srgb, var(--cyan) 7%, #0b1226), #0b1226); }
.tl-wl-tag { display: inline-block; font-family: var(--font-display); font-size: .64rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--violet); margin-bottom: 16px; }
.tl-wl-tag-engine { color: var(--cyan); }
.tl-wl-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0; }
.tl-stage { position: relative; border: 1px solid color-mix(in srgb, var(--sc) 30%, var(--border)); border-radius: 14px; padding: 20px 20px 18px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 12%, transparent), transparent); transition: transform .3s, border-color .3s, box-shadow .3s; }
.tl-stage:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--sc) 55%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--sc) 18%, transparent); }
.tl-stage-ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; color: var(--sc);
  background: color-mix(in srgb, var(--sc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--sc) 34%, transparent); margin-bottom: 12px; }
.tl-stage-ic svg { width: 23px; height: 23px; }
.tl-stage h3 { font-size: 1rem; color: #fff; margin: 0 0 6px; }
.tl-stage p { font-size: .86rem; color: #cfd8ec; line-height: 1.5; margin: 0; }
.tl-wl-arrow { position: relative; width: 46px; align-self: center; }
.tl-wl-arrow::before { content: ""; position: absolute; left: 6px; right: 14px; top: 50%; height: 2px; transform: translateY(-50%);
  background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 55%, transparent), color-mix(in srgb, var(--cyan) 20%, transparent)); background-size: 200% 100%; animation: tl-flow 1.6s linear infinite; }
.tl-wl-arrow::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border-right: 2px solid var(--cyan); border-top: 2px solid var(--cyan); }
@keyframes tl-flow { from { background-position: 200% 0; } to { background-position: 0 0; } }
.tl-wl-seam { position: relative; height: 54px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--surface), #0b1226); }
.tl-wl-seam::before { content: ""; position: absolute; left: 28px; right: 28px; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 55%, transparent) 0 7px, transparent 7px 15px);
  background-size: 30px 2px; animation: tl-seam-march 1.4s linear infinite; }
.tl-wl-seam span { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-size: .58rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2);
  background: #0b1226; padding: 7px 16px; border-radius: 22px; border: 1px dashed color-mix(in srgb, var(--cyan) 45%, var(--border)); }
.tl-wl-seam span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 22%, transparent); animation: tl-seam-pulse 1.8s ease-in-out infinite; }
@keyframes tl-seam-march { to { background-position: 30px 0; } }
@keyframes tl-seam-pulse { 0%,100% { opacity: .5; transform: scale(.82); } 50% { opacity: 1; transform: scale(1); } }

/* --- land-and-expand growth visual --- */
.tl-grow-wrap { display: flex; align-items: center; }
.tl-grow { width: 100%; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 26px 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 8%, var(--surface)), var(--surface)); }
.tl-grow-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.tl-grow-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff; }
.tl-grow-sub { font-size: .78rem; color: var(--muted); }
.tl-bars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: end; height: 190px; }
.tl-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.tl-bar-fill { width: 100%; height: var(--h); border-radius: 8px 8px 4px 4px; transform-origin: bottom;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 45%, transparent));
  box-shadow: 0 0 18px color-mix(in srgb, var(--c) 30%, transparent); animation: tl-grow-up .9s cubic-bezier(.2,.8,.3,1) backwards; animation-delay: var(--d); }
.tl-bar-lbl { margin-top: 8px; font-family: var(--font-display); font-size: .66rem; font-weight: 600; letter-spacing: .04em; color: #cfd8ec; white-space: nowrap; }
@keyframes tl-grow-up { from { transform: scaleY(0); opacity: .3; } to { transform: scaleY(1); opacity: 1; } }
.tl-grow-track { position: relative; height: 14px; margin: 14px 0 6px; }
.tl-grow-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, var(--violet), var(--blue)); border-radius: 2px; opacity: .5; }
.tl-grow-dot { position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--cyan) 20%, transparent); animation: tl-run 3.6s linear infinite; animation-delay: var(--d); }
@keyframes tl-run { 0% { left: 2%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 98%; opacity: 0; } }
.tl-grow-foot { display: flex; justify-content: space-between; font-family: var(--font-display); font-size: .72rem; font-weight: 600; color: var(--text-2); }
.tl-grow-foot span:first-child { color: var(--violet); }
.tl-grow-foot span:last-child { color: var(--blue); }

@media (max-width: 760px) {
  .tl-wl-row { grid-template-columns: 1fr; gap: 12px; }
  .tl-wl-arrow { width: 100%; height: 24px; }
  .tl-wl-arrow::before { left: 50%; right: auto; top: 4px; bottom: 6px; width: 2px; height: auto; transform: translateX(-50%); background: linear-gradient(180deg, color-mix(in srgb, var(--cyan) 55%, transparent), color-mix(in srgb, var(--cyan) 20%, transparent)); }
  .tl-wl-arrow::after { right: auto; left: 50%; top: auto; bottom: 4px; transform: translateX(-50%) rotate(135deg); }
}
@media (prefers-reduced-motion: reduce) {
  .plogocard::after, .tl-wl-arrow::before, .tl-bar-fill, .tl-grow-dot, .tl-wl-seam::before, .tl-wl-seam span::before { animation: none; }
  .plogocard, .tl-stage { transition: none; }
  .tl-bar-fill { transform: scaleY(1); opacity: 1; }
}

/* ================= Solution pages ================= */
.mhero.sol-hero { position: relative; }
.mhero.sol-hero::after { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(60% 60% at 82% 30%, color-mix(in srgb, var(--sc) 16%, transparent), transparent 70%); }
.mhero.sol-hero .container { position: relative; z-index: 1; }
.sol-tagline { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem,2.4vw,1.6rem); margin: 2px 0 14px; line-height: 1.25; }
.sol-eng-pills { display:flex; flex-wrap:wrap; gap:9px; margin:2px 0 18px; }
.sol-eng-pill { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-size:.76rem; font-weight:600; color:var(--text-2);
  background: color-mix(in srgb, var(--sc) 9%, var(--surface)); border:1px solid color-mix(in srgb, var(--sc) 26%, var(--border)); border-radius:22px; padding:6px 13px 6px 9px; }
.sol-eng-ic { display:grid; place-items:center; width:19px; height:19px; color:var(--sc); }
.sol-eng-ic svg{ width:15px; height:15px; }
.sol-powered { margin-bottom: 20px; }
.sol-plat-line { display:inline-flex; flex-wrap:wrap; align-items:center; gap:9px; }
.sol-plat-badge { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:600; font-size:.84rem; color:var(--pc);
  background: color-mix(in srgb, var(--pc) 13%, transparent); border:1px solid color-mix(in srgb, var(--pc) 32%, transparent); border-radius:9px; padding:6px 11px; }
.sol-plat-badge svg{ width:16px; height:16px; }
.sol-plat-sep { font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* hero visual */
.sv-hero { width:100%; height:auto; overflow:visible; }
.sv-ring { animation: sv-spin 40s linear infinite; }
.sv-sweep { animation: sv-spin 7s linear infinite; }
@keyframes sv-spin { to { transform: rotate(360deg); } }
.sv-link { stroke:var(--lc); stroke-width:2; stroke-dasharray:5 7; animation: sv-dash 1.3s linear infinite; animation-delay:var(--ld); opacity:.85; }
@keyframes sv-dash { to { stroke-dashoffset:-24; } }
.sv-node .sv-halo { animation: sv-halo 3s ease-in-out infinite; animation-delay:var(--nd); transform-box:fill-box; transform-origin:center; }
@keyframes sv-halo { 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }
.sv-core-pulse { animation: sv-core 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes sv-core { 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.08);} }
.sv-flow { animation: sv-dash 1.4s linear infinite; }
.sv-vbars rect { animation: sv-bar 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:bottom; }
.sv-vbars rect:nth-child(2){ animation-delay:.3s;} .sv-vbars rect:nth-child(3){ animation-delay:.6s;} .sv-vbars rect:nth-child(4){ animation-delay:.9s;}
@keyframes sv-bar { 0%,100%{ transform:scaleY(.8);} 50%{ transform:scaleY(1.1);} }

/* challenge -> solution */
.sol-story { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; }
.sol-card { position:relative; border-radius:var(--radius); padding:26px 28px; border:1px solid var(--border); overflow:hidden; }
.sol-challenge { background: linear-gradient(160deg, color-mix(in srgb, var(--rose) 8%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--rose) 22%, var(--border)); }
.sol-solution { background: linear-gradient(160deg, color-mix(in srgb, var(--sc) 11%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
.sol-card-ic { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; margin-bottom:14px; }
.sol-challenge .sol-card-ic { color:var(--rose); background:color-mix(in srgb,var(--rose) 15%,transparent); border:1px solid color-mix(in srgb,var(--rose) 32%,transparent); }
.sol-solution .sol-card-ic { color:var(--sc); background:color-mix(in srgb,var(--sc) 15%,transparent); border:1px solid color-mix(in srgb,var(--sc) 32%,transparent); }
.sol-card-ic svg{ width:24px; height:24px; }
.sol-card-lbl { display:block; font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; margin-bottom:8px; }
.sol-challenge .sol-card-lbl { color:var(--rose); } .sol-solution .sol-card-lbl { color:var(--sc); }
.sol-card p { color:#cfd8ec; line-height:1.62; margin:0; }
.sol-story-arrow { display:grid; place-items:center; width:60px; color:var(--sc); }
.sol-story-arrow svg{ width:26px; height:26px; animation: sol-nudge 1.8s ease-in-out infinite; }
@keyframes sol-nudge { 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(4px);} }

/* what you get */
.sol-get { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.sol-get-item { display:flex; gap:12px; align-items:flex-start; padding:15px 17px; border-radius:12px;
  background: color-mix(in srgb, var(--sc) 6%, var(--surface)); border:1px solid color-mix(in srgb, var(--sc) 16%, var(--border));
  transition: transform .25s, border-color .25s, background .25s; animation: sol-pop .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i)*.05s); }
.sol-get-item:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--sc) 40%,transparent); background:color-mix(in srgb,var(--sc) 11%,var(--surface)); }
.sol-get-tick { flex:0 0 auto; display:grid; place-items:center; width:24px; height:24px; border-radius:7px; color:var(--sc); background:color-mix(in srgb,var(--sc) 16%,transparent); }
.sol-get-tick svg{ width:14px; height:14px; }
.sol-get .li-text { color:#e2e8f5; font-size:.92rem; line-height:1.4; }
@keyframes sol-pop { from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }

/* business outcome */
.sol-outcome { position:relative; display:flex; align-items:center; gap:22px; flex-wrap:wrap; border-radius:var(--radius); padding:28px 32px; overflow:hidden;
  background: radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--sc) 15%, var(--surface)), var(--surface) 60%); border:1px solid color-mix(in srgb, var(--sc) 30%, var(--border)); }
.sol-outcome-ic { flex:0 0 auto; display:grid; place-items:center; width:58px; height:58px; border-radius:15px; color:var(--sc);
  background:color-mix(in srgb,var(--sc) 16%,transparent); border:1px solid color-mix(in srgb,var(--sc) 34%,transparent); animation: sv-core 3.4s ease-in-out infinite; }
.sol-outcome-ic svg{ width:30px; height:30px; }
.sol-outcome-body { flex:1; min-width:240px; }
.sol-outcome-lbl { display:block; font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sc); margin-bottom:6px; }
.sol-outcome-body p { margin:0; color:#fff; font-size:1.12rem; font-weight:500; line-height:1.5; }
.sol-outcome-chip { flex:0 0 auto; display:inline-flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:.82rem; color:var(--sc);
  background:color-mix(in srgb,var(--sc) 14%,transparent); border:1px solid color-mix(in srgb,var(--sc) 34%,transparent); border-radius:24px; padding:9px 16px; }
.sol-chip-dot { width:9px; height:9px; border-radius:50%; background:var(--sc); box-shadow:0 0 0 4px color-mix(in srgb,var(--sc) 22%,transparent); animation: sv-core 1.8s ease-in-out infinite; }
.sol-note { max-width:820px; margin:16px auto 0; text-align:center; color:var(--muted); font-size:.82rem; line-height:1.6; }

/* how you engage */
.sol-eng-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.sol-eng { position:relative; border-radius:var(--radius); padding:26px 26px 24px; border:1px solid var(--border); background:var(--surface); transition:transform .3s, border-color .3s, box-shadow .3s; }
.sol-eng.on { background:linear-gradient(160deg, color-mix(in srgb,var(--sc) 9%,var(--surface)), var(--surface)); border-color:color-mix(in srgb,var(--sc) 32%,var(--border)); }
.sol-eng.on:hover { transform:translateY(-4px); box-shadow:0 16px 40px color-mix(in srgb,var(--sc) 16%,transparent); }
.sol-eng:not(.on){ opacity:.62; }
.sol-eng-tile { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; margin-bottom:14px; color:var(--muted); background:color-mix(in srgb,var(--muted) 12%,transparent); border:1px solid var(--border); }
.sol-eng.on .sol-eng-tile { color:var(--sc); background:color-mix(in srgb,var(--sc) 15%,transparent); border-color:color-mix(in srgb,var(--sc) 32%,transparent); }
.sol-eng-tile svg{ width:23px; height:23px; }
.sol-eng h3 { font-size:1.05rem; color:#fff; margin:0 0 8px; display:flex; align-items:center; gap:9px; }
.sol-eng-tag { font-family:var(--font-display); font-size:.58rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sc); background:color-mix(in srgb,var(--sc) 16%,transparent); border-radius:20px; padding:3px 9px; }
.sol-eng p { color:#cfd8ec; font-size:.9rem; line-height:1.55; margin:0; }

/* pairs well with */
.sol-pairs { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.sol-pair { display:flex; align-items:center; gap:14px; border-radius:14px; padding:18px 20px; border:1px solid var(--border); text-decoration:none;
  background:linear-gradient(160deg, color-mix(in srgb,var(--sc) 7%,var(--surface)), var(--surface)); transition:transform .3s, border-color .3s, box-shadow .3s; }
.sol-pair:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--sc) 45%,transparent); box-shadow:0 16px 38px color-mix(in srgb,var(--sc) 16%,transparent); }
.sol-pair-ic { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--sc);
  background:color-mix(in srgb,var(--sc) 15%,transparent); border:1px solid color-mix(in srgb,var(--sc) 32%,transparent); }
.sol-pair-ic svg{ width:23px; height:23px; }
.sol-pair-txt { flex:1; display:flex; flex-direction:column; gap:3px; }
.sol-pair-kick { font-family:var(--font-display); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sc); }
.sol-pair-title { color:#fff; font-weight:600; font-size:.96rem; line-height:1.25; }
.sol-pair-arrow { flex:0 0 auto; color:var(--sc); opacity:.5; transition:transform .3s, opacity .3s; }
.sol-pair-arrow svg{ width:20px; height:20px; }
.sol-pair:hover .sol-pair-arrow { opacity:1; transform:translateX(4px); }

.cta-band[style*="--sc"] { border-color: color-mix(in srgb, var(--sc) 26%, var(--border)); }

@media (max-width: 860px){
  .sol-story { grid-template-columns:1fr; gap:14px; }
  .sol-story-arrow { width:100%; height:34px; transform:rotate(90deg); }
  .sol-get, .sol-eng-grid, .sol-pairs { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px){ .sol-get, .sol-eng-grid, .sol-pairs { grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .sv-ring,.sv-sweep,.sv-link,.sv-node .sv-halo,.sv-core-pulse,.sv-flow,.sv-vbars rect,.sol-story-arrow svg,.sol-get-item,.sol-outcome-ic,.sol-chip-dot { animation:none; }
  .sol-get-item,.sol-eng,.sol-pair { transition:none; }
}

/* ================= Solutions mega-menu ================= */
.dropdown.mega { left:0; width:min(900px,92vw); padding:22px 24px; }
.mega-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px 26px; }
.mega-group { padding:6px 0 10px; }
.mega-cat { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gc); padding:4px 4px 8px; margin-bottom:4px; border-bottom:1px solid color-mix(in srgb, var(--gc) 22%, var(--border)); }
.mega-cat-ic { display:grid; place-items:center; width:22px; height:22px; border-radius:6px; color:var(--gc); background:color-mix(in srgb,var(--gc) 14%,transparent); }
.mega-cat-ic svg{ width:14px; height:14px; }
.dropdown.mega a { padding:8px 8px; border-radius:9px; }
.dropdown.mega a .tt { font-size:.85rem; }
.dropdown.mega a .dd { font-size:.72rem; }
@media (max-width: 1120px){ .mega-grid { grid-template-columns:repeat(2,1fr); } .dropdown.mega { width:min(680px,92vw); } }

/* ================= Solutions two-panel mega-menu ================= */
.dropdown.mega.solmega { left:0; width:min(840px,94vw); padding:0; display:block; overflow:hidden; }
.solmega-body { display:grid; grid-template-columns:250px 1fr; align-items:stretch; }
.solmega-rail { display:flex; flex-direction:column; gap:2px; padding:14px 12px; border-right:1px solid var(--border);
  background:linear-gradient(180deg, color-mix(in srgb,var(--cyan) 4%, transparent), transparent); }
.solmega-cat { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:transparent; border:1px solid transparent; border-radius:11px; padding:10px 11px; color:var(--text-2);
  font-family:inherit; transition:background .18s, border-color .18s, color .18s; }
.solmega-cat-ic { flex:0 0 auto; display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:var(--gc);
  background:color-mix(in srgb,var(--gc) 13%,transparent); border:1px solid color-mix(in srgb,var(--gc) 26%,transparent); transition:transform .2s; }
.solmega-cat-ic svg{ width:19px; height:19px; }
.solmega-cat-meta { flex:1; display:flex; flex-direction:column; gap:1px; min-width:0; }
.solmega-cat-name { font-family:var(--font-display); font-weight:600; font-size:.9rem; color:var(--text); line-height:1.2; }
.solmega-cat-count { font-size:.72rem; color:var(--muted); }
.solmega-chev { flex:0 0 auto; width:16px; height:16px; color:var(--muted-2); opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; }
.solmega-cat:hover, .solmega-cat.is-active { background:color-mix(in srgb,var(--gc) 12%,var(--surface)); border-color:color-mix(in srgb,var(--gc) 30%,transparent); }
.solmega-cat.is-active .solmega-cat-name{ color:#fff; }
.solmega-cat.is-active .solmega-cat-ic{ transform:scale(1.06); }
.solmega-cat.is-active .solmega-chev{ opacity:1; transform:none; color:var(--gc); }

.solmega-view { position:relative; padding:16px; min-height:290px; }
.solmega-panel { display:none; }
.solmega-panel.is-active { display:block; animation:solmega-in .28s ease; }
@keyframes solmega-in { from{ opacity:0; transform:translateX(8px);} to{ opacity:1; transform:none;} }
.solmega-panel-head { font-family:var(--font-display); font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gc); padding:2px 8px 12px; }
.solmega-panel-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.solmega-item { display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:11px; border:1px solid transparent; text-decoration:none; transition:background .18s, border-color .18s, transform .18s; }
.solmega-item:hover { background:color-mix(in srgb,var(--gc) 9%,var(--surface)); border-color:color-mix(in srgb,var(--gc) 26%,var(--border)); transform:translateY(-1px); }
.solmega-item-ic { flex:0 0 auto; display:grid; place-items:center; width:32px; height:32px; border-radius:8px;
  background:color-mix(in srgb,currentColor 13%,transparent); border:1px solid color-mix(in srgb,currentColor 26%,transparent); }
.solmega-item-ic svg{ width:18px; height:18px; }
.solmega-item-txt { display:flex; flex-direction:column; gap:2px; min-width:0; }
.solmega-item .tt { font-family:var(--font-display); font-weight:600; font-size:.86rem; color:var(--text); line-height:1.2; }
.solmega-item:hover .tt { color:#fff; }
.solmega-item .dd { font-size:.74rem; color:var(--muted); line-height:1.3; }
.solmega-all { display:flex !important; align-items:center; justify-content:center; gap:9px; padding:13px !important;
  font-family:var(--font-display); font-weight:600; font-size:.84rem; color:var(--cyan) !important;
  border-top:1px solid var(--border); background:color-mix(in srgb,var(--cyan) 6%,transparent); transition:background .2s; }
.solmega-all svg{ width:17px; height:17px; transition:transform .2s; }
.solmega-all:hover { background:color-mix(in srgb,var(--cyan) 12%,transparent); }
.solmega-all:hover svg{ transform:translateX(4px); }
@media (max-width:1080px){ .dropdown.mega.solmega{ width:min(680px,94vw); } .solmega-body{ grid-template-columns:210px 1fr; } .solmega-panel-grid{ grid-template-columns:1fr; } }

/* ================= Solution page: platform stack ================= */
.sol-pt-stack { display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:center; gap:0; width:100%; }
.sol-pt { position:relative; flex:1 1 190px; min-width:0; max-width:360px; display:flex; align-items:center; gap:13px; padding:16px 18px; border-radius:16px; border:1px solid var(--border);
  background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,0)); transition:transform .35s var(--ease), border-color .35s, box-shadow .35s, background .35s; }
.sol-pt::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(140deg, color-mix(in srgb,var(--pc) 60%,transparent), transparent 62%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; transition:opacity .35s; }
.sol-pt:hover { transform:translateY(-5px); border-color:color-mix(in srgb,var(--pc) 45%,transparent); box-shadow:0 18px 42px -20px color-mix(in srgb,var(--pc) 55%,transparent); }
.sol-pt:hover::before { opacity:1; }
.sol-pt.primary { border-color:color-mix(in srgb,var(--pc) 42%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--pc) 16%,var(--surface)), var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pc) 16%,transparent), 0 16px 40px -26px color-mix(in srgb,var(--pc) 68%,transparent); }
.sol-pt-ic { flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px; border-radius:12px; color:var(--pc);
  background:color-mix(in srgb,var(--pc) 15%,transparent); border:1px solid color-mix(in srgb,var(--pc) 32%,transparent); }
.sol-pt.primary .sol-pt-ic { animation:sv-core 3.2s ease-in-out infinite; box-shadow:0 0 18px -4px color-mix(in srgb,var(--pc) 60%,transparent); }
.sol-pt-ic svg{ width:24px; height:24px; }
.sol-pt-meta { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sol-pt-name { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-family:var(--font-display); font-weight:700; font-size:.98rem; color:#fff; line-height:1.15; }
.sol-pt-tag { font-family:var(--font-display); font-size:.54rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--pc); background:color-mix(in srgb,var(--pc) 16%,transparent); border:1px solid color-mix(in srgb,var(--pc) 30%,transparent); border-radius:20px; padding:2px 7px; }
.sol-pt-role { font-size:.8rem; color:#c3cee6; line-height:1.3; }
/* animated flow connector */
.sol-pt-link { position:relative; align-self:center; flex:0 0 clamp(22px,3vw,46px); height:2px; margin:0 2px; border-radius:2px;
  background:linear-gradient(90deg, color-mix(in srgb,var(--sc) 6%,transparent), color-mix(in srgb,var(--sc) 42%,transparent), color-mix(in srgb,var(--sc) 6%,transparent)); }
.sol-pt-link::before { content:""; position:absolute; top:50%; left:2%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--sc); box-shadow:0 0 9px 1px color-mix(in srgb,var(--sc) 80%,transparent); animation:spt-flow 2.1s cubic-bezier(.6,0,.4,1) infinite; }
.sol-pt-link::after { content:""; position:absolute; right:-2px; top:50%; width:6px; height:6px; margin-top:-3px;
  border-top:2px solid color-mix(in srgb,var(--sc) 55%,transparent); border-right:2px solid color-mix(in srgb,var(--sc) 55%,transparent); transform:translateY(-50%) rotate(45deg); }
.sol-pt-stack > .sol-pt-link:nth-of-type(2)::before { animation-delay:.28s; }
.sol-pt-stack > .sol-pt-link:nth-of-type(3)::before { animation-delay:.56s; }
@keyframes spt-flow { 0%{ left:2%; opacity:0; } 12%{ opacity:1; } 88%{ opacity:1; } 100%{ left:calc(100% - 9px); opacity:0; } }
@media (max-width:820px){
  .sol-pt-stack{ flex-direction:column; align-items:stretch; }
  .sol-pt{ max-width:none; }
  .sol-pt-link{ width:2px; height:clamp(20px,4vw,30px); flex:0 0 auto; align-self:center; margin:2px 0;
    background:linear-gradient(180deg, color-mix(in srgb,var(--sc) 6%,transparent), color-mix(in srgb,var(--sc) 42%,transparent), color-mix(in srgb,var(--sc) 6%,transparent)); }
  .sol-pt-link::before{ top:2%; left:50%; margin:0 0 0 -3.5px; animation:spt-flow-v 2.1s cubic-bezier(.6,0,.4,1) infinite; }
  .sol-pt-link::after{ right:auto; left:50%; top:auto; bottom:-2px; margin:0 0 0 -3px;
    border-top:0; border-right:2px solid color-mix(in srgb,var(--sc) 55%,transparent); border-bottom:2px solid color-mix(in srgb,var(--sc) 55%,transparent); transform:translateX(-50%) rotate(45deg); }
}
@keyframes spt-flow-v { 0%{ top:2%; opacity:0; } 12%{opacity:1;} 88%{opacity:1;} 100%{ top:calc(100% - 9px); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .solmega-panel.is-active{ animation:none; } .sol-pt,.sol-pt-ic,.sol-pt-link::before{ animation:none; transition:none; } }

/* ================= Solution pages v2 polish ================= */
/* delivery lifecycle (reuses .cp-flow/.cp-step) */
.sol-life { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px){ .sol-life { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .sol-life { grid-template-columns: 1fr; } }

/* What you get: scroll-triggered stagger + richer cards */
.sol-get.reveal { opacity: 1; transform: none; }
.sol-get .sol-get-item { opacity: 0; animation: none; }
.sol-get.in .sol-get-item { animation: sol-pop .5s cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i)*.05s); }
.sol-get-item { position: relative; overflow: hidden; }
.sol-get-item::before { content:""; position:absolute; inset:0 0 auto 0; height:2px; background:linear-gradient(90deg,transparent,var(--sc),transparent); background-size:200% 100%; opacity:0; transition:opacity .25s; }
.sol-get-item:hover::before { opacity:1; animation: pcap-sheen 2.2s linear infinite; }
.sol-get-item:hover { box-shadow: 0 14px 30px color-mix(in srgb, var(--sc) 16%, transparent); }
.sol-get-tick { transition: transform .25s; }
.sol-get-item:hover .sol-get-tick { transform: scale(1.14) rotate(-5deg); }

/* Challenge -> Solution: more life */
.sol-solution { transition: transform .3s, box-shadow .3s, border-color .3s; }
.sol-solution:hover { transform: translateY(-3px); box-shadow: 0 16px 38px color-mix(in srgb, var(--sc) 15%, transparent); }
.sol-solution .sol-card-ic { animation: sv-core 3.4s ease-in-out infinite; }
.sol-challenge .sol-card-ic { animation: sol-jitter 5s ease-in-out infinite; }
@keyframes sol-jitter { 0%,88%,100%{ transform:rotate(0);} 92%{ transform:rotate(-7deg);} 96%{ transform:rotate(7deg);} }
.sol-solution::after { content:""; position:absolute; width:180px; height:180px; right:-70px; bottom:-70px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb,var(--sc) 18%,transparent), transparent 70%); pointer-events:none; }

/* Business outcome: scanning highlight */
.sol-outcome { position: relative; }
.sol-outcome::after { content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb,var(--sc) 12%,transparent) 50%, transparent 58%);
  transform: translateX(-100%); animation: sol-scan 6.5s ease-in-out infinite; }
@keyframes sol-scan { 0%,68%{ transform:translateX(-100%);} 92%,100%{ transform:translateX(100%);} }

/* hero: travelling signal pulse toward HexaView */
.sv-flow-dot { fill: var(--sc); animation: sv-travel 2.6s ease-in-out infinite; }
@keyframes sv-travel { 0%{ opacity:0; transform:translateY(0);} 12%{ opacity:1;} 88%{ opacity:1;} 100%{ opacity:0; transform:translateY(90px);} }

@media (prefers-reduced-motion: reduce){
  .sol-get.in .sol-get-item { animation:none; opacity:1; }
  .sol-get-item::before, .sol-solution .sol-card-ic, .sol-challenge .sol-card-ic, .sol-outcome::after, .sv-flow-dot { animation:none; }
  .sol-solution, .sol-get-tick { transition:none; }
}

/* ================= solutions.html — HexaCore compounding orbit ================= */
.sxo-svg { width:100%; height:auto; overflow:visible; }
.sxo-core-glow { transform-box:fill-box; transform-origin:center; animation:sxo-breathe 4s ease-in-out infinite; }
@keyframes sxo-breathe { 0%,100%{ opacity:.5; transform:scale(1);} 50%{ opacity:.9; transform:scale(1.06);} }
.sxo-ring { animation:sxo-spin 55s linear infinite; }
@keyframes sxo-spin { to { transform:rotate(360deg); } }
.sxo-pulse { transform-box:fill-box; transform-origin:center; opacity:0; animation:sxo-broadcast 3.6s ease-out infinite; }
@keyframes sxo-broadcast { 0%{ transform:scale(1); opacity:.55; } 80%,100%{ transform:scale(2.9); opacity:0; } }
.sxo-stream { stroke:var(--sc); animation:sxo-flow 1.1s linear infinite; animation-delay:var(--d); }
@keyframes sxo-flow { to { stroke-dashoffset:-18; } }
.sxo-node { animation:sxo-bob 4.2s ease-in-out infinite; animation-delay:var(--d); }
@keyframes sxo-bob { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.sxo-halo { transform-box:fill-box; transform-origin:center; animation:sxo-halop 3.2s ease-in-out infinite; animation-delay:var(--d); }
@keyframes sxo-halop { 0%,100%{ opacity:.4; transform:scale(1);} 50%{ opacity:.85; transform:scale(1.14);} }
.sxo-core-pulse { transform-box:fill-box; transform-origin:center; animation:sxo-breathe 3.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .sxo-core-glow,.sxo-ring,.sxo-pulse,.sxo-stream,.sxo-node,.sxo-halo,.sxo-core-pulse { animation:none; }
  .sxo-pulse { opacity:0; }
}

/* ================= solutions.html — 18-solution index ================= */
.sol-index { display: flex; flex-direction: column; gap: 46px; }
.sol-cat-head { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; padding-bottom: 15px;
  border-bottom: 1px solid color-mix(in srgb, var(--gc) 22%, var(--border)); }
.sol-cat-ic { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; color: var(--gc);
  background: color-mix(in srgb, var(--gc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 28%, transparent); }
.sol-cat-ic svg { width: 22px; height: 22px; }
.sol-cat-name { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: #fff; }
.sol-cat-n { margin-left: auto; font-family: var(--font-display); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 26%, transparent); border-radius: 20px; padding: 5px 12px; }

/* ================= Industry pages — visual upgrade ================= */
.prob { position: relative; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.prob::after { content:""; position:absolute; inset:0 0 auto 0; height:3px; z-index:3; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--accent,var(--cyan)), transparent); background-size:200% 100%; animation: pcap-sheen 3.6s linear infinite; }
.prob:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent,var(--cyan)) 40%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent,var(--cyan)) 14%, transparent); background: var(--surface); }
.prob-head { background: linear-gradient(160deg, color-mix(in srgb, var(--accent,var(--cyan)) 8%, transparent), transparent); }
.prob-tag { background: color-mix(in srgb, var(--accent,var(--cyan)) 14%, transparent); }
.prob-col { position: relative; }
.prob-col:first-child { background: linear-gradient(180deg, color-mix(in srgb, var(--rose) 7%, transparent), transparent); }
.prob-col.is-solution { background: linear-gradient(180deg, color-mix(in srgb, var(--accent,var(--cyan)) 12%, transparent), transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent,var(--cyan)) 15%, transparent); }
.prob-col:last-child { background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 7%, transparent), transparent); }
.prob-col:first-child .prob-label { color: var(--rose); }
.prob-col:last-child .prob-label { color: var(--lime); }
.prob-col p { color: #cfd8ec; }
.prob-label { display:flex; align-items:center; gap:8px; }
.prob-label::before { content:""; width:15px; height:15px; flex:0 0 auto; background-color: currentColor;
  -webkit-mask: var(--mi) center/contain no-repeat; mask: var(--mi) center/contain no-repeat; }
.prob-col:first-child .prob-label::before { --mi: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%202%2020h20L12%203z'%2F%3E%3Cpath%20d%3D'M12%2010v4.5M12%2017.6h.01'%2F%3E%3C%2Fsvg%3E"); }
.prob-col.is-solution .prob-label::before { --mi: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%2018h6M10%2021h4'%2F%3E%3Cpath%20d%3D'M12%203a6%206%200%200%200-3.6%2010.8c.6.5.9%201.2.9%202.2h5.4c0-1%20.3-1.7.9-2.2A6%206%200%200%200%2012%203z'%2F%3E%3C%2Fsvg%3E"); }
.prob-col:last-child .prob-label::before { --mi: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'9'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'4.5'%2F%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'1.1'%20fill%3D'black'%20stroke%3D'none'%2F%3E%3C%2Fsvg%3E"); }
@media (min-width:1001px){
  .prob-col:not(:first-child)::before { content:""; position:absolute; left:-8px; top:34px; width:16px; height:16px; z-index:4;
    background-color: color-mix(in srgb, var(--accent,var(--cyan)) 72%, #fff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M9%206l6%206-6%206'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
}

/* regulatory text boxes: colour + animation */
.reg-grid:not(.reg-grid-v2) .reg { position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--border); padding: 22px 24px 22px 27px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 8%, var(--surface)), var(--surface));
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.reg-grid:not(.reg-grid-v2) .reg::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, color-mix(in srgb,var(--rc) 35%,transparent), var(--rc), color-mix(in srgb,var(--rc) 35%,transparent));
  background-size: 100% 200%; animation: reg-vbar 3s linear infinite; }
.reg-grid:not(.reg-grid-v2) .reg::after { content:""; position:absolute; width:150px; height:150px; right:-60px; top:-60px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb,var(--rc) 16%,transparent), transparent 70%); opacity:.5; transition:opacity .3s; pointer-events:none; }
.reg-grid:not(.reg-grid-v2) .reg:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--rc) 42%,transparent);
  box-shadow: 0 14px 34px color-mix(in srgb,var(--rc) 15%,transparent); }
.reg-grid:not(.reg-grid-v2) .reg:hover::after { opacity:.85; }
.reg-grid:not(.reg-grid-v2) .reg h3 { color:#fff; }
.reg-grid:not(.reg-grid-v2) .reg p { color: var(--text-2); }
.reg-grid:not(.reg-grid-v2) .reg { --rc: var(--cyan); }
.reg-grid:not(.reg-grid-v2) .reg:nth-child(6n+2){ --rc: var(--violet); }
.reg-grid:not(.reg-grid-v2) .reg:nth-child(6n+3){ --rc: var(--teal); }
.reg-grid:not(.reg-grid-v2) .reg:nth-child(6n+4){ --rc: var(--amber); }
.reg-grid:not(.reg-grid-v2) .reg:nth-child(6n+5){ --rc: var(--blue); }
.reg-grid:not(.reg-grid-v2) .reg:nth-child(6n+6){ --rc: var(--pink); }
@keyframes reg-vbar { to { background-position: 0 -200%; } }

/* frameworks note: accent tint + sheen */
.frameworks-note { position: relative; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent,var(--cyan)) 9%, var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--accent,var(--cyan)) 24%, var(--border)); }
.frameworks-note::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, transparent, var(--accent,var(--cyan)), transparent); background-size:200% 100%; animation: pcap-sheen 3.8s linear infinite; }
.frameworks-note::after { content:""; position:absolute; width:210px; height:210px; right:-84px; bottom:-84px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent,var(--cyan)) 15%, transparent), transparent 70%); pointer-events:none; }
.frameworks-note h3 { color:#fff; }
.frameworks-note p { color: var(--text-2); }

@media (prefers-reduced-motion: reduce){
  .prob::after, .reg-grid:not(.reg-grid-v2) .reg::before, .frameworks-note::before { animation:none; }
  .prob, .reg-grid:not(.reg-grid-v2) .reg { transition:none; }
}

/* ============ Industry pages — HexaCore hexagon icon + threat cards ============ */
.ccl-ic { display:block; margin:0 auto 7px; width:34px; height:34px; color: var(--accent, #67e8f9); animation: ccl-float 3.6s ease-in-out infinite; }
.ccl-ic svg { width:100%; height:100%; filter: drop-shadow(0 2px 9px color-mix(in srgb, var(--accent, #67e8f9) 42%, transparent)); }
@keyframes ccl-float { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-4px); } }

.threat-grid .card { position:relative; overflow:hidden; padding:60px 24px 24px; border-radius:var(--radius);
  border:1px solid var(--border); border-top:2px solid color-mix(in srgb, var(--tc) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--tc) 8%, var(--surface)), var(--surface));
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.threat-grid .card::before { content:""; position:absolute; top:22px; left:24px; width:40px; height:40px; border-radius:11px;
  background: color-mix(in srgb, var(--tc) 15%, transparent); border:1px solid color-mix(in srgb, var(--tc) 32%, transparent);
  animation: threat-glow 3.4s ease-in-out infinite; animation-delay: calc(var(--gi,0)*.4s); }
.threat-grid .card::after { content:""; position:absolute; top:31px; left:33px; width:22px; height:22px; background-color: var(--tc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%202%2020h20L12%203z'%2F%3E%3Cpath%20d%3D'M12%2010v4.5M12%2017.6h.01'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Cpath%20d%3D'M12%203%202%2020h20L12%203z'%2F%3E%3Cpath%20d%3D'M12%2010v4.5M12%2017.6h.01'%2F%3E%3C%2Fsvg%3E") center/contain no-repeat; }
.threat-grid .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--tc) 48%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--tc) 16%, transparent); }
.threat-grid .card h3 { color:#fff; }
.threat-grid .card p { color: var(--text-2); }
@keyframes threat-glow { 0%,100%{ box-shadow: 0 0 0 0 transparent; } 50%{ box-shadow: 0 0 16px 0 color-mix(in srgb, var(--tc) 32%, transparent); } }
.threat-grid .card { --tc: var(--rose); --gi:0; }
.threat-grid .card:nth-child(6n+2){ --tc: var(--amber); --gi:1; }
.threat-grid .card:nth-child(6n+3){ --tc: var(--pink); --gi:2; }
.threat-grid .card:nth-child(6n+4){ --tc: var(--violet); --gi:3; }
.threat-grid .card:nth-child(6n+5){ --tc: var(--cyan); --gi:4; }
.threat-grid .card:nth-child(6n+6){ --tc: var(--blue); --gi:5; }
@media (prefers-reduced-motion: reduce){ .ccl-ic, .threat-grid .card::before { animation:none; } .threat-grid .card { transition:none; } }

/* ============ Industry pages — hero stat boxes ============ */
.stats .stat { position: relative; overflow: hidden; padding: 20px 22px 20px 26px; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent, var(--cyan)) 22%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--cyan)) 10%, var(--surface)), var(--surface));
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.stats .stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent,var(--cyan)) 30%, transparent), var(--accent,var(--cyan)), color-mix(in srgb, var(--accent,var(--cyan)) 30%, transparent));
  background-size: 100% 200%; animation: reg-vbar 3s linear infinite; }
.stats .stat::after { content:""; position:absolute; width:150px; height:150px; right:-60px; top:-60px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent,var(--cyan)) 16%, transparent), transparent 70%);
  opacity:.5; transition:opacity .3s; pointer-events:none; }
.stats .stat:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent,var(--cyan)) 45%, transparent);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--accent,var(--cyan)) 15%, transparent); }
.stats .stat:hover::after { opacity:.85; }
.stats .stat .l { position: relative; color: var(--text-2); }
@media (prefers-reduced-motion: reduce){ .stats .stat::before { animation:none; } .stats .stat { transition:none; } }

/* ---- industry hero: the wider "insight" stat box (pull-quote) ---- */
.stats .stat:not(:has(.n)) { display: flex; flex-direction: column; justify-content: center; }
.stats .stat:not(:has(.n)) .l { margin-top: 0; font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.55; font-weight: 500; color: #eaf0fb; }
.stats .stat:not(:has(.n)) .l::before { content: "\201C"; display: block; font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; line-height: .5; margin-bottom: 12px; color: var(--accent, var(--cyan)); opacity: .55;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--accent, var(--cyan)) 45%, transparent); }

/* ============ Industry hero art — live signal flow on connectors ============ */
.financial .sc-link, .healthcare .sc-link, .gaming .sc-link, .energy .sc-link,
.manufacturing .sc-link, .media .sc-link, .government .sc-link, .cni .sc-link {
  stroke-dasharray: 3 7; opacity: .82; animation: ind-flow 1.35s linear infinite;
}
@keyframes ind-flow { to { stroke-dashoffset: -10; } }
/* a soft travelling pulse over each connector track */
.financial .sc-links, .healthcare .sc-links, .gaming .sc-links, .energy .sc-links,
.manufacturing .sc-links, .media .sc-links, .government .sc-links, .cni .sc-links { filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent, #22d3ee) 45%, transparent)); }
@media (prefers-reduced-motion: reduce){
  .financial .sc-link, .healthcare .sc-link, .gaming .sc-link, .energy .sc-link,
  .manufacturing .sc-link, .media .sc-link, .government .sc-link, .cni .sc-link { animation: none; stroke-dasharray: none; }
}

/* ============ Industry "what sits behind it" summary table ============ */
.table-wrap { position: relative;
  border-color: color-mix(in srgb, var(--accent, var(--cyan)) 18%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent, var(--cyan)) 5%, var(--surface)), var(--surface)); }
.table-wrap::before { content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2; pointer-events:none;
  background: linear-gradient(90deg, transparent, var(--accent, var(--cyan)), transparent); background-size:200% 100%; animation: pcap-sheen 3.6s linear infinite; }
.data-table thead th { background: color-mix(in srgb, var(--accent, var(--cyan)) 10%, transparent);
  color: color-mix(in srgb, var(--accent, var(--cyan)) 72%, #fff);
  border-bottom-color: color-mix(in srgb, var(--accent, var(--cyan)) 22%, var(--border)); }
.data-table tbody th[scope="row"] { color: var(--accent, var(--cyan)); font-size: .96rem; transition: box-shadow .25s; }
.data-table tbody td:nth-of-type(1) { color: #e2e8f5; }
.data-table tbody td:nth-of-type(2) { color: color-mix(in srgb, var(--accent, var(--cyan)) 55%, var(--text-2)); }
.data-table td.pl { color: var(--accent, var(--cyan)); font-family: var(--font-display); font-weight: 600; }
.data-table tbody tr { transition: background .25s; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--accent, var(--cyan)) 9%, transparent); }
.data-table tbody tr:hover th[scope="row"] { box-shadow: inset 3px 0 0 var(--accent, var(--cyan)); }
.table-wrap.reveal { opacity: 1; transform: none; }
.table-wrap.reveal tbody tr { opacity: 0; }
.table-wrap.reveal.in tbody tr { animation: sol-pop .5s cubic-bezier(.2,.8,.3,1) both; }
.table-wrap.reveal.in tbody tr:nth-child(1){ animation-delay:.05s; }
.table-wrap.reveal.in tbody tr:nth-child(2){ animation-delay:.13s; }
.table-wrap.reveal.in tbody tr:nth-child(3){ animation-delay:.21s; }
.table-wrap.reveal.in tbody tr:nth-child(4){ animation-delay:.29s; }
.table-wrap.reveal.in tbody tr:nth-child(5){ animation-delay:.37s; }
.table-wrap.reveal.in tbody tr:nth-child(6){ animation-delay:.45s; }
@media (prefers-reduced-motion: reduce){
  .table-wrap::before { animation:none; }
  .table-wrap.reveal tbody tr, .table-wrap.reveal.in tbody tr { opacity:1; animation:none; }
  .data-table tbody tr, .data-table tbody th[scope="row"] { transition:none; }
}

/* ================= HexaAI page — hero visual + comparison ================= */
.ai-hero { width:100%; height:auto; overflow:visible; }
.ai-scanbar { animation: ai-scan 3.4s ease-in-out infinite; }
@keyframes ai-scan { 0%{ transform:translateX(0); opacity:.3; } 50%{ transform:translateX(280px); opacity:.6; } 100%{ transform:translateX(0); opacity:.3; } }
.ai-agent { animation: ai-agent-pulse 3.4s ease-in-out infinite; animation-delay: var(--ad); }
@keyframes ai-agent-pulse { 0%,100%{ opacity:.72; } 50%{ opacity:1; } }

.ai-compare { border:1px solid color-mix(in srgb, var(--emerald) 20%, var(--border)); border-radius: var(--radius); overflow:hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--emerald) 5%, var(--surface)), var(--surface)); }
.ai-compare-head, .ai-compare-row { display:grid; grid-template-columns: 1.05fr 1.35fr 1.6fr; align-items:center; }
.ai-compare-head { border-bottom:1px solid color-mix(in srgb, var(--emerald) 22%, var(--border)); }
.ai-compare-head span { padding:16px 22px; font-family: var(--font-display); font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.ai-compare-head .ai-compare-old { color: var(--muted-2); }
.ai-compare-head .ai-compare-new { color: var(--emerald); display:flex; align-items:center; gap:9px; }
.ai-compare-head .ai-compare-new svg { width:18px; height:18px; }
.ai-compare-row { border-bottom:1px solid var(--border); transition: background .25s; }
.ai-compare-row:last-child { border-bottom:none; }
.ai-compare-row:hover { background: color-mix(in srgb, var(--emerald) 6%, transparent); }
.ai-compare-row span { padding:15px 22px; font-size:.9rem; line-height:1.45; }
.ai-compare-metric { font-family: var(--font-display); font-weight:600; color: var(--text); }
.ai-compare-row .ai-compare-old { color: var(--muted); }
.ai-compare-row .ai-compare-new { color:#e6edf8; font-weight:500; background: color-mix(in srgb, var(--emerald) 5%, transparent); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--emerald) 45%, transparent); }
.ai-compare-head .ai-compare-new { box-shadow: inset 3px 0 0 color-mix(in srgb, var(--emerald) 45%, transparent); }
@media (max-width: 760px){
  .ai-compare-head { display:none; }
  .ai-compare-row { grid-template-columns: 1fr; }
  .ai-compare-row .ai-compare-metric { background: color-mix(in srgb, var(--emerald) 9%, transparent); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
  .ai-compare-row .ai-compare-old::before { content:"App-layer: "; color: var(--muted-2); font-weight:600; }
  .ai-compare-row .ai-compare-new::before { content:"HexaAI: "; color: var(--emerald); font-weight:700; }
}
@media (prefers-reduced-motion: reduce){ .ai-scanbar, .ai-agent { animation:none; } }


/* ===================================================================
   Compliance as a Service — bespoke components
   =================================================================== */

/* --- Certification journey: animated vertical timeline --- */
.caas-tl { position: relative; list-style: none; margin: 0; padding: 0; }
.caas-tl::before { content: ""; position: absolute; left: 30px; top: 18px; bottom: 18px; width: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lime) 45%, transparent), color-mix(in srgb, var(--teal) 45%, transparent)); opacity: .32; }
.caas-tl-fill { position: absolute; left: 30px; top: 18px; width: 2px; height: 0; transform-origin: top;
  background: linear-gradient(180deg, var(--lime), var(--teal)); border-radius: 2px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--lime) 60%, transparent); animation: caas-grow 2.6s cubic-bezier(.4,0,.2,1) forwards; }
.reveal.in .caas-tl-fill, .caas-tl.in .caas-tl-fill { animation-play-state: running; }
@keyframes caas-grow { from { height: 0; } to { height: calc(100% - 36px); } }

.caas-step { position: relative; padding: 0 0 26px 82px; min-height: 62px; }
.caas-step:last-child { padding-bottom: 0; }
.caas-step-node { position: absolute; left: 6px; top: 0; width: 50px; height: 56px; display: grid; place-items: center; color: var(--sc, var(--lime)); }
.caas-step-node svg.caas-hex { position: absolute; inset: 0; width: 50px; height: 56px; }
.caas-step-node .caas-glyph { position: relative; width: 22px; height: 22px; }
.caas-step-node .caas-glyph svg { width: 100%; height: 100%; }
.caas-step-num { position: absolute; top: -7px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg, #070c1c); border: 1px solid color-mix(in srgb, var(--sc, var(--lime)) 55%, transparent);
  color: var(--sc, var(--lime)); font: 700 10px/20px "Space Grotesk", sans-serif; text-align: center; }
.caas-step-node .caas-ping { fill: none; stroke: var(--sc, var(--lime)); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: caas-ping 3s ease-out infinite; animation-delay: var(--pd, 0s); }
@keyframes caas-ping { 0% { opacity: .5; transform: scale(.85); } 70%,100% { opacity: 0; transform: scale(1.25); } }
.caas-step-card { background: linear-gradient(160deg, rgba(255,255,255,.028), rgba(255,255,255,0)); border: 1px solid var(--border);
  border-radius: 14px; padding: 15px 18px; transition: border-color .3s, transform .3s, box-shadow .3s; }
.caas-step:hover .caas-step-card { border-color: color-mix(in srgb, var(--sc, var(--lime)) 42%, transparent); transform: translateY(-2px);
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--sc, var(--lime)) 80%, transparent); }
.caas-step-card h3 { font-size: 1.08rem; margin: 0 0 4px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.caas-step-card p { margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.5; }
.caas-phase { font: 600 10px/1 "Inter", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc, var(--lime)); border: 1px solid color-mix(in srgb, var(--sc, var(--lime)) 35%, transparent);
  background: color-mix(in srgb, var(--sc, var(--lime)) 12%, transparent); padding: 3px 8px; border-radius: 999px; }
.caas-step.is-cert { --sc: var(--lime); }
.caas-step.is-loop { --sc: var(--teal); }

/* --- Assurance gauge ring --- */
.caas-gauge { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.caas-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.caas-gauge .g-track { fill: none; stroke: color-mix(in srgb, var(--lime) 16%, transparent); stroke-width: 8; }
.caas-gauge .g-val { fill: none; stroke: url(#caasGauge); stroke-width: 8; stroke-linecap: round;
  stroke-dasharray: 295; stroke-dashoffset: 295; animation: caas-fill 2.4s cubic-bezier(.3,0,.15,1) forwards .2s; }
@keyframes caas-fill { to { stroke-dashoffset: 35; } }
.caas-gauge-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; line-height: 1; }
.caas-gauge-num b { font: 700 29px/1 "Space Grotesk", sans-serif; color: #fff; }
.caas-gauge-num span { font: 600 7px/1 "Inter", sans-serif; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* --- HexaView compliance dashboard mock --- */
.caas-dash { border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border)); border-radius: 18px; overflow: hidden;
  background: linear-gradient(180deg, #0a1122, #070c1c); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); }
.caas-dash-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--teal) 8%, transparent); }
.caas-dash-dots { display: flex; gap: 6px; }
.caas-dash-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--teal) 55%, transparent); }
.caas-dash-dots i:nth-child(2){ background: color-mix(in srgb, var(--teal) 38%, transparent); }
.caas-dash-dots i:nth-child(3){ background: color-mix(in srgb, var(--teal) 22%, transparent); }
.caas-dash-ttl { display: flex; align-items: center; gap: 8px; font: 700 13px/1 "Space Grotesk", sans-serif; color: #fff; }
.caas-dash-ttl svg { width: 16px; height: 16px; color: var(--teal); }
.caas-dash-tag { margin-left: auto; font: 600 10px/1 "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lime); border: 1px solid color-mix(in srgb, var(--lime) 34%, transparent);
  background: color-mix(in srgb, var(--lime) 10%, transparent); padding: 4px 9px; border-radius: 999px; }
.caas-dash-body { padding: 20px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 20px; align-items: center; }
.caas-dash-left { display: flex; flex-direction: column; gap: 12px; }
.caas-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caas-kpi { background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; }
.caas-kpi-lbl { font: 600 9.5px/1.2 "Inter", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.caas-kpi-num { font: 700 22px/1 "Space Grotesk", sans-serif; color: #fff; margin: 6px 0 8px; }
.caas-kpi-num small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 3px; }
.caas-kpi-bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.08); overflow: hidden; }
.caas-kpi-bar > i { display: block; height: 100%; width: var(--w, 60%); border-radius: 3px;
  background: linear-gradient(90deg, var(--kc, var(--lime)), color-mix(in srgb, var(--kc, var(--lime)) 55%, var(--teal)));
  transform: scaleX(0); transform-origin: left; animation: caas-barin 1.6s cubic-bezier(.3,0,.2,1) forwards .4s; }
@keyframes caas-barin { to { transform: scaleX(1); } }
.caas-dash-right { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.caas-stream { border-top: 1px solid var(--border); background: rgba(255,255,255,.012); padding: 6px 8px; }
.caas-srow { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; opacity: 0;
  animation: caas-rowin .5s ease forwards; }
.caas-srow:nth-child(1){ animation-delay: .5s; } .caas-srow:nth-child(2){ animation-delay: .68s; }
.caas-srow:nth-child(3){ animation-delay: .86s; } .caas-srow:nth-child(4){ animation-delay: 1.04s; }
@keyframes caas-rowin { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
.caas-srow .s-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); }
.caas-srow .s-ic svg { width: 14px; height: 14px; }
.caas-srow .s-meta { min-width: 0; flex: 1; }
.caas-srow .s-meta b { display: block; font: 600 12.5px/1.2 "Space Grotesk", sans-serif; color: #eaf0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caas-srow .s-meta span { font: 500 10.5px/1.3 "Inter", sans-serif; color: var(--muted); }
.caas-srow .s-status { display: inline-flex; align-items: center; gap: 5px; font: 600 10px/1 "Inter", sans-serif;
  color: var(--text-2); flex: 0 0 auto; }
.caas-srow .s-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, var(--muted)); }
.caas-srow.is-next  { --dot: #7a8bb0; }
.caas-srow.is-prog  { --dot: var(--orange); }
.caas-srow.is-done  { --dot: var(--lime); }
.caas-srow.is-done .s-status { color: var(--lime); }

/* --- Frameworks cloud + accreditation --- */
.caas-frames { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; max-width: 900px; margin: 0 auto; }
.caas-chip { font: 600 12.5px/1 "Inter", sans-serif; color: var(--text); padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); transition: border-color .25s, color .25s, transform .25s; }
.caas-chip:hover { border-color: color-mix(in srgb, var(--lime) 50%, transparent); color: var(--lime); transform: translateY(-2px); }
.caas-chip.is-more { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 40%, transparent);
  background: color-mix(in srgb, var(--lime) 10%, transparent); }
.caas-accred { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 30px; }
.caas-seal { position: relative; border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px; text-align: center;
  background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,0)); overflow: hidden; transition: border-color .3s, transform .3s; }
.caas-seal:hover { border-color: color-mix(in srgb, var(--lime) 45%, transparent); transform: translateY(-3px); }
.caas-seal-badge { position: relative; width: 74px; height: 74px; margin: 0 auto 14px; }
.caas-seal-badge svg { width: 100%; height: 100%; }
.caas-seal-badge .cs-ring { fill: none; stroke: color-mix(in srgb, var(--lime) 60%, transparent); stroke-width: 2; stroke-dasharray: 5 6;
  transform-origin: center; animation: caas-spin 14s linear infinite; }
.caas-seal-badge .cs-check { fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 34; stroke-dashoffset: 34; animation: caas-draw 1s ease forwards .3s; }
@keyframes caas-spin { to { transform: rotate(360deg); } }
@keyframes caas-draw { to { stroke-dashoffset: 0; } }
.caas-seal h3 { font-size: 1.15rem; margin: 0 0 4px; letter-spacing: .02em; }
.caas-seal p { margin: 0; font-size: .88rem; color: var(--muted); }

/* --- Region / industry split --- */
.caas-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.caas-cust { border: 1px solid var(--border); border-radius: 16px; padding: 24px; background: rgba(255,255,255,.018);
  transition: border-color .3s, transform .3s; }
.caas-cust:hover { border-color: color-mix(in srgb, var(--lime) 40%, transparent); transform: translateY(-3px); }
.caas-cust-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px;
  color: var(--lime); background: color-mix(in srgb, var(--lime) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lime) 26%, transparent); }
.caas-cust-ic svg { width: 24px; height: 24px; }
.caas-cust h3 { font-size: 1.15rem; margin: 0 0 8px; }
.caas-cust p { margin: 0 0 14px; color: var(--text-2); font-size: .96rem; }
.caas-cust ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.caas-cust li { font: 600 11.5px/1 "Inter", sans-serif; color: var(--text-2); padding: 6px 11px; border-radius: 999px;
  border: 1px solid var(--border); background: rgba(255,255,255,.02); }

/* --- hero seal animation --- */
.caas-seal-spin { transform-box: fill-box; transform-origin: center; animation: caas-spin 20s linear infinite; }
.caas-arc { stroke-dasharray: 210; stroke-dashoffset: 210; animation: caas-arc-fill 2.6s cubic-bezier(.3,0,.15,1) forwards .3s; }
@keyframes caas-arc-fill { to { stroke-dashoffset: 46; } }
.caas-hcheck { stroke-dasharray: 30; stroke-dashoffset: 30; animation: caas-draw 1s ease forwards 1.3s; }

@media (max-width: 900px) {
  .caas-dash-body { grid-template-columns: 1fr; }
  .caas-dash-right { order: -1; }
  .caas-accred { grid-template-columns: 1fr; }
  .caas-split { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .caas-tl-fill, .caas-gauge .g-val, .caas-kpi-bar > i, .caas-srow, .caas-seal-badge .cs-ring, .caas-seal-badge .cs-check,
  .caas-step-node .caas-ping, .caas-seal-spin, .caas-arc, .caas-hcheck { animation: none; }
  .caas-tl-fill { height: calc(100% - 36px); }
  .caas-gauge .g-val { stroke-dashoffset: 35; }
  .caas-kpi-bar > i { transform: scaleX(1); }
  .caas-srow { opacity: 1; }
  .caas-seal-badge .cs-check, .caas-hcheck { stroke-dashoffset: 0; }
  .caas-arc { stroke-dashoffset: 46; }
}

.caas-hero-arc { stroke-dasharray: 502; stroke-dashoffset: 502; animation: caas-hero-arc 2.6s cubic-bezier(.3,0,.15,1) forwards .3s; }
@keyframes caas-hero-arc { to { stroke-dashoffset: 96; } }
@media (prefers-reduced-motion: reduce){ .caas-hero-arc { animation:none; stroke-dashoffset:96; } }

/* ===================================================================
   Homepage flywheel redesign — "How the platform compounds" (.cxflow)
   Scoped so the industry-page .flywheel / .flow-step are untouched.
   =================================================================== */
.flywheel.cxflow { display: block; margin-top: clamp(30px, 5vw, 52px); }
.cxflow .fw-vis { max-width: 400px; margin: 0 auto; }
.cxflow .fw-vis svg { overflow: visible; }

.flow-steps.cxflow-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: clamp(26px, 3.5vw, 42px) 0 0; padding: 0; list-style: none; }
@media (max-width: 900px) { .flow-steps.cxflow-track { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .flow-steps.cxflow-track { grid-template-columns: 1fr; } }

.cxflow .flow-step { position: relative; display: block; margin: 0; padding: 18px 17px 17px;
  border: 1px solid var(--border); border-top: 2px solid color-mix(in srgb, var(--step-accent) 50%, var(--border));
  border-radius: 16px; background: linear-gradient(165deg, rgba(255,255,255,.03), rgba(255,255,255,0));
  overflow: hidden; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s, background .4s; }
.cxflow .flow-step::before { content: none; }
.cxflow .flow-step.is-active { transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--step-accent) 55%, transparent);
  box-shadow: 0 22px 46px -26px color-mix(in srgb, var(--step-accent) 90%, transparent);
  background: linear-gradient(165deg, color-mix(in srgb, var(--step-accent) 10%, transparent), rgba(255,255,255,0)); }

.cxflow .fs-progress { position: absolute; top: 0; left: 0; height: 3px; width: 0; border-radius: 0 3px 3px 0;
  background: var(--step-accent); box-shadow: 0 0 10px var(--step-accent); opacity: 0; transition: opacity .3s; }
.cxflow .flow-step.is-active .fs-progress { opacity: .95; animation: fs-fill 4.2s linear both; }
.flywheel.cxflow:hover .flow-step.is-active .fs-progress { animation-play-state: paused; }

.cxflow .fs-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0;
  background: none; border: none; text-align: left; cursor: pointer; color: inherit; }
.cxflow .fs-head .num { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: .8rem; color: var(--muted);
  background: rgba(255,255,255,.04); border: 1px solid var(--border); transition: background .35s, color .35s, border-color .35s; }
.cxflow .flow-step.is-active .fs-head .num { background: var(--step-accent); border-color: transparent; color: #05070f; }
.cxflow .cx-ic { flex: none; width: 30px; height: 30px; margin-left: auto; border-radius: 9px; display: grid; place-items: center;
  color: var(--step-accent); background: color-mix(in srgb, var(--step-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--step-accent) 26%, transparent); transition: transform .35s var(--ease); }
.cxflow .cx-ic svg { width: 17px; height: 17px; }
.cxflow .flow-step.is-active .cx-ic { transform: scale(1.06); }

.cxflow .fs-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.03rem;
  color: var(--text); margin: 14px 0 0; padding: 0; }
.cxflow .fs-tag { display: inline-block; margin: 9px 0 0; align-self: auto; flex: none; opacity: .9;
  font-family: var(--font-display); font-size: .66rem; font-weight: 600; letter-spacing: .01em; text-transform: none;
  padding: 3px 9px; border-radius: 999px; color: var(--step-accent);
  background: color-mix(in srgb, var(--step-accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--step-accent) 28%, transparent); }
.cxflow .flow-step.is-active .fs-tag { opacity: 1; }
.cxflow .flow-step p { font-size: .9rem; color: var(--muted); margin: 12px 0 0; padding: 0; line-height: 1.55; }
.cxflow .fs-link { display: inline-flex; align-items: center; gap: 6px; max-height: none; overflow: visible;
  margin: 13px 0 0; font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--step-accent); opacity: .82; transition: opacity .3s; }
.cxflow .flow-step.is-active .fs-link { opacity: 1; }
.cxflow .fs-link svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.cxflow .fs-link:hover svg { transform: translateX(4px); }

.cxflow-note { text-align: center; margin: 24px auto 0; max-width: 640px; font-size: .95rem; color: var(--muted); }
.cxflow-note b { color: var(--text); font-weight: 600; }

/* flywheel motion */
.cxflow .fw-pulse { transform-box: fill-box; transform-origin: center; opacity: 0; animation: fw-pulse 3.6s ease-out infinite; }
@keyframes fw-pulse { 0% { transform: scale(1); opacity: .45; } 70%, 100% { transform: scale(1.85); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .cxflow .fw-pulse { animation: none; }
  .cxflow .flow-step.is-active .fs-progress { animation: none; width: 100%; }
}


/* ===================================================================
   Incident Response Retainer — bespoke components (.ir-*)
   =================================================================== */
.ir-wrap { --v: var(--violet); }

/* --- eligibility banner --- */
.ir-elig { display:flex; gap:16px; align-items:center; padding:18px 22px; border-radius:16px;
  border:1px solid color-mix(in srgb,var(--violet) 34%,transparent);
  background:linear-gradient(120deg, color-mix(in srgb,var(--violet) 13%,transparent), transparent 70%); }
.ir-elig-ic { flex:0 0 auto; width:48px; height:48px; border-radius:13px; display:grid; place-items:center; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 15%,transparent); border:1px solid color-mix(in srgb,var(--violet) 30%,transparent); }
.ir-elig-ic svg { width:25px; height:25px; }
.ir-elig h3 { margin:0 0 3px; font-size:1.06rem; }
.ir-elig p { margin:0; color:var(--muted); font-size:.93rem; line-height:1.5; }
.ir-elig b { color:#fff; font-weight:600; }

/* --- SOC L1-L3 -> L4 IR -> DFIR tiers --- */
.ir-tiers { display:flex; align-items:stretch; gap:0; flex-wrap:nowrap; }
.ir-soc, .ir-l4, .ir-dfir { border-radius:16px; border:1px solid var(--border); padding:16px; position:relative; }
.ir-soc { flex:1 1 auto; min-width:0; background:linear-gradient(160deg, color-mix(in srgb,var(--violet) 7%,transparent), transparent);
  border-color:color-mix(in srgb,var(--violet) 26%,transparent); }
.ir-grouplbl { display:inline-flex; align-items:center; gap:7px; font:600 .64rem/1 "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--violet); background:color-mix(in srgb,var(--violet) 12%,transparent); border:1px solid color-mix(in srgb,var(--violet) 26%,transparent);
  padding:5px 10px; border-radius:999px; margin-bottom:12px; }
.ir-grouplbl::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--violet); box-shadow:0 0 8px var(--violet); animation:ir-blink 1.6s ease-in-out infinite; }
.ir-lvls { display:flex; flex-direction:column-reverse; gap:8px; }
.ir-lvl { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; border:1px solid var(--border); background:rgba(255,255,255,.02); transition:border-color .3s, background .3s; }
.ir-lvl-n { flex:0 0 auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font:700 .74rem/1 "Space Grotesk",sans-serif;
  color:var(--violet); background:color-mix(in srgb,var(--violet) 12%,transparent); border:1px solid color-mix(in srgb,var(--violet) 26%,transparent); }
.ir-lvl b { display:block; font:600 .92rem/1.1 "Space Grotesk",sans-serif; color:#fff; }
.ir-lvl span { font:500 .78rem/1.2 "Inter",sans-serif; color:var(--muted); }
.ir-lvl.is-top { border-color:color-mix(in srgb,var(--violet) 45%,transparent); background:color-mix(in srgb,var(--violet) 9%,transparent); }
.ir-lvl.is-top .ir-lvl-n { background:var(--violet); color:#0a0f22; border-color:transparent; }

.ir-cross { flex:0 0 clamp(70px,9vw,120px); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; position:relative; padding:0 4px; }
.ir-cross-lbl { font:600 .58rem/1.25 "Inter",sans-serif; letter-spacing:.06em; text-transform:uppercase; text-align:center; color:var(--violet); }
.ir-cross-line { position:relative; width:100%; height:2px; border-radius:2px; background:color-mix(in srgb,var(--violet) 30%,transparent); }
.ir-cross-line::before { content:""; position:absolute; top:50%; left:0; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--violet); box-shadow:0 0 10px 1px var(--violet); animation:ir-cross-flow 1.9s cubic-bezier(.6,0,.4,1) infinite; }
.ir-cross-line::after { content:""; position:absolute; right:-1px; top:50%; width:7px; height:7px; margin-top:-3.5px;
  border-top:2px solid var(--violet); border-right:2px solid var(--violet); transform:translateY(-50%) rotate(45deg); }
.ir-cross.to-dfir .ir-cross-lbl { color:var(--muted-2); }
.ir-cross.to-dfir .ir-cross-line { background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--muted) 40%,transparent) 0 5px, transparent 5px 10px); }
.ir-cross.to-dfir .ir-cross-line::before { display:none; }
.ir-cross.to-dfir .ir-cross-line::after { border-color:color-mix(in srgb,var(--muted) 55%,transparent); }

.ir-l4 { flex:0 0 clamp(180px,20vw,230px); display:flex; flex-direction:column; justify-content:center; text-align:center; gap:10px;
  border-color:color-mix(in srgb,var(--violet) 55%,transparent);
  background:linear-gradient(165deg, color-mix(in srgb,var(--violet) 20%,var(--surface)), var(--surface));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--violet) 20%,transparent), 0 20px 50px -28px color-mix(in srgb,var(--violet) 90%,transparent); }
.ir-l4-badge { align-self:center; font:700 .62rem/1 "Inter",sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 15%,transparent); border:1px solid color-mix(in srgb,var(--violet) 34%,transparent); padding:4px 10px; border-radius:999px; }
.ir-l4-ic { width:52px; height:52px; margin:0 auto; border-radius:14px; display:grid; place-items:center; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 15%,transparent); border:1px solid color-mix(in srgb,var(--violet) 34%,transparent); animation:sv-core 3s ease-in-out infinite; }
.ir-l4-ic svg { width:28px; height:28px; }
.ir-l4 h3 { margin:0; font-size:1.12rem; color:#fff; }
.ir-l4 p { margin:0; font-size:.82rem; color:#c7d0e6; }

.ir-dfir { flex:0 0 clamp(150px,16vw,190px); display:flex; flex-direction:column; justify-content:center; text-align:center; gap:8px; opacity:.62;
  border-style:dashed; border-color:color-mix(in srgb,var(--muted) 45%,var(--border)); background:rgba(255,255,255,.012); }
.ir-dfir-ic { width:44px; height:44px; margin:0 auto; border-radius:12px; display:grid; place-items:center; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent); }
.ir-dfir-ic svg { width:23px; height:23px; }
.ir-dfir h3 { margin:0; font-size:1rem; color:#cdd6ea; }
.ir-dfir p { margin:0; font:600 .62rem/1.3 "Inter",sans-serif; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); }
.ir-dfir .ir-ext { font:500 .74rem/1.4 "Inter",sans-serif; letter-spacing:0; text-transform:none; color:var(--muted); }

/* --- draw-down meter --- */
.ir-drawdown { display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:center; }
.ir-meter { border:1px solid var(--border); border-radius:18px; padding:22px 24px; background:linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,0)); }
.ir-meter-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ir-meter-head b { font:700 1.05rem/1 "Space Grotesk",sans-serif; color:#fff; }
.ir-meter-head span { font:600 .82rem/1 "Inter",sans-serif; color:var(--violet); }
.ir-bar { display:flex; gap:5px; }
.ir-seg { flex:1; height:34px; border-radius:6px; background:rgba(255,255,255,.05); border:1px solid var(--border); position:relative; overflow:hidden; }
.ir-seg.used::after { content:""; position:absolute; inset:0; border-radius:inherit; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(180deg, color-mix(in srgb,var(--violet) 85%,#fff), var(--violet)); box-shadow:0 0 12px -2px var(--violet);
  animation:ir-fillseg .5s ease forwards; }
.ir-seg.used:nth-child(1)::after{animation-delay:.15s} .ir-seg.used:nth-child(2)::after{animation-delay:.3s}
.ir-seg.used:nth-child(3)::after{animation-delay:.45s} .ir-seg.used:nth-child(4)::after{animation-delay:.6s}
.ir-seg.used:nth-child(5)::after{animation-delay:.75s} .ir-seg.used:nth-child(6)::after{animation-delay:.9s}
.ir-meter-foot { display:flex; gap:18px; margin-top:12px; font:500 .78rem/1 "Inter",sans-serif; color:var(--muted); }
.ir-meter-foot i { display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:6px; vertical-align:-1px; }
.ir-meter-foot .used i { background:var(--violet); } .ir-meter-foot .free i { background:rgba(255,255,255,.12); }
.ir-dd-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.ir-dd-points li { display:flex; gap:12px; }
.ir-dd-ic { flex:0 0 auto; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 12%,transparent); border:1px solid color-mix(in srgb,var(--violet) 26%,transparent); }
.ir-dd-ic svg { width:20px; height:20px; }
.ir-dd-points b { display:block; font:600 .96rem/1.2 "Space Grotesk",sans-serif; color:#fff; margin-bottom:2px; }
.ir-dd-points span { font-size:.86rem; color:var(--muted); line-height:1.45; }

/* --- IR process with communications rail --- */
.ir-flow { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:12px; position:relative; }
.ir-ph { position:relative; border:1px solid var(--border); border-radius:14px; padding:16px 14px; background:linear-gradient(165deg, rgba(255,255,255,.028), rgba(255,255,255,0)); transition:transform .35s, border-color .35s; }
.ir-ph:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--violet) 42%,transparent); }
.ir-ph-n { font:700 .72rem/1 "Space Grotesk",sans-serif; color:var(--violet); }
.ir-ph-ic { width:38px; height:38px; margin:10px 0 12px; border-radius:11px; display:grid; place-items:center; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 12%,transparent); border:1px solid color-mix(in srgb,var(--violet) 26%,transparent); }
.ir-ph-ic svg { width:20px; height:20px; }
.ir-ph h3 { margin:0 0 6px; font-size:.98rem; }
.ir-ph p { margin:0; font-size:.82rem; color:var(--muted); line-height:1.45; }
.ir-comms { position:relative; margin-top:16px; display:flex; align-items:center; gap:14px; padding:14px 20px; border-radius:14px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--cyan) 34%,transparent); background:linear-gradient(90deg, color-mix(in srgb,var(--cyan) 12%,transparent), transparent); }
.ir-comms::after { content:""; position:absolute; top:0; left:0; height:100%; width:120px; pointer-events:none;
  background:linear-gradient(90deg, transparent, color-mix(in srgb,var(--cyan) 22%,transparent), transparent); animation:ir-comms-sweep 3.4s linear infinite; }
.ir-comms-ic { flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--cyan);
  background:color-mix(in srgb,var(--cyan) 14%,transparent); border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent); }
.ir-comms-ic svg { width:23px; height:23px; }
.ir-comms b { color:#fff; font-family:var(--font-display); }
.ir-comms p { margin:2px 0 0; font-size:.86rem; color:var(--muted); }

/* --- Teams war room --- */
.ir-teams { display:grid; grid-template-columns:1.05fr .95fr; gap:26px; align-items:center; }
.ir-tw { border:1px solid color-mix(in srgb,var(--violet) 30%,var(--border)); border-radius:16px; overflow:hidden; background:linear-gradient(180deg,#0b0f24,#080b1a); box-shadow:0 34px 80px -46px rgba(0,0,0,.9); }
.ir-tw-bar { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:1px solid var(--border); background:color-mix(in srgb,var(--violet) 9%,transparent); }
.ir-tw-bar .tw-ic { width:26px; height:26px; border-radius:7px; display:grid; place-items:center; color:#fff; background:#5b5fc7; }
.ir-tw-bar .tw-ic svg { width:15px; height:15px; }
.ir-tw-ch { font:700 .9rem/1 "Space Grotesk",sans-serif; color:#fff; }
.ir-tw-ch span { display:block; font:500 .68rem/1.3 "Inter",sans-serif; color:var(--muted); margin-top:2px; }
.ir-tw-live { margin-left:auto; display:inline-flex; align-items:center; gap:6px; font:700 .6rem/1 "Inter",sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--rose); }
.ir-tw-live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--rose); box-shadow:0 0 8px var(--rose); animation:ir-blink 1.3s ease-in-out infinite; }
.ir-tw-body { padding:14px 15px; display:flex; flex-direction:column; gap:11px; }
.ir-msg { display:flex; gap:10px; opacity:0; animation:ir-msg-in .5s ease forwards; }
.ir-msg:nth-child(1){animation-delay:.3s} .ir-msg:nth-child(2){animation-delay:.7s} .ir-msg:nth-child(3){animation-delay:1.1s} .ir-msg:nth-child(4){animation-delay:1.5s}
.ir-av { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 .68rem/1 "Space Grotesk",sans-serif; color:#0a0f22; }
.ir-msg-b { min-width:0; }
.ir-msg-b .who { font:600 .78rem/1 "Space Grotesk",sans-serif; color:#fff; }
.ir-msg-b .who span { font:500 .62rem/1 "Inter",sans-serif; color:var(--muted-2); margin-left:7px; }
.ir-msg-b .txt { margin-top:3px; font-size:.82rem; color:#c7d0e6; background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:9px; padding:7px 10px; }
.ir-tw-feats { list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ir-tw-feats li { display:flex; gap:11px; align-items:flex-start; font-size:.92rem; color:var(--text-2); }
.ir-tw-tick { flex:0 0 auto; width:22px; height:22px; border-radius:7px; display:grid; place-items:center; color:var(--violet);
  background:color-mix(in srgb,var(--violet) 13%,transparent); }
.ir-tw-tick svg { width:13px; height:13px; }

/* --- IR team roles --- */
.ir-team { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.ir-role { border:1px solid var(--border); border-radius:14px; padding:18px; background:linear-gradient(165deg, rgba(255,255,255,.028), rgba(255,255,255,0)); transition:transform .35s, border-color .35s; }
.ir-role:hover { transform:translateY(-4px); border-color:color-mix(in srgb,var(--rc,var(--violet)) 42%,transparent); }
.ir-role-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:12px; color:var(--rc,var(--violet));
  background:color-mix(in srgb,var(--rc,var(--violet)) 13%,transparent); border:1px solid color-mix(in srgb,var(--rc,var(--violet)) 26%,transparent); }
.ir-role-ic svg { width:23px; height:23px; }
.ir-role h3 { margin:0 0 5px; font-size:1.02rem; }
.ir-role p { margin:0; font-size:.86rem; color:var(--muted); line-height:1.45; }

/* --- IR vs DFIR scope boundary --- */
.ir-scope { display:grid; grid-template-columns:1fr auto 1fr; gap:0; align-items:stretch; }
.ir-scope-col { border:1px solid var(--border); border-radius:16px; padding:22px 24px; }
.ir-scope-col.in { border-color:color-mix(in srgb,var(--violet) 38%,transparent); background:linear-gradient(160deg, color-mix(in srgb,var(--violet) 9%,transparent), transparent); }
.ir-scope-col.out { border-style:dashed; border-color:color-mix(in srgb,var(--muted) 42%,var(--border)); background:rgba(255,255,255,.012); }
.ir-scope-hd { display:flex; align-items:center; gap:11px; margin-bottom:15px; }
.ir-scope-hd .sc-ic { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; }
.ir-scope-col.in .sc-ic { color:var(--violet); background:color-mix(in srgb,var(--violet) 14%,transparent); border:1px solid color-mix(in srgb,var(--violet) 30%,transparent); }
.ir-scope-col.out .sc-ic { color:var(--muted); background:rgba(255,255,255,.03); border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent); }
.ir-scope-hd .sc-ic svg { width:22px; height:22px; }
.ir-scope-hd b { display:block; font:700 1.05rem/1.1 "Space Grotesk",sans-serif; color:#fff; }
.ir-scope-hd span { font:600 .64rem/1 "Inter",sans-serif; letter-spacing:.08em; text-transform:uppercase; }
.ir-scope-col.in .ir-scope-hd span { color:var(--violet); }
.ir-scope-col.out .ir-scope-hd span { color:var(--muted-2); }
.ir-scope-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.ir-scope-col li { display:flex; gap:10px; font-size:.9rem; line-height:1.4; }
.ir-scope-col.in li { color:var(--text-2); }
.ir-scope-col.out li { color:var(--muted); }
.ir-scope-mk { flex:0 0 auto; width:20px; height:20px; border-radius:6px; display:grid; place-items:center; margin-top:1px; }
.ir-scope-col.in .ir-scope-mk { color:var(--violet); background:color-mix(in srgb,var(--violet) 14%,transparent); }
.ir-scope-col.out .ir-scope-mk { color:var(--muted-2); background:rgba(255,255,255,.04); }
.ir-scope-mk svg { width:12px; height:12px; }
.ir-scope-div { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; width:clamp(64px,7vw,100px); }
.ir-scope-div-line { width:2px; flex:1; background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--muted) 45%,transparent) 0 6px, transparent 6px 12px); }
.ir-scope-div span { writing-mode:vertical-rl; font:700 .58rem/1 "Inter",sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); }
.ir-scope-note { margin-top:16px; text-align:center; font-size:.9rem; color:var(--muted); }
.ir-scope-note b { color:#fff; font-weight:600; }

/* --- keyframes --- */
@keyframes ir-blink { 0%,100%{ opacity:1 } 50%{ opacity:.3 } }
@keyframes ir-cross-flow { 0%{ left:2%; opacity:0 } 12%{opacity:1} 88%{opacity:1} 100%{ left:calc(100% - 10px); opacity:0 } }
@keyframes ir-fillseg { to { transform:scaleX(1) } }
@keyframes ir-comms-sweep { 0%{ transform:translateX(-120px) } 100%{ transform:translateX(120vw) } }
@keyframes ir-msg-in { from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }
.ir-hero-signal { animation:ir-rise 3.6s cubic-bezier(.5,0,.4,1) infinite; }
@keyframes ir-rise { 0%{ transform:translate(0,0); opacity:0 } 6%{opacity:1} 46%{ transform:translate(140px,-120px); opacity:1 } 72%{ transform:translate(240px,-210px); opacity:1 } 86%,100%{ transform:translate(240px,-210px); opacity:0 } }

/* --- responsive --- */
@media (max-width:1000px){
  .ir-tiers{ flex-wrap:wrap; }
  .ir-soc{ flex:1 1 100%; } .ir-l4,.ir-dfir{ flex:1 1 45%; }
  .ir-cross{ flex:1 1 100%; flex-direction:row; }
  .ir-cross-line{ height:2px; }
}
@media (max-width:820px){
  .ir-drawdown,.ir-teams{ grid-template-columns:1fr; }
  .ir-flow{ grid-template-columns:1fr 1fr; }
  .ir-team{ grid-template-columns:1fr 1fr; }
  .ir-scope{ grid-template-columns:1fr; }
  .ir-scope-div{ width:100%; flex-direction:row; }
  .ir-scope-div-line{ width:100%; height:2px; background:repeating-linear-gradient(90deg, color-mix(in srgb,var(--muted) 45%,transparent) 0 6px, transparent 6px 12px); }
  .ir-scope-div span{ writing-mode:horizontal-tb; }
}
@media (max-width:560px){
  .ir-flow{ grid-template-columns:1fr; }
  .ir-team{ grid-template-columns:1fr; }
  .ir-tiers .ir-l4,.ir-tiers .ir-dfir{ flex:1 1 100%; }
}
@media (prefers-reduced-motion:reduce){
  .ir-cross-line::before,.ir-comms::after,.ir-hero-signal,.ir-l4-ic,.ir-grouplbl::before,.ir-tw-live::before,.ir-msg{ animation:none; }
  .ir-seg.used::after{ animation:none; transform:scaleX(1); }
  .ir-msg{ opacity:1; }
}

/* ===================================================================
   Casino & Gaming hero — animated protection hub (.gaming)
   =================================================================== */
.gaming .sc-link { stroke-dasharray: 5 7; animation: g-flow 1.5s linear infinite; }
@keyframes g-flow { to { stroke-dashoffset: -12; } }
.gaming .g-glow { transform-box: fill-box; transform-origin: center; animation: g-glow 5s ease-in-out infinite; }
@keyframes g-glow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.06); } }
.gaming .g-scan { transform-box: fill-box; transform-origin: center; animation: g-rot 9s linear infinite; }
.gaming .g-sweep { transform-box: view-box; transform-origin: 280px 190px; animation: g-rot 4.6s linear infinite; }
@keyframes g-rot { to { transform: rotate(360deg); } }
.gaming .g-corepulse { transform-box: fill-box; transform-origin: center; animation: g-corepulse 3.4s ease-in-out infinite; }
@keyframes g-corepulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } }
.gaming .g-chiptop { transform-box: fill-box; transform-origin: center; animation: g-chiptop 2.6s ease-in-out infinite; animation-delay: var(--cd, 0s); }
@keyframes g-chiptop { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
.gaming .g-threat { transform-box: view-box; transform-origin: 280px 190px; opacity: 0; animation: g-threat 6s ease-in-out infinite; }
@keyframes g-threat { 0%, 50% { opacity: 0; transform: scale(1.7); } 57% { opacity: .95; transform: scale(1.25); } 68% { opacity: .95; transform: scale(1.02); } 76% { opacity: 0; transform: scale(.72); } 100% { opacity: 0; } }
.gaming .g-block { transform-box: fill-box; transform-origin: center; opacity: 0; animation: g-block 6s ease-out infinite; }
@keyframes g-block { 0%, 66% { opacity: 0; transform: scale(.5); } 70% { opacity: .9; transform: scale(1); } 82% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gaming .g-glow, .gaming .g-scan, .gaming .g-sweep, .gaming .g-corepulse, .gaming .g-chiptop, .gaming .g-threat, .gaming .g-block, .gaming .sc-link { animation: none; }
  .gaming .g-threat, .gaming .g-block, .gaming .g-sweep { opacity: 0; }
}

/* ===================================================================
   Media & Entertainment hero — protected distribution (.media)
   =================================================================== */
.media .m-glow { transform-box: fill-box; transform-origin: center; animation: m-glow 3.6s ease-in-out infinite; }
@keyframes m-glow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .85; transform: scale(1.08); } }
.media .m-wm { animation: m-wm 3.6s ease-in-out infinite; }
@keyframes m-wm { 0%, 100% { opacity: .1; } 50% { opacity: .3; } }
.media .m-playhead { animation: m-playhead 3.4s linear infinite; }
@keyframes m-playhead { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateX(560px); opacity: 0; } }
.media .m-leak { transform-box: fill-box; transform-origin: center; opacity: 0; animation: m-leak 6s ease-in-out infinite; }
@keyframes m-leak { 0%, 54% { opacity: 0; transform: scale(.7); } 61% { opacity: .95; transform: scale(1.22); } 71% { opacity: .95; transform: scale(1); } 80% { opacity: 0; transform: scale(1.45); } 100% { opacity: 0; } }
.media .m-leak-lbl { opacity: 0; animation: m-leak-lbl 6s ease-in-out infinite; }
@keyframes m-leak-lbl { 0%, 56% { opacity: 0; } 64%, 76% { opacity: 1; } 84%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .media .m-glow, .media .m-wm, .media .m-playhead, .media .m-leak, .media .m-leak-lbl { animation: none; }
  .media .m-leak, .media .m-leak-lbl { opacity: 0; }
}

/* ===================================================================
   Value-prop cards (One accountable partner / No rip-and-replace /
   Transparency by default) — icon, colour & motion (.vcard)
   =================================================================== */
.vcard { position: relative; overflow: hidden;
  border-top: 2px solid color-mix(in srgb, var(--vc) 45%, var(--border));
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.vcard:hover { transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--vc) 55%, transparent);
  box-shadow: 0 24px 52px -28px color-mix(in srgb, var(--vc) 85%, transparent); }
.vcard-ic { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 18px;
  color: var(--vc); background: color-mix(in srgb, var(--vc) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--vc) 30%, transparent);
  animation: vcard-glow 3.2s ease-in-out infinite; animation-delay: var(--vd, 0s); }
.vcard-ic svg { width: 25px; height: 25px; }
.vcard h3, .vcard p { position: relative; z-index: 1; }
@keyframes vcard-glow { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vc) 0%, transparent); } 50% { box-shadow: 0 0 22px -2px color-mix(in srgb, var(--vc) 50%, transparent); } }
.vcard::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--vc) 12%, transparent), transparent);
  transform: skewX(-14deg); animation: vcard-sheen 6s ease-in-out infinite; animation-delay: var(--vd, 0s); }
@keyframes vcard-sheen { 0%, 55% { left: -65%; } 80%, 100% { left: 135%; } }
@media (prefers-reduced-motion: reduce) { .vcard-ic, .vcard::after { animation: none; } }

/* ===================================================================
   Energy & Utilities hero — one monitored grid (.energy e-*)
   =================================================================== */
.energy .e-glow { transform-box: fill-box; transform-origin: center; animation: e-glow 4s ease-in-out infinite; }
@keyframes e-glow { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.07); } }
.energy .e-scan { transform-box: fill-box; transform-origin: center; animation: e-rot 9s linear infinite; }
@keyframes e-rot { to { transform: rotate(360deg); } }
.energy .e-pulse { transform-box: fill-box; transform-origin: center; animation: e-pulse 3.4s ease-in-out infinite; }
@keyframes e-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.14); } }
.energy .e-hexpulse { transform-box: fill-box; transform-origin: center; animation: e-hexpulse 2.8s ease-in-out infinite; animation-delay: var(--hd, 0s); }
@keyframes e-hexpulse { 0%, 100% { opacity: .28; } 50% { opacity: .85; } }
.energy .e-anom { transform-box: fill-box; transform-origin: center; opacity: 0; animation: e-anom 5.5s ease-in-out infinite; }
@keyframes e-anom { 0%, 48% { opacity: 0; transform: scale(.6); } 56% { opacity: .95; transform: scale(1.22); } 67% { opacity: .95; transform: scale(1); } 78% { opacity: 0; transform: scale(1.5); } 100% { opacity: 0; } }
.energy .e-anom-lbl { opacity: 0; animation: e-anom-lbl 5.5s ease-in-out infinite; }
@keyframes e-anom-lbl { 0%, 50% { opacity: 0; } 58%, 74% { opacity: 1; } 82%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .energy .e-glow, .energy .e-scan, .energy .e-pulse, .energy .e-hexpulse, .energy .e-anom, .energy .e-anom-lbl { animation: none; }
  .energy .e-anom, .energy .e-anom-lbl { opacity: 0; }
}

/* ===================================================================
   Partners hero — white-label portal (.plart)
   =================================================================== */
.plart .pl-scan { transform-box: fill-box; transform-origin: center; animation: pl-rot 9s linear infinite; }
@keyframes pl-rot { to { transform: rotate(360deg); } }
.plart .pl-pulse { transform-box: fill-box; transform-origin: center; animation: pl-pulse 3.4s ease-in-out infinite; }
@keyframes pl-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.13); } }
.plart .pl-glow { transform-box: fill-box; transform-origin: center; animation: pl-pulse 4.4s ease-in-out infinite; }
.plart .pl-brand { opacity: 0; animation: pl-brand 8s ease-in-out infinite; animation-delay: var(--bd, 0s); }
@keyframes pl-brand { 0% { opacity: 0; } 3% { opacity: 1; } 22% { opacity: 1; } 26% { opacity: 0; } 100% { opacity: 0; } }
.plart .pl-gauge { stroke-dasharray: 189; stroke-dashoffset: 189; animation: pl-gauge 2.4s cubic-bezier(.3,0,.15,1) forwards .3s; }
@keyframes pl-gauge { to { stroke-dashoffset: 49; } }
.plart .pl-bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); animation: pl-bar 1.4s cubic-bezier(.3,0,.2,1) forwards; animation-delay: var(--bd, 0s); }
@keyframes pl-bar { to { transform: scaleX(1); } }
.plart .pl-row { opacity: 0; animation: pl-row .5s ease forwards; animation-delay: var(--bd, 0s); }
@keyframes pl-row { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .plart .pl-scan, .plart .pl-pulse, .plart .pl-glow, .plart .pl-brand, .plart .pl-gauge, .plart .pl-bar, .plart .pl-row { animation: none; }
  .plart .pl-brand:first-of-type { opacity: 1; }
  .plart .pl-gauge { stroke-dashoffset: 49; } .plart .pl-bar { transform: scaleX(1); } .plart .pl-row { opacity: 1; }
}

/* ===================================================================
   Deal registration console — living animation (overrides earlier pd-*)
   =================================================================== */
.pd-panel .pd-check { stroke-dasharray: 44; stroke-dashoffset: 44; animation: pd-check 6s ease-in-out infinite; }
@keyframes pd-check { 0%, 66% { stroke-dashoffset: 44; } 76% { stroke-dashoffset: 0; } 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 44; } }
.pd-panel .pd-scan { animation: pd-scan 4.2s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes pd-scan { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(202px); opacity: 0; } }
.pd-panel .pd-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: pd-ring 6s ease-out infinite; }
@keyframes pd-ring { 0%, 68% { opacity: 0; transform: scale(.6); } 74% { opacity: .7; transform: scale(1); } 90% { opacity: 0; transform: scale(1.55); } 100% { opacity: 0; } }
.pd-panel .pd-pending { animation: pd-pending 6s ease-in-out infinite; }
@keyframes pd-pending { 0%, 68% { opacity: 1; } 74%, 94% { opacity: 0; } 100% { opacity: 1; } }
.pd-panel .pd-approved { opacity: 0; animation: pd-approved 6s ease-in-out infinite; }
@keyframes pd-approved { 0%, 68% { opacity: 0; } 74%, 94% { opacity: 1; } 100% { opacity: 0; } }
.pd-panel .pd-rowglow { opacity: 0; animation: pd-rowglow 6s ease-out infinite; }
@keyframes pd-rowglow { 0%, 68% { opacity: 0; } 74% { opacity: .9; } 90%, 100% { opacity: 0; } }
.pd-panel .pd-expglow { opacity: 0; animation: pd-expglow 2.6s ease-in-out infinite; }
@keyframes pd-expglow { 0%, 100% { opacity: 0; } 50% { opacity: .7; } }
@media (prefers-reduced-motion: reduce) {
  .pd-panel .pd-scan, .pd-panel .pd-ring, .pd-panel .pd-pending, .pd-panel .pd-approved, .pd-panel .pd-rowglow, .pd-panel .pd-expglow { animation: none; opacity: 0; }
  .pd-panel .pd-pending { opacity: 1; }
  .pd-panel .pd-check { animation: none; stroke-dashoffset: 0; }
}

/* ===================================================================
   Learning Hub hero — knowledge hub animation (.lhart)
   =================================================================== */
.lhart .lh-scan { transform-box: fill-box; transform-origin: center; animation: lh-rot 11s linear infinite; }
@keyframes lh-rot { to { transform: rotate(360deg); } }
.lhart .lh-pulse { transform-box: fill-box; transform-origin: center; animation: lh-pulse 3.6s ease-in-out infinite; }
@keyframes lh-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.14); } }
.lhart .lh-glow { transform-box: fill-box; transform-origin: center; animation: lh-pulse 4.6s ease-in-out infinite; }
.lhart .lh-node { transform-box: fill-box; transform-origin: center; animation: lh-node 3.4s ease-in-out infinite; animation-delay: var(--nd, 0s); }
@keyframes lh-node { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.lhart .lh-ring { transform-box: fill-box; transform-origin: center; opacity: 0; animation: lh-ring 6s ease-out infinite; animation-delay: var(--ld, 0s); }
@keyframes lh-ring { 0% { opacity: .65; transform: scale(.72); } 12% { opacity: 0; transform: scale(1.32); } 100% { opacity: 0; transform: scale(1.32); } }
@media (prefers-reduced-motion: reduce) {
  .lhart .lh-scan, .lhart .lh-pulse, .lhart .lh-glow, .lhart .lh-node, .lhart .lh-ring { animation: none; }
  .lhart .lh-ring { opacity: 0; }
}

/* ---- Learning Hub: animated category legend boxes ---- */
.lk { position: relative; overflow: hidden; border-color: color-mix(in srgb, var(--lc, var(--border)) 26%, var(--border)); background: color-mix(in srgb, var(--lc, transparent) 5%, var(--surface)); transition: transform .3s var(--ease, ease), border-color .3s ease, box-shadow .3s ease; animation: lk-in .6s var(--ease, ease) both; animation-delay: var(--ld, 0s); }
.lk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--lc, var(--cyan)); opacity: .85; }
.lk::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--lc, #fff) 12%, transparent), transparent); transform: skewX(-14deg); animation: lk-sheen 6s ease-in-out infinite; animation-delay: var(--ld, 0s); }
.lk:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--lc) 55%, transparent); box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--lc) 85%, transparent); }
.lk:hover strong { color: var(--lc); }
.lk strong { transition: color .3s ease; }
.lk-dot { animation: lk-dot 2.8s ease-in-out infinite; animation-delay: var(--ld, 0s); }
.lk:nth-child(1) { --ld: 0s; } .lk:nth-child(2) { --ld: .12s; } .lk:nth-child(3) { --ld: .24s; } .lk:nth-child(4) { --ld: .36s; } .lk:nth-child(5) { --ld: .48s; }
@keyframes lk-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes lk-dot { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lc, #fff) 0%, transparent); } 50% { box-shadow: 0 0 11px 1px color-mix(in srgb, var(--lc, #fff) 75%, transparent); } }
@keyframes lk-sheen { 0%, 58% { left: -70%; } 82%, 100% { left: 140%; } }
@media (prefers-reduced-motion: reduce) {
  .lk, .lk-dot { animation: none; }
  .lk::after { display: none; }
}