/* =========================================================
   CIAO GROUP — Design System v3
   Stripped, monolithic, night.co-faithful.
   Pure black, edge-bleeding type, no gimmicks.
   ========================================================= */

:root {
  --bg-canvas:        #0E121A;       /* match night.co's gray-900 */
  --bg-section:       #0E121A;
  --bg-surface:       #14181F;
  --bg-pill:          rgba(255,255,255,0.04);
  --border-subtle:    rgba(255,255,255,0.06);
  --border-divider:   rgba(255,255,255,0.14);
  --text-primary:     #F2F2F2;
  --text-secondary:   #B5BAC3;
  --text-muted:       #6B7380;
  --accent-on:        #0E121A;

  --font-display: 'Aspekta', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --section-h: 100vh;
  --section-h: 100svh;

  --pad-x: 56px;
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior: none;
}

body {
  height: 100vh;
  height: 100svh;
  overflow-y: auto;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
img { max-width: 100%; display: block; }
body::-webkit-scrollbar { width: 0; }
body { scrollbar-width: none; }

/* =========================================================
   TYPOGRAPHY — bigger than feels comfortable
   ========================================================= */
.d1 {
  font-size: clamp(36px, 5.5vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.025em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
  color: var(--text-primary);
}
.d2 {
  font-size: clamp(26px, 2.8vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}
.label {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =========================================================
   INTRO — hero + positioning sections
   ========================================================= */
.intro {
  max-width: 1100px;
  margin: 0;             /* anchor to left, NOT centered */
}
.intro .d1 {
  max-width: 18ch;
}
.intro-sub {
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 50ch;
  margin: 28px 0 0;
  font-weight: 400;
}
.intro-cta {
  margin-top: 36px;
}

/* Positioning anchors to the RIGHT — differentiates from Hero */
.intro-right {
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}
.intro-right .d1 { margin-left: auto; }
.intro-right .intro-sub { margin-left: auto; }

/* =========================================================
   HERO — Toronto rooftop with Ken Burns motion + ambient particles
   ========================================================= */
.hero {
  background-color: var(--bg-canvas);
  background-image: none;       /* moved to ::before for animation */
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/hero-bg.jpg') no-repeat right center / cover;
  animation: ken-burns-hero 18s ease-in-out infinite alternate;
  transform-origin: 70% 50%;
  z-index: 0;
  will-change: transform;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(7,9,14,0.85) 0%, rgba(7,9,14,0.65) 35%, rgba(7,9,14,0.20) 70%, rgba(7,9,14,0.05) 100%);
  z-index: 1;
  pointer-events: none;
}
.hero > .section-inner { position: relative; z-index: 2; }

@keyframes ken-burns-hero {
  0%   { transform: scale(1) translate(0%, 0%); }
  100% { transform: scale(1.22) translate(-4%, 2%); }
}

/* Floating light particles overlay — bigger, more visible */
.hero > .section-inner::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(4px 4px at 15% 25%, rgba(255,230,200,0.85), transparent 60%),
    radial-gradient(3px 3px at 85% 70%, rgba(180,210,255,0.75), transparent 60%),
    radial-gradient(5px 5px at 60% 15%, rgba(255,255,255,0.7), transparent 60%),
    radial-gradient(3px 3px at 30% 85%, rgba(255,220,180,0.75), transparent 60%),
    radial-gradient(4px 4px at 92% 40%, rgba(255,255,255,0.8), transparent 60%),
    radial-gradient(3px 3px at 75% 55%, rgba(255,200,160,0.6), transparent 60%),
    radial-gradient(4px 4px at 45% 90%, rgba(200,220,255,0.7), transparent 60%);
  pointer-events: none;
  animation: particles-drift 8s ease-in-out infinite alternate;
  z-index: -1;
  opacity: 0.95;
}
@keyframes particles-drift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.55; }
  50%  { transform: translate(15px, -10px) scale(1.1); opacity: 1; }
  100% { transform: translate(30px, -22px) scale(0.95); opacity: 0.7; }
}

/* =========================================================
   POSITIONING — Shanghai neon with motion
   ========================================================= */
.section-positioning {
  background-color: var(--bg-canvas);
  background-image: none;
}
.section-positioning::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/positioning-bg.jpg') no-repeat left center / cover;
  animation: ken-burns-positioning 20s ease-in-out infinite alternate;
  transform-origin: 30% 50%;
  z-index: 0;
  will-change: transform;
}
.section-positioning::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(260deg, rgba(7,9,14,0.85) 0%, rgba(7,9,14,0.55) 35%, rgba(7,9,14,0.20) 70%, rgba(7,9,14,0.05) 100%);
  z-index: 1;
  pointer-events: none;
}
.section-positioning > .section-inner { position: relative; z-index: 2; }

@keyframes ken-burns-positioning {
  0%   { transform: scale(1) translate(0%, 0%); }
  100% { transform: scale(1.20) translate(4%, -2%); }
}

/* =========================================================
   SCROLL PROGRESS BAR (top edge, hairline)
   ========================================================= */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--text-primary);
  z-index: 200;
  transition: width 0.35s var(--ease-out);
  pointer-events: none;
}

/* =========================================================
   FAQ row hover
   ========================================================= */
.faq-item { transition: padding-left 0.4s var(--ease-out); }
.faq-item:hover { padding-left: 8px; }
.faq-q:hover { color: var(--text-primary); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 28px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }

.nav-logo {
  display: inline-flex;
  align-items: center;
  transition: opacity 0.3s var(--ease-out);
}
.nav-logo:hover { opacity: 0.75; }
.brand-logo {
  height: 32px;
  width: auto;
  display: block;
  transition: transform 0.5s var(--ease-out);
}
.nav-logo:hover .brand-logo { transform: scale(1.02); }
.nav.nav-scrolled .brand-logo { transform: scale(0.92); }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 5px;
  background: rgba(242,242,242,0.06);
  border: 1px solid rgba(242,242,242,0.12);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  /* Absolute-center so it stays visually middle regardless of right-side items */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.nav-toggle a {
  padding: 8px 16px;
  font-size: 11px;
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-radius: var(--radius-pill);
  transition: color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}
.nav-toggle a.active {
  background: var(--text-primary);
  color: var(--accent-on);
}
.nav-toggle a:not(.active):hover { color: var(--text-primary); }

/* =========================================================
   NAV SECONDARY — desktop text links (Insights, About)
   Hidden on mobile, replaced by hamburger overlay.
   ========================================================= */
.nav-secondary {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  /* Push the secondary nav (and CTA) to the right edge,
     with a breathing gap before the CTA. */
  margin-left: auto;
  margin-right: 22px;
}
.nav-secondary-item {
  position: relative;
}
.nav-secondary-link,
.nav-secondary > a {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(242, 242, 242, 0.55);
  padding: 8px 0;
  display: inline-block;
  transition: color 0.3s var(--ease-out);
}
.nav-secondary-link:hover,
.nav-secondary > a:hover,
.nav-secondary-item:hover .nav-secondary-link,
.nav-secondary-item:focus-within .nav-secondary-link {
  color: var(--text-primary);
}

/* Dropdown panel below "Insights"
   Critical: top: 100% (touching the trigger) — no gap that mouse can cross
   and lose hover. Internal padding-top creates visual breathing instead. */
.nav-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 400px;
  max-width: calc(100vw - 56px);
  background: rgba(10, 14, 22, 0.94);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 18px 10px 10px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
  margin-top: 10px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s var(--ease-out),
              visibility 0.22s var(--ease-out);
  pointer-events: none;
}
/* Invisible bridge across the visual 10px gap above the dropdown,
   so the mouse stays inside the hover region while crossing. */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
  /* transparent — only catches mouse events */
}
.nav-secondary-item:hover .nav-dropdown,
.nav-secondary-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.nav-dropdown a {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  transition: background 0.2s ease;
}
.nav-dropdown a:hover {
  background: rgba(255, 255, 255, 0.05);
}
.nav-dropdown-meta {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(var(--accent-purple-soft), 0.9);
  margin-bottom: 6px;
}
.nav-dropdown-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.35;
  color: var(--text-primary);
}
.nav-dropdown-foot {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.nav-dropdown-foot a {
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: rgba(var(--accent-purple-soft), 0.95);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-dropdown-foot a:hover {
  background: rgba(var(--accent-purple), 0.08);
  color: var(--text-primary);
}

/* =========================================================
   NAV HAMBURGER — mobile-only icon button
   ========================================================= */
.nav-hamburger {
  display: none;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  background: rgba(242, 242, 242, 0.06);
  border: 1px solid rgba(242, 242, 242, 0.14);
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.3s ease;
}
.nav-hamburger:hover {
  background: rgba(242, 242, 242, 0.1);
}
.nav-hamburger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.2s ease;
}
.nav-hamburger span:nth-child(1) { top: 16px; }
.nav-hamburger span:nth-child(2) { top: 23px; }

/* =========================================================
   NAV OVERLAY — full-screen mobile menu
   ========================================================= */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 11, 18, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s var(--ease-out);
}
.nav-overlay.open {
  opacity: 1;
  visibility: visible;
}
.nav-overlay-close {
  position: absolute;
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-overlay-close svg { width: 18px; height: 18px; }
.nav-overlay-content {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  padding: 0 26px;
  max-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.nav-overlay-group {
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
}
.nav-overlay.open .nav-overlay-group { opacity: 1; transform: translateY(0); }
.nav-overlay.open .nav-overlay-group:nth-of-type(1) { transition-delay: 0.08s; }
.nav-overlay.open .nav-overlay-group:nth-of-type(2) { transition-delay: 0.16s; }
.nav-overlay.open .nav-overlay-cta { transition-delay: 0.24s; opacity: 1; transform: translateY(0); }

.nav-overlay-label {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.nav-overlay-group a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-decoration: none;
}
.nav-overlay-group a .arrow {
  color: rgba(255, 255, 255, 0.35);
  font-size: 18px;
  transition: transform 0.3s ease, color 0.3s ease;
}
.nav-overlay-group a:hover .arrow {
  color: var(--text-primary);
  transform: translateX(4px);
}
.nav-overlay-cta {
  margin-top: 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s var(--ease-out),
              transform 0.45s var(--ease-out);
}
.nav-overlay-cta .btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
}

body.nav-open { overflow: hidden !important; }

/* =========================================================
   Mobile: hide desktop nav elements, show hamburger
   ========================================================= */
@media (max-width: 900px) {
  .nav-toggle { display: none !important; }
  .nav-secondary { display: none !important; }
  .nav .nav-cta { display: none !important; }
  .nav-hamburger { display: inline-flex; }
  /* Insights article-nav: hide Get in Touch on mobile, hamburger replaces it */
  .article-nav .nav-cta { display: none !important; }
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 22px;
  background: rgba(242,242,242,0.04);
  color: var(--text-primary);
  border: 1px solid rgba(242,242,242,0.18);
  border-radius: var(--radius-pill);
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
  transition: background 0.45s var(--ease-out), color 0.45s var(--ease-out), border-color 0.45s var(--ease-out), transform 0.4s var(--ease-out);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  background-position: -100% 0;
  animation: light-sweep 3.6s linear infinite;
  pointer-events: none;
}
.btn:hover {
  background: var(--text-primary);
  color: var(--accent-on);
  border-color: var(--text-primary);
  transform: translateY(-1px);
}
.btn:hover::before { opacity: 0; }
.btn .arrow { display: inline-block; transition: transform 0.35s var(--ease-out); }
.btn:hover .arrow { transform: translateX(6px); }

.btn-lg {
  height: 56px;
  padding: 0 32px;
  font-size: 12px;
  letter-spacing: 0.16em;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
  transition: transform 0.35s var(--ease-out), background 0.45s var(--ease-out), color 0.45s var(--ease-out), border-color 0.45s var(--ease-out);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(242,242,242,0.18);
}
.btn-ghost::before { display: none; }

@keyframes light-sweep {
  0%   { background-position: -100% 0; }
  60%  { background-position: 200% 0; }
  100% { background-position: 200% 0; }
}

/* =========================================================
   SECTIONS — pure black canvas, JS scroll
   ========================================================= */
.section {
  min-height: var(--section-h);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 96px 56px 64px;
  position: relative;
  overflow: hidden;
  background-color: var(--bg-canvas);
}

.section-inner {
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* =========================================================
   REVEAL
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.40s; }
.reveal-delay-4 { transition-delay: 0.55s; }

/* =========================================================
   SECTION HEAD (used by Why Models Fail + Platforms)
   ========================================================= */
.section-head {
  margin-bottom: 48px;
  max-width: 950px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.section-head .d2 { margin: 0; max-width: 22ch; }
.section-head-sub {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 56ch;
  margin: 0;
}

/* =========================================================
   COMPARE GRID — 3 columns
   ========================================================= */
.section-compare { padding-top: 84px; }
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.compare-card {
  position: relative;
  padding: 26px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.45s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}
.compare-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-divider);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.45);
}
/* (hover styles unified above) */

.compare-card .compare-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.compare-title {
  font-size: 19px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin: 0 0 22px;
  line-height: 1.15;
  color: var(--text-primary);
}

/* ============================================================
   WHY US — 3-CARD comparison (v3)
   Side cards: muted, pill + icon + bullets
   Center card: purple-tinted glow, badge + headline + stats
   ============================================================ */
:root {
  --accent-purple: 138, 132, 250;       /* RGB for purple glow */
  --accent-purple-soft: 180, 170, 255;
}
/* Force compare section's inner container to be a centered flex column.
   This guarantees the section title AND the cards share the SAME visual
   X-axis (centered on the page), no matter what the outer section-inner
   max-width is. */
.section.section-compare .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.section.section-compare .section-head {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin-left: auto;             /* bulletproof centering */
  margin-right: auto;
  text-align: center;
  padding: 0;
}
.section.section-compare .section-head .d2,
.section.section-compare .section-head .section-head-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.section.section-compare .section-head .d2 {
  font-size: clamp(32px, 3.6vw, 46px);     /* compressed to fit one-screen */
  margin: 0 auto 10px;
  max-width: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.section.section-compare .section-head .section-head-sub {
  margin: 0 auto;
  max-width: 580px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.01em;
}

/* === 3-column asymmetric layout: pain stack | bridge key | solution === */
.bridge-cards {
  width: 100%;
  max-width: 1280px;
  margin: 18px auto 0;
  display: grid;
  grid-template-columns: 1.05fr 0.35fr 1.95fr;
  gap: 16px;
  align-items: stretch;
  position: relative;           /* anchor for the rotating halo */
  overflow: visible;
}

/* Ensure cards stack ABOVE the trace layers */
.bridge-card,
.bridge-key,
.bridge-pain-column {
  position: relative;
  z-index: 1;
}

/* (Light-trace animations removed — cards rely on static borders + glow only.) */

/* Hero card: static identity styling (no animated pulse). */
.bridge-card-center {
  position: relative;
}

/* LEFT COLUMN: 2 stacked pain cards */
.bridge-pain-column {
  display: flex;
  flex-direction: column;
  gap: 14px;                   /* was 18 */
}
.bridge-pain-column .bridge-card-side {
  flex: 1;                       /* both cards equal height */
}

/* Subtitle red emphasis */
.section.section-compare .section-head .sub-emphasis {
  color: rgb(255, 110, 110);
  font-weight: 500;
}

/* MIDDLE: OUR KEY bridge card — narrow vertical, purple themed */
.bridge-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* center cluster, no space-between */
  gap: 14px;
  padding: 22px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg,
              rgba(var(--accent-purple), 0.06) 0%,
              rgba(var(--accent-purple), 0.02) 100%);
  border: 1px solid rgba(var(--accent-purple), 0.32);
  box-shadow: 0 0 28px rgba(var(--accent-purple), 0.10);
  text-align: center;
}
.bridge-key-icon {
  width: 26px;
  height: 26px;
  color: rgb(var(--accent-purple-soft));
  filter: drop-shadow(0 0 8px rgba(var(--accent-purple), 0.4));
}
.bridge-key-eyebrow {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(var(--accent-purple-soft));
  opacity: 0.75;
  margin: 0;
}
.bridge-key-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0;
}
.bridge-key-text span { display: block; }   /* desktop: 2 stacked lines */
.bridge-key-arrow {
  width: 20px;
  height: 20px;
  color: rgb(var(--accent-purple-soft));
  margin: 0;
}

/* Pill prefix — "The Gap:" / "The Trap:" stronger emphasis */
.bridge-card-pill .pill-prefix {
  color: rgba(255, 200, 200, 0.95);
  margin-right: 2px;
  letter-spacing: 0.18em;
}

/* Pain bullet <strong> emphasis */
.bridge-card-pains li strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Value text emphasis on "No middlemen. No gray areas." */
.bridge-card-value .value-emphasis {
  color: var(--text-primary);
  font-weight: 500;
}

/* Stats: em becomes block subtitle below the strong */
.stat-text { display: flex; flex-direction: column; gap: 4px; }
.stat-text em {
  font-style: normal;
  color: rgba(255, 255, 255, 0.52);
  font-weight: 400;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  margin: 0;
}
.stat-text strong {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* ---- common card ---- */
.bridge-card {
  position: relative;
  padding: 20px 22px;          /* compressed to fit one-screen */
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  flex-direction: column;
  transition: transform 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out),
              box-shadow 0.4s var(--ease-out),
              background 0.4s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bridge-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
  }
  .bridge-card-side:hover {
    border-color: rgba(255, 90, 90, 0.25);
    background: linear-gradient(180deg,
                rgba(255, 80, 80, 0.06) 0%,
                rgba(255, 255, 255, 0.02) 60%);
  }
  .bridge-card-center:hover {
    border-color: rgba(var(--accent-purple), 0.5);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35),
                0 0 48px rgba(var(--accent-purple), 0.26);
  }
}

/* ---- side cards: subtle red-tinted bg signals "danger zone" ---- */
.bridge-card-side {
  justify-content: center;
  background: linear-gradient(180deg,
              rgba(255, 80, 80, 0.035) 0%,
              rgba(255, 255, 255, 0.015) 60%);
  border: 1px solid rgba(255, 80, 80, 0.10);
}
.bridge-card-side .bridge-card-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 14px;
}

/* ---- pill: warning chip with red tint + icon inside ---- */
.bridge-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 170, 170, 0.95);             /* warning red text */
  background: rgba(255, 80, 80, 0.08);          /* red tint */
  border: 1px solid rgba(255, 80, 80, 0.28);    /* red border */
  padding: 6px 12px;
  border-radius: 100px;
}
.pill-icon {
  width: 14px;
  height: 14px;
  color: rgba(255, 150, 150, 0.85);
  flex-shrink: 0;
}

.bridge-card-title {
  font-size: 22px;              /* compressed */
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 0 0 16px;
  line-height: 1.22;
}

/* ---- pains: BRIGHTER text + SHARP red × with glow ---- */
.bridge-card-pains {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* compressed */
}
.bridge-card-pains li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;              /* +1 */
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.5;
}
.bridge-card-pains li::before {
  content: '×';
  position: absolute;
  left: 0;
  top: -1px;
  color: rgb(255, 75, 75);                      /* high-saturation warning red */
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255, 75, 75, 0.45);  /* glow */
}

/* ---- center card (Ciao — winner) ----
   Visual weight cranked up: thicker, brighter purple border + multi-layer glow
   so the eye is unmistakably drawn here as THE solution. */
.bridge-card-center {
  background: linear-gradient(180deg,
              rgba(var(--accent-purple), 0.14) 0%,
              rgba(var(--accent-purple), 0.04) 100%);
  border: 1.5px solid rgba(var(--accent-purple-soft), 0.7);
  box-shadow:
    0 0 0 1px rgba(var(--accent-purple-soft), 0.25),       /* tight inner ring */
    0 0 32px rgba(var(--accent-purple-soft), 0.35),        /* close glow */
    0 0 72px rgba(var(--accent-purple), 0.22),             /* far ambient */
    inset 0 0 28px rgba(var(--accent-purple), 0.08);       /* subtle inner wash */
  align-items: center;
  justify-content: center;       /* vertically center the cluster — kills bottom gap */
  text-align: center;
  padding: 24px 26px;
}
.bridge-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;           /* was 6 14 */
  background: linear-gradient(90deg,
              rgba(var(--accent-purple), 0.22),
              rgba(var(--accent-purple-soft), 0.28));
  border: 1px solid rgba(var(--accent-purple), 0.5);
  border-radius: 100px;
  box-shadow: 0 0 18px rgba(var(--accent-purple), 0.35);
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgb(230, 226, 255);
  margin-bottom: 10px;
}
.badge-bolt {
  width: 12px;
  height: 12px;
  color: rgb(var(--accent-purple-soft));
}
.bridge-card-headline {
  font-size: clamp(26px, 2.3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.024em;
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.bridge-card-value {
  font-size: 15.5px;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 18px;
  line-height: 1.5;
  max-width: 600px;
  letter-spacing: 0.005em;
}
.bridge-card-divider {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 0 16px;
}
.bridge-card-stats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-self: stretch;
  text-align: left;
}
.bridge-card-stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.stat-icon {
  width: 40px;                  /* compressed */
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--accent-purple), 0.14);
  border: 1px solid rgba(var(--accent-purple), 0.32);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(var(--accent-purple-soft));
  flex-shrink: 0;
}
.stat-icon svg { width: 18px; height: 18px; display: block; }
/* .stat-text styles are defined earlier (flex column with strong/em block subtitle pattern) */

/* === Mobile: vertical stack with proper gaps + downward visual flow === */
@media (max-width: 900px) {
  .bridge-cards {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 8px;                 /* tighter — better mobile fit */
    margin-top: 10px;
  }

  /* Pain column: 2 cards side-by-side with their own gap */
  .bridge-pain-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  /* Restore full rounded corners on every card */
  .bridge-pain-column .bridge-card-side {
    border-radius: 14px;
    border: 1px solid rgba(255, 80, 80, 0.10);
  }

  /* OUR KEY card — vertical mini transitioner with DOWNWARD arrow */
  .bridge-key {
    flex-direction: column;
    align-items: center;
    padding: 10px 14px 8px;
    gap: 4px;
    border-radius: 14px;
    border: 1px solid rgba(var(--accent-purple), 0.32);
    text-align: center;
  }
  .bridge-key-icon { width: 22px; height: 22px; }
  .bridge-key-eyebrow {
    margin: 0;
  }
  .bridge-key-text {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.3;
    letter-spacing: 0.06em;
  }
  /* On mobile, render spans inline with a space between */
  .bridge-key-text span { display: inline; }
  .bridge-key-text span + span::before { content: " "; white-space: pre; }
  /* Arrow rotates 90° to point DOWN — guides eye to solution below */
  .bridge-key-arrow {
    width: 22px;
    height: 22px;
    transform: rotate(90deg);
    margin: 2px 0 0;
  }

  /* Solution card: standard rounded card */
  .bridge-card-center {
    border-radius: 16px;
  }
}

@media (max-width: 900px) {
  /* ===== Remove visual noise: pill icons hidden on mobile ===== */
  .bridge-card-side .pill-icon { display: none; }
  .bridge-card-side .bridge-card-pill { gap: 0; padding: 4px 9px; }

  /* ===== Side cards: max compression, content packs top ===== */
  .bridge-card-side {
    padding: 13px 12px 14px;
    justify-content: flex-start;
  }
  .bridge-card-side .bridge-card-head {
    margin-bottom: 10px;
  }
  .bridge-card-side .bridge-card-pill {
    font-size: 8.5px;
    letter-spacing: 0.12em;
    line-height: 1.2;
  }
  .bridge-card-side .bridge-card-title {
    font-size: 12.5px;
    margin: 0 0 10px;
    line-height: 1.22;
    letter-spacing: -0.005em;
  }
  .bridge-card-side .bridge-card-pains {
    gap: 7px;
  }
  .bridge-card-side .bridge-card-pains li {
    font-size: 11.5px;
    padding-left: 17px;
    line-height: 1.32;
    color: rgba(255, 255, 255, 0.86);
  }
  .bridge-card-side .bridge-card-pains li::before {
    font-size: 14.5px;
    top: -1px;
  }

  /* ===== Center card: ultra-tight to fit one phone screen ===== */
  .bridge-card-center {
    padding: 14px 14px 14px;
  }
  .bridge-card-badge {
    font-size: 9px;
    padding: 4px 10px;
    margin-bottom: 8px;
  }
  .bridge-card-headline {
    font-size: 17px;               /* shrunk to fit phone */
    line-height: 1.18;
    margin-bottom: 6px;
  }
  .bridge-card-value {
    font-size: 11.5px;
    margin-bottom: 10px;
    line-height: 1.42;
    max-width: none;
  }
  .bridge-card-divider { margin-bottom: 10px; }

  /* ===== Stats: HORIZONTAL row, no icon boxes (saves vertical space) ===== */
  .bridge-card-stats {
    flex-direction: row;
    justify-content: space-around;
    gap: 8px;
    width: 100%;
  }
  .bridge-card-stats li {
    flex: 1;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    min-width: 0;
  }
  .stat-icon { display: none; }     /* remove icon boxes — noise on mobile */
  .stat-text {
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-primary);
  }
  .stat-text em { display: none; }  /* hide parentheticals */

  /* ===== WHY US: compress top spacing ===== */
  .section.section-compare .section-head .d2 {
    font-size: clamp(22px, 6.8vw, 28px);
    margin-bottom: 6px;
  }
  .section.section-compare .section-head .section-head-sub {
    font-size: 12px;
    max-width: 320px;
  }

  /* ===== Section padding compressed (mobile) ===== */
  .section.section-compare,
  .fullpage-swiper .swiper-slide.section-compare {
    padding-top: 32px !important;
    padding-bottom: 12px !important;
  }
}

/* SVG decoration layer — spine line + animated flow dots */
.bridge-spine {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.bridge-spine line {
  stroke: rgba(255, 255, 255, 0.28);    /* brighter than before — visible bridge */
  stroke-width: 1.2;
  stroke-dasharray: none;                /* solid, like a real bridge */
}

/* Each zone is a flex column with circle on top + content below */
.bridge-zone {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 8px;
}

/* Side circles — smaller, dimmer, neutral gray × inside */
.bridge-zone-side .bridge-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.bridge-x {
  width: 22px;
  height: 22px;
  stroke: rgba(255, 255, 255, 0.28);   /* neutral, not red */
  stroke-width: 1.4;
  stroke-linecap: round;
  fill: none;
}

/* Center node — bigger, the visual hero */
.bridge-zone-center .bridge-node {
  position: relative;
  width: 130px;                          /* up from 96 — clear hierarchy */
  height: 130px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.20),
              inset 0 0 18px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
}
.bridge-halo {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 255, 255, 0.20) 0%,
              rgba(255, 255, 255, 0.05) 40%,
              transparent 70%);
  pointer-events: none;
  animation: bridge-pulse 4s ease-in-out infinite;
}
@keyframes bridge-pulse {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.20); opacity: 1; }
}
.bridge-logo {
  width: 72px;
  height: auto;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
  position: relative;
  z-index: 2;
}

/* Content typography — uniform across all zones */
.bridge-content { width: 100%; max-width: 320px; }
.bridge-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);   /* neutral gray — no red */
  margin-bottom: 10px;
  padding: 0;
}
.bridge-eyebrow-winner {
  color: var(--text-primary);
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.18));
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 12px;
  border-radius: 100px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.18);
  letter-spacing: 0.16em;
}
.bridge-zone-title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text-secondary);        /* dimmer than before — sides are secondary */
  margin: 0 0 14px;
  line-height: 1.3;
}
.bridge-pains {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.7;
  text-align: center;                  /* centered — matches the centered zone layout */
}
.bridge-pains li {
  padding: 0;
}
/* No × prefix — clean text only. The broken icon at top conveys the failure. */

/* Center text — visually heavier than sides */
.bridge-zone-headline {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--text-primary);
  margin: 12px 0 12px;
  text-transform: uppercase;
}
.bridge-zone-value {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: 280px;
  margin: 0 auto;
}

/* Stats ledger below the diagram */
.bridge-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
}
.bridge-stat {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bridge-stat strong {
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* Entry animation — stagger by zone */
.bridge-zone {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
.bridge-spine,
.bridge-spine line,
.bridge-spine circle { opacity: 0; transition: opacity 1s var(--ease-out); }
.bridge-diagram.in .bridge-zone { opacity: 1; transform: translateY(0); }
.bridge-diagram.in .bridge-zone:nth-child(2) { transition-delay: 0.05s; } /* left */
.bridge-diagram.in .bridge-zone:nth-child(4) { transition-delay: 0.15s; } /* right */
.bridge-diagram.in .bridge-zone:nth-child(3) { transition-delay: 0.35s; } /* center last */
.bridge-diagram.in .bridge-spine { opacity: 1; transition-delay: 0.5s; }

/* ===== MOBILE: vertical 3-row flow ===== */
@media (max-width: 900px) {
  .bridge-diagram {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    padding: 8px 0;
    margin-top: 24px;
  }
  /* Hide the desktop horizontal spine SVG */
  .bridge-spine { display: none; }

  /* Each zone becomes a horizontal row: icon-left + content-right */
  .bridge-zone {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 16px;
    padding: 0;
    position: relative;
  }
  .bridge-content { max-width: none; flex: 1; }

  .bridge-zone-side .bridge-circle {
    width: 44px;
    height: 44px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .bridge-x { width: 18px; height: 18px; }

  .bridge-zone-center .bridge-node {
    width: 80px;
    height: 80px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .bridge-logo { width: 44px; }
  .bridge-halo { inset: -18px; }

  /* Mobile typography compaction */
  .bridge-eyebrow { font-size: 10px; margin-bottom: 4px; letter-spacing: 0.16em; }
  .bridge-zone-title { font-size: 13.5px; margin-bottom: 6px; }
  .bridge-pains { font-size: 12px; line-height: 1.5; text-align: left; }
  .bridge-zone-headline { font-size: 18px; margin: 4px 0 6px; line-height: 1.2; }
  .bridge-zone-value { font-size: 12px; line-height: 1.45; max-width: none; margin: 0; }

  /* Vertical spine — clear, solid bridge line linking zones */
  .bridge-zone:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -22px;
    width: 1.5px;
    height: 22px;
    background: rgba(255, 255, 255, 0.22);
  }
  .bridge-zone-side:not(:last-child)::after {
    left: 21px;             /* center of 44px side icon */
  }
  .bridge-zone-center:not(:last-child)::after {
    left: 39px;             /* center of 80px center node */
    background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15));
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
  }
  /* Stats stack on mobile */
  .bridge-stats {
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
    margin-top: 24px;
    padding-top: 14px;
  }
}

/* ============================================================
   COMPARE section: tight padding so the 4-row matrix fits 100vh
   Override the generic .section padding for this specific layout.
   ============================================================ */
.section.section-compare {
  padding-top: 72px;
  padding-bottom: 24px;
}
/* (legacy matrix overrides removed — they were breaking the centering
   by re-setting margin: 0 which wiped the auto left/right.) */
/* Override the swiper-slide long-section override that adds 110px padding-top */
.fullpage-swiper .swiper-slide.section-compare {
  padding-top: 72px !important;
  padding-bottom: 24px !important;
}

/* ============================================================
   COMPARE MATRIX — 4-column comparison table
   Per spec: no vertical borders, ultra-thin horizontal borders,
   SVG marks only (no emoji), winner column elevated + glowing,
   staggered scroll reveal, mobile sticky 1st col + horizontal scroll.
   ============================================================ */
.compare-matrix-wrap {
  margin: 28px auto 0;         /* tighter to section title above */
  max-width: 1200px;
  position: relative;
  isolation: isolate;
}
/* Winner column halo — single pseudo behind the table covering the
   rightmost 30% width. Single border, single glow, single gradient bg. */
.compare-matrix-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;                   /* now spans full matrix height (no stats below) */
  right: 0;
  width: 30%;
  border-radius: 16px;
  background: linear-gradient(180deg,
              rgba(255, 255, 255, 0.05) 0%,
              rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 60px rgba(255, 255, 255, 0.08),
              0 0 28px rgba(255, 255, 255, 0.04);
  z-index: -1;                 /* sit BEHIND the table */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.9s var(--ease-out) 0.5s;
}
.compare-matrix-wrap.in::before { opacity: 1; }
.compare-matrix-scroll {
  /* Wrapper allows horizontal scroll on narrow viewports */
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 12px 0 8px;        /* room for winner column glow to extend */
}
.compare-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}
/* No vertical borders anywhere — rely on whitespace */
.compare-matrix th,
.compare-matrix td { border: 0; }

/* ===== Column widths (desktop): asymmetric 40 / 15 / 15 / 30 ===== */
.compare-matrix .matrix-feature-col { width: 40%; }
.compare-matrix .matrix-option-col  { width: 15%; }
.compare-matrix .matrix-winner-col  { width: 30%; }

/* ===== Header row ===== */
.compare-matrix thead th {
  padding: 16px 18px 14px;     /* compact */
  text-align: left;
  vertical-align: bottom;
  font-weight: normal;
  position: relative;
}
/* Option columns (A, B, C) — all centered for clean vertical axes */
.compare-matrix thead th.matrix-option-col {
  text-align: center;
}
.compare-matrix .opt-tag {
  display: block;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.compare-matrix .opt-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

/* ===== Body rows ===== */
.compare-matrix tbody td,
.compare-matrix tbody th {
  padding: 14px 18px;          /* compact: 14 vertical instead of 24 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
}
.compare-matrix tbody tr:last-child td,
.compare-matrix tbody tr:last-child th {
  border-bottom: 0;
}
.matrix-feature-cell {
  text-align: left;
  font-weight: normal;
}
.feature-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.feature-sub {
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.matrix-cell { text-align: center; }

/* ===== Row hover guide ===== */
@media (hover: hover) and (pointer: fine) {
  .compare-matrix tbody tr td,
  .compare-matrix tbody tr th {
    transition: background 0.3s var(--ease-out);
  }
  /* Apply hover bg only to NON-winner cells so the winner column glass effect is preserved */
  .compare-matrix tbody tr:hover td:not(.status-winner),
  .compare-matrix tbody tr:hover th {
    background: rgba(255, 255, 255, 0.02);
  }
}

/* ===== SVG marks ===== */
.matrix-mark {
  display: block;
  margin: 0 auto;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Fail: faint dash — almost invisible, low aggression */
.mark-fail {
  width: 22px; height: 22px;
  stroke: rgba(255, 255, 255, 0.18);
  stroke-width: 1;
}
/* Pass (competitor): thin white check — neutral */
.mark-pass {
  width: 20px; height: 20px;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.6;
}
/* Pass (winner): bold check with glow */
.mark-winner {
  width: 26px; height: 26px;
  stroke: rgb(255, 255, 255);
  stroke-width: 2.4;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.45));
  transition: filter 0.35s var(--ease-out);
}

/* ===== Winner column: transparent cells so wrap ::before halo shows ===== */
.matrix-winner-col,
.status-winner {
  background: transparent;     /* the wrap ::before provides the gradient bg */
  position: relative;
}
.matrix-winner-col {
  padding-top: 24px !important;  /* room for the badge — compact */
}

/* ===== Winner badge ===== */
.winner-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: 0.22em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 4px 10px;
  border-radius: 100px;
  margin-bottom: 10px;
  box-shadow: 0 0 16px rgba(255, 255, 255, 0.18),
              inset 0 0 8px rgba(255, 255, 255, 0.06);
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
  white-space: nowrap;
}
.matrix-winner-col .opt-tag,
.matrix-winner-col .opt-name { color: var(--text-primary); }

/* ===== Winner cell extras: detail label under check ===== */
.winner-detail {
  display: block;
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ===== Hover: amplify winner glow ===== */
@media (hover: hover) and (pointer: fine) {
  .compare-matrix-wrap:hover .mark-winner {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
  }
}

/* ===== Trust stats footer below matrix ===== */
.compare-matrix-stats {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.stats-pair {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.stats-num {
  font-size: 26px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
.stats-text {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ===== Staggered scroll reveal: rows fade up in sequence ===== */
.compare-matrix tbody .matrix-row {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.compare-matrix-wrap.in tbody .matrix-row { opacity: 1; transform: translateY(0); }
.compare-matrix-wrap.in tbody .matrix-row:nth-child(1) { transition-delay: 0.08s; }
.compare-matrix-wrap.in tbody .matrix-row:nth-child(2) { transition-delay: 0.18s; }
.compare-matrix-wrap.in tbody .matrix-row:nth-child(3) { transition-delay: 0.28s; }
.compare-matrix-wrap.in tbody .matrix-row:nth-child(4) { transition-delay: 0.38s; }
/* (winner halo handled via .compare-matrix-wrap::before above) */

/* ===== Mobile: sticky first column + horizontal scroll ===== */
@media (max-width: 900px) {
  .compare-matrix-wrap { margin-top: 36px; }
  /* Disable the desktop wrap-level halo (it won't track horizontal scroll) */
  .compare-matrix-wrap::before { display: none; }
  /* Re-add styling at the cell level for mobile */
  .matrix-winner-col,
  .status-winner {
    background: linear-gradient(180deg,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0.02) 100%);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-right: 1px solid rgba(255, 255, 255, 0.1);
  }
  .matrix-winner-col { border-top: 1px solid rgba(255, 255, 255, 0.1); border-top-left-radius: 12px; border-top-right-radius: 12px; }
  .compare-matrix tbody tr:last-child .status-winner {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  .compare-matrix-scroll {
    /* Allow table to be wider than viewport */
    margin: 0 -22px;
    padding: 12px 22px 8px;
  }
  .compare-matrix {
    min-width: 720px;
  }
  /* Sticky first column */
  .compare-matrix .matrix-feature-col,
  .compare-matrix .matrix-feature-cell {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--bg-canvas);
    box-shadow: 12px 0 16px -10px rgba(0, 0, 0, 0.65);
    width: 220px;
    min-width: 220px;
  }
  /* Right columns: snap targets */
  .compare-matrix .matrix-option-col,
  .compare-matrix tbody td {
    scroll-snap-align: start;
    min-width: 150px;
    width: 150px;
  }
  .compare-matrix .matrix-winner-col,
  .compare-matrix tbody td.status-winner {
    min-width: 170px;
    width: 170px;
  }
  /* Hint that there's more — small horizontal wiggle on mount */
  @keyframes scroll-hint {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-16px); }
  }
  .compare-matrix-wrap.in .compare-matrix-scroll {
    animation: scroll-hint 1.6s var(--ease-out) 1.2s 1;
  }
  /* Trust stats stack on mobile */
  .compare-matrix-stats {
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
  }
}

/* ============================================================
   LEGACY COMPARE CARDS (kept for backwards-compat if any page uses)
   ============================================================ */
/* Checklist: 2 rows of has/lacks indicators */
.compare-checklist {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.compare-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  font-weight: 400;
  transition: opacity 0.3s var(--ease-out);
}
.compare-checklist li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.compare-checklist .has {
  color: var(--text-primary);
}
.compare-checklist .has::before {
  background: rgb(150, 220, 170);   /* subtle green */
  box-shadow: 0 0 8px rgba(150, 220, 170, 0.4);
}
.compare-checklist .lacks {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(220, 130, 130, 0.5);
}
.compare-checklist .lacks::before {
  background: rgb(220, 130, 130);   /* subtle red */
}

/* Popup: hidden card-overlay revealed on hover */
.compare-popup {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  padding: 26px 24px;
  background: linear-gradient(155deg, var(--bg-surface) 0%, #131822 100%);
  border-radius: var(--radius-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-out),
              visibility 0s linear 0.3s;
  z-index: 5;
  pointer-events: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.compare-popup-tag {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.compare-popup .point { margin: 0; }
.compare-popup .point .label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.compare-popup .point p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Desktop hover: popup fades in (card lifts up via .compare-card:hover) */
@media (hover: hover) and (pointer: fine) {
  .compare-card:hover .compare-popup {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s var(--ease-out),
                visibility 0s linear;
    pointer-events: auto;
  }
}

/* Touch devices: render popup inline below checklist (always visible) */
@media (hover: none) {
  .compare-popup {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--border-subtle);
    border-radius: 0;
    padding: 18px 0 0;
    margin-top: 22px;
  }
  .compare-popup-tag { margin-bottom: 8px; }
}

.compare-card .point { margin-bottom: 18px; }
.compare-card .point:last-child { margin-bottom: 0; }
.compare-card .point .label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.compare-card .point p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.compare-card.winner .compare-tag { color: var(--text-primary); }
.compare-card.winner .compare-title { color: var(--text-primary); }

/* Trust stats row inside winner card */
.trust-stats {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trust-num {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-primary);
}
.trust-label {
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.3;
}

/* Winner card — slow rotating gradient border */
.compare-card.winner {
  background: linear-gradient(165deg, rgba(255,255,255,0.06), var(--bg-surface) 60%);
}
.compare-card.winner::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,0.0) 0deg,
    rgba(255,255,255,0.85) 30deg,
    rgba(255,255,255,0.0) 70deg,
    rgba(255,255,255,0.0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: spin-border 8s linear infinite;
  pointer-events: none;
}
@keyframes spin-border { to { transform: rotate(360deg); } }

/* =========================================================
   4 PILLARS
   ========================================================= */
.section-pillars {
  padding: 96px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-pillars .section-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pillars-card {
  width: 100%;
  max-width: 880px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 8px 48px;
  margin: 0 auto;
}
.pillar-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--border-subtle);
}
.pillar-row:first-child { border-top: 0; }
.pillar-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0;
  line-height: 1;
}
.pillar-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pillar-title {
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0;
}
.pillar-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0;
}

/* =========================================================
   GUARANTEES — three giant numbers
   ========================================================= */
.section-guarantees { padding: 96px 56px 64px; }
.guarantees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
}
.guarantee-card {
  text-align: center;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: var(--radius-lg);
  transition: transform 0.5s var(--ease-out), background 0.5s var(--ease-out);
  cursor: default;
  position: relative;
}
.guarantee-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,0.06), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  pointer-events: none;
}
.guarantee-card:hover { transform: translateY(-4px); }
.guarantee-card:hover::before { opacity: 1; }
.guarantee-card:hover .guarantee-num { text-shadow: 0 0 40px rgba(255,255,255,0.18); }

.guarantee-num {
  font-size: clamp(72px, 9.5vw, 156px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 28px;
  color: var(--text-primary);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(72px, 9.5vw, 156px);
  transition: text-shadow 0.5s var(--ease-out), letter-spacing 0.5s var(--ease-out);
}
.guarantee-num .g-symbol {
  font-size: 0.5em;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: -0.02em;
  margin: 0 0.04em;
  align-self: flex-end;
  padding-bottom: 0.06em;    /* nudge symbol up to sit above baseline like superscript */
}
/* "FIXED" word — same height as digits, slightly tighter tracking */
.fixed-num {
  letter-spacing: -0.05em;
}
.guarantee-label {
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  max-width: 24ch;
  line-height: 1.4;
}
.guarantee-foot {
  margin: 56px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* =========================================================
   PLATFORMS
   ========================================================= */
.section-platforms .d2 { max-width: 18ch; margin-bottom: 64px; }
.platforms {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  padding: 56px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
.platform-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 8px 0;
  transition: transform 0.4s var(--ease-out);
}
.platform-icon {
  width: 44px;
  height: 44px;
  color: var(--text-primary);
  margin-bottom: 4px;
  transition: transform 0.4s var(--ease-out);
}
.platform-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.2;
}
.platform-stat {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1;
}
.platform-desc {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 16ch;
  margin-top: -2px;
}
.platform-item:hover { transform: translateY(-3px); }
.platform-item:hover .platform-icon { transform: scale(1.08); }

/* =========================================================
   FAQ section (standalone, centered)
   ========================================================= */
.section-faq { padding: 110px 56px 80px; }
.faq-wrap {
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}
.faq-list {
  border-top: 1px solid var(--border-subtle);
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  padding-right: 12px;
}
.faq-list::-webkit-scrollbar { width: 4px; }
.faq-list::-webkit-scrollbar-thumb { background: var(--border-divider); border-radius: 2px; }
.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-q {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.faq-q .plus {
  width: 22px; height: 22px;
  position: relative;
  flex-shrink: 0;
  margin-left: 24px;
}
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--text-primary);
  border-radius: 1px;
  transition: transform 0.5s var(--ease-out);
}
.faq-q .plus::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-q .plus::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .plus::after { transform: translateX(-50%) rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out), padding 0.4s var(--ease-out);
}
.faq-item.open .faq-a {
  max-height: 1400px;
  padding: 0 0 24px;
}
.faq-a-content {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.faq-a-content p { margin: 0 0 8px; }
.faq-a-content ul { margin: 8px 0 0; padding-left: 20px; }
.faq-a-content li { margin-bottom: 10px; }
.faq-a-content strong { color: var(--text-primary); font-weight: 600; }

/* =========================================================
   APPLY title (also used in About/Paths)
   ========================================================= */
.apply-title {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.apply-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.apply-head {
  margin-bottom: 36px;
  text-align: center;
}

/* =========================================================
   APPLY form (used in modal)
   ========================================================= */
.form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-row input,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-divider);
  padding: 12px 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}
.form-row textarea { min-height: 92px; line-height: 1.5; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--text-primary); }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-muted); }
.form-submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.form-status {
  margin: 0;
  min-height: 18px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.form-status.ok    { color: #79E2A8; }
.form-status.error { color: #FF9A85; }

/* =========================================================
   MODAL — contact popup
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.modal.open { display: flex; opacity: 1; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 48px 40px 40px;
  z-index: 1;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.45s var(--ease-out);
  max-height: 92vh;
  overflow-y: auto;
}
.modal.open .modal-content { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color 0.3s, background 0.3s;
}
.modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.modal-close svg { width: 16px; height: 16px; }
.modal-title {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.modal-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 28px;
}
.modal .form {
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
body.modal-open { overflow: hidden; }

/* =========================================================
   FOOTER section
   ========================================================= */
.section-footer {
  padding: 96px 56px 48px;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.footer-top {
  margin-bottom: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-tagline {
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--text-primary);
  margin: 0;
  max-width: 14ch;
}
.footer-cta { flex-shrink: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.footer-col a, .footer-col span {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s, padding-left 0.3s var(--ease-out);
  position: relative;
  width: max-content;
}
.footer-col a { display: inline-block; }
.footer-col a::before {
  content: '→';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  font-size: 12px;
  color: var(--text-primary);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--text-primary); padding-left: 16px; }
.footer-col a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.footer-bottom {
  padding-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--text-muted); transition: color 0.3s; text-decoration: none; }
.footer-bottom a:hover { color: var(--text-primary); }

/* =========================================================
   ABOUT page — Story narrative
   ========================================================= */
.section-story {
  padding: 110px 56px 80px;
}
.story-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.story-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.story-wrap .d2 { margin: 0 0 40px; }
.story-p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 22px;
  font-weight: 400;
}
.story-p strong { color: var(--text-primary); font-weight: 600; }
.story-p:last-child { margin-bottom: 0; }
.story-meta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.story-meta p { margin: 0 0 10px; }
.story-meta strong { color: var(--text-primary); font-weight: 600; }

/* About hero override — bridge bg with motion */
body[data-page="about"] .hero::before {
  background-image: url('assets/bridge-bg.jpg');
  background-position: right center;
  transform-origin: 60% 50%;
  animation: ken-burns-about 22s ease-in-out infinite alternate;
}
body[data-page="about"] .hero::after {
  background: linear-gradient(100deg, rgba(7,9,14,0.85) 0%, rgba(7,9,14,0.6) 35%, rgba(7,9,14,0.25) 70%, rgba(7,9,14,0.08) 100%);
}
@keyframes ken-burns-about {
  0%   { transform: scale(1) translate(0%, 0%); }
  100% { transform: scale(1.18) translate(-3%, 2%); }
}

/* =========================================================
   ABOUT page — Choose your path
   ========================================================= */
.section-paths { padding: 96px 56px 80px; }
.paths-wrap { max-width: 1080px; margin: 0 auto; }
.paths-head { text-align: center; margin-bottom: 56px; }
.paths-head .apply-title { margin: 0 0 14px; }
.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.path-card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform 0.45s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
  text-decoration: none;
}
.path-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-divider);
  background: linear-gradient(165deg, rgba(255,255,255,0.04), var(--bg-surface) 60%);
}
.path-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.path-title {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.path-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 24px;
  flex: 1;
}
.path-cta {
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-cta .arrow { transition: transform 0.35s var(--ease-out); }
.path-card:hover .path-cta .arrow { transform: translateX(4px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (pointer: coarse) {
  .section { height: auto; min-height: 100vh; }
  body { height: auto; overflow-y: auto; }
}

@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .compare-card { min-height: auto; }
  .compare-card.winner { grid-column: 1 / -1; }
  .faq-list { max-height: none; overflow: visible; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --pad-x: 22px; }
  .nav { padding: 16px 20px; }
  .nav-cta { display: none; }
  .nav-toggle a { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .section { padding: 100px 22px 60px; }
  .intro .d1 { max-width: none; }
  .intro-right { text-align: left; margin-left: 0; }
  .trust-stats { grid-template-columns: 1fr; }
  .pillars-card { padding: 4px 24px; }
  .pillar-row { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .pillar-num { font-size: 16px; }
  .pillar-title { font-size: 18px; }
  .pillar-desc { font-size: 13px; }
  .guarantees { grid-template-columns: 1fr; gap: 16px; }
  .guarantee-card { padding: 12px 16px; }
  .guarantee-num { margin-bottom: 8px; min-height: 0; font-size: 56px; }
  .guarantee-label { font-size: 13px; }
  .guarantee-foot { margin: 16px 0 0; font-size: 11px; letter-spacing: 0.03em; }
  .section-guarantees { padding: 40px 24px 24px; }
  .platforms {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
    border: 0;
  }
  .platform-item {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-align: left;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .platform-item:first-child { border-top: 1px solid var(--border-subtle); }
  .platform-icon { flex-shrink: 0; width: 36px; height: 36px; margin-bottom: 0; }
  .platform-item > div:not(.platform-icon) { flex: 1; }
  .platform-name { font-size: 14px; }
  .platform-stat { display: inline; margin-left: 8px; }
  .platform-desc { max-width: none; margin-top: 4px; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col:nth-child(3) { grid-column: auto; }
  .form { padding: 24px; }
  .paths-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card.winner { grid-column: auto; }
}

.faq-q .plus::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-q .plus::after  { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); }
.faq-item.open .plus::after { transform: translateX(-50%) rotate(90deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.55s var(--ease-out), padding 0.4s var(--ease-out);
}
.faq-item.open .faq-a {
  max-height: 1400px;
  padding: 0 0 24px;
}
.faq-a-content {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.faq-a-content p { margin: 0 0 8px; }
.faq-a-content ul { margin: 8px 0 0; padding-left: 20px; }
.faq-a-content li { margin-bottom: 10px; }
.faq-a-content strong { color: var(--text-primary); font-weight: 600; }

/* APPLY title */
.apply-title {
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.apply-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.apply-head { margin-bottom: 36px; text-align: center; }

/* APPLY form */
.form {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row label {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-row input,
.form-row textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-divider);
  padding: 12px 0;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s;
  resize: vertical;
}
.form-row textarea { min-height: 92px; line-height: 1.5; }
.form-row input:focus, .form-row textarea:focus { border-color: var(--text-primary); }
.form-row input::placeholder, .form-row textarea::placeholder { color: var(--text-muted); }
.form-submit { margin-top: 8px; width: 100%; justify-content: center; }
.form-status {
  margin: 0; min-height: 18px;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-muted);
}
.form-status.ok    { color: #79E2A8; }
.form-status.error { color: #FF9A85; }

/* MODAL */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.modal.open { display: flex; opacity: 1; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 9, 14, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 48px 40px 40px;
  z-index: 1;
  transform: translateY(20px) scale(0.98);
  transition: transform 0.45s var(--ease-out);
  max-height: 92vh;
  overflow-y: auto;
}
.modal.open .modal-content { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: color 0.3s, background 0.3s;
}
.modal-close:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.modal-close svg { width: 16px; height: 16px; }
.modal-title {
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 1.05;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.modal-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 28px;
}
.modal .form { background: transparent; border: 0; padding: 0; border-radius: 0; }
body.modal-open { overflow: hidden; }

/* FOOTER */
.section-footer { padding: 96px 56px 48px; }
.footer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
}
.footer-top {
  margin-bottom: 56px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.footer-tagline {
  font-size: clamp(36px, 5.5vw, 80px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  line-height: 0.98;
  color: var(--text-primary);
  margin: 0;
  max-width: 14ch;
}
.footer-cta { flex-shrink: 0; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 24px;
}
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-h {
  font-size: 10px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 4px;
}
.footer-col a, .footer-col span {
  font-size: 14px;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.3s, padding-left 0.3s var(--ease-out);
  position: relative;
  width: max-content;
}
.footer-col a { display: inline-block; }
.footer-col a::before {
  content: '→';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  font-size: 12px;
  color: var(--text-primary);
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.footer-col a:hover { color: var(--text-primary); padding-left: 16px; }
.footer-col a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }
.footer-bottom {
  padding-top: 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: var(--text-muted); transition: color 0.3s; text-decoration: none; }
.footer-bottom a:hover { color: var(--text-primary); }

/* ABOUT — Story */
.section-story { padding: 110px 56px 80px; }
.story-wrap {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}
.story-eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.story-wrap .d2 { margin: 0 0 40px; }
.story-p {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.65;
  color: var(--text-primary);
  margin: 0 0 22px;
  font-weight: 400;
}
.story-p strong { color: var(--text-primary); font-weight: 600; }
.story-p:last-child { margin-bottom: 0; }
.story-meta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.story-meta p { margin: 0 0 10px; }
.story-meta strong { color: var(--text-primary); font-weight: 600; }

/* About hero override */
body[data-page="about"] .hero::before {
  background-image: url('assets/bridge-bg.jpg');
  background-position: right center;
  transform-origin: 60% 50%;
  animation: ken-burns-about 22s ease-in-out infinite alternate;
}
body[data-page="about"] .hero::after {
  background: linear-gradient(100deg, rgba(7,9,14,0.85) 0%, rgba(7,9,14,0.6) 35%, rgba(7,9,14,0.25) 70%, rgba(7,9,14,0.08) 100%);
}
@keyframes ken-burns-about {
  0%   { transform: scale(1) translate(0%, 0%); }
  100% { transform: scale(1.18) translate(-3%, 2%); }
}

/* ABOUT — Choose your path */
.section-paths { padding: 96px 56px 80px; }
.paths-wrap { max-width: 1080px; margin: 0 auto; }
.paths-head { text-align: center; margin-bottom: 56px; }
.paths-head .apply-title { margin: 0 0 14px; }
.paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.path-card {
  display: flex;
  flex-direction: column;
  padding: 40px 36px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  transition: transform 0.45s var(--ease-out), border-color 0.4s var(--ease-out), background 0.4s var(--ease-out);
  text-decoration: none;
}
.path-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-divider);
  background: linear-gradient(165deg, rgba(255,255,255,0.04), var(--bg-surface) 60%);
}
.path-label {
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.path-title {
  font-size: clamp(20px, 1.8vw, 28px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: 1.1;
  color: var(--text-primary);
  margin: 0 0 14px;
}
.path-desc {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0 0 24px;
  flex: 1;
}
.path-cta {
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.path-cta .arrow { transition: transform 0.35s var(--ease-out); }
.path-card:hover .path-cta .arrow { transform: translateX(4px); }

/* RESPONSIVE */

/* =========================================================
   MOBILE — section-by-section snap (true fullPage feel on touch)
   ========================================================= */
/* =========================================================
   SWIPER.JS FULLPAGE LAYOUT
   - body keeps overflow:hidden while a .fullpage-swiper exists
   - the swiper container takes the full viewport
   - each slide is exactly 100vh; long-content sections allow
     internal scroll inside .section-inner so users can read
     overflow content without leaking into next slide
   ========================================================= */
body:has(.fullpage-swiper) {
  overflow: hidden;
  height: 100vh;
  height: 100svh;
}
.fullpage-swiper {
  width: 100%;
  height: 100vh;
  height: 100svh;
}
.fullpage-swiper .swiper-slide.section {
  height: 100%;
  min-height: 0;          /* override the global .section min-height */
}
/* Long sections — anchor content to TOP of slide and allow internal
   scroll. Default .section uses justify-content:center which causes
   overflow content to be clipped on BOTH top and bottom. We override
   to flex-start so content flows from top with scroll for the rest. */
.fullpage-swiper .swiper-slide.section-compare,
.fullpage-swiper .swiper-slide.section-faq,
.fullpage-swiper .swiper-slide.section-pillars,
.fullpage-swiper .swiper-slide.section-platforms,
.fullpage-swiper .swiper-slide.section-footer {
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
/* Guarantees: short content — vertically center with a slight downward bias
   for optical balance (padding-top > padding-bottom pushes content down). */
.fullpage-swiper .swiper-slide.section-guarantees {
  justify-content: center;
  padding-top: 18vh;
  padding-bottom: 8vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Mobile: tighter padding — stacked content takes more vertical room */
@media (max-width: 900px) {
  .fullpage-swiper .swiper-slide.section-guarantees {
    padding-top: 7vh !important;
    padding-bottom: 4vh !important;
  }
}
/* Restore the original .section padding-top so the title isn't
   crammed under the fixed nav bar. */
.fullpage-swiper .swiper-slide.section-compare,
.fullpage-swiper .swiper-slide.section-faq,
.fullpage-swiper .swiper-slide.section-pillars,
.fullpage-swiper .swiper-slide.section-platforms,
.fullpage-swiper .swiper-slide.section-footer {
  padding-top: 110px;          /* extra room below the fixed nav */
  padding-bottom: 60px;
}
/* The section-inner inside these long sections should occupy
   its natural height (not capped) since the parent now handles
   the scroll. */
.fullpage-swiper .swiper-slide.section-compare .section-inner,
.fullpage-swiper .swiper-slide.section-faq .section-inner,
.fullpage-swiper .swiper-slide.section-pillars .section-inner,
.fullpage-swiper .swiper-slide.section-platforms .section-inner,
.fullpage-swiper .swiper-slide.section-guarantees .section-inner,
.fullpage-swiper .swiper-slide.section-footer .section-inner {
  max-height: none;
  overflow: visible;
}
/* FAQ list already has its own max-height + scrollbar — override it
   so the WHOLE section scrolls as one unit, not nested scrolls. */
.fullpage-swiper .swiper-slide.section-faq .faq-list {
  max-height: none;
  overflow-y: visible;
  padding-right: 0;
}

@media (pointer: coarse) {
  /* On touch devices ensure section-inner doesn't get a max-height
     conflict with parent .section flex layout. */
  .swiper-slide.section { min-height: 0; }

  /* ---- HERO image — push focal subject right of text on mobile ---- */
  .hero::before {
    background-position: 70% center;   /* show the right portion (skyline) */
    transform-origin: 70% 50%;
  }
  .hero::after {
    /* Stronger top-down darken so text reads cleanly over any image area */
    background: linear-gradient(180deg,
      rgba(7,9,14,0.85) 0%,
      rgba(7,9,14,0.50) 45%,
      rgba(7,9,14,0.78) 100%);
  }

  /* ---- POSITIONING image — push subject opposite side of text ---- */
  .section-positioning::before {
    background-position: 30% center;   /* show left portion (cityscape) */
    transform-origin: 30% 50%;
  }
  .section-positioning::after {
    background: linear-gradient(180deg,
      rgba(7,9,14,0.85) 0%,
      rgba(7,9,14,0.50) 45%,
      rgba(7,9,14,0.85) 100%);
  }

  /* Soften the Ken Burns motion on mobile (battery + readability) */
  .hero::before,
  .section-positioning::before {
    animation-duration: 28s;
  }
}

@media (max-width: 1100px) {
  .nav-cta { display: none; }
  .compare-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .compare-card { min-height: auto; }
  .compare-card.winner { grid-column: 1 / -1; }
  .faq-list { max-height: none; overflow: visible; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --pad-x: 22px; }
  .nav { padding: 16px 20px; }
  .nav-cta { display: none; }
  .nav-toggle a { padding: 6px 10px; font-size: 9.5px; letter-spacing: 0.06em; white-space: nowrap; }
  .section { padding: 100px 22px 60px; }
  .intro .d1 { max-width: none; }
  .intro-right { text-align: left; margin-left: 0; }
  .trust-stats { grid-template-columns: 1fr; }
  .pillars-card { padding: 4px 24px; }
  .pillar-row { grid-template-columns: 40px 1fr; gap: 16px; padding: 22px 0; }
  .pillar-num { font-size: 16px; }
  .pillar-title { font-size: 18px; }
  .pillar-desc { font-size: 13px; }
  .guarantees { grid-template-columns: 1fr; gap: 40px; }
  .platforms { grid-template-columns: 1fr; gap: 0; padding: 0; border: 0; }
  .platform-item {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    text-align: left;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .platform-item:first-child { border-top: 1px solid var(--border-subtle); }
  .platform-icon { flex-shrink: 0; width: 36px; height: 36px; margin-bottom: 0; }
  .platform-item > div:not(.platform-icon) { flex: 1; }
  .platform-name { font-size: 14px; }
  .platform-stat { display: inline; margin-left: 8px; }
  .platform-desc { max-width: none; margin-top: 4px; text-align: left; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-col:nth-child(3) { grid-column: auto; }
  .form { padding: 24px; }
  .paths-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-card.winner { grid-column: auto; }
  /* On narrow viewports the d1 displays giant; clamp it */
  .d1 { font-size: clamp(40px, 11vw, 64px); }
  .intro-sub { font-size: 15px; line-height: 1.55; }
}

/* =========================================================
   LEGAL PAGES (Privacy / Terms)
   Single-flow page, no scroll snap, easy reading.
   ========================================================= */
/* Long-form pages: bypass 100vh body lock — use window-level scroll */
html:has(body[data-page="legal"]),
html:has(body[data-page="insights-index"]),
html:has(body[data-page="insights-article"]) {
  height: auto !important;
  overflow-y: visible !important;
}
body[data-page="legal"],
body[data-page="insights-index"],
body[data-page="insights-article"] {
  height: auto !important;
  min-height: 100vh !important;
  overflow-y: visible !important;
}
.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 100px;
  color: var(--text-secondary);
}
.legal h1 {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 600;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin: 0 0 16px;
  line-height: 1;
}
.legal h2 {
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin: 56px 0 16px;
}
.legal h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 32px 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.legal p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 16px;
}
.legal ul {
  margin: 0 0 16px;
  padding-left: 24px;
}
.legal li {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 8px;
}
.legal strong { color: var(--text-primary); font-weight: 600; }
.legal a {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--border-divider);
  transition: text-decoration-color 0.3s;
}
.legal a:hover { text-decoration-color: var(--text-primary); }
.legal-meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 32px;
}
.legal-disclaimer {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 18px 22px;
  margin: 0 0 48px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.legal-footer-note {
  margin-top: 80px;
  padding-top: 32px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}