/* =============================================
   SmartRescue — Brand Dark
   ============================================= */

/* Brand tokens — SmartRescue dark theme */
:root {
  color-scheme: dark;

  /* raw scales */
  --primary-50: #F2F5FB;
  --primary-100: #DBE3F1;
  --primary-200: #B6C8E9;
  --primary-300: #93AEDE;
  --primary-400: #7293CD;
  --primary-500: #5279C1;
  --primary-600: #3760AF;
  --primary-700: #224894;
  --primary-800: #143471;
  --primary-900: #0C2350;
  --primary-950: #061431;
  --secondary-400: #FEC058;
  --secondary-500: #F2AC1A;
  --secondary-600: #CE9114;

  /* semantic (dark theme) */
  --surface: var(--primary-950);
  --surface-raised: var(--primary-900);
  --ink: #ffffff;
  --ink-muted: var(--primary-200);
  --border-strong: var(--primary-400);
  --brand: var(--primary-400);
  --on-brand: var(--primary-950);
  --accent: var(--secondary-500);
  --on-accent: var(--primary-950);
  --accent-text: var(--secondary-400);

  /* site aliases */
  --white: var(--surface-raised);
  --bg: var(--surface);
  --bg-soft: var(--surface-raised);
  --bg-warm: var(--surface-raised);
  --bg-muted: #0a1d46;

  --text: var(--ink);
  --text-secondary: var(--ink-muted);
  --text-muted: var(--primary-300);

  --accent-hover: var(--secondary-600);
  --accent-glow: rgba(114, 147, 205, 0.28);
  --accent-fill-glow: rgba(242, 172, 26, 0.28);

  --border: rgba(182, 200, 233, 0.14);
  --border-orange: rgba(114, 147, 205, 0.4);

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 28px;
  --nav-height: 68px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 60px rgba(34, 72, 148, 0.35);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);

  --gradient-brand: linear-gradient(135deg, var(--primary-400) 0%, var(--primary-300) 50%, var(--primary-200) 100%);
  --gradient-hero: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(55, 96, 175, 0.4) 0%, transparent 70%);

  --reveal-distance: 32px;

  --bg-deep: #05080C; /* The Road Ahead section only */
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Page glow: fixed, very subtle colour wash behind the transparent sections */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 15% 10%, rgba(55, 96, 175, 0.18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 90% 60%, rgba(90, 70, 170, 0.10), transparent 70%);
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ---- Section badge ---- */
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 980px;
  background: rgba(114, 147, 205, 0.12);
  border: 1px solid var(--border-orange);
  color: var(--primary-200);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.section-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-400);
}

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-height);
  background: rgba(6, 20, 49, 0.8);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.nav.nav-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 30px;
  width: auto;
}

.footer-logo {
  height: 32px;
  width: auto;
  margin: 0 auto 20px;
}

:focus-visible {
  outline: 2px solid var(--border-strong);
  outline-offset: 3px;
}

.nav-links {
  display: flex;
  gap: 32px;
}

.nav-links a {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--primary-200);
}

.nav-cta {
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 980px;
  background: var(--primary-100);
  color: var(--primary-950);
  box-shadow: 0 4px 14px rgba(219, 227, 241, 0.2);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.nav-cta:hover {
  background: var(--primary-50);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(219, 227, 241, 0.3);
}

/* ---- Nav: responsive overflow ---- */
.nav-links { gap: 28px; white-space: nowrap; }
.nav-cta { white-space: nowrap; }
.nav-right { display: flex; align-items: center; gap: 12px; }

.nav-more {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 980px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.nav-more:hover,
.nav-more[aria-expanded="true"] { color: var(--text); border-color: rgba(182, 200, 233, 0.32); }
.nav-more-chev { transition: transform 0.2s; }
.nav-more[aria-expanded="true"] .nav-more-chev { transform: rotate(180deg); }
.nav-more-burger { display: none; }

.nav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 28px;
  min-width: 220px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(6, 20, 49, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
}
.nav-panel[hidden] { display: none; }
.nav-panel a {
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.2s, background 0.2s;
}
.nav-panel a:hover { color: var(--text); background: rgba(182, 200, 233, 0.08); }
.nav-panel a.is-active { color: var(--text); }
.nav-panel .np-primary { display: none; }

/* Medium: main links inline, the rest behind "More" */
@media (max-width: 1099px) {
  .nav-links { gap: 22px; }
  .nav-links .nav-extra { display: none; }
  .nav-more { display: inline-flex; }
}
/* Wide: everything inline, no dropdown */
@media (min-width: 1100px) {
  .nav-panel { display: none !important; }
}
/* Small: menu button only, all links in the panel */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-more { padding: 9px 10px; }
  .nav-more-label, .nav-more-chev { display: none; }
  .nav-more-burger { display: block; }
  .nav-panel { left: 16px; right: 16px; }
  .nav-panel .np-primary { display: block; }
  .nav-inner { padding: 0 16px; }
}
/* Full logo at every size, smaller on mobile */
.nav-logo .nav-logo-full { display: block; height: 24px; width: auto; flex: none; }
@media (max-width: 768px) {
  /* scales with the viewport but never closer than 16px to the button */
  .nav-inner { gap: 16px; }
  .nav-logo .nav-logo-full { height: clamp(18px, 5.8vw, 24px); }
}
@media (max-width: 400px) {
  .nav-cta { padding: 9px 14px; }
}
@media (max-width: 359px) {
  .nav-cta { padding: 8px 11px; font-size: 0.8125rem; }
}
@media (max-width: 329px) {
  .nav-cta { display: none; } /* "Demo" is still in the menu */
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 980px;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: all 0.25s;
  cursor: pointer;
  border: 1.5px solid transparent;
  line-height: 1.2;
  font-family: var(--font);
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 4px 20px var(--accent-fill-glow);
}

.btn-primary:hover {
  background: var(--secondary-400);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px var(--accent-fill-glow);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover {
  border-color: var(--primary-300);
  color: var(--primary-200);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 14px 20px;
}

.btn-ghost:hover {
  color: var(--primary-200);
}

/* ---- Placeholders ---- */
.placeholder-img {
  background: linear-gradient(145deg, var(--primary-900) 0%, #0f2a5e 100%);
  border-radius: var(--radius);
  border: 1px dashed var(--border-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.placeholder-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(114, 147, 205, 0.1), transparent 60%);
}

.placeholder-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--gradient-brand);
  margin-bottom: 16px;
  box-shadow: 0 4px 12px var(--accent-glow);
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* ---- Hero ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--white);
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--gradient-hero);
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.hero-blob-1 {
  width: 600px;
  height: 600px;
  background: rgba(55, 96, 175, 0.35);
  top: -200px;
  right: -100px;
}

.hero-blob-2 {
  width: 400px;
  height: 400px;
  background: rgba(34, 72, 148, 0.4);
  bottom: 10%;
  left: -100px;
}

.hero-blob-3 {
  width: 300px;
  height: 300px;
  background: rgba(114, 147, 205, 0.15);
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}

.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.7;
  overflow: hidden;
  will-change: transform;
}

/* Blurred blobs are costly to composite on phones and sit under the video. */
@media (max-width: 700px) {
  .hero-blob { display: none; }
  .hero-video { will-change: auto; }
}

.hero-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-video-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(160deg, var(--primary-900), var(--primary-950));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--text-muted);
  font-size: 0.875rem;
}

.hero-video-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--border-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-400);
  box-shadow: var(--shadow-md);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(6,20,49,0.35) 0%, rgba(6,20,49,0.8) 70%, #061431 100%);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  will-change: transform, opacity;
  text-align: center;
  max-width: 880px;
  padding: calc(var(--nav-height) + 60px) 28px 100px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 980px;
  background: rgba(114, 147, 205, 0.12);
  border: 1px solid var(--border-orange);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--primary-200);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.hero-title {
  font-size: clamp(2.75rem, 6.5vw, 4.25rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 24px;
}

.hero-title span {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 640px;
  margin: 0 auto 40px;
  font-weight: 400;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  align-items: center;
}

/* ---- Sections ---- */
.section {
  padding: 110px 0;
  position: relative;
}

.section-dark {
  background: var(--bg-soft);
  color: var(--text);
}

.section-light {
  background: var(--white);
  color: var(--text);
}

.section-header {
  margin-bottom: 56px;
}

.section-header.centered {
  text-align: center;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 18px;
  color: var(--text);
}

.section-lead {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  color: var(--text-secondary);
  max-width: 620px;
  line-height: 1.7;
}

.section-header.centered .section-lead {
  margin: 0 auto;
}

/* ---- Problem ---- */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: center;
}

.problem-list {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.problem-intro {
  font-size: 1.0625rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

.problem-list ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}

.problem-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.problem-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(248, 113, 113, 0.15);
  color: #fca5a5;
  font-size: 0.6875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.problem-result {
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--primary-100);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.comparison {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}

.comparison-panel {
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.comparison-traditional {
  opacity: 0.85;
}

.comparison-smart {
  border-color: var(--border-orange);
  box-shadow: var(--shadow-lg);
}

.comparison-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  color: var(--text-muted);
}

.comparison-smart .comparison-label {
  color: var(--primary-200);
}

.comparison-image {
  aspect-ratio: 4/3;
  min-height: 180px;
  border-radius: var(--radius-sm);
}

.comparison-divider {
  display: flex;
  align-items: center;
  justify-content: center;
}

.comparison-divider span {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(114, 147, 205, 0.12);
  border: 1px solid var(--border-orange);
  color: var(--primary-200);
  font-size: 0.75rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 900px) {
  .problem-grid { grid-template-columns: 1fr; gap: 40px; }
  .comparison { grid-template-columns: 1fr; }
}

/* ---- Ecosystem ---- */
.ecosystem-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.ecosystem-connects {
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--border);
}

.ecosystem-label {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--text);
}

.ecosystem-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ecosystem-list li {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  padding: 12px 16px 12px 40px;
  position: relative;
  background: var(--white);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: border-color 0.2s, transform 0.2s;
}

.ecosystem-list li:hover {
  border-color: var(--border-orange);
  transform: translateX(4px);
}

.ecosystem-list li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-brand);
}

.ecosystem-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

.flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.flow-node {
  width: 100%;
  max-width: 280px;
  padding: 14px 24px;
  background: var(--bg-muted);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--border);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.flow-node-accent {
  background: var(--brand);
  color: var(--on-brand);
  border-color: transparent;
  box-shadow: 0 4px 16px var(--accent-glow);
}

.flow-node-final {
  background: var(--primary-800);
  color: #fff;
  border-color: var(--border-orange);
}

.flow-arrow {
  font-size: 1rem;
  color: var(--primary-400);
  padding: 6px 0;
  line-height: 1;
}

.flow-step:hover .flow-node,
.flow-node.flow-active {
  transform: scale(1.02);
  border-color: var(--border-orange);
  box-shadow: var(--shadow-md);
}

.flow-node-accent.flow-active,
.flow-node-final.flow-active {
  border-color: transparent;
  box-shadow: 0 8px 24px var(--accent-glow);
}

@media (max-width: 768px) {
  .ecosystem-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* ---- Steps ---- */
.steps {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.step {
  display: grid;
  grid-template-columns: 64px 1fr 1fr;
  gap: 36px;
  align-items: start;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 40px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s, border-color 0.3s;
}

.step:hover {
  border-color: var(--border-orange);
  box-shadow: var(--shadow-md);
}

.step-number {
  font-size: 2.5rem;
  font-weight: 500;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.04em;
}

.step-content h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}

.step-content p {
  color: var(--text-secondary);
  margin-bottom: 14px;
  font-size: 0.9375rem;
}

.step-content ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.step-content li {
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding-left: 18px;
  position: relative;
}

.step-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary-400);
}

.step-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.step-tags span {
  padding: 6px 14px;
  border-radius: 980px;
  background: rgba(114, 147, 205, 0.12);
  border: 1px solid var(--border-orange);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary-100);
}

.step-visual {
  aspect-ratio: 16/10;
  min-height: 200px;
  border-radius: var(--radius-sm);
}

@media (max-width: 900px) {
  .step { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}

/* ---- Module Cards ---- */
.module-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.module-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.module-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-orange);
  box-shadow: var(--shadow-lg);
}

.module-card-visual {
  aspect-ratio: 16/10;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
}

.module-card-body {
  padding: 28px;
}

.module-card-body h3 {
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
  color: var(--text);
}

.module-meta {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.module-meta strong {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary-200);
  margin-bottom: 8px;
}

.module-meta li {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding: 2px 0;
}

@media (max-width: 900px) {
  .module-cards { grid-template-columns: 1fr; }
}

/* ---- Intelligence ---- */
.section-intelligence {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-900) 100%);
  color: #fff;
  padding: 110px 0;
}

.section-intelligence .section-badge {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.section-intelligence .section-badge::before {
  background: #fff;
}

.section-intelligence .section-title {
  color: #fff;
}

.section-intelligence .section-lead {
  color: rgba(6, 20, 49, 0.8);
}

.intel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.intel-card {
  padding: 28px 22px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(8px);
  transition: background 0.3s, transform 0.3s;
}

.intel-card:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-4px);
}

.intel-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.intel-card p {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.55;
}

.intel-card .placeholder-icon {
  background: rgba(255, 255, 255, 0.25);
  box-shadow: none;
}

@media (max-width: 900px) {
  .intel-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .intel-grid { grid-template-columns: 1fr; }
}

/* ---- Vision ---- */
.section-vision {
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
  padding: 110px 0;
}

.vision-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.vision-item {
  text-align: center;
  background: var(--white);
  border-radius: var(--radius);
  padding: 16px;
  border: 1px solid var(--border);
  transition: transform 0.3s, box-shadow 0.3s;
}

.vision-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-orange);
}

.vision-visual {
  aspect-ratio: 1;
  margin-bottom: 14px;
  border-radius: var(--radius-sm);
}

.vision-item h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

@media (max-width: 900px) {
  .vision-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 500px) {
  .vision-grid { grid-template-columns: 1fr; }
}

/* ---- Demo ---- */
.section-demo {
  background: var(--bg-soft);
  padding: 110px 0 120px;
}

.demo-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.demo-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
  transition: transform 0.35s, box-shadow 0.35s;
  display: block;
}

.demo-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-orange);
}

.demo-card-visual {
  aspect-ratio: 16/10;
  border-radius: 0;
}

.demo-card-body {
  padding: 28px;
  text-align: center;
}

.demo-card-body h3 {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 16px;
}

.demo-btn {
  display: inline-block;
  padding: 11px 26px;
  border-radius: 980px;
  background: var(--brand);
  color: var(--on-brand);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: transform 0.2s;
}

.demo-card:hover .demo-btn {
  transform: scale(1.03);
}

@media (max-width: 900px) {
  .demo-cards { grid-template-columns: 1fr; }
}

/* ---- Footer ---- */
.footer {
  background: var(--white);
  padding: 48px 28px;
  text-align: center;
  border-top: 1px solid var(--border);
}

.footer p {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-weight: 500;
}

.footer-address {
  margin-top: 20px;
  font-size: 0.875rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: 500;
}

.footer p strong {
  color: var(--primary-200);
  font-weight: 500;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html { scroll-behavior: auto; }
}

/* ---- Demo video player ---- */
.demo-player {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

.demo-player.active {
  opacity: 1;
  visibility: visible;
}

.demo-player video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.demo-player-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: rgba(6, 20, 49, 0.8);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
}

/* ---- Team ---- */
.team-group + .team-group {
  margin-top: 72px;
}

.team-group-title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  text-align: center;
  margin-bottom: 32px;
}

.team-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

.team-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 900px;
  margin: 0 auto;
}

.team-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 24px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-photo {
  width: 160px;
  height: 160px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid var(--border-orange);
  margin: 4px 0 20px;
  background: var(--primary-800);
}

.team-name {
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.team-role {
  font-size: 0.875rem;
  color: var(--accent-text);
  margin: 4px 0 12px;
}

.team-bio {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 18px;
}

.team-linkedin {
  margin-top: auto;
  font-size: 0.875rem;
  color: var(--brand);
  text-decoration: none;
}

.team-linkedin:hover {
  color: var(--primary-200);
  text-decoration: underline;
}

@media (max-width: 1000px) {
  .team-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .team-grid-4,
  .team-grid-3 { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* ---- Problem ("The building in the dark") ---- */
.pb-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.pb-stage {
  position: relative;
}

.pb-stage::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -180px;
  bottom: 0;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  background: url("../assets/problem-bg.jpg") center / cover no-repeat;
  mix-blend-mode: screen;
  opacity: 0.09;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%);
}

.pb-intro,
.pb-cols {
  position: relative;
}

.pb-title {
  max-width: 720px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 24px;
}

.pb-lead {
  max-width: 640px;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

.pb-lead-2 { margin-top: 16px; color: var(--text); font-weight: 600; }

.pb-cols {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 72px 0 0;
  padding: 0;
}

.pb-col p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.pb-col strong {
  display: block;
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--text);
  margin-bottom: 6px;
}

.pb-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--brand);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-sub {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 120px 0 28px;
}

.pb-stats {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0;
  padding: 0;
}

.pb-stat {
  display: flex;
}

.pb-stat figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: rgba(20, 52, 113, 0.28);
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: var(--radius);
}

.pb-num {
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 16px;
}

.pb-stat-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 20px;
}

.pb-source {
  margin-top: auto;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.pb-closing {
  max-width: 760px;
  margin: 120px auto 0;
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.pb-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 1000px) {
  .pb-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .pb-section { padding: 80px 0 90px; }
  .pb-cols { grid-template-columns: 1fr; gap: 32px; margin-top: 48px; }
  .pb-sub { margin-top: 80px; }
  .pb-closing { margin-top: 80px; }
}

@media (max-width: 560px) {
  .pb-stats { grid-template-columns: 1fr; }
}

.pb-section > .container {
  position: relative;
}

/* ---- Solution ("One plan, three screens") ---- */
.sl-section {
  --sl-hazard: #F0616D;
  --sl-hazard-bg: #B8323E;
  --sl-safe: #3FCF8E;
  --sl-safe-bg: #177A55;
  --sl-accent: #7CC4FF;
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

/* Top edge: hairline and soft glow to separate Solution from Problem */
.sl-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 260px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(124, 196, 255, 0.45) 50%, transparent) top / 100% 1px no-repeat,
    radial-gradient(ellipse 60% 100% at 50% 0, rgba(124, 196, 255, 0.1), transparent 70%);
}

.sl-section > .container {
  position: relative;
}

.sl-title {
  max-width: 760px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
  margin-bottom: 20px;
}

.sl-status {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 7px 14px;
  background: rgba(182, 200, 233, 0.14);
  border-radius: 8px;
  margin-bottom: 24px;
}

.sl-lead {
  max-width: 640px;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Plan */
.sl-plan-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: center;
  margin-top: 64px;
}

.sl-plan {
  position: relative;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1200 / 741;
  margin: 0 auto;
}

.sl-plan picture,
.sl-plan > picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sl-plan > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sl-plan-base { opacity: 0.14; }
.sl-plan-lit { opacity: 0.9; }
.sl-plan > picture { display: block; }

.sl-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
}

.sl-marker:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
  border-radius: 50%;
}

.sl-shape {
  position: relative;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid;
}

.sl-shape svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sl-marker-hazard .sl-shape {
  background: var(--sl-hazard-bg);
  border-color: var(--sl-hazard);
  border-radius: 6px;
  transform: rotate(45deg);
}

.sl-marker-hazard .sl-shape svg { transform: rotate(-45deg); }

.sl-marker-access .sl-shape {
  background: var(--sl-safe-bg);
  border-color: var(--sl-safe);
  border-radius: 50%;
}

.sl-tip {
  position: absolute;
  bottom: calc(100% - 2px);
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  background: var(--primary-900);
  border: 1px solid rgba(182, 200, 233, 0.35);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.3;
  padding: 6px 10px;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  z-index: 5;
}

.sl-tip-below {
  bottom: auto;
  top: calc(100% - 2px);
  transform: translate(-50%, -4px);
}

.sl-marker:hover .sl-tip,
.sl-marker:focus-visible .sl-tip,
.sl-marker.is-open .sl-tip {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.sl-plan.sl-tips-off .sl-tip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Legend */
.sl-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

.sl-legend li {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
}

.sl-legend p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.sl-legend strong {
  font-weight: 500;
  color: var(--text);
}

.sl-key {
  width: 24px;
  height: 24px;
  margin: 2px 3px 0;
  border: 2px solid;
}

.sl-key-hazard {
  background: var(--sl-hazard-bg);
  border-color: var(--sl-hazard);
  border-radius: 5px;
  transform: rotate(45deg) scale(0.8);
}

.sl-key-access {
  background: var(--sl-safe-bg);
  border-color: var(--sl-safe);
  border-radius: 50%;
}

.sl-para {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Devices */
.sl-devices {
  margin: 64px 0 0;
  container-type: inline-size;
}

/* Three devices on one centre line; each keeps its own aspect ratio */
.sl-device-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 48px;
}

.sl-device {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.sl-device-phone { width: 16%; }
.sl-device-monitor { width: 50%; }
.sl-device-tablet { width: 24.4%; }

.sl-device-label {
  position: absolute;
  /* all three labels share one baseline below the tallest device (monitor: 17.6% of row width from centre) */
  top: calc(50% + 17.6cqw - 6px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--text);
}

/* Device: plain image + SVG overlay. No frame, no clipping, no mask. */
.device {
  position: relative;
  width: 100%;
}

.device img {
  display: block;
  width: 100%;
  height: auto;
}

.device svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.glow-border {
  fill: none;
  stroke: var(--sl-accent);
  stroke-width: var(--sw, 6); /* user units; main.js keeps it at about 2px on screen */
  opacity: 0; /* default: no highlight; shown while the device is active */
  filter: drop-shadow(0 0 6px var(--sl-accent));
  transition: opacity 0.35s ease;
}

.ring {
  fill: none;
  stroke-width: calc(var(--sw, 6) * 0.6);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.ring-hazard { stroke: var(--sl-hazard); }
.ring-access { stroke: var(--sl-safe); }

/* Connectors in the gaps between devices */
.sl-conn {
  position: relative;
  z-index: 0;
  flex: 1 1 0;
  height: 2px;
  margin: 0 -1.2%;
  background: rgba(124, 196, 255, 0.35);
}

/* glowing fill that follows the dot along the connector */
.sl-conn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sl-accent);
  box-shadow: 0 0 8px 1px rgba(124, 196, 255, 0.6);
  opacity: 0.8;
  transform-origin: left center;
  pointer-events: none;
}

.sl-dot {
  position: absolute;
  top: -3px;
  left: 0;
  width: 100%;
  height: 8px;
  opacity: 0;
  pointer-events: none;
}

.sl-dot::before {
  content: "";
  position: absolute;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sl-accent);
  box-shadow: 0 0 10px 3px rgba(124, 196, 255, 0.6);
}

.sl-caption {
  margin-top: 28px;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.sl-quote {
  max-width: 900px;
  margin: 120px auto 0;
  text-align: center;
  font-size: clamp(2rem, 4.4vw, 3.25rem); /* same as the section titles */
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.1;
}

.sl-vision {
  max-width: 640px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 0.9375rem;
  font-style: italic;
  line-height: 1.7;
  color: var(--text-muted);
}

.sl-vision[hidden] { display: none; }

.sl-closing {
  max-width: 680px;
  margin: 32px auto 0;
  text-align: center;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* Motion (hidden start states only apply when JS runs and motion is allowed) */
@media (prefers-reduced-motion: no-preference) {
  .js .sl-plan-lit {
    -webkit-mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
    mask-image: radial-gradient(circle closest-side, #000 55%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 22% 38%;
    mask-size: 22% 38%;
    -webkit-mask-position: 70% 38%;
    mask-position: 70% 38%;
    transition: mask-size 1.2s cubic-bezier(0.4, 0, 0.2, 1), mask-position 1.2s cubic-bezier(0.4, 0, 0.2, 1),
      -webkit-mask-size 1.2s cubic-bezier(0.4, 0, 0.2, 1), -webkit-mask-position 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .js .sl-plan.is-lit .sl-plan-lit {
    -webkit-mask-size: 400% 400%;
    mask-size: 400% 400%;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
  }

  .js .sl-marker {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
  }

  .js .sl-plan.is-hazards .sl-marker-hazard,
  .js .sl-plan.is-access .sl-marker-access {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .js .sl-plan.is-access .sl-marker-access { transition-delay: calc(var(--i) * 120ms); }

  .sl-plan.is-hazards .sl-marker-hazard .sl-shape::after {
    content: "";
    position: absolute;
    inset: -2px;
    border: 2px solid var(--sl-hazard);
    border-radius: 6px;
    animation: slPing 1.4s ease-out 1 forwards;
  }

  .js .sl-device {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .sl-devices.is-in .sl-device { opacity: 1; transform: none; }
  .sl-devices.is-in .sl-device-monitor { transition-delay: 0.15s; }
  .sl-devices.is-in .sl-device-tablet { transition-delay: 0.3s; }

  /* active: the outline takes the highlight colour, then returns to default */
  .js .device.is-active .glow-border { opacity: 1; }
  .js .device.is-active .ring {
    animation: slRingOut 0.7s ease-out forwards;
    animation-delay: calc(var(--i, 0) * 120ms);
  }

  /* data flow dot */
  .js .sl-conn::after { transform: scaleX(0); }
  .sl-conn.is-go::after { animation: slFillX 0.5s ease-in-out forwards; }
  .sl-conn.is-go .sl-dot:not(.sl-dot-back) { animation: slFlowX 0.5s ease-in-out forwards; }

  /* After the first pass the outlines stay still; signals keep travelling both ways (3s cycle):
     responder > dispatcher > owner, then owner > dispatcher > responder */
  .sl-devices.is-loop .sl-conn .sl-dot { animation: slLoopF 3s ease-in-out infinite; }
  .sl-devices.is-loop .sl-conn .sl-dot-back { animation-name: slLoopB; }
  .sl-devices.is-loop .sl-conn-2 .sl-dot-back { animation-delay: 0s; }
  .sl-devices.is-loop .sl-conn-1 .sl-dot-back { animation-delay: 0.5s; }
  .sl-devices.is-loop .sl-conn-1 .sl-dot:not(.sl-dot-back) { animation-delay: 1.5s; }
  .sl-devices.is-loop .sl-conn-2 .sl-dot:not(.sl-dot-back) { animation-delay: 2s; }

  /* markers pulse each time a signal reaches that screen (same 3s cycle) */
  .sl-devices.is-loop .ring { animation: 3s ease-out infinite; animation-delay: calc(var(--i, 0) * 120ms); }
  .sl-devices.is-loop .sl-device-phone .ring { animation-name: slPulseOwner; }
  .sl-devices.is-loop .sl-device-monitor .ring { animation-name: slPulseMonitor; }
  .sl-devices.is-loop .sl-device-tablet .ring { animation-name: slPulseTablet; }

  /* outline highlights while a signal is at that screen, then returns to default */
  .sl-devices.is-loop .glow-border { animation: 3s ease-in-out infinite; }
  .sl-devices.is-loop .sl-device-phone .glow-border { animation-name: slGlowOwner; }
  .sl-devices.is-loop .sl-device-monitor .glow-border { animation-name: slGlowMonitor; }
  .sl-devices.is-loop .sl-device-tablet .glow-border { animation-name: slGlowTablet; }
}

@keyframes slPing {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

@keyframes slRingOut {
  from { transform: scale(1); opacity: 0.9; }
  to { transform: scale(1.8); opacity: 0; }
}

@keyframes slGlowOwner {
  0%, 33% { opacity: 0; }
  35%, 51% { opacity: 1; }
  57%, 100% { opacity: 0; }
}

@keyframes slGlowMonitor {
  0%, 16% { opacity: 0; }
  18%, 34% { opacity: 1; }
  40%, 66% { opacity: 0; }
  68%, 84% { opacity: 1; }
  90%, 100% { opacity: 0; }
}

@keyframes slGlowTablet {
  0%, 2% { opacity: 1; }
  8%, 83% { opacity: 0; }
  85%, 100% { opacity: 1; }
}

@keyframes slFillX {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes slFillY {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes slPulseOwner {
  0% { transform: scale(1); opacity: 0; }
  33.3% { transform: scale(1); opacity: 0.9; }
  56.6% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes slPulseMonitor {
  0% { transform: scale(1); opacity: 0; }
  16.7% { transform: scale(1); opacity: 0.9; }
  40% { transform: scale(1.8); opacity: 0; }
  66.7% { transform: scale(1); opacity: 0.9; }
  90% { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes slPulseTablet {
  0% { transform: scale(1); opacity: 0; }
  83.3% { transform: scale(1); opacity: 0.9; }
  99.9% { transform: scale(1.8); opacity: 0.1; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes slLoopF {
  0% { transform: translateX(-100%); opacity: 0; }
  2%, 14.5% { opacity: 1; }
  16.7%, 100% { transform: translateX(0); opacity: 0; }
}

@keyframes slLoopB {
  0% { transform: translateX(0); opacity: 0; }
  2%, 14.5% { opacity: 1; }
  16.7%, 100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes slLoopFY {
  0% { transform: translateY(-100%); opacity: 0; }
  2%, 14.5% { opacity: 1; }
  16.7%, 100% { transform: translateY(0); opacity: 0; }
}

@keyframes slLoopBY {
  0% { transform: translateY(0); opacity: 0; }
  2%, 14.5% { opacity: 1; }
  16.7%, 100% { transform: translateY(-100%); opacity: 0; }
}

@keyframes slFlowX {
  0% { transform: translateX(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}

@keyframes slFlowY {
  0% { transform: translateY(-100%); opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Responsive */
@media (max-width: 1000px) {
  .sl-plan-wrap { grid-template-columns: 1fr; gap: 36px; }
  .sl-legend { grid-template-columns: 1fr 1fr; max-width: 720px; margin: 0 auto; }
}

@media (max-width: 700px) {
  .sl-section { padding: 80px 0 90px; }
  .sl-plan-wrap { margin-top: 48px; }
  .sl-legend { grid-template-columns: 1fr; }
  .sl-para { margin-top: 56px; }
  .sl-quote { margin-top: 80px; }
  .sl-closing { margin-top: 24px; }

  /* devices stack vertically at their natural aspect ratios */
  .sl-device-row {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }

  .sl-device { max-width: 100%; }
  .sl-device-monitor { width: 100%; max-width: 520px; }
  .sl-device-phone { width: 34%; max-width: 130px; }
  .sl-device-tablet { width: 42%; max-width: 160px; }

  .sl-devices { max-width: 82%; margin-left: auto; margin-right: auto; }
  .sl-device-row { padding-bottom: 0; }

  .sl-device-label {
    position: static;
    margin: 8px 0 0;
  }

  .sl-conn {
    flex: 0 0 36px;
    width: 2px;
    height: 36px;
    margin: 0;
  }

  .sl-dot {
    top: 0;
    left: -3px;
    width: 8px;
    height: 100%;
  }

  .sl-dot::before {
    right: auto;
    bottom: 0;
  }

  .sl-conn::after { transform-origin: top center; }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  .js .sl-conn::after { transform: scaleY(0); }
  .sl-conn.is-go::after { animation-name: slFillY; }
  .sl-conn.is-go .sl-dot:not(.sl-dot-back) { animation-name: slFlowY; }
  .sl-devices.is-loop .sl-conn .sl-dot { animation-name: slLoopFY; }
  .sl-devices.is-loop .sl-conn .sl-dot-back { animation-name: slLoopBY; }
}

/* ==========================================================================
   How It Works — "the line continues" timeline
   Default styles are the finished state (no JS / reduced motion).
   ========================================================================== */
.hw-section {
  --hw-accent: #7CC4FF; /* same as --sl-accent in Solution */
  --hw-track: rgba(124, 196, 255, 0.28);
  --hw-node: 44px;
  --hw-gap: 32px;
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.hw-timeline {
  position: relative;
  margin-top: 72px;
  padding: 8px 0;
}

.hw-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: var(--hw-gap);
  list-style: none;
}

.hw-line {
  position: absolute;
  top: calc(8px + var(--hw-node) / 2);
  left: calc(var(--hw-node) / 2);
  right: calc((100% - 4 * var(--hw-gap)) / 5 - var(--hw-node) / 2);
  height: 1px;
  background: var(--hw-track);
  pointer-events: none;
}

.hw-line-fill {
  position: absolute;
  inset: -0.5px 0;
  height: 2px;
  background: var(--hw-accent);
  box-shadow: 0 0 10px rgba(124, 196, 255, 0.55);
  transform-origin: left center;
}

.hw-step {
  position: relative;
  min-width: 0;
  padding-right: 8px;
}

.hw-node {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--hw-node);
  height: var(--hw-node);
  border-radius: 50%;
  background: var(--primary-900); /* opaque, slightly lighter than the page, hides the line behind */
  border: 2px solid var(--hw-accent);
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1;
}

.hw-glow {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(124, 196, 255, 0.16), 0 0 24px 4px rgba(124, 196, 255, 0.35);
  pointer-events: none;
}

.hw-num { position: relative; }

.hw-body { margin-top: 28px; }

.hw-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--hw-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.hw-step-title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 10px;
}

.hw-step-text {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* Motion: hidden start states only when JS runs and motion is allowed */
@media (prefers-reduced-motion: no-preference) {
  .js .hw-line-fill { transform: scaleX(0); }
  /* the line reaches each node, rests there, then moves on (matches --d on each step) */
  .js .hw-timeline.is-drawn .hw-line-fill { animation: hwDraw 3.4s linear forwards; }

  /* steps stay dimmed until the line reaches them */
  .js .hw-body {
    opacity: 0.25;
    transition: opacity 0.7s ease var(--d);
  }
  .js .hw-step.is-lit .hw-body { opacity: 1; }

  .js .hw-node {
    background: var(--bg);
    border-color: var(--text-muted);
    color: var(--text-muted);
    transition: background-color 0.4s ease var(--d), border-color 0.4s ease var(--d), color 0.4s ease var(--d);
  }
  .js .hw-glow {
    opacity: 0;
    transition: opacity 0.6s ease var(--d);
  }
  .js .hw-step.is-lit .hw-node {
    background: var(--primary-900);
    border-color: var(--hw-accent);
    color: #fff;
  }
  .js .hw-step.is-lit .hw-glow { opacity: 1; }

  .js .hw-icon * {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    opacity: 0;
    transition: stroke-dashoffset 0.9s ease calc(var(--d) + 0.15s), opacity 0.1s linear calc(var(--d) + 0.15s);
  }
  .js .hw-step.is-lit .hw-icon * {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Vertical timeline below 1024px */
@media (max-width: 1023px) {
  .hw-section { padding: 90px 0 100px; }
  .hw-timeline { margin-top: 56px; }
  .hw-line { display: none; }

  .hw-list {
    display: block;
  }

  .hw-step {
    padding: 0 0 52px calc(var(--hw-node) + 28px);
    --d: 0s !important;
  }
  .hw-step:last-child { padding-bottom: 0; }

  .hw-node {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1; /* above the line segments so they never cross the numerals */
  }

  /* line segment running from this node down to the next one */
  .hw-step:not(:last-child)::before,
  .hw-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--hw-node) / 2 - 0.5px);
    top: calc(var(--hw-node) / 2);
    bottom: calc(-1 * var(--hw-node) / 2);
    width: 1px;
    background: var(--hw-track);
    pointer-events: none;
    z-index: 0;
  }
  .hw-step:not(:last-child)::after {
    left: calc(var(--hw-node) / 2 - 1px);
    width: 2px;
    background: var(--hw-accent);
    box-shadow: 0 0 10px rgba(124, 196, 255, 0.55);
    transform-origin: top center;
  }

  .hw-body { margin-top: 0; padding-top: 2px; }
  .hw-icon { width: 32px; height: 32px; margin-bottom: 14px; }
  .hw-step-text { max-width: 560px; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .hw-step:not(:last-child)::after {
    transform: scaleY(0);
    transition: transform 0.7s ease;
  }
  .js .hw-step.is-link:not(:last-child)::after { transform: scaleY(1); }
}

@media (max-width: 700px) {
  .hw-section { padding: 80px 0 90px; }
}

/* ==========================================================================
   Team
   ========================================================================== */
.tm-section {
  --team-radius: var(--radius); /* 20px, same as the stats cards */
  --tm-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --tm-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.tm-section .sl-title {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.tm-group { margin-top: 64px; }
.tm-section .sl-title + .tm-group { margin-top: 56px; }

.tm-group-label {
  margin-bottom: 24px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tm-grid {
  --tm-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--tm-gap);
  list-style: none;
}

.tm-item {
  display: flex;
  min-width: 0;
  flex: 0 0 calc((100% - 3 * var(--tm-gap)) / 4);
}

.tm-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 8px;
  text-align: center;
}

.tm-portrait {
  display: block;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 1 / 1;
  height: auto;
  margin-bottom: 18px;
  border: 1px solid var(--tm-stroke);
  border-radius: 50%; /* square box, so a true circle */
  object-fit: cover;
  object-position: center 20%;
}

.tm-initials {
  display: grid;
  place-items: center;
  background: var(--surface-raised);
  color: var(--tm-accent);
  font-size: 2.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tm-name {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.tm-position {
  margin-top: 4px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--tm-accent);
}

.tm-desc {
  margin: 12px 0 20px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.tm-linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin-top: auto;
  padding: 0 18px;
  border: 1px solid var(--tm-accent);
  border-radius: 999px;
  background: transparent;
  color: var(--tm-accent);
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.2s, color 0.2s;
}

.tm-linkedin:hover,
.tm-linkedin:focus-visible {
  background: var(--tm-accent);
  color: var(--bg);
}

.tm-linkedin:focus-visible {
  outline: 2px solid var(--tm-accent);
  outline-offset: 2px;
}

@media (max-width: 1023px) {
  .tm-item { flex-basis: calc((100% - var(--tm-gap)) / 2); }
}

@media (max-width: 767px) {
  .tm-section { padding: 80px 0 90px; }
  .tm-grid { --tm-gap: 16px; }
  .tm-item { flex-basis: 100%; }
  .tm-portrait { max-width: 120px; }
  .tm-group { margin-top: 56px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .tm-item {
    opacity: 0;
    transform: translateY(12px);
  }

  .js .tm-group.is-in .tm-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i, 0) * 80ms);
  }
}

/* Nav: current section */
.nav-links a.is-active { color: var(--text); }

/* Section titles: dimmed lead-in, white punchline */
/* Section titles: very subtle white-to-pale-blue gradient */
.sl-title,
.pb-title,
.fw-title {
  background: linear-gradient(180deg, #ffffff 35%, var(--primary-200) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.t-dim { color: var(--text-muted); }
.sl-title .t-dim,
.pb-title .t-dim { -webkit-text-fill-color: var(--text-muted); }

/* Debug overlay: add ?debug=1 to the URL to check overlay alignment */
.sl-debug .glow-border,
.sl-debug .ring {
  stroke: #ff00ff !important;
  stroke-width: var(--sw, 6) !important;
  stroke-dasharray: none !important;
  opacity: 1 !important;
  animation: none !important;
  filter: none !important;
}

@keyframes hwDraw {
  0%, 14.7% { transform: scaleX(0); }
  25%, 39.7% { transform: scaleX(0.25); }
  50%, 64.7% { transform: scaleX(0.5); }
  75%, 89.7% { transform: scaleX(0.75); }
  100% { transform: scaleX(1); }
}

/* Mobile: larger section titles */
@media (max-width: 700px) {
  .pb-title,
  .sl-title { font-size: 2.5rem; }
}

/* ==========================================================================
   Demo video
   ========================================================================== */
.dm-section {
  --dm-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --dm-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  --dm-radius: 16px;
  position: relative;
  padding: 110px 0 100px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.dm-header { text-align: center; }

.dm-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dm-accent);
}

.dm-header .sl-title {
  margin-left: auto;
  margin-right: auto;
}

.dm-intro {
  max-width: 640px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

.dm-figure {
  max-width: 1100px;
  margin: 48px auto 0;
}

.dm-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* soft glow, pulsed once via opacity (kept outside the frame so it is never clipped) */
.dm-glow {
  position: absolute;
  inset: 0;
  border-radius: var(--dm-radius);
  box-shadow: 0 0 40px rgba(124, 196, 255, 0.12);
  pointer-events: none;
}

.dm-glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--dm-radius);
  box-shadow: 0 0 40px 4px rgba(124, 196, 255, 0.35);
  opacity: 0;
}

.dm-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--dm-stroke);
  border-radius: var(--dm-radius);
  background: #08193d center / contain no-repeat;
}

.dm-video,
.dm-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #08193d;
}

.dm-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
}

.dm-overlay.is-disabled { cursor: default; }

.dm-play {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  padding: 0 0 0 4px;
  border: 2px solid var(--dm-accent);
  border-radius: 50%;
  background: rgba(6, 20, 49, 0.6);
  color: var(--dm-accent);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.dm-overlay.is-disabled .dm-play {
  cursor: default;
  opacity: 0.5;
}

.dm-play:hover,
.dm-play:focus-visible {
  background: var(--dm-accent);
  color: var(--bg);
}

.dm-overlay.is-disabled .dm-play:hover {
  background: rgba(6, 20, 49, 0.6);
  color: var(--dm-accent);
}

.dm-play:focus-visible {
  outline: 2px solid var(--dm-accent);
  outline-offset: 2px;
}

.dm-length {
  position: absolute;
  right: 16px;
  bottom: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(6, 20, 49, 0.82);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}

.dm-length[hidden] { display: none; }

.dm-caption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .dm-section { --dm-radius: 12px; padding: 80px 0 80px; }
  .dm-figure { margin-top: 32px; }
  .dm-play { width: 64px; height: 64px; }
  .dm-length { right: 12px; bottom: 12px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .dm-header { opacity: 0; transform: translateY(12px); }
  .js .dm-figure { opacity: 0; }

  .js .dm-section.is-in .dm-header {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .dm-section.is-in .dm-figure {
    opacity: 1;
    transition: opacity 0.7s ease;
  }
  .js .dm-section.is-in .dm-glow::after { animation: dmPulse 0.9s ease-in-out 0.4s 1 both; }
}

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

/* ==========================================================================
   Who it's for
   ========================================================================== */
.wf-section {
  --wf-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --wf-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  --wf-tile: 52px;
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.wf-header { text-align: center; }

.wf-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wf-accent);
}

.wf-header .sl-title {
  margin-left: auto;
  margin-right: auto;
}

.wf-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 980px;
  margin: 56px auto 0;
  list-style: none;
}

.wf-item {
  display: flex;
  min-width: 0;
}

/* same card as the Problem stats */
.wf-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 32px;
  background: rgba(20, 52, 113, 0.28);
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: var(--radius);
  text-align: left;
  transition: border-color 0.2s ease;
}

.wf-card:hover { border-color: rgba(182, 200, 233, 0.18); }

/* icon sits in the top-right corner so the text keeps the full card width */
.wf-tile {
  position: absolute;
  top: 28px;
  right: 28px;
  display: block;
}

.wf-tile svg {
  display: block;
  fill: none;
  stroke: var(--wf-accent);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.wf-role {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wf-accent);
}

.wf-headline {
  margin-bottom: 12px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.wf-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
}

@media (max-width: 767px) {
  .wf-section { padding: 80px 0 90px; }
  .wf-list { grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
  .wf-card { padding: 24px 22px; }
  .wf-tile { top: 22px; right: 22px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .wf-item {
    opacity: 0;
    transform: translateY(12px);
  }
  .js .wf-list.is-in .wf-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i) * 100ms);
  }
}

/* ==========================================================================
   Market opportunity
   ========================================================================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mk-section {
  --mk-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --mk-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  --mk-bar: 56px;
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.mk-header { text-align: center; }

.mk-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent);
}

.mk-header .sl-title {
  margin-left: auto;
  margin-right: auto;
}

.mk-intro {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.7;
  color: var(--text-secondary);
}

.mk-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 56px;
  list-style: none;
}

.mk-item {
  display: flex;
  min-width: 0;
}

.mk-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 28px;
  background: rgba(20, 52, 113, 0.28); /* same card as the Problem stats */
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: var(--radius);
  text-align: left;
}

.mk-name {
  min-height: calc(1.3em * 2);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.mk-growth {
  margin: 14px 0 28px;
  padding: 4px 12px;
  border: 1px solid rgba(124, 196, 255, 0.4);
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.12);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mk-accent);
}

.mk-chart {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 16px;
  width: 100%;
  margin-bottom: 24px;
}

.mk-col { min-width: 0; }

/* each slot is 140px tall; bars are scaled inside this card only */
.mk-slot {
  display: flex;
  align-items: flex-end;
  height: 140px;
  border-bottom: 1px solid var(--mk-stroke);
}

.mk-bar {
  width: var(--mk-bar);
  border-radius: 8px 8px 0 0;
  background: var(--mk-accent);
  transform-origin: bottom center;
}

.mk-bar-start { background: rgba(124, 196, 255, 0.45); }

.mk-value {
  margin-top: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.mk-label {
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.mk-source {
  margin-top: auto;
  padding-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.mk-why {
  position: relative;
  max-width: 880px;
  margin: 48px auto 0;
  padding: 24px 28px 24px 52px;
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: 12px;
  background: rgba(2, 8, 22, 0.55); /* same darker fill as the Where we are stage panel */
}

/* accent line inside the panel, to the left of the text */
.mk-why::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 24px;
  bottom: 24px;
  width: 3px;
  border-radius: 2px;
  background: var(--mk-accent);
}

.mk-why-label {
  margin-bottom: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mk-accent);
}

.mk-why-text + .mk-why-text { margin-top: 12px; }

.mk-why-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

.mk-footnote {
  max-width: 880px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 1023px) {
  .mk-list {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .mk-name { min-height: 0; }
}

@media (max-width: 767px) {
  .mk-section { --mk-bar: 44px; padding: 80px 0 90px; }
  .mk-list { margin-top: 40px; }
  .mk-card { padding: 22px; }
  .mk-why { padding: 20px 22px 20px 42px; }
  .mk-why::before { left: 22px; top: 20px; bottom: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .mk-item { opacity: 0; transform: translateY(12px); }
  .js .mk-bar { transform: scaleY(0); }
  .js .mk-growth { opacity: 0; }

  .js .mk-list.is-in .mk-item {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i) * 100ms);
  }
  .js .mk-list.is-in .mk-bar {
    transform: scaleY(1);
    transition: transform 0.9s ease-out;
    transition-delay: calc(0.6s + var(--i) * 100ms);
  }
  .js .mk-list.is-in .mk-bar-end { transition-delay: calc(0.75s + var(--i) * 100ms); }
  .js .mk-list.is-in .mk-growth {
    opacity: 1;
    transition: opacity 0.4s ease;
    transition-delay: calc(1.8s + var(--i) * 100ms);
  }
}

/* ==========================================================================
   Why SmartRescue — editorial list
   Default styles are the finished state (no JS / reduced motion).
   ========================================================================== */
.wy-section {
  --wy-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --wy-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  --wy-pad: 40px;
  --wy-marker: 12px;
  --wy-lead-h: 30px; /* 1.5rem x 1.25 line-height */
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.wy-wrap {
  max-width: 1040px;
  margin: 0 auto;
}

.wy-header { text-align: center; }

.wy-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wy-accent);
}

.wy-header .sl-title {
  margin-left: auto;
  margin-right: auto;
}

.wy-list {
  margin-top: 56px;
  list-style: none;
}

.wy-item + .wy-item .wy-row { border-top: 1px solid var(--wy-stroke); }

.wy-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px 2fr 3fr;
  column-gap: 32px;
  align-items: start;
  padding: var(--wy-pad) 0;
}

.wy-marker {
  justify-self: center;
  width: var(--wy-marker);
  height: var(--wy-marker);
  margin-top: calc((var(--wy-lead-h) - var(--wy-marker)) / 2);
  border-radius: 50%;
  background: var(--wy-accent);
  box-shadow: 0 0 14px rgba(124, 196, 255, 0.45);
}

.wy-lead {
  font-size: 1.5rem;
  line-height: 1.25;
  color: var(--text);
}

.wy-lead strong { font-weight: 600; }

.wy-body {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-muted);
}

.wy-note { font-style: italic; }

.wy-link {
  color: var(--wy-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wy-link:focus-visible {
  outline: 2px solid var(--wy-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* line segment from this row's marker down to the next row's marker */
.wy-seg {
  position: absolute;
  left: 23px; /* centre of the 48px marker column */
  top: calc(var(--wy-pad) + var(--wy-lead-h) / 2);
  width: 2px;
  height: calc(100% + 1px);
  background: rgba(124, 196, 255, 0.35);
  pointer-events: none;
}

.wy-seg-fill {
  position: absolute;
  inset: 0;
  background: var(--wy-accent);
  opacity: 0.7;
  transform-origin: top center;
}

@media (max-width: 1023px) {
  .wy-row { grid-template-columns: 48px 42fr 58fr; }
}

@media (max-width: 767px) {
  .wy-section {
    --wy-pad: 28px;
    --wy-lead-h: 25px; /* 1.25rem x 1.25 line-height */
    padding: 80px 0 90px;
  }
  .wy-list { margin-top: 40px; }

  .wy-row {
    grid-template-columns: 28px 1fr;
    column-gap: 14px;
  }
  .wy-marker { grid-column: 1; grid-row: 1 / span 2; }
  .wy-lead { grid-column: 2; grid-row: 1; font-size: 1.25rem; }
  .wy-body { grid-column: 2; grid-row: 2; margin-top: 12px; }
  .wy-seg { left: 13px; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .wy-lead,
  .js .wy-body {
    opacity: 0;
    transform: translateY(12px);
  }
  .js .wy-item.is-in .wy-lead,
  .js .wy-item.is-in .wy-body {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .wy-item.is-in .wy-body { transition-delay: 0.12s; }

  /* markers: hollow ring when idle, lit once revealed */
  .js .wy-marker {
    background: transparent;
    box-shadow: 0 0 0 rgba(124, 196, 255, 0);
    outline: 2px solid var(--wy-accent);
    outline-offset: -2px;
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
  }
  .js .wy-item.is-in .wy-marker {
    background: var(--wy-accent);
    box-shadow: 0 0 14px rgba(124, 196, 255, 0.45);
  }

  .js .wy-seg-fill { transform: scaleY(0); }
  .js .wy-item.is-link .wy-seg-fill {
    transform: scaleY(1);
    transition: transform 0.5s ease;
  }
}

/* ==========================================================================
   Flywheel
   Default styles are the finished state (no JS / reduced motion): static, all lit.
   ========================================================================== */
.bm-section {
  --bm-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --bm-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

/* ---- Flywheel ---- */

.fw-title {
  margin-bottom: 32px;
  text-align: left; /* lines up with the numbered circles below */
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.fw-grid {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 48px;
  align-items: center;
}

.fw-diagram { display: flex; justify-content: center; }



.fw-svg {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  overflow: visible;
}

.fw-ring {
  fill: none;
  stroke: var(--bm-accent);
  stroke-opacity: 0.25;
  stroke-width: 2;
}

.fw-arc {
  fill: none;
  stroke: var(--bm-accent);
  stroke-opacity: 0.6;
  stroke-width: 2;
  stroke-linecap: round;
}

.fw-head {
  fill: var(--bm-accent);
  fill-opacity: 0.6;
}

.fw-node-base {
  fill: var(--bg-muted);
  stroke: var(--bm-accent);
  stroke-width: 2;
}

.fw-node-lit {
  fill: rgba(124, 196, 255, 0.25);
  stroke: var(--bm-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(124, 196, 255, 0.5));
}

.fw-node text {
  fill: var(--text);
  font-size: 20px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: central;
}

.fw-dot { display: none; }

.fw-dot circle {
  r: 4;
  fill: var(--bm-accent);
  filter: drop-shadow(0 0 5px rgba(124, 196, 255, 0.9));
}

.fw-steps {
  display: grid;
  gap: 24px;
  list-style: none;
}

.fw-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.fw-step p {
  padding-top: 5px;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.fw-step-body { min-width: 0; }

.fw-step-title {
  padding-top: 5px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
}

.fw-step-body p { padding-top: 0; margin-top: 4px; }

.fw-num {
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid var(--bm-accent);
  border-radius: 50%;
  background: rgba(124, 196, 255, 0.25);
  box-shadow: 0 0 16px rgba(124, 196, 255, 0.5);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  color: var(--text);
}

@media (max-width: 1023px) {
  .fw-grid { grid-template-columns: 1fr; gap: 32px; }
  .fw-svg { max-width: 280px; }
  .fw-right { max-width: 640px; margin: 0 auto; width: 100%; }
}

@media (max-width: 767px) {
  .bm-section { padding: 80px 0 90px; }
}

@media (prefers-reduced-motion: no-preference) {
  /* one shared 9s lap; delays keep nodes and list numbers in step with the dot */
  .js .fw-dot {
    display: block;
    transform-origin: 160px 160px;
    animation: fwLap 9s linear infinite;
    animation-play-state: paused;
  }
  .js .fw-node-lit {
    animation: fwNode 9s linear infinite;
    animation-play-state: paused;
  }
  .js .fw-num {
    animation: fwNum 9s linear infinite;
    animation-play-state: paused;
  }
  .js .fw-node-2 .fw-node-lit,
  .js .fw-num-2 { animation-delay: -6s; }
  .js .fw-node-3 .fw-node-lit,
  .js .fw-num-3 { animation-delay: -3s; }

  .js .fw-block.is-running .fw-dot,
  .js .fw-block.is-running .fw-node-lit,
  .js .fw-block.is-running .fw-num { animation-play-state: running; }
}

@keyframes fwLap {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* lit for about 0.6s when the dot passes (0% of the lap), idle otherwise */
@keyframes fwNode {
  0%, 6.7% { opacity: 1; }
  10%, 100% { opacity: 0; }
}

@keyframes fwNum {
  0%, 6.7% {
    background: rgba(124, 196, 255, 0.25);
    box-shadow: 0 0 16px rgba(124, 196, 255, 0.5);
  }
  10%, 100% {
    background: transparent;
    box-shadow: 0 0 0 rgba(124, 196, 255, 0);
  }
}

/* ==========================================================================
   Where we are
   ========================================================================== */
.ww-section {
  --ww-accent: #7CC4FF; /* same blue as Solution / How It Works */
  --ww-stroke: rgba(182, 200, 233, 0.14); /* Solution device-frame stroke */
  --ww-panel: rgba(20, 52, 113, 0.28);
  position: relative;
  padding: 110px 0 120px;
  background: transparent; /* page glow shows through */
  color: var(--text);
}

.ww-header { text-align: center; }

.ww-eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ww-accent);
}

.ww-eyebrow { margin-bottom: 16px; }

.ww-header .sl-title { margin-left: auto; margin-right: auto; }

/* Part A: stage panel */
.ww-stage {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  max-width: 880px;
  margin: 48px auto 0;
  padding: 24px 28px;
  background: rgba(2, 8, 22, 0.55); /* darker than the page, sits below the lighter cards */
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: 16px;
}

.ww-dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 0.55em; /* centre on the first text line */
  border-radius: 50%;
  background: var(--ww-accent);
}

.ww-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ww-accent);
  opacity: 0;
}

.ww-stage-text {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.ww-stage-text strong { color: var(--text); font-weight: 700; }

.ww-h3 {
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.ww-focus-title { margin-top: 72px; }

/* Part B: focus cards */
.ww-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
  list-style: none;
}

.ww-item { display: flex; min-width: 0; }

.ww-card {
  position: relative;
  width: 100%;
  padding: 28px;
  background: rgba(20, 52, 113, 0.28); /* same card as the Market section */
  border: 1px solid rgba(182, 200, 233, 0.05);
  border-radius: var(--radius);
}

.ww-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
}

.ww-card-text {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Part D: plan to market */
.ww-plan-title { margin-top: 80px; }

.ww-small {
  margin-top: 8px;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
}

.ww-tl-wrap {
  --ww-node: 16px;
  position: relative;
  margin-top: 40px;
}

.ww-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  list-style: none;
}

.ww-step { position: relative; padding-top: 40px; }

.ww-node {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ww-node);
  height: var(--ww-node);
  box-sizing: border-box;
  border: 2px solid var(--ww-accent);
  border-radius: 50%;
  background: var(--bg);
  opacity: 0.55;
  z-index: 1;
}

/* dashed line, centred on the nodes, fading out at the right end */
.ww-line {
  position: absolute;
  top: calc(var(--ww-node) / 2 - 1px);
  left: calc(var(--ww-node) / 2);
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(124, 196, 255, 0.35) 0 6px, transparent 6px 12px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 70%, transparent 100%);
}

.ww-when {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}

.ww-phase {
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-accent);
}

.ww-step-text {
  margin-top: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.ww-nojs { max-width: 880px; margin: 48px auto 0; color: var(--text-secondary); line-height: 1.6; }
.ww-nojs ul, .ww-nojs ol { margin: 16px 0 16px 20px; }

@media (max-width: 1023px) {
  .ww-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* vertical timeline */
  .ww-steps { grid-template-columns: 1fr; gap: 32px; }
  .ww-step { padding: 0 0 0 40px; }
  .ww-node { top: 4px; }
  .ww-line {
    top: calc(var(--ww-node) / 2 + 4px);
    bottom: 0;
    left: calc(var(--ww-node) / 2 - 1px);
    right: auto;
    width: 2px;
    height: auto;
    background: repeating-linear-gradient(180deg, rgba(124, 196, 255, 0.35) 0 6px, transparent 6px 12px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  }
}

@media (max-width: 767px) {
  .ww-section { padding: 80px 0 90px; }
  .ww-stage { flex-direction: column; gap: 14px; }
  .ww-dot { margin-top: 0; }
  .ww-focus-title { margin-top: 48px; }
  .ww-cards { grid-template-columns: 1fr; gap: 16px; }
  .ww-plan-title { margin-top: 56px; }
}

/* final (lit, drawn, visible) state; also the base for reduced motion */
.ww-node { opacity: 1; border-color: var(--ww-accent); box-shadow: 0 0 12px rgba(124, 196, 255, 0.4); }

@media (prefers-reduced-motion: no-preference) {
  .js .ww-stage,
  .js .ww-item,
  .js .ww-h3,
  .js .ww-small,
  .js .ww-step { opacity: 0; transform: translateY(12px); }

  .js .ww-stage.is-in,
  .js .ww-cards.is-in .ww-item,
  .js .ww-h3.is-in,
  .js .ww-small.is-in,
  .js .ww-tl-wrap.is-in .ww-step {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: calc(var(--i, 0) * 100ms);
  }

  .js .ww-dot::after { animation: wwPulse 2.4s ease-out infinite; animation-play-state: paused; }
  .js .ww-stage.is-visible .ww-dot::after { animation-play-state: running; }

  /* line draws from the first node; each node lights as it is reached (1.2s total, 3 nodes) */
  .js .ww-line { clip-path: inset(0 100% 0 0); }
  .js .ww-tl-wrap.is-in .ww-line { clip-path: inset(0 0 0 0); transition: clip-path 1.2s linear; }
  .js .ww-node {
    opacity: 0.55;
    box-shadow: 0 0 0 rgba(124, 196, 255, 0);
    border-color: rgba(124, 196, 255, 0.55);
  }
  .js .ww-tl-wrap.is-in .ww-node {
    opacity: 1;
    border-color: var(--ww-accent);
    box-shadow: 0 0 12px rgba(124, 196, 255, 0.4);
    transition: opacity 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.4s);
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: no-preference) {
  .js .ww-line { clip-path: inset(0 0 100% 0); }
  .js .ww-tl-wrap.is-in .ww-line { clip-path: inset(0 0 0 0); }
}

@keyframes wwPulse {
  from { transform: scale(1); opacity: 0.5; }
  to { transform: scale(2.2); opacity: 0; }
}

/* ==========================================================================
   The Road Ahead (robotics)
   ========================================================================== */
.rb-section {
  position: relative;
  padding: 110px 0 120px;
  background: var(--bg-deep);
  color: var(--text);
  border-top: 1px solid var(--border);
  overflow-x: clip;
}

/* Banner: framed, same width as the demo video, natural aspect ratio. Placeholder shape until the image loads. */
.rb-banner {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  aspect-ratio: 21 / 9;
  background: #0b1118; /* slightly lighter than --bg-deep */
}
/* Loaded image is cropped to --rb-ratio; --rb-focus sets which part stays visible. */
.rb-banner { --rb-ratio: 16 / 9; --rb-focus: 50% 70%; }
.rb-banner.is-loaded { aspect-ratio: var(--rb-ratio); background: none; }
.rb-banner img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--rb-focus); visibility: hidden; }
.rb-banner.is-loaded img { visibility: visible; }

.rb-text {
  max-width: 720px;
  margin: 56px auto 0;
  text-align: center;
}
.rb-eyebrow {
  margin-bottom: 16px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.rb-title { margin-left: auto; margin-right: auto; }
.rb-body {
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--text-secondary);
}
.rb-small {
  margin-top: 24px;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--text-muted);
}

.rb-disclaimer { margin-top: 56px; }

.rb-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  max-width: 880px;
  margin: 64px auto 0;
  list-style: none;
  text-align: center;
}
.rb-icon {
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rb-col-title {
  margin-bottom: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
}
.rb-col-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 767px) {
  .rb-cols { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
}

@media (max-width: 700px) {
  .rb-text { margin-top: 40px; }
  .rb-body { font-size: 1.125rem; }
  .rb-section { padding: 80px 0 90px; }
}

@media (prefers-reduced-motion: no-preference) {
  .rb-js [data-rb-reveal="banner"] { opacity: 0; }
  .rb-js [data-rb-reveal="text"] { opacity: 0; transform: translateY(12px); }
  .rb-js.is-visible [data-rb-reveal="banner"] { opacity: 1; transition: opacity 700ms ease; }
  .rb-js.is-visible [data-rb-reveal="text"] {
    opacity: 1;
    transform: none;
    transition: opacity 500ms ease 200ms, transform 500ms ease 200ms;
  }
}