/* ─────────────────────────────────────────────────────────────
   Design System — PrathmIQ
   CSS custom properties, base reset, typography
   ───────────────────────────────────────────────────────────── */

/* Fonts: self-hosted via assets/css/fonts.css (bundled into
   shared-bundle.css alongside this file), not Google Fonts — migrated off
   fonts.googleapis.com/fonts.gstatic.com entirely in commit 2001d41. Not
   @import-ed here for the same reason it never was: @import blocks
   parallel download until this file itself has loaded, and every page
   already carries its own fonts.css <link>. */

/* ── Colour tokens — dark mode defaults ─────────────────────── */
:root {
  --bg:       #0A0E17;
  --bg2:      #0E1320;
  --bg3:      #141A28;
  --bg4:      #1A2130;
  --text:     #EAEDF5;
  --text2:    #C3C9D6;
  --text3:    #858DA1;
  --muted2:   #5D667B;
  --iq:       #CBA24A;
  --iq2:      #E7C878;
  --iq-dim:   rgba(203,162,74,0.10);
  --gold-d:   #7A6128;
  /* Dedicated button-background token, deliberately NOT reusing --iq:
     --iq is also used as foreground text color against the page
     background (needs to pass contrast against --bg/--bg2), while this
     is a background color with fixed black (#0a0a0a) text on top of it
     (needs black to pass contrast against IT). The two roles need
     different real values once the light theme darkens --iq for its own
     role -- see the light-theme override below for why. */
  --btn-bg:   var(--iq);
  --border:   #242C3E;
  --border2:  #1C2333;
  --danger:   #dc2626;
  --crit:     #E5544B;
  --crit-dim: rgba(229,84,75,0.12);
  --high:     #EF8B3C;
  --high-dim: rgba(239,139,60,0.12);
  --med:      #5B8DEF;
  --med-dim:  rgba(91,141,239,0.12);
  --low:      #6E7789;
  --low-dim:  rgba(110,119,137,0.12);
  --ok:       #4FB477;
  --blue:     #5B8DEF;
  --blue-dim: rgba(91,141,239,0.10);
  --cg:       rgba(255,255,255,0.05);
  --ct:       #555;
  --max:      1160px;
}

/* ── Light mode overrides ───────────────────────────────────── */
[data-theme="light"] {
  --bg:       #EEF0F6;
  --bg2:      #F6F8FC;
  --bg3:      #E4E7F0;
  --bg4:      #D8DCE8;
  --text:     #0D111E;
  --text2:    #2C3245;
  --text3:    #5A6278;
  --muted2:   #8890A4;
  /* Contrast fix (2026-10): the dark-theme gold (#CBA24A/#E7C878) was
     reused verbatim here and never re-tuned for the light background --
     confirmed via a real axe-core audit (not guessed) that every gold-on-
     light-bg text combo failed WCAG AA (ratios ~2.0-2.2 where 3:1-4.5:1 is
     required depending on text size), across every public page. Same hue,
     darkened until it actually passes: --iq (small/normal text, e.g.
     eyebrow labels, links) needs >=4.5:1 and gets 4.60:1 against the
     lightest real background (#F6F8FC); --iq2 (large/bold text, e.g.
     stat numbers) needs >=3:1 and gets 3.53:1. Re-verified with axe-core
     directly (not just the math above) and bumped --iq one step darker
     again (to #886524) since the first value measured 4.28:1 in the real
     browser against the real #EEF0F6 nav background, short of 4.5. */
  --iq:       #886524;
  --iq2:      #A67D2E;
  --iq-dim:   rgba(203,162,74,0.09);
  --btn-bg:   #CBA24A;
  --border:   #C2C8D8;
  --border2:  #CBD1E1;
  --danger:   #dc2626;
  --crit-dim: rgba(229,84,75,0.09);
  --high-dim: rgba(239,139,60,0.09);
  --med-dim:  rgba(91,141,239,0.09);
  --low-dim:  rgba(110,119,137,0.09);
  --blue-dim: rgba(91,141,239,0.09);
  --cg:       rgba(0,0,0,0.06);
  --ct:       #888;
}

/* ── Base reset ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background .25s, color .25s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
  padding-top: 60px; /* nav height */
}

/* ── Skip-to-content link — visually hidden until keyboard-focused ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  z-index: 9999;
  background: var(--btn-bg);
  color: var(--bg);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 6px;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 12px;
}

/* ── Visible keyboard focus — browser default outline is unstyled
   elsewhere in this file, so give every interactive element one ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--iq);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* ── Layout utilities ───────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Shared button styles ───────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: #0a0a0a;
  background: var(--btn-bg);
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(203,162,74,.55), inset 0 1px 0 rgba(255,255,255,.35);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
  text-decoration: none;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -12px rgba(203,162,74,.7), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:active {
  transform: translateY(0);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--text);
  background: transparent;
  padding: 11px 24px;
  border-radius: 10px;
  border: 1px solid var(--border2);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  text-decoration: none;
}
.btn-outline:hover {
  background: var(--bg3);
  border-color: var(--text3);
}

.btn-secondary {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 15px;
  padding: 13px 22px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text);
  transition: border-color .25s, background .25s, transform .18s;
  text-decoration: none;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--gold-d); background: rgba(203,162,74,.06); transform: translateY(-2px); }
[data-theme="light"] .btn-secondary { background: rgba(0,0,0,.04); }

/* ── Shared page layout primitives ──────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
/* scroll-margin-top so a same-page nav anchor (e.g. #intelligence) lands
   below the fixed 60px nav (.nav { position:fixed; height:60px } in
   nav.css) instead of right under/behind it -- found via a direct nav
   link click landing the section heading partially hidden. */
.section { padding: 72px 0; position: relative; z-index: 1; scroll-margin-top: 76px; }
.shead { margin-bottom: 44px; }
.eyebrow {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--iq); display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--iq); opacity: .7; }
.eyebrow-live {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  border: 1px solid var(--gold-d); border-radius: 999px; padding: 6px 16px 6px 14px;
}
.eyebrow-live .eyebrow::before { display: none; }
.title, h1.title, h2.title {
  font-family: 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: clamp(26px,3.8vw,42px);
  margin: 16px 0 14px; line-height: 1.08; letter-spacing: -.02em; color: var(--text);
}
.lede { color: var(--text2); font-size: clamp(15px,1.55vw,17.5px); line-height: 1.68; max-width: 72ch; }

/* ── Shared price card (used on homepage + pricing.html) ────── */
.price-card { border: 1px solid var(--gold-d); border-radius: 16px; padding: 32px; background: radial-gradient(360px 180px at 80% 0%, rgba(203,162,74,.1), transparent 65%), linear-gradient(180deg, var(--bg3), var(--bg2)); box-shadow: 0 36px 80px -50px rgba(0,0,0,.8); }
[data-theme="light"] .price-card { box-shadow: 0 12px 40px -16px rgba(13,17,30,.2); }
.price-tag { font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--iq); margin-bottom: 12px; }
.price-amt { font-family: 'IBM Plex Sans', sans-serif; font-weight: 800; font-size: 44px; letter-spacing: -.02em; color: var(--text); }
.price-amt small { font-size: 15px; color: var(--text3); font-weight: 500; }
.price-feats { list-style: none; margin: 22px 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.price-feats li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text2); }
.price-feats li svg { width: 17px; height: 17px; stroke: var(--ok); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 2px; }
.price-card .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
.price-learn { display: inline-flex; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--iq); gap: 6px; }
.price-learn:hover { color: var(--iq2); }

/* ── Spinner ────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0,0,0,0.3);
  border-top-color: #0a0a0a;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Skeleton shimmer ───────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-bar {
  height: 16px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--bg3) 25%, var(--border2) 50%, var(--bg3) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-bar--lg { height: 28px; width: 60%; }
.skeleton-bar--md { height: 16px; width: 80%; margin-top: 12px; }
.skeleton-bar--sm { height: 12px; width: 50%; margin-top: 8px; }

/* ── Cookie consent banner ──────────────────────────────────── */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  background: var(--bg2);
  border-top: 1px solid var(--border2);
  box-shadow: 0 -8px 32px -8px rgba(0,0,0,.35);
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cookie-banner__text {
  flex: 1 1 360px;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text2);
  margin: 0;
}
.cookie-banner__text a { color: var(--iq); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__text a:hover { color: var(--iq2); }
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner__reject {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--text2);
  background: none;
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 11px 20px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.cookie-banner__reject:hover { border-color: var(--text3); color: var(--text); }

@media (max-width: 600px) {
  .cookie-banner__inner { padding: 14px 18px; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions button { flex: 1; }
}
/*
 * fonts.css — Self-hosted font-face declarations.
 *
 * Design simplification (2026-10): cut to 2 font families, 4 files total,
 * at Bala's explicit instruction -- down from 4 families (12 static files
 * originally, then 5 after an earlier weight-trim pass). Outfit (every
 * heading, stat number, nav link) and Instrument Serif (the hero/pricing
 * italic accent line) are dropped entirely; every selector that used
 * either now uses IBM Plex Sans instead, confirmed via a repo-wide
 * find-replace of every Outfit/Instrument Serif font-family usage
 * site across design-system.css, nav.css, footer.css, and every
 * assets/css/pages/*.css file (not just this file's own declarations).
 *   - IBM Plex Sans: ONE variable file (wght 400-600, body/UI text) PLUS
 *     one static 700 file for headings -- Google Fonts has no true
 *     variable range past 600 for this family (confirmed: a 400-800
 *     range request returns "Missing font family", same gap IBM Plex
 *     Mono has). 800-weight selectors (former Outfit 800, e.g. stat
 *     numbers) now render at 700 -- synthesized bolder by some browsers,
 *     visually close but not byte-identical to the old Outfit 800; a
 *     deliberate, approved tradeoff of this consolidation, not a bug.
 *   - IBM Plex Mono: unchanged from the earlier weight-trim pass -- 400 +
 *     600 static files (no variable version exists for this family
 *     either). Used for code/labels, per Bala's explicit instruction.
 * Real total: 4 files (Sans-variable + Sans-700 + Mono-400 + Mono-600),
 * within the "three to four files" target with 2 families, exactly as
 * instructed -- not the "5 files, 4 families, approved as the honest
 * floor" state from the previous pass, which this supersedes.
 *
 * font-display: swap kept on every face.
 */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}
/* ─────────────────────────────────────────────────────────────
   Navigation — PrathmIQ
   Fixed 60px nav bar, hamburger drawer, responsive
   ───────────────────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ── Logo ───────────────────────────────────────────────────── */
.nav__logo {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
  line-height: 1;
}
.nav__logo .iq { color: var(--iq); }

/* ── Desktop link list ──────────────────────────────────────── */
.nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nav__link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  white-space: nowrap;
}
.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--text);
  background: var(--bg3);
}

/* ── Right-side actions ─────────────────────────────────────── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Theme toggle */
.nav__theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--border);
  transition: color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.nav__theme-btn:hover { color: var(--text); background: var(--bg3); }

/* Sun icon shown in light mode, moon in dark mode */
.nav__theme-btn .icon-sun  { display: none; }
.nav__theme-btn .icon-moon { display: block; }
[data-theme="light"] .nav__theme-btn .icon-sun  { display: block; }
[data-theme="light"] .nav__theme-btn .icon-moon { display: none; }

/* Sign In */
.nav__signin {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text2);
  padding: 6px 12px;
  border-radius: 6px;
  transition: color 0.15s;
  white-space: nowrap;
}
.nav__signin:hover { color: var(--text); }

/* Get API Key CTA */
.nav__cta {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0a0a0a;
  background: var(--btn-bg);
  padding: 8px 16px;
  border-radius: 8px;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.nav__cta:hover { opacity: 0.9; }

/* ── Hamburger icon ─────────────────────────────────────────── */
.nav__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.22s ease, opacity 0.22s ease;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile drawer ──────────────────────────────────────────── */
.nav__drawer {
  position: fixed;
  inset: 60px 0 0 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
  z-index: 999;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 4px;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.nav__drawer.is-open { transform: translateX(0); }

.nav__drawer-link {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text2);
  padding: 12px 16px;
  border-radius: 8px;
  transition: color 0.15s, background 0.15s;
}
.nav__drawer-link:hover { color: var(--text); background: var(--bg3); }

.nav__drawer-divider {
  height: 1px;
  background: var(--border);
  margin: 8px 0;
}

.nav__drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.nav__drawer-signin {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  text-align: center;
  transition: background 0.15s;
}
.nav__drawer-signin:hover { background: var(--bg3); }

.nav__drawer-cta {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0a0a0a;
  background: var(--btn-bg);
  padding: 12px 16px;
  border-radius: 8px;
  text-align: center;
  transition: opacity 0.15s;
}
.nav__drawer-cta:hover { opacity: 0.9; }

/* ── Mobile breakpoint ──────────────────────────────────────── */
@media (max-width: 767px) {
  .nav__links           { display: none; }
  .nav__actions .nav__signin { display: none; }
  .nav__actions .nav__cta    { display: none; }
  .nav__hamburger       { display: flex; }
}
/* ─────────────────────────────────────────────────────────────
   Footer — PrathmIQ
   ───────────────────────────────────────────────────────────── */

.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 56px 24px 32px;
  margin-top: auto;
}

.footer__inner {
  max-width: var(--max);
  margin: 0 auto;
}

/* ── Top row ────────────────────────────────────────────────── */
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

/* Brand */
.footer__brand { max-width: 240px; }

.footer__logo {
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--text);
  display: inline-block;
  margin-bottom: 4px;
}
.footer__logo .iq { color: var(--iq); }

.footer__tagline {
  font-size: 0.875rem;
  line-height: 1.2;
  color: var(--text3);
  font-style: italic;
  font-family: 'IBM Plex Sans', sans-serif;
}

/* Link groups */
.footer__links {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}

.footer__col h4 {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 14px;
}
.footer__col a {
  display: block;
  font-size: 0.875rem;
  color: var(--text2);
  margin-bottom: 10px;
  transition: color 0.15s;
}
.footer__col a:hover { color: var(--text); }

/* ── Divider ────────────────────────────────────────────────── */
.footer__divider {
  height: 1px;
  background: var(--border);
  margin: 0 0 28px;
}

/* ── Bottom row ─────────────────────────────────────────────── */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__copy {
  font-size: 0.8125rem;
  color: var(--text3);
}

/* Social icons */
.footer__socials {
  display: flex;
  gap: 8px;
}
.footer__social-link {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text2);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.footer__social-link:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--bg);
}
.footer__social-link svg {
  width: 15px;
  height: 15px;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer__top { flex-direction: column; gap: 32px; }
  .footer__links { gap: 32px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; }
}