/* ============================================================
   DinaBridge Global Design System — v3.0.0
   ============================================================
   GEMINI LUXURY LIGHT — inspired by Google Marketing Live
   ─────────────────────────────────────────────────────────
   60% Canvas:    #FCFDFE  (brilliant clean white, micro-blue tint)
   30% Authority: #0A192F  (Deep Royal Marine Blue — headings, type)
   10% Gemini Flare: #1A73E8 → #9B51E0 → #E24492
        → applied via .gemini-flare class to <h1>/<h2> on:
          index.html hero, elastic-ai.html hero, elastic-consulting.html hero

   Token mapping from v2.7.2:
     --paper      → #FCFDFE  (was #f6f8fc)
     --paper-2    → #F0F4FA  (was #edf1f9)
     --navy       → #0A192F  (was #0f2240)
     --ink        → #0A192F  (was #08111f)
     --ink-2      → #1E3A5F  (was #22324a)
     --ink-3      → #4A6080  (was #5c6d86)
     --blue       → #1A73E8  (Gemini Blue — was blurple #4f6bed)
     --blue-dark  → #1557B0  (was #3a52c4)

   Spacing / radii / shadows / transitions: PRESERVED (zero breakage)
   ============================================================ */

/* Card visual hierarchy patch */
@import url('/card-hierarchy.css');

/* ══════════════════════════════════════════════════════════════
   1. TOKENS
   ══════════════════════════════════════════════════════════════ */
:root {

  /* — Canvas & type — */
  --paper:     #FCFDFE;
  --paper-2:   #F0F4FA;
  --navy:      #0A192F;
  --ink:       #0A192F;
  --ink-2:     #1E3A5F;
  --ink-3:     #4A6080;
  --rule:      rgba(10,25,47,.07);
  --rule-strong: rgba(10,25,47,.13);

  /* — PRIMARY: Gemini Blue — */
  --blue:      #1A73E8;
  --blue-dark: #1557B0;
  --blue-mid:  rgba(26,115,232,.14);
  --blue-glow: rgba(26,115,232,.10);

  /* — Gemini Flare gradient (fluid, 3-stop) — */
  --gemini-flare: linear-gradient(135deg, #1A73E8 0%, #9B51E0 52%, #E24492 100%);

  /* — Accent palette — */
  --teal:      #006e6b;
  --gold:      #c6922d;
  --pink:      #E24492;
  --pink-soft: #fde8f2;
  --indigo:    #9B51E0;

  /* — Atmospheric only — */
  --magenta:      #9B51E0;
  --magenta-mid:  rgba(155,81,224,.15);
  --magenta-soft: rgba(155,81,224,.055);
  --magenta-glow: rgba(155,81,224,.20);
  --teal-glow:    rgba(0,110,107,.08);

  /* — Typography — */
  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'Figtree', system-ui, sans-serif;

  /* — Type scale — */
  --text-xs:   0.75rem;
  --text-sm:   0.9375rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;

  /* — Heading scale — */
  --h1-size: clamp(2.8rem, 5.5vw, 5rem);
  --h2-size: clamp(2rem, 3.5vw, 3.1rem);
  --h3-size: 1.25rem;
  --h4-size: 0.72rem;

  /* — Spacing (strict 8px grid) — */
  --sp-4:   0.25rem;
  --sp-8:   0.5rem;
  --sp-12:  0.75rem;
  --sp-16:  1rem;
  --sp-20:  1.25rem;
  --sp-24:  1.5rem;
  --sp-28:  1.75rem;
  --sp-32:  2rem;
  --sp-40:  2.5rem;
  --sp-48:  3rem;
  --sp-56:  3.5rem;
  --sp-64:  4rem;
  --sp-80:  5rem;
  --sp-96:  6rem;
  --sp-128: 8rem;

  /* — Shadows — */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.03), 0 4px 12px rgba(10,25,47,.05);
  --shadow-md:   0 2px 4px rgba(0,0,0,.04), 0 12px 28px rgba(10,25,47,.08);
  --shadow-lg:   0 4px 8px rgba(0,0,0,.05), 0 20px 48px rgba(26,115,232,.10);
  --card-shadow-rest:  0 1px 3px rgba(0,0,0,.04), 0 6px 20px rgba(10,25,47,.07), 0 20px 40px rgba(10,25,47,.04);
  --card-shadow-hover: 0 4px 8px rgba(0,0,0,.06), 0 20px 48px rgba(10,25,47,.12), 0 40px 72px rgba(10,25,47,.06);
  --card-shadow-featured: 0 2px 4px rgba(0,0,0,.04), 0 16px 40px var(--pg-hover), 0 32px 64px var(--pg-rest);

  /* — Radii — */
  --radius:    16px;
  --radius-md: 12px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* — Layout — */
  --max: 1120px;

  /* — Transitions — */
  --ease:     cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,.55,.45,1);
  --t-fast:   160ms;
  --t-base:   260ms;
  --t-slow:   400ms;
  --t-slower: 560ms;
}

/* ══════════════════════════════════════════════════════════════
   1b. PINK GLOW SYSTEM (remapped to Gemini palette)
   ══════════════════════════════════════════════════════════════ */
:root {
  --pg-atmo:  rgba(226,68,146,.032);
  --pg-edge:  rgba(226,68,146,.06);
  --pg-rest:  rgba(226,68,146,.10);
  --pg-hover: rgba(226,68,146,.16);
  --pg-pop:   rgba(226,68,146,.22);

  --pg-radial-edge:         radial-gradient(ellipse 80% 70% at 100% 50%, var(--pg-edge),  transparent 68%);
  --pg-radial-hover:        radial-gradient(ellipse 80% 70% at 100% 50%, var(--pg-hover), transparent 68%);
  --pg-radial-corner:       radial-gradient(ellipse at 100% 100%, var(--pg-rest),  transparent 62%);
  --pg-radial-corner-hover: radial-gradient(ellipse at 100% 100%, var(--pg-hover), transparent 62%);

  --pg-shadow:     0 16px 40px var(--pg-hover), 0 32px 64px var(--pg-rest);
  --pg-shadow-sm:  0 4px 14px var(--pg-rest);
  --pg-shadow-dot: 0 4px 16px var(--pg-pop);

  --pg-transition: background var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease);
}

/* ══════════════════════════════════════════════════════════════
   2. RESET
   ══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 140% 70% at 105% -5%,  rgba(26,115,232,.06),  transparent 50%),
    radial-gradient(ellipse 90%  55% at -5%  25%,  rgba(0,110,107,.04),   transparent 48%),
    radial-gradient(ellipse 70%  45% at 80%  90%,  var(--pg-atmo),        transparent 44%),
    radial-gradient(ellipse 50%  35% at 50%  50%,  rgba(26,115,232,.018), transparent 65%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-base);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0; opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 200px 200px;
}
a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ══════════════════════════════════════════════════════════════
   2b. GEMINI FLARE — fluid gradient applied to main H1/H2 heroes
       Usage: add class="gemini-flare" to the heading element
   ══════════════════════════════════════════════════════════════ */
.gemini-flare {
  background: var(--gemini-flare);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════════════
   3. LAYOUT
   ══════════════════════════════════════════════════════════════ */
.container {
  width: 100%; max-width: var(--max);
  margin-left: auto; margin-right: auto;
  padding-left: var(--sp-32); padding-right: var(--sp-32);
}
.grid-1 { display: grid; grid-template-columns: 1fr;                      gap: var(--sp-24); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-24); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-24); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-20); }

/* ══════════════════════════════════════════════════════════════
   4. NAVIGATION — luxury light glass, Gemini CTA
   ══════════════════════════════════════════════════════════════ */
.nav {
  position: sticky; top: 0; z-index: 200;
  background: rgba(252,253,254,.92);
  backdrop-filter: blur(32px) saturate(1.9);
  -webkit-backdrop-filter: blur(32px) saturate(1.9);
  border-bottom: 1px solid rgba(26,115,232,.09);
  box-shadow:
    0 1px 0 rgba(255,255,255,.90),
    0 4px 24px rgba(10,25,47,.05),
    0 1px 3px rgba(10,25,47,.03);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-24); padding: var(--sp-12) 0;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-12);
  font-weight: 800; letter-spacing: -.02em; font-family: var(--sans);
}
.brand-mark {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px; color: #fff;
  background: var(--gemini-flare);
  box-shadow: 0 2px 8px rgba(26,115,232,.30), 0 4px 18px rgba(155,81,224,.18);
  flex-shrink: 0;
  transition: box-shadow var(--t-slow) var(--ease), transform var(--t-base) var(--ease-out);
}
.brand:hover .brand-mark {
  box-shadow: 0 0 0 3px rgba(26,115,232,.22), 0 4px 22px rgba(155,81,224,.32);
  transform: scale(1.06);
}
.nav-links {
  display: flex; align-items: center; gap: 24px;
  color: var(--ink-2); font-size: var(--text-sm); font-weight: 600;
}
.nav-links a {
  transition: color var(--t-base) var(--ease);
  position: relative; padding-bottom: 2px;
}
.nav-links a::after {
  content: ""; position: absolute; bottom: -4px; left: 0;
  width: 100%; height: 1.5px;
  background: var(--gemini-flare);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.25s ease; border-radius: 2px;
}
.nav-links a:hover        { color: var(--blue); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active       { color: var(--blue); }
.nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-8) 22px; border-radius: 999px;
  font-size: var(--text-sm); font-weight: 700;
  background: var(--gemini-flare);
  color: #fff; border: 1px solid transparent;
  box-shadow: 0 2px 12px rgba(26,115,232,.28), 0 4px 22px rgba(155,81,224,.14);
  white-space: nowrap;
  transition: box-shadow var(--t-slow) var(--ease), transform var(--t-base) var(--ease-out), filter var(--t-base) var(--ease);
}
.nav-cta:hover {
  filter: brightness(1.10);
  box-shadow: 0 4px 28px rgba(26,115,232,.40), 0 8px 36px rgba(155,81,224,.22);
  transform: translateY(-1px);
}

/* Burger */
.nav-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 36px; height: 36px; background: none;
  border: 1px solid var(--rule-strong); border-radius: 10px;
  cursor: pointer; padding: 0; flex-shrink: 0;
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease); z-index: 300;
}
.nav-burger:hover { border-color: var(--blue-mid); background: rgba(26,115,232,.06); }
.burger-bar {
  display: block; width: 18px; height: 2px; background: var(--navy); border-radius: 2px;
  transition: transform var(--t-slow) var(--ease), opacity var(--t-base) var(--ease), background var(--t-base) var(--ease);
  transform-origin: center;
}
.nav-burger.is-open .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-open .burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-open .burger-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-burger.is-open { border-color: var(--blue-mid); background: rgba(26,115,232,.05); }
.nav-burger.is-open .burger-bar { background: var(--blue); }

/* Drawer */
.nav-drawer {
  position: fixed; top: 0; left: 0; right: 0; z-index: 150;
  background: rgba(252,253,254,.97); backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom: 1px solid rgba(26,115,232,.11);
  padding: 72px var(--sp-24) var(--sp-24);
  transform: translateY(-110%); transition: transform var(--t-slow) var(--ease);
  box-shadow: 0 24px 64px rgba(10,25,47,.10);
}
.nav-drawer.is-open { transform: translateY(0); }
.drawer-links { display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer-links a {
  display: block; padding: var(--sp-12) var(--sp-16); border-radius: var(--radius);
  font-size: 1rem; font-weight: 600; color: var(--ink-2);
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease);
  border: 1px solid transparent;
}
.drawer-links a:hover  { background: rgba(26,115,232,.06); color: var(--blue); border-color: var(--blue-mid); }
.drawer-links a.active { color: var(--blue); font-weight: 700; background: rgba(26,115,232,.06); }
.drawer-cta { margin-top: var(--sp-12); width: 100%; justify-content: center; font-size: var(--text-sm) !important; padding: var(--sp-12) var(--sp-24) !important; }

.nav-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(10,25,47,.28); z-index: 140;
  backdrop-filter: blur(3px);
  transition: opacity var(--t-slow) var(--ease); opacity: 0;
}
.nav-overlay.is-visible { display: block; opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   5. SECTIONS
   ══════════════════════════════════════════════════════════════ */
.section       { padding: var(--sp-56) 0; }
.section-tight { padding: var(--sp-40) 0; }

.section-tinted {
  padding: var(--sp-56) 0;
  background: var(--paper-2);
  position: relative;
}
.section-tinted::before,
.section-tinted::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(26,115,232,.08) 30%, rgba(26,115,232,.08) 70%, transparent 100%);
}
.section-tinted::before { top: 0; }
.section-tinted::after  { bottom: 0; }

.section-dark {
  padding: var(--sp-56) 0;
  background:
    radial-gradient(ellipse 90% 65% at 105% -5%,  rgba(26,115,232,.20), transparent 50%),
    radial-gradient(ellipse 70% 55% at -5%  110%, rgba(0,110,107,.12),  transparent 50%),
    radial-gradient(ellipse 55% 45% at 75%  85%,  rgba(226,68,146,.08), transparent 45%),
    radial-gradient(ellipse 40% 30% at 30%  30%,  rgba(155,81,224,.07), transparent 60%),
    #04111F;
  position: relative;
  color: rgba(255,255,255,.88);
}
.section-dark::before,
.section-dark::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
}
.section-dark::before {
  top: 0;
  background: linear-gradient(90deg, transparent, rgba(26,115,232,.38) 30%, rgba(155,81,224,.22) 70%, transparent);
}
.section-dark::after {
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(26,115,232,.24) 40%, rgba(226,68,146,.18) 70%, transparent);
}

/* Dark — typography */
.section-dark .section-label    { color: rgba(0,200,190,.85); }
.section-dark .section-intro h2 { color: #ffffff; }
.section-dark .section-intro p  { color: rgba(255,255,255,.68); }
.section-dark h2                { color: #ffffff; }
.section-dark h3                { color: rgba(255,255,255,.92); }
.section-dark p                 { color: rgba(255,255,255,.65); }
.section-dark .step-number      { color: rgba(0,200,190,.80); }
.section-dark .diff-label       { color: rgba(0,200,190,.80); }
.section-dark .diff-item        { border-bottom-color: rgba(255,255,255,.08); }
.section-dark .diff-item p      { color: rgba(255,255,255,.60); }
.section-dark .clean-list li    { color: rgba(255,255,255,.65); }
.section-dark .clean-list li::before { background: rgba(0,200,190,.70); }
.section-dark .trust-card-icon  { color: rgba(0,200,190,.60); }
.section-dark .trust-card h3    { color: rgba(255,255,255,.92); }
.section-dark .trust-card p     { color: rgba(255,255,255,.60); }

/* Dark — cards */
.section-dark .card-base {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.11);
  box-shadow: 0 1px 2px rgba(0,0,0,.18), 0 8px 28px rgba(0,0,0,.22);
  backdrop-filter: blur(12px);
}
.section-dark .card-base:hover {
  background: rgba(255,255,255,.10);
  border-color: rgba(26,115,232,.38);
  box-shadow: 0 2px 4px rgba(0,0,0,.22), 0 16px 44px rgba(0,0,0,.32);
}
.section-dark .card-highlight {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.13);
}
.section-dark .card-highlight h2 { color: #ffffff; }
.section-dark .card-highlight p  { color: rgba(255,255,255,.65); }
.section-dark .btn-secondary {
  background: rgba(255,255,255,.09); color: rgba(255,255,255,.90);
  border-color: rgba(255,255,255,.22); box-shadow: none;
}
.section-dark .btn-secondary:hover {
  background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.45); color: #ffffff;
}
.section-dark .card-link { color: rgba(160,200,255,1); }

/* Legacy */
.section-alt {
  padding: var(--sp-56) 0;
  background: linear-gradient(180deg, rgba(228,236,252,.50) 0%, rgba(252,253,254,0) 100%);
  position: relative;
}
.section-alt::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,115,232,.09) 30%, var(--pg-edge) 70%, transparent);
  pointer-events: none;
}

.section-divider {
  height: 1px; border: none;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,115,232,.10) 25%,
    var(--pg-rest) 50%,
    rgba(26,115,232,.10) 75%,
    transparent 100%);
  margin: 0;
}
.section-hero + .section-divider { display: none; }
.section-dark + .section-divider,
.section-divider + .section-dark {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(26,115,232,.26) 25%,
    rgba(0,110,107,.18) 60%,
    transparent 100%);
}

/* ══════════════════════════════════════════════════════════════
   6. HERO
   ══════════════════════════════════════════════════════════════ */
.section-hero { padding: var(--sp-64) 0 var(--sp-56); }
.section-hero h1 {
  font-family: var(--serif); font-size: var(--h1-size); line-height: 1.03;
  letter-spacing: -.04em; margin-bottom: var(--sp-24); color: var(--navy);
  width: 100%;
}
/* Default hero h1 gradient (non-Gemini-Flare pages) */
.section-hero h1:not(.gemini-flare) {
  background: linear-gradient(135deg, var(--navy) 30%, var(--blue) 68%, var(--indigo) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-label {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .10em; color: var(--teal); display: block; margin-bottom: var(--sp-16);
}
.section-intro { margin-bottom: var(--sp-32); width: 100%; }
.section-intro h2 {
  font-family: var(--serif); font-size: var(--h2-size); line-height: 1.05;
  letter-spacing: -.03em; margin-bottom: var(--sp-12); color: var(--navy); width: 100%;
}
.section-intro p { font-size: var(--text-lg); color: var(--ink-2); line-height: 1.75; width: 100%; }

/* Eyebrow pill — Gemini tint */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-8);
  margin-bottom: var(--sp-20);
  padding: var(--sp-8) var(--sp-16);
  border: 1px solid rgba(26,115,232,.22); border-radius: 999px;
  background: linear-gradient(135deg, rgba(26,115,232,.08), rgba(155,81,224,.05));
  color: var(--blue);
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  box-shadow: 0 2px 10px rgba(26,115,232,.08);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gemini-flare);
  flex-shrink: 0;
}

/* Hero lead & proof */
.hero-lead { font-size: var(--text-lg); color: var(--ink-2); line-height: 1.80; margin-bottom: var(--sp-12); width: 100%; }
.hero-lead + .hero-lead { margin-bottom: var(--sp-32); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); margin-bottom: var(--sp-24); }
.hero-proof {
  display: flex; flex-wrap: wrap; gap: var(--sp-8);
  font-size: var(--text-sm); font-weight: 700; margin-bottom: var(--sp-16);
}
.hero-proof span {
  padding: var(--sp-8) var(--sp-12); border-radius: 999px;
  background: rgba(255,255,255,.90); border: 1px solid rgba(10,25,47,.09);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(10,25,47,.05);
  color: var(--ink-2);
  transition: border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease), background var(--t-slow) var(--ease), transform var(--t-base) var(--ease-out);
  will-change: transform;
}
.hero-proof span:hover {
  border-color: rgba(226,68,146,.22); color: var(--pink); background: var(--pink-soft);
  box-shadow: var(--pg-shadow-sm); transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   6b. MICRO-BADGES
   ══════════════════════════════════════════════════════════════ */
.badge-pink {
  display: inline-flex; align-items: center;
  padding: var(--sp-4) var(--sp-12); border-radius: 999px;
  background: var(--pink-soft); border: 1px solid rgba(226,68,146,.18);
  color: var(--pink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
}
.badge-blue {
  display: inline-flex; align-items: center;
  padding: var(--sp-4) var(--sp-12); border-radius: 999px;
  background: rgba(26,115,232,.08); border: 1px solid rgba(26,115,232,.20);
  color: var(--blue); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════════
   7. BUTTONS — Gemini Flare primary
   ══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--sp-12) var(--sp-24); border-radius: 999px;
  font-family: var(--sans); font-size: var(--text-sm); font-weight: 700;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: box-shadow var(--t-slow) var(--ease),
    transform var(--t-base) var(--ease-out), filter var(--t-base) var(--ease),
    background var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
    color var(--t-slow) var(--ease);
  will-change: transform;
}
.btn-primary {
  background: var(--gemini-flare);
  color: #fff; border-color: transparent;
  box-shadow: 0 2px 12px rgba(26,115,232,.28), 0 4px 22px rgba(155,81,224,.14);
}
.btn-primary:hover {
  filter: brightness(1.10);
  box-shadow: 0 4px 28px rgba(26,115,232,.40), 0 8px 38px rgba(155,81,224,.22);
  transform: translateY(-2px);
}
.btn-secondary {
  background: rgba(255,255,255,.90); color: var(--ink-2);
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover {
  background: rgba(255,255,255,1); border-color: rgba(26,115,232,.22);
  color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   8. CTA BOX — v2 (atmospheric depth, shared visual language)
   ══════════════════════════════════════════════════════════════ */
.cta-box {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: var(--sp-48) var(--sp-56);
  /* Layered atmosphere: cool blue top-left, warm pink bottom-right, off-white blend */
  background:
    radial-gradient(ellipse 70% 65% at 0% 0%,   rgba(26,115,232,.07),   transparent 55%),
    radial-gradient(ellipse 60% 55% at 100% 100%, rgba(226,68,146,.06),  transparent 52%),
    radial-gradient(ellipse 90% 80% at 50% 50%,  rgba(155,81,224,.025), transparent 70%),
    rgba(252,253,254,.96);
  border: 1px solid rgba(26,115,232,.10);
  /* Deeper ambient shadow */
  box-shadow:
    0 2px 4px rgba(0,0,0,.03),
    0 8px 24px rgba(10,25,47,.06),
    0 20px 60px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.60) inset;
}

/* Faint concentric rings — upper-right decorative layer */
.cta-box::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle, transparent 38%, rgba(26,115,232,.03) 39%, transparent 41%),
    radial-gradient(circle, transparent 50%, rgba(26,115,232,.025) 51%, transparent 53%),
    radial-gradient(circle, transparent 62%, rgba(155,81,224,.02) 63%, transparent 65%),
    radial-gradient(circle, transparent 74%, rgba(155,81,224,.015) 75%, transparent 77%),
    radial-gradient(circle, transparent 86%, rgba(226,68,146,.01) 87%, transparent 89%);
  opacity: 1;
  z-index: 0;
}

/* Warm pink ambient glow — bottom-right, transitions on hover */
.cta-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 100% 100%, rgba(226,68,146,.07), transparent 58%);
  opacity: 1;
  transition: opacity var(--t-slow) var(--ease);
  z-index: 0;
}
.cta-box:hover::after {
  opacity: 1;
  background: radial-gradient(ellipse 60% 55% at 100% 100%, rgba(226,68,146,.11), transparent 58%);
}

/* Ensure all content sits above decorative layers */
.cta-box > * { position: relative; z-index: 1; }

/* Typography tuning */
.cta-box .section-label {
  margin-bottom: var(--sp-16);
  letter-spacing: .12em;
}
.cta-box h2 {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--navy);
  margin-bottom: var(--sp-12);
}
.cta-box p {
  font-size: var(--text-lg);
  color: var(--ink-2);
  margin-bottom: var(--sp-32);
  line-height: 1.75;
}
.cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-12); }

/* CTA context — stronger primary glow */
.cta-box .btn-primary {
  box-shadow:
    0 2px 14px rgba(26,115,232,.32),
    0 6px 28px rgba(155,81,224,.18);
}
.cta-box .btn-primary:hover {
  filter: brightness(1.10);
  box-shadow:
    0 4px 32px rgba(26,115,232,.46),
    0 10px 44px rgba(155,81,224,.28);
  transform: translateY(-2px);
}

/* CTA context — softer secondary */
.cta-box .btn-secondary {
  background: rgba(255,255,255,.72);
  border-color: rgba(26,115,232,.14);
  box-shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 14px rgba(26,115,232,.06);
}
.cta-box .btn-secondary:hover {
  background: rgba(255,255,255,.96);
  border-color: rgba(26,115,232,.26);
  color: var(--blue);
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 8px 24px rgba(26,115,232,.12);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   9. FOOTER
   ══════════════════════════════════════════════════════════════ */
footer {
  border-top: 1px solid rgba(26,115,232,.08);
  padding: var(--sp-64) 0 var(--sp-48);
  position: relative; overflow: hidden;
}
footer::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 80% at 100% 100%, var(--pg-rest), transparent 58%);
  opacity: .45;
}
.footer-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--sp-24);
  position: relative; z-index: 1;
}
.footer-brand-block {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-12);
}
.footer-brand-block .brand {
  font-size: 1.1rem; font-family: var(--serif); font-weight: 800;
  letter-spacing: -.025em; color: var(--navy);
}
.footer-brand-block .brand-mark {
  width: 44px; height: 44px; font-size: 18px;
  box-shadow: 0 2px 10px rgba(26,115,232,.22), 0 4px 22px rgba(155,81,224,.12);
  transition: box-shadow var(--t-slow) var(--ease), transform var(--t-base) var(--ease-out);
}
.footer-brand-block .brand:hover .brand-mark {
  box-shadow: 0 0 0 4px rgba(26,115,232,.16), 0 4px 22px rgba(155,81,224,.26);
  transform: scale(1.06);
}
.footer-tagline { font-size: var(--text-sm); color: var(--ink-3); max-width: 340px; line-height: 1.65; }
.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-8) var(--sp-20); font-size: var(--text-sm); font-weight: 600; color: var(--ink-3);
}
.footer-nav a { transition: color var(--t-base) var(--ease); padding: var(--sp-4) var(--sp-8); border-radius: 6px; }
.footer-nav a:hover { color: var(--blue); }
.footer-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--rule-strong) 20%, var(--rule-strong) 80%, transparent 100%);
  width: 100%;
}
.footer-legal { font-size: var(--text-xs); color: var(--ink-3); }
.footer-gem {
  font-family: var(--serif); font-style: italic; font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--navy); opacity: .68;
  position: relative; display: inline-block; padding: var(--sp-4) var(--sp-16);
  transition: opacity var(--t-slow) var(--ease);
}
.footer-gem::before, .footer-gem::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(226,68,146,.28));
}
.footer-gem::before { right: 100%; }
.footer-gem::after  { left: 100%; background: linear-gradient(90deg, rgba(226,68,146,.28), transparent); }
.footer-gem:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   10. CONTACT PAGE
   ══════════════════════════════════════════════════════════════ */
.contact-grid {
  display: grid; grid-template-columns: 1fr 380px;
  gap: var(--sp-40); align-items: start;
}
.contact-form { display: flex; flex-direction: column; gap: var(--sp-20); }
.field { display: flex; flex-direction: column; gap: var(--sp-8); }
.field label { font-size: var(--text-sm); font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.field input, .field select, .field textarea {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: rgba(255,255,255,.92);
  font-family: var(--sans); font-size: var(--text-base); color: var(--ink);
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease), background var(--t-base) var(--ease);
  outline: none; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(26,115,232,.12);
  background: rgba(255,255,255,1);
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.7; }
.field select { cursor: pointer; }
.contact-aside {
  display: flex; flex-direction: column; gap: var(--sp-24);
  position: relative; overflow: hidden;
}
.contact-aside::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pg-radial-edge); opacity: .6;
  transition: var(--pg-transition);
}
.contact-aside:hover::after { background: var(--pg-radial-hover); opacity: 1; }
.aside-block { display: flex; flex-direction: column; gap: var(--sp-8); }
.aside-block h4 { font-size: var(--h4-size); font-weight: 800; text-transform: uppercase; letter-spacing: .10em; color: var(--teal); }
.aside-block p { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.70; }
.aside-block a { color: var(--blue); font-weight: 600; }
.aside-block a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   11. CARD-NUM / CARD-LINK / STEP-NUMBER
   ══════════════════════════════════════════════════════════════ */
.card-num {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .10em; color: var(--teal); display: block; margin-bottom: var(--sp-12);
}
.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); font-weight: 700; color: var(--blue);
  margin-top: var(--sp-16);
  transition: gap var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.card-link:hover { gap: 8px; opacity: .80; }
.step-number {
  font-size: var(--text-xs); font-weight: 800; text-transform: uppercase;
  letter-spacing: .10em; color: var(--teal); margin-bottom: var(--sp-8);
}

/* ══════════════════════════════════════════════════════════════
   12. HOW SECTION
   ══════════════════════════════════════════════════════════════ */
.how-inner {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(10,25,47,.10);
  border-radius: var(--radius-xl);
  padding: var(--sp-48);
  box-shadow: var(--card-shadow-rest);
}
.how-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pg-radial-edge); opacity: .55;
  transition: var(--pg-transition);
}
.how-inner:hover::after { background: var(--pg-radial-hover); opacity: 1; }

/* ══════════════════════════════════════════════════════════════
   13. CARD-FEATURED
   ══════════════════════════════════════════════════════════════ */
.card-featured {
  position: relative; overflow: hidden;
  border-color: rgba(10,25,47,.10);
}
.card-featured::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--pg-radial-edge); opacity: 1;
  transition: var(--pg-transition);
}
.card-featured:hover { border-color: rgba(226,68,146,.16); }
.card-featured:hover::after { background: var(--pg-radial-hover); }
.card-featured h3 {
  font-family: var(--serif); font-size: 1.45rem;
  letter-spacing: -.025em; color: var(--navy); margin-bottom: var(--sp-12);
}
.card-featured p { color: var(--ink-2); font-size: var(--text-base); line-height: 1.75; margin-bottom: var(--sp-16); }

/* ══════════════════════════════════════════════════════════════
   14. TRUST BAR
   ══════════════════════════════════════════════════════════════ */
.trust-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-24);
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(10,25,47,.09);
  border-radius: var(--radius-lg);
  padding: var(--sp-24) var(--sp-32);
  box-shadow: var(--shadow-sm);
}
.section-tinted .trust-bar {
  background: rgba(255,255,255,.88);
  border-color: rgba(26,115,232,.09);
  box-shadow: var(--shadow-md);
}
.trust-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); flex: 1; min-width: 120px; }
.trust-num {
  font-family: var(--serif); font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 800; color: var(--navy); letter-spacing: -.03em; line-height: 1;
}
.trust-label { font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); line-height: 1.5; }
.trust-divider { width: 1px; height: 40px; background: var(--rule-strong); flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   15. PRACTICE CARDS
   ══════════════════════════════════════════════════════════════ */
.practice-card {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
}
.practice-card:hover .card-link { gap: 8px; }

.practice-icon-wrap {
  position: relative;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-16); flex-shrink: 0;
}
.practice-icon-wrap::before {
  content: "";
  position: absolute; inset: -8px; border-radius: 50%;
  opacity: 0; transition: opacity var(--t-slow) var(--ease);
  pointer-events: none; filter: blur(12px);
}
.practice-card:hover .practice-icon-wrap::before { opacity: 1; }
.practice-icon-wrap--obs::before    { background: radial-gradient(circle, rgba(0,110,107,.45) 0%, transparent 70%); }
.practice-icon-wrap--search::before { background: radial-gradient(circle, rgba(26,115,232,.42) 0%, transparent 70%); }
.practice-icon-wrap--sec::before    { background: radial-gradient(circle, rgba(198,146,45,.40) 0%, transparent 70%); }
.practice-icon-wrap--ai::before     { background: radial-gradient(circle, rgba(226,68,146,.38) 0%, transparent 70%); }

.practice-icon {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 1.15rem; flex-shrink: 0;
  position: relative; z-index: 1;
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-slow) var(--ease);
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.practice-card:hover .practice-icon { transform: scale(1.08); }

.practice-icon--obs    { background: linear-gradient(135deg, #006e6b 0%, #0ea5e9 100%); color: #fff; box-shadow: 0 4px 14px rgba(0,110,107,.30), 0 2px 6px rgba(0,0,0,.10); }
.practice-icon--search { background: linear-gradient(135deg, var(--blue) 0%, var(--indigo) 100%); color: #fff; box-shadow: 0 4px 14px rgba(26,115,232,.32), 0 2px 6px rgba(0,0,0,.10); }
.practice-icon--sec    { background: linear-gradient(135deg, #c6922d 0%, #f59e0b 100%); color: #fff; box-shadow: 0 4px 14px rgba(198,146,45,.30), 0 2px 6px rgba(0,0,0,.10); }
.practice-icon--ai     { background: linear-gradient(135deg, var(--pink) 0%, #8b5cf6 100%); color: #fff; box-shadow: 0 4px 14px rgba(226,68,146,.28), 0 2px 6px rgba(0,0,0,.10); }

.practice-card:hover .practice-icon--obs    { box-shadow: 0 6px 20px rgba(0,110,107,.42), 0 2px 8px rgba(0,0,0,.12); }
.practice-card:hover .practice-icon--search { box-shadow: 0 6px 20px rgba(26,115,232,.44), 0 2px 8px rgba(0,0,0,.12); }
.practice-card:hover .practice-icon--sec    { box-shadow: 0 6px 20px rgba(198,146,45,.42), 0 2px 8px rgba(0,0,0,.12); }
.practice-card:hover .practice-icon--ai     { box-shadow: 0 6px 20px rgba(226,68,146,.40), 0 2px 8px rgba(0,0,0,.12); }

.practice-card h3 { margin-bottom: var(--sp-8); }
.practice-card p  { color: var(--ink-2); font-size: var(--text-sm); line-height: 1.75; flex: 1; margin-bottom: var(--sp-16); }

.section-dark .practice-icon--obs    { box-shadow: 0 4px 18px rgba(0,110,107,.50); }
.section-dark .practice-icon--search { box-shadow: 0 4px 18px rgba(26,115,232,.50); }
.section-dark .practice-icon--sec    { box-shadow: 0 4px 18px rgba(198,146,45,.50); }
.section-dark .practice-icon--ai     { box-shadow: 0 4px 18px rgba(226,68,146,.45); }
.section-dark .practice-card h3      { color: rgba(255,255,255,.92); }
.section-dark .practice-card p       { color: rgba(255,255,255,.60); }

/* ══════════════════════════════════════════════════════════════
   16. DIFF-STACK CARD
   ══════════════════════════════════════════════════════════════ */
.diff-stack { display: flex; flex-direction: column; gap: 0; }
.diff-item {
  padding: var(--sp-20) 0; border-bottom: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: var(--sp-4);
}
.diff-item:last-child  { border-bottom: none; padding-bottom: 0; }
.diff-item:first-child { padding-top: 0; }
.diff-label { font-size: var(--text-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.diff-item p { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.70; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   17. TRUST-CARD GRID
   ══════════════════════════════════════════════════════════════ */
.trust-card { display: flex; flex-direction: column; gap: var(--sp-12); }
.trust-card-icon { font-size: 10px; color: var(--teal); opacity: .60; margin-bottom: var(--sp-4); }
.trust-card h3 { margin-bottom: 0; }
.trust-card p  { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.75; }

/* ══════════════════════════════════════════════════════════════
   17b. CARD HOVER — Hard 3D Pop
   ══════════════════════════════════════════════════════════════ */
.card-base.card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  will-change: transform;
}
.card-base.card:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px 0 0 var(--blue);
}
.section-dark .card-base.card:hover {
  box-shadow: 4px 4px 0 0 var(--pink);
}

/* ══════════════════════════════════════════════════════════════
   18. TEAM GRID
   ══════════════════════════════════════════════════════════════ */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sp-24); }
.team-card {
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(10,25,47,.09);
  border-radius: var(--radius-lg); padding: var(--sp-32);
  box-shadow: var(--card-shadow-rest);
  display: flex; flex-direction: column; gap: var(--sp-16);
  transition: box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease),
    transform var(--t-base) var(--ease-out), background var(--t-slow) var(--ease);
  will-change: transform;
}
.team-card:hover {
  box-shadow: var(--card-shadow-hover); border-color: rgba(26,115,232,.18);
  background: rgba(255,255,255,.98); transform: translateY(-3px);
}
.team-card-header { display: flex; align-items: center; gap: var(--sp-16); }
.team-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.25rem; font-weight: 800; color: #fff;
  background: var(--gemini-flare);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(26,115,232,.24), 0 4px 18px rgba(155,81,224,.13);
}
.team-name {
  font-family: var(--serif); font-size: 1rem; font-weight: 700;
  color: var(--navy); letter-spacing: -.01em; line-height: 1.2; margin-bottom: var(--sp-4);
}
.team-role { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.team-bio     { font-size: var(--text-sm); color: var(--ink-2); line-height: 1.80; flex: 1; }
.team-linkedin { font-size: var(--text-xs); font-weight: 700; color: var(--blue); letter-spacing: .02em; transition: opacity var(--t-base) var(--ease); }
.team-linkedin:hover { opacity: .70; }

/* Team photo */
.team-photo {
  width: 100%; aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  object-fit: cover; object-position: center top;
  border: 1px solid rgba(10,25,47,.07);
  box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 8px 24px rgba(10,25,47,.08);
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
  display: block;
}
.team-card:hover .team-photo {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,.09), 0 16px 40px rgba(10,25,47,.13);
}
.team-card--photo { padding: 0; overflow: hidden; }
.team-card--photo .team-photo-wrap {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.team-card--photo .team-card-body {
  padding: var(--sp-24) var(--sp-28);
  display: flex; flex-direction: column; gap: var(--sp-8);
}

/* ══════════════════════════════════════════════════════════════
   19. SCROLL REVEAL
   ══════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ══════════════════════════════════════════════════════════════
   20. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }
  .cta-box { padding: var(--sp-40); }
  .how-inner { padding: var(--sp-40); }
  .trust-bar { gap: var(--sp-16); }
  .trust-divider { display: none; }
}
@media (max-width: 768px) {
  .container { padding-left: var(--sp-20); padding-right: var(--sp-20); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .section-hero { padding: var(--sp-48) 0 var(--sp-40); }
  .section, .section-tinted, .section-dark { padding: var(--sp-40) 0; }
  .cta-box { padding: var(--sp-32); }
  .nav-links, .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .how-inner { padding: var(--sp-32); }
  .trust-bar { flex-direction: column; align-items: flex-start; padding: var(--sp-24); }
  .trust-stat { flex-direction: row; align-items: baseline; gap: var(--sp-8); }
  .trust-num { font-size: 1.5rem; }
  .footer-gem { font-size: 0.95rem; }
}

/* ══════════════════════════════════════════════════════════════
   21. SOCIAL LINKS
   ══════════════════════════════════════════════════════════════ */
.social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(10,25,47,.06); color: var(--ink-3);
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}
.social-link svg { width: 17px; height: 17px; fill: currentColor; }
.social-link:hover { transform: translateY(-3px); }
.social-link--linkedin:hover { background: #0a66c2; color: #ffffff; }
.social-link--github:hover   { background: #24292f; color: #ffffff; }

/* ══════════════════════════════════════════════════════════════
   22. CLEAN LIST
   ══════════════════════════════════════════════════════════════ */
.clean-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-8); }
.clean-list li {
  display: flex; align-items: flex-start; gap: var(--sp-8);
  font-size: var(--text-sm); color: var(--ink-2); line-height: 1.70;
}
.clean-list li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0; margin-top: 7px;
}

/* ══════════════════════════════════════════════════════════════
   23. DESIGN SYSTEM VERSION TAG
   ══════════════════════════════════════════════════════════════ */
/* v3.1.0 — CTA Box atmospheric depth — May 2026 */