/* =============================================================================
   Cyberlux Consulting — v3 skin · "Enterprise" (ProcessUnity-style)
   Clean white base, navy hero, brand-blue accent, bold geometric sans
   (Plus Jakarta), soft rounded cards, flat corporate mood. Loaded LAST.
============================================================================ */

:root,
[data-theme="light"]{
  --bg:            #ffffff;
  --bg-soft:       #f4f7fc;
  --bg-elev:       #ffffff;
  --bg-glass:      rgba(255,255,255,0.8);
  --bg-glass-strong: rgba(255,255,255,0.92);

  --ink:           #141d36;          /* deep slate-navy text */
  --ink-mute:      #46506b;
  --ink-dim:       #5a647d;
  --ink-faint:     #6f788d;
  --ink-ghost:     rgba(20,29,54,0.12);

  --hairline:      rgba(20,29,54,0.10);
  --hairline-mid:  rgba(20,29,54,0.16);
  --hairline-strong: rgba(20,29,54,0.26);

  --accent:        #1f53e0;          /* brand blue */
  --accent-ink:    #ffffff;
  --accent-2:      #11b3ad;          /* teal data accent */

  --navy:          #0a1633;
  --navy-2:        #14245a;

  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;

  --shadow-1: 0 1px 2px rgba(20,29,54,0.06), 0 8px 24px rgba(20,29,54,0.06);
  --shadow-2: 0 24px 60px rgba(20,29,54,0.12);

  --ff-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
}

body{ background: var(--bg); color: var(--ink); font-family: var(--ff-display); }

::selection{ background: var(--accent); color: #fff; }

/* public-sector framework cards */
.gov-card{ position: relative; }
.gov-card{ border-top: 3px solid var(--accent); }
.gov-card .gov-k{
  font: 700 9.5px/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}
.gov-note{ margin-top: 26px; font-size: 14px; color: var(--ink-dim); }
.gov-note a{ color: var(--accent); font-weight: 600; }

/* lab-CTA preview values animate via count-up (JS in index.html) */
.lab-cta-grade .gval, .lab-cta-roi .rval{ display: inline-block; }

/* skip-to-content link (keyboard / screen-reader users) */
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 300;
  transform: translateY(-150%);
  background: var(--accent); color: #fff;
  padding: 12px 18px; border-radius: 10px;
  font: 700 14px/1 var(--ff-display);
  box-shadow: 0 8px 24px rgba(31,83,224,0.35);
  transition: transform .18s var(--ease);
}
.skip-link:focus{ transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }

/* ── typography ──────────────────────────────────────────────────────── */
[data-display-weight] .h-display,
.h-display{ font-family: var(--ff-display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.04; }
[data-display-weight] .h-display .em,
.h-display .em{ font-weight: 800; color: var(--accent-2); }
.h-section{ font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.h-section .em{ font-weight: 800; color: var(--accent); }
.h-card{ font-family: var(--ff-display); font-weight: 700; letter-spacing: -0.01em; }
.lead{ font-weight: 400; color: var(--ink-mute); }
.eyebrow{ color: var(--accent); font-family: var(--ff-mono); }
.eyebrow .num{ color: var(--accent); }
.eyebrow .rule{ background: linear-gradient(to right, var(--accent), transparent); }

/* ── buttons (rounded, flat, brand blue) ─────────────────────────────── */
.btn{ border-radius: 10px; letter-spacing: .01em; text-transform: none; font-family: var(--ff-display); font-weight: 700; font-size: 14px; padding: 14px 22px; }
.btn-primary{ background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 8px 20px rgba(31,83,224,0.25); }
.btn-primary:hover{ background: #1844c4; border-color: #1844c4; transform: translateY(-1px); box-shadow: 0 12px 28px rgba(31,83,224,0.32); }
.btn-ghost{ background: #fff; color: var(--ink); border-color: var(--hairline-strong); }
.btn-ghost:hover{ background: #fff; border-color: var(--accent); color: var(--accent); }

/* ── topbar / nav ────────────────────────────────────────────────────── */
.topbar.scrolled{ background: rgba(255,255,255,0.92); border-bottom-color: var(--hairline); box-shadow: 0 1px 0 rgba(20,29,54,0.04); }
.brand .word{ font-family: var(--ff-display); font-weight: 700; }
.brand .word .sub-brand{ color: var(--ink-dim); }
.nav a{ color: var(--ink-mute); font-family: var(--ff-display); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px; border-radius: 8px; }
.nav a:hover{ color: var(--accent); background: rgba(31,83,224,0.06); }
.nav a.cta{ background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.nav a.cta:hover{ background: #1844c4 !important; border-color: #1844c4 !important; color: #fff !important; }

/* topbar sits over the navy hero until scrolled — keep it legible there */
.topbar:not(.scrolled){ --ink: #fff; --ink-mute: rgba(255,255,255,0.82); --ink-dim: rgba(255,255,255,0.72); --hairline-strong: rgba(255,255,255,0.3); }
.topbar:not(.scrolled) .brand .word i{ color: rgba(255,255,255,0.65); }
.topbar:not(.scrolled) .nav a{ color: rgba(255,255,255,0.82); }
.topbar:not(.scrolled) .nav a:hover{ color: #fff; background: rgba(255,255,255,0.12); }
.topbar:not(.scrolled) .nav a.cta{ background: #fff !important; color: var(--navy) !important; border-color: #fff !important; }
.topbar:not(.scrolled) .nav a.cta:hover{ background: rgba(255,255,255,0.88) !important; color: var(--navy) !important; border-color: rgba(255,255,255,0.88) !important; }
.topbar:not(.scrolled) .menu-btn{ background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }

/* =============================================================================
   HERO — navy enterprise
============================================================================ */
.hero{
  --ink: #ffffff; --ink-mute: rgba(255,255,255,0.78); --ink-dim: rgba(255,255,255,0.6);
  --hairline: rgba(255,255,255,0.14); --hairline-mid: rgba(255,255,255,0.2); --hairline-strong: rgba(255,255,255,0.3);
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(31,83,224,0.42), transparent 55%),
    radial-gradient(80% 80% at 0% 100%, rgba(17,179,173,0.18), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, #0c1c44 60%, #0a1838 100%);
  color: #fff;
  border-bottom: none;
}
.hero-inner{
  display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(130px, 17vh, 190px) var(--pad-x) clamp(48px, 6vw, 72px);
}
@media (max-width: 960px){ .hero-inner{ grid-template-columns: 1fr; gap: 40px; } }

/* prevent grid/flex children with wide content from forcing horizontal overflow on mobile */
.hero-inner > *, .ent-panel, .ent-bar > *, .ent-row > *, .ent-kpi,
.ai-grid > *, .ai-card.lead > *, .grid-3 > *, .grid-2 > *,
.attack-map > *, .ai-demo-grid > *, .ad-cols > * { min-width: 0; }
.ent-bar .track{ min-width: 0; }
.ent-row .rn, .ad-list .ad-l{ overflow-wrap: anywhere; }
.hero-copy{ display: flex; flex-direction: column; gap: 24px; }
.hero .h-display{ font-size: clamp(36px, 5vw, 64px); max-width: 18ch; color: #fff; }
.hero .h-display .em{ color: #5fe0d8; }
.hero .lead{ max-width: 54ch; font-size: clamp(16px, 1.3vw, 19px); color: rgba(255,255,255,0.82); }
.hero-ctas{ display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.hero .btn-ghost{ background: rgba(255,255,255,0.06); color: #fff; border-color: rgba(255,255,255,0.3); }
.hero .btn-ghost:hover{ background: rgba(255,255,255,0.12); border-color: #fff; color: #fff; }

.pill{
  display: inline-flex; align-items: center; gap: 9px; width: max-content; max-width: 100%;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  font: 600 12px/1.2 var(--ff-display); color: rgba(255,255,255,0.9);
}
.pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: #5fe0d8; box-shadow: 0 0 10px #5fe0d8; }
.pill .pill-ai{
  display: inline-flex; align-items: center;
  font: 800 11px/1 var(--ff-display); letter-spacing: .04em;
  color: #0a1633;
  background: linear-gradient(135deg, #7af0e8, #5fe0d8);
  padding: 5px 9px; border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(95,224,216,0.5), 0 0 14px rgba(95,224,216,0.35);
}

.hero-trust{ display: flex; align-items: center; gap: 14px; padding-top: 22px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,0.14); max-width: 52ch; }
.hero-trust .trust-num{ font: 800 30px/1 var(--ff-display); color: #fff; letter-spacing: -0.02em; }
.hero-trust .trust-txt{ font-size: 13px; line-height: 1.45; color: rgba(255,255,255,0.66); }

/* enterprise product panel */
.ent-panel{
  background: #ffffff; border-radius: 16px;
  box-shadow: 0 40px 90px rgba(5,12,35,0.5);
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
  color: var(--ink);
}
.ent-head{ display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(20,29,54,0.1); }
.ent-title{ font: 700 14px/1 var(--ff-display); color: #141d36; }
.ent-tag{ font: 700 10px/1 var(--ff-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-2); background: rgba(17,179,173,0.12); padding: 5px 9px; border-radius: 999px; }
.ent-kpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ent-kpi{ padding: 14px; border-radius: 12px; background: #f4f7fc; display: flex; flex-direction: column; gap: 5px; }
.ent-kpi .l{ font: 600 10px/1 var(--ff-display); letter-spacing: .04em; text-transform: uppercase; color: #6b7590; }
.ent-kpi .v{ font: 800 28px/1 var(--ff-display); color: #141d36; letter-spacing: -0.02em; }
.ent-kpi .v i{ font-style: normal; font-size: 14px; font-weight: 600; color: #9aa2b8; }
.ent-kpi .trend{ font: 600 11px/1 var(--ff-display); color: #6b7590; }
.ent-kpi .trend.up{ color: #16a34a; }
.ent-bars{ display: flex; flex-direction: column; gap: 9px; }
.ent-bar{ display: grid; grid-template-columns: 84px 1fr 38px; align-items: center; gap: 10px; }
.ent-bar .bl{ font: 600 11px/1 var(--ff-display); color: #6b7590; }
.ent-bar .track{ height: 7px; border-radius: 99px; background: #e7ecf5; overflow: hidden; }
.ent-bar .track i{ display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ent-bar .bv{ font: 700 11px/1 var(--ff-mono); color: #141d36; text-align: right; }
.ent-row{ display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(20,29,54,0.07); }
.ent-row .rk{ font: 700 9.5px/1 var(--ff-display); letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; text-align: center; }
.ent-row .rk.lo{ color: #16a34a; background: rgba(22,163,74,0.12); }
.ent-row .rk.md{ color: #d97706; background: rgba(217,119,6,0.14); }
.ent-row .rk.hi{ color: #dc2626; background: rgba(220,38,38,0.12); }
.ent-row .rn{ font: 600 13px/1.2 var(--ff-display); color: #141d36; }
.ent-row .rs{ font-size: 11.5px; color: #9aa2b8; }

/* frameworks strip across the bottom of the hero */
.hero-frameworks-strip{
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 26px;
  max-width: var(--container); margin: 0 auto;
  padding: 22px var(--pad-x); border-top: 1px solid rgba(255,255,255,0.12);
}
.hero-frameworks-strip .lbl{ font: 600 11px/1 var(--ff-display); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.hero-frameworks-strip span:not(.lbl){ font: 700 14px/1 var(--ff-display); color: rgba(255,255,255,0.82); letter-spacing: .01em; }

/* =============================================================================
   SECTIONS — white / light-gray cards
============================================================================ */
.proof-strip{ background: var(--bg-soft); }
.proof-quote{ border-left-color: var(--accent); }
.proof-quote p{ font-family: var(--ff-display); font-weight: 500; }

/* credential + framework trust row (replaces fake logo wall) */
.proof-creds{ display: flex; flex-wrap: wrap; gap: 12px; padding: 14px 0 18px; }
.proof-creds .cred{
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 11px 16px; border-radius: 12px;
  background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-1);
  font-size: 13px; color: var(--ink-mute);
}
.proof-creds .cred strong{ font: 800 14px/1 var(--ff-display); color: var(--accent); letter-spacing: -0.01em; }
.proof-frameworks{ display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 30px; }
.proof-frameworks span{
  font: 600 11.5px/1 var(--ff-mono); letter-spacing: .04em; color: var(--ink-dim);
  padding: 7px 11px; border-radius: 999px; background: rgba(31,83,224,0.05); border: 1px solid rgba(31,83,224,0.16);
}

/* leadership principle card icon */
.leader-principle .leader-photo{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.leader-principle .leader-photo svg{ width: 26px; height: 26px; }

.section-head .eyebrow{ margin-bottom: 4px; }

.panel{ background: #fff; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); backdrop-filter: none; -webkit-backdrop-filter: none; }
.panel.corners::before, .panel.corners::after{ display: none; }
.stat-row{ background: var(--bg-soft) !important; border-color: var(--hairline); border-radius: var(--r); }
.stat .v{ font-family: var(--ff-display); font-weight: 800; color: var(--ink); }
.stat .v em{ color: var(--accent); }
.intro-panel .tag-mono{ color: var(--accent); }
.compliance .badge{ border-radius: 999px; background: rgba(31,83,224,0.06); border-color: rgba(31,83,224,0.2); color: var(--accent); }

.card{ background: #fff; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.card:hover{ background: #fff; border-color: rgba(31,83,224,0.4); box-shadow: var(--shadow-2); }
.card .icon{ border-radius: 10px; border: none; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }

.service{ background: #fff; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.service-num{ font-family: var(--ff-display); font-weight: 800; color: rgba(31,83,224,0.5); border-right-color: var(--hairline); }
.service h3{ font-family: var(--ff-display); font-weight: 700; }
.service ul li::before{ background: var(--accent); box-shadow: none; }

.method-list .phase{ background: #fff !important; box-shadow: var(--shadow-1); border-radius: var(--r-lg) !important; }
.phase h3{ font-family: var(--ff-display); font-weight: 700; }
.phase-num{ font-family: var(--ff-display); font-weight: 800; color: var(--accent); }
.phase-time{ color: var(--accent-2); }

.case{ background: #fff; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.case h3{ font-family: var(--ff-display); font-weight: 700; }
.case-meta .chip{ border-radius: 8px; background: var(--bg-soft); }
.case-body h4{ color: var(--accent); }
.metrics{ background: var(--bg-soft); border-color: var(--hairline); border-radius: var(--r); }
.metric-row .val{ color: var(--accent); font-family: var(--ff-mono); }
.metric-row .val.warn{ color: #d97706; }

.lab-cta{ background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important; border: none !important; border-radius: 18px !important; }
.lab-cta-content h2{ color: #fff !important; }
.lab-cta-content .body{ color: rgba(255,255,255,0.78) !important; }
.lab-cta-card{ border-radius: 12px !important; }

.leader{ background: #fff !important; border-color: var(--hairline) !important; border-radius: var(--r-lg) !important; box-shadow: var(--shadow-1); }
.leader h3{ font-family: var(--ff-display); font-weight: 700; }

.tier{ background: #fff !important; border-color: var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.tier.featured{ border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent), var(--shadow-2); }
.tier h3{ font-family: var(--ff-display); font-weight: 700; }

.form input, .form textarea, .form select{ background: #fff; border-color: var(--hairline-mid); border-radius: var(--r-sm); }
.form input:focus, .form textarea:focus, .form select:focus{ border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(31,83,224,0.12); }
.form-success{ background: rgba(31,83,224,0.06); border-color: var(--accent); border-radius: var(--r); }

.footer,
[data-theme="light"] .footer{ background: var(--navy); color: rgba(255,255,255,0.8); border-top: none; }
.footer, .footer *{ --ink: #fff; --ink-mute: rgba(255,255,255,0.72); --ink-dim: rgba(255,255,255,0.55); --ink-faint: rgba(255,255,255,0.4); --hairline: rgba(255,255,255,0.14); }
.footer-bottom{ color: rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,0.14); }
.footer-grid h5{ color: rgba(255,255,255,0.55); }
.footer-grid a, .footer-grid p{ color: rgba(255,255,255,0.72); }
.footer-grid a:hover{ color: #fff; }
.footer-legal{ display: inline-flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a{ color: rgba(255,255,255,0.6); }
.footer-legal a:hover{ color: #fff; }

/* =============================================================================
   AI-POWERED TPRM section — navy band, white feature cards, expert-verified
============================================================================ */
.ai-section .ai-band{
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px;
  padding: clamp(32px, 4vw, 64px);
  background:
    radial-gradient(90% 70% at 90% 0%, rgba(31,83,224,0.42), transparent 55%),
    radial-gradient(70% 70% at 0% 100%, rgba(17,179,173,0.20), transparent 55%),
    linear-gradient(160deg, var(--navy), #0c1c44 60%, #0a1838);
  color: #fff;
}
.ai-band .ai-head{ max-width: 760px; display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(28px, 3vw, 44px); }
.ai-band .eyebrow{ color: #5fe0d8; }
.ai-band .eyebrow .num{ color: #5fe0d8; }
.ai-band .eyebrow .rule{ background: linear-gradient(to right, #5fe0d8, transparent); }
.ai-band .h-section{ color: #fff; }
.ai-band .h-section .em{ color: #5fe0d8; }
.ai-band .lead{ color: rgba(255,255,255,0.8); }

.ai-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px){ .ai-grid{ grid-template-columns: 1fr; } }

.ai-card{
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.ai-card:hover{ background: rgba(255,255,255,0.07); border-color: rgba(95,224,216,0.45); transform: translateY(-2px); }
.ai-card .ai-ico{
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(17,179,173,0.25);
}
.ai-card .ai-ico svg{ width: 21px; height: 21px; }
.ai-card h3{ font: 700 18px/1.25 var(--ff-display); letter-spacing: -0.01em; color: #fff; margin: 4px 0 0; }
.ai-card p{ font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0; }

/* flagship lead card spans the row, laid out wide */
.ai-card.lead{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 44px);
  align-items: center;
  background: rgba(95,224,216,0.07);
  border-color: rgba(95,224,216,0.32);
}
@media (max-width: 860px){ .ai-card.lead{ grid-template-columns: 1fr; } }
.ai-card.lead h3{ font-size: 22px; }
.ai-card.lead > .ai-ico{ grid-row: 1; }
.ai-points{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-self: center; }
.ai-points li{ position: relative; padding-left: 26px; font-size: 14px; color: rgba(255,255,255,0.86); }
.ai-points li::before{
  content: ""; position: absolute; left: 0; top: 3px;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(95,224,216,0.18);
  box-shadow: inset 0 0 0 1px rgba(95,224,216,0.6);
}
.ai-points li::after{
  content: ""; position: absolute; left: 5px; top: 7px;
  width: 6px; height: 3px; border-left: 1.5px solid #5fe0d8; border-bottom: 1.5px solid #5fe0d8;
  transform: rotate(-45deg);
}

.ai-promise{
  display: flex; align-items: center; gap: 18px;
  margin-top: 20px; padding: 22px clamp(20px, 2.6vw, 32px);
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
}
.ai-promise-mark{
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center; color: #0a1633;
  background: #5fe0d8;
}
.ai-promise-mark svg{ width: 24px; height: 24px; }
.ai-promise p{ margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82); }
.ai-promise p strong{ color: #fff; font-weight: 700; }

/* =============================================================================
   ATTACK PATH — animated "how a breach moves through a vendor" band
============================================================================ */
.attack-section .attack-band{
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 24px;
  padding: clamp(32px, 4vw, 64px);
  background:
    radial-gradient(80% 70% at 8% 0%, rgba(220,38,38,0.22), transparent 55%),
    radial-gradient(70% 70% at 100% 100%, rgba(31,83,224,0.30), transparent 55%),
    linear-gradient(160deg, var(--navy), #0c1c44 60%, #0a1838);
  color: #fff;
}
.attack-band .attack-head{ max-width: 820px; display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 4vw, 52px); }
.attack-band .eyebrow{ color: #ff8d72; }
.attack-band .eyebrow .num, .attack-band .eyebrow .rule{ color: #ff8d72; }
.attack-band .eyebrow .rule{ background: linear-gradient(to right, #ff8d72, transparent); }
.attack-band .h-section{ color: #fff; }
.attack-band .h-section .em{ color: #f5b14b; }
.attack-band .lead{ color: rgba(255,255,255,0.78); }

.attack-map{
  display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center;
  gap: clamp(8px, 1.5vw, 20px);
}
@media (max-width: 760px){ .attack-map{ grid-template-columns: 1fr; justify-items: center; gap: 0; } }

.atk-node{
  position: relative;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 20px 16px; min-width: 150px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
}
.atk-ico{
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  border: 1px solid currentColor;
}
.atk-ico svg{ width: 26px; height: 26px; }
.atk-name{ font: 700 15px/1.2 var(--ff-display); color: #fff; }
.atk-sub{ font-size: 11.5px; line-height: 1.35; color: rgba(255,255,255,0.55); max-width: 18ch; }

.atk-attacker .atk-ico{ color: #ff6f6f; background: rgba(220,38,38,0.14); }
.atk-data .atk-ico{ color: #5fe0d8; background: rgba(17,179,173,0.16); }
.atk-vendor{ border-color: rgba(245,177,75,0.45); background: rgba(245,177,75,0.07); }
.atk-vendor .atk-ico{ color: #f5b14b; background: rgba(245,177,75,0.16); animation: atkVendorPulse 2.4s ease-in-out infinite; }
.atk-flag{
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  font: 700 9px/1 var(--ff-mono); letter-spacing: .14em; text-transform: uppercase;
  color: #1a1206; background: #f5b14b; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}

/* connecting segment with a travelling packet */
.atk-link{ position: relative; height: 3px; min-width: 48px; align-self: center; }
.atk-line{
  position: absolute; inset: 0; border-radius: 99px;
  background: linear-gradient(to right, rgba(255,111,111,0.5), rgba(245,177,75,0.5));
}
.atk-link:last-of-type .atk-line{ background: linear-gradient(to right, rgba(245,177,75,0.5), rgba(95,224,216,0.6)); }
.atk-packet{
  position: absolute; top: 50%; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 2px rgba(255,255,255,0.8), 0 0 22px 4px rgba(245,177,75,0.6);
  animation: atkFlow 2.4s linear infinite;
}
.atk-packet-2{ animation-delay: 1.2s; box-shadow: 0 0 10px 2px rgba(255,255,255,0.8), 0 0 22px 4px rgba(95,224,216,0.6); }

@keyframes atkFlow{
  0%   { left: 0;    opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes atkVendorPulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(245,177,75,0.45); }
  50%    { box-shadow: 0 0 0 12px rgba(245,177,75,0); }
}

/* mobile: stack vertically, packet travels downward */
@media (max-width: 760px){
  .atk-node{ width: 100%; max-width: 320px; }
  .atk-link{ width: 3px; height: 40px; min-width: 0; }
  .atk-line{ background: linear-gradient(to bottom, rgba(255,111,111,0.5), rgba(245,177,75,0.5)) !important; }
  .atk-packet{ top: 0; left: 50%; animation-name: atkFlowV; }
  @keyframes atkFlowV{ 0%{ top:0; opacity:0 } 12%{opacity:1} 88%{opacity:1} 100%{ top:100%; opacity:0 } }
}

.attack-foot{
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(28px, 3.5vw, 44px); padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.82);
}
.atk-foot-dot{ flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5fe0d8; box-shadow: 0 0 10px #5fe0d8; }

@media (prefers-reduced-motion: reduce){
  .atk-packet{ animation: none; left: 50%; opacity: 1; }
  .atk-packet-2{ left: 50%; }
  .atk-vendor .atk-ico{ animation: none; }
}

/* =============================================================================
   LEGAL / TRUST PAGES
============================================================================ */
.legal-shell{ padding-top: clamp(96px, 12vh, 130px); min-height: 70vh; }
.legal{ max-width: 800px; margin: 0 auto; padding: 0 var(--pad-x) clamp(60px, 8vw, 100px); }
.legal .eyebrow{ color: var(--accent); }
.legal .eyebrow .num{ color: var(--accent); }
.legal .eyebrow .rule{ background: linear-gradient(to right, var(--accent), transparent); }
.legal h1{ font: 800 clamp(30px, 4.4vw, 46px)/1.08 var(--ff-display); letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 0; }
.legal .updated{ display: block; margin: 12px 0 30px; font: 600 12px/1 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.legal .lead{ font-size: 17px; line-height: 1.65; color: var(--ink-mute); margin-bottom: 8px; }
.legal h2{ font: 700 20px/1.3 var(--ff-display); letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 10px; }
.legal h3{ font: 700 15px/1.4 var(--ff-display); color: var(--ink); margin: 22px 0 6px; }
.legal p, .legal li{ font-size: 15.5px; line-height: 1.7; color: var(--ink-mute); }
.legal p{ margin: 0 0 14px; }
.legal ul{ margin: 0 0 16px; padding-left: 22px; display: grid; gap: 7px; }
.legal a{ color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover{ color: #1844c4; }
.legal strong{ color: var(--ink); font-weight: 600; }
.legal .callout{
  margin: 22px 0; padding: 16px 18px; border-radius: 12px;
  background: rgba(31,83,224,0.05); border: 1px solid rgba(31,83,224,0.18);
  font-size: 14.5px; line-height: 1.6; color: var(--ink-mute);
}
.legal .callout strong{ color: var(--accent); }
.legal-footer{ background: var(--navy); color: rgba(255,255,255,0.7); padding: 30px 0; }
.legal-footer .container{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.legal-footer a{ color: rgba(255,255,255,0.72); font-size: 13px; }
.legal-footer a:hover{ color: #fff; }
.legal-footer .lf-links{ display: flex; gap: 18px; flex-wrap: wrap; }
.legal-footer .lf-copy{ font: 500 11px/1.4 var(--ff-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,0.45); }

/* =============================================================================
   STORAGE / PRIVACY PREFERENCES PANEL (cookie-prefs.js)
============================================================================ */
.cookie-overlay{
  position: fixed; inset: 0; z-index: 250;
  background: rgba(10,18,45,0.45);
  opacity: 0; transition: opacity .22s var(--ease);
}
.cookie-overlay.is-open{ opacity: 1; }
.cookie-panel{
  position: absolute; top: 0; left: 0; bottom: 0; width: min(380px, 90vw);
  background: #fff; color: var(--ink);
  display: flex; flex-direction: column;
  box-shadow: 0 0 80px rgba(10,18,45,0.4);
  transform: translateX(-100%); transition: transform .24s var(--ease);
}
.cookie-overlay.is-open .cookie-panel{ transform: translateX(0); }
.cookie-head{ display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--hairline); }
.cookie-head h2{ font: 700 17px/1 var(--ff-display); letter-spacing: -0.01em; color: var(--ink); }
.cookie-x{ background: none; border: none; font-size: 24px; line-height: 1; color: var(--ink-dim); cursor: pointer; padding: 0 4px; }
.cookie-x:hover{ color: var(--ink); }
.cookie-scroll{ overflow-y: auto; padding: 20px 22px; flex: 1; }
.cookie-intro{ font-size: 13px; line-height: 1.6; color: var(--ink-mute); margin: 0 0 20px; }
.cookie-intro a{ color: var(--accent); }
.cookie-cat{ padding: 16px 0; border-top: 1px solid var(--hairline); }
.cookie-cat-top{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-cat-title{ font: 700 14px/1 var(--ff-display); color: var(--ink); }
.cookie-cat-desc{ font-size: 12.5px; line-height: 1.55; color: var(--ink-mute); margin: 8px 0 0; }
/* toggle switch */
.cookie-toggle{ flex: none; width: 42px; height: 24px; border-radius: 999px; border: none; background: #cfd6e4; position: relative; cursor: pointer; transition: background .2s; padding: 0; }
.cookie-toggle .knob{ position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left .2s; }
.cookie-toggle[aria-checked="true"]{ background: #16a34a; }
.cookie-toggle[aria-checked="true"] .knob{ left: 21px; }
.cookie-toggle.locked{ opacity: .7; cursor: not-allowed; }
.cookie-actions{ display: flex; gap: 8px; padding: 16px 22px; border-top: 1px solid var(--hairline); flex-wrap: wrap; }
.cookie-btn{ flex: 1; min-width: 96px; padding: 11px 12px; border-radius: 9px; font: 700 12.5px/1 var(--ff-display); cursor: pointer; }
.cookie-btn.ghost{ background: #fff; border: 1px solid var(--hairline-strong); color: var(--ink); }
.cookie-btn.ghost:hover{ border-color: var(--accent); color: var(--accent); }
.cookie-btn.solid{ background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.cookie-btn.solid:hover{ background: #1844c4; }
/* the footer trigger link */
.cookie-link{ cursor: pointer; }
@media (prefers-reduced-motion: reduce){ .cookie-overlay, .cookie-panel{ transition: none; } }

/* hide any leftover light-Vanta hero bits */
.hero-preview, .hero-frameworks{ display: none; }

/* =============================================================================
   MOBILE HARDENING — prevent horizontal overflow + tidy layout on phones
============================================================================ */
html, body{ overflow-x: hidden; max-width: 100%; }

@media (max-width: 768px){
  .hero-inner{ grid-template-columns: 1fr !important; gap: 32px; padding-left: 20px; padding-right: 20px; }
  .hero-copy{ max-width: 100%; }
  .hero .h-display{ font-size: clamp(28px, 8.5vw, 40px) !important; max-width: 100% !important; }
  .hero .lead{ max-width: 100% !important; }
  .pill{ max-width: 100%; }

  /* product preview panel: never exceed the viewport, keep its content inside */
  .ent-panel{ width: 100%; max-width: 100%; overflow: hidden; }
  .ent-kpis{ grid-template-columns: 1fr 1fr; }
  .ent-row{ grid-template-columns: 56px 1fr; }
  .ent-row .rs{ display: none; }

  /* framework strip + credential band wrap cleanly */
  .hero-frameworks-strip{ gap: 8px 14px; }
  .hero-frameworks-strip span:not(.lbl){ font-size: 12px; }
  .proof-label{ white-space: normal; }
  .proof-creds{ gap: 8px; }
  .proof-creds .cred{ width: 100%; }

  /* bands and cards: comfortable side padding */
  .ai-band, .attack-band, .ai-demo, .demo-card, .demo-wrap{ padding-left: 20px; padding-right: 20px; }
  .ai-card.lead{ gap: 16px; }

  /* attack-path stacks (already vertical via its own rule) */
  .attack-map{ gap: 0; }

  /* legal pages */
  .legal{ padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 480px){
  .hero .h-display{ font-size: 28px !important; }
  .ent-kpis{ grid-template-columns: 1fr; }
}

/* guarantee the mobile hamburger shows + is legible, and the dropdown opens */
@media (max-width: 820px){
  .topbar .nav{ display: none; }
  .topbar .nav.open{ display: flex; }
  .menu-btn{ display: inline-flex !important; }
  .topbar:not(.scrolled) .menu-btn{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: #fff; }
  .topbar.scrolled .menu-btn{ background: rgba(15,31,69,0.06); border-color: var(--hairline-strong); color: var(--ink); }
  .menu-btn svg{ color: currentColor; }
}