/*
 * ═══════════════════════════════════════════════════════
 *  PRESURGE  —  Design System  v1.0
 *  Extracted from presurge.co  |  May 2026
 * ═══════════════════════════════════════════════════════
 *
 *  TABLE OF CONTENTS
 *  ─────────────────
 *  1.  Google Font Import
 *  2.  Design Tokens  (CSS Custom Properties)
 *      2a. Color Palette
 *      2b. Typography Scale
 *      2c. Spacing Scale
 *      2d. Border Radius
 *      2e. Shadows & Glows
 *      2f. Motion & Easing
 *  3.  Base / Reset
 *  4.  Typography Utilities
 *  5.  Backgrounds & Surfaces
 *  6.  Border Utilities
 *  7.  Shadow & Glow Utilities
 *  8.  Animations & Keyframes
 *      8a. Fade-in
 *      8b. Scroll-triggered reveal
 *      8c. Marquee
 *      8d. Marquee reveal
 *      8e. Pulse dot
 *  9.  Layout Utilities
 * 10.  Components
 *      10a. Custom Cursor
 *      10b. Nav Pill
 *      10c. Buttons
 *      10d. Problem Pills (Marquee Tags)
 *      10e. Cards — Dark
 *      10f. Cards — White + Red Footer
 *      10g. Numbered Step Badges
 *      10h. Scarcity / Warning Badge
 *      10i. Blueprint Grid Background
 *      10j. Glow Blob
 *      10k. Section Divider (SVG wave)
 *      10l. Mobile Slide Gallery
 *      10m. Logo Grid
 *      10n. Footer
 */


/* ════════════════════════════════════════════════════
   1.  GOOGLE FONT IMPORT
   ════════════════════════════════════════════════════ */

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


/* ════════════════════════════════════════════════════
   2.  DESIGN TOKENS
   ════════════════════════════════════════════════════ */

:root {

  /* ── 2a. COLOR PALETTE ─────────────────────────── */

  /* Backgrounds */
  --color-bg-base:          #020617;   /* slate-950  — page background        */
  --color-bg-elevated:      #0f172a;   /* slate-900  — raised surfaces         */
  --color-bg-card:          rgba(15, 23, 42, 0.60);  /* card bg, 60% opacity  */
  --color-bg-white:         #ffffff;   /* white section bg                     */

  /* Brand red */
  --color-accent:           #ef4444;   /* primary red — CTA, icons, dividers   */
  --color-accent-hover:     #f87171;   /* red-400 — hover state                */
  --color-accent-dark:      rgb(219, 38, 39);  /* slightly darker red (SVG)    */
  --color-accent-shift:     rgb(239, 68, 33);  /* orange-shifted red (emphasis) */
  --color-accent-muted:     rgba(239, 68, 68, 0.15); /* tinted bg             */
  --color-accent-border:    rgba(239, 68, 68, 0.20); /* tinted border         */
  --color-accent-glow-sm:   rgba(239, 68, 68, 0.30); /* button glow           */
  --color-accent-glow-lg:   rgba(239, 68, 68, 0.40); /* hero CTA glow         */

  /* Blue */
  --color-blue:             #2563eb;   /* step badge, marquee tint             */
  --color-blue-muted:       rgba(37, 99, 235, 0.15);
  --color-blue-border:      rgba(59, 130, 246, 0.20);

  /* Amber / Warning */
  --color-amber:            #f59e0b;
  --color-amber-muted:      rgba(245, 158, 11, 0.10);
  --color-amber-border:     rgba(245, 158, 11, 0.20);
  --color-amber-text:       #fbbf24;   /* amber-400                            */

  /* Emerald */
  --color-emerald:          #059669;

  /* Text */
  --color-text-primary:     #e2e8f0;   /* slate-200 — body copy on dark        */
  --color-text-secondary:   #cbd5e1;   /* slate-300 — secondary copy           */
  --color-text-muted:       #94a3b8;   /* slate-400 — labels, captions         */
  --color-text-subtle:      #64748b;   /* slate-500 — footer, dates            */
  --color-text-dark:        #0f172a;   /* slate-900 — body copy on white       */
  --color-text-dark-mid:    #334155;   /* slate-700 — secondary on white       */

  /* White tints (borders, overlays) */
  --color-white-05:         rgba(255, 255, 255, 0.05);
  --color-white-10:         rgba(255, 255, 255, 0.10);
  --color-white-20:         rgba(255, 255, 255, 0.20);
  --color-white-60:         rgba(255, 255, 255, 0.60);
  --color-white-90:         rgba(255, 255, 255, 0.90);


  /* ── 2b. TYPOGRAPHY ───────────────────────────── */

  --font-sans:   'Space Grotesk', sans-serif;

  /* Size scale (px → rem at 16px base) */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-hero:  clamp(2.25rem, 5vw, 3.75rem);  /* responsive hero h1 */

  /* Weight */
  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* Line height */
  --leading-none:     1;
  --leading-tight:    1.1;
  --leading-snug:     1.25;
  --leading-normal:   1.5;
  --leading-relaxed:  1.625;


  /* ── 2c. SPACING SCALE ───────────────────────── */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-2h:  0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-40:  10rem;     /* 160px */
  --space-48:  12rem;     /* 192px */

  /* Section rhythm */
  --section-pad-y:       var(--space-32);   /* standard vertical section pad */
  --section-pad-y-lg:    var(--space-40);   /* large sections                */
  --section-pad-x:       var(--space-6);    /* mobile horizontal pad         */
  --section-pad-x-md:    var(--space-8);    /* desktop horizontal pad        */
  --container-max:       80rem;             /* 1280px — max-w-7xl            */
  --container-max-prose: 64rem;             /* 1024px — max-w-5xl            */
  --container-max-text:  48rem;             /* 768px  — max-w-3xl            */


  /* ── 2d. BORDER RADIUS ───────────────────────── */

  --radius-sm:    0.5rem;    /*  8px — rounded-lg    */
  --radius-md:    0.75rem;   /* 12px — rounded-xl    */
  --radius-lg:    1rem;      /* 16px — rounded-2xl   */
  --radius-xl:    1.5rem;    /* 24px — rounded-3xl   */
  --radius-full:  9999px;    /* pill / rounded-full  */


  /* ── 2e. SHADOWS & GLOWS ─────────────────────── */

  --shadow-sm:      0 4px 30px rgba(0, 0, 0, 0.10);
  --shadow-md:      0 10px 15px -3px rgba(0, 0, 0, 0.10);
  --shadow-lg:      0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-card:    0 0 30px rgba(255, 255, 255, 0.05);   /* dark card subtle lift */
  --glow-red-sm:    0 0 15px rgba(239, 68, 68, 0.30);
  --glow-red-lg:    0 0 25px rgba(239, 68, 68, 0.40);
  --glow-blob-red:  radial-gradient(circle, rgba(239,68,68,0.05) 0%, transparent 70%);

  /* Blur values */
  --blur-sm:   8px;
  --blur-md:   16px;        /* nav glass */
  --blur-lg:   24px;
  --blur-glow: 100px;       /* background glow blobs */


  /* ── 2f. MOTION & EASING ─────────────────────── */

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);   /* all main transitions */
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   0.3s;
  --duration-base:   0.7s;
  --duration-slow:   0.8s;
  --duration-crawl:  75s;   /* marquee */
}


/* ════════════════════════════════════════════════════
   3.  BASE / RESET
   ════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family:      var(--font-sans);
  font-size:        var(--text-base);
  font-weight:      var(--weight-regular);
  line-height:      var(--leading-normal);
  color:            var(--color-text-primary);
  background-color: var(--color-bg-base);
  overflow-x:       hidden;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

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

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


/* ════════════════════════════════════════════════════
   4.  TYPOGRAPHY UTILITIES
   ════════════════════════════════════════════════════ */

/* --- Headings ---------------------------------------- */

.h-hero {
  font-size:      var(--text-hero);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color:          #fff;
  text-wrap:      pretty;
}

.h1 {
  font-size:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  color:          #fff;
  text-wrap:      pretty;
}

.h2 {
  font-size:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  color:          #fff;
  text-wrap:      pretty;
}

.h2--dark {
  color: var(--color-text-dark);
}

.h3 {
  font-size:      clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  letter-spacing: var(--tracking-tighter);
  color:          #fff;
}

/* --- Body copy --------------------------------------- */

.body-lg {
  font-size:   clamp(var(--text-base), 1.5vw, var(--text-xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
  text-wrap:   pretty;
}

.body-md {
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}

.body-sm {
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color:       var(--color-text-muted);
}

/* --- Labels / overlines ------------------------------ */

.label {
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-text-muted);
}

/* --- Accent text ------------------------------------- */

.text-accent        { color: var(--color-accent); }
.text-accent-shift  { color: var(--color-accent-shift); }
.text-white         { color: #fff; }
.text-muted         { color: var(--color-text-muted); }
.text-subtle        { color: var(--color-text-subtle); }

/* --- Quote marker ------------------------------------ */

.quote-icon {
  color:         var(--color-accent);
  margin-bottom: var(--space-4);
  opacity:       0.9;
}


/* ════════════════════════════════════════════════════
   5.  BACKGROUNDS & SURFACES
   ════════════════════════════════════════════════════ */

.bg-base     { background-color: var(--color-bg-base); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-card     { background-color: var(--color-bg-card); }
.bg-white    { background-color: var(--color-bg-white); }

/* Frosted glass (used in nav, pills, overlays) */
.glass {
  background:     rgba(2, 6, 23, 0.85);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}

.glass-light {
  background:     rgba(15, 23, 42, 0.80);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
}

/* Blueprint grid background (fixed, full-page) */
.blueprint-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-color: var(--color-bg-base);
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.03) 1px, transparent 1px),
    radial-gradient(circle at center, var(--color-bg-elevated) 0%, var(--color-bg-base) 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}

/* Glow blob — decorative radial background accent */
.glow-blob {
  position:        absolute;
  pointer-events:  none;
  border-radius:   50%;
  filter:          blur(var(--blur-glow));
  background:      radial-gradient(circle, rgba(239, 68, 68, 0.06) 0%, transparent 70%);
}

/* Section alternation */
.section-dark  { background-color: var(--color-bg-base);    color: var(--color-text-primary); }
.section-white { background-color: var(--color-bg-white);   color: var(--color-text-dark); }


/* ════════════════════════════════════════════════════
   6.  BORDER UTILITIES
   ════════════════════════════════════════════════════ */

.border-subtle     { border: 1px solid var(--color-white-10); }
.border-faint      { border: 1px solid var(--color-white-05); }
.border-medium     { border: 1px solid var(--color-white-20); }

.border-accent     { border: 1px solid var(--color-accent-border); }
.border-blue       { border: 1px solid var(--color-blue-border); }
.border-amber      { border: 1px solid var(--color-amber-border); }

/* Divider line — thin red horizontal rule */
.divider-red {
  width:  4rem;
  height: 2px;
  background-color: rgba(239, 68, 68, 0.60);
  margin: var(--space-8) auto;
  border: none;
}


/* ════════════════════════════════════════════════════
   7.  SHADOW & GLOW UTILITIES
   ════════════════════════════════════════════════════ */

.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }
.shadow-card { box-shadow: var(--shadow-card); }

.glow-red-sm { box-shadow: var(--glow-red-sm); }
.glow-red-lg { box-shadow: var(--glow-red-lg); }


/* ════════════════════════════════════════════════════
   8.  ANIMATIONS & KEYFRAMES
   ════════════════════════════════════════════════════ */

/* ── 8a. Fade-in on load (hero elements) ─────────── */

@keyframes fadeInUp {
  from {
    opacity:   0;
    transform: translateY(25px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.fade-in-up {
  opacity:   0;
  transform: translateY(25px);
  animation: fadeInUp var(--duration-slow) var(--ease-out-expo) forwards;
}

/* Stagger helpers via animation-delay */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }


/* ── 8b. Scroll-triggered reveal ─────────────────── */

/*
  Usage:
    1. Add class `reveal` to any element you want revealed on scroll.
    2. In JS, use an IntersectionObserver (threshold: 0.05) to add
       the `.visible` class when the element enters the viewport.
*/

.reveal {
  opacity:    0;
  transform:  translateY(30px);
  transition:
    opacity   var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}

.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* Minimal JS to wire it up:
 *
 *   const observer = new IntersectionObserver(entries => {
 *     entries.forEach(e => {
 *       if (e.isIntersecting) {
 *         e.target.classList.add('visible');
 *         observer.unobserve(e.target);
 *       }
 *     });
 *   }, { threshold: 0.05, rootMargin: '0px 0px -40px 0px' });
 *
 *   document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
 */


/* ── 8c. Marquee ─────────────────────────────────── */

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Container — clips the infinite strip */
.marquee-track {
  position: relative;
  width:    100%;
  display:  flex;
  overflow: hidden;
  padding:  0.25rem 0;
}

/* The moving strip — must contain 2× the unique items for seamless loop */
.marquee-strip {
  display:     flex;
  width:       max-content;
  flex-shrink: 0;
}

.marquee-strip--left  { animation: marquee-left  var(--duration-crawl) linear infinite; }
.marquee-strip--right { animation: marquee-right var(--duration-crawl) linear infinite; }

/* Pause on hover (whole marquee zone) */
.marquee-zone:hover .marquee-strip--left,
.marquee-zone:hover .marquee-strip--right {
  animation-play-state: paused;
}

/* Gap between pills inside a strip */
.marquee-strip { gap: 2rem; padding-right: 2rem; }
@media (min-width: 768px) {
  .marquee-strip { gap: 2.5rem; padding-right: 2.5rem; }
}


/* ── 8d. Marquee section reveal (opacity only) ───── */

@keyframes marqueeReveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.marquee-reveal {
  animation: marqueeReveal 0.9s var(--ease-out-expo) 0.2s both;
}


/* ── 8e. Pulse dot ───────────────────────────────── */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.pulse-dot {
  display:       inline-block;
  width:         0.625rem;   /* 10px */
  height:        0.625rem;
  border-radius: 50%;
  background:    var(--color-accent);
  animation:     pulse 1.5s ease-in-out infinite;
  flex-shrink:   0;
}


/* ── 8f. Spin slow ───────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
.spin-slow { animation: spin 30s linear infinite; }


/* ════════════════════════════════════════════════════
   9.  LAYOUT UTILITIES
   ════════════════════════════════════════════════════ */

/* Centered container */
.container {
  width:     100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--section-pad-x);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--section-pad-x-md); }
}

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

/* Section block */
.section {
  position:       relative;
  z-index:        10;
  padding-block:  var(--section-pad-y);
  padding-inline: var(--section-pad-x);
}
@media (min-width: 768px) {
  .section { padding-inline: var(--section-pad-x-md); }
}

.section--lg { padding-block: var(--section-pad-y-lg); }

/* Stack (vertical flex with gap) */
.stack { display: flex; flex-direction: column; }
.stack--4  { gap: var(--space-4); }
.stack--6  { gap: var(--space-6); }
.stack--8  { gap: var(--space-8); }
.stack--12 { gap: var(--space-12); }
.stack--16 { gap: var(--space-16); }

/* Cluster (horizontal flex with wrapping) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; }
.cluster--4  { gap: var(--space-4); }
.cluster--6  { gap: var(--space-6); }
.cluster--8  { gap: var(--space-8); }

/* Scrollbar hide */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }


/* ════════════════════════════════════════════════════
   10.  COMPONENTS
   ════════════════════════════════════════════════════ */


/* ── 10a. Custom Cursor ──────────────────────────── */

body {
  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="%23ef4444" stroke-width="2" fill="rgba(239%2C68%2C68%2C0.05)"/></svg>') 12 12, auto;
}

a, button, [onclick], .cursor-pointer, input, select, textarea {
  cursor: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" stroke="%23ef4444" stroke-width="2" fill="rgba(239%2C68%2C68%2C0.3)"/></svg>') 12 12, pointer !important;
}


/* ── 10b. Nav Pill ───────────────────────────────── */

.nav-pill {
  background:          rgba(2, 6, 23, 0.85);
  backdrop-filter:     blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border:              1px solid var(--color-white-10);
  border-radius:       var(--radius-full);
  box-shadow:          var(--shadow-sm);
  height:              4rem;       /* 64px */
  display:             flex;
  align-items:         center;
  justify-content:     space-between;
  padding-inline:      var(--space-6);
  max-width:           var(--container-max);
  margin-inline:       auto;
}

/* Nav links */
.nav-link {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color:          var(--color-text-secondary);
  transition:     color var(--duration-fast) var(--ease-in-out);
}
.nav-link:hover { color: #fff; }


/* ── 10c. Buttons ────────────────────────────────── */

/* Base button shell */
.btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-2);
  font-family:     var(--font-sans);
  font-weight:     var(--weight-bold);
  border-radius:   var(--radius-full);
  transition:      background-color var(--duration-fast) var(--ease-in-out),
                   transform        var(--duration-fast) var(--ease-in-out),
                   box-shadow       var(--duration-fast) var(--ease-in-out),
                   color            var(--duration-fast) var(--ease-in-out);
  white-space:     nowrap;
}

/* Primary — red filled */
.btn--primary {
  background-color: var(--color-accent);
  color:            #fff;
  font-size:        var(--text-xs);
  letter-spacing:   0px;
  padding:          0.625rem var(--space-5);   /* 10px 20px — nav size */
  box-shadow:       var(--glow-red-sm);
}
.btn--primary:hover {
  background-color: var(--color-accent-hover);
  transform:        scale(1.05);
}

/* Primary large — hero CTA */
.btn--primary-lg {
  font-size:  clamp(var(--text-base), 1.5vw, var(--text-xl));
  padding:    var(--space-5) var(--space-14);
  box-shadow: var(--glow-red-lg);
}
.btn--primary-lg:hover { transform: scale(1.05); }

/* Outline — border only, fills white on hover */
.btn--outline {
  background-color: transparent;
  color:            var(--color-text-secondary);
  border:           1px solid var(--color-text-subtle);
  font-size:        var(--text-sm);
  font-weight:      var(--weight-semibold);
  letter-spacing:   var(--tracking-wide);
  padding:          var(--space-3) var(--space-6);
  box-shadow:       var(--shadow-md);
}
.btn--outline:hover {
  background-color: #fff;
  color:            var(--color-text-dark);
}


/* ── 10d. Problem Pills (Marquee Tags) ───────────── */

/* Shared pill shell */
.pill {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  border-radius:   var(--radius-full);
  padding:         1rem 1.5rem;
  font-size:       clamp(var(--text-sm), 1.2vw, var(--text-base));
  font-weight:     var(--weight-bold);
  letter-spacing:  var(--tracking-wide);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  white-space:     nowrap;
  transition:      transform var(--duration-fast) var(--ease-out-expo);
  flex-shrink:     0;
}
.pill:hover { transform: scale(1.05); }

/* White variant */
.pill--white {
  background: rgba(255, 255, 255, 0.10);
  border:     1px solid var(--color-white-20);
  color:      #fff;
}

/* Blue tint variant */
.pill--blue {
  background: var(--color-blue-muted);
  border:     1px solid var(--color-blue-border);
  color:      var(--color-white-90);
}

/* Red tint variant */
.pill--red {
  background: var(--color-accent-muted);
  border:     1px solid var(--color-accent-border);
  color:      var(--color-white-90);
}


/* ── 10e. Cards — Dark ───────────────────────────── */

.card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-white-05);
  border-radius: var(--radius-lg);
  padding:       var(--space-8) var(--space-10);
  box-shadow:    var(--shadow-card);
  transition:    border-color var(--duration-fast) var(--ease-in-out);
}
.card:hover { border-color: rgba(239, 68, 68, 0.20); }

/* Photo card — image fills the container */
.card--photo {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--radius-lg);
  border:        1px solid var(--color-white-10);
  box-shadow:    var(--shadow-card);
}
.card--photo img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-out-expo);
}
.card--photo:hover img { transform: scale(1.05); }

/* Photo card label badge */
.card__label {
  position:   absolute;
  top:        1rem;
  left:       1rem;
  z-index:    10;
  background: rgba(15, 23, 42, 0.80);
  backdrop-filter: blur(var(--blur-md));
  border:     1px solid var(--color-white-20);
  color:      #fff;
  font-size:  var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  padding:    0.375rem 0.75rem;
  border-radius: var(--radius-full);
}

/* Testimonial card with white bg + red footer */
.card--testimonial {
  background:    var(--color-bg-white);
  border-radius: var(--radius-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-lg);
  display:       flex;
  flex-direction: column;
  transition:    transform var(--duration-fast) var(--ease-out-expo);
}
.card--testimonial:hover { transform: scale(1.02); }

.card--testimonial__body {
  padding:    var(--space-8);
  flex-grow:  1;
  display:    flex;
  flex-direction: column;
  gap:        var(--space-4);
}

.card--testimonial__quote {
  font-size:   var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-dark);
  flex-grow:   1;
}
@media (min-width: 768px) {
  .card--testimonial__quote { font-size: var(--text-lg); }
}

.card--testimonial__footer {
  background-color: var(--color-accent);
  padding:          var(--space-6) var(--space-8);
  margin-top:       auto;
}

.card--testimonial__name {
  font-weight:    var(--weight-bold);
  color:          #fff;
  font-size:      var(--text-base);
  letter-spacing: var(--tracking-tight);
}

.card--testimonial__role {
  color:       rgba(254, 202, 202, 1);  /* red-200 */
  font-size:   var(--text-xs);
  font-weight: var(--weight-medium);
  margin-top:  0.25rem;
  line-height: var(--leading-relaxed);
}

/* Large featured testimonial (image on top) */
.card--testimonial-featured .card--testimonial__image {
  width:    100%;
  height:   22rem;
  overflow: hidden;
  flex-shrink: 0;
}
.card--testimonial-featured .card--testimonial__image img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: top;
}


/* ── 10f. Testimonial Block (logo + quote) ───────── */

.testimonial-block {
  background:    rgba(15, 23, 42, 0.80);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border:        1px solid var(--color-white-10);
  border-radius: var(--radius-xl);
  padding:       var(--space-8) var(--space-12);
  box-shadow:    var(--shadow-lg);
  position:      relative;
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  gap:           var(--space-8);
}
@media (min-width: 768px) {
  .testimonial-block { flex-direction: row; align-items: center; }
}

.testimonial-block__bg {
  position:   absolute;
  inset:      0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.05), rgba(239, 68, 68, 0.05));
  pointer-events: none;
}

.testimonial-block__quote {
  font-size:   clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: var(--weight-medium);
  line-height: var(--leading-relaxed);
  color:       var(--color-text-secondary);
}


/* ── 10g. Numbered Step Badges ───────────────────── */

.step-badge {
  position:        absolute;
  top:             -1.5rem;
  left:            1.5rem;
  width:           3rem;
  height:          3rem;
  border-radius:   var(--radius-md);
  background:      var(--color-accent);
  color:           #fff;
  font-weight:     var(--weight-bold);
  font-size:       var(--text-lg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  box-shadow:      var(--shadow-md);
  flex-shrink:     0;
}

.step-badge--blue    { background: var(--color-blue); }
.step-badge--red     { background: var(--color-accent); }
.step-badge--emerald { background: var(--color-emerald); }

/* Step card wrapper (position: relative needed for absolute badge) */
.step-card {
  background:    var(--color-bg-card);
  border:        1px solid var(--color-white-05);
  border-radius: var(--radius-lg);
  padding:       var(--space-8) var(--space-10);
  position:      relative;
  display:       flex;
  flex-direction: column;
  justify-content: center;
  min-height:    10rem;
  transition:    border-color var(--duration-fast) var(--ease-in-out);
}

.step-card__title {
  font-size:   clamp(var(--text-base), 1.5vw, var(--text-xl));
  font-weight: var(--weight-bold);
  color:       #fff;
  line-height: var(--leading-snug);
  margin-top:  var(--space-2);
}


/* ── 10h. Scarcity / Warning Badge ──────────────── */

.badge-warning {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  background:      var(--color-amber-muted);
  border:          1px solid var(--color-amber-border);
  color:           var(--color-amber-text);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  letter-spacing:  var(--tracking-widest);
  text-transform:  uppercase;
  padding:         0.5rem 1rem;
  border-radius:   var(--radius-full);
}


/* ── 10i. Blueprint Grid Background ─────────────── */
/* (defined above in §5, referenced here for completeness) */


/* ── 10j. Glow Blob ──────────────────────────────── */

.glow-blob--red {
  background: radial-gradient(circle, rgba(239, 68, 68, 0.05) 0%, transparent 70%);
}
.glow-blob--blue {
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
}


/* ── 10k. Section Wave Divider ───────────────────── */

/*
  The wave dividers are inline SVGs positioned absolute at
  top/bottom of white sections.

  Dark → White (top of white section):
    <svg viewBox="0 0 1440 80" preserveAspectRatio="none">
      <path d="M0,0 C360,80 1080,0 1440,60 L1440,0 Z" fill="#020617"/>
    </svg>

  White → Dark (bottom of white section):
    <svg viewBox="0 0 1440 80" preserveAspectRatio="none">
      <path d="M0,80 C360,0 1080,80 1440,20 L1440,80 Z" fill="#020617"/>
    </svg>

  Apply these classes to the SVG element:
*/

.wave-divider {
  position:       absolute;
  left:           0;
  width:          100%;
  pointer-events: none;
}
.wave-divider--top    { top:    0; margin-top:    -1px; }
.wave-divider--bottom { bottom: 0; margin-bottom: -1px; }


/* ── 10l. Mobile Slide Gallery ───────────────────── */

.gallery {
  overflow:      hidden;
  border-radius: var(--radius-lg);
}

.gallery__track {
  display:    flex;
  transition: transform 0.7s var(--ease-out-expo);
}

.gallery__slide {
  flex-shrink: 0;
  width:       100%;
  position:    relative;
}

/* Dot indicators */
.gallery__dots {
  display:         flex;
  justify-content: center;
  gap:             0.5rem;
  margin-top:      1rem;
}

.gallery__dot {
  width:         0.5rem;
  height:        0.5rem;
  border-radius: 50%;
  background:    var(--color-white-20);
  transition:    background-color var(--duration-fast) var(--ease-in-out),
                 transform        var(--duration-fast) var(--ease-in-out);
  border:        none;
}

.gallery__dot--active {
  background: var(--color-white-60);
  transform:  scale(1.3);
}

/*
  Minimal JS to wire up:

    let idx = 0;
    const total = document.querySelectorAll('.gallery__slide').length;

    function goTo(n) {
      idx = n;
      document.querySelector('.gallery__track').style.transform =
        `translateX(-${n * 100}%)`;
      document.querySelectorAll('.gallery__dot').forEach((d, i) => {
        d.classList.toggle('gallery__dot--active', i === n);
      });
    }

    setInterval(() => goTo((idx + 1) % total), 3000);
*/


/* ── 10m. Logo Grid ──────────────────────────────── */

.logo-grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             2rem 3.5rem;
  opacity:         0.85;
  transition:      opacity var(--duration-fast) var(--ease-in-out);
}
.logo-grid:hover { opacity: 1; }

.logo-grid__item {
  height:     3rem;     /* 48px */
  width:      auto;
  object-fit: contain;
  transition: transform var(--duration-fast) var(--ease-in-out);
}
.logo-grid__item:hover { transform: scale(1.10); }

.logo-grid__label {
  width:          100%;
  text-align:     center;
  font-size:      var(--text-xs);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-text-muted);
  margin-bottom:  var(--space-10);
}


/* ── 10n. Footer ─────────────────────────────────── */

.footer {
  border-top:       1px solid var(--color-white-10);
  background-color: rgba(2, 6, 23, 0.80);
  padding-block:    var(--space-16);
  position:         relative;
  z-index:          10;
}

.footer__inner {
  max-width:       var(--container-max);
  margin-inline:   auto;
  padding-inline:  var(--section-pad-x);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-8);
}
@media (min-width: 768px) {
  .footer__inner {
    flex-direction:  row;
    justify-content: space-between;
    padding-inline:  var(--section-pad-x-md);
  }
}

.footer__logo {
  height:  1.25rem;
  opacity: 0.60;
}

.footer__copy {
  font-size: var(--text-xs);
  color:     var(--color-text-subtle);
  margin-top: var(--space-3);
}

.footer__links {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         1.5rem 2rem;
}

.footer__link {
  font-size:   var(--text-xs);
  font-weight: var(--weight-medium);
  color:       var(--color-text-muted);
  transition:  color var(--duration-fast) var(--ease-in-out);
}
.footer__link:hover { color: #fff; }


/* ════════════════════════════════════════════════════
   11.  RESEARCH & INSIGHTS  (Article / Blog Pages)
   ════════════════════════════════════════════════════
   These pages use a white background with blue-tinted
   grid lines. The nav pill and CTA section are shared
   with the main site — no overrides needed there.
   ════════════════════════════════════════════════════ */


/* ── 11a. Additional Color Tokens (light theme) ──── */

:root {
  /* Article page backgrounds */
  --color-article-bg:        #ffffff;
  --color-article-bg-grid:   rgba(59, 130, 246, 0.035);
  --color-article-bg-radial: rgba(59, 130, 246, 0.040);

  /* Article text — blue-950 palette */
  --color-article-heading:   #172554;   /* blue-950  — hero h1              */
  --color-article-subhead:   #1e3a8a;   /* blue-900  — pull quote text       */
  --color-article-body:      #334155;   /* slate-700 — body paragraphs       */
  --color-article-secondary: #475569;   /* slate-600 — captions, meta        */
  --color-article-border:    #e2e8f0;   /* slate-200 — light dividers        */

  /* Insight card */
  --color-insight-bg:        #dc2626;   /* red-600   — solid card fill       */
  --color-insight-shadow:    rgba(220, 38, 38, 0.20);

  /* Category badge (light variant) */
  --color-badge-light-bg:    #fef2f2;   /* red-50                            */
  --color-badge-light-border: #ef4444;  /* red-500                           */
  --color-badge-light-text:  #dc2626;   /* red-600                           */

  /* Pull-quote block */
  --color-pull-quote-bg:     #0f172a;   /* slate-900                         */
}


/* ── 11b. Blueprint Grid — Light Variant ─────────── */

.blueprint-bg--light {
  position:        fixed;
  inset:           0;
  pointer-events:  none;
  z-index:         -1;
  background-color: var(--color-article-bg);
  background-image:
    linear-gradient(var(--color-article-bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-article-bg-grid) 1px, transparent 1px),
    radial-gradient(circle at center, var(--color-article-bg-radial) 0%, transparent 60%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
}


/* ── 11c. Article Hero ───────────────────────────── */

.article-hero {
  padding-top:    10rem;   /* clears fixed nav */
  padding-bottom: 3rem;
  text-align:     center;
}

.article-hero__eyebrow {
  /* Category badge — light version */
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  background:      var(--color-badge-light-bg);
  border:          1px solid var(--color-badge-light-border);
  color:           var(--color-badge-light-text);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-bold);
  letter-spacing:  var(--tracking-widest);
  text-transform:  uppercase;
  padding:         0.25rem 0.75rem;
  border-radius:   var(--radius-full);
  margin-bottom:   var(--space-6);
}

.article-hero__title {
  font-size:      clamp(var(--text-3xl), 5vw, var(--text-6xl));
  font-weight:    var(--weight-bold);
  color:          var(--color-article-heading);
  letter-spacing: var(--tracking-tighter);
  line-height:    var(--leading-tight);
  margin-bottom:  var(--space-8);
  text-wrap:      pretty;
  max-width:      52rem;
  margin-inline:  auto;
}

.article-hero__lead {
  font-size:     clamp(var(--text-base), 1.5vw, var(--text-lg));
  color:         var(--color-article-secondary);
  line-height:   var(--leading-relaxed);
  max-width:     40rem;
  margin-inline: auto;
}


/* ── 11d. Article Prose ──────────────────────────── */
/*
  Wrap your article body in <div class="article-prose">
  for consistent long-form reading typography.
*/

.article-prose {
  max-width:   48rem;   /* ~768px — comfortable reading width */
  margin-inline: auto;
  color:       var(--color-article-body);
  font-size:   var(--text-base);
  line-height: var(--leading-relaxed);
}

/* Paragraphs */
.article-prose p {
  margin-bottom: var(--space-6);
  line-height:   1.8;
  color:         var(--color-article-body);
  text-wrap:     pretty;
}

/* Headings within prose */
.article-prose h2 {
  font-size:      clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  font-weight:    var(--weight-bold);
  color:          var(--color-article-heading);
  letter-spacing: var(--tracking-tighter);
  line-height:    var(--leading-snug);
  margin-top:     var(--space-12);
  margin-bottom:  var(--space-4);
}

.article-prose h3 {
  font-size:      clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight:    var(--weight-bold);
  color:          var(--color-article-heading);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-snug);
  margin-top:     var(--space-10);
  margin-bottom:  var(--space-3);
}

/* Bold / strong */
.article-prose strong {
  color:       var(--color-insight-bg);  /* red-600 */
  font-weight: var(--weight-bold);
}

/* Unordered lists — em-dash style */
.article-prose ul {
  list-style:    none;
  padding-left:  0;
  margin-bottom: var(--space-6);
}

.article-prose li {
  position:      relative;
  padding-left:  1.5rem;
  margin-bottom: var(--space-3);
  color:         var(--color-article-body);
  line-height:   var(--leading-relaxed);
}

.article-prose li::before {
  content:     "—";
  position:    absolute;
  left:        0;
  color:       var(--color-insight-bg);  /* red-600 */
  font-weight: var(--weight-bold);
}

/* Ordered lists */
.article-prose ol {
  padding-left:  1.5rem;
  margin-bottom: var(--space-6);
  counter-reset: article-counter;
  list-style:    none;
}

.article-prose ol li {
  counter-increment: article-counter;
  padding-left:      1.75rem;
}

.article-prose ol li::before {
  content:     counter(article-counter) ".";
  color:       var(--color-insight-bg);
  font-weight: var(--weight-bold);
}

/* Inline border-left opening quote */
.article-prose .opening-quote {
  font-size:    clamp(var(--text-lg), 2vw, var(--text-xl));
  font-weight:  var(--weight-medium);
  color:        var(--color-article-subhead);  /* blue-900 */
  border-left:  4px solid var(--color-accent);
  padding-left: var(--space-6);
  margin-bottom: var(--space-12);
  line-height:  var(--leading-relaxed);
}


/* ── 11e. Pull Quote Block ───────────────────────── */

.pull-quote {
  background:    var(--color-pull-quote-bg);   /* slate-900 */
  border-radius: var(--radius-md);
  padding:       var(--space-8);
  text-align:    center;
  box-shadow:    var(--shadow-lg);
  margin-block:  var(--space-12);
}

.pull-quote__text {
  font-size:   clamp(var(--text-lg), 2vw, var(--text-2xl));
  font-weight: var(--weight-bold);
  color:       #fff;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}

.pull-quote__sub {
  font-size: var(--text-sm);
  color:     var(--color-text-muted);
}


/* ── 11f. Insight Cards Grid ─────────────────────── */
/*
  Used in the "What they didn't know" section.
  Solid red cards with an oversized ghost icon.
*/

.insight-grid {
  display:               grid;
  grid-template-columns: 1fr;
  gap:                   var(--space-6);
  margin-bottom:         var(--space-12);
}

@media (min-width: 768px) {
  .insight-grid { grid-template-columns: repeat(2, 1fr); }
}

.insight-card {
  background:    var(--color-insight-bg);
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-lg);
  padding:       var(--space-8);
  position:      relative;
  display:       flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height:    10rem;
  overflow:      hidden;
  box-shadow:    0 10px 15px -3px var(--color-insight-shadow);
  transition:    transform var(--duration-fast) var(--ease-out-expo),
                 box-shadow var(--duration-fast) var(--ease-in-out);
}

.insight-card:hover {
  transform:  translateY(-3px);
  box-shadow: 0 20px 25px -5px var(--color-insight-shadow);
}

.insight-card__title {
  color:          #fff;
  font-size:      var(--text-xl);
  font-weight:    var(--weight-bold);
  line-height:    var(--leading-snug);
  margin-bottom:  var(--space-2);
  position:       relative;
  z-index:        10;
}

.insight-card__body {
  color:      rgba(255, 255, 255, 0.90);
  font-size:  var(--text-sm);
  position:   relative;
  z-index:    10;
  line-height: var(--leading-relaxed);
}

/* Ghost icon — decorative background icon */
.insight-card__icon {
  position:      absolute;
  bottom:        -1rem;
  right:         -1rem;
  font-size:     6rem;
  color:         rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index:       0;
  transform:     rotate(-15deg);
}


/* ── 11g. Section Label (overline above insight grid) */

.section-label {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-bold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-article-secondary);
  text-align:     center;
  margin-bottom:  var(--space-6);
}


/* ── 11h. Article Footer (light) ─────────────────── */
/*
  The article page uses a simpler light footer.
  Use .footer--light instead of .footer on these pages.
*/

.footer--light {
  border-top:    1px solid var(--color-article-border);
  background:    var(--color-article-bg);
  padding-block: var(--space-12);
  text-align:    center;
}

.footer--light .footer__copy {
  color: var(--color-article-secondary);
}


/* ════════════════════════════════════════════════════
   12.  INNER PAGES  (forclubs, methodology, research, clients)
   ════════════════════════════════════════════════════ */

/* ── 12a. Blueprint Grid — Inner Page Variant ──────── */
.blueprint-bg--inner {
  position:   fixed;
  inset:      0;
  width:      100vw;
  height:     100dvh;
  pointer-events: none;
  z-index:    -1;
  background-color: #020617;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.50) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.50) 1px, transparent 1px),
    radial-gradient(circle at center, #1e293b 0%, #020617 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  background-blend-mode: overlay, overlay, normal;
}

/* ── 12b. Scroll Reveal Alias ──────────────────────── */
.animate-on-scroll {
  opacity:   0;
  transform: translateY(25px);
  transition:
    opacity   var(--duration-slow) var(--ease-out-expo),
    transform var(--duration-slow) var(--ease-out-expo);
  will-change: opacity, transform;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 768px) {
  .animate-on-scroll { transition-delay: 0s !important; }
}

/* ── 12c. Mobile Menu Transitions ─────────────────── */
#mobile-menu {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
#mobile-menu.hidden {
  opacity: 0; pointer-events: none; transform: translateY(-10px);
}
#mobile-menu:not(.hidden) {
  opacity: 1; pointer-events: all; transform: translateY(0);
}

/* ── 12d. Form Autofill ─────────────────────────── */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0f172a inset !important;
  -webkit-text-fill-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* ── 12e. Modal Overlay ─────────────────────────── */
.modal-overlay {
  position:        fixed;
  inset:           0;
  background:      rgba(0, 0, 0, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.2s ease-in-out;
  padding:         1rem;
}
.modal-overlay.active  { opacity: 1; pointer-events: all; }
.modal-content {
  transform:  scale(0.95);
  transition: transform 0.2s ease-in-out;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-overlay.active .modal-content { transform: scale(1); }

/* ── 12f. SVG Flow Animation ──────────────────────── */
@keyframes flow-march { to { stroke-dashoffset: -24; } }
.animate-flow-path { animation: flow-march 1s linear infinite; }

/* ── 12g. System List (Methodology page) ──────────── */
.system-list-item {
  display:       flex;
  align-items:   center;
  gap:           12px;
  padding:       12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition:    background-color 0.2s;
  font-size:     0.95rem;
  font-weight:   500;
  color:         #e2e8f0;
}
.system-list-item:last-child { border-bottom: none; }
.system-list-item:hover { background-color: rgba(255,255,255,0.05); border-radius: 8px; }
.system-icon { color: #ef4444; flex-shrink: 0; width: 20px; height: 20px; }
.bg-white .system-list-item { border-bottom: 1px solid rgba(0,0,0,0.1); color: #1e293b; }
.bg-white .system-list-item:hover { background-color: rgba(0,0,0,0.03); }

/* ── 12h. Single-Direction Marquee ───────────────── */
@keyframes marquee-single {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee-single 40s linear infinite;
  width: max-content;
}
.group:hover .animate-marquee { animation-play-state: paused; }

/* ── 12i. Details / Summary Reset ────────────────── */
details > summary                        { list-style: none; }
details > summary::marker                { display: none; }
details > summary::-webkit-details-marker { display: none; }

/* ── 12j. Bento Cards (Research page) ────────────── */
.bento-card {
  border-radius:   16px;
  overflow:        hidden;
  position:        relative;
  transition:      all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display:         flex;
  flex-direction:  column;
  text-decoration: none;
  border:          1px solid rgba(255, 255, 255, 0.1);
}
.bento-card:hover {
  transform:    translateY(-4px) scale(1.01);
  box-shadow:   0 20px 40px -10px rgba(0,0,0,0.5);
  border-color: rgba(255, 255, 255, 0.3);
}
.tag-badge {
  background:     rgba(255, 255, 255, 0.15);
  color:          #ffffff;
  border:         1px solid rgba(255, 255, 255, 0.2);
  padding:        4px 10px;
  border-radius:  99px;
  font-size:      0.7rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display:        inline-block;
  margin-bottom:  8px;
}
.bg-card-blue        { background-color: #1e3a8a; }
.bg-card-blue:hover  { background-color: #172554; }
.bg-card-red         { background-color: #991b1b; }
.bg-card-red:hover   { background-color: #7f1d1d; }
.bg-card-white       { background-color: #ffffff; border-color: rgba(255,255,255,0.8); }
.bg-card-white:hover { background-color: #f8fafc; border-color: #ffffff; }

/* ── 12k. Bento Items (Clients page) ─────────────── */
.bento-item {
  background:    rgba(15, 23, 42, 0.6);
  border:        1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem;
  transition:    all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow:      hidden;
  position:      relative;
  cursor:        pointer;
}
.bento-item:hover {
  transform:    translateY(-4px) scale(1.01);
  border-color: rgba(239, 68, 68, 0.5);
  box-shadow:   0 20px 40px -10px rgba(239, 68, 68, 0.15);
  z-index:      10;
}
.bento-item::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(2, 6, 23, 0.9), transparent);
  opacity:    0.6;
  transition: opacity 0.3s;
}
.bento-item:hover::after { opacity: 0.4; }
.bento-content           { position: relative; z-index: 20; }
.bento-item.cfci-card {
  background:   linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
  border-color: rgba(255, 255, 255, 0.2);
}
.bento-item.cfci-card:hover {
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:   0 20px 40px -10px rgba(234, 88, 12, 0.3);
}