@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

/* ══════════════════════════════════════════════════════════════════
   SECUREVAULT.CA  ·  Design System v5
   Inter — The standard for premium enterprise SaaS
   JetBrains Mono — Technical labels & code
   Canada Red #C0272D · Navy #07111F · White sections
   Inspired by: Stripe, Linear, Vercel
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* ── Core backgrounds ── */
  --bg-dark:    #07111F;   /* hero, footer, dark sections */
  --bg-darker:  #04090F;
  --bg-mid:     #0B1929;   /* cards on dark bg */
  --bg-white:   #FFFFFF;   /* white sections */
  --bg-soft:    #F6F8FB;   /* alternating light sections */
  --bg-card:    #FFFFFF;

  /* ── Canada red — the only accent ── */
  --red:        #C0272D;
  --red-h:      #A6212A;   /* hover */
  --red-lt:     #E85259;   /* on dark bg */
  --red-xl:     #FF7B80;   /* very light on dark */
  --red-dim:    rgba(192,39,45,.08);
  --red-b:      rgba(192,39,45,.2);

  /* ── Navy / blue — supporting ── */
  --navy:       #07111F;
  --navy2:      #102035;
  --blue:       #1B4FD8;
  --blue-lt:    #3B72F2;
  --blue-dim:   rgba(27,79,216,.08);
  --blue-b:     rgba(27,79,216,.18);

  /* ── Text ── */
  --ink:        #07111F;   /* primary on white */
  --ink2:       #1E3148;   /* strong heading */
  --body:       #4A5568;   /* body on white */
  --muted:      #718096;   /* secondary on white */
  --ghost:      #A0AEC0;   /* tertiary */

  /* ── On dark bg ── */
  --d-t1:       #F0F5FF;
  --d-t2:       #94A8C0;
  --d-muted:    #5C7A96;

  /* ── Borders ── */
  --bdr:        #E2E8F0;   /* on white */
  --bdr2:       #EDF2F7;
  --bdr-d:      rgba(255,255,255,.08); /* on dark */
  --bdr-d2:     rgba(255,255,255,.04);

  /* ── Shadows ── */
  --sh-sm:      0 1px 3px rgba(7,17,31,.06), 0 1px 2px rgba(7,17,31,.04);
  --sh-md:      0 4px 12px rgba(7,17,31,.08), 0 1px 4px rgba(7,17,31,.04);
  --sh-lg:      0 8px 30px rgba(7,17,31,.1),  0 2px 8px rgba(7,17,31,.05);
  --sh-xl:      0 20px 60px rgba(7,17,31,.15), 0 4px 16px rgba(7,17,31,.08);

  /* ── Green / status ── */
  --green:      #16A34A;
  --green-lt:   #22C55E;

  /* ── Shape ── */
  --r:     5px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
}

/* ── Reset ───────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--bg-white); color:var(--body); overflow-x:hidden; line-height:1.65; font-size:16px; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; }
ul { list-style:none; }
h1,h2,h3,h4,h5 { font-family:'Inter',sans-serif; font-weight:700; line-height:1.18; letter-spacing:-.02em; color:var(--ink); }

/* ── Layout ──────────────────────────────────────────────────────── */
.section { padding:5.5rem 0; }
.section-inner { max-width:1160px; margin:0 auto; padding:0 2rem; }
.grid-2    { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start; }
.grid-2-3  { display:grid; grid-template-columns:3fr 2fr; gap:4rem; align-items:start; }
.grid-3-2  { display:grid; grid-template-columns:2fr 1fr; gap:4rem; align-items:start; }

/* ══════════════════════════════════════════════════════════════════
   NAV — white/blur on scroll, transparent on dark hero
   ══════════════════════════════════════════════════════════════════ */
#main-nav {
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:72px; display:flex; align-items:center;
  padding:0 2.5rem;
  background:rgba(7,17,31,.94);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--bdr-d);
}

/* ── Logo ── */
.nav-logo { display:flex; align-items:center; gap:13px; flex-shrink:0; }
.nav-logo-text { line-height:1; }
.nav-logo-name {
  font-size:1.22rem; font-weight:800; color:var(--d-t1);
  letter-spacing:-.03em; display:block;
}
.nav-logo-name .ca { color:var(--red-lt); font-weight:600; }
.nav-logo-sub {
  font-family:'JetBrains Mono',monospace;
  font-size:.54rem; color:var(--d-muted);
  letter-spacing:.1em; text-transform:uppercase;
  display:block; margin-top:4px;
}

/* Links */
.nav-links { display:flex; align-items:center; margin-left:auto; }
.nav-item { position:relative; }
.nav-link {
  display:flex; align-items:center; gap:3px;
  padding:.38rem .78rem; border-radius:5px;
  font-size:.84rem; font-weight:500; color:var(--d-t2);
  cursor:pointer; transition:.12s; white-space:nowrap; letter-spacing:-.005em;
}
.nav-link svg.chevron { width:10px; height:10px; transition:transform .14s; color:var(--d-muted); }
.nav-item:hover>.nav-link svg.chevron { transform:rotate(180deg); }
.nav-link:hover,.nav-link.active { color:var(--d-t1); }

/* Dropdown */
.nav-dropdown {
  position:absolute; top:100%; left:0;
  padding-top:10px; /* bridge the gap — invisible but hoverable */
  min-width:256px;
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:.15s;
}
.nav-dropdown-inner {
  background:#0D1E30;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.6);
  padding:.35rem;
}
.nav-item:hover>.nav-dropdown { opacity:1; pointer-events:all; transform:translateY(0); }
.nav-dropdown a { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem; border-radius:8px; transition:.1s; }
.nav-dropdown a:hover { background:rgba(255,255,255,.05); }
.nd-icon {
  width:32px; height:32px; flex-shrink:0; border-radius:7px;
  display:flex; align-items:center; justify-content:center;
}
.nd-icon.red  { background:rgba(192,39,45,.15); border:1px solid rgba(192,39,45,.25); }
.nd-icon.red  svg { color:var(--red-lt); }
.nd-icon.blue { background:rgba(27,79,216,.15); border:1px solid rgba(27,79,216,.25); }
.nd-icon.blue svg { color:#6B9FFF; }
.nd-icon svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; }
.nav-dropdown a strong { display:block; font-size:.81rem; font-weight:600; color:var(--d-t1); margin-bottom:1px; }
.nav-dropdown a span  { font-size:.72rem; color:var(--d-muted); line-height:1.3; }
.nd-sep { height:1px; background:rgba(255,255,255,.07); margin:.22rem 0; }

/* CTA */
.nav-cta {
  margin-left:.75rem; flex-shrink:0;
  background:var(--red) !important; color:#fff !important;
  font-weight:600 !important; border-radius:5px;
  padding:.44rem 1rem; font-size:.83rem;
  transition:.13s; white-space:nowrap;
}
.nav-cta:hover { background:var(--red-h) !important; }

/* ══════════════════════════════════════════════════════════════════
   HERO  — dark, full screen, stunning
   ══════════════════════════════════════════════════════════════════ */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:7rem 2rem 5rem; position:relative; overflow:hidden;
  background:var(--bg-dark);
}

/* Radial gradient glow — Canada red top-left, subtle */
.hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 55% 45% at 5% 15%, rgba(192,39,45,.18) 0%, transparent 60%),
    radial-gradient(ellipse 40% 50% at 85% 60%, rgba(27,79,216,.12) 0%, transparent 55%);
  pointer-events:none;
}

/* Fine grid */
.hero-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%, black 40%, transparent 80%);
}

.hero-inner { max-width:1160px; margin:0 auto; padding:0; width:100%; display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; position:relative; z-index:2; }

/* Hero badge */
.hero-badge {
  display:inline-flex; align-items:center; gap:.55rem; margin-bottom:1.75rem;
  background:rgba(192,39,45,.12); border:1px solid rgba(192,39,45,.3);
  border-radius:3px; padding:.35rem .85rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.66rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
  color:var(--red-xl); animation:fadeUp .5s ease both;
}
.hero-badge svg { width:12px; height:12px; fill:currentColor; }

/* Hero heading */
.hero h1 {
  font-size:clamp(2.6rem, 5vw, 4.2rem); font-weight:800;
  line-height:1.06; letter-spacing:-.035em;
  color:var(--d-t1); margin-bottom:1.4rem;
  animation:fadeUp .5s .08s ease both;
}
.hero h1 em { font-style:normal; color:var(--red-lt); }

.hero-sub {
  font-size:1.08rem; font-weight:400; color:var(--d-t2);
  line-height:1.75; max-width:520px; margin-bottom:2.5rem;
  animation:fadeUp .5s .16s ease both;
}
.hero-actions { display:flex; gap:.9rem; flex-wrap:wrap; margin-bottom:3rem; animation:fadeUp .5s .24s ease both; }

/* Trust strip */
.trust-strip {
  display:flex; align-items:center; flex-wrap:nowrap; gap:0;
  padding-top:2rem; border-top:1px solid var(--bdr-d);
  animation:fadeUp .5s .32s ease both;
  overflow:hidden;
}
.trust-item {
  display:flex; align-items:center; gap:.38rem;
  font-size:.74rem; font-weight:500; color:var(--d-muted);
  white-space:nowrap; padding:0 1.1rem;
}
.trust-item + .trust-item {
  border-left:1px solid rgba(255,255,255,.1);
}
.trust-item:first-child { padding-left:0; }
.trust-item svg { width:12px; height:12px; flex-shrink:0; }
.trust-item.ca svg { color:var(--red-lt); fill:var(--red-lt); }
.trust-item.ok svg { color:var(--green-lt); }

/* ── Hero right: product mockup ── */
.hero-mockup {
  animation:fadeUp .5s .2s ease both;
  position:relative;
}
.mock-window {
  background:#0D1E30; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden;
  box-shadow:0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06);
}
.mock-bar {
  background:#091525; padding:.75rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.07);
  display:flex; align-items:center; gap:.8rem;
}
.mock-dots { display:flex; gap:.4rem; }
.mock-dots span { width:10px; height:10px; border-radius:50%; display:block; }
.mock-dots .d1 { background:#FF5F57; }
.mock-dots .d2 { background:#FFBD2E; }
.mock-dots .d3 { background:#28CA42; }
.mock-url {
  flex:1; background:rgba(255,255,255,.06); border-radius:4px;
  padding:.28rem .75rem; font-family:'JetBrains Mono',monospace;
  font-size:.67rem; color:rgba(255,255,255,.35); text-align:center;
}
.mock-body { padding:1.1rem; }
.mock-row {
  display:flex; align-items:center; gap:.75rem;
  padding:.65rem .85rem; border-radius:7px;
  margin-bottom:.45rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06); transition:.15s;
}
.mock-row:last-child { margin-bottom:0; }
.mock-file-icon {
  width:30px; height:30px; border-radius:6px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700;
}
.mock-file-icon.pdf { background:rgba(192,39,45,.2); color:var(--red-lt); }
.mock-file-icon.doc { background:rgba(27,79,216,.2); color:#7BA8FF; }
.mock-file-icon.zip { background:rgba(234,179,8,.15); color:#FCD34D; }
.mock-row-text h6 { font-size:.79rem; font-weight:600; color:var(--d-t1); margin-bottom:1px; }
.mock-row-text span { font-size:.68rem; color:var(--d-muted); }
.mock-pill {
  margin-left:auto; flex-shrink:0; border-radius:3px;
  padding:.2rem .6rem; font-size:.65rem; font-weight:600;
  font-family:'JetBrains Mono',monospace; letter-spacing:.03em;
}
.mock-pill.ok    { background:rgba(34,197,94,.12); color:#4ADE80; }
.mock-pill.sent  { background:rgba(192,39,45,.12);  color:var(--red-xl); }
.mock-pill.wait  { background:rgba(251,191,36,.1);  color:#FCD34D; }
.mock-stat-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.5rem; margin-top:.7rem; }
.mock-stat {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:7px; padding:.7rem; text-align:center;
}
.mock-stat strong { display:block; font-size:1.05rem; font-weight:700; color:var(--d-t1); letter-spacing:-.02em; }
.mock-stat span   { font-size:.63rem; color:var(--d-muted); margin-top:1px; display:block; }

/* ══════════════════════════════════════════════════════════════════
   PAGE HERO (inner pages) — dark
   ══════════════════════════════════════════════════════════════════ */
.page-hero {
  background:var(--bg-dark); padding:8rem 2rem 5rem;
  position:relative; overflow:hidden;
}
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 60% at 20% 50%, rgba(192,39,45,.12) 0%, transparent 55%);
}
.ph-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 100% 100% at 50% 0%, rgba(0,0,0,.5), transparent);
}
.page-hero-inner { max-width:760px; margin:0 auto; position:relative; z-index:1; }
.page-hero h1 { font-size:clamp(1.8rem,3.2vw,2.8rem); font-weight:800; color:var(--d-t1); margin-bottom:.85rem; }
.page-hero p  { font-size:.98rem; color:var(--d-t2); line-height:1.74; max-width:620px; }

/* ══════════════════════════════════════════════════════════════════
   SECTION LABELS / EYEBROW
   ══════════════════════════════════════════════════════════════════ */
.eyebrow, .section-label {
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:'JetBrains Mono',monospace;
  font-size:.65rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:.85rem;
}
/* on dark bg */
.on-dark .eyebrow, .on-dark .section-label { color:var(--red-lt); }

/* H2 section title */
h2.section-title {
  font-size:clamp(1.55rem,2.6vw,2.15rem); font-weight:800;
  color:var(--ink); margin-bottom:.85rem; letter-spacing:-.025em;
}
.on-dark h2.section-title { color:var(--d-t1); }
h2.section-title em { font-style:normal; color:var(--red); }
.on-dark h2.section-title em { color:var(--red-lt); }
.section-intro { font-size:.95rem; color:var(--muted); line-height:1.76; max-width:580px; }
.on-dark .section-intro { color:var(--d-t2); }

/* ══════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.72rem 1.4rem; font-family:'Inter',sans-serif;
  font-size:.9rem; font-weight:600; border-radius:6px;
  cursor:pointer; border:none; transition:all .13s;
  letter-spacing:-.01em;
}
.btn svg { width:14px; height:14px; }
.btn-red { background:var(--red); color:#fff; box-shadow:0 2px 8px rgba(192,39,45,.3); }
.btn-red:hover { background:var(--red-h); box-shadow:0 4px 16px rgba(192,39,45,.4); transform:translateY(-1px); }
.btn-navy { background:var(--navy); color:#fff; }
.btn-navy:hover { background:var(--navy2); }
.btn-ghost-dark { background:rgba(255,255,255,.08); color:var(--d-t1); border:1px solid rgba(255,255,255,.15); }
.btn-ghost-dark:hover { background:rgba(255,255,255,.13); }
.btn-outline { background:transparent; color:var(--ink); border:1.5px solid var(--bdr); }
.btn-outline:hover { border-color:var(--ink); background:var(--bg-soft); }

/* ══════════════════════════════════════════════════════════════════
   TRUST / CERTIFICATION BAR  (white section below hero)
   ══════════════════════════════════════════════════════════════════ */
.cert-bar {
  background:var(--bg-white); border-bottom:1px solid var(--bdr);
  padding:1.1rem 2rem; overflow:hidden;
}
.cert-bar-inner {
  max-width:1160px; margin:0 auto;
  display:flex; align-items:center; justify-content:center; gap:0; flex-wrap:nowrap;
}
.cert-item {
  display:flex; align-items:center; gap:.4rem;
  font-size:.73rem; font-weight:600; color:var(--muted);
  letter-spacing:-.01em; white-space:nowrap; padding:0 1.25rem;
}
.cert-item svg { width:14px; height:14px; flex-shrink:0; }
.cert-sep { width:1px; height:16px; background:var(--bdr); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════
   SERVICE CARDS  (white section)
   ══════════════════════════════════════════════════════════════════ */
.service-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:3rem; }
.service-card {
  background:var(--bg-card); border:1.5px solid var(--bdr);
  border-radius:16px; padding:2.25rem;
  display:flex; flex-direction:column; gap:1.1rem;
  transition:.2s; position:relative; overflow:hidden;
  box-shadow:var(--sh-sm);
}
.service-card::after {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--red);
}
.service-card.archiving::after { background:linear-gradient(90deg, var(--red), var(--blue)); }
.service-card:hover { border-color:rgba(192,39,45,.25); box-shadow:var(--sh-lg); transform:translateY(-3px); }
.svc-icon {
  width:48px; height:48px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.svc-icon svg { width:22px; height:22px; fill:none; stroke-width:1.8; }
.svc-icon.red   { background:rgba(192,39,45,.08); border:1.5px solid rgba(192,39,45,.18); }
.svc-icon.red   svg { stroke:var(--red); }
.svc-icon.navy  { background:rgba(7,17,31,.07);   border:1.5px solid rgba(7,17,31,.12); }
.svc-icon.navy  svg { stroke:var(--navy); }
.service-card h3 { font-size:1.2rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.service-card > p { font-size:.9rem; color:var(--body); line-height:1.72; flex:1; }
.service-features { display:flex; flex-direction:column; gap:.35rem; }
.service-features li { display:flex; align-items:center; gap:.6rem; font-size:.84rem; color:var(--body); }
.service-features li::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--red); flex-shrink:0; }
.service-link { color:var(--red); font-size:.875rem; font-weight:600; display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; transition:gap .15s; }
.service-link:hover { gap:.7rem; }

/* ══════════════════════════════════════════════════════════════════
   CLOUD ACT BOX  (red warning)
   ══════════════════════════════════════════════════════════════════ */
.cloud-act-box {
  background:rgba(192,39,45,.05);
  border:1.5px solid rgba(192,39,45,.18);
  border-left:4px solid var(--red);
  border-radius:var(--r-md); padding:1.4rem;
  margin-bottom:1.75rem;
}
.cloud-act-box h4 {
  font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--red); margin-bottom:.45rem;
}
.cloud-act-box p { font-size:.88rem; color:var(--body); line-height:1.72; }

/* ══════════════════════════════════════════════════════════════════
   WHY POINTS  (on white bg)
   ══════════════════════════════════════════════════════════════════ */
.why-points { display:flex; flex-direction:column; gap:1.25rem; }
.why-point { display:flex; align-items:flex-start; gap:1.1rem; }
.wp-icon {
  width:40px; height:40px; border-radius:10px; flex-shrink:0; margin-top:2px;
  display:flex; align-items:center; justify-content:center;
}
.wp-icon svg { width:18px; height:18px; fill:none; stroke-width:2; }
.wp-icon.red   { background:rgba(192,39,45,.08); border:1.5px solid rgba(192,39,45,.18); }
.wp-icon.red   svg { stroke:var(--red); }
.wp-icon.navy  { background:rgba(7,17,31,.07);   border:1.5px solid rgba(7,17,31,.14); }
.wp-icon.navy  svg { stroke:var(--navy); }
.why-point h4  { font-size:.95rem; font-weight:700; color:var(--ink); margin-bottom:.25rem; }
.why-point p   { font-size:.87rem; color:var(--body); line-height:1.68; }

/* ══════════════════════════════════════════════════════════════════
   INFRA STATUS WIDGET  (on any bg)
   ══════════════════════════════════════════════════════════════════ */
.infra-widget { background:var(--bg-dark); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; box-shadow:var(--sh-xl); }
.iw-header {
  background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08);
  padding:.85rem 1.35rem;
  display:flex; align-items:center; gap:.65rem;
  font-family:'JetBrains Mono',monospace; font-size:.62rem;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--d-muted);
}
.iw-live { display:flex; align-items:center; gap:.5rem; }
.iw-dot  { width:7px; height:7px; border-radius:50%; background:var(--green-lt); animation:pulse 2.5s ease infinite; }
.iw-body { padding:1rem 1rem .75rem; }
.iw-row  {
  display:flex; align-items:center; gap:.85rem;
  padding:.7rem .85rem; background:rgba(255,255,255,.04);
  border-radius:8px; border:1px solid rgba(255,255,255,.06);
  margin-bottom:.4rem;
}
.iw-row:last-child { margin-bottom:0; }
.iw-status { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.iw-status.live   { background:var(--green-lt); box-shadow:0 0 6px rgba(34,197,94,.4); }
.iw-status.backup { background:#60A5FA; box-shadow:0 0 6px rgba(96,165,250,.35); }
.iw-row h5   { font-size:.83rem; font-weight:600; color:var(--d-t1); margin-bottom:1px; }
.iw-row span { font-size:.71rem; color:var(--d-muted); }
.iw-flag {
  margin-left:auto; flex-shrink:0;
  font-family:'JetBrains Mono',monospace; font-size:.58rem;
  color:var(--red-lt); background:rgba(192,39,45,.12);
  border:1px solid rgba(192,39,45,.25); border-radius:3px; padding:1px 7px;
}
.iw-badges { display:flex; flex-wrap:wrap; gap:.38rem; padding:.75rem .85rem .85rem; border-top:1px solid rgba(255,255,255,.06); }

/* ══════════════════════════════════════════════════════════════════
   INDUSTRIES GRID
   ══════════════════════════════════════════════════════════════════ */
.industry-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:2.5rem; }
.industry-card {
  background:var(--bg-card); border:1.5px solid var(--bdr);
  border-radius:12px; padding:1.5rem 1.25rem;
  display:flex; flex-direction:column; gap:.55rem;
  transition:.18s; box-shadow:var(--sh-sm);
}
.industry-card:hover { border-color:rgba(192,39,45,.3); box-shadow:var(--sh-md); transform:translateY(-2px); }
.ic-icon {
  width:44px; height:44px; border-radius:10px; margin-bottom:.1rem;
  display:flex; align-items:center; justify-content:center;
  background:rgba(192,39,45,.07); border:1.5px solid rgba(192,39,45,.15);
}
.ic-icon svg { width:20px; height:20px; fill:none; stroke:var(--red); stroke-width:2; }
.industry-card h4 { font-size:.9rem; font-weight:700; color:var(--ink); letter-spacing:-.01em; }
.industry-card p  { font-size:.8rem; color:var(--muted); line-height:1.55; flex:1; }
.ic-link { font-size:.8rem; font-weight:600; color:var(--red); display:inline-flex; align-items:center; gap:.3rem; margin-top:.1rem; }

/* ══════════════════════════════════════════════════════════════════
   SECURITY SECTION  (dark bg)
   ══════════════════════════════════════════════════════════════════ */
.sec-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.07); border-radius:14px; overflow:hidden; margin-top:2.5rem; }
.sec-item { background:var(--bg-mid); padding:1.85rem; transition:background .14s; }
.sec-item:hover { background:rgba(255,255,255,.03); }
.sec-icon {
  width:42px; height:42px; border-radius:10px; margin-bottom:.85rem;
  display:flex; align-items:center; justify-content:center;
}
.sec-icon svg { width:20px; height:20px; fill:none; stroke-width:2; }
.sec-icon.red  { background:rgba(192,39,45,.15); border:1px solid rgba(192,39,45,.25); }
.sec-icon.red  svg { stroke:var(--red-lt); }
.sec-icon.blue { background:rgba(27,79,216,.15); border:1px solid rgba(27,79,216,.25); }
.sec-icon.blue svg { stroke:#6B9FFF; }
.sec-item h4 { font-size:.92rem; font-weight:700; color:var(--d-t1); margin-bottom:.38rem; }
.sec-item p  { font-size:.84rem; color:var(--d-t2); line-height:1.68; }

/* ══════════════════════════════════════════════════════════════════
   PRICING CARDS
   ══════════════════════════════════════════════════════════════════ */
.plan-grid-preview { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; max-width:900px; margin:2.5rem auto 0; }
.plan-prev {
  background:var(--bg-card); border:1.5px solid var(--bdr);
  border-radius:14px; padding:2rem; text-align:center;
  transition:.18s; position:relative; box-shadow:var(--sh-sm);
}
.plan-prev:hover { box-shadow:var(--sh-lg); transform:translateY(-3px); }
.plan-prev.featured {
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(192,39,45,.1), var(--sh-md);
}
.plan-prev-badge {
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--red); color:#fff;
  font-size:.64rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.25rem .9rem; border-radius:3px; white-space:nowrap;
}
.plan-prev-name  { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.2rem; }
.plan-prev-price { font-size:2.6rem; font-weight:800; color:var(--red); margin:.65rem 0; letter-spacing:-.04em; }
.plan-prev-price sub { font-size:.85rem; color:var(--muted); font-weight:400; letter-spacing:0; }
.plan-prev-desc  { font-size:.78rem; color:var(--muted); margin-bottom:1.25rem; }
.see-all-link { text-align:center; margin-top:1.75rem; }
.see-all-link a { color:var(--red); font-size:.875rem; font-weight:600; }

/* ══════════════════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:5px;
  border-radius:4px; padding:3px 9px;
  font-family:'JetBrains Mono',monospace;
  font-size:.63rem; font-weight:500; letter-spacing:.03em;
}
.badge-dark  { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:var(--d-t2); }
.badge-red   { background:rgba(192,39,45,.1);   border:1px solid rgba(192,39,45,.22);  color:var(--red-lt); }
.badge-green { background:rgba(22,163,74,.1);   border:1px solid rgba(22,163,74,.22);  color:var(--green-lt); }
.badge-blue  { background:rgba(27,79,216,.1);   border:1px solid rgba(27,79,216,.22);  color:#6B9FFF; }
.compliance-badges { display:flex; flex-wrap:wrap; gap:.38rem; }

/* ══════════════════════════════════════════════════════════════════
   DATA TABLE
   ══════════════════════════════════════════════════════════════════ */
.data-table { width:100%; border-collapse:collapse; font-size:.87rem; }
.data-table th {
  padding:.65rem 1rem; text-align:left;
  font-family:'JetBrains Mono',monospace; font-size:.62rem;
  font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border-bottom:1.5px solid var(--bdr); white-space:nowrap;
}
.data-table th.hl { color:var(--red); }
.data-table td { padding:.65rem 1rem; color:var(--body); border-bottom:1px solid var(--bdr2); }
.data-table tr.cat td {
  font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ghost); background:var(--bg-soft); padding:.5rem 1rem;
}
.data-table td.hl { color:var(--ink); font-weight:600; }
.chk  { color:var(--green); font-weight:700; font-size:1rem; }
.crs  { color:var(--ghost); }
.prt  { font-size:.8rem; color:var(--muted); }

/* ══════════════════════════════════════════════════════════════════
   REQUIREMENTS / FEATURE GRIDS  (on white)
   ══════════════════════════════════════════════════════════════════ */
.reqs-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bdr); border-radius:var(--r-lg); overflow:hidden; margin-top:2rem; }
.req-card { background:var(--bg-card); padding:1.5rem; border-top:3px solid var(--red); }
.req-card h4 { font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.4rem; }
.req-card p  { font-size:.84rem; color:var(--body); line-height:1.65; }

.feature-grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bdr); border-radius:var(--r-lg); overflow:hidden; }
.feat-card { background:var(--bg-card); padding:1.65rem; transition:background .14s; }
.feat-card:hover { background:var(--bg-soft); }
.feat-icon { width:40px; height:40px; border-radius:9px; margin-bottom:.85rem; display:flex; align-items:center; justify-content:center; }
.feat-icon svg { width:18px; height:18px; fill:none; stroke-width:2; }
.feat-icon.red  { background:rgba(192,39,45,.08); border:1.5px solid rgba(192,39,45,.18); }
.feat-icon.red  svg { stroke:var(--red); }
.feat-icon.navy { background:rgba(7,17,31,.07);   border:1.5px solid rgba(7,17,31,.14); }
.feat-icon.navy svg { stroke:var(--navy); }
.feat-card h4 { font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.38rem; }
.feat-card p  { font-size:.84rem; color:var(--body); line-height:1.65; }

/* Steps */
.step { display:flex; gap:1.75rem; padding:1.5rem 0; border-bottom:1px solid var(--bdr2); }
.step:last-child { border-bottom:none; }
.step-num {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:var(--red); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:700;
}
.step h4 { font-size:.93rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.step p  { font-size:.87rem; color:var(--body); line-height:1.7; }

/* ══════════════════════════════════════════════════════════════════
   CANADA SOVEREIGNTY BAND  — red accent box
   ══════════════════════════════════════════════════════════════════ */
.canada-band {
  background:rgba(192,39,45,.05);
  border:1.5px solid rgba(192,39,45,.2);
  border-left:4px solid var(--red);
  border-radius:var(--r-md); padding:1.5rem;
  display:flex; align-items:flex-start; gap:1rem;
  margin-bottom:2rem;
}
.canada-band-icon {
  width:36px; height:36px; flex-shrink:0; margin-top:1px;
  background:rgba(192,39,45,.1); border:1.5px solid rgba(192,39,45,.2);
  border-radius:8px; display:flex; align-items:center; justify-content:center;
}
.canada-band-icon svg { width:18px; height:18px; fill:var(--red); }
.canada-band h4 { font-size:.92rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; }
.canada-band p  { font-size:.87rem; color:var(--body); line-height:1.68; }

/* ══════════════════════════════════════════════════════════════════
   STATS ROW
   ══════════════════════════════════════════════════════════════════ */
.stat-row { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--bdr); border-radius:var(--r-lg); overflow:hidden; }
.stat-item { background:var(--bg-card); padding:1.35rem; text-align:center; }
.stat-item strong { display:block; font-size:1.7rem; font-weight:800; color:var(--red); letter-spacing:-.04em; }
.stat-item span   { font-size:.77rem; color:var(--muted); margin-top:2px; display:block; }

/* ══════════════════════════════════════════════════════════════════
   CTA STRIP  — Canada red, full width, impactful
   ══════════════════════════════════════════════════════════════════ */
.cta-strip {
  background:var(--red);
  padding:5rem 2rem; text-align:center; position:relative; overflow:hidden;
}
.cta-strip::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(0,0,0,.2) 0%, transparent 60%);
}
.cta-strip::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 80% 20%, rgba(255,255,255,.07) 0%, transparent 60%);
}
.cta-strip h2 { font-size:clamp(1.5rem,2.5vw,2rem); font-weight:800; color:#fff; margin-bottom:.65rem; position:relative; z-index:1; }
.cta-strip p  { font-size:.95rem; color:rgba(255,255,255,.8); margin-bottom:2rem; position:relative; z-index:1; }
.cta-actions  { display:flex; gap:.9rem; justify-content:center; flex-wrap:wrap; position:relative; z-index:1; }
.btn-cta-white { background:#fff; color:var(--red); font-weight:700; }
.btn-cta-white:hover { background:rgba(255,255,255,.92); }
.btn-cta-ghost { background:rgba(255,255,255,.12); color:#fff; border:1.5px solid rgba(255,255,255,.35); font-weight:600; }
.btn-cta-ghost:hover { background:rgba(255,255,255,.2); }

/* ══════════════════════════════════════════════════════════════════
   ACCORDION
   ══════════════════════════════════════════════════════════════════ */
.accordion-group { background:var(--bg-card); border:1.5px solid var(--bdr); border-radius:var(--r-lg); overflow:hidden; margin-bottom:.75rem; box-shadow:var(--sh-sm); }
.acc-category { padding:.7rem 1.4rem; font-family:'JetBrains Mono',monospace; font-size:.6rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ghost); background:var(--bg-soft); border-bottom:1px solid var(--bdr); }
.accordion-header { display:flex; align-items:center; justify-content:space-between; padding:1rem 1.4rem; cursor:pointer; transition:.11s; font-size:.9rem; font-weight:600; color:var(--ink); border-bottom:1px solid var(--bdr2); letter-spacing:-.01em; }
.accordion-header:last-of-type { border-bottom:none; }
.accordion-header:hover { background:var(--bg-soft); }
.accordion-header.open { color:var(--red); }
.accordion-chevron { width:15px; height:15px; flex-shrink:0; color:var(--ghost); transition:transform .18s; }
.accordion-header.open .accordion-chevron { transform:rotate(180deg); color:var(--red); }
.accordion-body { max-height:0; overflow:hidden; transition:max-height .26s ease; }
.accordion-body.open { max-height:400px; }
.accordion-body-inner { padding:.65rem 1.4rem 1.2rem; font-size:.88rem; color:var(--body); line-height:1.78; }

/* ══════════════════════════════════════════════════════════════════
   FOOTER  — dark navy
   ══════════════════════════════════════════════════════════════════ */
#main-footer { background:var(--bg-dark); }
.footer-red-bar { height:3px; background:linear-gradient(90deg, var(--red) 0%, rgba(27,79,216,.6) 55%, transparent 100%); }
.footer-inner {
  max-width:1160px; margin:0 auto; padding:4rem 2rem 2.5rem;
  border-top:1px solid var(--bdr-d);
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:3rem;
}
.footer-logo-wrap { display:flex; align-items:center; gap:11px; margin-bottom:.9rem; }
.footer-logo-name { font-size:1.1rem; font-weight:800; color:var(--d-t1); letter-spacing:-.03em; }
.footer-logo-name .ca { color:var(--red-lt); font-weight:500; }
.footer-logo-sub { font-family:'JetBrains Mono',monospace; font-size:.49rem; color:var(--d-muted); letter-spacing:.1em; text-transform:uppercase; margin-top:3px; }
.footer-brand p { font-size:.8rem; color:var(--d-muted); line-height:1.68; max-width:255px; margin-bottom:1.1rem; }
.footer-badges { display:flex; flex-wrap:wrap; gap:.35rem; }
.footer-col h4 { font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--d-t2); margin-bottom:.85rem; }
.footer-col ul { display:flex; flex-direction:column; gap:.45rem; }
.footer-col a  { font-size:.8rem; color:var(--d-muted); transition:.1s; }
.footer-col a:hover { color:var(--d-t1); }
.footer-bottom {
  max-width:1160px; margin:0 auto; padding:1.2rem 2rem;
  border-top:1px solid var(--bdr-d);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
}
.footer-bottom p { font-size:.71rem; color:var(--d-muted); }
.footer-links { display:flex; gap:1.4rem; }
.footer-links a { font-size:.71rem; color:var(--d-muted); transition:.1s; }
.footer-links a:hover { color:var(--d-t2); }

/* ══════════════════════════════════════════════════════════════════
   LEGAL PAGES
   ══════════════════════════════════════════════════════════════════ */
.legal-wrap { max-width:820px; margin:0 auto; padding:4rem 2rem 5rem; }
.toc {
  background:var(--bg-soft); border:1.5px solid var(--bdr);
  border-radius:var(--r-lg); padding:1.5rem; margin-bottom:3rem;
  box-shadow:var(--sh-sm);
}
.toc h4 {
  font-family:'JetBrains Mono',monospace; font-size:.64rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--red); margin-bottom:.85rem;
  padding-bottom:.6rem; border-bottom:1px solid var(--bdr);
}
.toc ol { list-style:decimal; margin-left:1.3rem; display:flex; flex-direction:column; gap:.28rem; }
.toc a  { font-size:.87rem; color:var(--body); transition:.1s; line-height:1.5; }
.toc a:hover { color:var(--red); }
.legal-wrap h2 { font-size:1.15rem; font-weight:700; color:var(--red); margin:2.5rem 0 .75rem; padding-top:2.5rem; border-top:1.5px solid var(--bdr); }
.legal-wrap h2:first-of-type { margin-top:0; padding-top:0; border-top:none; }
.legal-wrap h3 { font-size:.95rem; font-weight:700; color:var(--ink); margin:1.25rem 0 .5rem; }
.legal-wrap p  { font-size:.9rem; color:var(--body); line-height:1.8; margin-bottom:.9rem; }
.legal-wrap ul { margin:.5rem 0 1rem 1.4rem; list-style:disc; display:flex; flex-direction:column; gap:.3rem; }
.legal-wrap li { font-size:.9rem; color:var(--body); line-height:1.65; }
.legal-wrap a  { color:var(--red); border-bottom:1px solid rgba(192,39,45,.2); }
.legal-wrap a:hover { border-bottom-color:var(--red); }
.legal-contact-card {
  background:var(--bg-soft); border:1.5px solid var(--bdr);
  border-radius:var(--r-lg); padding:1.25rem 1.5rem;
  margin-top:1.5rem; display:flex; align-items:center; gap:1.2rem;
  box-shadow:var(--sh-sm);
}
.lcc-icon { width:40px; height:40px; flex-shrink:0; border-radius:9px; background:rgba(192,39,45,.08); border:1.5px solid rgba(192,39,45,.18); display:flex; align-items:center; justify-content:center; }
.lcc-icon svg { width:18px; height:18px; fill:none; stroke:var(--red); stroke-width:2; }
.lcc-text h5 { font-size:.88rem; font-weight:700; color:var(--ink); margin-bottom:.15rem; }
.lcc-text p  { font-size:.82rem; color:var(--body); margin:0; }
.lcc-btn { margin-left:auto; flex-shrink:0; background:var(--red); color:#fff; font-weight:600; padding:.48rem .95rem; border-radius:5px; font-size:.81rem; transition:.13s; white-space:nowrap; }
.lcc-btn:hover { background:var(--red-h); }

/* Contact form styles */
.form-group { margin-bottom:1.3rem; }
.form-group label { display:block; font-size:.82rem; font-weight:600; color:var(--ink2); margin-bottom:.42rem; }
.form-group input,
.form-group select,
.form-group textarea {
  width:100%; background:var(--bg-white); border:1.5px solid var(--bdr);
  border-radius:6px; padding:.75rem 1rem; color:var(--ink);
  font-family:'Inter',sans-serif; font-size:.875rem;
  outline:none; transition:.14s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { border-color:var(--red); box-shadow:0 0 0 3px rgba(192,39,45,.1); }
.form-group textarea { resize:vertical; min-height:110px; }
.form-group select option { background:var(--bg-white); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:1100px) {
  .hero-inner { grid-template-columns:1fr; }
  .hero-mockup { display:none; }
  .grid-2,.grid-2-3,.grid-3-2 { grid-template-columns:1fr; }
  .industry-grid { grid-template-columns:1fr 1fr 1fr; }
  .service-cards { grid-template-columns:1fr; }
  .reqs-grid { grid-template-columns:1fr 1fr; }
  .feature-grid-3 { grid-template-columns:1fr 1fr; }
  .sec-grid { grid-template-columns:1fr 1fr; }
  .footer-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
  #main-nav { padding:0 1.25rem; }
  .nav-links { display:none; }
  .section { padding:3.5rem 0; }
  .section-inner { padding:0 1.25rem; }
  .hero { padding:5.5rem 1.25rem 3.5rem; }
  .trust-strip { flex-wrap:wrap; gap:.6rem; }
  .trust-item { padding:.15rem .6rem; border-left:none !important; font-size:.71rem; }
  .industry-grid { grid-template-columns:1fr 1fr; }
  .sec-grid { grid-template-columns:1fr; }
  .plan-grid-preview { grid-template-columns:1fr; max-width:360px; }
  .reqs-grid,.feature-grid-3 { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; gap:2rem; padding:3rem 1.25rem 2rem; }
  .footer-bottom { flex-direction:column; text-align:center; }
  .cert-bar-inner { flex-wrap:wrap; gap:.5rem; justify-content:flex-start; }
  .cert-item { padding:.1rem .6rem; font-size:.7rem; }
  .cert-sep { display:none; }
  .legal-wrap { padding:2.5rem 1.25rem 3.5rem; }
  .legal-contact-card { flex-wrap:wrap; }
  .lcc-btn { margin-left:0; }
  .page-hero { padding:6.5rem 1.25rem 4rem; }
}

@keyframes fadeUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:.6} 50%{opacity:1} }

/* ══════════════════════════════════════════════════════════════════
   LEGACY COMPATIBILITY ALIASES — light-mode values
   ══════════════════════════════════════════════════════════════════ */
:root {
  --card:       var(--bg-card);    /* white card on white section */
  --border:     var(--bdr);        /* light border #E2E8F0        */
  --border2:    var(--bdr2);       /* softer light border         */
  --borderb:    var(--blue-b);     /* blue accent border          */
  --cream:      var(--ink);        /* dark text on white bg       */
  --muted2:     var(--muted);      /* medium-gray on white        */
  --blue-xl:    var(--blue-lt);    /* vivid blue visible on white */
  --blue-glow:  rgba(27,79,216,.2);
  --amber:      #D97706;           /* warm amber on white         */
}

/* .card utility — used as inline class in some pages */
.card {
  background:var(--bg-card); border:1.5px solid var(--bdr);
  border-radius:var(--r-lg); padding:1.5rem;
  box-shadow:var(--sh-sm);
}
.card h4 { color:var(--ink); }

/* Plan buttons on light bg */
.plan-btn { color:var(--ink) !important; }
.plan.featured .plan-btn { color:#fff !important; }

/* Value/infra cards on light bg */
.value-card, .infra-card { background:var(--bg-card) !important; border:1.5px solid var(--bdr) !important; }
.value-card h3, .infra-card h4 { color:var(--ink) !important; }
.value-card p, .infra-card p { color:var(--body) !important; }

/* FAQ cards on light bg */
.faq-card { background:var(--bg-card) !important; border:1.5px solid var(--bdr) !important; }
.faq-card h4 { color:var(--ink) !important; }
.faq-card p  { color:var(--body) !important; }

/* Plan card on light bg */
.plan { background:var(--bg-card) !important; border:1.5px solid var(--bdr) !important; }
.plan-name  { color:var(--ink) !important; }
.plan-price { color:var(--red) !important; }
.plan-target, .plan-billing { color:var(--muted) !important; }
.plan-features li { color:var(--body) !important; }
.plan.featured { border-color:var(--red) !important; }
.plan.featured .plan-btn { background:var(--red) !important; border-color:var(--red) !important; color:#fff !important; }
.plan.featured .plan-btn:hover { background:var(--red-h) !important; }

/* Enterprise band on light bg */
.enterprise-band { background:var(--bg-soft) !important; border:1.5px solid var(--bdr) !important; }
.enterprise-band h3 { color:var(--ink) !important; }
.enterprise-band p  { color:var(--body) !important; }
.ent-eyebrow { color:var(--red) !important; }
.ent-pill { color:var(--blue-lt) !important; border-color:var(--blue-b) !important; background:var(--blue-dim) !important; }
.band-range { color:var(--ink) !important; }
.band-price { color:var(--red) !important; }
.band-note  { color:var(--muted) !important; }
.btn-ent { color:var(--blue-lt) !important; border-color:var(--blue-b) !important; }
.btn-ent:hover { background:var(--blue-dim) !important; }

/* Archiving addon */
.archiving-addon { background:var(--bg-card) !important; border:1.5px solid var(--bdr) !important; }
.archiving-addon h4 { color:var(--ink) !important; }
.archiving-addon p  { color:var(--body) !important; }

/* Story body on light bg */
.story-body p      { color:var(--body) !important; }
.story-body strong { color:var(--ink) !important; }

/* ══════════════════════════════════════════════════════════════════
   LIGHT SECTION OVERRIDES for components originally designed dark
   ══════════════════════════════════════════════════════════════════ */

/* data-table on white */
.data-table th { color:var(--muted); border-bottom-color:var(--bdr); }
.data-table th.hl { color:var(--red); }
.data-table td { color:var(--body); border-bottom-color:var(--bdr2); }
.data-table tr.cat td { background:var(--bg-soft); color:var(--ghost); }
.data-table td.hl { color:var(--ink); }

/* sec-grid on white sections (inner pages) */
section:not(.security-section) .sec-grid { background:var(--bdr); }
section:not(.security-section) .sec-item { background:var(--bg-card); }
section:not(.security-section) .sec-item:hover { background:var(--bg-soft); }
section:not(.security-section) .sec-item h4 { color:var(--ink); }
section:not(.security-section) .sec-item p  { color:var(--body); }
section:not(.security-section) .sec-icon.red  { background:rgba(192,39,45,.07); border-color:rgba(192,39,45,.18); }
section:not(.security-section) .sec-icon.blue { background:rgba(27,79,216,.07); border-color:rgba(27,79,216,.18); }
section:not(.security-section) .sec-icon.red  svg { stroke:var(--red); }
section:not(.security-section) .sec-icon.blue svg { stroke:var(--blue-lt); }

/* iw (infra widget) rows on white bg */
section:not(.security-section):not(.why-section) .infra-widget .iw-row h5 { color:var(--ink); }
section:not(.security-section):not(.why-section) .infra-widget .iw-row span { color:var(--body); }

/* Enterprise band border-left accent */
.enterprise-band::before { background:linear-gradient(180deg, var(--red), var(--blue-lt)); }

/* Plan comparison table overrides */
.plans-grid .plan-btn { 
  border-color:var(--bdr); color:var(--ink);
  background:var(--bg-soft);
}
.plans-grid .plan-btn:hover { background:var(--bdr); }

/* Ensure eyebrow shows red on light sections too */
section:not(.page-hero):not(.hero) .eyebrow { color:var(--red); }

/* ══════════════════════════════════════════════════════════════════
   MOBILE NAV — hamburger + slide-in drawer
   ══════════════════════════════════════════════════════════════════ */
.nav-hamburger {
  display:none; margin-left:auto;
  width:38px; height:38px; border-radius:7px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  align-items:center; justify-content:center; cursor:pointer;
  flex-direction:column; gap:5px; flex-shrink:0;
}
.nav-hamburger span {
  display:block; width:18px; height:1.5px;
  background:var(--d-t1); border-radius:2px;
  transition:transform .22s, opacity .22s;
  transform-origin:center;
}
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Backdrop */
.nav-backdrop {
  display:none; position:fixed; inset:0; z-index:490;
  background:rgba(0,0,0,.55); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .22s;
}
.nav-backdrop.open { opacity:1; }

/* Drawer */
.nav-drawer {
  position:fixed; top:0; right:0; bottom:0; z-index:495;
  width:min(320px, 90vw);
  background:var(--bg-dark); border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%); transition:transform .28s cubic-bezier(.4,0,.2,1);
  overflow-y:auto; padding:4.5rem 1.25rem 2rem;
  display:flex; flex-direction:column; gap:.2rem;
}
.nav-drawer.open { transform:translateX(0); }

.nd-item { display:block; }
.nd-link {
  display:flex; align-items:center; justify-content:space-between;
  padding:.72rem .9rem; border-radius:8px;
  font-size:.9rem; font-weight:500; color:var(--d-t2);
  cursor:pointer; transition:.12s; border:none; background:transparent; width:100%; text-align:left;
}
.nd-link:hover, .nd-link.open { color:var(--d-t1); background:rgba(255,255,255,.05); }
.nd-link svg { width:14px; height:14px; flex-shrink:0; transition:transform .18s; color:var(--d-muted); }
.nd-link.open svg { transform:rotate(180deg); color:var(--red-lt); }

.nd-sub {
  display:none; padding:.25rem 0 .25rem .75rem; margin-bottom:.15rem;
}
.nd-sub.open { display:block; }
.nd-sub a {
  display:flex; align-items:center; gap:.65rem;
  padding:.55rem .85rem; border-radius:7px;
  font-size:.84rem; color:var(--d-muted); transition:.1s;
}
.nd-sub a:hover { color:var(--d-t1); background:rgba(255,255,255,.04); }
.nd-sub a svg { width:13px; height:13px; color:var(--red-lt); fill:none; stroke:currentColor; stroke-width:2; flex-shrink:0; }

.nd-sep2 { height:1px; background:rgba(255,255,255,.07); margin:.4rem 0; }

.nd-cta {
  display:block; margin-top:auto; padding-top:1.25rem;
  border-top:1px solid rgba(255,255,255,.07);
}
.nd-cta a {
  display:block; text-align:center;
  background:var(--red); color:#fff; font-weight:700;
  padding:.85rem; border-radius:7px; font-size:.9rem;
  margin-bottom:.6rem; transition:.13s;
}
.nd-cta a:hover { background:var(--red-h); }
.nd-cta a.ghost {
  background:rgba(255,255,255,.06); color:var(--d-t2);
  border:1px solid rgba(255,255,255,.12); font-weight:500;
  padding:.72rem; font-size:.84rem;
}
.nd-cta a.ghost:hover { background:rgba(255,255,255,.1); }

@media(max-width:900px) {
  .nav-links { display:none !important; }
  .nav-hamburger { display:flex; }
  .nav-backdrop { display:block; pointer-events:none; }
  .nav-backdrop.open { pointer-events:all; }
}

/* ══════════════════════════════════════════════════════════════════
   FAQ ACCORDION — polished interactions
   ══════════════════════════════════════════════════════════════════ */
.accordion-group { box-shadow:var(--sh-sm); }
.accordion-header {
  transition:background .12s, color .12s;
  user-select:none;
}
.accordion-header:focus-visible { outline:2px solid var(--red); outline-offset:-2px; }
.accordion-header.open { background:rgba(192,39,45,.04); }
.accordion-body {
  max-height:0; overflow:hidden;
  transition:max-height .3s cubic-bezier(.4,0,.2,1);
}
.accordion-body.open { max-height:600px; }
.accordion-body-inner {
  padding:.75rem 1.4rem 1.35rem;
  font-size:.9rem; color:var(--body); line-height:1.8;
  border-top:1px solid var(--bdr2);
}
/* Count badge on category labels */
.acc-category {
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 1.4rem; font-family:'JetBrains Mono',monospace;
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); background:rgba(192,39,45,.04);
  border-bottom:1px solid var(--bdr);
}

/* ══════════════════════════════════════════════════════════════════
   CAREERS PAGE
   ══════════════════════════════════════════════════════════════════ */
.jobs-grid { display:flex; flex-direction:column; gap:1px; background:var(--bdr); border-radius:var(--r-lg); overflow:hidden; margin-top:2rem; }
.job-card {
  background:var(--bg-card); padding:1.65rem 2rem;
  display:flex; align-items:center; gap:2rem; transition:.15s;
  cursor:pointer;
}
.job-card:hover { background:var(--bg-soft); }
.job-dept {
  font-family:'JetBrains Mono',monospace; font-size:.62rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--red); margin-bottom:.35rem;
}
.job-card h3 { font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:.25rem; letter-spacing:-.015em; }
.job-meta { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.job-tag {
  font-size:.73rem; font-weight:500; color:var(--muted);
  border:1px solid var(--bdr); border-radius:4px; padding:.18rem .6rem;
}
.job-arrow { margin-left:auto; flex-shrink:0; color:var(--red); transition:transform .15s; }
.job-card:hover .job-arrow { transform:translateX(4px); }
.job-arrow svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; }

.job-detail { display:none; }
.job-detail.open { display:block; }
.job-detail-body {
  padding:1.5rem 2rem 2rem; background:var(--bg-soft);
  border-top:1px solid var(--bdr); animation:fadeUp .2s ease;
}
.job-detail-body h4 { font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin:1.25rem 0 .5rem; }
.job-detail-body h4:first-child { margin-top:0; }
.job-detail-body p  { font-size:.88rem; color:var(--body); line-height:1.78; margin-bottom:.65rem; }
.job-detail-body ul { margin:.25rem 0 .65rem 1.2rem; list-style:disc; display:flex; flex-direction:column; gap:.3rem; }
.job-detail-body li { font-size:.88rem; color:var(--body); }
.job-apply { display:inline-flex; align-items:center; gap:.5rem; margin-top:1.25rem; background:var(--red); color:#fff; font-weight:700; padding:.75rem 1.4rem; border-radius:6px; font-size:.9rem; transition:.13s; }
.job-apply:hover { background:var(--red-h); transform:translateY(-1px); box-shadow:0 4px 14px rgba(192,39,45,.3); }

.perks-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--bdr); border-radius:var(--r-lg); overflow:hidden; margin-top:2rem; }
.perk-card { background:var(--bg-card); padding:1.5rem; transition:background .14s; }
.perk-card:hover { background:var(--bg-soft); }
.perk-num { font-family:'JetBrains Mono',monospace; font-size:1.8rem; font-weight:700; color:var(--red); letter-spacing:-.03em; display:block; margin-bottom:.5rem; }
.perk-card h4 { font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:.3rem; }
.perk-card p  { font-size:.83rem; color:var(--body); line-height:1.6; }

@media(max-width:768px) {
  .job-card { flex-wrap:wrap; }
  .perks-grid { grid-template-columns:1fr 1fr; }
}