/* ============================================================
   LOCVS — Commercial Landing CSS v2 (refined per OrbAI directives)
   Anthracite #2C2C2E, 6-layer shadows, specular highlights,
   centered pill badges, sans-serif display, glass orb hero.
   ============================================================ */

:root {
  --cloud: #F2F0EB;
  --cloud-2: #EDEBE6;
  --white: #FFFFFF;
  --anthra: #2C2C2E;          /* Anthracite — never #000 */
  --ink: #2C2C2E;
  --ink-2: #555558;
  --ink-3: #84848A;
  --ink-4: #B0B0B6;
  --rule: rgba(44,44,46,0.10);
  --rule-soft: rgba(44,44,46,0.06);

  --frost-62: rgba(255,255,255,0.62);
  --frost-70: rgba(255,255,255,0.70);
  --frost-85: rgba(255,255,255,0.85);
  --frost-95: rgba(255,255,255,0.95);

  /* 6-layer progressive shadow (OrbAI rhythm) + white inset specular */
  --sh-card:
    rgba(0,0,0,0.08) 0px 0.707px 0.707px -0.667px,
    rgba(0,0,0,0.08) 0px 1.807px 1.807px -1.333px,
    rgba(0,0,0,0.07) 0px 3.622px 3.622px -2px,
    rgba(0,0,0,0.07) 0px 6.866px 6.866px -2.667px,
    rgba(0,0,0,0.05) 0px 13.647px 13.647px -3.333px,
    rgba(0,0,0,0.02) 0px 30px 30px -4px,
    rgb(255,255,255) 0px 3px 1px 0px inset;

  --sh-lifted:
    rgba(0,0,0,0.10) 0px 0.707px 0.707px -0.5px,
    rgba(0,0,0,0.10) 0px 2px 2px -1px,
    rgba(0,0,0,0.09) 0px 4.5px 4.5px -1.5px,
    rgba(0,0,0,0.08) 0px 9px 9px -2px,
    rgba(0,0,0,0.07) 0px 18px 18px -2.5px,
    rgba(0,0,0,0.04) 0px 40px 40px -3px,
    rgba(255,255,255,0.95) 0px 3px 1px 0px inset;

  --sh-resting:
    rgba(0,0,0,0.05) 0px 0.5px 0.5px -0.5px,
    rgba(0,0,0,0.05) 0px 1.5px 1.5px -1px,
    rgba(0,0,0,0.04) 0px 4px 4px -1.5px,
    rgba(255,255,255,0.9) 0px 1px 0.5px 0 inset;

  --sh-button:
    rgba(20,24,32,0.55) 0 1px 2px -1px,
    rgba(20,24,32,0.45) 0 4px 8px -2px,
    rgba(20,24,32,0.25) 0 12px 22px -4px,
    rgba(255,255,255,0.10) 0 0.5px 0 0 inset;

  --sh-badge:
    rgba(0,0,0,0.06) 0 0.5px 0.5px -0.5px,
    rgba(0,0,0,0.06) 0 1.5px 1.5px -1px,
    rgba(0,0,0,0.05) 0 3.5px 3.5px -1.5px,
    rgba(0,0,0,0.04) 0 8px 8px -2px,
    rgba(0,0,0,0.03) 0 18px 18px -2.5px,
    rgba(255,255,255,1)   0 1.2px 0.4px 0 inset;

  --ez-heavy: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layout primitives -------------------------------------------------- */

body { background: var(--cloud); color: var(--ink); }
.b-wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.b-section { padding: 120px 0; position: relative; }
.b-section.is-tight { padding: 96px 0; }
.b-section.is-white { background: var(--white); }
.b-section.is-cloud { background: var(--cloud); }
.b-section.is-ink {
  background: var(--anthra);
  color: var(--cloud);
  position: relative;
  overflow: hidden;
}
/* Transitional bleed at the light→dark threshold.
   Makes Problem / Waitlist rise out of Cloud Dancer rather than
   slamming into a hard edge.

   Updated 2026-04-22 (Implementation Directive v2 §11.1): the
   bleed now extends to 120px and picks up a second cooler stop
   so the gradient reads less like a flat tint overlay and more
   like the cloud-dancer surface dissolving into ink. The
   section keeps overflow: hidden, so the bleed stays inside
   the block — which is the right constraint for a page that
   needs to remain embedded-safe. */
.b-section.is-ink::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    rgba(242,240,235,0.14) 0%,
    rgba(242,240,235,0.06) 30%,
    rgba(242,240,235,0.02) 60%,
    rgba(242,240,235,0.00) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Symmetric bleed at the dark→light threshold — the bottom of
   every ink section fades toward cloud-dancer the same way the
   top fades in from it. Completes the "walk through a doorway"
   metaphor that the directive (§11.1) calls for. */
.b-section.is-ink::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(0deg,
    rgba(242,240,235,0.10) 0%,
    rgba(242,240,235,0.04) 30%,
    rgba(242,240,235,0.01) 60%,
    rgba(242,240,235,0.00) 100%);
  pointer-events: none;
  z-index: 1;
}
.b-section.is-ink > * { position: relative; z-index: 2; }
.b-section.is-ink .b-tag { color: rgba(242,240,235,0.55); }
.b-section.is-ink .b-lead { color: rgba(242,240,235,0.72); }
.b-section.is-ink .b-rule { background: rgba(242,240,235,0.12); }
@media (max-width: 760px) {
  .b-section { padding: 88px 0; }
  .b-wrap { padding: 0 24px; }
}

/* ------------------------------------------------------------------- */
/* Scroll progress bar                                                 */
/* ------------------------------------------------------------------- */
.b-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 100;
  background: transparent;
  pointer-events: none;
}
.b-progress-fill {
  height: 100%;
  background: var(--anthra);
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 0;
  transition: transform 80ms linear;
}

/* ------------------------------------------------------------------- */
/* Typography                                                          */
/* ------------------------------------------------------------------- */

/* Centered pill badge — every section header */
.b-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: var(--frost-95);
  border-radius: 100px;
  box-shadow: var(--sh-badge);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.b-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--anthra);
  flex-shrink: 0;
}
.b-pill.is-dark {
  background: rgba(242,240,235,0.06);
  border: 1px solid rgba(242,240,235,0.10);
  box-shadow:
    rgba(255,255,255,0.10) 0 0.5px 0 0 inset,
    rgba(0,0,0,0.3) 0 6px 14px -4px;
  color: rgba(242,240,235,0.8);
}
.b-pill.is-dark .b-pill-dot { background: var(--cloud); }

/* Legacy inline tag — kept but no longer used in headers */
.b-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}

/* Section H2 — SANS-SERIF, heavy weight, tight tracking (per rule 22-23) */
.b-hed {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3.25rem); /* 32-52 */
  line-height: 1.06;
  letter-spacing: -1.5px;
  color: var(--ink);
  margin: 0 0 24px;
  text-wrap: balance;
}
.b-hed em {
  /* Only used sparingly; Cormorant kept here only for hero + pullquote */
  font-style: italic; font-weight: 500;
}
.b-section.is-ink .b-hed { color: var(--cloud); }

/* Emphasis-gradient for section headings.
   Context-aware via the parent section modifier:
   • .is-ink   → silvered metallic (light → mid-gray) against anthracite
   • .is-white / .is-cloud → ink-to-argila gradient against cream/white
   Applied with `.is-gradient` on any .b-hed or .b-cta-title. */

/* Shared clip setup — the actual gradient fill is defined per context below. */
.b-hed.is-gradient,
.b-hed.is-gradient em,
.b-cta-title.is-gradient,
.b-cta-title.is-gradient em {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.b-hed.is-gradient em {
  font-style: italic;
  font-weight: 500;
}

/* DARK sections — silvered metallic (reads as light on anthracite). */
.b-section.is-ink .b-hed.is-gradient,
.b-section.is-ink .b-cta-title.is-gradient,
.b-section.is-ink .b-hed.is-gradient em,
.b-section.is-ink .b-cta-title.is-gradient em {
  background-image: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #F2F0EB 28%,
    #CFCCC5 58%,
    #9A9891 100%
  );
}

/* LIGHT sections (is-white / is-cloud) — ink-to-argila depth gradient.
   Sufficient contrast on cream; reads as a subtle editorial treatment. */
.b-section.is-white .b-hed.is-gradient,
.b-section.is-cloud .b-hed.is-gradient,
.b-section.is-white .b-hed.is-gradient em,
.b-section.is-cloud .b-hed.is-gradient em,
.b-section.is-white .b-cta-title.is-gradient,
.b-section.is-cloud .b-cta-title.is-gradient {
  background-image: linear-gradient(
    180deg,
    #1A1A1C 0%,
    #2C2C2E 35%,
    #5C5954 78%,
    #8A7C68 100%
  );
}
/* The tagline section uses b-rise.is-gradient directly on an h2 inside is-cloud */
.b-section.is-cloud .b-rise.is-gradient,
.b-section.is-cloud .b-rise.is-gradient em {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: linear-gradient(
    180deg,
    #1A1A1C 0%,
    #2C2C2E 35%,
    #5C5954 78%,
    #8A7C68 100%
  );
}

/* Safari fallback if background-clip:text isn't supported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .is-ink .b-hed.is-gradient,
  .is-ink .b-cta-title.is-gradient,
  .is-ink .b-hed.is-gradient em,
  .is-ink .b-cta-title.is-gradient em {
    color: var(--cloud); -webkit-text-fill-color: currentColor;
  }
  .is-white .b-hed.is-gradient,
  .is-cloud .b-hed.is-gradient,
  .is-cloud .b-rise.is-gradient {
    color: var(--ink); -webkit-text-fill-color: currentColor;
  }
}

.b-hed-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.12;
  letter-spacing: -0.8px;
  color: var(--ink);
  margin: 0 0 16px;
}

.b-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1rem, 1.15vw, 1.1875rem);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 640px;
  margin: 0;
}
.b-lead.is-narrow { max-width: 560px; }
.b-lead.is-wide   { max-width: 720px; }
.b-lead em { font-style: italic; }

.b-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-2);
}
.b-section.is-ink .b-body { color: rgba(242,240,235,0.72); }

/* Serif use ONLY for hero italic + pullquote */
.b-serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 400; }

/* ------------------------------------------------------------------- */
/* Buttons                                                             */
/* ------------------------------------------------------------------- */

.b-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.02em;
  padding: 15px 34px;
  border-radius: 100px;
  border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: all 240ms var(--ez-heavy);
  min-height: 48px;
}
.b-btn-primary { background: var(--anthra); color: var(--cloud); box-shadow: var(--sh-button); }
.b-btn-primary:hover { transform: translateY(-1px); opacity: 0.92; }
.b-btn-secondary {
  background: transparent; color: var(--ink);
  border-color: rgba(44,44,46,0.2);
}
.b-btn-secondary:hover { border-color: var(--ink); transform: translateY(-1px); }
.b-section.is-ink .b-btn-primary { background: var(--cloud); color: var(--anthra); box-shadow: none; }
.b-section.is-ink .b-btn-primary:hover { background: var(--white); }
.b-section.is-ink .b-btn-secondary {
  color: var(--cloud);
  border-color: rgba(242,240,235,0.25);
}
.b-section.is-ink .b-btn-secondary:hover { border-color: var(--cloud); }
.b-btn-glow {
  box-shadow: 0 0 32px rgba(242,240,235,0.12), 0 0 8px rgba(242,240,235,0.08);
}
.b-btn-glow:hover {
  box-shadow: 0 0 44px rgba(242,240,235,0.18), 0 0 12px rgba(242,240,235,0.12);
}
.b-btn .arr { transition: transform 200ms var(--ez-heavy); }
.b-btn:hover .arr { transform: translateX(3px); }
/* Nav CTA: 12px radius per rule 19 */
.b-nav .b-btn-primary { border-radius: 12px; box-shadow: var(--sh-button); }

/* ------------------------------------------------------------------- */
/* Nav                                                                 */
/* ------------------------------------------------------------------- */

.b-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(242,240,235,0.6);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  transition: background 240ms var(--ez-heavy), border-color 240ms var(--ez-heavy), padding 240ms var(--ez-heavy);
  border-bottom: 1px solid transparent;
}
.b-nav.is-scrolled {
  background: rgba(242,240,235,0.88);
  border-bottom-color: rgba(44,44,46,0.06);
}
.b-nav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 20px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
  transition: padding 240ms var(--ez-heavy);
}
.b-nav.is-scrolled .b-nav-inner { padding: 14px 32px; }
.b-logo {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.32em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
}
.b-logo-v {
  width: 22px; height: 22px;
  position: relative; display: inline-block;
}
.b-logo-v::before {
  content: ""; position: absolute; inset: 0;
  background: var(--anthra);
  clip-path: polygon(0 8%, 50% 100%, 100% 8%, 82% 8%, 50% 70%, 18% 8%);
}
.b-logo-dot {
  position: absolute; bottom: 0; left: 50%;
  transform: translate(-50%, 30%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--cloud);
  border: 1px solid var(--anthra);
}
.b-nav-links {
  display: flex; gap: 32px; align-items: center;
  font-size: 13px; font-weight: 400;
}
.b-nav-links a {
  color: var(--ink-2); text-decoration: none;
  transition: color 200ms var(--ez-heavy);
}
.b-nav-links a:hover { color: var(--ink); }
.b-nav .b-btn { padding: 10px 22px; min-height: 40px; font-size: 12.5px; }
@media (max-width: 820px) { .b-nav-links { display: none; } }

/* ------------------------------------------------------------------- */
/* Hero                                                                */
/* ------------------------------------------------------------------- */

.b-hero {
  padding-top: 140px; padding-bottom: 80px;
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.b-hero .b-wrap { position: relative; z-index: 2; }

/* Hero 3D scene canvas — wireframe city + V + V-dot + waves ------ */
/* Scene occupies roughly the bottom 75% of the hero. The V + city are small
   and low-opacity, and the vignette feathers the seam above so text reads clean. */
.b-hero-scene {
  position: absolute;
  top: 25%;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
@media (max-width: 760px) {
  .b-hero-scene { top: 48%; }
}
.b-hero-scene canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
/* Soft Cloud Dancer feather — top fades in gradually, bottom seats gently
   back into the ground, edges recede so the composition vignettes softly. */
.b-hero-scene::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(242,240,235,0.65) 0%,
      rgba(242,240,235,0.35) 14%,
      transparent 30%,
      transparent 78%,
      rgba(242,240,235,0.55) 100%),
    radial-gradient(ellipse 100% 90% at 50% 55%, transparent 0%, transparent 62%, rgba(242,240,235,0.45) 94%, var(--cloud) 100%);
}

.b-hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  background: var(--frost-95);
  border-radius: 100px;
  box-shadow: var(--sh-badge);
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 40px;
}
.b-hero-pill .b-pill-dot { background: var(--anthra); }

/* Hero H1 — gradient text effect + serif italic for "yours" ------ */
.b-hero-h1 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(3rem, 7vw, 5.75rem);
  line-height: 1.0;
  letter-spacing: -2.5px;
  margin: 0 0 32px;
  text-wrap: balance;
  background: linear-gradient(180deg, #2C2C2E 0%, #84848A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.b-hero-h1 em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.b-hero-sub {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 620px;
  margin: 0 auto 44px;
}
.b-hero-ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 88px;
}

/* ------------------------------------------------------------------- */
/* Stats bar                                                           */
/* ------------------------------------------------------------------- */

.b-statbar {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(44,44,46,0.06);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--sh-card);
}
.b-stat {
  background: var(--frost-95);
  padding: 32px 24px;
  text-align: left;
  display: flex; flex-direction: column; gap: 10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 400ms var(--ez-heavy);
  transform-style: preserve-3d;
  will-change: transform;
}
.b-stat-n {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(2rem, 3vw, 2.75rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.b-stat-l {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-3);
  max-width: 220px;
}
@media (max-width: 820px) { .b-statbar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .b-statbar { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- */
/* Generic section header (CENTERED with pill badge above)            */
/* ------------------------------------------------------------------- */

.b-sechead {
  display: flex; flex-direction: column; align-items: center;
  gap: 20px;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 72px;
}
.b-sechead .b-hed { margin: 0; }
.b-sechead .b-lead { margin: 0 auto; text-align: center; }

/* ------------------------------------------------------------------- */
/* Grids                                                               */
/* ------------------------------------------------------------------- */

.b-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.b-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.b-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 980px) {
  .b-grid-3 { grid-template-columns: 1fr; gap: 20px; }
  .b-grid-2 { grid-template-columns: 1fr; gap: 20px; }
  .b-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .b-grid-4 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------- */
/* Problem (dark) — numbered cards                                    */
/* ------------------------------------------------------------------- */

.b-card-dark {
  position: relative;
  background: rgba(242,240,235,0.03);
  border: 1px solid rgba(242,240,235,0.10);
  border-top-color: rgba(242,240,235,0.18);
  border-bottom-color: rgba(242,240,235,0.05);
  border-radius: 14px;
  padding: 44px 36px 36px;
  display: flex; flex-direction: column; gap: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 300ms var(--ez-heavy), border-color 300ms var(--ez-heavy), transform 400ms var(--ez-heavy);
}
.b-card-dark:hover {
  background: rgba(242,240,235,0.05);
  border-color: rgba(242,240,235,0.18);
  transform: translateY(-4px);
}
.b-card-dark .b-cardn {
  position: absolute; top: 20px; right: 28px;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 48px; line-height: 1;
  letter-spacing: -2px;
  color: var(--cloud);
  opacity: 0.06;
  pointer-events: none;
}
.b-card-dark h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 19px;
  margin: 0; color: var(--cloud);
  letter-spacing: -0.3px;
}
.b-card-dark p {
  font-family: var(--font-sans);
  font-weight: 400; font-size: 14.5px;
  line-height: 1.65; color: rgba(242,240,235,0.72);
  margin: 0;
}

/* ------------------------------------------------------------------- */
/* Glass cards — Solution steps, Model, Traction                      */
/* Specular highlight ::before + 6-layer shadow + lift on hover        */
/* ------------------------------------------------------------------- */

.b-card-glass {
  position: relative;
  background: var(--frost-70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 44px 32px 36px;
  box-shadow: var(--sh-card);
  display: flex; flex-direction: column; gap: 14px;
  overflow: hidden;
  transition: transform 400ms var(--ez-heavy), box-shadow 400ms var(--ez-heavy);
  will-change: transform;
}
.b-card-glass::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  /* Specular highlight peaks at --highlight-x (cursor-driven via useTilt),
     rest position = 50% centered. Light follows the hand.                */
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.55) calc(var(--highlight-x, 50%) - 25%),
    rgba(255,255,255,0.95) var(--highlight-x, 50%),
    rgba(255,255,255,0.55) calc(var(--highlight-x, 50%) + 25%),
    transparent 100%);
  transition: background 240ms var(--ez-heavy);
  pointer-events: none;
  z-index: 2;
}
.b-card-glass:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-lifted);
}
.b-card-glass .b-stepn {
  position: absolute; top: 20px; right: 24px;
  font-family: var(--font-sans);
  font-weight: 700; font-size: 64px; line-height: 1;
  letter-spacing: -3px;
  color: var(--ink);
  opacity: 0.06;
  pointer-events: none;
}
.b-card-glass .b-stepl {
  font-family: var(--font-sans);
  /* 13px floor (2026-04-22 directive review) — experience step label
     lifted from 11px to the system minimum; wide tracking preserved. */
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 2px;
}
.b-card-glass h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin: 0; color: var(--ink);
  max-width: 260px;
}
.b-card-glass p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.65;
  color: var(--ink-2); margin: 0;
}

/* ------------------------------------------------------------------- */
/* Analogy box                                                         */
/* ------------------------------------------------------------------- */

.b-analogy {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 72px 64px;
  box-shadow: var(--sh-card);
  margin-top: 72px;
  overflow: hidden;
}
.b-analogy::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
  pointer-events: none;
}
.b-analogy-h {
  font-family: var(--font-sans);
  font-weight: 600; font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 56px;
}
.b-analogy-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.b-analogy-col { display: flex; flex-direction: column; }
.b-analogy-col h4 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 13px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.b-analogy-col.is-self h4 { color: var(--ink); }
.b-analogy-col p {
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 16px;
}
.b-analogy-col.is-self p { color: var(--ink); font-weight: 500; }
.b-analogy-col em {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-size: 15.5px;
  color: var(--ink-3);
  line-height: 1.45;
  margin-top: auto;
}
@media (max-width: 760px) {
  .b-analogy { padding: 48px 28px; }
  .b-analogy-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ------------------------------------------------------------------- */
/* Science                                                             */
/* ------------------------------------------------------------------- */

.b-science-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: start;
}
@media (max-width: 900px) { .b-science-grid { grid-template-columns: 1fr; gap: 32px; } }
.b-study {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 28px 30px;
  box-shadow: var(--sh-card);
  margin-bottom: 16px;
  overflow: hidden;
  transition: transform 400ms var(--ez-heavy), box-shadow 400ms var(--ez-heavy);
}
.b-study::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 50%, transparent);
}
.b-study:hover { transform: translateY(-3px); box-shadow: var(--sh-lifted); }
.b-study:last-child { margin-bottom: 0; }
.b-study .b-src {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.b-study p {
  font-family: var(--font-sans);
  font-size: 15px; line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.b-axes {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  padding: 44px 40px;
  box-shadow: var(--sh-lifted);
  position: sticky; top: 110px;
  overflow: hidden;
}
.b-axes::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
}
.b-axes h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.6px;
  color: var(--ink);
  margin: 0 0 32px;
}
.b-axis-row { padding: 18px 0; border-top: 1px solid var(--rule); }
.b-axis-row:first-of-type { border-top: 0; padding-top: 0; }
.b-axis-row .b-al {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 6px;
}
.b-axis-row .b-ax {
  font-family: var(--font-sans);
  font-weight: 500; font-size: 16px;
  color: var(--ink);
  margin: 0 0 4px;
}
.b-axis-row .b-ad {
  font-family: var(--font-sans);
  font-size: 13px; color: var(--ink-2);
  margin: 0;
}
.b-profiles {
  margin-top: 28px; padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 16.5px; line-height: 1.5;
  color: var(--ink);
}
.b-profiles em { font-style: italic; color: var(--ink-3); font-size: 14.5px; }

/* ------------------------------------------------------------------- */
/* Two Buyers                                                          */
/* ------------------------------------------------------------------- */

.b-buyers {
  position: relative;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--sh-lifted);
  overflow: hidden;
}
.b-buyers::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
  z-index: 3;
}
.b-buyers-head {
  padding: 56px 64px 40px;
  border-bottom: 1px solid var(--rule);
}
.b-buyers-head .b-tag { margin-bottom: 16px; }
.b-buyers-head .b-hed-sm { margin: 0 0 14px; }
.b-buyers-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.b-buyer-col {
  padding: 48px 52px;
  display: flex; flex-direction: column; gap: 20px;
}
.b-buyer-col + .b-buyer-col { border-left: 1px solid var(--rule); }
.b-buyer-col .b-bl {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.b-buyer-col h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 24px;
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.5px;
}
.b-buyer-col h3 em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic; font-weight: 400;
  color: var(--ink-3);
}
.b-buyer-col ul { list-style: none; padding: 0; margin: 8px 0 0; }
.b-buyer-col li {
  position: relative; padding-left: 18px;
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.6;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.b-buyer-col li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ink-4);
}
.b-buyer-col li.is-avoid::before { background: transparent; border: 1px solid var(--ink-4); }
.b-buyer-col .b-subhead {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 8px 0 4px;
}
.b-buyers-foot {
  background: var(--cloud);
  padding: 32px 64px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600; font-size: 16px;
  color: var(--ink);
  letter-spacing: -0.2px;
}
@media (max-width: 820px) {
  .b-buyers-head, .b-buyers-foot { padding: 36px 28px; }
  .b-buyers-body { grid-template-columns: 1fr; }
  .b-buyer-col { padding: 36px 28px; }
  .b-buyer-col + .b-buyer-col { border-left: 0; border-top: 1px solid var(--rule); }
}

/* ------------------------------------------------------------------- */
/* Benefits + tabs                                                     */
/* ------------------------------------------------------------------- */

.b-tabs-bar {
  display: inline-flex;
  gap: 4px;
  background: rgba(44,44,46,0.05);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 0;
}
.b-tab {
  padding: 10px 22px;
  font-family: var(--font-sans);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-2);
  background: transparent; border: none; cursor: pointer;
  border-radius: 100px;
  transition: all 240ms var(--ez-heavy);
}
.b-tab.is-active {
  background: var(--white); color: var(--ink);
  box-shadow: var(--sh-resting);
}
/* Fades tab-panel content in on every tab switch (remount via key).
   Replaces .b-rise here — the scroll-reveal observer only fires once
   at mount, so b-rise leaves remounted grids stuck at opacity:0. */
.b-tab-panel {
  animation: b-tab-panel-in 420ms var(--ez-heavy) both;
}
@keyframes b-tab-panel-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .b-tab-panel { animation: none; }
}
.b-benefit {
  position: relative;
  background: var(--cloud);
  border-radius: 14px;
  padding: 30px 30px 32px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform 400ms var(--ez-heavy), box-shadow 400ms var(--ez-heavy);
}
.b-benefit:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-card);
  background: var(--white);
}
.b-benefit h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.b-benefit p {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
}
.b-compare {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 48px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--rule);
}
.b-compare-col { padding: 36px 40px; }
.b-compare-col.is-before { background: rgba(44,44,46,0.03); color: var(--ink-2); }
.b-compare-col.is-after  { background: var(--white); color: var(--ink); }
.b-compare-col h4 {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 20px;
}
.b-compare-col.is-after h4 { color: var(--ink); }
.b-compare-col ul { list-style: none; padding: 0; margin: 0; }
.b-compare-col li {
  padding: 14px 0; border-top: 1px solid var(--rule-soft);
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.55;
}
.b-compare-col li:first-child { border-top: 0; padding-top: 0; }
.b-compare-col.is-after li { font-weight: 500; }
@media (max-width: 760px) {
  .b-compare { grid-template-columns: 1fr; }
  .b-compare-col + .b-compare-col { border-top: 1px solid var(--rule); }
  .b-compare-col { padding: 28px 24px; }
}

/* ------------------------------------------------------------------- */
/* Business model                                                      */
/* ------------------------------------------------------------------- */

.b-rev {
  position: relative;
  background: var(--frost-95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  padding: 36px 28px 32px;
  display: flex; flex-direction: column;
  gap: 10px;
  text-align: center;
  box-shadow: var(--sh-card);
  min-height: 240px;
  overflow: hidden;
  transition: transform 400ms var(--ez-heavy), box-shadow 400ms var(--ez-heavy);
  will-change: transform;
}
.b-rev::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
}
.b-rev:hover { transform: translateY(-4px); box-shadow: var(--sh-lifted); }
.b-rev .b-rev-price {
  font-family: var(--font-sans);
  font-weight: 700; font-size: 30px;
  letter-spacing: -1px;
  color: var(--ink);
  line-height: 1;
}
.b-rev .b-rev-unit {
  font-family: var(--font-sans);
  font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}
.b-rev .b-rev-name {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 14px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink);
  margin-top: 20px;
}
.b-rev .b-rev-desc {
  font-family: var(--font-sans);
  font-size: 13px; line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.b-pullquote {
  text-align: center;
  margin: 88px auto 0;
  max-width: 860px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.35;
  color: var(--ink-2);
  text-wrap: balance;
}

/* ------------------------------------------------------------------- */
/* Traction / Moat                                                     */
/* ------------------------------------------------------------------- */

.b-trac {
  position: relative;
  background: var(--frost-95);
  border-radius: 14px;
  padding: 22px 26px;
  box-shadow: var(--sh-resting);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 14px;
  overflow: hidden;
  transition: transform 300ms var(--ez-heavy), box-shadow 300ms var(--ez-heavy);
}
.b-trac::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9) 50%, transparent);
}
.b-trac:hover { transform: translateX(4px); box-shadow: var(--sh-card); }
.b-trac:last-child { margin-bottom: 0; }
.b-trac-label {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
}

/* ------------------------------------------------------------------- */
/* CTA — dark with radial ambient glow                                */
/* ------------------------------------------------------------------- */

.b-section.is-ink.is-cta::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(242,240,235,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.b-section.is-ink.is-cta .b-wrap { position: relative; z-index: 1; }

.b-cta-inner {
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  max-width: 680px; margin: 0 auto;
}
.b-cta-title {
  font-family: var(--font-sans);
  font-weight: 600; font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08; letter-spacing: -1.5px;
  color: var(--cloud);
  margin: 0;
}
.b-cta-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
}
/* .b-cta-title.is-gradient is handled by the consolidated rule above
   (context-aware via `.is-ink` ancestor) — kept DRY. */
.b-cta-buttons {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  justify-content: center;
}
.b-cta-link {
  color: rgba(242,240,235,0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 200ms ease;
}
.b-cta-link:hover { color: var(--cloud); }

.b-cta-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 16px;
}
@media (max-width: 760px) { .b-cta-cards { grid-template-columns: 1fr; } }
.b-ctacard {
  position: relative;
  background: rgba(242,240,235,0.04);
  border: 1px solid rgba(242,240,235,0.12);
  border-top-color: rgba(242,240,235,0.22);
  border-radius: 14px;
  padding: 40px 36px;
  display: flex; flex-direction: column; gap: 18px;
  overflow: hidden;
  transition: background 300ms var(--ez-heavy), border-color 300ms var(--ez-heavy), transform 400ms var(--ez-heavy);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.b-ctacard:hover {
  background: rgba(242,240,235,0.07);
  border-color: rgba(242,240,235,0.22);
  transform: translateY(-3px);
}
.b-ctacard h3 {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.6px;
  color: var(--cloud);
  margin: 0;
}
.b-ctacard p {
  font-family: var(--font-sans);
  font-size: 14.5px; line-height: 1.6;
  color: rgba(242,240,235,0.72);
  margin: 0; flex: 1;
}
.b-ctacard .b-btn { align-self: flex-start; }

/* ------------------------------------------------------------------- */
/* Final tagline — the only place serif italic speaks                 */
/* ------------------------------------------------------------------- */

.b-tagline {
  padding: 140px 32px;
  text-align: center;
}
.b-tagline h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.b-tagline em {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------- */
/* Footer — v1 Prestige Dark Anthracite                                */
/* ------------------------------------------------------------------- */

.b-foot-v1 {
  position: relative;
  background: var(--anthra);
  color: rgba(242,240,235,0.85);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 300;
  overflow: hidden;
}

/* Right-edge COTY accent strip */
.b-foot-accent {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: var(--cloud);
  opacity: 0.6;
}

.b-foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 48px 36px;
}

/* TOP — wordmark + editorial hook */
.b-foot-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(242,240,235,0.1);
}

.b-foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* left-align wordmark + descriptor */
  gap: 8px;
  text-align: left;
}
.b-foot-brand img { display: block; margin: 0; }

.b-foot-descriptor {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242,240,235,0.45);
}

.b-foot-hook {
  text-align: right;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.35;
}
.b-foot-hook-cloud { color: var(--cloud); }
.b-foot-hook-ghost { color: rgba(242,240,235,0.4); }

/* MIDDLE — 4 columns */
.b-foot-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 48px 0;
}

.b-foot-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.b-foot-col-h {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(242,240,235,0.5);
}

.b-foot-col a {
  color: rgba(242,240,235,0.78);
  text-decoration: none;
  font-size: 14px;
  font-weight: 300;
  transition: color 200ms ease;
}
.b-foot-col a:hover { color: var(--cloud); }

/* COTY swatch — 3-layer Volumetric Glass material sample.
   Updated 2026-04-22 (Directive Review v2):
   - body: Cloud Dancer dome with subtle radial highlight
   - ::before: specular arc across the top bevel (3-layer glass physics)
   - ::after: upper/lower radial illumination wash (refraction through
     the membrane)
   - argila inset ring (box-shadow inset) — the accent that identifies
     this as a LOCVS material sample, not a generic colour chip.
   Reads as a small polished dome of Cloud Dancer sitting in the ink
   footer, ringed in warm argila, lit from the top. */
.b-foot-swatch {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 38%),
    var(--cloud);
  border: 1px solid rgba(242,240,235,0.20);
  border-top-color: rgba(242,240,235,0.40);
  border-bottom-color: rgba(0,0,0,0.22);
  box-shadow:
    /* argila inset ring — identifies this as a LOCVS material sample */
    inset 0 0 0 1.5px rgba(184,123,94,0.55),
    /* bright top bevel + shadowed floor (volumetric) */
    inset 0 1px 0 0 rgba(255,255,255,0.58),
    inset 0 -1px 0 0 rgba(44,44,46,0.14),
    /* dropped shadow — dome lifts off the ink footer */
    0 4px 12px -4px rgba(0,0,0,0.30),
    0 8px 20px -10px rgba(0,0,0,0.35),
    /* outer Cloud Dancer glow — warmth bleed */
    0 0 0 4px rgba(242,240,235,0.04);
  margin: 6px 0 8px;
  overflow: hidden;
}
/* ::before — specular highlight arc (Layer 1 of 3-layer glass physics).
   Narrow crescent of bright light skimming the upper bevel, echoing the
   .b-si-tag and .locvs-hero__eyebrow treatment at swatch scale. */
.b-foot-swatch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 22%;
  right: 22%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.78) 30%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,0.78) 70%,
    transparent 100%);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
/* ::after — illumination wash (Layer 3). Top bloom + lower shadow
   give the swatch refractive volume, not a flat disc. */
.b-foot-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 60% at 50% 110%, rgba(44,44,46,0.18) 0%, rgba(44,44,46,0) 55%);
  pointer-events: none;
  z-index: 1;
}
.b-foot-swatch-name {
  margin: 0;
  font-size: 13px;
  color: rgba(242,240,235,0.78);
}
.b-foot-swatch-code {
  margin: 0;
  font-size: 11px;
  color: rgba(242,240,235,0.4);
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
}

/* BOTTOM BAR */
.b-foot-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid rgba(242,240,235,0.1);
  font-size: 11px;
  color: rgba(242,240,235,0.35);
  letter-spacing: 0.04em;
}
.b-foot-bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.b-foot-bar-brand .b-locvs-wm {
  vertical-align: -1px;
  filter: brightness(1.05);
  opacity: 0.85;
}
.b-foot-bar-meta {
  color: rgba(242,240,235,0.32);
}

/* Responsive */
@media (max-width: 760px) {
  .b-foot-inner { padding: 56px 24px 28px; }
  .b-foot-top { grid-template-columns: 1fr; gap: 24px; }
  .b-foot-hook { text-align: left; font-size: 18px; }
  .b-foot-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .b-foot-bar { flex-direction: column; gap: 8px; align-items: flex-start; }
}
@media (max-width: 480px) {
  .b-foot-cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- */
/* Reveal animations                                                   */
/* ------------------------------------------------------------------- */

.b-rise {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 900ms var(--ez-heavy), transform 900ms var(--ez-heavy);
}
.b-rise.is-in { opacity: 1; transform: none; }
.b-rise.d1 { transition-delay: 100ms; }
.b-rise.d2 { transition-delay: 200ms; }
.b-rise.d3 { transition-delay: 300ms; }
.b-rise.d4 { transition-delay: 400ms; }

/* Cinematic stagger — Implementation Directive v2 §11.2
   (2026-04-22). The first anchor the habitante sees
   (#spatial-intelligence) earns a slower, more deliberate
   reveal so the page takes a breath before delivering its
   category claim. Subsequent sections tighten the rhythm —
   the cadence goes from "stately" to "natural". */
#spatial-intelligence .b-rise.d1 { transition-delay: 200ms; }
#spatial-intelligence .b-rise.d2 { transition-delay: 400ms; }
#spatial-intelligence .b-rise.d3 { transition-delay: 600ms; }
#spatial-intelligence .b-rise.d4 { transition-delay: 800ms; }

.b-section:not(#spatial-intelligence) .b-rise.d1 { transition-delay:  80ms; }
.b-section:not(#spatial-intelligence) .b-rise.d2 { transition-delay: 160ms; }
.b-section:not(#spatial-intelligence) .b-rise.d3 { transition-delay: 240ms; }
.b-section:not(#spatial-intelligence) .b-rise.d4 { transition-delay: 320ms; }

html.no-rise .b-rise { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .b-rise { opacity: 1 !important; transform: none !important; }
  .b-orb-inner { animation: none !important; }
}