/* ── Local fonts (brand kit) ──────────────────────── */
    @font-face {
      font-family: 'Space Grotesk';
      src: url('SOT%20BRAND%20IDENTITY/FONTS/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
      font-weight: 100 900;
      font-display: swap;
    }
    @font-face {
      font-family: 'Open Sans';
      src: url('SOT%20BRAND%20IDENTITY/FONTS/Open_Sans/static/OpenSans/OpenSans-Regular.ttf') format('truetype');
      font-weight: 400; font-display: swap;
    }
    @font-face {
      font-family: 'Open Sans';
      src: url('SOT%20BRAND%20IDENTITY/FONTS/Open_Sans/static/OpenSans/OpenSans-SemiBold.ttf') format('truetype');
      font-weight: 600; font-display: swap;
    }
    @font-face {
      font-family: 'Open Sans';
      src: url('SOT%20BRAND%20IDENTITY/FONTS/Open_Sans/static/OpenSans/OpenSans-Bold.ttf') format('truetype');
      font-weight: 700; font-display: swap;
    }

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

    :root {
      /* Brand palette — SOT Brandbook (DARK theme — default) */
      --charcoal:     #050F1B;   /* Blue Charcoal / Fundament */
      --vermilion:    #DC552A;   /* Vermilion / Call to Action */
      --pearl:        #F4F6F9;   /* Pearl Grey / Background */
      --onyx:         #30383F;   /* Onyx / Body on light */
      --silver:       #C9C9C9;   /* Silver / Body on dark */

      /* Derived tones */
      --charcoal-mid: #0B1A2B;
      --charcoal-alt: #091525;
      --vermilion-dk: #B8441F;
      --bd-dark:      rgba(255,255,255,0.07);
      --bd-light:     rgba(5,15,27,0.08);

      /* Semantic tokens (resolve per-theme) — use these in new CSS so
         the light/dark swap propagates without hardcoding hex everywhere. */
      --bg-page:      #050F1B;       /* main canvas */
      --bg-elev:      #0B1A2B;       /* elevated card */
      --bg-deeper:    #091525;       /* deeper layer */
      --text-strong:  #ffffff;       /* primary text */
      --text-soft:    #C9C9C9;       /* secondary text */
      --text-muted:   rgba(255,255,255,.55);
      --border-soft:  rgba(255,255,255,.07);
      --hairline:     rgba(255,255,255,.12);

      --font-h: 'Space Grotesk', sans-serif;
      --font-b: 'Open Sans', sans-serif;
    }

    /* ── LIGHT THEME — variable swap + targeted overrides ── */
    [data-theme="light"] {
      --charcoal:     #FFFFFF;       /* main canvas (was deep blue-charcoal) */
      --charcoal-mid: #F5F5F7;       /* elevated card */
      --charcoal-alt: #EAEAEC;       /* deeper layer */
      --silver:       #4A5560;       /* secondary text on light */
      --onyx:         #30383F;       /* primary body text on light */
      --bd-dark:      rgba(5,15,27,.10);
      --bd-light:     rgba(5,15,27,.16);

      --bg-page:      #FFFFFF;
      --bg-elev:      #F5F5F7;
      --bg-deeper:    #EAEAEC;
      --text-strong:  #050F1B;
      --text-soft:    #4A5560;
      --text-muted:   rgba(5,15,27,.55);
      --border-soft:  rgba(5,15,27,.08);
      --hairline:     rgba(5,15,27,.14);
    }

    /* Smooth cross-fade when toggling */
    html, body, section, nav, aside, footer,
    .show-card, .placeholder, .out-card, .ind-card,
    .achv-strip, .nav-mobile, .footer, .hero-eyebrow,
    .gauge-wrap, .ops-stat, .ops-terminal, .ops-sources,
    .ops-today, .ph-logo-stage, .news-ticker, .show-card.has-logo,
    .ph-logo-big, .show-logo-corner, .hero-h1, .hero-sub,
    .hero-rotate-product, .hero-rotate-vp, .ops-today-num,
    .ops-stat-num, .gauge-level, .gauge-sub, .gauge-label,
    .show-name, .show-meta, .show-text, .show-arrow,
    .ph-name, .ph-desc, .ph-meta, .ph-li, .ph-note,
    .out-num, .out-card-text, .stat-num, .stat-lbl,
    .achv-num, .achv-num-unit, .achv-text-title, .achv-text-sub,
    .off-city, .off-co, .off-co-tag, .off-addr, .off-clock-time,
    .off-clock-tz, .ops-line, .ops-time, .ops-tag, .ops-msg,
    .nav-logo-fallback {
      transition: background-color .35s ease, color .35s ease,
                  border-color .35s ease, box-shadow .35s ease;
    }

    /* Scroll behavior intentionally `auto`. The custom JS smooth-scroller
       at the bottom of this file uses requestAnimationFrame + per-frame
       window.scrollTo for a slower, distance-aware ease — and CSS
       `smooth` would re-smooth every one of those frame-level scrollTo
       calls, producing a stuttery cascade. So we explicitly opt out of
       CSS smoothing and let the JS own the animation. */
    html { scroll-behavior: auto; }

    body {
      font-family: var(--font-b);
      background: var(--charcoal);
      color: var(--silver);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ── Layout ───────────────────────────────────────── */
    .wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }

    section { padding: 28px 0; }

    /* ── Typography ───────────────────────────────────── */
    h1, h2, h3, h4 { font-family: var(--font-h); }

    .eyebrow {
      display: block;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 16px;
    }

    .sh {
      font-size: clamp(30px, 3.8vw, 50px);
      font-weight: 700;
      line-height: 1.12;
      letter-spacing: -0.025em;
    }

    /* ── Buttons ──────────────────────────────────────── */
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 28px;
      font-family: var(--font-b);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.01em;
      border-radius: 3px;
      text-decoration: none;
      transition: all .2s ease;
      cursor: pointer;
      border: none;
    }
    .btn-red        { background: var(--vermilion); color: #fff; }
    .btn-red:hover  { background: var(--vermilion-dk); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(220,85,42,.3); }
    .btn-ghost      { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.28); }
    .btn-ghost:hover{ border-color: #fff; background: rgba(255,255,255,.06); }
    .btn-ghost-dark { background: transparent; color: var(--charcoal); border: 1.5px solid var(--charcoal); }
    .btn-ghost-dark:hover { background: var(--charcoal); color: #fff; }

    /* ── Scroll reveal ────────────────────────────────── */
    .rv {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .65s ease, transform .65s ease;
    }
    .rv.in  { opacity: 1; transform: none; }
    .rv.d1  { transition-delay: .10s; }
    .rv.d2  { transition-delay: .20s; }
    .rv.d3  { transition-delay: .30s; }
    .rv.d4  { transition-delay: .40s; }

    /* ══════════════════════════════════════════════════
       NAVIGATION
    ══════════════════════════════════════════════════ */
    #nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 999;
      padding: 26px 0;
      /* Subtle baseline backdrop so the eyebrow underneath the nav band
         doesn't read through at scroll-y=0; the .scrolled state below
         then upgrades to full-blur once the user starts scrolling. */
      background: linear-gradient(to bottom, rgba(5,15,27,.72) 0%, rgba(5,15,27,0) 100%);
      transition: padding .3s ease, background .3s ease, border .3s ease;
    }
    #nav.scrolled {
      background: rgba(5,15,27,.96);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      padding: 15px 0;
      border-bottom: 1px solid var(--bd-dark);
    }
    .nav-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo { display: flex; align-items: center; text-decoration: none; }
    .nav-logo img { height: 50px; display: block; }
    .nav-logo-fallback {
      display: none;
      font-family: var(--font-h);
      font-size: 20px; font-weight: 700;
      color: #fff; letter-spacing: -0.03em;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
    }
    .nav-links a {
      color: rgba(255,255,255,.72);
      text-decoration: none;
      font-size: 13.5px; font-weight: 600;
      letter-spacing: .01em;
      transition: color .2s;
    }
    .nav-links a:hover { color: #fff; }
    .nav-cta { padding: 10px 22px !important; border-radius: 3px; }
    .nav-burger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer; padding: 4px;
    }
    .nav-burger span { display: block; width: 22px; height: 2px; background: #fff; transition: .3s; }

    /* Mobile nav panel */
    .nav-mobile {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      background: rgba(5,15,27,.98);
      border-top: 1px solid var(--bd-dark);
      padding: 28px 48px 36px;
      flex-direction: column;
      gap: 22px;
    }
    .nav-mobile.open { display: flex; }
    .nav-mobile a {
      color: rgba(255,255,255,.8);
      text-decoration: none;
      font-size: 16px; font-weight: 600;
      transition: color .2s;
    }
    .nav-mobile a:hover { color: #fff; }

    /* ══════════════════════════════════════════════════
       HERO
    ══════════════════════════════════════════════════ */
    #hero {
      /* News ticker lives at the very top of the page now, so the
         hero takes the full remaining viewport. */
      min-height: calc(100vh - var(--ticker-h));
      background: var(--charcoal);
      display: flex;
      align-items: stretch;       /* let .wrap fill the height */
      position: relative;
      overflow: hidden;
      padding-top: 110px;          /* clears fixed nav (~102px) */
      padding-bottom: 30px;        /* small breath above next section */
    }
    #hero > .wrap {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    #hero .hero-grid {
      flex: 1;                     /* takes remaining height between
                                      padding-top and .hero-bottom */
      align-content: center;       /* centres rows in the column track */
    }
    /* dot-grid texture */
    #hero::before {
      content: '';
      position: absolute; inset: 0;
      background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
      background-size: 40px 40px;
      mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 85% 85% at 50% 50%, black 0%, transparent 100%);
    }
    /* orange glow top-right */
    #hero::after {
      content: '';
      position: absolute;
      top: -200px; right: -100px;
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(220,85,42,.13) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-glow-bl {
      position: absolute;
      bottom: -220px; left: -130px;
      width: 520px; height: 520px;
      background: radial-gradient(circle, rgba(220,85,42,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-content {
      position: relative;
      z-index: 1;
      max-width: 820px;
    }
    .hero-pill {
      display: inline-flex;
      align-items: center; gap: 9px;
      padding: 7px 18px;
      border: 1px solid rgba(220,85,42,.45);
      border-radius: 100px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 36px;
    }
    .hero-pill-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: var(--vermilion);
      animation: blink 2s infinite;
    }
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: .3; }
    }
    .hero-eyebrow {
      display: inline-flex;
      align-items: center; gap: 9px;
      font-size: 11px; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(255,255,255,.72);
      margin-bottom: 32px;
    }
    .hero-eyebrow-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 10px rgba(220,85,42,.7);
      animation: blink 2s infinite;
    }
    .hero-h1 {
      font-size: clamp(38px, 4.6vw, 62px);
      font-weight: 800;
      line-height: 1.08;
      letter-spacing: -0.035em;
      color: #fff;
      margin-bottom: 32px;
      min-height: calc(2 * 1.08em + 0.62em);  /* reserve space so rotation doesn't reflow page */
    }
    .hero-h1 em { font-style: normal; color: var(--vermilion); }
    .hero-rotate-product,
    .hero-rotate-vp {
      display: inline-block;
      will-change: opacity, transform;
      transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
    }
    .hero-rotate-product {
      font-size: 1em;
      letter-spacing: -0.04em;
    }
    .hero-rotate-vp {
      font-size: 0.5em;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.005em;
      line-height: 1.25;
      margin-top: 14px;
      max-width: 22ch;
      vertical-align: top;
    }
    .hero-sub {
      font-size: 18px; line-height: 1.65;
      color: rgba(255,255,255,.78);
      max-width: 600px;
      margin-bottom: 40px;
    }
    .hero-ctas { display: flex; gap: 18px; flex-wrap: wrap; }
    .hero-content .hero-ctas { margin-top: 8px; }

    /* scroll indicator */
    .scroll-hint {
      position: absolute;
      bottom: 12px; left: 50%;
      transform: translateX(-50%);
      display: flex; flex-direction: column;
      align-items: center; gap: 6px;
      font-size: 10px; letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(255,255,255,.25);
    }
    .scroll-mouse {
      width: 22px; height: 34px;
      border: 1.5px solid rgba(255,255,255,.18);
      border-radius: 11px;
      position: relative;
    }
    .scroll-mouse::after {
      content: '';
      position: absolute;
      top: 5px; left: 50%;
      transform: translateX(-50%);
      width: 3px; height: 7px;
      background: rgba(255,255,255,.35);
      border-radius: 2px;
      animation: scrolld 2s infinite;
    }
    @keyframes scrolld {
      0%  { top: 5px; opacity: 1; }
      100%{ top: 18px; opacity: 0; }
    }

    /* ══════════════════════════════════════════════════
       COGNITIVE SECURITY MODEL
    ══════════════════════════════════════════════════ */
    #cognitive {
      background: var(--charcoal-mid);
      padding: 50px 0;
      position: relative;
      overflow: hidden;
    }
    .cog-ring {
      position: absolute;
      border-radius: 50%;
      border: 1px solid rgba(220,85,42,.06);
      pointer-events: none;
    }
    .cog-ring-1 { width: 640px; height: 640px; top: -280px; right: -200px; }
    .cog-ring-2 { width: 380px; height: 380px; top: -150px; right: -60px; }

    /* Centred animated orbital geometry — sits behind the text */
    .cog-orbit {
      position: absolute;
      left: 50%; top: 50%;
      width: 720px; height: 720px;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      opacity: .55;
    }
    .cog-orbit-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(220,85,42,.12);
      transform-origin: center;
    }
    .cog-orbit-ring.r1 { animation: orbit-spin 60s linear infinite; }
    .cog-orbit-ring.r2 {
      inset: 60px; border-color: rgba(220,85,42,.18);
      border-style: dashed;
      animation: orbit-spin 90s linear infinite reverse;
    }
    .cog-orbit-ring.r3 {
      inset: 130px; border-color: rgba(220,85,42,.10);
      animation: orbit-spin 120s linear infinite;
    }
    /* sparks travelling along the rings */
    .cog-orbit-spark {
      position: absolute;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 16px rgba(220,85,42,.85);
      top: 50%; left: 50%;
      margin: -4px 0 0 -4px;
      transform-origin: 4px 4px;
      animation: orbit-spark 14s linear infinite;
    }
    .cog-orbit-spark.s1 { animation-duration: 18s; }
    .cog-orbit-spark.s2 { animation-duration: 22s; animation-delay: -7s; }
    .cog-orbit-spark.s3 { animation-duration: 26s; animation-delay: -12s; }
    @keyframes orbit-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @keyframes orbit-spark {
      from { transform: rotate(0deg) translateX(360px); }
      to   { transform: rotate(360deg) translateX(360px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .cog-orbit-ring, .cog-orbit-spark { animation: none !important; }
    }
    .cog-inner {
      max-width: 780px;
      margin: 0 auto;
      text-align: center;
      position: relative; z-index: 1;
    }
    .cog-h2 {
      font-size: clamp(26px, 3vw, 42px);
      font-weight: 600;
      line-height: 1.2;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 22px;
    }
    .cog-body { font-size: 17px; line-height: 1.75; color: var(--silver); }

    /* ══════════════════════════════════════════════════
       SOLUTIONS
    ══════════════════════════════════════════════════ */
    #services { background: var(--pearl); }
    .sol-hdr { max-width: 540px; margin-bottom: 60px; }
    .sol-hdr .sh { color: var(--charcoal); }
    .sol-hdr p  { color: var(--onyx); font-size: 16px; line-height: 1.65; margin-top: 16px; }
    .sol-hdr .eyebrow { color: var(--vermilion); }

    .sol-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
      background: rgba(0,0,0,.07);
    }
    .sol-card {
      background: #fff;
      padding: 42px 30px;
      transition: background .3s ease, transform .3s ease;
    }
    .sol-card:hover {
      background: var(--charcoal);
      transform: translateY(-6px);
      box-shadow: 0 20px 48px rgba(0,0,0,.4);
    }
    .sol-card:hover .sol-icon  { color: var(--vermilion); }
    .sol-card:hover .sol-title { color: #fff; }
    .sol-card:hover .sol-item  { color: var(--silver); }
    .sol-card:hover .sol-dot   { background: var(--vermilion); }

    .sol-icon  { width: 46px; height: 46px; color: var(--charcoal); margin-bottom: 22px; transition: color .3s; }
    .sol-title {
      font-family: var(--font-h);
      font-size: 17px; font-weight: 700;
      color: var(--charcoal); margin-bottom: 18px;
      transition: color .3s;
    }
    .sol-items { list-style: none; display: flex; flex-direction: column; gap: 9px; }
    .sol-item  {
      font-size: 13.5px; color: var(--onyx);
      display: flex; align-items: flex-start; gap: 10px;
      line-height: 1.4; transition: color .3s;
    }
    .sol-dot {
      flex-shrink: 0;
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--vermilion);
      margin-top: 5.5px;
      transition: background .3s;
    }

    /* ══════════════════════════════════════════════════
       PRODUCTS
    ══════════════════════════════════════════════════ */
    #products { background: var(--charcoal); }
    .prod-hdr {
      text-align: center; max-width: 620px;
      margin: 0 auto 36px;
    }
    .prod-hdr .sh { color: #fff; }
    .prod-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 16px; }
    .prod-hdr .eyebrow { color: var(--vermilion); }

    .prod-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .prod-card { padding: 56px 48px; position: relative; overflow: hidden; }
    .prod-card.dk  { background: var(--charcoal-mid); border: 1px solid var(--bd-dark); }
    .prod-card.red { background: var(--vermilion); }

    .prod-tag {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 2px;
      margin-bottom: 26px;
    }

    /* Product logos */
    .prod-logo {
      display: block;
      height: 64px;
      width: auto;
      margin-bottom: 28px;
    }
    .prod-card.red .prod-logo {
      /* on the orange background — render in white to stay legible */
      filter: brightness(0) invert(1);
    }
    /* BreachShield logo — scale + glow on hover */
    .bs-logo-anim {
      transition: transform 0.45s cubic-bezier(.4,0,.2,1), filter 0.45s ease;
      cursor: pointer;
    }
    .bs-logo-anim:hover {
      transform: scale(1.10);
      filter: drop-shadow(0 0 14px rgba(220,85,42,0.55));
    }

    /* FraudShield logo — gentle scale-up on hover */
    .fs-logo-anim {
      transition: transform 0.45s cubic-bezier(.4,0,.2,1);
      cursor: pointer;
    }
    .fs-logo-anim:hover { transform: scale(1.12); }

    /* Animated object-embedded logo (BreachShield hero) */
    object.prod-logo-anim {
      border: 0;
      background: transparent;
      pointer-events: auto;
    }
    .prod-card.dk  .prod-tag { background: rgba(220,85,42,.15); color: var(--vermilion); }
    .prod-card.red .prod-tag { background: rgba(255,255,255,.2); color: #fff; }

    .prod-name {
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 700; letter-spacing: -0.025em;
      margin-bottom: 6px;
    }
    .prod-card.dk  .prod-name { color: #fff; }
    .prod-card.red .prod-name { color: #fff; }

    .prod-sub {
      font-size: 12px; font-weight: 700;
      letter-spacing: .08em; text-transform: uppercase;
      margin-bottom: 24px; opacity: .65;
    }
    .prod-card.dk  .prod-sub { color: var(--silver); }
    .prod-card.red .prod-sub { color: rgba(255,255,255,.9); }

    .prod-desc { font-size: 15px; line-height: 1.72; margin-bottom: 32px; }
    .prod-card.dk  .prod-desc { color: var(--silver); }
    .prod-card.red .prod-desc { color: rgba(255,255,255,.88); }

    .prod-feats { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 42px; }
    .prod-feat  { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
    .prod-card.dk  .prod-feat { color: var(--silver); }
    .prod-card.red .prod-feat { color: rgba(255,255,255,.9); }
    .prod-feat svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
    .prod-card.dk  .prod-feat svg { color: var(--vermilion); }
    .prod-card.red .prod-feat svg { color: rgba(255,255,255,.8); }

    .prod-link {
      font-size: 14px; font-weight: 700;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 6px;
      transition: gap .2s;
    }
    .prod-link:hover { gap: 11px; }
    .prod-card.dk  .prod-link { color: var(--vermilion); }
    .prod-card.red .prod-link { color: #fff; }

    /* Platform integration banner */
    .prod-banner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 40px;
      margin-top: 3px;
      background: var(--charcoal-alt);
      border: 1px solid var(--bd-dark);
      padding: 52px 48px;
    }
    .prod-banner-left .pb-eyebrow {
      font-size: 11px; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--vermilion); margin-bottom: 12px;
    }
    .prod-banner-left h3 {
      font-size: clamp(20px, 2vw, 26px);
      font-weight: 600; color: #fff;
      line-height: 1.3; letter-spacing: -0.015em;
      margin-bottom: 10px;
    }
    .prod-banner-left p { font-size: 15px; color: var(--silver); line-height: 1.62; }

    /* ── Product detail sub-sections ─────────────────── */
    .prod-block { margin-top: 48px; }
    .prod-block-title {
      max-width: 760px;
      margin: 0 0 36px;
    }
    .prod-block-title .ebr {
      font-size: 11px; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--vermilion); margin-bottom: 14px; display: block;
    }
    .prod-block-title h3 {
      font-size: clamp(24px, 2.8vw, 36px);
      font-weight: 700; color: #fff;
      line-height: 1.18; letter-spacing: -0.025em;
    }
    .prod-block-title p {
      font-size: 16px; color: var(--silver);
      line-height: 1.65; margin-top: 14px;
    }

    /* Process / steps */
    .step-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 3px;
    }
    .step-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 32px 26px;
      transition: border-color .3s, transform .3s;
    }
    .step-card:hover { border-color: rgba(220,85,42,.35); transform: translateY(-4px); }
    .step-num {
      font-family: var(--font-h);
      font-size: 13px; font-weight: 700;
      color: var(--vermilion);
      letter-spacing: .15em;
      margin-bottom: 16px;
    }
    .step-title {
      font-family: var(--font-h);
      font-size: 16px; font-weight: 700;
      color: #fff; line-height: 1.3;
      margin-bottom: 12px;
    }
    .step-text { font-size: 13.5px; color: var(--silver); line-height: 1.6; }

    /* Big stat callout */
    .stat-call {
      background: linear-gradient(135deg, var(--vermilion), var(--vermilion-dk));
      padding: 28px 48px;
      display: grid;
      grid-template-columns: 1fr 1.2fr;
      gap: 48px;
      align-items: center;
      margin: 28px 0;
    }
    .stat-call-num {
      font-family: var(--font-h);
      font-size: clamp(56px, 7vw, 96px);
      font-weight: 700; color: #fff;
      line-height: .95; letter-spacing: -0.04em;
    }
    .stat-call-num small {
      display: block;
      font-size: 14px; font-weight: 600;
      letter-spacing: .15em; text-transform: uppercase;
      margin-top: 12px; opacity: .8;
    }
    .stat-call-body { color: rgba(255,255,255,.95); font-size: 16px; line-height: 1.7; }
    .stat-call-body strong { color: #fff; font-weight: 700; }

    /* Streams comparison */
    .streams-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .stream-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 40px 36px;
    }
    .stream-card.primary { border-color: rgba(220,85,42,.4); background: var(--charcoal-alt); }
    .stream-tag {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 2px;
      background: rgba(255,255,255,.08); color: var(--silver);
      margin-bottom: 16px;
    }
    .stream-card.primary .stream-tag { background: rgba(220,85,42,.18); color: var(--vermilion); }
    .stream-name {
      font-family: var(--font-h);
      font-size: 22px; font-weight: 700;
      color: #fff; margin-bottom: 14px;
      letter-spacing: -0.02em;
    }
    .stream-desc { font-size: 14.5px; color: var(--silver); line-height: 1.65; margin-bottom: 18px; }
    .stream-tagline {
      font-family: var(--font-h);
      font-size: 13px; font-weight: 600;
      letter-spacing: .03em;
    }
    .stream-card.primary .stream-tagline { color: var(--vermilion); }
    .stream-card:not(.primary) .stream-tagline { color: rgba(255,255,255,.5); font-style: italic; }

    /* Numbers grid */
    .nums-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .num-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 40px 32px;
    }
    .num-big {
      font-family: var(--font-h);
      font-size: clamp(36px, 4vw, 56px);
      font-weight: 700; color: var(--vermilion);
      letter-spacing: -0.03em; line-height: 1;
      margin-bottom: 16px;
    }
    .num-lbl {
      font-size: 11px; font-weight: 700;
      letter-spacing: .15em; text-transform: uppercase;
      color: rgba(255,255,255,.5);
      margin-bottom: 10px;
    }
    .num-text { font-size: 14px; color: var(--silver); line-height: 1.62; }

    /* Capability grid */
    .caps-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .cap-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 32px 28px;
      transition: border-color .3s, transform .3s;
    }
    .cap-card:hover { border-color: rgba(220,85,42,.35); transform: translateY(-3px); }
    .cap-icon {
      width: 32px; height: 32px;
      color: var(--vermilion);
      margin-bottom: 18px;
    }
    .cap-title {
      font-family: var(--font-h);
      font-size: 15px; font-weight: 700;
      color: #fff; line-height: 1.3;
      margin-bottom: 10px;
    }
    .cap-text { font-size: 13.5px; color: var(--silver); line-height: 1.6; }

    /* Sub-products */
    .sub-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .sub-grid.two { grid-template-columns: repeat(2, 1fr); }
    .sub-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 32px 28px;
      position: relative;
      transition: border-color .3s, transform .3s;
    }
    .sub-card:hover { border-color: rgba(220,85,42,.4); transform: translateY(-4px); }
    .sub-status {
      position: absolute; top: 20px; right: 24px;
      font-size: 9px; font-weight: 700;
      letter-spacing: .15em; text-transform: uppercase;
      padding: 3px 8px; border-radius: 2px;
      background: rgba(255,255,255,.08);
      color: rgba(255,255,255,.55);
    }
    .sub-status.live { background: rgba(34,197,94,.15); color: #22c55e; }
    .sub-status.soon { background: rgba(220,85,42,.15); color: var(--vermilion); }
    .sub-name {
      font-family: var(--font-h);
      font-size: 19px; font-weight: 700;
      color: #fff; margin-bottom: 10px;
      letter-spacing: -0.015em;
      padding-right: 90px;
    }
    .sub-desc { font-size: 14px; color: var(--silver); line-height: 1.6; }

    /* Mini-feature grid (9 items) */
    .feat9-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .feat9-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 28px 24px;
      transition: border-color .3s;
    }
    .feat9-card:hover { border-color: rgba(220,85,42,.3); }
    .feat9-name {
      font-family: var(--font-h);
      font-size: 14px; font-weight: 700;
      color: #fff; margin-bottom: 8px;
    }
    .feat9-text { font-size: 13px; color: var(--silver); line-height: 1.55; }

    /* Architecture (BI / FP) */
    .arch-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3px;
    }
    .arch-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 40px 36px;
    }
    .arch-tag {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 2px;
      background: rgba(220,85,42,.15);
      color: var(--vermilion);
      margin-bottom: 18px;
    }
    .arch-name {
      font-family: var(--font-h);
      font-size: 22px; font-weight: 700;
      color: #fff; margin-bottom: 18px;
      letter-spacing: -0.02em;
    }
    .arch-list { list-style: none; display: flex; flex-direction: column; gap: 14px; }
    .arch-li {
      font-size: 14px; color: var(--silver);
      line-height: 1.6;
      padding-left: 20px;
      position: relative;
    }
    .arch-li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 8px; height: 1px;
      background: var(--vermilion);
    }

    /* Section divider for FraudShield */
    .prod-divider {
      height: 1px;
      background: var(--bd-dark);
      margin: 48px 0;
    }

    /* ── Product Showcase grid (modular catalog at top) ─ */
    .showcase { margin: 12px 0 0; }
    .showcase-row {
      display: grid;
      gap: 3px;
      margin-bottom: 3px;
    }
    .showcase-row.flagships { grid-template-columns: 1fr 1fr; }
    .showcase-row.subs      { grid-template-columns: repeat(2, 1fr); }

    .show-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 36px 32px;
      position: relative;
      text-decoration: none;
      color: inherit;
      display: block;
      transition: background .3s, border-color .3s, transform .3s;
      cursor: pointer;
    }
    .show-card:hover {
      background: var(--charcoal-alt);
      border-color: rgba(220,85,42,.4);
      transform: translateY(-4px);
    }
    .show-card.flagship { padding: 44px 40px; }
    .show-card.flagship.fs {
      border-color: rgba(220,85,42,.28);
      background: linear-gradient(135deg, var(--charcoal-mid) 0%, rgba(220,85,42,.07) 100%);
    }
    .show-card.flagship.fs:hover { border-color: var(--vermilion); }

    .show-status {
      position: absolute; top: 22px; right: 22px;
      font-size: 9px; font-weight: 700;
      letter-spacing: .15em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 2px;
    }
    .show-status.live { background: rgba(34,197,94,.15); color: #22c55e; }
    .show-status.soon { background: rgba(220,85,42,.15); color: var(--vermilion); }

    .show-tag {
      display: inline-block;
      font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 4px 10px; border-radius: 2px;
      background: rgba(220,85,42,.12);
      color: var(--vermilion);
      margin-bottom: 18px;
    }
    .show-logo {
      display: block;
      height: 56px; width: auto;
      margin-bottom: 22px;
    }
    .show-card.flagship .show-logo { height: 64px; margin-bottom: 24px; }
    .show-name {
      font-family: var(--font-h);
      font-size: 24px; font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
      margin-bottom: 6px;
    }
    .show-card.flagship .show-name { font-size: 32px; }
    /* Sub-card corner logo (DNSShield etc.) — fills the freed-up right space without changing card height. */
    .show-card.has-logo { padding-right: 88px; }
    .show-logo-corner {
      position: absolute;
      top: 22px; right: 22px;
      width: 56px; height: 56px;
      object-fit: contain;
      filter: drop-shadow(0 4px 14px rgba(220,85,42,.35));
      transition: transform .35s ease;
    }
    .show-card.has-logo:hover .show-logo-corner { transform: rotate(-6deg) scale(1.06); }
    .show-meta {
      font-size: 12px; font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.42);
      margin-bottom: 18px;
    }
    .show-text {
      font-size: 14px;
      color: var(--silver);
      line-height: 1.6;
      margin-bottom: 22px;
    }
    .show-arrow {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 13px; font-weight: 700;
      color: var(--vermilion);
      transition: gap .25s;
    }
    .show-card:hover .show-arrow { gap: 11px; }

    /* Stub / placeholder sections (Coming Soon products) */
    .ph-logo {
      display: block;
      height: 64px; width: auto;
      margin-bottom: 22px;
      filter: drop-shadow(0 6px 18px rgba(220,85,42,.32));
    }
    .placeholder {
      margin-top: 40px;
      padding: 28px 48px;
      background: var(--charcoal-alt);
      border: 1px solid var(--bd-dark);
      border-left: 3px solid var(--vermilion);
      position: relative;
    }
    /* Two-column variant — text left, big logo right (e.g. DNSShield) */
    .placeholder.has-big-logo {
      display: grid;
      grid-template-columns: 1fr minmax(300px, 380px);
      gap: 56px;
      align-items: center;
      overflow: hidden;
    }
    .placeholder.has-big-logo .ph-list { grid-template-columns: 1fr; max-width: none; }
    .ph-logo-stage {
      position: relative;
      align-self: center;
      width: 100%;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .ph-logo-halo {
      position: absolute;
      top: 50%; left: 50%;
      width: 520px; height: 520px;
      margin: -260px 0 0 -260px;
      background: radial-gradient(circle,
        rgba(220,85,42,.30) 0%,
        rgba(220,85,42,.14) 28%,
        rgba(220,85,42,.04) 56%,
        transparent 72%);
      filter: blur(10px);
      animation: ph-halo-pulse 5.5s ease-in-out infinite;
      z-index: 0;
    }
    .ph-logo-ring {
      position: absolute;
      top: 50%; left: 50%;
      width: 360px; height: 360px;
      margin: -180px 0 0 -180px;
      border: 1px dashed rgba(220,85,42,.30);
      border-radius: 50%;
      animation: ph-ring-rot 30s linear infinite;
      z-index: 0;
    }
    .ph-logo-ring.inner {
      width: 290px; height: 290px;
      margin: -145px 0 0 -145px;
      border-style: dotted;
      border-color: rgba(220,85,42,.18);
      animation: ph-ring-rot 22s linear infinite reverse;
    }
    .ph-logo-big {
      position: relative;
      width: 260px; height: 260px;
      object-fit: contain;
      filter: drop-shadow(0 18px 50px rgba(220,85,42,.45));
      animation: ph-logo-float 6s ease-in-out infinite;
      z-index: 1;
    }
    @keyframes ph-logo-float {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }
    @keyframes ph-halo-pulse {
      0%, 100% { opacity: .85; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.06); }
    }
    @keyframes ph-ring-rot {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    @media (max-width: 900px) {
      .placeholder.has-big-logo {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .ph-logo-stage { order: -1; min-height: 280px; }
      .ph-logo-big { width: 200px; height: 200px; }
      .ph-logo-halo { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
      .ph-logo-ring { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
      .ph-logo-ring.inner { width: 220px; height: 220px; margin: -110px 0 0 -110px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ph-logo-big, .ph-logo-halo, .ph-logo-ring { animation: none; }
    }
    .ph-status {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: 10px; font-weight: 700;
      letter-spacing: .2em; text-transform: uppercase;
      padding: 6px 14px; border-radius: 100px;
      background: rgba(220,85,42,.15);
      color: var(--vermilion);
      margin-bottom: 20px;
    }
    .ph-status::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      animation: blink 2s infinite;
    }
    .ph-name {
      font-family: var(--font-h);
      font-size: clamp(28px, 3.4vw, 44px);
      font-weight: 700; color: #fff;
      letter-spacing: -0.025em;
      line-height: 1.15;
      margin-bottom: 10px;
    }
    .ph-meta {
      font-size: 12px; font-weight: 700;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.42);
      margin-bottom: 22px;
    }
    .ph-desc {
      font-size: 16.5px;
      color: var(--silver);
      line-height: 1.65;
      max-width: 720px;
      margin-bottom: 28px;
    }
    .ph-list {
      list-style: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px 32px;
      max-width: 760px;
      margin-bottom: 32px;
    }
    .ph-li {
      font-size: 14px;
      color: var(--silver);
      line-height: 1.55;
      padding-left: 18px;
      position: relative;
    }
    .ph-li::before {
      content: '';
      position: absolute;
      left: 0; top: 8px;
      width: 8px; height: 1px;
      background: var(--vermilion);
    }
    .ph-actions {
      display: flex; gap: 16px;
      flex-wrap: wrap; align-items: center;
    }
    .ph-note {
      font-size: 12.5px;
      color: rgba(255,255,255,.4);
      font-style: italic;
    }

    /* anchor offset for fixed nav — kept here as a more specific
       override only for the product cards in case section[id] gets
       overridden elsewhere. Matches the section[id] global (100px). */
    [id="breachshield"], [id="fraudshield"],
    [id="dnsshield"], [id="fraud-sdk"] {
      scroll-margin-top: 100px;
    }

    @media (max-width: 1100px) {
      .showcase-row.flagships { grid-template-columns: 1fr; }
      .showcase-row.subs      { grid-template-columns: 1fr; }
      .show-card.sub .show-name { padding-right: 0; }
      .ph-list { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .placeholder    { padding: 40px 28px; }
      .show-card      { padding: 32px 26px; }
      .show-card.flagship { padding: 36px 28px; }
    }

    /* Responsive overrides for product details */
    @media (max-width: 1100px) {
      .step-grid  { grid-template-columns: repeat(2, 1fr); }
      .caps-grid  { grid-template-columns: repeat(2, 1fr); }
      .feat9-grid { grid-template-columns: repeat(2, 1fr); }
      .nums-grid  { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .stat-call    { grid-template-columns: 1fr; gap: 24px; padding: 40px 32px; }
      .streams-grid { grid-template-columns: 1fr; }
      .arch-grid    { grid-template-columns: 1fr; }
      .sub-grid, .sub-grid.two { grid-template-columns: 1fr; }
    }
    @media (max-width: 680px) {
      .step-grid  { grid-template-columns: 1fr; }
      .caps-grid  { grid-template-columns: 1fr; }
      .feat9-grid { grid-template-columns: 1fr; }
      .arch-card  { padding: 32px 24px; }
      .stream-card { padding: 32px 24px; }
    }

    /* ══════════════════════════════════════════════════
       WHY SOTERYAN
    ══════════════════════════════════════════════════ */
    #why { background: var(--charcoal-mid); }
    .why-hdr { text-align: center; max-width: 560px; margin: 0 auto 68px; }
    .why-hdr .sh { color: #fff; }
    .why-hdr .eyebrow { color: var(--vermilion); }

    .why-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    .why-card {
      padding: 44px 34px;
      border: 1px solid var(--bd-dark);
      transition: border-color .3s, transform .3s, box-shadow .3s;
    }
    .why-card:hover {
      border-color: rgba(220,85,42,.4);
      transform: translateY(-5px);
      box-shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    .why-num   { font-family: var(--font-h); font-size: 52px; font-weight: 700; color: rgba(220,85,42,.18); line-height: 1; margin-bottom: 22px; }
    .why-title { font-size: 20px; font-weight: 700; color: #fff; margin-bottom: 12px; }
    .why-text  { font-size: 15px; line-height: 1.72; color: var(--silver); }

    /* ══════════════════════════════════════════════════
       TRUSTED BY
    ══════════════════════════════════════════════════ */
    #trust { padding: 36px 0; background: var(--pearl); }
    .trust-lbl {
      text-align: center;
      font-size: 11px; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: var(--onyx); opacity: .45;
      margin-bottom: 40px;
    }
    .trust-logos {
      display: flex;
      justify-content: center; align-items: center;
      gap: 72px; flex-wrap: wrap;
    }
    .trust-logo {
      font-family: var(--font-h);
      font-size: 20px; font-weight: 700;
      color: var(--onyx); opacity: .28;
      letter-spacing: -0.02em;
      transition: opacity .25s; cursor: default;
    }
    .trust-logo:hover { opacity: .55; }

    /* ══════════════════════════════════════════════════
       ABOUT
    ══════════════════════════════════════════════════ */
    #about { background: #fff; }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: center;
    }
    .about-line { width: 44px; height: 3px; background: var(--vermilion); margin-bottom: 22px; }
    .about-content .sh { color: var(--charcoal); margin-bottom: 24px; }
    .about-content p   { font-size: 16px; line-height: 1.72; color: var(--onyx); margin-bottom: 14px; }
    .about-content .eyebrow { color: var(--vermilion); }

    .about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 44px;
    }
    .stat-num  {
      font-family: var(--font-h);
      font-size: 50px; font-weight: 700;
      color: var(--charcoal); line-height: 1; letter-spacing: -0.04em;
    }
    .stat-num em { font-style: normal; color: var(--vermilion); }
    .stat-rule { width: 28px; height: 2px; background: var(--vermilion); margin: 12px 0; }
    .stat-lbl  { font-size: 13px; color: var(--onyx); line-height: 1.45; }

    /* ══════════════════════════════════════════════════
       CERTIFICATIONS
    ══════════════════════════════════════════════════ */
    #certs { background: var(--charcoal); }
    .certs-hdr { text-align: center; max-width: 560px; margin: 0 auto 60px; }
    .certs-hdr .sh { color: #fff; }
    .certs-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .certs-hdr .eyebrow { color: var(--vermilion); }

    .certs-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 3px;
    }
    .cert-card {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 32px 18px; text-align: center;
      transition: border-color .3s, transform .3s;
    }
    .cert-card:hover { border-color: rgba(220,85,42,.35); transform: translateY(-4px); }
    .cert-abbr { font-family: var(--font-h); font-size: 20px; font-weight: 700; color: var(--vermilion); margin-bottom: 8px; }
    .cert-name { font-size: 11.5px; color: var(--silver); line-height: 1.45; }

    /* ══════════════════════════════════════════════════
       OFFICES
    ══════════════════════════════════════════════════ */
    #offices { background: var(--charcoal-mid); }
    .offices-hdr { margin-bottom: 60px; }
    .offices-hdr .sh { color: #fff; margin-bottom: 16px; }
    .offices-hdr p  { font-size: 16px; color: var(--silver); line-height: 1.65; max-width: 480px; }
    .offices-hdr .eyebrow { color: var(--vermilion); }

    .offices-row-top {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
      margin-bottom: 3px;
    }
    .offices-row-bot {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
    }
    .office-card {
      background: var(--charcoal);
      border: 1px solid var(--bd-dark);
      padding: 36px 30px;
      transition: border-color .3s;
    }
    .office-card:hover { border-color: rgba(220,85,42,.3); }
    .office-card.hq { background: var(--vermilion); border-color: var(--vermilion); }
    .office-card.hq:hover { border-color: var(--vermilion-dk); }

    .off-badge { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.65); margin-bottom: 10px; }
    .off-city  { font-family: var(--font-h); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 4px; }
    .off-co    { font-size: 12px; font-weight: 600; letter-spacing: .04em; margin-bottom: 14px; }
    .office-card.hq  .off-co { color: rgba(255,255,255,.7); }
    .office-card:not(.hq) .off-co { color: var(--silver); }
    .off-addr  { font-size: 13px; line-height: 1.6; }
    .office-card.hq  .off-addr { color: rgba(255,255,255,.88); }
    .office-card:not(.hq) .off-addr { color: var(--silver); }
    .off-contact { margin-top: 16px; font-size: 13px; }
    .off-contact a { color: inherit; text-decoration: none; }
    .off-contact a:hover { text-decoration: underline; }
    .office-card.hq  .off-contact { color: rgba(255,255,255,.9); }
    .office-card:not(.hq) .off-contact { color: var(--silver); }

    /* ══════════════════════════════════════════════════
       CONTACT
    ══════════════════════════════════════════════════ */
    #contact { background: var(--charcoal); }
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px; align-items: start;
    }
    .contact-left .sh { color: #fff; margin-bottom: 22px; }
    .contact-left .eyebrow { color: var(--vermilion); }
    .contact-left > p { font-size: 16px; color: var(--silver); line-height: 1.65; margin-bottom: 10px; }

    .contact-pts { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 22px; }
    .contact-pt  {
      display: flex; gap: 12px; align-items: flex-start;
      font-size: 15px; color: var(--silver); line-height: 1.5;
    }
    .pt-dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); margin-top: 8px; }

    .contact-form {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 48px;
    }
    .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    .f-grp { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
    .f-lbl { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.4); }
    .f-inp, .f-ta {
      background: rgba(255,255,255,.05);
      border: 1px solid var(--bd-dark);
      color: #fff;
      padding: 13px 15px;
      font-family: var(--font-b);
      font-size: 14px; border-radius: 2px;
      transition: border-color .2s, background .2s;
      outline: none; width: 100%;
    }
    .f-inp::placeholder, .f-ta::placeholder { color: rgba(255,255,255,.2); }
    .f-inp:focus, .f-ta:focus {
      border-color: rgba(220,85,42,.5);
      background: rgba(255,255,255,.07);
    }
    .f-ta { resize: vertical; min-height: 110px; }
    .f-submit { width: 100%; justify-content: center; padding: 15px 28px; font-size: 15px; margin-top: 8px; }

    /* Privacy notice above the contact form — Art. 13 GDPR transparency.
       Sets visitor expectations BEFORE they fill in the fields, separate
       from the inline consent checkbox below the form. */
    .f-privacy-notice {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px 20px;
      margin-bottom: 22px;
      background: rgba(220,85,42,.06);
      border: 1px solid rgba(220,85,42,.22);
      border-left: 3px solid var(--vermilion);
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.6;
      color: rgba(255,255,255,.78);
    }
    .f-privacy-notice strong { color: #fff; font-weight: 700; }
    .f-privacy-notice a { color: var(--vermilion); text-decoration: none; border-bottom: 1px solid rgba(220,85,42,.45); transition: color .2s, border-color .2s; }
    .f-privacy-notice a:hover { color: #fff; border-bottom-color: #fff; }
    .f-privacy-notice-icon {
      flex-shrink: 0;
      width: 20px; height: 20px;
      color: var(--vermilion);
      margin-top: 1px;
    }
    .f-privacy-notice-icon svg { width: 100%; height: 100%; }
    [data-theme="light"] .f-privacy-notice {
      background: rgba(220,85,42,.06);
      color: rgba(5,15,27,.78);
    }
    [data-theme="light"] .f-privacy-notice strong { color: var(--charcoal); }

    /* GDPR consent — required before form can be submitted */
    .f-consent {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      user-select: none;
      margin: 8px 0 4px;
    }
    .f-consent input[type="checkbox"] {
      position: absolute;
      width: 1px; height: 1px;
      opacity: 0;
      pointer-events: none;
    }
    .f-consent-mark {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      border: 1.5px solid rgba(255,255,255,.28);
      border-radius: 3px;
      flex-shrink: 0;
      margin-top: 1px;
      background: rgba(255,255,255,.04);
      transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
      color: transparent;
    }
    .f-consent-mark svg { width: 12px; height: 12px; }
    .f-consent input:checked + .f-consent-mark {
      background: var(--vermilion);
      border-color: var(--vermilion);
      color: #fff;
    }
    .f-consent input:focus-visible + .f-consent-mark {
      box-shadow: 0 0 0 3px rgba(220,85,42,.3);
    }
    .f-consent:hover .f-consent-mark { border-color: rgba(220,85,42,.55); }
    .f-consent-text {
      font-size: 12px;
      line-height: 1.55;
      color: rgba(255,255,255,.65);
    }
    .f-consent-link {
      color: var(--vermilion);
      text-decoration: underline;
      text-decoration-color: rgba(220,85,42,.4);
      text-underline-offset: 2px;
    }
    .f-consent-link:hover {
      color: #fff;
      text-decoration-color: var(--vermilion);
    }
    .f-consent.shake { animation: f-consent-shake .4s ease-in-out; }
    .f-consent.shake .f-consent-mark {
      border-color: #ef4444;
      box-shadow: 0 0 0 3px rgba(239,68,68,.25);
    }
    @keyframes f-consent-shake {
      0%, 100% { transform: translateX(0); }
      25%      { transform: translateX(-5px); }
      75%      { transform: translateX(5px); }
    }

    /* ══════════════════════════════════════════════════
       FOOTER
    ══════════════════════════════════════════════════ */
    footer {
      background: var(--charcoal);
      border-top: 1px solid var(--bd-dark);
      padding: 80px 0 40px;
      position: relative;
      overflow: hidden;
    }
    /* subtle orange glow at the top edge */
    footer::before {
      content: '';
      position: absolute;
      top: -1px; left: 50%;
      transform: translateX(-50%);
      width: 60%; height: 1px;
      background: linear-gradient(90deg,
        transparent, rgba(220,85,42,.5), transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 64px;
      margin-bottom: 56px;
    }
    .footer-brand .footer-logo-img { height: 32px; display: block; }
    .footer-brand .footer-logo-fallback {
      display: none;
      font-family: var(--font-h);
      font-size: 22px; font-weight: 700;
      color: #fff; letter-spacing: -0.02em;
    }
    .footer-brand p {
      font-size: 13.5px;
      line-height: 1.7;
      color: rgba(255,255,255,.5);
      margin-top: 18px;
      max-width: 340px;
    }
    .footer-brand .footer-tagline {
      font-family: var(--font-h);
      font-size: 13px;
      letter-spacing: .04em;
      color: var(--vermilion);
      margin-top: 16px;
      display: inline-block;
    }

    .footer-col-title {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin-bottom: 22px;
    }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
    .footer-col a {
      font-size: 14px;
      color: rgba(255,255,255,.7);
      text-decoration: none;
      transition: color .2s, padding-left .25s;
      display: inline-block;
    }
    .footer-col a:hover { color: var(--vermilion); padding-left: 4px; }

    .footer-contact-line {
      font-size: 13.5px;
      color: rgba(255,255,255,.6);
      margin-bottom: 8px;
      line-height: 1.55;
    }
    .footer-contact-line a { color: rgba(255,255,255,.6); text-decoration: none; transition: color .2s; }
    .footer-contact-line a:hover { color: var(--vermilion); }
    .footer-contact-line strong { color: #fff; font-weight: 600; }

    .footer-social {
      display: flex; gap: 10px; margin-top: 18px;
    }
    .footer-social a {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.15);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,.55);
      transition: all .25s ease;
    }
    .footer-social a:hover {
      color: #fff;
      border-color: var(--vermilion);
      background: rgba(220,85,42,.15);
      transform: translateY(-2px);
    }
    .footer-social svg { width: 16px; height: 16px; }

    .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap; gap: 16px;
      padding-top: 32px;
      border-top: 1px solid var(--bd-dark);
    }
    .footer-bottom .footer-links {
      display: flex; gap: 28px; list-style: none;
    }
    .footer-bottom .footer-links a {
      font-size: 13px;
      color: rgba(255,255,255,.4);
      text-decoration: none;
      transition: color .2s;
    }
    .footer-bottom .footer-links a:hover { color: #fff; }
    .footer-copy {
      font-size: 12px;
      color: rgba(255,255,255,.28);
      letter-spacing: .03em;
    }

    /* ══════════════════════════════════════════════════
       RESPONSIVE
    ══════════════════════════════════════════════════ */
    @media (max-width: 1100px) {
      .sol-grid   { grid-template-columns: repeat(2, 1fr); }
      .certs-grid { grid-template-columns: repeat(3, 1fr); }
      .prod-banner { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 900px) {
      .prod-grid    { grid-template-columns: 1fr; }
      .about-grid   { grid-template-columns: 1fr; gap: 52px; }
      .contact-grid { grid-template-columns: 1fr; gap: 52px; }
      .why-grid     { grid-template-columns: 1fr 1fr; gap: 20px; }
      .offices-row-top { grid-template-columns: 1fr 1fr; }
      .footer-grid  { grid-template-columns: 1fr 1fr; gap: 40px; }
    }
    @media (max-width: 680px) {
      .wrap { padding: 0 24px; }
      section { padding: 28px 0; }
      .nav-links { display: none !important; }
      .nav-burger { display: flex; }
      .nav-mobile { padding: 28px 24px 36px; }
      .sol-grid        { grid-template-columns: 1fr; }
      .why-grid        { grid-template-columns: 1fr; }
      .certs-grid      { grid-template-columns: repeat(2, 1fr); }
      .offices-row-top { grid-template-columns: 1fr; }
      .offices-row-bot { grid-template-columns: 1fr; }
      .about-stats     { grid-template-columns: 1fr 1fr; }
      .f-row           { grid-template-columns: 1fr; }
      .contact-form    { padding: 32px 24px; }
      .prod-card       { padding: 40px 28px; }
      .prod-banner     { padding: 36px 28px; }
      .footer-row      { flex-direction: column; align-items: flex-start; }
      .footer-grid     { grid-template-columns: 1fr; gap: 40px; }
      .footer-bottom   { flex-direction: column; align-items: flex-start; }
      .trust-logos     { gap: 36px; }
    }

    /* ══════════════════════════════════════════════════
       SOLUTIONS BY INDUSTRY
    ══════════════════════════════════════════════════ */
    #industries {
      background: var(--charcoal-mid);
      position: relative;
      overflow: hidden;
    }

    /* Atmospheric image layer — fades in on card hover.
       Two layers (A + B) used for smooth crossfade between
       industries when the cursor moves card-to-card.        */
    #industries .ind-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity .9s ease;
      filter: brightness(.42) saturate(.7);
      -webkit-mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 22%, transparent 100%);
              mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 22%, transparent 100%);
      pointer-events: none;
      z-index: 0;
      will-change: opacity;
    }
    #industries .ind-bg.active { opacity: .68; }

    /* Branded orange tint + vertical edge fades on top of image */
    #industries .ind-tint {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 25% 25%,
                        rgba(220,85,42,.20), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,
                        rgba(220,85,42,.10), transparent 60%),
        linear-gradient(180deg,
                        rgba(11,26,43,.55) 0%,
                        rgba(11,26,43,0)   24%,
                        rgba(11,26,43,0)   76%,
                        rgba(11,26,43,.55) 100%);
      opacity: 0;
      transition: opacity .9s ease;
      pointer-events: none;
      z-index: 0;
      -webkit-mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 32%, transparent 100%);
              mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 32%, transparent 100%);
    }
    #industries.show-bg .ind-tint { opacity: 1; }

    /* keep the actual content above the bg layers */
    #industries .wrap { position: relative; z-index: 1; }

    /* ── Same atmospheric crossfade for #offices ──────── */
    #offices {
      position: relative;
      overflow: hidden;
    }
    #offices .off-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transition: opacity .9s ease;
      filter: brightness(.42) saturate(.7);
      -webkit-mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 22%, transparent 100%);
              mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 22%, transparent 100%);
      pointer-events: none;
      z-index: 0;
      will-change: opacity;
    }
    #offices .off-bg.active { opacity: .68; }
    #offices .off-tint {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 25% 25%,
                        rgba(220,85,42,.20), transparent 60%),
        radial-gradient(ellipse 60% 40% at 80% 80%,
                        rgba(220,85,42,.10), transparent 60%),
        linear-gradient(180deg,
                        rgba(11,26,43,.55) 0%,
                        rgba(11,26,43,0)   24%,
                        rgba(11,26,43,0)   76%,
                        rgba(11,26,43,.55) 100%);
      opacity: 0;
      transition: opacity .9s ease;
      pointer-events: none;
      z-index: 0;
      -webkit-mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 32%, transparent 100%);
              mask-image: radial-gradient(ellipse 96% 82% at center,
                            #000 32%, transparent 100%);
    }
    #offices.show-bg .off-tint { opacity: 1; }
    #offices .wrap { position: relative; z-index: 1; }
    .ind-hdr { max-width: 600px; margin: 0 auto 60px; text-align: center; }
    .ind-hdr .sh { color: #fff; }
    .ind-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 16px; }
    .ind-hdr .eyebrow { color: var(--vermilion); }

    .ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    .ind-card {
      background: var(--charcoal);
      border: 1px solid var(--bd-dark);
      padding: 40px 32px 36px;
      transition: border-color .35s, background .35s, transform .35s;
      position: relative;
      overflow: hidden;
    }
    .ind-card:hover {
      border-color: rgba(220,85,42,.4);
      background: var(--charcoal-alt);
    }
    .ind-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 2px;
      background: linear-gradient(90deg, var(--vermilion), transparent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .45s cubic-bezier(.4,0,.2,1);
    }
    .ind-card:hover::before { transform: scaleX(1); }

    .ind-icon {
      width: 42px; height: 42px;
      color: var(--vermilion);
      margin-bottom: 22px;
      transition: transform .35s ease;
    }
    .ind-card:hover .ind-icon { transform: translateY(-2px) scale(1.08); }

    .ind-name {
      font-family: var(--font-h);
      font-size: 22px; font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }
    .ind-tag {
      font-size: 12px;
      color: var(--vermilion);
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .ind-text {
      font-size: 14px;
      color: var(--silver);
      line-height: 1.65;
    }

    @media (max-width: 1100px) {
      .ind-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 680px) {
      .ind-grid { grid-template-columns: 1fr; }
    }

    /* ════════════════════════════════════════════════════
       PREMIUM EFFECTS LAYER
       Mouse spotlight, particles, marquee, counters,
       3D tilt cards, button shimmer, gradient text.
    ════════════════════════════════════════════════════ */

    /* ── Animated gradient mesh + cursor spotlight on hero ── */
    #hero {
      --mx: 50%;
      --my: 50%;
    }
    #hero .hero-spotlight {
      position: absolute;
      inset: 0;
      background: radial-gradient(circle 380px at var(--mx) var(--my),
                  rgba(220,85,42,.18) 0%, transparent 60%);
      pointer-events: none;
      z-index: 0;
      transition: background .15s linear;
    }
    /* Slow-breathing background blobs */
    #hero .hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: .35;
      pointer-events: none;
      z-index: 0;
    }
    #hero .hero-blob.b1 {
      width: 540px; height: 540px;
      top: -120px; right: -80px;
      background: radial-gradient(circle, rgba(220,85,42,.45), transparent 70%);
      animation: blob-drift-1 18s ease-in-out infinite;
    }
    #hero .hero-blob.b2 {
      width: 420px; height: 420px;
      bottom: -120px; left: 10%;
      background: radial-gradient(circle, rgba(220,85,42,.25), transparent 70%);
      animation: blob-drift-2 22s ease-in-out infinite;
    }
    @keyframes blob-drift-1 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50%      { transform: translate(-40px, 60px) scale(1.1); }
    }
    @keyframes blob-drift-2 {
      0%, 100% { transform: translate(0, 0) scale(1); }
      50%      { transform: translate(60px, -40px) scale(0.9); }
    }

    /* ── Floating particles ── */
    .particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .particle {
      position: absolute;
      width: 3px; height: 3px;
      border-radius: 50%;
      background: var(--vermilion);
      opacity: .5;
      animation: particle-float linear infinite;
    }
    @keyframes particle-float {
      0%   { transform: translateY(0) translateX(0); opacity: 0; }
      10%  { opacity: .6; }
      90%  { opacity: .6; }
      100% { transform: translateY(-100vh) translateX(40px); opacity: 0; }
    }

    /* ── Hero CTA pulse ── */
    @keyframes cta-pulse {
      0%, 100% { box-shadow: 0 0 0 0   rgba(220,85,42,.55); }
      70%      { box-shadow: 0 0 0 14px rgba(220,85,42,0); }
    }
    .hero-ctas .btn-red { animation: cta-pulse 2.6s ease-in-out infinite; }

    /* ── Button shimmer (sweep light across primary buttons on hover) ── */
    .btn-red {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .btn-red::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg,
                  transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
      transform: translateX(-100%);
      transition: transform .7s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }
    .btn-red:hover::before { transform: translateX(100%); }

    /* ── Word-by-word stagger reveal for hero heading ── */
    .stagger > span {
      display: inline-block;
      opacity: 0;
      transform: translateY(28px);
      animation: stagger-in .9s cubic-bezier(.2,.8,.2,1) forwards;
    }
    @keyframes stagger-in {
      to { opacity: 1; transform: none; }
    }

    /* ── Trust marquee ── */
    .trust-marquee {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    }
    .trust-track {
      display: flex;
      gap: 72px;
      width: max-content;
      animation: marquee 28s linear infinite;
    }
    .trust-marquee:hover .trust-track { animation-play-state: paused; }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .trust-track .trust-logo { flex-shrink: 0; }

    /* ── 3D tilt prep for cards ── */
    .tilt {
      transform-style: preserve-3d;
      transform: perspective(1100px)
                 rotateX(var(--rx, 0deg))
                 rotateY(var(--ry, 0deg))
                 translateZ(0);
      transition: transform .35s cubic-bezier(.2,.8,.2,1);
      will-change: transform;
    }
    .tilt.tilting { transition: transform .08s linear; }

    /* ── Gradient text accent ── */
    .grad-text {
      background: linear-gradient(120deg, var(--vermilion) 0%, #ff8a5e 60%, var(--vermilion) 100%);
      background-size: 200% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: grad-shift 6s ease-in-out infinite;
    }
    @keyframes grad-shift {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    /* ── Smoother scroll reveal (override) ── */
    .rv {
      transition: opacity .9s cubic-bezier(.2,.8,.2,1),
                  transform .9s cubic-bezier(.2,.8,.2,1),
                  filter .9s ease;
      filter: blur(4px);
    }
    .rv.in { filter: blur(0); }

    /* ── Stat number style for animated counter ── */
    .stat-num [data-count] { display: inline-block; }

    /* ── Soft glow on certifications hover ── */
    .cert-card:hover { box-shadow: 0 12px 40px rgba(220,85,42,.18); }

    /* ── Animated underline for product links ── */
    .prod-link {
      position: relative;
      padding-bottom: 4px;
    }
    .prod-link::after {
      content: '';
      position: absolute;
      left: 0; bottom: 0;
      width: 100%; height: 1px;
      background: currentColor;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .prod-link:hover::after { transform: scaleX(1); }

    /* ── Reduce motion respect ── */
    @media (prefers-reduced-motion: reduce) {
      .hero-blob, .particle, .trust-track, .news-track,
      .grad-text, .hero-ctas .btn-red {
        animation: none !important;
      }
      .rv { filter: none; transition: opacity .3s ease, transform .3s ease; }
    }

    /* ════════════════════════════════════════════════════
       THREAT-INTEL NEWS TICKER
       Pinned at the very top of the viewport, slim strip.
    ════════════════════════════════════════════════════ */
    :root { --ticker-h: 30px; }

    .news-ticker {
      display: flex;
      align-items: stretch;
      background: var(--charcoal-mid);
      border-bottom: 1px solid var(--bd-dark);
      position: fixed;
      top: 0; left: 0; right: 0;
      height: var(--ticker-h);
      overflow: hidden;
      z-index: 1002;            /* above nav (999) */
    }
    .news-ticker-label {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 0 14px;
      background: var(--vermilion);
      color: #fff;
      font-family: var(--font-b);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      z-index: 2;
      position: relative;
    }
    /* arrow on label */
    .news-ticker-label::after {
      content: '';
      position: absolute;
      top: 0; right: -8px;
      width: 0; height: 0;
      border-top: calc(var(--ticker-h) / 2) solid transparent;
      border-bottom: calc(var(--ticker-h) / 2) solid transparent;
      border-left: 8px solid var(--vermilion);
    }
    .news-pulse {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 0 0 rgba(255,255,255,.7);
      animation: news-pulse 2s ease-in-out infinite;
    }
    @keyframes news-pulse {
      0%, 100% { box-shadow: 0 0 0 0   rgba(255,255,255,.7); }
      70%      { box-shadow: 0 0 0 6px rgba(255,255,255,0); }
    }

    .news-track-wrap {
      flex: 1;
      overflow: hidden;
      position: relative;
      mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    }
    .news-track {
      display: flex;
      gap: 40px;
      width: max-content;
      padding: 0 40px;
      animation: news-scroll 90s linear infinite;
      height: 100%;
    }
    .news-ticker:hover .news-track { animation-play-state: paused; }
    @keyframes news-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    .news-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      font-weight: 500;
      color: var(--silver);
      white-space: nowrap;
      padding: 0;
      transition: color .2s;
      /* The ticker swaps spans for <a> tags at runtime when the live
         /api/threat-intel-news feed loads. Reset link defaults so
         both the static fallback (<span>) and the live (<a>) shapes
         render identically. */
      text-decoration: none;
      cursor: pointer;
    }
    a.news-item:hover, .news-item:hover { color: #fff; background: transparent; }
    .news-item:hover .news-tag { text-shadow: 0 0 8px rgba(220,85,42,.55); }
    .news-item::before {
      content: '';
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--vermilion);
      flex-shrink: 0;
    }
    .news-item .news-tag {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--vermilion);
      padding-right: 2px;
    }

    /* push the rest of the page (incl. fixed nav) below the ticker */
    body { padding-top: var(--ticker-h); }
    #nav { top: var(--ticker-h); }
    .scroll-progress { top: var(--ticker-h); }

    @media (max-width: 680px) {
      :root { --ticker-h: 26px; }
      .news-ticker-label { padding: 0 10px; font-size: 9px; letter-spacing: .12em; gap: 6px; }
      .news-item { font-size: 11px; gap: 8px; }
      .news-track { gap: 28px; padding: 0 28px; }
    }

    /* ══════════════════════════════════════════════════
       LIVE CONCURRENT VIEWERS BADGE
    ══════════════════════════════════════════════════ */
    .viewers-badge {
      position: fixed;
      bottom: 28px; left: 96px;
      background: rgba(11,26,43,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(34,197,94,.25);
      border-radius: 100px;
      padding: 8px 14px 8px 12px;
      display: flex;
      align-items: center;
      gap: 9px;
      box-shadow: 0 10px 25px rgba(0,0,0,.4);
      z-index: 997;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }
    .viewers-badge.show { opacity: 1; transform: none; pointer-events: auto; }
    .viewers-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2s ease-in-out infinite;
    }
    .viewers-badge-text {
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.85);
      font-variant-numeric: tabular-nums;
    }
    .viewers-badge-num {
      color: #fff;
      font-weight: 700;
      margin-right: 2px;
    }
    @media (max-width: 680px) {
      .viewers-badge { left: 16px; bottom: 24px; }
    }

    /* ══════════════════════════════════════════════════
       BREACHSHIELD ↔ FRAUDSHIELD BRIDGE INFOGRAPHIC
    ══════════════════════════════════════════════════ */
    .prod-bridge {
      max-width: 980px;
      margin: 30px auto 0;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 24px 32px;
      background: linear-gradient(135deg,
        rgba(220,85,42,.06),
        rgba(11,26,43,.5));
      border: 1px solid rgba(220,85,42,.18);
      border-radius: 4px;
    }
    .prod-bridge-side {
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--vermilion);
      flex-shrink: 0;
      white-space: nowrap;
    }
    .prod-bridge-flow {
      flex: 1;
      height: 28px;
      position: relative;
      overflow: hidden;
    }
    .prod-bridge-track {
      position: absolute;
      top: 50%;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg,
        transparent,
        rgba(220,85,42,.4),
        transparent);
      transform: translateY(-50%);
    }
    .prod-bridge-blip {
      position: absolute;
      top: 50%;
      left: 0;
      width: 8px; height: 8px;
      margin-top: -4px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 12px rgba(220,85,42,.85);
      animation: bridge-blip 3s linear infinite;
    }
    .prod-bridge-blip:nth-child(2) { animation-delay: -1s; }
    .prod-bridge-blip:nth-child(3) { animation-delay: -2s; }
    @keyframes bridge-blip {
      0%   { left: 0%;   opacity: 0; transform: scale(.5); }
      8%   { opacity: 1; transform: scale(1); }
      92%  { opacity: 1; transform: scale(1); }
      100% { left: 100%; opacity: 0; transform: scale(.5); }
    }
    .prod-bridge-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.6);
      text-align: center;
      flex-shrink: 0;
      padding: 0 10px;
    }
    @media (max-width: 700px) {
      .prod-bridge { flex-direction: column; gap: 10px; padding: 20px; }
      .prod-bridge-flow { width: 100%; }
    }

    /* ══════════════════════════════════════════════════
       FOOTER TRUST BADGE COLLECTION
    ══════════════════════════════════════════════════ */
    .footer-badges {
      display: flex;
      gap: 14px;
      margin-top: 18px;
      flex-wrap: wrap;
    }
    .footer-badge {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: linear-gradient(135deg,
        rgba(255,255,255,.04),
        rgba(220,85,42,.08));
      border: 1px solid rgba(220,85,42,.25);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--vermilion);
      font-family: var(--font-h);
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .04em;
      transition: all .25s ease;
      cursor: default;
    }
    .footer-badge:hover {
      transform: translateY(-3px);
      border-color: var(--vermilion);
      background: rgba(220,85,42,.18);
      box-shadow: 0 0 14px rgba(220,85,42,.4);
    }
    .footer-badge svg {
      width: 16px; height: 16px;
    }

    /* ══════════════════════════════════════════════════
       SCROLL-TRIGGERED FACT TOAST
    ══════════════════════════════════════════════════ */
    .fact-toast {
      position: fixed;
      top: 50%; right: 48px;
      transform: translateY(-50%) translateX(120%);
      max-width: 280px;
      padding: 16px 20px;
      background: rgba(11,26,43,.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid rgba(220,85,42,.4);
      border-left: 3px solid var(--vermilion);
      border-radius: 6px;
      z-index: 996;
      opacity: 0;
      transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
      box-shadow: 0 10px 40px rgba(0,0,0,.5);
    }
    .fact-toast.show {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    .fact-toast-tag {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 8px;
    }
    .fact-toast-text {
      font-size: 13px;
      line-height: 1.5;
      color: rgba(255,255,255,.92);
    }
    .fact-toast-text strong { color: var(--vermilion); font-weight: 700; }
    @media (max-width: 900px) { .fact-toast { display: none; } }

    /* ══════════════════════════════════════════════════
       SPARKLINE MINI-CHARTS in outcome cards
    ══════════════════════════════════════════════════ */
    .out-spark {
      width: 100%;
      height: 32px;
      margin-top: -6px;
      margin-bottom: 10px;
      pointer-events: none;
    }
    .out-spark-line {
      stroke: var(--vermilion);
      stroke-width: 1.6;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 3px rgba(220,85,42,.5));
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1) .2s;
    }
    .out-grid.in .out-spark-line { stroke-dashoffset: 0; }
    .out-spark-area {
      fill: url(#sparkGrad);
      opacity: 0;
      transition: opacity .8s ease 1s;
    }
    .out-grid.in .out-spark-area { opacity: 1; }
    .out-spark-dot {
      fill: var(--vermilion);
      filter: drop-shadow(0 0 4px rgba(220,85,42,.8));
      opacity: 0;
      transition: opacity .4s ease 1.6s;
    }
    .out-grid.in .out-spark-dot { opacity: 1; }

    /* ══════════════════════════════════════════════════
       ANIMATED CYBER-SHIELD SVG MARK
    ══════════════════════════════════════════════════ */
    .cyber-mark {
      position: absolute;
      width: 180px; height: 180px;
      pointer-events: none;
      opacity: .3;
      z-index: 0;
    }
    .cyber-mark.tl { top: 60px; left: 60px; }
    .cyber-mark.br { bottom: 60px; right: 60px; }
    .cyber-mark .ring1 { animation: mark-spin 24s linear infinite; transform-origin: center; }
    .cyber-mark .ring2 { animation: mark-spin 18s linear infinite reverse; transform-origin: center; }
    .cyber-mark .ring3 { animation: mark-spin 30s linear infinite; transform-origin: center; }
    @keyframes mark-spin {
      to { transform: rotate(360deg); }
    }
    @media (max-width: 1100px) { .cyber-mark { display: none; } }

    /* ══════════════════════════════════════════════════
       HERO CTA — pulsing glow halos
    ══════════════════════════════════════════════════ */
    .hero-ctas .btn-red::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 0 0 0 rgba(220,85,42,.4);
      animation: cta-halo 3s cubic-bezier(.4,0,.2,1) infinite;
      pointer-events: none;
      z-index: -1;
    }
    @keyframes cta-halo {
      0%   { box-shadow: 0 0 0 0    rgba(220,85,42,.45),
                         0 0 0 0    rgba(220,85,42,.30); }
      70%  { box-shadow: 0 0 0 22px rgba(220,85,42,0),
                         0 0 0 12px rgba(220,85,42,.05); }
      100% { box-shadow: 0 0 0 0    rgba(220,85,42,0),
                         0 0 0 0    rgba(220,85,42,0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-ctas .btn-red::after { animation: none !important; }
    }

    /* ══════════════════════════════════════════════════
       ACHIEVEMENT FLOATING MEDALS in About-strip
    ══════════════════════════════════════════════════ */
    .achv-strip { position: relative; }
    .achv-medals {
      position: absolute;
      top: 50%; right: -8px;
      transform: translateY(-50%);
      display: flex;
      gap: -10px;            /* overlap medals slightly */
      pointer-events: none;
      opacity: .5;
    }
    .achv-medal {
      width: 60px; height: 60px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%,
        rgba(255,200,170,.85),
        var(--vermilion) 50%,
        var(--vermilion-dk) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .04em;
      box-shadow: 0 8px 20px rgba(0,0,0,.4),
                  inset 0 1px 0 rgba(255,255,255,.4),
                  inset 0 -2px 4px rgba(0,0,0,.3);
      border: 2px solid rgba(255,255,255,.15);
      animation: medal-bob 5s ease-in-out infinite;
      transform-origin: center;
    }
    .achv-medal:nth-child(1) { margin-right: -16px; transform: rotate(-8deg); animation-delay: 0s; z-index: 3; }
    .achv-medal:nth-child(2) { margin-right: -16px; transform: rotate(0);     animation-delay: -1.5s; z-index: 2; }
    .achv-medal:nth-child(3) { transform: rotate(8deg);                       animation-delay: -3s; z-index: 1; }
    @keyframes medal-bob {
      0%, 100% { transform: translateY(0)    rotate(var(--mr, 0)); }
      50%      { transform: translateY(-6px) rotate(var(--mr, 0)); }
    }
    .achv-medal:nth-child(1) { --mr: -8deg; }
    .achv-medal:nth-child(2) { --mr:  0deg; }
    .achv-medal:nth-child(3) { --mr:  8deg; }
    @media (max-width: 900px) { .achv-medals { display: none; } }

    /* ══════════════════════════════════════════════════
       3D CARD FLIP on certification cards
    ══════════════════════════════════════════════════ */
    .certs-grid { perspective: 1100px; }
    .cert-card {
      transform-style: preserve-3d;
      transition: transform .7s cubic-bezier(.4,0,.2,1) !important;
      cursor: default;
    }
    .cert-card:hover { transform: rotateY(180deg) !important; }
    .cert-front, .cert-back {
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      position: absolute;
      inset: 0;
      padding: 32px 18px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .cert-back {
      transform: rotateY(180deg);
      background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-dk) 100%);
      color: #fff;
      gap: 6px;
    }
    .cert-back-title {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .cert-back-text {
      font-size: 11px;
      line-height: 1.5;
      color: rgba(255,255,255,.92);
    }
    .cert-card { min-height: 130px; position: relative; }

    /* ══════════════════════════════════════════════════
       HERO WORD ROTATION
    ══════════════════════════════════════════════════ */
    .hero-rotate {
      position: relative;
      display: inline-block;
      min-height: 1.1em;
    }
    .hero-rotate-track {
      display: inline-flex;
      flex-direction: column;
      vertical-align: top;
    }
    .hero-rotate-word {
      transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
      white-space: nowrap;
    }
    .hero-rotate-word.out { opacity: 0; transform: translateY(-100%); }
    .hero-rotate-word.in  { opacity: 1; transform: none; }
    .hero-rotate-word.next { opacity: 0; transform: translateY(100%); }

    /* ══════════════════════════════════════════════════
       HERO PRODUCT SHOWCASE (right column)
    ══════════════════════════════════════════════════ */
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 480px;
      gap: 56px;
      align-items: stretch;
    }
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
    }
    .hero-grid > .hero-content { max-width: none; }
    /* .hero-bottom now lives OUTSIDE .hero-grid as a sibling inside
       .wrap. So .hero-grid only contains the hero-content + showcase
       and centres them; .hero-bottom sits at the bottom of the wrap
       column with margin-top:auto pushing it down. */
    .hero-bottom {
      display: flex;
      flex-direction: column;
      gap: 18px;
      margin-top: auto;            /* push to bottom of flex column */
      padding-top: 36px;
      border-top: 1px solid rgba(255,255,255,.06);
    }

    .hero-showcase {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
    }

    .showcase-stage {
      position: relative;
      width: 100%;
      flex: 1 1 auto;
      min-height: 480px;
      background: linear-gradient(135deg, rgba(11,26,43,.92), rgba(9,21,37,.65));
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 8px;
      overflow: hidden;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      animation: showcase-breath 4s ease-in-out infinite;
    }
    @keyframes showcase-breath {
      0%, 100% {
        box-shadow:
          0 30px 80px rgba(0,0,0,.5),
          inset 0 0 80px rgba(220,85,42,.06),
          0 0 0 1px rgba(220,85,42,.18);
      }
      50% {
        box-shadow:
          0 30px 80px rgba(0,0,0,.5),
          inset 0 0 100px rgba(220,85,42,.10),
          0 0 0 1px rgba(220,85,42,.32),
          0 0 32px rgba(220,85,42,.18);
      }
    }
    /* Subtle tech grid background */
    .showcase-grid {
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(0deg,  rgba(220,85,42,.04) 0 1px, transparent 1px 36px),
        repeating-linear-gradient(90deg, rgba(220,85,42,.04) 0 1px, transparent 1px 36px);
      mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
      -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 75%);
      pointer-events: none;
      z-index: 0;
    }
    /* Vermilion scan line that sweeps top-to-bottom */
    .showcase-scan {
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(220,85,42,.7) 50%, transparent 100%);
      box-shadow: 0 0 14px rgba(220,85,42,.55);
      animation: showcase-scan 6s linear infinite;
      pointer-events: none;
      z-index: 3;
    }
    @keyframes showcase-scan {
      0%   { top: -2%;  opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 102%; opacity: 0; }
    }

    .showcase-slide {
      position: absolute;
      inset: 36px 30px 32px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 10px;
      opacity: 0;
      transform: scale(.94);
      filter: blur(8px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1), filter .6s ease;
      pointer-events: none;
      z-index: 1;
    }
    .showcase-slide.active {
      opacity: 1;
      transform: scale(1);
      filter: blur(0);
      pointer-events: auto;
    }
    .showcase-slide.evaporating {
      opacity: 0;
      filter: blur(12px);
      transform: scale(1.08);
    }

    .showcase-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 10px;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      font-weight: 700;
    }
    .ss-status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #4ade80;
      box-shadow: 0 0 10px rgba(74,222,128,.7);
      animation: ops-pulse 2s ease-in-out infinite;
    }

    .showcase-logo-wrap {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 22px 0 6px;
      padding: 8px;
    }
    .showcase-logo-wrap::before {
      content: '';
      position: absolute;
      width: 260px; height: 260px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(220,85,42,.20), transparent 65%);
      z-index: 0;
      animation: logo-aura 3.6s ease-in-out infinite;
    }
    @keyframes logo-aura {
      0%, 100% { opacity: .85; transform: scale(1);    }
      50%      { opacity: 1;   transform: scale(1.10); }
    }
    .showcase-logo {
      height: 140px;
      width: auto;
      max-width: 300px;
      position: relative;
      z-index: 1;
      filter: drop-shadow(0 8px 22px rgba(220,85,42,.32));
    }

    .showcase-name {
      font-family: var(--font-h);
      font-size: 44px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -.025em;
      line-height: 1;
      margin-top: 10px;
    }
    .showcase-meta {
      font-size: 11px;
      color: rgba(255,255,255,.55);
      letter-spacing: .20em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .showcase-tagline {
      font-size: 14px;
      line-height: 1.55;
      color: var(--silver);
      max-width: 340px;
      margin-top: 14px;
      margin-bottom: 4px;
    }
    .showcase-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      color: var(--vermilion);
      text-decoration: none;
      padding: 11px 22px;
      border: 1px solid rgba(220,85,42,.4);
      border-radius: 100px;
      transition: all .25s ease;
    }
    .showcase-link:hover {
      background: rgba(220,85,42,.12);
      border-color: var(--vermilion);
      color: #fff;
      gap: 9px;
      box-shadow: 0 0 24px rgba(220,85,42,.4);
    }

    .showcase-dots {
      display: flex;
      justify-content: center;
      gap: 12px;
      margin-top: 22px;
    }
    .ss-dot {
      width: 24px; height: 4px;
      border-radius: 100px;
      border: none;
      background: rgba(255,255,255,.18);
      cursor: pointer;
      padding: 0;
      transition: all .35s cubic-bezier(.4,0,.2,1);
    }
    .ss-dot:hover { background: rgba(255,255,255,.38); }
    .ss-dot.active {
      background: var(--vermilion);
      width: 36px;
      box-shadow: 0 0 12px rgba(220,85,42,.55);
    }

    @media (max-width: 700px) {
      .showcase-stage { min-height: 480px; }
      .showcase-slide { inset: 32px 24px 28px; gap: 10px; }
      .showcase-name { font-size: 32px; }
      .showcase-logo { height: 96px; }
      .showcase-logo-wrap::before { width: 200px; height: 200px; }
    }

    /* ══════════════════════════════════════════════════
       THREAT-SEVERITY GAUGE
    ══════════════════════════════════════════════════ */
    .gauge-wrap {
      max-width: 920px;
      margin: 36px auto 0;
      padding: 28px 36px;
      background: linear-gradient(135deg,
        rgba(11,26,43,.7),
        rgba(11,26,43,.4));
      border: 1px solid rgba(220,85,42,.28);
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 32px;
      position: relative;
      z-index: 1;
    }
    .gauge-svg {
      width: 130px; height: 80px;
      flex-shrink: 0;
    }
    .gauge-track {
      stroke: rgba(255,255,255,.10);
      stroke-width: 8;
      fill: none;
      stroke-linecap: round;
    }
    .gauge-fill {
      stroke: var(--vermilion);
      stroke-width: 8;
      fill: none;
      stroke-linecap: round;
      filter: drop-shadow(0 0 6px rgba(220,85,42,.6));
      transition: stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1);
    }
    .gauge-needle {
      stroke: #fff;
      stroke-width: 2;
      stroke-linecap: round;
      transform-origin: 65px 70px;
      transition: transform 1.2s cubic-bezier(.4,0,.2,1);
    }
    .gauge-text { flex: 1; }
    .gauge-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 8px;
    }
    .gauge-level {
      font-family: var(--font-h);
      font-size: 28px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.02em;
      line-height: 1;
      margin-bottom: 6px;
    }
    .gauge-sub {
      font-size: 13px;
      color: var(--silver);
      line-height: 1.55;
    }
    @media (max-width: 700px) {
      .gauge-wrap { flex-direction: column; align-items: flex-start; padding: 22px 24px; gap: 20px; }
    }

    /* ══════════════════════════════════════════════════
       SECTION CONNECTOR — animated arrow
    ══════════════════════════════════════════════════ */
    .sec-connector {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
      padding: 6px 0;
      max-width: 1240px;
      margin: 0 auto;
      opacity: 0;
      transition: opacity .6s ease;
    }
    .sec-connector.in { opacity: 1; }
    .sec-connector-line {
      width: 1px;
      height: 12px;
      background: linear-gradient(180deg, transparent, rgba(220,85,42,.5), transparent);
      position: relative;
      overflow: hidden;
    }
    .sec-connector-line::after {
      content: '';
      position: absolute;
      top: -8px; left: 50%;
      transform: translateX(-50%);
      width: 3px; height: 12px;
      background: var(--vermilion);
      box-shadow: 0 0 8px rgba(220,85,42,.7);
      animation: connector-flow 3s linear infinite;
    }
    @keyframes connector-flow {
      from { top: -10%; opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      to   { top: 110%; opacity: 0; }
    }
    .sec-connector-arrow {
      width: 10px; height: 10px;
      color: rgba(220,85,42,.7);
    }
    .sec-connector-label {
      font-family: var(--font-b);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: rgba(255,255,255,.35);
      margin-top: 4px;
    }

    /* ══════════════════════════════════════════════════
       OUTCOMES / IMPACT METRIC CARDS
    ══════════════════════════════════════════════════ */
    #outcomes {
      background: var(--charcoal-mid);
      padding: 65px 0;
      position: relative;
      overflow: hidden;
    }
    .out-hdr {
      max-width: 660px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .out-hdr .sh { color: #fff; }
    .out-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .out-hdr .eyebrow { color: var(--vermilion); }

    .out-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 3px;
      background: rgba(0,0,0,.4);
      border: 1px solid var(--bd-dark);
    }
    .out-card {
      background: var(--charcoal);
      padding: 36px 32px;
      transition: background .3s;
      position: relative;
      overflow: hidden;
    }
    .out-card:hover { background: var(--charcoal-alt); }
    .out-num {
      font-family: var(--font-h);
      font-size: clamp(40px, 4.5vw, 60px);
      font-weight: 700;
      color: var(--vermilion);
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 6px;
    }
    .out-num em { font-style: normal; color: rgba(220,85,42,.5); margin-left: 2px; font-size: 0.7em; vertical-align: top; }
    .out-title {
      font-family: var(--font-h);
      font-size: 17px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.01em;
      margin-bottom: 8px;
    }
    .out-text {
      font-size: 13.5px;
      color: var(--silver);
      line-height: 1.6;
      margin-bottom: 18px;
    }
    .out-bar {
      height: 4px;
      background: rgba(220,85,42,.15);
      border-radius: 2px;
      overflow: hidden;
      position: relative;
    }
    .out-bar-fill {
      position: absolute;
      top: 0; left: 0;
      height: 100%;
      width: 0%;
      background: linear-gradient(90deg, var(--vermilion), #ff8a5e);
      box-shadow: 0 0 8px rgba(220,85,42,.5);
      transition: width 1.6s cubic-bezier(.4,0,.2,1);
    }
    .out-grid.in .out-bar-fill { width: var(--fill, 100%); }

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

    /* ══════════════════════════════════════════════════
       COGNITIVE DATA-FLOW SVG DIAGRAM
    ══════════════════════════════════════════════════ */
    .cog-flow {
      max-width: 900px;
      margin: 56px auto 0;
      position: relative;
      z-index: 1;
    }
    .cog-flow-track {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      align-items: center;
    }
    .cog-flow-node {
      text-align: center;
      padding: 0 8px;
      position: relative;
    }
    .cog-flow-icon {
      width: 56px; height: 56px;
      margin: 0 auto 14px;
      border-radius: 50%;
      background: rgba(220,85,42,.10);
      border: 1px solid rgba(220,85,42,.35);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--vermilion);
      transition: all .3s;
    }
    .cog-flow-node:hover .cog-flow-icon {
      background: rgba(220,85,42,.22);
      transform: scale(1.08);
      box-shadow: 0 0 16px rgba(220,85,42,.5);
    }
    .cog-flow-icon svg { width: 24px; height: 24px; }
    .cog-flow-label {
      font-family: var(--font-h);
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.005em;
    }
    .cog-flow-sub {
      font-size: 11px;
      color: var(--silver);
      margin-top: 4px;
      letter-spacing: .04em;
      opacity: .7;
    }
    .cog-flow-arrow {
      position: absolute;
      top: 28px;
      right: -5%;
      width: 10%;
      height: 1px;
      background: linear-gradient(90deg, rgba(220,85,42,.35), rgba(220,85,42,.05));
    }
    .cog-flow-arrow::after {
      content: '';
      position: absolute;
      top: 50%; right: 0;
      width: 10px; height: 1px;
      background: var(--vermilion);
      transform: translateY(-50%);
      animation: flow-dot 2.8s linear infinite;
    }
    @keyframes flow-dot {
      0%   { left: 0%;   opacity: 0; }
      10%  { opacity: 1; }
      90%  { opacity: 1; }
      100% { left: 100%; opacity: 0; }
    }
    .cog-flow-node:last-child .cog-flow-arrow { display: none; }
    @media (max-width: 700px) {
      .cog-flow-track { grid-template-columns: 1fr 1fr; gap: 24px; }
      .cog-flow-arrow { display: none; }
    }

    /* ══════════════════════════════════════════════════
       ACHIEVEMENT MARQUEE — second motion row
    ══════════════════════════════════════════════════ */
    .achv-marquee {
      background: var(--charcoal);
      border-top: 1px solid var(--bd-dark);
      border-bottom: 1px solid var(--bd-dark);
      overflow: hidden;
      padding: 8px 0;
      mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    }
    .achv-track {
      display: flex;
      gap: 56px;
      width: max-content;
      animation: achv-scroll 40s linear infinite reverse;  /* opposite direction from trust marquee */
    }
    .achv-marquee:hover .achv-track { animation-play-state: paused; }
    @keyframes achv-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .achv-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
      white-space: nowrap;
      transition: color .25s;
    }
    .achv-item:hover { color: var(--vermilion); }
    .achv-item::before {
      content: '★';
      color: var(--vermilion);
      font-size: 12px;
    }

    /* ══════════════════════════════════════════════════
       HEXAGON HOVER OVERLAY on capability cards
    ══════════════════════════════════════════════════ */
    .cap-card {
      position: relative;
      overflow: hidden;
    }
    .cap-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(60deg,  transparent calc(50% - 0.5px), rgba(220,85,42,.18) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(-60deg, transparent calc(50% - 0.5px), rgba(220,85,42,.18) 50%, transparent calc(50% + 0.5px)),
        linear-gradient(180deg, transparent calc(50% - 0.5px), rgba(220,85,42,.18) 50%, transparent calc(50% + 0.5px));
      background-size: 30px 17px;
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
      mask-image: radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 70%);
      -webkit-mask-image: radial-gradient(circle 220px at var(--gx, 50%) var(--gy, 50%), #000 0%, transparent 70%);
    }
    .cap-card:hover::before { opacity: 1; }

    /* ══════════════════════════════════════════════════
       PRODUCT HERO — animated gradient border
    ══════════════════════════════════════════════════ */
    .prod-card.dk[id="breachshield"],
    .prod-card.red[id="fraudshield"] {
      position: relative;
      isolation: isolate;
    }
    .prod-card.dk[id="breachshield"]::before,
    .prod-card.red[id="fraudshield"]::before {
      content: '';
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: 4px;
      padding: 1px;
      background: conic-gradient(from 0deg,
        var(--vermilion) 0%,
        rgba(220,85,42,.1) 25%,
        var(--vermilion) 50%,
        rgba(220,85,42,.1) 75%,
        var(--vermilion) 100%);
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: prod-border-spin 24s linear infinite;
      opacity: .4;
      pointer-events: none;
    }
    @keyframes prod-border-spin {
      to { transform: rotate(1turn); }
    }
    /* on red FS card the gradient is brighter */
    .prod-card.red[id="fraudshield"]::before {
      background: conic-gradient(from 0deg,
        #fff 0%,
        rgba(255,255,255,.1) 30%,
        #ffd0a3 50%,
        rgba(255,255,255,.1) 75%,
        #fff 100%);
      opacity: .35;
    }
    @media (prefers-reduced-motion: reduce) {
      .prod-card.dk[id="breachshield"]::before,
      .prod-card.red[id="fraudshield"]::before { animation: none !important; }
    }

    /* ══════════════════════════════════════════════════
       BREACHSHIELD CONSOLE — interactive dashboard mock
    ══════════════════════════════════════════════════ */
    .bs-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: 48px;
      align-items: center;
    }
    @media (max-width: 1024px) {
      .bs-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    }
    .bs-hero-text { min-width: 0; }
    .bs-hero-text .prod-desc { max-width: none; }

    .bs-console {
      position: relative;
      display: grid;
      grid-template-columns: 124px minmax(0, 1fr);
      background: linear-gradient(180deg, #0a1320 0%, #0c1929 100%);
      border: 1px solid rgba(220,85,42,.18);
      border-radius: 8px;
      overflow: hidden;
      font-family: var(--font-b);
      font-size: 11px;
      line-height: 1.4;
      color: rgba(255,255,255,.78);
      box-shadow:
        0 30px 80px rgba(0,0,0,.5),
        inset 0 0 60px rgba(220,85,42,.04);
      transition: transform .4s cubic-bezier(.4,0,.2,1),
                  box-shadow .4s ease,
                  border-color .4s ease;
      max-width: 100%;
    }
    .bs-console:hover {
      transform: translateY(-4px) scale(1.01);
      border-color: rgba(220,85,42,.45);
      box-shadow:
        0 40px 100px rgba(0,0,0,.6),
        0 0 60px rgba(220,85,42,.18),
        inset 0 0 80px rgba(220,85,42,.08);
    }

    /* Sidebar */
    .bs-console-side {
      background: rgba(5,11,20,.6);
      border-right: 1px solid rgba(255,255,255,.05);
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .bs-side-brand {
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .bs-side-logo {
      width: 28px; height: 28px;
      filter: drop-shadow(0 0 6px rgba(220,85,42,.4));
    }
    .bs-side-brand-text {
      display: flex; flex-direction: column;
      line-height: 1.05;
    }
    .bs-side-brand-top {
      font-family: var(--font-h);
      font-size: 12px; font-weight: 700;
      color: #fff;
      letter-spacing: -.01em;
    }
    .bs-side-brand-bot {
      font-size: 8.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--vermilion);
      font-weight: 700;
      margin-top: 1px;
    }
    .bs-side-section {
      font-size: 8px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.32);
      font-weight: 700;
      padding-left: 4px;
    }
    .bs-side-nav {
      list-style: none;
      padding: 0; margin: 0;
      display: flex; flex-direction: column;
      gap: 1px;
    }
    .bs-side-nav li {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 10.5px;
      color: rgba(255,255,255,.55);
      transition: background .25s ease, color .25s ease;
    }
    .bs-side-nav li.active {
      background: rgba(220,85,42,.14);
      color: #fff;
    }
    .bs-side-nav li:hover {
      background: rgba(220,85,42,.10);
      color: rgba(255,255,255,.92);
      cursor: pointer;
    }
    .bs-side-nav li.active:hover {
      background: rgba(220,85,42,.20);
    }
    .bs-nav-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      flex-shrink: 0;
      transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .bs-side-nav li.active .bs-nav-dot,
    .bs-side-nav li:hover .bs-nav-dot {
      background: var(--vermilion);
      box-shadow: 0 0 6px rgba(220,85,42,.7);
      transform: scale(1.4);
    }

    /* Main panel */
    .bs-console-main {
      padding: 12px 12px 14px;
      display: flex; flex-direction: column;
      gap: 10px;
      min-width: 0;
      overflow: hidden;
    }
    .bs-console-bar {
      display: flex; align-items: center; gap: 5px;
      flex-wrap: nowrap;
      min-width: 0;
    }
    .bs-bar-title {
      font-family: var(--font-h);
      font-size: 13px; font-weight: 700;
      color: #fff;
      margin-right: auto;
    }
    .bs-bar-pill {
      padding: 4px 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 3px;
      font-size: 9.5px;
      color: rgba(255,255,255,.65);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .bs-bar-domain {
      color: var(--vermilion);
      border-color: rgba(220,85,42,.3);
      background: rgba(220,85,42,.08);
      max-width: 130px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bs-bar-search {
      padding: 4px 10px;
      background: var(--vermilion);
      color: #fff;
      border-radius: 3px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .04em;
      flex-shrink: 0;
    }

    .bs-tabs {
      display: flex;
      gap: 14px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding-bottom: 4px;
    }
    .bs-tab {
      font-size: 10.5px;
      color: rgba(255,255,255,.4);
      padding: 2px 0;
      position: relative;
    }
    .bs-tab.active {
      color: #fff;
    }
    .bs-tab.active::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: -5px;
      height: 1.5px;
      background: var(--vermilion);
      box-shadow: 0 0 6px rgba(220,85,42,.6);
    }

    /* Heatmap */
    .bs-heatmap {
      display: grid;
      grid-template-columns: repeat(28, 1fr);
      grid-auto-rows: 12px;
      gap: 2px;
      padding: 2px 0;
    }
    .bs-cell {
      width: 100%; height: 100%;
      border-radius: 2px;
      background: rgba(255,255,255,.04);
      transition: background .35s ease, transform .35s ease;
      will-change: background, transform;
    }
    .bs-cell[data-lvl="1"] { background: rgba(220,85,42,.18); }
    .bs-cell[data-lvl="2"] { background: rgba(220,85,42,.34); }
    .bs-cell[data-lvl="3"] { background: rgba(220,85,42,.55); }
    .bs-cell[data-lvl="4"] { background: rgba(220,85,42,.78); box-shadow: 0 0 4px rgba(220,85,42,.5); }
    /* Wave animation triggered on console hover */
    .bs-console:hover .bs-cell {
      animation: bs-cell-wave 2.4s ease-in-out infinite;
    }
    @keyframes bs-cell-wave {
      0%, 100% { transform: scale(1);   filter: brightness(1); }
      50%      { transform: scale(1.18); filter: brightness(1.6); }
    }

    .bs-heatmap-legend {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 9.5px;
      color: rgba(255,255,255,.5);
      margin-top: 2px;
    }
    .bs-legend-label {
      letter-spacing: .04em;
    }
    .bs-legend-scale {
      display: flex; align-items: center; gap: 3px;
    }
    .bs-legend-cell {
      width: 10px; height: 10px;
      border-radius: 2px;
      display: inline-block;
    }
    .bs-legend-cell[style*="--lvl:1"] { background: rgba(220,85,42,.18); }
    .bs-legend-cell[style*="--lvl:2"] { background: rgba(220,85,42,.34); }
    .bs-legend-cell[style*="--lvl:3"] { background: rgba(220,85,42,.55); }
    .bs-legend-cell[style*="--lvl:4"] { background: rgba(220,85,42,.78); }

    /* Events table */
    .bs-events {
      display: flex; flex-direction: column;
      gap: 2px;
      margin-top: 4px;
    }
    .bs-events-head, .bs-event-row {
      display: grid;
      grid-template-columns: 1fr .65fr 1fr 1fr;
      gap: 10px;
      align-items: center;
      padding: 5px 8px;
      font-size: 10px;
      border-radius: 3px;
    }
    .bs-events-head {
      color: rgba(255,255,255,.35);
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: 8.5px;
      font-weight: 700;
    }
    .bs-event-row {
      background: rgba(255,255,255,.02);
      color: rgba(255,255,255,.7);
      transition: background .25s ease, color .25s ease;
    }
    .bs-event-row span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .bs-fam {
      display: inline-block;
      padding: 1px 7px;
      background: rgba(91,159,193,.18);
      border-radius: 2px;
      font-size: 9px;
      color: #88b8d8;
      width: fit-content;
    }
    .bs-console:hover .bs-event-row {
      animation: bs-row-pulse 4s ease-in-out infinite;
    }
    .bs-console:hover .bs-event-row:nth-child(2) { animation-delay: .2s; }
    .bs-console:hover .bs-event-row:nth-child(3) { animation-delay: .4s; }
    .bs-console:hover .bs-event-row:nth-child(4) { animation-delay: .6s; }
    .bs-console:hover .bs-event-row:nth-child(5) { animation-delay: .8s; }
    @keyframes bs-row-pulse {
      0%, 100% { background: rgba(255,255,255,.02); }
      50%      { background: rgba(220,85,42,.10); color: #fff; }
    }

    /* Sweeping vermilion scan-line, only on hover */
    .bs-console-scan {
      position: absolute;
      left: 130px; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(220,85,42,.7) 50%, transparent 100%);
      box-shadow: 0 0 12px rgba(220,85,42,.55);
      opacity: 0;
      pointer-events: none;
      z-index: 2;
    }
    .bs-console:hover .bs-console-scan {
      animation: bs-scan 3s linear infinite;
      opacity: 1;
    }
    @keyframes bs-scan {
      0%   { top: 0;    opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    @media (max-width: 700px) {
      .bs-console { grid-template-columns: 100px minmax(0, 1fr); }
      .bs-console-main { padding: 10px 10px 12px; }
      .bs-bar-pill, .bs-bar-domain { font-size: 9px; padding: 3px 6px; }
      .bs-bar-domain { max-width: 100px; }
      .bs-heatmap { grid-template-columns: repeat(20, 1fr); grid-auto-rows: 10px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .bs-console:hover .bs-cell,
      .bs-console:hover .bs-event-row,
      .bs-console:hover .bs-console-scan { animation: none; }
    }

    /* ══════════════════════════════════════════════════
       FRAUDSHIELD CONSOLE — risk-scoring dashboard mock
    ══════════════════════════════════════════════════ */
    .fs-hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
      gap: 48px;
      align-items: center;
    }
    @media (max-width: 1024px) {
      .fs-hero-grid { grid-template-columns: 1fr; gap: 36px; }
    }
    .fs-hero-text { min-width: 0; }
    .fs-hero-text .prod-desc { max-width: none; }

    .fs-console {
      position: relative;
      display: grid;
      grid-template-columns: 124px minmax(0, 1fr);
      background: linear-gradient(180deg, #0a1320 0%, #0c1929 100%);
      border: 1px solid rgba(220,85,42,.20);
      border-radius: 8px;
      overflow: hidden;
      font-family: var(--font-b);
      font-size: 11px;
      line-height: 1.4;
      color: rgba(255,255,255,.78);
      max-width: 100%;
      box-shadow:
        0 30px 80px rgba(0,0,0,.5),
        inset 0 0 60px rgba(220,85,42,.04);
      transition: transform .4s cubic-bezier(.4,0,.2,1),
                  box-shadow .4s ease,
                  border-color .4s ease;
    }
    .fs-console:hover {
      transform: translateY(-4px) scale(1.01);
      border-color: rgba(220,85,42,.5);
      box-shadow:
        0 40px 100px rgba(0,0,0,.6),
        0 0 60px rgba(220,85,42,.20),
        inset 0 0 80px rgba(220,85,42,.08);
    }

    /* Sidebar — mirrors BS console look */
    .fs-console-side {
      background: rgba(5,11,20,.6);
      border-right: 1px solid rgba(255,255,255,.05);
      padding: 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .fs-side-brand {
      display: flex; align-items: center; gap: 8px;
      padding-bottom: 10px;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .fs-side-logo {
      width: 28px; height: 28px;
      filter: drop-shadow(0 0 6px rgba(220,85,42,.4));
    }
    .fs-side-brand-text {
      display: flex; flex-direction: column;
      line-height: 1.05;
    }
    .fs-side-brand-top {
      font-family: var(--font-h);
      font-size: 12px; font-weight: 700;
      color: #fff;
      letter-spacing: -.01em;
    }
    .fs-side-brand-bot {
      font-size: 8.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--vermilion);
      font-weight: 700;
      margin-top: 1px;
    }
    .fs-side-section {
      font-size: 8px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.32);
      font-weight: 700;
      padding-left: 4px;
    }
    .fs-side-nav {
      list-style: none;
      padding: 0; margin: 0;
      display: flex; flex-direction: column;
      gap: 1px;
    }
    .fs-side-nav li {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 8px;
      border-radius: 4px;
      font-size: 10.5px;
      color: rgba(255,255,255,.55);
      transition: background .25s ease, color .25s ease;
    }
    .fs-side-nav li.active {
      background: rgba(220,85,42,.14);
      color: #fff;
    }
    .fs-side-nav li:hover {
      background: rgba(220,85,42,.10);
      color: rgba(255,255,255,.92);
      cursor: pointer;
    }
    .fs-side-nav li.active:hover {
      background: rgba(220,85,42,.20);
    }
    .fs-nav-dot {
      width: 4px; height: 4px;
      border-radius: 50%;
      background: rgba(255,255,255,.25);
      flex-shrink: 0;
      transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
    }
    .fs-side-nav li.active .fs-nav-dot,
    .fs-side-nav li:hover .fs-nav-dot {
      background: var(--vermilion);
      box-shadow: 0 0 6px rgba(220,85,42,.7);
      transform: scale(1.4);
    }

    /* Main panel */
    .fs-console-main {
      padding: 12px 12px 14px;
      display: flex; flex-direction: column;
      gap: 9px;
      min-width: 0;
      overflow: hidden;
    }
    .fs-console-bar {
      display: flex; align-items: center; gap: 5px;
      flex-wrap: nowrap;
      min-width: 0;
    }
    .fs-bar-title {
      font-family: var(--font-h);
      font-size: 13px; font-weight: 700;
      color: #fff;
      margin-right: auto;
    }
    .fs-bar-pill {
      padding: 4px 8px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 3px;
      font-size: 9.5px;
      color: rgba(255,255,255,.65);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .fs-bar-search {
      padding: 4px 10px;
      background: var(--vermilion);
      color: #fff;
      border-radius: 3px;
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .04em;
      flex-shrink: 0;
    }

    /* KPI tile row */
    .fs-kpi-row {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6px;
    }
    .fs-kpi {
      padding: 7px 9px;
      background: rgba(255,255,255,.025);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 4px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .fs-kpi-label {
      font-size: 8.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.42);
      font-weight: 700;
    }
    .fs-kpi-num {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      line-height: 1.05;
      letter-spacing: -.01em;
    }
    .fs-kpi-unit {
      font-size: 9px;
      color: rgba(255,255,255,.5);
      font-weight: 600;
      letter-spacing: 0;
    }
    .fs-kpi-trend {
      font-size: 9px;
      color: rgba(255,255,255,.5);
      letter-spacing: .04em;
    }
    .fs-kpi-trend.up   { color: #22c55e; }
    .fs-kpi-trend.down { color: #ef4444; }
    .fs-kpi-bar {
      height: 3px;
      border-radius: 100px;
      background: rgba(255,255,255,.08);
      overflow: hidden;
      margin-top: 2px;
    }
    .fs-kpi-bar > span {
      display: block;
      height: 100%;
      width: var(--w, 0%);
      background: linear-gradient(90deg, #22c55e, #fbbf24);
      transition: width .8s cubic-bezier(.4,0,.2,1);
    }

    /* Sparkline */
    .fs-spark-wrap {
      padding: 6px 0 0;
    }
    .fs-spark-label {
      font-size: 8.5px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: rgba(255,255,255,.42);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .fs-spark {
      display: block;
      width: 100%;
      height: 50px;
    }
    .fs-spark-line {
      stroke-dasharray: 1000;
      stroke-dashoffset: 0;
    }
    .fs-console:hover .fs-spark-line {
      animation: fs-draw 4s linear infinite;
    }
    @keyframes fs-draw {
      0%   { stroke-dashoffset: 1000; }
      40%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: 0; }
    }
    .fs-spark-dot {
      filter: drop-shadow(0 0 4px rgba(220,85,42,.8));
    }
    .fs-console:hover .fs-spark-dot {
      animation: fs-spark-pulse 1.6s ease-in-out infinite;
    }
    @keyframes fs-spark-pulse {
      0%, 100% { r: 3; opacity: 1; }
      50%      { r: 5; opacity: .8; }
    }

    /* Live transaction feed */
    .fs-feed {
      display: flex; flex-direction: column;
      gap: 2px;
      margin-top: 2px;
    }
    .fs-feed-head, .fs-feed-row {
      display: grid;
      grid-template-columns: .7fr .55fr .8fr 1fr .65fr;
      gap: 8px;
      align-items: center;
      padding: 5px 8px;
      font-size: 10px;
      border-radius: 3px;
    }
    .fs-feed-head {
      color: rgba(255,255,255,.32);
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: 8.5px;
      font-weight: 700;
    }
    .fs-feed-row {
      background: rgba(255,255,255,.02);
      color: rgba(255,255,255,.72);
      transition: background .25s ease, color .25s ease;
    }
    .fs-feed-row span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .fs-channel {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 2px;
      font-size: 9px;
      width: fit-content;
      font-weight: 600;
    }
    .fs-channel.web { background: rgba(91,159,193,.18); color: #88b8d8; }
    .fs-channel.mob { background: rgba(167,139,250,.18); color: #b4a2f3; }
    .fs-channel.api { background: rgba(34,197,94,.16);  color: #6ee7a7; }

    .fs-score-cell {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .fs-score-bar {
      flex: 1;
      height: 4px;
      border-radius: 100px;
      background: rgba(255,255,255,.08);
      position: relative;
      overflow: hidden;
    }
    .fs-score-bar::after {
      content: '';
      position: absolute;
      left: 0; top: 0; bottom: 0;
      width: var(--score, 0%);
      background: var(--tone, #DC552A);
      border-radius: 100px;
      transition: width .8s cubic-bezier(.4,0,.2,1);
    }
    .fs-score-cell b {
      font-family: var(--font-h);
      font-size: 11px;
      color: #fff;
      font-weight: 700;
      min-width: 18px;
      text-align: right;
    }

    .fs-outcome {
      padding: 1px 7px;
      border-radius: 2px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      width: fit-content;
    }
    .fs-outcome.approve { background: rgba(34,197,94,.18);  color: #6ee7a7; }
    .fs-outcome.review  { background: rgba(251,191,36,.16); color: #fde047; }
    .fs-outcome.block   { background: rgba(239,68,68,.20);  color: #fca5a5; box-shadow: inset 0 0 0 1px rgba(239,68,68,.4); }

    /* Hover: rows pulse in sequence */
    .fs-console:hover .fs-feed-row {
      animation: fs-row-pulse 4s ease-in-out infinite;
    }
    .fs-console:hover .fs-feed-row:nth-child(2) { animation-delay: .15s; }
    .fs-console:hover .fs-feed-row:nth-child(3) { animation-delay: .30s; }
    .fs-console:hover .fs-feed-row:nth-child(4) { animation-delay: .45s; }
    .fs-console:hover .fs-feed-row:nth-child(5) { animation-delay: .60s; }
    .fs-console:hover .fs-feed-row:nth-child(6) { animation-delay: .75s; }
    @keyframes fs-row-pulse {
      0%, 100% { background: rgba(255,255,255,.02); }
      50%      { background: rgba(220,85,42,.10); color: #fff; }
    }
    /* Score-bar fill animation on hover */
    .fs-console:hover .fs-score-bar::after {
      animation: fs-score-flicker 2.4s ease-in-out infinite;
    }
    @keyframes fs-score-flicker {
      0%, 100% { opacity: .9; }
      50%      { opacity: 1;  filter: brightness(1.4); }
    }

    /* Sweeping scan line */
    .fs-console-scan {
      position: absolute;
      left: 124px; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent 0%, rgba(220,85,42,.7) 50%, transparent 100%);
      box-shadow: 0 0 12px rgba(220,85,42,.55);
      opacity: 0;
      pointer-events: none;
      z-index: 2;
    }
    .fs-console:hover .fs-console-scan {
      animation: fs-scan 3s linear infinite;
      opacity: 1;
    }
    @keyframes fs-scan {
      0%   { top: 0;    opacity: 0; }
      8%   { opacity: 1; }
      92%  { opacity: 1; }
      100% { top: 100%; opacity: 0; }
    }

    @media (max-width: 700px) {
      .fs-console { grid-template-columns: 100px minmax(0, 1fr); }
      .fs-console-main { padding: 10px 10px 12px; gap: 7px; }
      .fs-bar-pill { font-size: 9px; padding: 3px 6px; }
      .fs-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .fs-kpi-num { font-size: 14px; }
      .fs-feed-head, .fs-feed-row {
        grid-template-columns: .8fr .8fr 1fr .6fr;
        font-size: 9px;
      }
      .fs-feed-head span:nth-child(3), .fs-feed-row span:nth-child(3) { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .fs-console:hover .fs-feed-row,
      .fs-console:hover .fs-spark-line,
      .fs-console:hover .fs-spark-dot,
      .fs-console:hover .fs-score-bar::after,
      .fs-console:hover .fs-console-scan { animation: none; }
    }

    /* ══════════════════════════════════════════════════
       MANIFESTO DECRYPT TEXT REVEAL
    ══════════════════════════════════════════════════ */
    .manifesto-quote.decrypting em {
      color: var(--vermilion);
      text-shadow: 0 0 12px rgba(220,85,42,.5);
    }

    /* ══════════════════════════════════════════════════
       CODE-BRACKET EYEBROW STYLE
    ══════════════════════════════════════════════════ */
    .eyebrow.bracket {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .eyebrow.bracket::before,
    .eyebrow.bracket::after {
      color: rgba(220,85,42,.5);
      font-family: 'Courier New', monospace;
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0;
    }
    .eyebrow.bracket::before { content: '[ '; }
    .eyebrow.bracket::after  { content: ' ]'; }

    /* ══════════════════════════════════════════════════
       SIDE-NAV GLOWING CONNECTING LINE
    ══════════════════════════════════════════════════ */
    .page-nav { position: fixed; }
    .page-nav::before {
      content: '';
      position: absolute;
      left: 50%;
      top: -8px; bottom: -8px;
      width: 1px;
      transform: translateX(-50%);
      background: linear-gradient(180deg,
        transparent,
        rgba(220,85,42,.18) 15%,
        rgba(220,85,42,.18) 85%,
        transparent);
      z-index: -1;
    }
    .page-nav::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      width: 2px;
      height: var(--page-progress, 0%);
      transform: translateX(-50%);
      background: linear-gradient(180deg, var(--vermilion), #ff8a5e);
      box-shadow: 0 0 8px rgba(220,85,42,.7);
      z-index: -1;
      transition: height .25s ease-out;
    }

    /* ══════════════════════════════════════════════════
       HERO CTA — animated chevron
    ══════════════════════════════════════════════════ */
    .hero-ctas .btn-red {
      overflow: visible;
    }
    /* small orange ghost-arrow that pulses ahead of the button */
    .hero-ctas .btn-red::before { z-index: 1; } /* keep shimmer ::before */

    /* ══════════════════════════════════════════════════
       HERO FLOATING ACHIEVEMENT BADGES
    ══════════════════════════════════════════════════ */
    .hero-badges {
      position: absolute;
      top: 50%; right: 6%;
      transform: translateY(-50%);
      width: 220px;
      pointer-events: none;
      z-index: 1;
    }
    .hero-badge-card {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      border-radius: 6px;
      background: rgba(11,26,43,.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(220,85,42,.3);
      box-shadow: 0 12px 30px rgba(0,0,0,.35),
                  0 0 0 1px rgba(220,85,42,.12);
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fff;
      white-space: nowrap;
    }
    .hero-badge-card svg {
      width: 16px; height: 16px;
      color: var(--vermilion);
      flex-shrink: 0;
    }
    .hero-badge-card.b1 { top: 0;     right: 0;    --rot: -3deg; animation: hb-bob 6s   ease-in-out infinite; }
    .hero-badge-card.b2 { top: 80px;  right: 60px; --rot:  2deg; animation: hb-bob 7s   ease-in-out infinite -1.5s; }
    .hero-badge-card.b3 { top: 160px; right: 10px; --rot: -1deg; animation: hb-bob 5.5s ease-in-out infinite -3s; }
    .hero-badge-card.b4 { top: 240px; right: 70px; --rot:  3deg; animation: hb-bob 6.5s ease-in-out infinite -2s; }
    @keyframes hb-bob {
      0%, 100% { transform: translateY(0)     rotate(var(--rot, 0)); }
      50%      { transform: translateY(-10px) rotate(var(--rot, 0)); }
    }
    @media (max-width: 1100px) { .hero-badges { display: none; } }

    /* ══════════════════════════════════════════════════
       PROCESS TIMELINE — animated SVG arrows
    ══════════════════════════════════════════════════ */
    .proc-arrow {
      position: absolute;
      top: 22px;
      width: 14px; height: 14px;
      transform: translate(-50%, -50%);
      color: var(--vermilion);
      opacity: 0;
      transition: opacity .4s ease;
      pointer-events: none;
      z-index: 2;
    }
    .proc-track.in .proc-arrow { opacity: 1; }
    .proc-arrow.a1 { left: 28%; transition-delay: .55s; }
    .proc-arrow.a2 { left: 48%; transition-delay: 1.05s; }
    .proc-arrow.a3 { left: 68%; transition-delay: 1.55s; }
    .proc-arrow.a4 { left: 88%; transition-delay: 2.05s; }
    @media (max-width: 900px) { .proc-arrow { display: none; } }

    /* ══════════════════════════════════════════════════
       COGNITIVE TYPEWRITER HEADING
    ══════════════════════════════════════════════════ */
    .cog-h2.typewriter {
      display: inline-block;
      position: relative;
    }
    .cog-h2.typewriter::after {
      content: '';
      display: inline-block;
      width: 3px;
      height: 0.85em;
      background: var(--vermilion);
      margin-left: 6px;
      vertical-align: text-bottom;
      animation: caret-blink 1s steps(2, end) infinite;
      box-shadow: 0 0 6px rgba(220,85,42,.7);
    }
    .cog-h2.typewriter.done::after { display: none; }

    /* ══════════════════════════════════════════════════
       COMPARE TABLE — row stagger reveal
    ══════════════════════════════════════════════════ */
    .cmp-grid > div {
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .55s cubic-bezier(.2,.8,.2,1),
                  transform .55s cubic-bezier(.2,.8,.2,1);
    }
    .cmp-grid.in > div { opacity: 1; transform: none; }
    /* stagger by row (3 cells per row) */
    .cmp-grid.in > div:nth-child(-n+3)                  { transition-delay: 0s; }
    .cmp-grid.in > div:nth-child(n+4):nth-child(-n+6)   { transition-delay: .12s; }
    .cmp-grid.in > div:nth-child(n+7):nth-child(-n+9)   { transition-delay: .24s; }
    .cmp-grid.in > div:nth-child(n+10):nth-child(-n+12) { transition-delay: .36s; }
    .cmp-grid.in > div:nth-child(n+13):nth-child(-n+15) { transition-delay: .48s; }
    .cmp-grid.in > div:nth-child(n+16):nth-child(-n+18) { transition-delay: .60s; }

    /* ══════════════════════════════════════════════════
       NAV LINKS — animated underline
    ══════════════════════════════════════════════════ */
    .nav-links > li > a:not(.btn) {
      position: relative;
      padding-bottom: 2px;
    }
    .nav-links > li > a:not(.btn)::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1.5px;
      background: var(--vermilion);
      transform: scaleX(0);
      transform-origin: right;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .nav-links > li > a:not(.btn):hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }

    /* ══════════════════════════════════════════════════
       LOCAL-TIME CLOCKS in office cards
    ══════════════════════════════════════════════════ */
    .off-clock {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-top: 14px;
      padding: 5px 10px;
      border-radius: 3px;
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.10);
      font-family: 'Courier New', monospace;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.85);
      font-variant-numeric: tabular-nums;
    }
    .office-card.hq .off-clock {
      background: rgba(255,255,255,.18);
      border-color: rgba(255,255,255,.25);
      color: #fff;
    }
    .off-clock-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2s ease-in-out infinite;
    }
    .off-clock-tz {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      opacity: .55;
      margin-left: 2px;
    }

    /* ══════════════════════════════════════════════════
       HERO RADAR SCAN BEAM
    ══════════════════════════════════════════════════ */
    .hero-radar {
      position: absolute;
      top: 50%; right: -15%;
      transform: translateY(-50%);
      width: 700px; height: 700px;
      pointer-events: none;
      z-index: 0;
      opacity: .42;
    }
    .hero-radar-rings {
      position: absolute;
      inset: 0;
      border-radius: 50%;
    }
    .hero-radar-rings::before,
    .hero-radar-rings::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(220,85,42,.12);
    }
    .hero-radar-rings::after {
      inset: 25%;
      border-color: rgba(220,85,42,.16);
    }
    .hero-radar-inner {
      position: absolute;
      inset: 50%;
      width: 0; height: 0;
      border-radius: 50%;
      border: 1px solid rgba(220,85,42,.20);
    }
    .hero-radar-beam {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(220,85,42,0) 250deg,
        rgba(220,85,42,.5) 358deg,
        rgba(220,85,42,0) 360deg);
      animation: radar-spin 5s linear infinite;
    }
    .hero-radar-cross::before,
    .hero-radar-cross::after {
      content: '';
      position: absolute;
      background: rgba(220,85,42,.10);
    }
    .hero-radar-cross::before { top: 50%; left: 0; right: 0; height: 1px; }
    .hero-radar-cross::after  { left: 50%; top: 0; bottom: 0; width: 1px; }
    @keyframes radar-spin {
      to { transform: rotate(360deg); }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-radar-beam { animation: none !important; }
    }
    @media (max-width: 900px) { .hero-radar { display: none; } }

    /* ══════════════════════════════════════════════════
       FLOATING THREAT ALERT TOASTS (bottom-left)
    ══════════════════════════════════════════════════ */
    .toast-stack {
      position: fixed;
      bottom: 28px; left: 28px;
      display: flex;
      flex-direction: column-reverse;
      gap: 10px;
      z-index: 990;
      pointer-events: none;
      max-width: 340px;
    }
    .toast {
      background: rgba(11,26,43,.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(220,85,42,.35);
      border-left: 3px solid var(--vermilion);
      border-radius: 6px;
      padding: 12px 16px;
      box-shadow: 0 10px 30px rgba(0,0,0,.5),
                  0 0 0 1px rgba(220,85,42,.12);
      transform: translateX(-110%);
      opacity: 0;
      transition: transform .55s cubic-bezier(.4,0,.2,1),
                  opacity .55s ease;
      pointer-events: auto;
    }
    .toast.show {
      transform: translateX(0);
      opacity: 1;
    }
    .toast-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .toast-tag {
      font-family: var(--font-b);
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--vermilion);
    }
    .toast-time {
      font-family: 'Courier New', monospace;
      font-size: 10px;
      color: rgba(255,255,255,.4);
      margin-left: auto;
      font-variant-numeric: tabular-nums;
    }
    .toast-msg {
      font-size: 13px;
      line-height: 1.45;
      color: rgba(255,255,255,.92);
    }
    .toast-msg .hl { color: var(--vermilion); font-weight: 600; }
    .toast-pulse {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 8px rgba(220,85,42,.8);
      animation: ops-pulse 1.6s ease-in-out infinite;
    }
    @media (max-width: 680px) {
      .toast-stack { left: 16px; right: 16px; max-width: none; }
    }

    /* ══════════════════════════════════════════════════
       MAGNETIC NAV LINKS — JS adds .magnet
    ══════════════════════════════════════════════════ */
    .nav-links a.magnet {
      transition: transform .35s cubic-bezier(.2,.8,.2,1), color .2s;
      display: inline-block;
    }

    /* ══════════════════════════════════════════════════
       EASTER EGG OVERLAY
    ══════════════════════════════════════════════════ */
    .ee-overlay {
      position: fixed;
      inset: 0;
      background: radial-gradient(ellipse at center,
        rgba(220,85,42,.35) 0%,
        rgba(5,15,27,.96) 70%);
      z-index: 99999;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 18px;
      opacity: 0;
      pointer-events: none;
      transition: opacity .5s ease;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .ee-overlay.show { opacity: 1; pointer-events: auto; }
    .ee-overlay-tag {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .35em;
      text-transform: uppercase;
      color: var(--vermilion);
    }
    .ee-overlay-msg {
      font-family: var(--font-h);
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 0 30px rgba(220,85,42,.7);
    }
    .ee-overlay-sub {
      font-size: 13px;
      color: rgba(255,255,255,.6);
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .ee-overlay-bar {
      width: 220px;
      height: 2px;
      background: rgba(220,85,42,.2);
      border-radius: 1px;
      overflow: hidden;
      position: relative;
    }
    .ee-overlay-bar::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, transparent, var(--vermilion), transparent);
      animation: ee-bar 1.4s ease-in-out infinite;
    }
    @keyframes ee-bar {
      from { transform: translateX(-100%); }
      to   { transform: translateX(100%); }
    }

    /* ══════════════════════════════════════════════════
       NAV UTC CLOCK
    ══════════════════════════════════════════════════ */
    .nav-utc {
      font-family: 'Courier New', monospace;
      font-size: 10.5px;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.4);
      margin-left: 10px;
      padding-left: 10px;
      border-left: 1px solid rgba(255,255,255,.12);
      font-variant-numeric: tabular-nums;
    }
    .nav-utc-tag { color: rgba(220,85,42,.7); margin-right: 4px; font-weight: 700; }
    @media (max-width: 1100px) { .nav-utc { display: none; } }

    /* ══════════════════════════════════════════════════
       ROTATING THREAT GLOBE
    ══════════════════════════════════════════════════ */
    #globe-section {
      background: var(--charcoal);
      padding: 65px 0;
      position: relative;
      overflow: hidden;
    }
    .globe-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 64px;
      align-items: center;
    }
    .globe-text .sh { color: #fff; margin-bottom: 22px; }
    .globe-text .eyebrow { color: var(--vermilion); }
    .globe-text p {
      font-size: 16px;
      color: var(--silver);
      line-height: 1.72;
      margin-bottom: 14px;
    }
    .globe-stats {
      display: flex;
      gap: 32px;
      margin-top: 32px;
      flex-wrap: wrap;
    }
    .globe-stat-num {
      font-family: var(--font-h);
      font-size: 32px;
      font-weight: 700;
      color: var(--vermilion);
      line-height: 1;
      letter-spacing: -0.03em;
    }
    .globe-stat-lbl {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
      margin-top: 8px;
    }

    .globe-wrap {
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      max-width: 460px;
      margin: 0 auto;
    }
    .globe-svg {
      width: 100%; height: 100%;
      animation: globe-spin 60s linear infinite;
    }
    @keyframes globe-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
    /* concentric rings + ambient glow */
    .globe-wrap::before {
      content: '';
      position: absolute;
      inset: -30px;
      border-radius: 50%;
      background: radial-gradient(circle,
        rgba(220,85,42,.22) 0%, transparent 65%);
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .globe-svg { animation: none !important; }
    }
    @media (max-width: 900px) {
      .globe-grid { grid-template-columns: 1fr; gap: 40px; }
      .globe-text { text-align: center; }
      .globe-stats { justify-content: center; }
    }

    /* ══════════════════════════════════════════════════
       HERO PROOF-POINTS STRIP
    ══════════════════════════════════════════════════ */
    .hero-proof {
      display: flex;
      gap: 22px;
      margin-top: 28px;
      flex-wrap: wrap;
      align-items: center;
    }
    .hero-proof-item {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.55);
    }
    .hero-proof-item svg {
      width: 14px; height: 14px;
      color: var(--vermilion);
      flex-shrink: 0;
    }
    .hero-proof-divider {
      width: 1px; height: 14px;
      background: rgba(255,255,255,.15);
    }
    @media (max-width: 680px) {
      .hero-proof { gap: 14px; }
      .hero-proof-divider { display: none; }
    }

    /* ══════════════════════════════════════════════════
       FLOATING LIVE MINI-WIDGET (bottom-right)
    ══════════════════════════════════════════════════ */
    .live-mini {
      position: fixed;
      bottom: 28px; right: 96px;
      background: rgba(11,26,43,.85);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(220,85,42,.3);
      border-radius: 8px;
      padding: 10px 14px 10px 12px;
      z-index: 998;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 10px 30px rgba(0,0,0,.4);
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
    }
    .live-mini.show {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .live-mini-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2s ease-in-out infinite;
    }
    .live-mini-text {
      display: flex; flex-direction: column;
      line-height: 1.2;
    }
    .live-mini-label {
      font-size: 9.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    .live-mini-num {
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.01em;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 680px) { .live-mini { right: 80px; bottom: 24px; } }

    /* ══════════════════════════════════════════════════
       CLICK RIPPLE EFFECT
    ══════════════════════════════════════════════════ */
    .click-ripple {
      position: fixed;
      pointer-events: none;
      border: 2px solid var(--vermilion);
      border-radius: 50%;
      width: 12px; height: 12px;
      margin: -6px 0 0 -6px;
      z-index: 9997;
      animation: ripple-out .65s ease-out forwards;
    }
    @keyframes ripple-out {
      from { opacity: .9;  transform: scale(1); }
      to   { opacity: 0;   transform: scale(7); }
    }

    /* ══════════════════════════════════════════════════
       ACTIVE SECTION BREADCRUMB IN NAV
    ══════════════════════════════════════════════════ */
    .nav-current {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-right: 28px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      transition: opacity .3s, transform .3s;
    }
    .nav-current::before {
      content: '';
      width: 16px; height: 1px;
      background: rgba(220,85,42,.5);
    }
    .nav-current.hidden { opacity: 0; transform: translateX(-10px); pointer-events: none; }
    @media (max-width: 1100px) { .nav-current { display: none; } }

    /* ══════════════════════════════════════════════════
       NEWS-TICKER ITEM HOVER GLOW
    ══════════════════════════════════════════════════ */
    .news-item {
      cursor: pointer;
      padding: 14px 8px;
      margin: 0 -8px;
      border-radius: 4px;
      transition: background .25s, color .25s;
    }
    .news-item:hover {
      background: rgba(220,85,42,.08);
      color: #fff;
    }
    .news-item:hover .news-tag {
      text-shadow: 0 0 10px rgba(220,85,42,.7);
    }

    /* ══════════════════════════════════════════════════
       COMPARE TABLE — Generic Security vs Soteryan
    ══════════════════════════════════════════════════ */
    #compare {
      background: var(--charcoal);
      padding: 65px 0;
      position: relative;
      overflow: hidden;
    }
    .cmp-hdr {
      max-width: 660px;
      margin: 0 auto 64px;
      text-align: center;
    }
    .cmp-hdr .sh { color: #fff; }
    .cmp-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .cmp-hdr .eyebrow { color: var(--vermilion); }

    .cmp-grid {
      max-width: 980px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: minmax(160px, 1fr) 1fr 1fr;
      border: 1px solid var(--bd-dark);
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    .cmp-grid > div {
      padding: 22px 24px;
      border-bottom: 1px solid var(--bd-dark);
    }
    .cmp-grid > div:nth-last-child(-n+3) { border-bottom: 0; }
    .cmp-cell-axis {
      background: var(--charcoal-mid);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      display: flex;
      align-items: center;
    }
    .cmp-cell-generic {
      background: var(--charcoal-alt);
      color: rgba(255,255,255,.55);
      font-size: 14.5px;
      line-height: 1.55;
      position: relative;
    }
    .cmp-cell-soteryan {
      background: linear-gradient(135deg,
        rgba(220,85,42,.10) 0%,
        rgba(220,85,42,.04) 100%);
      color: #fff;
      font-size: 14.5px;
      line-height: 1.55;
      font-weight: 500;
      border-left: 1px solid rgba(220,85,42,.25);
      position: relative;
    }
    /* column headers */
    .cmp-head {
      font-family: var(--font-h);
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.01em;
    }
    .cmp-head-generic { color: rgba(255,255,255,.65); }
    .cmp-head-soteryan {
      color: var(--vermilion);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .cmp-head-soteryan::before {
      content: '';
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 8px rgba(220,85,42,.7);
    }
    /* row icons */
    .cmp-x, .cmp-check {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      font-size: 16px;
      line-height: 1;
    }
    .cmp-x { color: rgba(255,255,255,.32); }
    .cmp-check { color: var(--vermilion); }

    @media (max-width: 760px) {
      .cmp-grid { grid-template-columns: 1fr; }
      .cmp-cell-axis { padding: 14px 24px 6px; }
      .cmp-grid > div:nth-last-child(-n+3) { border-bottom: 1px solid var(--bd-dark); }
      .cmp-cell-generic, .cmp-cell-soteryan { padding-top: 14px; }
    }

    /* ══════════════════════════════════════════════════
       NAV LIVE STATUS BADGE
    ══════════════════════════════════════════════════ */
    .nav-status {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 100px;
      background: rgba(34,197,94,.10);
      border: 1px solid rgba(34,197,94,.28);
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #4ade80;
      margin-left: 14px;
    }
    .nav-status-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2s ease-in-out infinite;
    }
    @media (max-width: 1100px) { .nav-status { display: none; } }

    /* ══════════════════════════════════════════════════
       ACHIEVEMENT YEARS COUNTER (in About / Hero proof)
    ══════════════════════════════════════════════════ */
    .achv-strip {
      max-width: 1100px;
      margin: 0 auto;
      padding: 36px 48px;
      background: linear-gradient(135deg,
        rgba(220,85,42,.08) 0%,
        rgba(220,85,42,.02) 100%);
      border: 1px solid rgba(220,85,42,.18);
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 24px;
      position: relative;
    }
    .achv-strip-left {
      display: flex;
      align-items: center;
      gap: 22px;
    }
    .achv-num {
      font-family: var(--font-h);
      font-size: clamp(48px, 5vw, 72px);
      font-weight: 700;
      color: var(--vermilion);
      line-height: 1;
      letter-spacing: -0.04em;
    }
    .achv-num em { font-style: normal; }
    .achv-num-unit {
      font-family: var(--font-h);
      font-weight: 700;
      font-size: 0.6em;
      letter-spacing: -0.02em;
      color: var(--charcoal);
      margin-left: 8px;
      vertical-align: baseline;
    }
    .achv-text {
      max-width: 580px;
    }
    .achv-text-title {
      font-family: var(--font-h);
      font-size: clamp(20px, 2.2vw, 26px);
      font-weight: 700;
      color: var(--charcoal);
      letter-spacing: -0.015em;
      line-height: 1.25;
    }
    .achv-text-accent {
      color: var(--vermilion);
    }
    .achv-text-sub {
      font-size: 14px;
      color: var(--onyx);
      margin-top: 8px;
      line-height: 1.55;
    }

    /* ══════════════════════════════════════════════════
       PAGE-CORNER BRACKETS (subtle frame for sections)
    ══════════════════════════════════════════════════ */
    .corner-bracket {
      position: absolute;
      width: 36px; height: 36px;
      border: 1px solid rgba(220,85,42,.25);
      pointer-events: none;
      z-index: 1;
    }
    .corner-bracket.tl { top: 28px; left: 28px;    border-right: 0; border-bottom: 0; }
    .corner-bracket.tr { top: 28px; right: 28px;   border-left: 0;  border-bottom: 0; }
    .corner-bracket.bl { bottom: 28px; left: 28px; border-right: 0; border-top: 0; }
    .corner-bracket.br { bottom: 28px; right: 28px;border-left: 0;  border-top: 0; }
    @media (max-width: 900px) { .corner-bracket { display: none; } }

    /* ══════════════════════════════════════════════════
       FORM SUBMIT BURST (particles)
    ══════════════════════════════════════════════════ */
    .burst-particle {
      position: fixed;
      pointer-events: none;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 8px rgba(220,85,42,.8);
      z-index: 9999;
      will-change: transform, opacity;
    }

    /* ══════════════════════════════════════════════════
       MANIFESTO QUOTE ROTATOR
    ══════════════════════════════════════════════════ */
    .manifesto-quote {
      min-height: 4em;
      transition: opacity .55s ease;
    }
    .manifesto-quote.fade-out { opacity: 0; }

    /* ══════════════════════════════════════════════════
       LIVE OPS — "Today" big ticking counter
    ══════════════════════════════════════════════════ */
    .ops-today {
      max-width: 920px;
      margin: 0 auto 36px;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .ops-today-label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 14px;
    }
    .ops-today-label::before {
      content: '';
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #22c55e;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2.2s ease-in-out infinite;
    }
    .ops-today-num {
      font-family: var(--font-h);
      font-size: clamp(48px, 6vw, 88px);
      font-weight: 700;
      line-height: 1;
      letter-spacing: -0.04em;
      color: #fff;
      display: inline-block;
      font-variant-numeric: tabular-nums;
    }
    .ops-today-num::after {
      content: '';
      display: inline-block;
      width: 3px; height: .85em;
      background: var(--vermilion);
      margin-left: 10px;
      vertical-align: middle;
      animation: caret-blink 1s steps(2,end) infinite;
      box-shadow: 0 0 8px rgba(220,85,42,.7);
    }
    .ops-today-sub {
      font-size: 14px;
      color: var(--silver);
      margin-top: 14px;
      letter-spacing: .03em;
    }
    .ops-today-sub strong { color: #fff; font-weight: 600; }

    /* ══════════════════════════════════════════════════
       HEXAGON MESH BACKGROUND
    ══════════════════════════════════════════════════ */
    .hex-mesh {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .35;
      mask-image: radial-gradient(ellipse 70% 60% at center, #000 0%, transparent 90%);
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, #000 0%, transparent 90%);
    }
    .hex-mesh svg {
      width: 100%; height: 100%;
      animation: hex-drift 40s linear infinite;
    }
    .hex-mesh polygon {
      fill: none;
      stroke: rgba(220,85,42,.18);
      stroke-width: 1;
    }
    .hex-mesh polygon.hot {
      stroke: rgba(220,85,42,.55);
      animation: hex-glow 3s ease-in-out infinite;
    }
    @keyframes hex-drift {
      from { transform: translate(0, 0); }
      to   { transform: translate(-90px, -52px); }
    }
    @keyframes hex-glow {
      0%, 100% { stroke-opacity: .15; }
      50%      { stroke-opacity: .9; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hex-mesh svg, .hex-mesh polygon.hot { animation: none !important; }
    }

    /* ══════════════════════════════════════════════════
       GLASSMORPHISM CERTIFICATION CARDS
    ══════════════════════════════════════════════════ */
    .cert-card {
      background: linear-gradient(135deg,
        rgba(11,26,43,.7) 0%,
        rgba(11,26,43,.4) 100%) !important;
      backdrop-filter: blur(10px) saturate(140%);
      -webkit-backdrop-filter: blur(10px) saturate(140%);
      border: 1px solid rgba(255,255,255,.06) !important;
      position: relative;
      overflow: hidden;
    }
    .cert-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(255,255,255,.04) 0%,
        transparent 50%);
      pointer-events: none;
      opacity: 0;
      transition: opacity .35s;
    }
    .cert-card:hover::before { opacity: 1; }
    .cert-card:hover {
      border-color: rgba(220,85,42,.4) !important;
      transform: translateY(-6px) !important;
      box-shadow: 0 18px 50px rgba(0,0,0,.35),
                  0 0 0 1px rgba(220,85,42,.18),
                  0 8px 30px rgba(220,85,42,.12) !important;
    }

    /* ══════════════════════════════════════════════════
       FLOATING-LABEL CONTACT FORM
    ══════════════════════════════════════════════════ */
    .f-grp { position: relative; }
    .f-grp .f-lbl {
      position: absolute;
      left: 16px;
      top: 14px;
      transform-origin: left center;
      transition: all .28s cubic-bezier(.4,0,.2,1);
      pointer-events: none;
      background: var(--charcoal-mid);
      padding: 0 6px;
      margin: 0;
      letter-spacing: .08em;
    }
    .f-grp .f-inp,
    .f-grp .f-ta {
      padding: 14px 16px;
    }
    .f-grp .f-ta { padding-top: 18px; }
    /* float the label up when input is focused or has content */
    .f-grp .f-inp:focus + .f-lbl,
    .f-grp .f-inp:not(:placeholder-shown) + .f-lbl,
    .f-grp .f-ta:focus + .f-lbl,
    .f-grp .f-ta:not(:placeholder-shown) + .f-lbl {
      top: -7px;
      font-size: 9.5px;
      color: var(--vermilion);
      letter-spacing: .12em;
      transform: scale(1);
    }
    .f-grp .f-inp::placeholder,
    .f-grp .f-ta::placeholder { color: transparent; }

    /* ══════════════════════════════════════════════════
       FLOATING "TALK TO EXPERT" SIDE BADGE
    ══════════════════════════════════════════════════ */
    .side-cta {
      position: fixed;
      left: 0;
      bottom: 100px;
      writing-mode: vertical-rl;
      background: linear-gradient(180deg, #DC552A 0%, #B8441F 100%);
      color: #fff;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .28em;
      text-transform: uppercase;
      padding: 24px 14px;
      text-decoration: none;
      border-radius: 0 6px 6px 0;
      transition: padding .3s cubic-bezier(.4,0,.2,1), background .3s ease;
      z-index: 99;
      opacity: 0;
      transform: rotate(180deg) translateY(24px);
      display: inline-flex;
      align-items: center;
      gap: 12px;
      animation: side-cta-glow 3s ease-in-out infinite;
    }
    @keyframes side-cta-glow {
      0%, 100% {
        box-shadow:
          0 0 0 1px rgba(220,85,42,.4),
          0 0 24px 2px rgba(220,85,42,.5),
          0 0 60px 8px rgba(220,85,42,.25),
          4px 8px 28px rgba(0,0,0,.5);
      }
      50% {
        box-shadow:
          0 0 0 1px rgba(220,85,42,.7),
          0 0 36px 4px rgba(220,85,42,.7),
          0 0 100px 20px rgba(220,85,42,.45),
          4px 8px 32px rgba(0,0,0,.5);
      }
    }
    .side-cta.show {
      opacity: 1;
      transform: rotate(180deg) translateY(0);
    }
    .side-cta:hover {
      background: linear-gradient(180deg, #ED6033 0%, #C04E26 100%);
      padding-right: 20px;
    }
    .side-cta-pulse {
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 0 12px 3px rgba(255,255,255,.85);
      animation: ops-pulse 2s ease-in-out infinite;
    }
    @media (max-width: 900px) { .side-cta { display: none; } }

    /* ══════════════════════════════════════════════════
       KEN BURNS slow zoom on industry hover bg
    ══════════════════════════════════════════════════ */
    #industries .ind-bg.active {
      animation: ken-burns 16s ease-out forwards;
    }
    @keyframes ken-burns {
      from { transform: scale(1); }
      to   { transform: scale(1.08); }
    }

    /* ══════════════════════════════════════════════════
       PROCESS TIMELINE — "How we engage"
    ══════════════════════════════════════════════════ */
    #process {
      background: var(--charcoal-mid);
      padding: 65px 0;
      position: relative;
      overflow: hidden;
    }
    .proc-hdr {
      max-width: 660px;
      margin: 0 auto 80px;
      text-align: center;
    }
    .proc-hdr .sh { color: #fff; }
    .proc-hdr p { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .proc-hdr .eyebrow { color: var(--vermilion); }

    .proc-track {
      position: relative;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 28px;
      max-width: 1100px;
      margin: 0 auto;
    }
    /* horizontal connecting line behind step circles */
    .proc-track::before {
      content: '';
      position: absolute;
      top: 22px; left: 8%; right: 8%;
      height: 1px;
      background: rgba(220,85,42,.18);
    }
    /* animated progress line on top */
    .proc-track::after {
      content: '';
      position: absolute;
      top: 22px; left: 8%;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--vermilion), #ff8a5e);
      box-shadow: 0 0 8px rgba(220,85,42,.6);
      transition: width 2.5s cubic-bezier(.4,0,.2,1);
    }
    .proc-track.in::after { width: 84%; }

    .proc-step {
      position: relative;
      text-align: center;
      z-index: 1;
    }
    .proc-step-num {
      width: 44px; height: 44px;
      margin: 0 auto 18px;
      border-radius: 50%;
      background: var(--charcoal);
      border: 1px solid rgba(220,85,42,.3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-h);
      font-size: 14px;
      font-weight: 700;
      color: var(--vermilion);
      transition: all .35s cubic-bezier(.4,0,.2,1);
      position: relative;
    }
    .proc-step-num::after {
      content: '';
      position: absolute;
      inset: -6px;
      border: 1px solid rgba(220,85,42,.2);
      border-radius: 50%;
      opacity: 0;
      transition: opacity .35s;
    }
    .proc-step:hover .proc-step-num {
      background: var(--vermilion);
      color: #fff;
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(220,85,42,.6);
    }
    .proc-step:hover .proc-step-num::after { opacity: 1; }

    .proc-step-title {
      font-family: var(--font-h);
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      margin-bottom: 8px;
      letter-spacing: -0.01em;
    }
    .proc-step-text {
      font-size: 13px;
      color: var(--silver);
      line-height: 1.55;
      max-width: 180px;
      margin: 0 auto;
    }

    @media (max-width: 900px) {
      .proc-track { grid-template-columns: 1fr; gap: 36px; max-width: 480px; }
      .proc-track::before, .proc-track::after { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: 100%; }
      .proc-track::after { transition: height 2.5s cubic-bezier(.4,0,.2,1); height: 0; width: 1px; background: linear-gradient(180deg, var(--vermilion), #ff8a5e); }
      .proc-track.in::after { height: 100%; width: 1px; }
    }

    /* ══════════════════════════════════════════════════
       SECTION HEADING WORD-STAGGER REVEAL
    ══════════════════════════════════════════════════ */
    .sh-stagger > .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(28px);
      transition: opacity .8s cubic-bezier(.2,.8,.2,1),
                  transform .8s cubic-bezier(.2,.8,.2,1);
    }
    .sh-stagger > .word.in { opacity: 1; transform: none; }

    /* Vertical accent labels removed — caused confusion at small sizes */
    .vert-label { display: none !important; }
    /* Scroll indicator was overlapping the hero CTAs once the ticker landed */
    .scroll-hint { display: none !important; }

    /* ══════════════════════════════════════════════════
       FOOTER NEWSLETTER
    ══════════════════════════════════════════════════ */
    .footer-newsletter {
      margin-top: 24px;
    }
    .footer-newsletter-label {
      font-size: 13.5px;
      color: rgba(255,255,255,.55);
      line-height: 1.5;
      margin-bottom: 12px;
    }
    .footer-newsletter-form {
      display: flex;
      gap: 0;
      max-width: 320px;
      border: 1px solid var(--bd-dark);
      border-radius: 4px;
      overflow: hidden;
      transition: border-color .25s;
    }
    .footer-newsletter-form:focus-within { border-color: rgba(220,85,42,.6); }
    .footer-newsletter-form input {
      flex: 1;
      background: rgba(255,255,255,.04);
      border: 0;
      color: #fff;
      padding: 10px 14px;
      font-family: var(--font-b);
      font-size: 13px;
      outline: none;
      min-width: 0;
    }
    .footer-newsletter-form input::placeholder { color: rgba(255,255,255,.3); }
    .footer-newsletter-form button {
      background: var(--vermilion);
      border: 0;
      color: #fff;
      padding: 0 16px;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .04em;
      cursor: pointer;
      transition: background .2s;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .footer-newsletter-form button:hover { background: var(--vermilion-dk); }
    .footer-newsletter-note {
      font-size: 11.5px;
      color: rgba(255,255,255,.3);
      margin-top: 10px;
    }
    .footer-newsletter-note.success { color: #4ade80; }

    /* ══════════════════════════════════════════════════
       BUTTON GLITCH-HOVER on hero CTAs
    ══════════════════════════════════════════════════ */
    .hero-ctas .btn {
      position: relative;
    }
    .hero-ctas .btn[data-text] {
      position: relative;
    }
    .hero-ctas .btn[data-text]::before,
    .hero-ctas .btn[data-text]::after {
      content: attr(data-text);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
      pointer-events: none;
      opacity: 0;
      font: inherit;
      letter-spacing: inherit;
    }
    .hero-ctas .btn[data-text]::before { color: rgba(0, 200, 255, .85); }
    .hero-ctas .btn[data-text]::after  { color: rgba(255, 80, 100, .85); }
    .hero-ctas .btn[data-text]:hover::before {
      animation: btn-glitch-cyan .55s steps(2,end) 1;
    }
    .hero-ctas .btn[data-text]:hover::after {
      animation: btn-glitch-magenta .55s steps(2,end) 1;
    }
    @keyframes btn-glitch-cyan {
      0%   { opacity: .85; transform: translate(-52%, -50%); }
      30%  { opacity: .85; transform: translate(-48%, -52%); }
      60%  { opacity: .85; transform: translate(-51%, -48%); }
      100% { opacity: 0;   transform: translate(-50%, -50%); }
    }
    @keyframes btn-glitch-magenta {
      0%   { opacity: .85; transform: translate(-48%, -50%); }
      30%  { opacity: .85; transform: translate(-52%, -48%); }
      60%  { opacity: .85; transform: translate(-49%, -52%); }
      100% { opacity: 0;   transform: translate(-50%, -50%); }
    }

    /* ══════════════════════════════════════════════════
       TYPING CARET on hero ticker
    ══════════════════════════════════════════════════ */
    .hero-caret {
      display: inline-block;
      width: 2px;
      height: 1.1em;
      background: var(--vermilion);
      margin-left: 6px;
      vertical-align: text-bottom;
      animation: caret-blink 1s steps(2, end) infinite;
      box-shadow: 0 0 6px rgba(220,85,42,.7);
    }
    @keyframes caret-blink {
      0%, 50% { opacity: 1; }
      50.01%, 100% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-caret { animation: none; opacity: 1; }
    }

    /* ══════════════════════════════════════════════════
       HERO ROTATING STAT TICKER
    ══════════════════════════════════════════════════ */
    .hero-ticker {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      margin-top: 0;
      margin-bottom: 0;
      font-family: var(--font-b);
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .04em;
      color: rgba(255,255,255,.6);
      padding: 8px 14px;
      border-left: 2px solid var(--vermilion);
      background: rgba(220,85,42,.07);
      border-radius: 0 4px 4px 0;
      max-width: 100%;
      overflow: hidden;
    }
    .hero-ticker-dot {
      flex-shrink: 0;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: var(--vermilion);
      box-shadow: 0 0 8px rgba(220,85,42,.8);
      animation: ht-pulse 1.6s ease-in-out infinite;
    }
    @keyframes ht-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%      { opacity: .4; transform: scale(.7); }
    }
    .hero-ticker-track {
      position: relative;
      height: 1.4em;
      flex: 1;
      overflow: hidden;
      min-width: 0;
    }
    .hero-ticker-line {
      position: absolute;
      inset: 0;
      line-height: 1.4em;
      white-space: nowrap;
      opacity: 0;
      transform: translateY(120%);
      transition: opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1);
    }
    .hero-ticker-line.in {
      opacity: 1;
      transform: translateY(0);
    }
    .hero-ticker-line.out {
      opacity: 0;
      transform: translateY(-120%);
    }
    .hero-ticker-line strong { color: #fff; font-weight: 700; }

    /* ══════════════════════════════════════════════════
       CURSOR COMET TRAIL
    ══════════════════════════════════════════════════ */
    .cursor-trail-dot {
      position: fixed;
      top: 0; left: 0;
      pointer-events: none;
      z-index: 9998;
      border-radius: 50%;
      background: var(--vermilion);
      will-change: transform;
      contain: layout style size;
    }
    @media (pointer: coarse) {
      .cursor-trail-dot { display: none; }
    }

    /* ══════════════════════════════════════════════════
       HOLOGRAPHIC SHIMMER on hero gradient text
    ══════════════════════════════════════════════════ */
    .grad-text {
      background: linear-gradient(120deg,
        var(--vermilion) 0%,
        #ff8a5e 35%,
        #ffd0a3 50%,
        #ff8a5e 65%,
        var(--vermilion) 100%);
      background-size: 250% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      animation: hologram-shimmer 5.5s ease-in-out infinite;
    }
    @keyframes hologram-shimmer {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }

    /* ══════════════════════════════════════════════════
       OFFICES — animated threat-network canvas
    ══════════════════════════════════════════════════ */
    #offices .off-network {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .9;
      mask-image: radial-gradient(ellipse 95% 85% at center,
                    #000 25%, transparent 100%);
      -webkit-mask-image: radial-gradient(ellipse 95% 85% at center,
                    #000 25%, transparent 100%);
    }

    /* ══════════════════════════════════════════════════
       SECTION DIVIDERS — DISABLED.

       These were decorative animated vermilion lines + dot between
       sections. Made sense when sections alternated light/dark bg
       (a "transition" element), but after the dark-theme work
       most adjacent sections are now both dark — so the vermilion
       line just hangs in the void looking like a glitch. The DOM
       elements stay (they're aria-hidden anyway, so screen readers
       don't care) but we hide them visually.

       To restore: revert this hunk + the elements at lines ~7905,
       9105, 9323, 9517 will animate back in via the .in observer.
    ══════════════════════════════════════════════════ */
    .sec-divider { display: none; }

    /* ══════════════════════════════════════════════════
       SOLUTION-CARD ICON ANIMATIONS — hover-driven
    ══════════════════════════════════════════════════ */
    .sol-card:hover .sol-icon { transform: translateY(-3px); }
    .sol-card .sol-icon { transition: transform .35s cubic-bezier(.4,0,.2,1), color .3s; }

    /* nth-child gives each card a different icon animation flavour */
    /* 1: Consultancy — circle inside pulses */
    .sol-card:nth-child(1):hover .sol-icon circle { animation: si-pulse 1.1s ease-in-out infinite; transform-origin: 30px 30px; transform-box: fill-box; }
    /* 2: Managed Services — outer ring rotates around centre */
    .sol-card:nth-child(2):hover .sol-icon { animation: si-spin 6s linear infinite; }
    /* 3: Security Assessments — dashes/strokes draw */
    .sol-card:nth-child(3):hover .sol-icon path { animation: si-trace 2s ease-out forwards; }
    /* 4: Incident Response — checkmark draws + shield bumps */
    .sol-card:nth-child(4):hover .sol-icon path:last-child {
      stroke-dasharray: 14;
      stroke-dashoffset: 14;
      animation: si-stroke .65s ease-out forwards;
    }

    @keyframes si-pulse {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.18); }
    }
    @keyframes si-spin {
      to { transform: rotate(360deg); }
    }
    @keyframes si-trace {
      from { stroke-dasharray: 200; stroke-dashoffset: 200; }
      to   { stroke-dasharray: 200; stroke-dashoffset: 0; }
    }
    @keyframes si-stroke {
      to { stroke-dashoffset: 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      .sol-card:hover .sol-icon,
      .sol-card:hover .sol-icon * { animation: none !important; transform: none !important; }
    }

    /* ══════════════════════════════════════════════════
       CYBER NETWORK CANVAS — in hero
    ══════════════════════════════════════════════════ */
    .hero-network {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: .6;
    }

    /* ══════════════════════════════════════════════════
       SIDE NAV DOTS (right edge of viewport)
    ══════════════════════════════════════════════════ */
    .page-nav {
      position: fixed;
      top: 50%; right: 22px;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      gap: 14px;
      z-index: 100;
      opacity: 0;
      transition: opacity .4s ease;
    }
    .page-nav.show { opacity: 1; }
    .page-nav-dot {
      position: relative;
      width: 10px; height: 10px;
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,.35);
      background: transparent;
      cursor: pointer;
      transition: all .3s cubic-bezier(.4,0,.2,1);
      padding: 0;
    }
    .page-nav-dot:hover { border-color: var(--vermilion); transform: scale(1.4); }
    .page-nav-dot.active {
      background: var(--vermilion);
      border-color: var(--vermilion);
      transform: scale(1.3);
      box-shadow: 0 0 12px rgba(220,85,42,.6);
    }
    /* tooltip on hover */
    .page-nav-dot::after {
      content: attr(data-label);
      position: absolute;
      right: calc(100% + 14px);
      top: 50%;
      transform: translateY(-50%) translateX(8px);
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #fff;
      background: var(--charcoal);
      padding: 6px 12px;
      border-radius: 3px;
      border: 1px solid var(--bd-dark);
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transition: opacity .25s, transform .25s;
    }
    .page-nav-dot:hover::after {
      opacity: 1;
      transform: translateY(-50%) translateX(0);
    }
    @media (max-width: 900px) { .page-nav { display: none; } }

    /* ══════════════════════════════════════════════════
       Better CTA arrow micro-animation
    ══════════════════════════════════════════════════ */
    /* the `&rarr;` in btn-red copy gets a small slide on hover */
    .btn-red, .btn-ghost { white-space: nowrap; }
    .btn-red, .btn-ghost-dark, .btn-ghost { isolation: isolate; }

    /* ══════════════════════════════════════════════════
       HERO GLITCH + SCAN-LINES
    ══════════════════════════════════════════════════ */
    /* Periodic RGB-split glitch on the gradient hero word block */
    .grad-text {
      position: relative;
      display: inline-block;
    }
    .grad-text::before,
    .grad-text::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      pointer-events: none;
      opacity: 0;
    }
    /* Run only on the first gradient word so the effect doesn't
       triple-fire across all three words. */
    .stagger > .grad-text:first-of-type::before {
      color: rgba(0, 200, 255, .85);
      animation: glitch-cyan 7s ease-in-out infinite;
    }
    .stagger > .grad-text:first-of-type::after {
      color: rgba(255, 80, 100, .85);
      animation: glitch-magenta 7s ease-in-out infinite;
    }
    @keyframes glitch-cyan {
      0%, 92%, 100% { opacity: 0; transform: translate(0, 0); }
      93%, 95%      { opacity: .85; transform: translate(-3px, 1px); }
      94%           { opacity: .85; transform: translate(2px, -2px); }
    }
    @keyframes glitch-magenta {
      0%, 92%, 100% { opacity: 0; transform: translate(0, 0); }
      93%, 95%      { opacity: .85; transform: translate(3px, -1px); }
      94%           { opacity: .85; transform: translate(-2px, 2px); }
    }
    @media (prefers-reduced-motion: reduce) {
      .grad-text::before, .grad-text::after { animation: none !important; }
    }

    /* CRT scan-lines on the hero — extremely subtle */
    #hero .scanlines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background: repeating-linear-gradient(
        180deg,
        rgba(255,255,255,0)   0px,
        rgba(255,255,255,0)   2px,
        rgba(255,255,255,.012) 2px,
        rgba(255,255,255,.012) 3px
      );
      mix-blend-mode: overlay;
    }

    /* ══════════════════════════════════════════════════
       FAQ ACCORDION
    ══════════════════════════════════════════════════ */
    #faq {
      background: var(--charcoal-mid);
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }
    .faq-hdr {
      max-width: 600px;
      margin: 0 auto 56px;
      text-align: center;
    }
    .faq-hdr .sh { color: #fff; }
    .faq-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .faq-hdr .eyebrow { color: var(--vermilion); }

    .faq-list {
      max-width: 880px;
      margin: 0 auto;
    }
    .faq-item {
      border-bottom: 1px solid var(--bd-dark);
      transition: border-color .3s;
    }
    .faq-item.open { border-bottom-color: rgba(220,85,42,.4); }
    .faq-q {
      width: 100%;
      background: none;
      border: 0;
      color: #fff;
      font-family: var(--font-h);
      font-size: clamp(18px, 1.7vw, 22px);
      font-weight: 600;
      letter-spacing: -0.01em;
      text-align: left;
      padding: 28px 0;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 24px;
      transition: color .25s;
    }
    .faq-q:hover { color: var(--vermilion); }
    .faq-item.open .faq-q { color: var(--vermilion); }
    .faq-icon {
      flex-shrink: 0;
      width: 36px; height: 36px;
      border-radius: 50%;
      border: 1px solid var(--bd-dark);
      position: relative;
      transition: all .35s cubic-bezier(.4,0,.2,1);
    }
    .faq-icon::before, .faq-icon::after {
      content: '';
      position: absolute;
      background: currentColor;
      top: 50%; left: 50%;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
    }
    .faq-icon::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
    .faq-icon::after  { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
    .faq-item.open .faq-icon {
      border-color: var(--vermilion);
      background: rgba(220,85,42,.12);
    }
    .faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }

    .faq-a {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .45s cubic-bezier(.4,0,.2,1);
    }
    .faq-item.open .faq-a { grid-template-rows: 1fr; }
    .faq-a-inner {
      overflow: hidden;
    }
    .faq-a p {
      font-size: 16px;
      line-height: 1.72;
      color: var(--silver);
      padding: 0 0 28px 0;
      max-width: 720px;
    }

    /* ══════════════════════════════════════════════════
       LIVE OPERATIONS — fake threat-intel dashboard
    ══════════════════════════════════════════════════ */
    #live-ops {
      background: var(--charcoal);
      padding: 60px 0;
      position: relative;
      overflow: hidden;
    }
    /* faint grid texture */
    #live-ops::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(220,85,42,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(220,85,42,.04) 1px, transparent 1px);
      background-size: 80px 80px;
      mask-image: radial-gradient(ellipse 70% 60% at center, black 0%, transparent 90%);
      pointer-events: none;
    }
    .ops-hdr {
      max-width: 660px;
      margin: 0 auto 48px;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .ops-hdr .sh { color: #fff; }
    .ops-hdr p   { color: var(--silver); font-size: 16px; line-height: 1.65; margin-top: 14px; }
    .ops-hdr .eyebrow { color: var(--vermilion); justify-content: center; }

    /* Live metrics row */
    .ops-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
      max-width: 920px;
      margin: 0 auto 36px;
      position: relative;
      z-index: 1;
    }
    .ops-stat {
      background: var(--charcoal-mid);
      border: 1px solid var(--bd-dark);
      padding: 28px 24px;
      text-align: center;
      transition: border-color .3s;
    }
    .ops-stat:hover { border-color: rgba(220,85,42,.4); }
    .ops-stat-dot {
      display: inline-block;
      width: 7px; height: 7px;
      border-radius: 50%;
      background: #22c55e;
      margin-right: 8px;
      vertical-align: middle;
      box-shadow: 0 0 0 0 rgba(34,197,94,.6);
      animation: ops-pulse 2.2s ease-in-out infinite;
    }
    @keyframes ops-pulse {
      0%, 100% { box-shadow: 0 0 0 0   rgba(34,197,94,.6); }
      70%      { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
    }
    .ops-stat-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      margin-bottom: 12px;
    }
    .ops-stat-num {
      font-family: var(--font-h);
      font-size: 36px;
      font-weight: 700;
      color: #fff;
      letter-spacing: -0.025em;
      line-height: 1;
    }
    .ops-stat-num em {
      font-style: normal;
      color: var(--vermilion);
      margin-left: 2px;
    }
    .ops-stat-sub {
      font-size: 12px;
      color: rgba(255,255,255,.5);
      margin-top: 8px;
    }

    /* Terminal mockup */
    .ops-terminal {
      max-width: 920px;
      margin: 0 auto;
      background: #0a1726;
      border: 1px solid var(--bd-dark);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,.5),
                  0 0 0 1px rgba(220,85,42,.15);
      position: relative;
      z-index: 1;
    }
    .ops-term-bar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 18px;
      background: #0d1f33;
      border-bottom: 1px solid var(--bd-dark);
    }
    .ops-term-dots { display: flex; gap: 6px; }
    .ops-term-dots span {
      width: 11px; height: 11px;
      border-radius: 50%;
      background: #3b4659;
    }
    .ops-term-dots span:nth-child(1) { background: #ff5f57; }
    .ops-term-dots span:nth-child(2) { background: #febc2e; }
    .ops-term-dots span:nth-child(3) { background: #28c840; }
    .ops-term-title {
      font-family: 'Courier New', monospace;
      font-size: 12px;
      color: rgba(255,255,255,.5);
      letter-spacing: .05em;
    }
    .ops-term-title::before {
      content: '◆ ';
      color: var(--vermilion);
    }
    .ops-term-body {
      font-family: 'Courier New', monospace;
      font-size: 13px;
      line-height: 1.7;
      color: #cfd9e7;
      padding: 22px 24px;
      min-height: 360px;
      max-height: 360px;
      overflow: hidden;
      position: relative;
    }
    /* fade-out at top so old lines dissolve */
    .ops-term-body::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 50px;
      background: linear-gradient(180deg, #0a1726 0%, transparent 100%);
      pointer-events: none;
    }
    .ops-line {
      display: flex;
      gap: 12px;
      align-items: baseline;
      opacity: 0;
      transform: translateY(8px);
      animation: ops-line-in .45s cubic-bezier(.2,.8,.2,1) forwards;
      white-space: nowrap;
    }
    @keyframes ops-line-in {
      to { opacity: 1; transform: none; }
    }
    .ops-time {
      color: rgba(207,217,231,.4);
      flex-shrink: 0;
    }
    .ops-tag {
      flex-shrink: 0;
      font-weight: 700;
      letter-spacing: .03em;
      padding: 1px 6px;
      border-radius: 2px;
    }
    .ops-tag.crit { background: rgba(255,95,87,.18); color: #ff857d; }
    .ops-tag.trk  { background: rgba(220,85,42,.18); color: #ff8a5e; }
    .ops-tag.neu  { background: rgba(34,197,94,.16); color: #4ade80; }
    .ops-tag.intel{ background: rgba(96,165,250,.16); color: #93c5fd; }
    .ops-msg { color: #cfd9e7; }
    .ops-msg .hl { color: #fff; font-weight: 600; }
    .ops-msg .hl-orange { color: var(--vermilion); }

    @media (max-width: 900px) {
      .ops-stats { grid-template-columns: 1fr; }
      .ops-term-body { font-size: 11.5px; padding: 18px 16px; min-height: 320px; max-height: 320px; }
      .ops-line { white-space: normal; flex-wrap: wrap; }
    }

    /* Data-sources footer under live ops — credit transparency */
    .ops-sources {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      margin-top: 24px;
      padding: 14px 18px;
      background: rgba(255,255,255,.02);
      border: 1px solid var(--bd-dark);
      border-radius: 4px;
      font-size: 12px;
      color: rgba(255,255,255,.55);
    }
    .ops-sources a {
      color: var(--vermilion);
      text-decoration: none;
      transition: color .2s;
    }
    .ops-sources a:hover { color: #fff; text-decoration: underline; }
    .ops-sources-label {
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-size: 10px;
      color: rgba(255,255,255,.7);
      margin-right: 4px;
    }
    .ops-sources-sep { color: rgba(255,255,255,.25); }
    .ops-sources-refresh {
      margin-left: auto;
      font-size: 11px;
      color: rgba(255,255,255,.4);
      font-style: italic;
    }
    @media (max-width: 720px) {
      .ops-sources-refresh { margin-left: 0; flex-basis: 100%; }
    }

    /* ══════════════════════════════════════════════════
       PULL-QUOTE — editorial brand statement
    ══════════════════════════════════════════════════ */
    #manifesto {
      background: var(--charcoal);
      padding: 70px 0;
      position: relative;
      overflow: hidden;
    }
    /* large faded quote-mark ornament behind the text */
    #manifesto::before {
      content: '\201C';
      position: absolute;
      top: 30px; left: 8%;
      font-family: var(--font-h);
      font-size: 360px;
      line-height: 1;
      color: var(--vermilion);
      opacity: .07;
      pointer-events: none;
      font-weight: 700;
    }
    /* soft vignette glow */
    #manifesto::after {
      content: '';
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 900px; height: 500px;
      background: radial-gradient(ellipse,
        rgba(220,85,42,.10), transparent 70%);
      pointer-events: none;
    }
    .manifesto-inner {
      max-width: 920px;
      margin: 0 auto;
      text-align: center;
      position: relative;
      z-index: 1;
    }
    .manifesto-eyebrow {
      display: inline-block;
      font-family: var(--font-b);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--vermilion);
      margin-bottom: 36px;
    }
    .manifesto-quote {
      font-family: var(--font-h);
      font-size: clamp(28px, 3.6vw, 50px);
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.02em;
      color: #fff;
      margin-bottom: 36px;
    }
    .manifesto-quote em {
      font-style: normal;
      color: var(--vermilion);
    }
    .manifesto-attr {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.5);
    }
    .manifesto-attr::before {
      content: '';
      display: inline-block;
      width: 32px; height: 1px;
      background: var(--vermilion);
    }

    /* ════════════════════════════════════════════════════
       SMOOTH SCROLL TARGETS — extra offset so headings
       don't hide under the fixed nav.
       Nav height: 102px at top-of-page, 80px when scrolled.
       100px gives ~20px breathing room under the scrolled nav.
    ════════════════════════════════════════════════════ */
    section[id] { scroll-margin-top: 100px; }

    /* ════════════════════════════════════════════════════
       PREMIUM POLISH LAYER
       Custom cursor, scroll progress, magnetic CTAs,
       parallax, back-to-top, section numbering, brand
       text-selection.
    ════════════════════════════════════════════════════ */

    /* Brand text selection */
    ::selection         { background: rgba(220,85,42,.45); color: #fff; }
    ::-moz-selection    { background: rgba(220,85,42,.45); color: #fff; }

    /* Brand scrollbar (WebKit) */
    ::-webkit-scrollbar       { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: #050f1b; }
    ::-webkit-scrollbar-thumb { background: rgba(220,85,42,.45); border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: rgba(220,85,42,.7); }

    /* Top scroll progress bar */
    .scroll-progress {
      position: fixed;
      top: 0; left: 0;
      height: 3px;
      width: 0;
      background: linear-gradient(90deg, var(--vermilion), #ff8a5e);
      box-shadow: 0 0 12px rgba(220,85,42,.55);
      z-index: 1001;
      transition: width .12s linear;
      pointer-events: none;
    }

    /* Custom cursor follower */
    .cursor {
      position: fixed;
      top: 0; left: 0;
      width: 12px; height: 12px;
      margin: -6px 0 0 -6px;
      border-radius: 50%;
      background: rgba(220,85,42,.85);
      pointer-events: none;
      z-index: 9999;
      transition: width .22s ease, height .22s ease,
                  margin .22s ease, background .22s ease,
                  border-color .22s ease, opacity .22s ease;
      will-change: transform;
      contain: layout style size;
    }
    .cursor.is-link {
      width: 38px; height: 38px;
      margin: -19px 0 0 -19px;
      background: rgba(220,85,42,.18);
      border: 1.5px solid rgba(220,85,42,.6);
    }
    .cursor.is-hidden { opacity: 0; }
    body.cursor-on { cursor: none; }
    body.cursor-on a, body.cursor-on button,
    body.cursor-on .btn, body.cursor-on input,
    body.cursor-on textarea, body.cursor-on .show-card,
    body.cursor-on .ind-card, body.cursor-on .sol-card,
    body.cursor-on .why-card, body.cursor-on .step-card,
    body.cursor-on .cap-card, body.cursor-on .office-card,
    body.cursor-on .cert-card, body.cursor-on .nav-burger { cursor: none; }
    @media (pointer: coarse) {
      .cursor { display: none; }
      body.cursor-on { cursor: auto; }
    }

    /* Cursor-follower glow inside select cards */
    .glow-card {
      --gx: 50%;
      --gy: 50%;
      position: relative;
      isolation: isolate;
    }
    .glow-card::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle 280px at var(--gx) var(--gy),
                  rgba(220,85,42,.18), transparent 60%);
      opacity: 0;
      transition: opacity .35s ease;
      pointer-events: none;
      z-index: 0;
    }
    .glow-card:hover::after { opacity: 1; }
    /* keep card content above the glow */
    .glow-card > * { position: relative; z-index: 1; }

    /* Floating back-to-top */
    .back-top {
      position: fixed;
      bottom: 28px; right: 28px;
      width: 50px; height: 50px;
      border-radius: 50%;
      background: var(--vermilion);
      color: #fff;
      border: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 30px rgba(220,85,42,.4);
      z-index: 998;
      opacity: 0;
      transform: translateY(16px) scale(.9);
      transition: opacity .35s ease, transform .35s cubic-bezier(.2,.8,.2,1),
                  background .25s ease;
      pointer-events: none;
    }
    .back-top.show {
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }
    .back-top:hover {
      background: var(--vermilion-dk);
      transform: translateY(-3px);
      box-shadow: 0 14px 40px rgba(220,85,42,.55);
    }
    .back-top svg { width: 20px; height: 20px; }

    /* Section number badge in eyebrow row */
    .section-num {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: var(--font-h);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: .18em;
      color: rgba(255,255,255,.34);
      margin-right: 14px;
      vertical-align: middle;
    }
    .section-num::after {
      content: '';
      display: inline-block;
      width: 22px; height: 1px;
      background: currentColor;
      opacity: .55;
    }
    /* lighter version for dark eyebrow on light bg */
    section[id="services"] .section-num,
    section[id="about"]     .section-num { color: rgba(5,15,27,.34); }

    /* Magnetic transform target — JS sets transform; we just need the
       transition smoothness. */
    .magnet { transition: transform .35s cubic-bezier(.2,.8,.2,1); }

    /* Tone down the existing CTA pulse a touch so it stacks better
       with the magnetic transform. */
    .hero-ctas .btn-red { transform-origin: center; }

    /* Hero kinetic-exit helper (set via JS) */
    .hero-content { will-change: transform, opacity; }

    /* Subtle film grain on dark sections */
    .grainy::before {
      content: '';
      position: absolute; inset: 0;
      background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/>\
<feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.45 0'/>\
</filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
      opacity: .06;
      mix-blend-mode: overlay;
      pointer-events: none;
      z-index: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .scroll-progress, .cursor, .back-top { transition: none !important; }
      .hero-content { transform: none !important; opacity: 1 !important; }
    }

    /* ══════════════════════════════════════════════════
       LIGHT THEME — overrides for hardcoded #fff / dark backgrounds
       The variable swap above handles `var(--charcoal)` / `var(--silver)`
       cleanly. This block targets the rest: hardcoded white text, deep
       gradients, glow rgba's etc.
    ══════════════════════════════════════════════════ */
    [data-theme="light"] body {
      background: var(--bg-page);
      color: var(--text-strong);
    }
    [data-theme="light"] #nav {
      background: linear-gradient(to bottom, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 100%);
    }
    [data-theme="light"] #nav.scrolled {
      background: rgba(255,255,255,.92);
      border-bottom-color: var(--bd-dark);
    }
    [data-theme="light"] .nav-logo-fallback,
    [data-theme="light"] .nav-links a,
    [data-theme="light"] .nav-mobile a {
      color: rgba(5,15,27,.78);
    }
    [data-theme="light"] .nav-links a:hover,
    [data-theme="light"] .nav-mobile a:hover {
      color: var(--text-strong);
    }
    [data-theme="light"] .nav-burger span { background: var(--text-strong); }
    [data-theme="light"] .nav-mobile {
      background: rgba(255,255,255,.98);
      border-top-color: var(--bd-dark);
    }
    /* Logo brand mark — flip to dark variant if present, else invert filter */
    [data-theme="light"] .nav-logo-img {
      filter: brightness(.05);
    }

    /* Hero — text colour swap */
    [data-theme="light"] .hero-h1 { color: var(--text-strong); }
    [data-theme="light"] .hero-rotate-vp { color: var(--text-strong); }
    [data-theme="light"] .hero-eyebrow { color: rgba(5,15,27,.72); }
    [data-theme="light"] .hero-sub { color: rgba(5,15,27,.72); }
    [data-theme="light"] .hero-proof-item { color: rgba(5,15,27,.55); }
    [data-theme="light"] .hero-proof-divider { background: rgba(5,15,27,.15); }
    [data-theme="light"] .scroll-hint { color: rgba(5,15,27,.4); }
    [data-theme="light"] .scroll-mouse { border-color: rgba(5,15,27,.25); }
    [data-theme="light"] .scroll-mouse::after { background: rgba(5,15,27,.45); }
    [data-theme="light"] .hero-bottom { border-top-color: rgba(5,15,27,.08); }
    [data-theme="light"] .hero-h1 em { color: var(--vermilion); }
    [data-theme="light"] .hero-rotate-product { color: var(--vermilion); }
    /* Hero ambient effects — soften so they read on white */
    [data-theme="light"] #hero::before {
      background-image: radial-gradient(circle, rgba(5,15,27,.05) 1px, transparent 1px);
    }
    [data-theme="light"] #hero::after {
      background: radial-gradient(circle, rgba(220,85,42,.10) 0%, transparent 65%);
    }
    [data-theme="light"] .hero-glow-bl {
      background: radial-gradient(circle, rgba(220,85,42,.06) 0%, transparent 70%);
    }
    [data-theme="light"] .hero-blob { opacity: .25; }
    [data-theme="light"] .hero-radar-rings,
    [data-theme="light"] .hero-radar-cross,
    [data-theme="light"] .hero-radar-beam { opacity: .35; }
    [data-theme="light"] .scanlines { display: none; }
    [data-theme="light"] .particles { opacity: .35; }

    /* Hero showcase — keep card distinctly elevated on light bg */
    [data-theme="light"] .showcase-stage {
      background: linear-gradient(135deg, #ffffff 0%, #f0f0f3 100%);
      border-color: rgba(5,15,27,.10);
    }
    [data-theme="light"] .showcase-name { color: var(--text-strong); }
    [data-theme="light"] .showcase-meta { color: rgba(5,15,27,.45); }
    [data-theme="light"] .showcase-tagline { color: rgba(5,15,27,.65); }
    [data-theme="light"] .showcase-status { color: rgba(5,15,27,.55); }

    /* Live Operations — biggest dark section, full re-skin */
    [data-theme="light"] .ops-today-label { color: rgba(5,15,27,.7); }
    [data-theme="light"] .ops-today-num { color: var(--text-strong); }
    [data-theme="light"] .ops-today-sub { color: rgba(5,15,27,.6); }
    [data-theme="light"] .ops-today-num strong,
    [data-theme="light"] .ops-today-sub strong { color: var(--vermilion); }
    [data-theme="light"] .ops-stat {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .ops-stat-label { color: rgba(5,15,27,.6); }
    [data-theme="light"] .ops-stat-num { color: var(--text-strong); }
    [data-theme="light"] .ops-stat-sub { color: rgba(5,15,27,.55); }
    [data-theme="light"] .gauge-wrap {
      background: linear-gradient(135deg, #ffffff, #f5f5f7);
      border-color: rgba(220,85,42,.28);
    }
    [data-theme="light"] .gauge-label { color: rgba(5,15,27,.7); }
    [data-theme="light"] .gauge-level { color: var(--vermilion); }
    [data-theme="light"] .gauge-sub { color: rgba(5,15,27,.7); }
    [data-theme="light"] .gauge-track { stroke: rgba(5,15,27,.14); }
    /* Live-feed terminal — keep dark on purpose (it's a console UI). */
    [data-theme="light"] .ops-terminal {
      box-shadow: 0 18px 42px rgba(5,15,27,.10);
    }

    /* Data sources footer */
    [data-theme="light"] .ops-sources {
      background: rgba(5,15,27,.04);
      border-color: var(--bd-dark);
      color: rgba(5,15,27,.65);
    }
    [data-theme="light"] .ops-sources-label { color: rgba(5,15,27,.75); }
    [data-theme="light"] .ops-sources-sep { color: rgba(5,15,27,.25); }
    [data-theme="light"] .ops-sources-refresh { color: rgba(5,15,27,.45); }

    /* Products — show cards & capabilities */
    [data-theme="light"] .show-card {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .show-card:hover {
      background: var(--charcoal-alt);
      border-color: rgba(220,85,42,.4);
    }
    [data-theme="light"] .show-card.flagship.fs {
      background: linear-gradient(135deg, #ffffff 0%, rgba(220,85,42,.08) 100%);
    }
    [data-theme="light"] .show-name { color: var(--text-strong); }
    [data-theme="light"] .show-meta { color: rgba(5,15,27,.45); }
    [data-theme="light"] .show-text { color: rgba(5,15,27,.65); }
    [data-theme="light"] .cap-card {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .cap-title { color: var(--text-strong); }
    [data-theme="light"] .cap-text { color: rgba(5,15,27,.65); }

    /* Sub-product placeholders (DNSShield / Fraud SDK) */
    [data-theme="light"] .placeholder {
      background: var(--charcoal-alt);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .ph-name { color: var(--text-strong); }
    [data-theme="light"] .ph-meta { color: rgba(5,15,27,.55); }
    [data-theme="light"] .ph-desc { color: rgba(5,15,27,.7); }
    [data-theme="light"] .ph-li { color: rgba(5,15,27,.7); }
    [data-theme="light"] .ph-note { color: rgba(5,15,27,.45); }

    /* Product detail (BreachShield / FraudShield long-form) */
    [data-theme="light"] .prod-card {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .prod-card.dk { background: var(--charcoal-alt); }
    [data-theme="light"] .prod-name,
    [data-theme="light"] .prod-tag,
    [data-theme="light"] .prod-sub { color: var(--text-strong); }
    [data-theme="light"] .prod-desc,
    [data-theme="light"] .prod-text { color: rgba(5,15,27,.7); }

    /* About / Certs / Offices */
    [data-theme="light"] #about { background: #f8f9fb; }
    [data-theme="light"] #certs {
      background: var(--charcoal);  /* white via swap */
      color: var(--text-strong);
    }
    [data-theme="light"] .certs-hdr .sh,
    [data-theme="light"] .cert-abbr { color: var(--text-strong); }
    [data-theme="light"] .certs-hdr p,
    [data-theme="light"] .cert-name { color: rgba(5,15,27,.65); }
    [data-theme="light"] .cert-card {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] #offices { background: var(--charcoal-mid); }
    [data-theme="light"] .offices-hdr .sh { color: var(--text-strong); }
    [data-theme="light"] .offices-hdr p { color: rgba(5,15,27,.65); }
    [data-theme="light"] .office-card {
      background: var(--charcoal);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .office-card.hq { background: var(--vermilion); }
    [data-theme="light"] .office-card:not(.hq) .off-city { color: var(--text-strong); }
    [data-theme="light"] .office-card:not(.hq) .off-co,
    [data-theme="light"] .office-card:not(.hq) .off-addr,
    [data-theme="light"] .office-card:not(.hq) .off-contact { color: rgba(5,15,27,.65); }

    /* Industries / Why / Outcomes / Compare / Process — these are dark
       sections that should turn light. Variable swap covers backgrounds;
       hardcoded-white text gets a sweep here. */
    [data-theme="light"] #industries .ind-card { background: var(--charcoal-mid); border-color: var(--bd-dark); }
    [data-theme="light"] .ind-card-title { color: var(--text-strong); }
    [data-theme="light"] .ind-card-text { color: rgba(5,15,27,.65); }
    [data-theme="light"] .out-card { background: var(--charcoal-mid); border-color: var(--bd-dark); }
    [data-theme="light"] .out-num { color: var(--text-strong); }
    [data-theme="light"] .out-card-title,
    [data-theme="light"] .out-card-text { color: rgba(5,15,27,.7); }
    [data-theme="light"] .cmp-grid > div { color: rgba(5,15,27,.85); }
    [data-theme="light"] .cmp-cell-soteryan { background: rgba(220,85,42,.08); }
    [data-theme="light"] .proc-step { background: var(--charcoal-mid); border-color: var(--bd-dark); }
    [data-theme="light"] .proc-step-title { color: var(--text-strong); }
    [data-theme="light"] .proc-step-text { color: rgba(5,15,27,.65); }

    /* Manifesto / Trust / Solutions / FAQ */
    [data-theme="light"] .manifesto-quote { color: var(--text-strong); }
    [data-theme="light"] .manifesto-quote em { color: var(--vermilion); }
    [data-theme="light"] .trust-logo { filter: invert(1) brightness(.3); opacity: .6; }
    [data-theme="light"] .sol-card {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .sol-card-title { color: var(--text-strong); }
    [data-theme="light"] .sol-card-text { color: rgba(5,15,27,.65); }
    [data-theme="light"] .faq-item {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .faq-q { color: var(--text-strong); }
    [data-theme="light"] .faq-a { color: rgba(5,15,27,.7); }

    /* Contact form */
    [data-theme="light"] .contact-form {
      background: var(--charcoal-mid);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .contact-form input,
    [data-theme="light"] .contact-form textarea,
    [data-theme="light"] .contact-form select {
      background: #ffffff;
      color: var(--text-strong);
      border-color: var(--bd-dark);
    }
    [data-theme="light"] .contact-form label,
    [data-theme="light"] .contact-form .field-label { color: rgba(5,15,27,.7); }
    [data-theme="light"] .contact-form input::placeholder,
    [data-theme="light"] .contact-form textarea::placeholder { color: rgba(5,15,27,.4); }

    /* News ticker (top strip) — invert */
    [data-theme="light"] .news-ticker {
      background: var(--charcoal-alt);
      border-bottom: 1px solid var(--bd-dark);
    }
    [data-theme="light"] .news-ticker-label { background: var(--vermilion); }
    [data-theme="light"] .news-item { color: rgba(5,15,27,.75); }
    [data-theme="light"] .news-tag { background: rgba(220,85,42,.12); color: var(--vermilion); }

    /* Section-headings */
    [data-theme="light"] .sh,
    [data-theme="light"] h2.sh,
    [data-theme="light"] .ops-hdr h2,
    [data-theme="light"] .prod-hdr h2,
    [data-theme="light"] .ops-hdr p,
    [data-theme="light"] .prod-hdr p { color: var(--text-strong); }
    [data-theme="light"] .ops-hdr p,
    [data-theme="light"] .prod-hdr p,
    [data-theme="light"] .why-hdr p,
    [data-theme="light"] .out-hdr p,
    [data-theme="light"] .cmp-hdr p,
    [data-theme="light"] .proc-hdr p { color: rgba(5,15,27,.65); }

    /* Footer */
    [data-theme="light"] .footer {
      background: var(--charcoal-mid);
      border-top: 1px solid var(--bd-dark);
    }
    [data-theme="light"] .footer-col-title { color: var(--text-strong); }
    [data-theme="light"] .footer a { color: rgba(5,15,27,.7); }
    [data-theme="light"] .footer a:hover { color: var(--text-strong); }
    [data-theme="light"] .footer-bottom { color: rgba(5,15,27,.5); }

    /* Outcomes bars / sparkline strokes — make visible on light */
    [data-theme="light"] .out-spark-line { stroke: var(--vermilion); }
    [data-theme="light"] .out-spark-area { fill: rgba(220,85,42,.12); }
    [data-theme="light"] .out-bar-track { background: rgba(5,15,27,.08); }

    /* Cursor trail / overlay effects on light bg */
    [data-theme="light"] .cursor-trail-dot { mix-blend-mode: multiply; }

    /* Sub-product big-logo halo — gentler on light */
    [data-theme="light"] .ph-logo-halo {
      background: radial-gradient(circle,
        rgba(220,85,42,.18) 0%,
        rgba(220,85,42,.06) 30%,
        transparent 70%);
    }
    [data-theme="light"] .ph-logo-ring { border-color: rgba(220,85,42,.35); }
    [data-theme="light"] .ph-logo-ring.inner { border-color: rgba(220,85,42,.22); }

    /* "12+ Years" achv-strip — already on light bg, keep as-is. */

    /* ══════════════════════════════════════════════════
       LIGHT THEME — COMPREHENSIVE TEXT SWEEP
       Catches all the residual hardcoded #fff text that the
       targeted overrides above missed. Uses class-level rules
       so we don't accidentally invert text inside elements
       that should stay white (button labels, selection, the
       live-feed terminal, HQ office card, etc.).
    ══════════════════════════════════════════════════ */

    /* All section eyebrow + headline + paragraph triples */
    [data-theme="light"] .ops-hdr .sh,
    [data-theme="light"] .prod-hdr .sh,
    [data-theme="light"] .ind-hdr .sh,
    [data-theme="light"] .why-hdr .sh,
    [data-theme="light"] .out-hdr .sh,
    [data-theme="light"] .cmp-hdr .sh,
    [data-theme="light"] .proc-hdr .sh,
    [data-theme="light"] .certs-hdr .sh,
    [data-theme="light"] .offices-hdr .sh,
    [data-theme="light"] .faq-hdr .sh,
    [data-theme="light"] .globe-text .sh,
    [data-theme="light"] .contact-left .sh,
    [data-theme="light"] .trust-hdr .sh,
    [data-theme="light"] .sol-hdr .sh,
    [data-theme="light"] .cog-hdr .sh,
    [data-theme="light"] .live-ops-hdr .sh {
      color: var(--text-strong);
    }
    [data-theme="light"] .ops-hdr p,
    [data-theme="light"] .prod-hdr p,
    [data-theme="light"] .ind-hdr p,
    [data-theme="light"] .why-hdr p,
    [data-theme="light"] .out-hdr p,
    [data-theme="light"] .cmp-hdr p,
    [data-theme="light"] .proc-hdr p,
    [data-theme="light"] .certs-hdr p,
    [data-theme="light"] .offices-hdr p,
    [data-theme="light"] .faq-hdr p,
    [data-theme="light"] .globe-text p,
    [data-theme="light"] .contact-left p,
    [data-theme="light"] .trust-hdr p,
    [data-theme="light"] .sol-hdr p,
    [data-theme="light"] .cog-hdr p {
      color: rgba(5,15,27,.65);
    }

    /* All major card titles / numbers / strong-emphasis text */
    [data-theme="light"] .why-title,
    [data-theme="light"] .out-card-title,
    [data-theme="light"] .ind-card-title,
    [data-theme="light"] .proc-step-title,
    [data-theme="light"] .stat-num,
    [data-theme="light"] .stat-call-body strong,
    [data-theme="light"] .num-big,
    [data-theme="light"] .footer-col-title,
    [data-theme="light"] .footer-contact-line strong,
    [data-theme="light"] .sol-title,
    [data-theme="light"] .out-card-title,
    [data-theme="light"] .ind-card-title,
    [data-theme="light"] .cog-title,
    [data-theme="light"] .live-tag,
    [data-theme="light"] .feat9-title,
    [data-theme="light"] .step-title,
    [data-theme="light"] .cap-title,
    [data-theme="light"] .stream-title,
    [data-theme="light"] .ind-name,
    [data-theme="light"] .out-num {
      color: var(--text-strong);
    }

    /* All "x text" / body / desc patterns */
    [data-theme="light"] .why-text,
    [data-theme="light"] .out-card-text,
    [data-theme="light"] .ind-card-text,
    [data-theme="light"] .proc-step-text,
    [data-theme="light"] .feat9-text,
    [data-theme="light"] .step-text,
    [data-theme="light"] .stream-desc,
    [data-theme="light"] .live-text,
    [data-theme="light"] .cap-text,
    [data-theme="light"] .compare-cell,
    [data-theme="light"] .cog-text {
      color: rgba(5,15,27,.7);
    }

    /* Inline style="color:#fff" — catches the BREFORE / BI / FP strong-tags
       inline in product descriptions and any future stragglers. */
    [data-theme="light"] [style*="color:#fff"],
    [data-theme="light"] [style*="color: #fff"],
    [data-theme="light"] [style*="color:white"],
    [data-theme="light"] [style*="color: white"] {
      color: var(--text-strong) !important;
    }

    /* Hero ticker bold + live-feed bold (terminal stays dark, but the
       hero-ticker is on hero bg which is light in light mode) */
    [data-theme="light"] .hero-ticker-line { color: rgba(5,15,27,.78); }
    [data-theme="light"] .hero-ticker-line strong { color: var(--text-strong); }

    /* Buttons — ghost variant on light bg needs dark text */
    [data-theme="light"] .btn-ghost {
      color: var(--text-strong);
      border-color: rgba(5,15,27,.28);
    }
    [data-theme="light"] .btn-ghost:hover {
      border-color: var(--text-strong);
      background: rgba(5,15,27,.06);
    }
    /* btn-red and btn-ghost-dark hover keep their white-on-vermilion
       contrast in both themes — no override needed. */

    /* Misc bold-emphasis spots */
    [data-theme="light"] .ops-today-sub strong { color: var(--vermilion); }
    [data-theme="light"] .ops-stat-num em { color: var(--vermilion); }

    /* Tables / compare grid cells */
    [data-theme="light"] .cmp-cell-title { color: var(--text-strong); }
    [data-theme="light"] .cmp-cell-generic { color: rgba(5,15,27,.55); }
    [data-theme="light"] .cmp-cell-soteryan { color: rgba(5,15,27,.85); }

    /* Final catch-all: if a parent gets a light bg, force its body text dark
       unless the element is explicitly a button label, terminal entry, or
       on a HQ-card / vermilion bg. */
    [data-theme="light"] .stat-lbl,
    [data-theme="light"] .why-meta,
    [data-theme="light"] .ind-meta,
    [data-theme="light"] .out-meta,
    [data-theme="light"] .cog-meta,
    [data-theme="light"] .step-meta,
    [data-theme="light"] .sol-meta,
    [data-theme="light"] .live-meta {
      color: rgba(5,15,27,.55);
    }

    /* ── White-on-white sweep — rgba(255,...) text I missed ─────── */

    /* Hero generic + scroll hint */
    [data-theme="light"] .scroll-hint     { color: rgba(5,15,27,.4); }

    /* Stream cards (BreachShield data-stream lineup) */
    [data-theme="light"] .stream-card                          { color: rgba(5,15,27,.78); }
    [data-theme="light"] .stream-card:not(.primary) .stream-tagline { color: rgba(5,15,27,.55); }
    [data-theme="light"] .stream-tag,
    [data-theme="light"] .stream-meta,
    [data-theme="light"] .stream-eyebrow                       { color: rgba(5,15,27,.55); }
    [data-theme="light"] .stream-title,
    [data-theme="light"] .stream-card .stream-name             { color: var(--text-strong); }

    /* Stat-call (the orange-glow boxed stat block in BS section) */
    [data-theme="light"] .stat-call-body                       { color: rgba(5,15,27,.85); }
    [data-theme="light"] .stat-call-body strong                { color: var(--text-strong); }
    [data-theme="light"] .stat-call-num                        { color: var(--vermilion); }
    [data-theme="light"] .stat-call-tag                        { color: rgba(5,15,27,.55); }

    /* Show-card metadata (catalogue cards) */
    [data-theme="light"] .show-tag                             { color: var(--vermilion); }
    [data-theme="light"] .show-status                          { color: rgba(5,15,27,.55); }
    [data-theme="light"] .show-status.live                     { background: rgba(34,197,94,.15); color: #22c55e; }
    [data-theme="light"] .show-status.soon                     { background: rgba(220,85,42,.15); color: var(--vermilion); }

    /* Placeholder fine-print */
    [data-theme="light"] .ph-note                              { color: rgba(5,15,27,.55); }
    [data-theme="light"] .ph-meta                              { color: rgba(5,15,27,.55); }

    /* Contact form (.f-* legacy classes — older form variant) */
    [data-theme="light"] .f-lbl                                { color: rgba(5,15,27,.55); }
    [data-theme="light"] .f-inp,
    [data-theme="light"] .f-ta                                 {
      background: #ffffff !important;
      color: var(--text-strong) !important;
      border-color: rgba(5,15,27,.14) !important;
    }
    [data-theme="light"] .f-inp::placeholder,
    [data-theme="light"] .f-ta::placeholder                    { color: rgba(5,15,27,.35); }

    /* Footer — dark in dark mode, near-white-elevated in light mode */
    [data-theme="light"] .footer                               { background: #f5f5f7; }
    [data-theme="light"] .footer-col-title                     { color: var(--text-strong); }
    [data-theme="light"] .footer-col a,
    [data-theme="light"] .footer a                             { color: rgba(5,15,27,.7); }
    [data-theme="light"] .footer-col a:hover,
    [data-theme="light"] .footer a:hover                       { color: var(--text-strong); }
    [data-theme="light"] .footer-contact-line,
    [data-theme="light"] .footer-contact-line a               { color: rgba(5,15,27,.65); }
    [data-theme="light"] .footer-contact-line strong          { color: var(--text-strong); }
    [data-theme="light"] .footer-bottom                       { color: rgba(5,15,27,.55); }
    [data-theme="light"] .footer-bottom .footer-links a       { color: rgba(5,15,27,.5); }
    [data-theme="light"] .footer-bottom .footer-links a:hover { color: var(--text-strong); }
    [data-theme="light"] .footer-copy                         { color: rgba(5,15,27,.45); }
    [data-theme="light"] .footer-section-title                { color: var(--text-strong); }

    /* Footer social-icons / utility buttons */
    [data-theme="light"] .footer-soc-icon                     {
      color: rgba(5,15,27,.55);
      border-color: rgba(5,15,27,.14);
    }
    [data-theme="light"] .footer-soc-icon:hover               {
      color: var(--text-strong);
      border-color: var(--text-strong);
    }

    /* Misc eyebrow-style labels still escaping above */
    [data-theme="light"] .eyebrow:not(.bracket)               { color: var(--vermilion); }
    [data-theme="light"] .eyebrow.bracket                     { color: var(--vermilion); }
    [data-theme="light"] .vert-label                          { color: rgba(5,15,27,.35); }
    [data-theme="light"] .section-num                         { color: rgba(5,15,27,.35); }

    /* Off-clock timestamps on non-HQ office cards */
    [data-theme="light"] .office-card:not(.hq) .off-clock-time { color: var(--text-strong); }
    [data-theme="light"] .office-card:not(.hq) .off-clock-tz   { color: rgba(5,15,27,.5); }
    [data-theme="light"] .office-card:not(.hq) .off-badge      { color: rgba(5,15,27,.55); }
    [data-theme="light"] .office-card:not(.hq) .off-co-tag     { color: rgba(5,15,27,.55); }

    /* HQ Amsterdam stays vermilion → all white text inside still readable.
       Also ::placeholder, dark-only utility classes preserved. */

    /* ── Final brute-force sweep — every remaining white-text class ── */
    /* Strong text — uses !important to beat per-section specificity like
       `.prod-card.dk .prod-name` (3 classes deep) which would otherwise
       win against `[data-theme="light"] .prod-name` (1 attr + 1 class). */
    [data-theme="light"] .prod-card.dk .prod-name,
    [data-theme="light"] .prod-card .prod-name,
    [data-theme="light"] .prod-card .prod-tag,
    [data-theme="light"] .prod-card .prod-sub,
    [data-theme="light"] .prod-card .prod-desc,
    [data-theme="light"] .prod-card .prod-feat,
    [data-theme="light"] .prod-card .prod-link,
    [data-theme="light"] .cog-h2,
    [data-theme="light"] .stream-name,
    [data-theme="light"] .num-lbl,
    [data-theme="light"] .cap-title,
    [data-theme="light"] .sub-status,
    [data-theme="light"] .sub-name,
    [data-theme="light"] .feat9-name,
    [data-theme="light"] .feat9-text,
    [data-theme="light"] .arch-name,
    [data-theme="light"] .ind-name,
    [data-theme="light"] .out-title,
    [data-theme="light"] .out-num,
    [data-theme="light"] .cog-flow-label,
    [data-theme="light"] .viewers-badge-text,
    [data-theme="light"] .viewers-badge-num,
    [data-theme="light"] .prod-bridge-label,
    [data-theme="light"] .fact-toast-text,
    [data-theme="light"] .nav-utc,
    [data-theme="light"] .nav-current,
    [data-theme="light"] .globe-stat-lbl,
    [data-theme="light"] .live-mini-label,
    [data-theme="light"] .live-mini-num,
    [data-theme="light"] .toast-time,
    [data-theme="light"] .toast-msg,
    [data-theme="light"] .ee-overlay-msg,
    [data-theme="light"] .ee-overlay-sub,
    [data-theme="light"] .step-title,
    [data-theme="light"] .stat-call-num,
    [data-theme="light"] .stat-call-body,
    [data-theme="light"] .stat-call-body strong,
    [data-theme="light"] .achv-item,
    [data-theme="light"] .prod-banner-left h3,
    [data-theme="light"] .prod-block-title h3,
    [data-theme="light"] .cmp-cell-axis,
    [data-theme="light"] .cmp-head-generic,
    [data-theme="light"] .cmp-x,
    [data-theme="light"] .faq-q,
    [data-theme="light"] .manifesto-attr,
    [data-theme="light"] .back-top,
    [data-theme="light"] .footer-brand .footer-logo-fallback,
    [data-theme="light"] .footer-brand p,
    [data-theme="light"] .footer-newsletter-label,
    [data-theme="light"] .footer-newsletter-note,
    [data-theme="light"] .f-consent-text,
    [data-theme="light"] .ind-hdr .sh,
    [data-theme="light"] .why-hdr .sh,
    [data-theme="light"] .out-hdr .sh,
    [data-theme="light"] .cmp-hdr .sh,
    [data-theme="light"] .proc-hdr .sh,
    [data-theme="light"] .certs-hdr .sh,
    [data-theme="light"] .offices-hdr .sh,
    [data-theme="light"] .faq-hdr .sh,
    [data-theme="light"] .globe-text .sh,
    [data-theme="light"] .contact-left .sh,
    [data-theme="light"] .ops-hdr .sh,
    [data-theme="light"] .prod-hdr .sh,
    [data-theme="light"] .why-title,
    [data-theme="light"] .show-name,
    [data-theme="light"] .ph-name,
    [data-theme="light"] .off-city,
    [data-theme="light"] .gauge-level {
      color: var(--text-strong) !important;
    }

    /* Secondary / muted text — softer */
    [data-theme="light"] .show-meta,
    [data-theme="light"] .show-text,
    [data-theme="light"] .ph-meta,
    [data-theme="light"] .ph-note,
    [data-theme="light"] .ph-desc,
    [data-theme="light"] .ph-li,
    [data-theme="light"] .stream-card:not(.primary) .stream-tagline,
    [data-theme="light"] .footer-col a,
    [data-theme="light"] .footer-contact-line,
    [data-theme="light"] .footer-contact-line a,
    [data-theme="light"] .footer-bottom .footer-links a,
    [data-theme="light"] .footer-copy,
    [data-theme="light"] .footer-newsletter-form input::placeholder,
    [data-theme="light"] .f-inp::placeholder,
    [data-theme="light"] .f-ta::placeholder,
    [data-theme="light"] .footer-social a,
    [data-theme="light"] .out-card-title,
    [data-theme="light"] .out-card-text,
    [data-theme="light"] .ind-card-title,
    [data-theme="light"] .ind-card-text,
    [data-theme="light"] .why-text,
    [data-theme="light"] .proc-step-text,
    [data-theme="light"] .cmp-cell-soteryan,
    [data-theme="light"] .cmp-cell-generic,
    [data-theme="light"] .stream-card,
    [data-theme="light"] .achv-medal,
    [data-theme="light"] .sec-connector-label,
    [data-theme="light"] .showcase-status,
    [data-theme="light"] .showcase-meta,
    [data-theme="light"] .showcase-tagline {
      color: rgba(5,15,27,.7) !important;
    }

    /* Force bg swaps that were specificity-blocked */
    [data-theme="light"] .prod-card,
    [data-theme="light"] .prod-card.dk,
    [data-theme="light"] .prod-banner {
      background: var(--charcoal-alt) !important;
      border-color: var(--bd-dark) !important;
    }
    /* Red prod-card stays vermilion in BOTH themes — its inner text is
       white-on-vermilion. Override the override:               */
    [data-theme="light"] .prod-card.red {
      background: linear-gradient(135deg, var(--vermilion) 0%, var(--vermilion-dk) 100%) !important;
    }
    [data-theme="light"] .prod-card.red .prod-name,
    [data-theme="light"] .prod-card.red .prod-tag,
    [data-theme="light"] .prod-card.red .prod-sub,
    [data-theme="light"] .prod-card.red .prod-desc,
    [data-theme="light"] .prod-card.red .prod-feat,
    [data-theme="light"] .prod-card.red .prod-link {
      color: #fff !important;
    }

    /* Ops terminal — STAYS dark with white text (console UI) */
    [data-theme="light"] .ops-term-body,
    [data-theme="light"] .ops-term-body * {
      /* let original styles apply */
    }
    [data-theme="light"] .ops-term-title { color: rgba(255,255,255,.78); }

    /* News ticker label — stays vermilion bg with white text */
    [data-theme="light"] .news-ticker-label { color: #fff !important; }

    /* Office HQ Amsterdam stays vermilion bg — white text inside */
    [data-theme="light"] .office-card.hq,
    [data-theme="light"] .office-card.hq .off-city,
    [data-theme="light"] .office-card.hq .off-co,
    [data-theme="light"] .office-card.hq .off-co-tag,
    [data-theme="light"] .office-card.hq .off-addr,
    [data-theme="light"] .office-card.hq .off-contact,
    [data-theme="light"] .office-card.hq .off-clock-time,
    [data-theme="light"] .office-card.hq .off-clock-tz,
    [data-theme="light"] .office-card.hq .off-badge {
      color: #fff !important;
    }

    /* BreachShield + FraudShield consoles — they have hardcoded dark
       gradient bg, so internal white text stays readable. Just verify
       they don't inherit our light-mode body overrides. */
    [data-theme="light"] .bs-console,
    [data-theme="light"] .bs-console *,
    [data-theme="light"] .fs-console,
    [data-theme="light"] .fs-console * {
      /* allow original colours to apply */
    }
    /* Re-assert text colours inside consoles in case `*` selectors
       elsewhere bled in: */
    [data-theme="light"] .bs-console      { color: rgba(255,255,255,.78); }
    [data-theme="light"] .fs-console      { color: rgba(255,255,255,.78); }

    /* Cert flip-card back (vermilion gradient) — keep white text */
    [data-theme="light"] .cert-back,
    [data-theme="light"] .cert-back-title,
    [data-theme="light"] .cert-back-text {
      color: #fff !important;
    }

    /* Buttons — primary red stays white text in both themes */
    [data-theme="light"] .btn-red, [data-theme="light"] .btn-red * { color: #fff !important; }
    [data-theme="light"] .nav-cta { color: #fff !important; }

    /* ── Blanket nuclear sweep — fixes anything missed inside major
       content containers. Then re-asserts white inside the few zones
       that should stay dark (consoles, vermilion bg cards). ── */

    /* BLANKET: any text inside these wrappers inherits dark in light mode */
    [data-theme="light"] .prod-card,
    [data-theme="light"] .prod-card *,
    [data-theme="light"] .prod-block,
    [data-theme="light"] .prod-block *,
    [data-theme="light"] .step-card,
    [data-theme="light"] .step-card *,
    [data-theme="light"] .stream-card:not(.primary),
    [data-theme="light"] .stream-card:not(.primary) *,
    [data-theme="light"] .num-card,
    [data-theme="light"] .num-card *,
    [data-theme="light"] .cap-card,
    [data-theme="light"] .cap-card *,
    [data-theme="light"] .feat9-card,
    [data-theme="light"] .feat9-card *,
    [data-theme="light"] .arch-card,
    [data-theme="light"] .arch-card *,
    [data-theme="light"] .sub-card,
    [data-theme="light"] .sub-card *,
    [data-theme="light"] .out-card,
    [data-theme="light"] .out-card *,
    [data-theme="light"] .ind-card,
    [data-theme="light"] .ind-card *,
    [data-theme="light"] .why-card,
    [data-theme="light"] .why-card *,
    [data-theme="light"] .proc-step,
    [data-theme="light"] .proc-step *,
    [data-theme="light"] .cog-card,
    [data-theme="light"] .cog-card *,
    [data-theme="light"] .sol-card,
    [data-theme="light"] .sol-card *,
    [data-theme="light"] .trust-card,
    [data-theme="light"] .trust-card *,
    [data-theme="light"] .faq-item,
    [data-theme="light"] .faq-item *,
    [data-theme="light"] .footer,
    [data-theme="light"] .footer *,
    [data-theme="light"] .footer-bottom,
    [data-theme="light"] .footer-bottom *,
    [data-theme="light"] .ops-stat,
    [data-theme="light"] .ops-stat *,
    [data-theme="light"] .gauge-wrap,
    [data-theme="light"] .gauge-wrap *,
    [data-theme="light"] .placeholder,
    [data-theme="light"] .placeholder *,
    [data-theme="light"] .show-card,
    [data-theme="light"] .show-card *,
    [data-theme="light"] .achv-strip,
    [data-theme="light"] .achv-strip *,
    [data-theme="light"] .contact-form,
    [data-theme="light"] .contact-form *,
    [data-theme="light"] .stat-call,
    [data-theme="light"] .stat-call *,
    [data-theme="light"] .out-grid,
    [data-theme="light"] .out-grid *,
    [data-theme="light"] .cmp-grid,
    [data-theme="light"] .cmp-grid * {
      color: var(--text-strong);
    }

    /* MUTED variants — body text inside cards should be slightly softer */
    [data-theme="light"] .prod-desc,
    [data-theme="light"] .prod-feat,
    [data-theme="light"] .prod-feat li,
    [data-theme="light"] .step-text,
    [data-theme="light"] .num-text,
    [data-theme="light"] .cap-text,
    [data-theme="light"] .feat9-text,
    [data-theme="light"] .arch-text,
    [data-theme="light"] .sub-text,
    [data-theme="light"] .stream-text,
    [data-theme="light"] .out-card-text,
    [data-theme="light"] .ind-card-text,
    [data-theme="light"] .why-text,
    [data-theme="light"] .proc-step-text,
    [data-theme="light"] .cog-text,
    [data-theme="light"] .sol-text,
    [data-theme="light"] .trust-text,
    [data-theme="light"] .faq-a,
    [data-theme="light"] .ph-desc,
    [data-theme="light"] .ph-li,
    [data-theme="light"] .ph-note,
    [data-theme="light"] .show-text,
    [data-theme="light"] .show-meta,
    [data-theme="light"] .footer-col a,
    [data-theme="light"] .footer-contact-line,
    [data-theme="light"] .footer-bottom .footer-links a,
    [data-theme="light"] .footer-copy {
      color: rgba(5,15,27,.7) !important;
    }

    /* MUTED-MORE — small captions / labels */
    [data-theme="light"] .prod-tag,
    [data-theme="light"] .step-num,
    [data-theme="light"] .ops-stat-label,
    [data-theme="light"] .ops-stat-sub,
    [data-theme="light"] .show-tag,
    [data-theme="light"] .stream-tag,
    [data-theme="light"] .num-lbl,
    [data-theme="light"] .stream-eyebrow,
    [data-theme="light"] .ebr,
    [data-theme="light"] .feat9-tag,
    [data-theme="light"] .arch-tag,
    [data-theme="light"] .footer-newsletter-label,
    [data-theme="light"] .footer-bottom .footer-copy {
      color: var(--vermilion) !important;
    }

    /* RE-ASSERT WHITE inside dark-bg islands that the blanket above
       just trampled on. */

    /* BreachShield + FraudShield consoles — hardcoded dark gradient bg */
    [data-theme="light"] .bs-console,
    [data-theme="light"] .bs-console *,
    [data-theme="light"] .fs-console,
    [data-theme="light"] .fs-console * {
      color: rgba(255,255,255,.78) !important;
    }
    /* Console highlight elements (stronger white) */
    [data-theme="light"] .bs-bar-title,
    [data-theme="light"] .bs-side-brand-top,
    [data-theme="light"] .bs-side-nav li.active,
    [data-theme="light"] .fs-bar-title,
    [data-theme="light"] .fs-side-brand-top,
    [data-theme="light"] .fs-side-nav li.active,
    [data-theme="light"] .fs-kpi-num,
    [data-theme="light"] .fs-kpi-unit {
      color: #fff !important;
    }
    /* Console accent (vermilion) — keep vermilion */
    [data-theme="light"] .bs-bar-pill,
    [data-theme="light"] .bs-tab.active,
    [data-theme="light"] .bs-fam,
    [data-theme="light"] .fs-bar-pill,
    [data-theme="light"] .fs-tab.active,
    [data-theme="light"] .fs-score-cell b,
    [data-theme="light"] .fs-kpi-trend {
      color: var(--vermilion) !important;
    }

    /* prod-card.red — vermilion gradient bg */
    [data-theme="light"] .prod-card.red,
    [data-theme="light"] .prod-card.red * {
      color: #fff !important;
    }

    /* Live-feed terminal — already kept; reinforce */
    [data-theme="light"] .ops-term-body,
    [data-theme="light"] .ops-term-body * {
      color: rgba(255,255,255,.78) !important;
    }

    /* HQ Amsterdam office — vermilion bg */
    [data-theme="light"] .office-card.hq,
    [data-theme="light"] .office-card.hq * {
      color: #fff !important;
    }
    [data-theme="light"] .office-card.hq .off-co,
    [data-theme="light"] .office-card.hq .off-addr,
    [data-theme="light"] .office-card.hq .off-contact {
      color: rgba(255,255,255,.92) !important;
    }
    [data-theme="light"] .office-card.hq .off-co-tag,
    [data-theme="light"] .office-card.hq .off-clock-tz {
      color: rgba(255,255,255,.7) !important;
    }

    /* Cert flip-card vermilion back */
    [data-theme="light"] .cert-back,
    [data-theme="light"] .cert-back * {
      color: #fff !important;
    }

    /* Stat-call (vermilion gradient block) */
    [data-theme="light"] .stat-call,
    [data-theme="light"] .stat-call * {
      color: #fff !important;
    }
    [data-theme="light"] .stat-call-body { color: rgba(255,255,255,.95) !important; }

    /* Buttons */
    [data-theme="light"] .btn-red,
    [data-theme="light"] .btn-red * { color: #fff !important; }
    [data-theme="light"] .nav-cta,
    [data-theme="light"] .nav-cta * { color: #fff !important; }

    /* News ticker label (vermilion pill) */
    [data-theme="light"] .news-ticker-label { color: #fff !important; }
    /* News ticker items themselves (text on the ticker bg) */
    [data-theme="light"] .news-item { color: rgba(5,15,27,.78); }
    [data-theme="light"] .news-tag {
      background: rgba(220,85,42,.12);
      color: var(--vermilion);
    }

    /* News-tag inside hover state should darken */
    [data-theme="light"] .news-item:hover { color: var(--text-strong); }

    /* Section-headings inside .X-hdr — strong dark */
    [data-theme="light"] .ind-hdr .sh,
    [data-theme="light"] .why-hdr .sh,
    [data-theme="light"] .out-hdr .sh,
    [data-theme="light"] .cmp-hdr .sh,
    [data-theme="light"] .proc-hdr .sh,
    [data-theme="light"] .certs-hdr .sh,
    [data-theme="light"] .offices-hdr .sh,
    [data-theme="light"] .faq-hdr .sh,
    [data-theme="light"] .globe-text .sh,
    [data-theme="light"] .contact-left .sh,
    [data-theme="light"] .ops-hdr .sh,
    [data-theme="light"] .prod-hdr .sh,
    [data-theme="light"] .cog-hdr .sh,
    [data-theme="light"] .sol-hdr .sh {
      color: var(--text-strong) !important;
    }

    /* Vermilion strong-emphasis spots
       NOTE: .stat-call-num is NOT here on purpose — it lives on a
       vermilion-gradient background (.stat-call), so it must stay
       WHITE. Putting it as vermilion would make it disappear into the
       bg (the original "white on white" complaint). */
    [data-theme="light"] .gauge-level,
    [data-theme="light"] .ops-today-sub strong,
    [data-theme="light"] .ops-stat-num em,
    [data-theme="light"] .num-big em,
    [data-theme="light"] .stat-num em,
    [data-theme="light"] .achv-num em,
    [data-theme="light"] .hero-h1 em,
    [data-theme="light"] .hero-rotate-product {
      color: var(--vermilion) !important;
    }
    /* .stat-call-num explicitly white — sits on vermilion gradient */
    [data-theme="light"] .stat-call-num,
    [data-theme="light"] .stat-call-num small {
      color: #fff !important;
    }

    /* ── FLOATING OVERLAY WIDGETS ──────────────────────────────
       These position:fixed widgets (live-mini bottom-right, viewers-
       badge bottom-left, fact-toast right-middle, toast-stack left-
       middle, ee-overlay) all have HARDCODED rgba(11,26,43,.X) dark
       backgrounds — not via theme variables — so the bg stays dark in
       light mode. Earlier sweeps made their inner text dark too →
       dark-on-dark = invisible. Re-assert white text here.
    ── */
    [data-theme="light"] .viewers-badge,
    [data-theme="light"] .viewers-badge *,
    [data-theme="light"] .live-mini,
    [data-theme="light"] .live-mini *,
    [data-theme="light"] .fact-toast,
    [data-theme="light"] .fact-toast *,
    [data-theme="light"] .toast,
    [data-theme="light"] .toast *,
    [data-theme="light"] .ee-overlay,
    [data-theme="light"] .ee-overlay * {
      color: rgba(255,255,255,.85) !important;
    }
    /* Strong primary text inside overlays — full white */
    [data-theme="light"] .viewers-badge-num,
    [data-theme="light"] .live-mini-num,
    [data-theme="light"] .toast-msg,
    [data-theme="light"] .fact-toast-text,
    [data-theme="light"] .ee-overlay-msg,
    [data-theme="light"] .ee-overlay-sub {
      color: #fff !important;
    }
    /* Vermilion accents inside overlays */
    [data-theme="light"] .live-mini-label,
    [data-theme="light"] .toast-tag,
    [data-theme="light"] .fact-toast-tag,
    [data-theme="light"] .fact-toast-text strong,
    [data-theme="light"] .toast-msg .hl,
    [data-theme="light"] .ee-overlay-tag {
      color: var(--vermilion) !important;
    }
    /* Muted helper text */
    [data-theme="light"] .toast-time {
      color: rgba(255,255,255,.5) !important;
    }
    /* Side-CTA already vermilion gradient bg → white text already correct */

    /* ══════════════════════════════════════════════════
       THEME TOGGLE BUTTON
    ══════════════════════════════════════════════════ */
    .nav-utils {
      display: inline-flex;
      align-items: center;
      gap: 12px;
    }
    .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px; height: 38px;
      padding: 0;
      background: transparent;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 50%;
      color: rgba(255,255,255,.78);
      cursor: pointer;
      transition: all .25s ease;
      position: relative;
      overflow: hidden;
    }
    .theme-toggle:hover {
      border-color: var(--vermilion);
      color: var(--vermilion);
      transform: rotate(15deg);
    }
    .theme-toggle svg {
      width: 18px; height: 18px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      position: absolute;
      transition: opacity .35s ease, transform .35s ease;
    }
    .theme-toggle .icon-sun  { opacity: 1;  transform: rotate(0)     scale(1); }
    .theme-toggle .icon-moon { opacity: 0;  transform: rotate(-90deg) scale(.6); }
    [data-theme="light"] .theme-toggle {
      border-color: rgba(5,15,27,.18);
      color: rgba(5,15,27,.78);
    }
    [data-theme="light"] .theme-toggle .icon-sun  { opacity: 0; transform: rotate(90deg) scale(.6); }
    [data-theme="light"] .theme-toggle .icon-moon { opacity: 1; transform: rotate(0)     scale(1);  }

    /* ══════════════════════════════════════════════════
       MOBILE PASS — keeps recent additions readable on phones.
       Addresses: 17B big-number counter, hero padding/spacing,
       office regional-office tags, 12+ Years achv-strip,
       sub-card corner logos, live-ops dashboard density,
       sub-product placeholders with right-side big logos.
    ══════════════════════════════════════════════════ */
    @media (max-width: 760px) {
      /* Sections breathe less aggressively on phone */
      section { padding: 18px 0 !important; }
      #hero {
        padding-top: 110px !important;
        padding-bottom: 18px !important;
      }
      #hero > .wrap { width: 100%; padding-left: 18px; padding-right: 18px; }

      /* Hero typography — keep H1 chunky but never overflow viewport */
      .hero-eyebrow { font-size: 10px; letter-spacing: .18em; margin-bottom: 22px; }
      .hero-h1 {
        font-size: clamp(34px, 9vw, 46px);
        margin-bottom: 22px;
        min-height: 0;            /* drop the rotation reservation on phone */
      }
      .hero-rotate-vp {
        font-size: 0.6em;
        line-height: 1.3;
        margin-top: 10px;
        max-width: 100%;
      }
      .hero-sub {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 26px;
      }
      .hero-ctas { gap: 12px; flex-wrap: wrap; }
      .hero-ctas .btn { width: 100%; justify-content: center; }
      .hero-bottom { margin-top: 32px; padding-top: 24px; gap: 14px; }
      .hero-proof {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
      }
      .hero-proof-divider { display: none; }

      /* Showcase carousel — give it enough vertical room when stacked */
      .hero-showcase { margin-top: 24px; }

      /* Live Ops dashboard — the 17B big-number must fit */
      .ops-today-num {
        font-size: clamp(30px, 9.5vw, 56px);
        letter-spacing: -0.025em;
      }
      .ops-today-label { font-size: 9px; }
      .ops-today-sub { font-size: 12px; line-height: 1.5; padding: 0 8px; }
      .ops-today { margin-bottom: 24px; }
      .ops-stat-num { font-size: 26px; }
      .ops-stat-sub { font-size: 11px; }
      .ops-hdr p { font-size: 14px; line-height: 1.55; }

      /* Live-feed terminal — already stacks; tighten font */
      .ops-terminal { margin-top: 18px; }
      .ops-term-body { font-size: 11px !important; min-height: 280px !important; max-height: 280px !important; padding: 14px 14px !important; }
      .ops-line { gap: 6px !important; }
      .ops-time { font-size: 10px !important; }
      .ops-tag { font-size: 9px !important; padding: 1px 5px !important; }
      .ops-msg { font-size: 11px !important; flex-basis: 100% !important; margin-top: 2px; }

      /* Data-sources footer — compact + stacked */
      .ops-sources {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        font-size: 11px;
        padding: 12px 14px;
      }
      .ops-sources-sep { display: none; }
      .ops-sources-refresh { font-size: 10px; }

      /* Threat gauge on phone — stack the SVG above the text */
      .gauge-wrap {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 22px 22px;
        gap: 14px;
      }
      .gauge-svg { width: 110px; height: 68px; }

      /* Office regional-office tags — wrap onto own line below company */
      .off-co {
        font-size: 12px;
        line-height: 1.45;
      }
      .off-co-tag {
        display: block;
        margin-top: 2px;
        opacity: .85;
      }

      /* 12+ Years achv-strip — text + medals stack cleanly */
      .achv-strip {
        flex-direction: column;
        align-items: flex-start;
        padding: 28px 22px;
        gap: 18px;
      }
      .achv-strip-left {
        flex-direction: row;
        align-items: center;
        gap: 14px;
      }
      .achv-num { font-size: clamp(40px, 13vw, 56px); }
      .achv-num-unit { font-size: 0.55em; margin-left: 6px; }
      .achv-text-title { font-size: 16px; }
      .achv-text-sub { font-size: 13px; }

      /* Sub-product corner logo (DNSShield / Fraud SDK
         catalog cards) — shrink so it doesn't crowd the text on narrow
         screens */
      .show-card.has-logo { padding-right: 70px; }
      .show-logo-corner {
        width: 44px; height: 44px;
        top: 18px; right: 18px;
      }

      /* Big-logo placeholder (full-detail DNSShield/Fraud
         SDK section) — already stacks at <900px via .has-big-logo grid;
         here we just trim the surrounding spacing for phone */
      .placeholder { padding: 36px 22px !important; margin-top: 36px !important; }
      .ph-name { font-size: clamp(26px, 8vw, 36px); }
      .ph-desc { font-size: 14px; }
      .ph-li { font-size: 13px; }
      .ph-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
      .ph-actions .btn { width: 100%; justify-content: center; }

      /* === Section headings — scale down across the whole page === */
      .sh { font-size: clamp(26px, 7vw, 36px); line-height: 1.18; }
      .eyebrow { font-size: 10px; letter-spacing: .18em; }

      /* === Outcomes section — 2-col → 1-col === */
      .out-grid { grid-template-columns: 1fr; }
      .out-card { padding: 24px 22px; }

      /* === FraudShield KPI row — already 2-col below 700, ensure here === */
      .fs-kpi-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }

      /* === Compare table — already collapses; tighten cell spacing === */
      .cmp-grid { gap: 2px; }

      /* === Process steps — already stacks at <900; tighten internal pad === */
      .proc-step { padding: 22px 20px; }
      .proc-step-text { font-size: 13.5px; }

      /* === Manifesto quote — large text scales down === */
      .manifesto-quote { font-size: clamp(20px, 6vw, 28px) !important; line-height: 1.38; }

      /* === News ticker — tighten label + spacing on phone === */
      .news-track { gap: 24px; }
      .news-item { font-size: 11px; }

      /* === BreachShield hero — stack hero text + console mock === */
      .bs-hero-grid { gap: 28px; }
      .bs-heatmap-legend { flex-wrap: wrap; gap: 10px; font-size: 11px; }

      /* === Contact section + form — phone-friendly fields === */
      .contact-form { padding: 28px 22px; }
      .contact-form .field-row { grid-template-columns: 1fr; gap: 14px; }
      .contact-form input,
      .contact-form textarea,
      .contact-form select { font-size: 16px; /* avoid iOS zoom-on-focus */ }

      /* === Footer — already stacks; verify gutters === */
      .footer-grid { gap: 32px; }
      .footer-bottom { gap: 14px; font-size: 11px; }

      /* === Page-corner brackets — ornamental, suppress on phone === */
      .corner-bracket { display: none; }

      /* === BreachShield / FraudShield "side sections" generic tightening */
      .bs-side-section, .fs-side-section { padding: 28px 20px !important; }
    }

    /* ════════════════════════════════════════════════════════
       DARK-THEME OVERRIDES for #services and #about

       These two sections were originally designed light-only
       (#services bg = pearl, #about bg = #fff with dark text on
       both). Every other section on the page already had a dark
       default + light-theme override. This block brings the two
       holdouts in line: in dark mode (the default theme) they get
       dark backgrounds and light text; in light mode the existing
       base styles + the [data-theme="light"] overrides further down
       still apply unchanged.

       The selector `html:not([data-theme="light"])` matches whenever
       the document is NOT in light mode — i.e. dark mode (no
       attribute set; the JS only adds the attribute for light).
    ════════════════════════════════════════════════════════ */

    /* — backgrounds — */
    html:not([data-theme="light"]) #services { background: var(--charcoal-mid); }
    html:not([data-theme="light"]) #about    { background: var(--charcoal); }

    /* — Solutions (#services) header text — */
    html:not([data-theme="light"]) #services .sol-hdr .sh { color: #fff; }
    html:not([data-theme="light"]) #services .sol-hdr p   { color: var(--silver); }

    /* — Solutions cards: white → dark surface; thin hairline border —*/
    html:not([data-theme="light"]) .sol-grid {
      background: rgba(255,255,255,.06); /* the gap-grid lines */
    }
    html:not([data-theme="light"]) .sol-card {
      background: var(--charcoal-alt, #091525);
      border: 1px solid rgba(255,255,255,.05);
    }
    html:not([data-theme="light"]) .sol-card:hover {
      background: var(--charcoal);
      border-color: rgba(220,85,42,.45);
    }
    html:not([data-theme="light"]) .sol-icon  { color: var(--silver); }
    html:not([data-theme="light"]) .sol-title { color: #fff; }
    html:not([data-theme="light"]) .sol-item  { color: var(--silver); }

    /* — About content — */
    html:not([data-theme="light"]) #about .about-content .sh { color: #fff; }
    html:not([data-theme="light"]) #about .about-content p   { color: var(--silver); }
    html:not([data-theme="light"]) #about .stat-num          { color: #fff; }
    html:not([data-theme="light"]) #about .stat-lbl          { color: var(--silver); }

    /* — Section numbers (the giant "05" / "06" backdrop labels) — */
    html:not([data-theme="light"]) section[id="services"] .section-num,
    html:not([data-theme="light"]) section[id="about"]    .section-num {
      color: rgba(255,255,255,.10);
    }

    /* — Trust marquee (#trust, "TRUSTED BY LEADING INSTITUTIONS") —
       Same shape as #services/#about: a light-by-default section with
       dark text. Flip background to charcoal, lift the label and logo
       text to white opacities so they stay subtle but legible. */
    html:not([data-theme="light"]) #trust { background: var(--charcoal); }
    html:not([data-theme="light"]) .trust-lbl {
      color: rgba(255,255,255,.55);
      opacity: 1;
    }
    html:not([data-theme="light"]) .trust-logo {
      color: rgba(255,255,255,.36);
      opacity: 1;
    }
    html:not([data-theme="light"]) .trust-logo:hover {
      color: rgba(255,255,255,.85);
    }

    /* — Achievement strip text (.achv-strip inside #about) —
       The "Built on 10+ years of breach-intelligence heritage / Founded
       January 2015 in Amsterdam …" copy. Title + sub were dark by
       default; flip to white / silver for the dark canvas. The
       vermilion "10+ years" accent is kept untouched (already legible
       on either background). */
    html:not([data-theme="light"]) .achv-text-title { color: #fff; }
    html:not([data-theme="light"]) .achv-text-sub   { color: var(--silver); }