/* ==========================================================================
   Cazar / SniperHire — Marketing Site Design System (v2 "Paper & Gold")
   From the Claude Design "Cazar Homepage Redesign" set: warm paper surfaces
   (#F5F5F1), deep navy panels (#0E1B36), gold primary (#FFC829) with deep
   gold text accents (#8A6300), Plus Jakarta Sans display/body + IBM Plex Mono
   labels. Layered on top of Bootstrap 5 (CDN).
   Class API is kept compatible with v1 (candidate pages + recipe bodies).

   v2.1 — the dark surfaces were near-black (#101114); they now carry a blue
   cast and sit a step lighter, lit by a blue bloom from the top-right. Light
   surfaces, the warm paper and the gold are unchanged.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root {
  /* Brand — gold scale (primary action #FFC829, deep gold for text on light) */
  --brand-50:  #FFF8E1;
  --brand-100: #FFF3D4;   /* icon tiles, soft panels */
  --brand-200: #FFEFC7;
  --brand-300: #FFD97A;   /* gold text on dark */
  --brand-400: #FFD65C;   /* primary hover */
  --brand-500: #FFC829;   /* primary action */
  --brand-600: #C48C00;   /* readable gold on light */
  --brand-700: #8A6300;   /* deep gold (links, accents on light) */
  --brand-800: #6E4E00;   /* link hover */
  --brand-900: #574000;

  /* Ink / neutrals — deep navy darks, warm stone lights */
  --ink-950: #070F22;     /* deepest navy: hero gradient ends */
  --ink-900: #0E1B36;     /* dark sections, panels, CTA bands */
  --ink-panel: #14233F;   /* one step up: gradient mid-stop, raised dark cards */
  --ink-850: #15151A;     /* headings, near-black cards text */
  --ink-800: #38372F;     /* strong body */
  --ink-700: #47463E;
  --ink-600: #56554D;     /* body copy */
  --ink-500: #6B6A61;     /* muted */
  --ink-400: #86857B;     /* mono labels */
  --ink-300: #98968B;     /* faint (marquee words, meta) */
  --ink-200: #DBD8D1;
  --ink-100: #EEECE6;
  --ink-50:  #FAF9F5;

  /* Accents */
  --accent: #FFC829;                 /* legacy alias → gold */
  --accent-2: oklch(.62 .15 165);    /* success green */
  --green: oklch(.62 .15 165);
  --green-soft: oklch(.78 .16 165);
  --green-on-dark: oklch(.85 .13 165);
  --warm: #ef6c4d;
  --gold: #FFC829;

  /* Blue light source — the bloom/arc that softens the dark surfaces.
     Decorative only: never a text or action colour (gold owns those). */
  --blue-500: #2F72D8;
  --blue-400: #57A0FF;
  --blue-bloom: rgba(56, 122, 224, .34);
  --blue-bloom-soft: rgba(56, 122, 224, .18);

  /* Semantic */
  --bg: #F5F5F1;                     /* paper */
  --bg-soft: #F2F1EC;                /* paper, one step deeper */
  --card: #ffffff;
  --text: var(--ink-800);
  --muted: var(--ink-500);
  --line: #E8E6E0;
  --line-strong: #E0DED7;
  --line-faint: #F1F0EB;

  /* Gradients */
  --grad-brand: linear-gradient(140deg, #FFD75E, #F0A800);            /* logo/avatar gold */
  --grad-brand-soft: linear-gradient(135deg, #FFF6DC 0%, #FFEFC7 100%);
  /* Navy ground lit by a blue bloom from the top-right (first layer paints on top). */
  --grad-ink:
    radial-gradient(95% 85% at 82% -10%, var(--blue-bloom) 0%, rgba(56,122,224,0) 62%),
    linear-gradient(135deg, #070F22 0%, #14233F 52%, #0B152B 100%);
  --grad-text: linear-gradient(100deg, #C48C00, #8A6300);

  /* Shape */
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow (navy-tinted, long and soft like the mockup) */
  --shadow-xs: 0 1px 2px rgba(10, 21, 43, .07);
  --shadow-sm: 0 12px 30px -12px rgba(10, 21, 43, .22);
  --shadow:    0 18px 40px -28px rgba(10, 21, 43, .32);
  --shadow-lg: 0 30px 60px -34px rgba(10, 21, 43, .32);
  --shadow-xl: 0 50px 90px -30px rgba(4, 10, 24, .78);    /* dark hero panels */
  --shadow-brand: 0 14px 40px -14px rgba(196, 140, 0, .55);

  /* Type */
  --font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Layout */
  --nav-h: 78px;
  --container-max: 1260px;
}

/* ------------------------------------------------------------------- Reset */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

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

h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-display);
  color: var(--ink-850);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
}
h4, h5, h6, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.02em; }
/* Headings on dark surfaces keep winning over the class rule above */
.bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink .h3, .bg-ink .h4, .bg-ink .h5, .bg-ink h4, .bg-ink h5,
.card-dark h3, .card-dark h4, .card-dark h5, .card-dark .h4, .card-dark .h5, .card-dark .h6,
.cta-band h2, .cta-band .h4 { color: #fff; }

a { color: var(--brand-700); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--brand-800); }

p { margin-bottom: 1rem; }
img, svg { max-width: 100%; }
section { position: relative; }

.container { max-width: var(--container-max); }

::selection { background: var(--brand-200); color: var(--ink-850); }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 999px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }

/* ------------------------------------------------------------- Typography */
.display-xl { font-size: clamp(2.85rem, 5.4vw, 4.85rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.01; }
.display-lg { font-size: clamp(2.35rem, 4.4vw, 3.85rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.03; }
.display-md { font-size: clamp(1.9rem, 3.4vw, 2.85rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.lead { font-size: clamp(1.05rem, 1.5vw, 1.16rem); color: var(--ink-600); font-weight: 400; line-height: 1.55; }

/* Eyebrow — IBM Plex Mono uppercase tracker (mockup: 11px / .18em / deep gold) */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono);
  font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand-700);
}
.eyebrow.center::after { content: none; }
.mono-label {
  font-family: var(--font-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-400);
}
.mono-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-400); }

.text-gradient {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.text-muted-2 { color: var(--muted) !important; }
.fw-800 { font-weight: 800; }

/* --------------------------------------------------------------- Sections */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }
.section-sm { padding: clamp(3rem, 5vw, 4.5rem) 0; }
.section-tight { padding: clamp(2.5rem, 4vw, 3.5rem) 0; }
.bg-soft { background: var(--bg-soft); }
.bg-brand-soft { background: var(--grad-brand-soft); }
/* Full-width dark section: flat navy lifted by a blue bloom in the top-right. */
.bg-ink {
  background: radial-gradient(85% 65% at 88% -5%, var(--blue-bloom-soft), rgba(56,122,224,0) 62%), var(--ink-900);
  color: rgba(255,255,255,.62);
}
.bg-ink h1,.bg-ink h2,.bg-ink h3,.bg-ink h4,.bg-ink h5 { color: #fff; }
.bg-ink .lead { color: rgba(255,255,255,.62); }
.bg-grad { background: var(--grad-ink); color: rgba(255,255,255,.7); }
.bg-grad h1,.bg-grad h2,.bg-grad h3 { color: #fff; }
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }

/* Decorative background motifs */
.aura { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .8; z-index: 0; pointer-events: none; }
.aura-brand { background: radial-gradient(circle, rgba(255,200,41,.22), transparent 70%); }
.aura-accent { background: radial-gradient(circle, rgba(255,200,41,.14), transparent 70%); }
.aura-warm { background: radial-gradient(circle, rgba(240,168,0,.18), transparent 70%); }
.dotgrid {
  background-image: radial-gradient(rgba(17,17,20,.12) 1px, transparent 1px);
  background-size: 22px 22px;
}
.gridlines {
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 20%, #000, transparent);
  mask-image: radial-gradient(70% 55% at 50% 20%, #000, transparent);
}
.has-motif > .container { position: relative; z-index: 2; }

/* ---------------------------------------------------------------- Buttons */
.btn {
  font-family: var(--font-display);
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: .8rem 1.7rem;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .25s ease, background .25s ease, color .2s ease, border-color .2s ease;
  display: inline-flex; align-items: center; gap: .55rem;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-lg { padding: 1rem 2.1rem; font-size: 1rem; }
.btn-sm { padding: .55rem 1.15rem; font-size: .9rem; }

/* Primary — gold pill, near-black text */
.btn-brand { background: var(--brand-500); color: #14140F; box-shadow: var(--shadow-brand); }
.btn-brand:hover { background: var(--brand-400); color: #14140F; transform: translateY(-1px); box-shadow: 0 20px 46px -14px rgba(196,140,0,.6); }

.btn-ink { background: var(--ink-850); color: #fff; }
.btn-ink:hover { background: var(--brand-500); color: #14140F; transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-outline {
  background: transparent; color: var(--ink-850);
  border-color: var(--line-strong);
}
.btn-outline:hover { border-color: var(--ink-850); color: var(--ink-850); transform: translateY(-1px); }
/* On dark surfaces (nav / heroes / CTA bands) the outline button goes light */
.site-nav .btn-outline, .bg-ink .btn-outline, .bg-grad .btn-outline, .hero .btn-outline, .page-hero .btn-outline, .cta-band .btn-outline {
  color: rgba(255,255,255,.94); border-color: rgba(255,255,255,.5);
}
.site-nav .btn-outline:hover, .bg-ink .btn-outline:hover, .bg-grad .btn-outline:hover, .hero .btn-outline:hover, .page-hero .btn-outline:hover, .cta-band .btn-outline:hover {
  color: #fff; border-color: rgba(255,255,255,.8); background: rgba(255,255,255,.05);
}

.btn-white { background: #fff; color: var(--ink-850); }
.btn-white:hover { color: var(--brand-700); transform: translateY(-1px); box-shadow: var(--shadow); }

.btn-ghost { background: transparent; color: var(--ink-700); }
.btn-ghost:hover { color: var(--ink-850); background: var(--bg-soft); }
.site-nav .btn-ghost, .mobile-panel .btn-ghost { color: rgba(255,255,255,.78); }
.mobile-panel .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); }
.site-nav .btn-ghost:hover { color: #fff; background: rgba(255,255,255,.08); }

.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.3); }
.btn-ghost-light:hover { background: rgba(255,255,255,.2); color: #fff; }

.btn-link-arrow {
  font-family: var(--font-display); font-weight: 600; color: var(--brand-700);
  display: inline-flex; align-items: center; gap: .4rem; padding: 0;
}
.btn-link-arrow i { transition: transform .2s ease; }
.btn-link-arrow:hover { color: var(--brand-800); }
.btn-link-arrow:hover i { transform: translateX(4px); }
[dir="rtl"] .btn-link-arrow:hover i { transform: translateX(-4px); }

/* ----------------------------------------------------------------- Navbar */
/* Fixed dark glass bar (navy tint + blur, shrinks 78 → 60px). */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1030;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(8,16,36,.62);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,0);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, height .3s cubic-bezier(.4,0,.2,1);
}
.site-nav.scrolled {
  height: 60px;
  background: rgba(8,16,36,.88);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 14px 40px -24px rgba(4,10,24,.85);
}
.site-nav .container { display: flex; align-items: center; gap: 1.2rem; width: 100%; }
.brand-logo { display: inline-flex; align-items: center; gap: .6rem; height: 44px; }
.brand-logo .brand-mark { height: 38px; width: 38px; flex: none; }
.brand-logo img { height: 38px; width: auto; }
/* Dark chrome (nav / mobile panel / obz topbar) uses /img/logo-dark.png — the
   original yellow mark with only the wordmark lifted to white. Light surfaces
   (footer, candidate pages) use the raw /img/logo.png. No CSS filters. */
.brand-word { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; color: #fff; line-height: 1; }
.brand-logo.on-dark .brand-word { color: #fff; }
.site-footer .brand-word { color: var(--ink-850); }
.brand-sub { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); font-family: var(--font-mono); font-weight: 500; margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: .15rem; margin-left: .5rem; list-style: none; padding: 0; margin-bottom: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  font-family: var(--font-display); font-weight: 500; font-size: .92rem;
  color: rgba(255,255,255,.92); padding: .55rem .9rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .35rem;
  white-space: nowrap;
}
.nav-links > li > a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav-links .caret { font-size: .68rem; opacity: .7; transition: transform .2s ease; }
.nav-links > li:hover .caret { transform: rotate(180deg); }

/* Dropdown / mega — solid dark sheet. NOT translucent: the parent .site-nav
   already has backdrop-filter, which makes descendants' backdrop-filters
   no-ops, so a glassy drop would just ghost the page content through. */
.nav-drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--ink-panel); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(4,10,24,.75); padding: .7rem; min-width: 280px;
  opacity: 0; visibility: hidden; transition: all .22s cubic-bezier(.2,.8,.2,1); z-index: 50;
}
.nav-drop.mega { min-width: 580px; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.nav-links > li:hover .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-drop a {
  display: flex; gap: .8rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 12px;
  color: rgba(255,255,255,.86);
}
.nav-drop a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-drop .di {
  flex: none; width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,200,41,.16); color: var(--brand-500); font-size: .95rem;
}
.nav-drop .dt { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: #fff; display: block; line-height: 1.25; }
.nav-drop .dd { font-size: .78rem; color: rgba(255,255,255,.5); line-height: 1.4; }
/* Promo tile inside a mega menu */
.nav-drop .drop-promo {
  display: flex; flex-direction: column; justify-content: center; gap: .35rem; padding: .9rem 1rem;
  border-radius: 12px; background: linear-gradient(135deg, rgba(196,140,0,.35), rgba(196,140,0,.12));
  border: 1px solid rgba(255,200,41,.3);
}
.nav-drop .drop-promo:hover { border-color: rgba(255,200,41,.6); background: linear-gradient(135deg, rgba(196,140,0,.35), rgba(196,140,0,.12)); }
.nav-drop .drop-promo .pk { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-300); }
.nav-drop .drop-promo .pt { font-size: .9rem; font-weight: 600; color: #fff; }

.nav-cta { margin-left: auto; display: flex; align-items: center; gap: .5rem; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: #fff; padding: .25rem .4rem; }

/* Mobile menu — dark sheet */
.mobile-menu {
  /* The panel colour is read here, on the backdrop, because .mobile-panel
     remaps --ink-900 to white for the light-ink buttons it contains. */
  --m-panel-bg: var(--ink-900);
  position: fixed; inset: 0; z-index: 1040; background: rgba(4,10,24,.55); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.mobile-menu.open { opacity: 1; visibility: visible; }
.mobile-panel {
  position: absolute; top: 0; right: 0; height: 100%; width: min(380px, 86vw);
  background: var(--m-panel-bg); color: rgba(255,255,255,.85); padding: 1.25rem; overflow-y: auto;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
[dir="rtl"] .mobile-panel { right: auto; left: 0; transform: translateX(-100%); }
.mobile-menu.open .mobile-panel { transform: translateX(0); }
.mobile-panel .m-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.m-acc { border-bottom: 1px solid rgba(255,255,255,.08); }
.m-acc > button {
  width: 100%; background: none; border: 0; text-align: start; padding: .9rem .25rem;
  font-family: var(--font-display); font-weight: 600; color: #fff; font-size: 1.02rem;
  display: flex; align-items: center; justify-content: space-between;
}
.m-acc .m-sub { display: none; padding: 0 0 .6rem .25rem; }
.m-acc.open .m-sub { display: block; }
.m-acc .m-sub a { display: block; padding: .45rem 0; color: rgba(255,255,255,.6); font-size: .95rem; }
.m-acc .m-sub a:hover { color: #fff; }
.m-acc > button i { transition: transform .2s ease; }
.m-acc.open > button i { transform: rotate(180deg); }
/* Plain links styled inline in markup with the old light-ink vars still read fine:
   remap the two vars they use inside the dark panel. */
.mobile-panel { --ink-900: #ffffff; --ink-850: #ffffff; }

/* ------------------------------------------------------------------- Hero */
/* Every page opens on the navy gradient (blue bloom top-right) with a gold
   radial glow; the tall .hero also gets the blue arc sweep. */
.hero, .page-hero {
  position: relative;
  background: var(--grad-ink);
  color: rgba(255,255,255,.94);
  overflow: hidden;
  isolation: isolate;
}
/* Content always sits above the decorative layers below. */
.hero > .container, .page-hero > .container { position: relative; z-index: 2; }
/* Blue arc sweep — a thin lit ring off the top-right corner, faded out
   towards the bottom-left so it reads as a light edge, not a circle. */
.hero::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: -65%; top: -23%; width: 92%; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid rgba(87,160,255,.55);
  box-shadow: 0 0 80px 4px var(--blue-bloom-soft), inset 0 0 110px var(--blue-bloom-soft);
  /* Only the lower-left sweep of the ring falls inside the hero — keep that
     lit and fade the rest out (angle points at the part we keep). */
  -webkit-mask-image: linear-gradient(20deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 68%);
  mask-image: linear-gradient(20deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 68%);
}
/* Narrower than xl the centred hero copy reaches the sweep — drop it there. */
@media (max-width: 1199.98px) { .hero::after { display: none; } }
[dir="rtl"] .hero::after {
  right: auto; left: -65%;
  -webkit-mask-image: linear-gradient(340deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 68%);
  mask-image: linear-gradient(340deg, #000 0%, rgba(0,0,0,.9) 32%, transparent 68%);
}
.hero { padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem)); padding-bottom: clamp(3rem, 7vw, 6rem); }
.page-hero { padding-top: calc(var(--nav-h) + clamp(2.4rem, 5vw, 4.2rem)); padding-bottom: clamp(2.4rem, 5vw, 4rem); }
/* An explicit light background utility on the same element must not win. */
.hero.bg-soft, .page-hero.bg-soft, .hero.bg-brand-soft, .page-hero.bg-brand-soft { background: var(--grad-ink); }
.hero h1, .hero h2, .page-hero h1, .page-hero h2, .hero .display-xl, .page-hero .display-lg { color: #fff; }
.hero .lead, .page-hero .lead { color: rgba(255,255,255,.94); }
.hero .eyebrow, .page-hero .eyebrow { color: #fff; }
.hero p, .page-hero p { color: rgba(255,255,255,.8); }
/* Gold glow blob for hero sections (positioned inline per page) */
.hero-glow {
  position: absolute; pointer-events: none;
  width: 1100px; height: 640px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,200,41,.20), rgba(255,200,41,0) 70%);
}
.hero-pill {
  display: inline-flex; align-items: center; gap: .6rem; padding: .42rem .5rem .42rem .9rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius-pill);
  font-size: .84rem; font-weight: 500; color: #fff; margin-bottom: 1.5rem;
}
.hero-pill .tag { background: rgba(255,255,255,.14); color: #fff; font-weight: 500; font-size: .7rem; padding: .22rem .6rem; border-radius: 999px; font-family: var(--font-mono); }
.hero-pill .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green-soft); animation: czPulse 2.4s ease-in-out infinite; }
.hero-footnote { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; color: rgba(255,255,255,.92); }

.page-hero .breadcrumb-nav, .page-hero .breadcrumb-nav a { color: rgba(255,255,255,.55); }
.page-hero .breadcrumb-nav a:hover { color: #fff; }

/* Stat tile grid — 1px-gap cells over a dark surface (mockup hero right rail) */
.stat-tiles { display: grid; gap: 1px; background: rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden; }
.stat-tiles.cols-2 { grid-template-columns: 1fr 1fr; }
.stat-tiles.cols-3 { grid-template-columns: repeat(3, 1fr); }
.stat-tiles.cols-4 { grid-template-columns: repeat(4, 1fr); }
.stat-tiles .tile { background: rgba(255,255,255,.09); padding: 1.3rem 1.4rem; }
.stat-tiles .tile .v { font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; color: #fff; line-height: 1.1; }
.stat-tiles .tile .k { margin-top: .35rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9); }
/* Same tiles inside a solid #101114 panel */
.bg-ink .stat-tiles .tile, .stat-tiles.on-panel .tile { background: var(--ink-900); }

/* Browser-chrome product frame (dark app mockups) */
.browser-frame {
  border-radius: 20px; border: 1px solid rgba(255,255,255,.32); background: var(--ink-900);
  box-shadow: var(--shadow-xl); overflow: hidden; position: relative;
}
.browser-frame .bf-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
.browser-frame .bf-dots { display: flex; gap: 6px; }
.browser-frame .bf-dots span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.1); display: block; }
.browser-frame .bf-url {
  flex: 1; max-width: 340px; margin: 0 auto; text-align: center;
  font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.05); border-radius: 999px; padding: 6px 12px;
}
.browser-frame .bf-avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--grad-brand); display: block; }

/* Floating stat card (over hero panels) */
.float-card {
  position: absolute; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-radius: 14px; background: #fff; box-shadow: 0 24px 48px -16px rgba(10,21,43,.45);
  animation: czFloat 5.6s ease-in-out infinite alternate;
}
.float-card .fv { font-size: 1.45rem; font-weight: 800; letter-spacing: -.03em; color: var(--brand-700); line-height: 1; }
.float-card .fv.ink { color: var(--ink-850); }
.float-card .fk { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-500); line-height: 1.4; }
.float-card.dark { background: var(--ink-900); box-shadow: 0 22px 44px -18px rgba(10,21,43,.5); }
.float-card.dark .fv { color: #fff; }
.float-card.dark .fk { color: rgba(255,255,255,.5); }

/* -------------------------------------------------------------- Cards/UI */
.card-soft {
  background: var(--card); border: 1px solid transparent; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); transition: transform .25s ease, box-shadow .25s ease;
  height: 100%;
}
.card-soft:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
:not(.bento) > .card-soft:has(~ .card-soft),
:not(.bento) > .card-soft ~ .card-soft { height: auto; }
.card-pad { padding: clamp(1.5rem, 2.4vw, 2rem); }
/* Dark feature card (one per grid in the mockup) */
.card-dark { background: var(--ink-900); color: rgba(255,255,255,.62); border: 0; }
.card-dark h3, .card-dark h4, .card-dark h5 { color: #fff; }
.card-dark p { color: rgba(255,255,255,.62); }

.feature-icon {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1rem; color: var(--brand-600); background: var(--brand-100);
  border: 0; margin-bottom: 1.1rem;
}
.feature-icon.ink { background: rgba(255,200,41,.2); color: var(--brand-500); }
.feature-icon.solid { background: var(--grad-brand); color: #14140F; box-shadow: var(--shadow-brand); }

.glass {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(12px); border-radius: var(--radius-lg);
}

/* Bento grid */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.25rem; }
.bento > * { border-radius: var(--radius-lg); }
.bento .b-3 { grid-column: span 3; }
.bento .b-2 { grid-column: span 2; }
.bento .b-4 { grid-column: span 4; }
.bento .b-6 { grid-column: span 6; }

/* Stat */
.stat-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.4vw, 4rem); line-height: 1; letter-spacing: -.045em; color: var(--brand-700); }
.stat-num.grad { background: none; -webkit-text-fill-color: currentColor; color: var(--brand-700); }
.stat-num.ink { color: var(--ink-850); }
.stat-label { color: var(--muted); font-size: .9rem; }
/* Divided stat band (mockup #impact): columns split by hairlines */
.stat-divided { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.stat-divided > div { padding: 0 3rem; border-inline-start: 1px solid var(--line); }
.stat-divided > div:first-child { padding-inline-start: 0; border-inline-start: 0; }

/* Pills / badges */
.chip {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem; border-radius: 999px;
  background: var(--bg-soft); border: 0; font-size: .82rem; font-weight: 500; color: var(--ink-800);
}
.chip .bi { color: var(--brand-600); }
.chip::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--brand-500); }
.chip.plain::before, .chip.brand::before { content: none; }
.chip.brand { background: var(--brand-100); color: var(--brand-700); }
.badge-soft { background: var(--brand-100); color: var(--brand-700); font-weight: 600; padding: .3rem .7rem; border-radius: 8px; font-size: .78rem; }

/* List with ticks */
.ticklist { list-style: none; padding: 0; margin: 0; }
.ticklist li { display: flex; gap: .7rem; align-items: flex-start; padding: .4rem 0; color: var(--ink-800); }
.ticklist li i { color: var(--brand-600); flex: none; margin-top: .2rem; }
.ticklist.light li { color: rgba(255,255,255,.82); }
.ticklist.light li i { color: var(--green-on-dark); }

/* Step / process */
.step-num {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-mono); font-weight: 500; color: #14140F; background: var(--grad-brand);
  box-shadow: var(--shadow-brand); flex: none;
}
/* Big ghost stage number (mockup "01/02" markers) */
.stage-num { font-family: var(--font-mono); font-size: 2.6rem; font-weight: 500; letter-spacing: -.03em; color: var(--ink-200); line-height: 1; }

/* Logo marquee */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 4rem; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee .logo-word {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink-300);
  white-space: nowrap; letter-spacing: -.02em; transition: color .2s ease; display: inline-flex; align-items: center; gap: .5rem;
}
.marquee .logo-word:hover { color: var(--brand-700); }
.marquee .logo-word i { font-size: 1.05rem; opacity: .6; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Testimonial */
.quote-card { background: var(--card); border: 0; border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow); height: 100%; display: flex; flex-direction: column; gap: 1.4rem; }
.quote-card .stars { color: var(--gold); margin-bottom: 0; }
.quote-card blockquote { font-size: 1.08rem; color: var(--ink-850); font-weight: 500; line-height: 1.5; letter-spacing: -.01em; margin: 0; }
.quote-card.dark { background: var(--ink-900); }
.quote-card.dark blockquote { color: #fff; }
.quote-card.dark .quote-who { color: rgba(255,255,255,.55); }
.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--grad-brand); color: #14140F; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.avatar.lg { width: 60px; height: 60px; font-size: 1.2rem; }
.avatar.muted { background: var(--ink-100); color: var(--ink-500); }

/* CTA band — navy rounded panel: gold glow from the top, blue bloom below it */
.cta-band {
  background: var(--ink-900); border-radius: 26px; padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem);
  position: relative; overflow: hidden; color: rgba(255,255,255,.62);
  isolation: isolate;
}
.cta-band::before {
  content: ""; position: absolute; left: 50%; top: -240px; width: 900px; height: 500px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(255,200,41,.28), rgba(255,200,41,0) 70%);
  pointer-events: none;
}
.cta-band::after {
  content: ""; position: absolute; right: -140px; bottom: -260px; width: 720px; height: 480px;
  background: radial-gradient(50% 50% at 50% 50%, var(--blue-bloom), rgba(56,122,224,0) 70%);
  pointer-events: none; z-index: -1;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: var(--brand-300); }

/* Accordion — borderless rows divided by hairlines (mockup FAQ) */
.acc-item { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin-bottom: 0; background: transparent; overflow: hidden; }
.acc-item.open { box-shadow: none; }
.acc-q { width: 100%; background: none; border: 0; text-align: start; padding: 1.5rem .1rem; font-family: var(--font-display); font-weight: 700; color: var(--ink-850); font-size: 1.08rem; letter-spacing: -.02em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.acc-q i {
  color: var(--brand-700); transition: transform .25s ease; flex: none;
  width: 26px; height: 26px; border-radius: 999px; background: var(--brand-100);
  display: grid; place-items: center; font-size: .85rem;
}
.acc-item.open .acc-q i { transform: rotate(45deg); }
.acc-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.acc-a .acc-a-inner { padding: 0 .1rem 1.4rem; color: var(--ink-600); max-width: 640px; }

/* Tabs */
.tab-btns { display: inline-flex; flex-wrap: wrap; gap: .35rem; border: 1px solid var(--line); padding: .3rem; border-radius: var(--radius-pill); background: var(--bg-soft); }
.tab-btn { border: 1px solid transparent; background: none; font-family: var(--font-display); font-weight: 600; font-size: .88rem; color: var(--ink-600); padding: .55rem 1.15rem; border-radius: 999px; transition: all .2s; }
.tab-btn.active { background: var(--ink-850); color: #fff; box-shadow: var(--shadow-xs); }
/* Tabs sitting on a dark surface */
.bg-ink .tab-btns, .bg-grad .tab-btns, .hero .tab-btns { background: transparent; border: 0; padding: 0; gap: .5rem; }
.bg-ink .tab-btn, .bg-grad .tab-btn, .hero .tab-btn { color: #fff; background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.34); }
.bg-ink .tab-btn.active, .bg-grad .tab-btn.active, .hero .tab-btn.active { background: #fff; color: var(--ink-850); border-color: #fff; }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .4s ease; }

/* Stage rail (homepage lifecycle selector): sliding highlight card */
.stage-rail { position: relative; }
.stage-rail .rail-glider {
  position: absolute; left: 0; right: 0; top: 0; height: 74px; border-radius: 14px;
  background: #fff; box-shadow: 0 12px 30px -12px rgba(17,17,20,.22);
  transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.stage-rail .rail-bar {
  position: absolute; inset-inline-start: 0; top: 0; width: 3px; height: 74px; border-radius: 999px;
  background: var(--brand-500); transition: transform .42s cubic-bezier(.4,0,.2,1);
}
.stage-rail .rail-item { position: relative; height: 74px; display: flex; align-items: center; gap: 1rem; padding: 0 1.15rem; cursor: pointer; }
.stage-rail .rail-item .rn { font-family: var(--font-mono); font-size: .7rem; color: var(--ink-300); width: 18px; flex: none; }
.stage-rail .rail-item .rt { display: block; font-size: 1rem; font-weight: 700; color: var(--ink-850); line-height: 1.2; }
.stage-rail .rail-item .rd { display: block; font-size: .82rem; color: var(--ink-500); margin-top: 2px; }

/* Sticky in-page chip nav (Solutions stages, Resources hub) */
.chip-nav-wrap {
  position: sticky; top: var(--nav-h); z-index: 40;
  background: rgba(245,245,241,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.chip-nav { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .85rem 0; }
.chip-nav a {
  padding: .55rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 600;
  color: var(--ink-600); background: transparent; transition: all .25s ease; white-space: nowrap;
}
.chip-nav a:hover { color: var(--ink-850); }
.chip-nav a.active { color: #fff; background: var(--ink-850); }
.chip-nav a.active:hover { color: #fff; }
/* Chips over a dark hero */
.hero .chip-nav a, .page-hero .chip-nav a { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.34); color: #fff; }
.hero .chip-nav a:hover, .page-hero .chip-nav a:hover { background: rgba(255,255,255,.16); }

/* Filter chips (Clients sector filter) */
.filter-chip {
  padding: .55rem 1rem; border-radius: 999px; font-size: .84rem; font-weight: 600; cursor: pointer;
  color: var(--ink-800); background: #fff; border: 1px solid var(--line); transition: all .2s ease;
}
.filter-chip.active { color: #fff; background: var(--ink-850); border-color: var(--ink-850); }

/* Comparison table rows (Resources "challenges" + Pricing compare) */
.compare-card { border-radius: var(--radius-xl); background: #fff; overflow: hidden; box-shadow: var(--shadow-lg); }
.compare-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line-faint); }
.compare-row:last-child { border-bottom: 0; }
.compare-row > div { padding: 1.5rem 2rem; font-size: .97rem; line-height: 1.55; color: var(--ink-600); }
.compare-row > div + div { color: var(--ink-850); font-weight: 500; background: var(--ink-50); }
.compare-row.head > div { padding: 1.3rem 2rem 1.2rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-400); font-weight: 500; }
.compare-row.head > div + div { color: var(--brand-700); }

/* Timeline (Company story) */
.timeline { margin-inline-start: 4px; }
.timeline .t-row { display: grid; grid-template-columns: 92px 1fr; gap: 1.5rem; padding: 0 0 1.75rem 1.75rem; border-inline-start: 2px solid var(--line); }
.timeline .t-row:last-child { padding-bottom: 0; border-inline-start-color: var(--brand-700); }
.timeline .t-year { font-family: var(--font-mono); font-size: .82rem; color: var(--brand-700); }
.timeline .t-what { font-size: .97rem; line-height: 1.55; color: var(--ink-800); }

/* Row list (insights / jobs / news line items) */
.row-list a, .row-list .row-item { display: flex; align-items: center; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line-faint); color: var(--ink-850); }
.row-list a:last-child, .row-list .row-item:last-child { border-bottom: 0; }
.row-list a:hover .rl-title { color: var(--brand-700); }
.row-list .rl-date { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-300); width: 92px; flex: none; }
.row-list .rl-title { flex: 1; font-size: 1.05rem; font-weight: 600; letter-spacing: -.02em; transition: color .2s ease; }
.row-list .rl-meta { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-400); white-space: nowrap; }

/* Pricing */
.price-card { background: #fff; border: 0; border-radius: 20px; padding: 2.25rem; height: 100%; position: relative; box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s; }
.price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.price-card.featured { background: var(--ink-900); color: rgba(255,255,255,.82); box-shadow: 0 34px 70px -30px rgba(10,21,43,.6); }
.price-card.featured h3, .price-card.featured .price { color: #fff; }
.price-card.featured .ticklist li { color: rgba(255,255,255,.82); }
.price-card.featured .ticklist li i { color: var(--green-on-dark); }
.price .amount { font-family: var(--font-display); font-weight: 800; font-size: 2.75rem; letter-spacing: -.04em; line-height: 1; }
.price-flag {
  position: absolute; top: 1.4rem; inset-inline-end: 1.4rem; transform: none; left: auto;
  background: rgba(255,200,41,.2); color: var(--brand-300);
  font-size: .62rem; font-weight: 500; font-family: var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  padding: .4rem .7rem; border-radius: 999px; box-shadow: none; white-space: nowrap;
}
.price-card:not(.featured) .price-flag { background: var(--brand-100); color: var(--brand-700); }

/* Forms */
.form-control, .form-select {
  border-radius: 10px; border: 1px solid var(--line-strong); padding: .8rem 1rem; font-size: .97rem;
  background: #FCFBF8; color: var(--ink-850); transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus { border-color: var(--brand-700); box-shadow: 0 0 0 4px rgba(196,140,0,.12); background: #fff; }
.form-label { font-family: var(--font-display); font-weight: 600; font-size: .82rem; color: var(--ink-600); margin-bottom: .45rem; }
.form-control::placeholder { color: var(--ink-300); }
.input-card { background: #fff; border: 0; border-radius: 22px; box-shadow: 0 34px 70px -40px rgba(17,17,20,.35); padding: clamp(1.7rem, 3vw, 2.75rem); }

/* ----------------------------------------------------------------- Footer */
/* Light paper footer (mockup): hairline top border, mono column labels. */
.site-footer { background: var(--bg); color: var(--ink-500); padding-top: 0; margin-top: clamp(2rem, 5vw, 3.5rem); }
.site-footer > .container { border-top: 1px solid var(--line); padding-top: clamp(2.75rem, 5vw, 3.5rem); }
.site-footer h5 {
  color: var(--ink-400); font-family: var(--font-mono); font-weight: 500;
  font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1.1rem;
}
.site-footer a { color: var(--ink-700); font-size: .92rem; display: inline-block; padding: .28rem 0; }
.site-footer a:hover { color: var(--brand-700); }
.site-footer .foot-links a { display: block; }
.footer-brand p { color: var(--ink-500); font-size: .92rem; line-height: 1.6; }
.foot-social { display: flex; gap: .6rem; }
.foot-social a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ink-100); color: var(--ink-700); padding: 0; transition: background .2s, color .2s, transform .2s; }
.foot-social a:hover { background: var(--brand-500); color: #14140F; transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid var(--line); margin-top: 2.75rem; padding: 1.4rem 0 1.5rem; }
.footer-bottom, .footer-bottom a { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-400); }
.footer-bottom a:hover { color: var(--brand-700); }

/* Breadcrumb (light context fallback) */
.breadcrumb-nav { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.breadcrumb-nav a { color: var(--muted); }
.breadcrumb-nav a:hover { color: var(--brand-700); }

/* Misc utilities */
.divider { height: 1px; background: var(--line); border: 0; }
.rounded-img { border-radius: var(--radius-lg); box-shadow: var(--shadow); border: 1px solid var(--line); }
.ratio-shadow { filter: drop-shadow(0 30px 50px rgba(10,21,43,.25)); }
.link-cover::after { content: ""; position: absolute; inset: 0; }
.icon-bullet { width: 30px; height: 30px; border-radius: 9px; background: var(--brand-100); color: var(--brand-600); display: grid; place-items: center; flex: none; }
.kicker-line { width: 48px; height: 4px; border-radius: 4px; background: var(--grad-brand); }
.text-balance { text-wrap: balance; }
.top-rule { border-top: 2px solid var(--line); padding-top: 1.5rem; }
.top-rule.accent { border-top-color: var(--brand-700); }

/* ------------------------------------------------------------- Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%,100% { transform: translateY(6px); } 50% { transform: translateY(-6px); } }
@keyframes czFloat { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
@keyframes czPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes czBar { 0% { transform: scaleX(0); } 26%, 86% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes czScan { 0% { transform: translateY(-60%); opacity: 0; } 25% { opacity: .55; } 100% { transform: translateY(320%); opacity: 0; } }
.float { animation: czFloat 5.6s ease-in-out infinite alternate; }
.float-slow { animation: czFloat 8s ease-in-out infinite alternate; }
.pulse-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--green-soft); animation: czPulse 2s ease-in-out infinite; display: inline-block; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; } .reveal.d4 { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  .float, .float-slow, .float-card, .marquee-track { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------- Responsive */
@media (max-width: 1099.98px) {
  .nav-links, .nav-cta .desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 991.98px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento .b-3, .bento .b-4, .bento .b-6 { grid-column: span 2; }
  .bento .b-2 { grid-column: span 1; }
  .stat-tiles.cols-4 { grid-template-columns: 1fr 1fr; }
  .stat-divided { grid-template-columns: 1fr; gap: 2rem; }
  .stat-divided > div { padding: 0; border-inline-start: 0; }
  .compare-row { grid-template-columns: 1fr; }
  .compare-row > div { padding: 1.1rem 1.5rem; }
  .float-card { display: none; }
}
@media (max-width: 575.98px) {
  .bento { grid-template-columns: 1fr; }
  .bento .b-2, .bento .b-3, .bento .b-4, .bento .b-6 { grid-column: span 1; }
  .btn-lg { padding: .9rem 1.5rem; }
  .display-xl { font-size: clamp(2.1rem, 8vw, 3rem); letter-spacing: -.03em; }
  .nav-cta .btn-brand { display: none; }
  .hero-pill { font-size: .78rem; flex-wrap: wrap; }
  .cta-band { padding: 2.2rem 1.3rem; }
  .stat-tiles.cols-2, .stat-tiles.cols-3, .stat-tiles.cols-4 { grid-template-columns: 1fr 1fr; }
  .row-list .rl-date { display: none; }
}

/* ===== Accessibility & i18n ===== */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 2000;
  background: var(--ink-900); color: #fff; padding: .6rem 1rem;
  border-radius: 10px; font-weight: 600; text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 12px; outline: 3px solid var(--brand-500); }

/* Keyboard access for the hover mega-menus */
.nav-links > li:focus-within .nav-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-links > li:focus-within .caret { transform: rotate(180deg); }

.site-nav a:focus-visible, .nav-drop a:focus-visible, .btn:focus-visible,
.lang-switch:focus-visible, .mobile-panel a:focus-visible, .m-acc button:focus-visible {
  outline: 3px solid var(--brand-500); outline-offset: 2px; border-radius: 8px;
}

.lang-switch { white-space: nowrap; font-family: var(--font-mono); font-size: .78rem; }
.lang-switch .bi { font-size: .95em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}