/* ============================================================
   BetterFlow AI — design system
   Pattern: Enterprise Gateway (SAP style architecture)
   Style:   Soft UI Evolution — layered soft shadows, high
            contrast type, conservative accents
   Type:    Plus Jakarta Sans
   ============================================================ */

/* TESTING: Fira Sans (was Plus Jakarta Sans — restore by swapping the import and font-family) */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root {
  /* Color tokens */
  --color-primary:     #0F172A;
  --color-on-primary:  #FFFFFF;
  --color-secondary:   #334155;
  --color-accent:      #0369A1;
  --color-accent-hover:#075985;
  --color-accent-soft: #E0F2FE;
  --color-background:  #F8FAFC;
  --color-surface:     #FFFFFF;
  --color-foreground:  #020617;
  --color-muted:       #E8ECF1;
  --color-muted-text:  #64748B;
  --color-border:      #E2E8F0;
  --color-ring:        #0F172A;
  --color-navy-deep:   #0B1428;

  /* Elevation — Soft UI Evolution scale */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 2px 6px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.07), 0 24px 56px rgba(15, 23, 42, 0.12);

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Spacing rhythm (spacious) */
  --space-section: clamp(88px, 10vw, 128px);
  --space-section-sm: clamp(64px, 7vw, 88px);
  --container: 1200px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-med: 260ms;

  /* Type scale */
  --text-hero: clamp(44px, 7vw, 76px);
  --text-h2: clamp(30px, 4vw, 40px);
  --text-h3: clamp(21px, 2.4vw, 26px);
  --text-lead: clamp(17px, 1.6vw, 20px);
}

/* ---------------- Reset / base ---------------- */

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

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

body {
  margin: 0;
  font-family: "Fira Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: #37404D; /* soft charcoal, not pure black */
  background: var(--color-background);
  overflow-x: clip; /* clip, not hidden: hidden would make body a scroll container and break the sticky hero */
}
/* Decorative glows bleed past their cards on purpose. Clip at the root so
   iOS Safari (which ignores body overflow-x) cannot rubber-band sideways.
   clip, unlike hidden, never turns html into a scroll container, so the
   sticky hero keeps working. */
html { overflow-x: clip; }
@supports not (overflow: clip) { html { overflow-x: hidden; } body { overflow-x: visible; } }

img, video { max-width: 100%; height: auto; display: block; }

h1, h2 {
  margin: 0 0 0.5em;
  font-family: "Playfair Display", Georgia, serif; /* editorial display serif */
  line-height: 1.12;
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: -0.015em;
}

h3, h4 {
  margin: 0 0 0.5em;
  font-family: "Playfair Display", Georgia, serif; /* matches h1/h2 */
  line-height: 1.22;
  color: var(--color-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1em; }

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover { color: var(--color-accent-hover); }

button { font-family: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
}
/* Wide variant: lets a feature grid breathe toward the page edges */
.container.container-wide { max-width: min(1560px, 96vw); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease, box-shadow var(--dur-med) ease,
              transform var(--dur-fast) ease;
}
.btn:active { transform: scale(0.98); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(3, 105, 161, 0.35), 0 6px 16px rgba(3, 105, 161, 0.22);
}
.btn-primary:hover {
  background: var(--color-accent-hover);
  color: #fff;
  box-shadow: 0 2px 4px rgba(3, 105, 161, 0.35), 0 10px 24px rgba(3, 105, 161, 0.3);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover { border-color: var(--color-muted-text); color: var(--color-primary); }

.btn-ghost-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 15px;
}
.link-arrow svg { transition: transform var(--dur-fast) ease; }
.link-arrow:hover svg { transform: translateX(4px); }

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

.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
/* Direction aware: dims while the reader scrolls down, returns solid on any
   scroll up. The blur keeps the labels legible over any section. */
.site-nav { transition: background-color 320ms ease, border-color 320ms ease, box-shadow 320ms ease; }
.site-nav.nav-dim {
  background: rgba(255, 255, 255, 0.42);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}
.site-nav.nav-dim:hover,
.site-nav.nav-dim:focus-within { background: rgba(255, 255, 255, 0.92); border-bottom-color: var(--color-border); }
/* Sections targeted from the nav clear the sticky header */
#solutions, #industries, #request { scroll-margin-top: 84px; }

.nav-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 32px);
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  min-height: 68px;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-primary);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.nav-logo:hover { color: var(--color-primary); }

.nav-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  flex: 1;
}

.nav-tab { display: flex; }

.nav-tab > a,
.nav-tab > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 22px 14px;
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-secondary);
  position: relative;
  transition: color var(--dur-fast) ease;
}
.nav-tab > a:hover,
.nav-tab > button:hover { color: var(--color-primary); }

.nav-tab > a::after,
.nav-tab > button::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-tab.is-active > a::after,
.nav-tab.is-active > button::after,
.nav-tab.is-open > button::after,
.nav-tab.is-open > a::after { transform: scaleX(1); }
.nav-tab.is-active > a,
.nav-tab.is-active > button,
.nav-tab.is-open > button,
.nav-tab.is-open > a { color: var(--color-primary); }

.nav-caret {
  width: 10px;
  height: 10px;
  transition: transform var(--dur-med) var(--ease-out);
}
.nav-tab.is-open .nav-caret { transform: rotate(180deg); }

.nav-utilities {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.nav-utilities .btn { min-height: 42px; padding: 9px 22px; font-size: 15px; }

/* Mega menu */

.mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--dur-med) var(--ease-out),
              transform var(--dur-med) var(--ease-out),
              visibility var(--dur-med);
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 36px clamp(20px, 4vw, 32px) 44px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
}

.mega-intro h3 { font-size: 20px; margin-bottom: 8px; }
.mega-intro p { color: var(--color-muted-text); font-size: 15px; margin-bottom: 16px; }

.mega-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 24px;
  align-content: start;
}

.mega-item {
  display: block;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) ease;
}
.mega-item:hover { background: var(--color-background); }
.mega-item b {
  display: block;
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 2px;
}
.mega-item span {
  display: block;
  color: var(--color-muted-text);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Mobile nav */

.nav-burger {
  display: none;
  background: none;
  border: none;
  padding: 10px;
  color: var(--color-primary);
}

.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
}
.mobile-menu.is-open { display: block; }

.mobile-scrim {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.5);
}

.mobile-drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 32px;
  overflow-y: auto;
}

.mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.mobile-close { background: none; border: none; padding: 10px; color: var(--color-primary); }

.mobile-group { border-bottom: 1px solid var(--color-border); }
.mobile-group > a,
.mobile-group > button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  background: none;
  border: none;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
}
.mobile-group .nav-caret { transition: transform var(--dur-med) var(--ease-out); }
.mobile-group.is-open .nav-caret { transform: rotate(180deg); }

.mobile-sub {
  display: none;
  padding: 0 4px 14px;
}
.mobile-group.is-open .mobile-sub { display: block; }
.mobile-sub a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--color-secondary);
  font-size: 15px;
  font-weight: 500;
}
.mobile-sub a:hover { background: var(--color-background); color: var(--color-primary); }

.mobile-cta { margin-top: 24px; }
.mobile-cta .btn { width: 100%; }

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

.hero {
  position: relative;
  text-align: left;
  height: 240vh; /* scroll distance that drives the laptop video */
}

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Static fallback (reduced motion / small screens) */
.hero.hero-static { height: auto; }
.hero.hero-static .hero-sticky {
  position: static;
  height: auto;
  padding: var(--space-section-sm) 0;
}
.hero.hero-static #heroVideo { display: none; }
.hero.hero-static .hero-video-fallback { display: block; }

.hero-sticky::before {
  content: "";
  position: absolute;
  inset: -25% -10%;
  background:
    radial-gradient(ellipse 50% 45% at 28% 42%, rgba(3, 105, 161, 0.20), transparent 70%),
    radial-gradient(ellipse 60% 50% at 10% 28%, rgba(86, 194, 230, 0.15), transparent 70%),
    radial-gradient(ellipse 55% 48% at 55% 32%, rgba(15, 23, 42, 0.09), transparent 70%),
    radial-gradient(ellipse 45% 42% at 90% 55%, rgba(3, 105, 161, 0.12), transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
  color: var(--color-secondary);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
  position: relative;
}
.hero-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.hero h1 {
  font-size: var(--text-hero);
  margin: 0 0 20px;
  max-width: 15ch;
  position: relative;
}
/* Alternate slogans, easy swap:
   "Built Around You." / "Software That Stays." / "Your Fractional Dev Team." */

.hero-sub {
  font-size: var(--text-lead);
  color: var(--color-secondary);
  max-width: 58ch;
  margin: 0 0 36px;
  position: relative;
}

.hero-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  position: relative;
}
.hero-actions .aside-link {
  font-size: 15px;
  color: var(--color-muted-text);
}
.hero-actions .aside-link a { font-weight: 600; }

/* Text left, demo video right, one hero square */
.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
  position: relative;
}

.hero-media { min-width: 0; }

.hero-media .video-frame {
  max-width: none;
  margin: 0 0 14px;
}

/* ---- Scroll-scrubbed hero video (transparent laptop) ---- */
.hero-scrub-media { position: relative; }
.hero-video-box {
  width: 225%;
  max-width: none;
  margin-left: -60%;
  position: relative;
}
.hero-scrub-media video,
.hero-video-fallback {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}
.hero-video-fallback { display: none; }

/* Once the scrub completes, retire the video entirely: the final-frame
   image renders identically and can never show a stale frame. The 4K
   master bakes a sharp screen, so no separate overlay is needed. */
.hero.hero-done #heroVideo { display: none; }
.hero.hero-done .hero-video-fallback { display: block; }

/* While the video is being fetched into memory (see index.html), show the
   same final-frame image rather than an empty box. Geometry is untouched —
   unlike .hero-static, this must not collapse the 240vh scroll distance. */
.hero.hero-loading #heroVideo { display: none; }
.hero.hero-loading .hero-video-fallback { display: block; }

@media (max-width: 900px) {
  .hero-video-box { width: 100%; margin-left: 0; }
}

/* ---------------- Laptop mockup (hero) ---------------- */

.laptop {
  position: relative;
  filter: drop-shadow(0 30px 50px rgba(15, 23, 42, 0.22));
}

.laptop-screen {
  background: #0B1428;
  border-radius: 16px 16px 0 0;
  padding: 12px 12px 16px;
  aspect-ratio: 16 / 10;
}

.laptop-base {
  height: 15px;
  width: 112%;
  margin-left: -6%;
  background: linear-gradient(180deg, #E2E8F0 0%, #CBD5E1 55%, #94A3B8 100%);
  border-radius: 2px 2px 14px 14px;
  position: relative;
}
.laptop-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 13%;
  height: 6px;
  background: #B6C2D2;
  border-radius: 0 0 8px 8px;
}

/* Placeholder dashboard rendered in CSS — swap for a real screenshot/video */
.dash {
  height: 100%;
  background: var(--color-background);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: 11px;
}

.dash-top {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 7px 10px;
  flex-shrink: 0;
}
.dash-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}
.dash-dot:first-child { background: #FCA5A5; }
.dash-dot:nth-child(2) { background: #FDE68A; }
.dash-dot:nth-child(3) { background: #86EFAC; }
.dash-title {
  margin-left: 8px;
  font-weight: 600;
  color: var(--color-muted-text);
  font-size: 10px;
  letter-spacing: 0.03em;
}

.dash-body {
  display: grid;
  grid-template-columns: 44px 1fr;
  flex: 1;
  min-height: 0;
}

.dash-side {
  background: var(--color-primary);
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-item {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.22);
}
.side-item.is-active { background: #56C2E6; }

.dash-main {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.dash-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.dash-stat {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 8px 9px;
  line-height: 1.25;
}
.dash-stat b {
  display: block;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
}
.dash-stat span { color: var(--color-muted-text); font-size: 9px; }

.dash-chart {
  flex: 1;
  min-height: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 7px;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}
.dash-chart span {
  flex: 1;
  height: var(--h, 50%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #56C2E6, var(--color-accent));
  opacity: 0.9;
}

/* ---------------- Video slot ---------------- */

.video-section { padding: 24px 0 var(--space-section); position: relative; }

.video-frame {
  position: relative;
  max-width: min(980px, 78vw);
  margin: 0 auto 18px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-border);
  background: var(--color-primary);
  aspect-ratio: 16 / 9;
}
.video-frame video,
.video-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, 0.25);
  border: none;
  transition: background-color var(--dur-med) ease;
}
.video-play:hover { background: rgba(2, 6, 23, 0.4); }
.video-play .play-badge {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-med) var(--ease-out);
}
.video-play:hover .play-badge { transform: scale(1.06); }

.video-caption {
  text-align: center;
  color: var(--color-muted-text);
  font-size: 14.5px;
}

/* ---------------- Generic sections ---------------- */

.section { padding: var(--space-section) 0; }
.section-alt { background: var(--color-surface); border-block: 1px solid var(--color-border); }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: var(--text-h2); }
.section-head p { color: var(--color-secondary); font-size: var(--text-lead); margin: 0; }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 14px;
}

/* ---------------- Pain section ---------------- */

.pain { text-align: center; }
.pain h2 { font-size: var(--text-h2); margin-bottom: 40px; }

.pain-lines {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
  margin: 0 auto 40px;
}
.pain-lines p {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 500;
  font-style: italic;
  color: var(--color-muted-text);
  margin: 0;
}

.pain-closer {
  font-size: var(--text-lead);
  font-weight: 700;
  color: var(--color-primary);
}
.pain-closer em { font-style: normal; color: var(--color-accent); }

/* ---------------- Solution grid ---------------- */

.solution-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 36px;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out),
              border-color var(--dur-med) ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
  border-color: #CBD5E1;
}

.solution-card {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  position: relative;
  overflow: hidden;
}
.solution-card h3 {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 10px;
}
.solution-card p {
  font-size: 15px;
  color: var(--color-secondary);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 16px;
}
.solution-card .link-arrow { font-size: 14.5px; }

/* Visual composition at the bottom of each card:
   gradient tile + inset photo panel + floating UI chips.
   Photo goes inside .sv-photo (as an img) when ready. */
.sol-visual {
  margin-top: 22px;
  aspect-ratio: 16 / 10;
  position: relative;
  font-size: 11px;
  line-height: 1.35;
  text-align: left;
  isolation: isolate;
}
/* Uncaged glow: painted on an oversized layer that bleeds past the
   visual's bounds, so the hue dissipates with no visible rectangle */
.sol-visual::before {
  content: "";
  position: absolute;
  inset: -18% -14%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 72% 64% at 42% 46%, rgba(3, 105, 161, 0.42), transparent 72%),
    radial-gradient(ellipse 62% 56% at 68% 52%, rgba(86, 194, 230, 0.32), transparent 74%);
}
.sv-photo {
  position: absolute;
  top: 6%; bottom: 6%; right: 4%;
  width: 52%;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), rgba(255,255,255,0.15));
}
.sv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-chip {
  position: absolute;
  background: rgba(255,255,255,0.97);
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(15,23,42,0.10), 0 12px 26px rgba(15,23,42,0.18);
  padding: 8px 11px;
}
.sv-chip b { font-size: 10.5px; font-weight: 600; display: block; color: var(--color-primary); }
.sv-sub { color: var(--color-muted-text); font-size: 9px; display: block; }
.sv-row { display: flex; align-items: center; gap: 7px; }
.sv-mini {
  width: 23px; height: 23px; border-radius: 6px;
  background: var(--color-accent-soft); color: var(--color-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sv-mini svg { width: 13px; height: 13px; }
.sv-ok { color: #15803D; font-weight: 600; font-size: 9.5px; }
.sv-tag {
  display: inline-block;
  font-size: 8.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px;
  background: var(--color-accent-soft); color: var(--color-accent);
}
.sv-tag.green { background: #DCFCE7; color: #15803D; }
.sv-tag.grey { background: #EEF2F6; color: var(--color-muted-text); }
.sv-bar { height: 4px; border-radius: 3px; background: var(--color-border); overflow: hidden; margin-top: 5px; }
.sv-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #56C2E6, var(--color-accent)); }
.sv-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-logo {
  position: absolute;
  width: 13%; aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(15,23,42,0.18), 0 14px 30px rgba(15,23,42,0.22);
}
.sv-logo img { width: 100%; height: 100%; border-radius: 50%; display: block; }

.axis {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.axis-line {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-muted-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.axis-track {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--color-border), var(--color-accent));
  border-radius: 2px;
  position: relative;
}
.axis-track::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left: 8px solid var(--color-accent);
}
.axis-sub { margin-top: 12px; color: var(--color-muted-text); font-size: 14.5px; }

/* ---------------- Split bands ---------------- */

.band { padding: var(--space-section-sm) 0; }

.band-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}
.band-inner.media-left .band-media,
.band-inner.media-left .hero-cutout { order: -1; }

.band-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}
.band-media img { width: 100%; object-fit: cover; }

/* Band vignette, SAP style: luminous blue gradient field, floating icon
   tiles over a dotted network, and the real product screenshot rising
   from the bottom edge of the panel */
.band-viz {
  aspect-ratio: 16 / 11;
  position: relative;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  background:
    radial-gradient(ellipse 80% 60% at 82% 0%, rgba(86, 194, 230, 0.55), transparent 60%),
    radial-gradient(ellipse 70% 55% at 8% 30%, rgba(125, 205, 235, 0.35), transparent 65%),
    linear-gradient(135deg, #3f8fc0 0%, #16548b 48%, #0d2c55 100%);
}
.band-viz .bv-net { position: absolute; inset: 0; width: 100%; height: 100%; }
.band-viz .bv-tile {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(8, 30, 60, 0.22), 0 16px 34px rgba(8, 30, 60, 0.28);
}
.band-viz .bv-tile svg { width: 22px; height: 22px; }
.band-viz .bv-tile.lg { width: 66px; height: 66px; border-radius: 17px; }
.band-viz .bv-tile.lg svg { width: 30px; height: 30px; }
.band-viz .bv-tile.dim { background: rgba(255, 255, 255, 0.55); box-shadow: 0 3px 8px rgba(8, 30, 60, 0.18); }
.band-viz .bv-tile img { width: 74%; height: 74%; border-radius: 50%; display: block; }
.band-viz .bv-shot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -2px;
  width: 76%;
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 8px 8px 0;
  box-shadow: 0 -2px 8px rgba(8, 30, 60, 0.12), 0 24px 60px rgba(8, 30, 60, 0.45);
}
.band-viz .bv-shot::before {
  content: "";
  display: block;
  height: 10px;
  margin: 0 2px 6px;
  background:
    radial-gradient(circle 3px at 6px 5px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3px at 18px 5px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3px at 30px 5px, #E2E8F0 97%, transparent);
}
.band-viz .bv-shot img {
  width: 100%;
  display: block;
  border-radius: 5px 5px 0 0;
}
.band-viz .bv-shot { z-index: 1; }
.band-viz .sv-chip {
  z-index: 2;
  padding: 10px 13px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(8, 30, 60, 0.2), 0 14px 30px rgba(8, 30, 60, 0.3);
}
.band-viz .sv-chip b { font-size: 12px; }
.band-viz .sv-sub { font-size: 10px; }
.band-viz .sv-ok { font-size: 11px; }
.band-viz .sv-mini { width: 28px; height: 28px; border-radius: 8px; }
.band-viz .sv-mini svg { width: 15px; height: 15px; }
.band-viz .sv-logo { width: 48px; height: 48px; }
/* Product showcase: large framed screen on a luminous panel (SAP style) */
.showcase-viz {
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  aspect-ratio: 16 / 7;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  background:
    radial-gradient(ellipse 70% 90% at 85% 0%, rgba(86, 194, 230, 0.5), transparent 58%),
    radial-gradient(ellipse 60% 70% at 10% 20%, rgba(125, 205, 235, 0.32), transparent 62%),
    linear-gradient(135deg, #3f8fc0 0%, #16548b 52%, #0d2c55 100%);
}
.showcase-viz .shot {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 9%;
  width: 84%;
  background: #fff;
  border-radius: 14px;
  padding: 10px 10px 0;
  box-shadow: 0 6px 16px rgba(8, 30, 60, 0.15), 0 34px 80px rgba(8, 30, 60, 0.45);
}
.showcase-viz .shot::before {
  content: "";
  display: block;
  height: 12px;
  margin: 0 2px 7px;
  background:
    radial-gradient(circle 3.5px at 8px 6px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3.5px at 22px 6px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3.5px at 36px 6px, #E2E8F0 97%, transparent);
}
.showcase-viz .shot img,
.showcase-viz .shot video {
  width: 100%;
  display: block;
  border-radius: 6px 6px 0 0;
}
@media (max-width: 768px) {
  .showcase-viz { aspect-ratio: 16 / 9; }
  .showcase-viz .shot { width: 94%; }
}

/* Composition vocabulary for distinct band layouts */
.band-viz .bv-rail {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 62px;
  padding: 13px 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 4px 10px rgba(8, 30, 60, 0.22), 0 16px 34px rgba(8, 30, 60, 0.28);
}
.band-viz .bv-rail .r-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.band-viz .bv-rail .r-ic.active { background: var(--color-accent-soft); }
.band-viz .bv-rail .r-ic svg { width: 19px; height: 19px; }
.band-viz .bv-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  gap: 12px;
  box-shadow: 0 4px 10px rgba(8, 30, 60, 0.2), 0 20px 44px rgba(8, 30, 60, 0.35);
}
.band-viz .bv-mini {
  flex: 1;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 12px;
  background: #FBFCFE;
}
.band-viz .bv-mini .mi {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
}
.band-viz .bv-mini .mi svg { width: 16px; height: 16px; }
.band-viz .bv-mini b { font-size: 12px; font-weight: 600; display: block; color: var(--color-primary); }
.band-viz .bv-mini .bar { height: 5px; border-radius: 3px; background: #EEF2F6; margin-top: 7px; }
.band-viz .bv-ghost {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.band-viz .bv-ghost i { display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.26); }
.band-viz .bv-pill {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 10px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 22px rgba(8, 30, 60, 0.25);
}
.band-viz .bv-pill .sv-mini { background: rgba(255, 255, 255, 0.95); }
.band-viz .bv-shot-side {
  position: absolute;
  right: 5%;
  top: 14%;
  width: 56%;
  background: #fff;
  border-radius: 12px;
  padding: 7px;
  box-shadow: 0 6px 14px rgba(8, 30, 60, 0.18), 0 26px 54px rgba(8, 30, 60, 0.42);
  z-index: 1;
}
.band-viz .bv-shot-side::before {
  content: "";
  display: block;
  height: 10px;
  margin: 0 2px 5px;
  background:
    radial-gradient(circle 3px at 6px 5px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3px at 18px 5px, #E2E8F0 97%, transparent),
    radial-gradient(circle 3px at 30px 5px, #E2E8F0 97%, transparent);
}
.band-viz .bv-shot-side img { width: 100%; display: block; border-radius: 6px; }
.band-viz .bv-lbl {
  position: absolute;
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}
/* ghost outline frame for layered depth (Instantly style) */
.band-viz .bv-frame {
  position: absolute;
  border: 1.5px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  pointer-events: none;
}
/* small conversation card for agent workflow scenes */
.band-viz .bv-chat {
  position: absolute;
  width: 40%;
  background: #fff;
  border-radius: 14px;
  padding: 12px 13px;
  box-shadow: 0 6px 14px rgba(8, 30, 60, 0.18), 0 22px 48px rgba(8, 30, 60, 0.4);
  z-index: 2;
}
.band-viz .bv-chat .ch-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 9px;
}
.band-viz .bv-chat .ch-head img { width: 20px; height: 20px; border-radius: 50%; }
.band-viz .bv-chat .bub {
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 11px;
  line-height: 1.4;
  margin-top: 6px;
  color: var(--color-primary);
}
.band-viz .bv-chat .bub.in { background: #F1F5F9; margin-right: 14%; }
.band-viz .bv-chat .bub.out { background: var(--color-accent); color: #fff; margin-left: 14%; }
.band-viz .bv-node {
  position: absolute;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 10px 26px rgba(8, 30, 60, 0.28);
}
.band-viz .bv-node svg { width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) {
  .band-viz .bv-float { animation: bvFloat 6s ease-in-out infinite alternate; }
}
@media (max-width: 560px) {
  .band-viz { font-size: 11px; aspect-ratio: 4 / 3.6; }
  .band-viz .bv-tile { width: 38px; height: 38px; border-radius: 10px; }
  .band-viz .bv-tile svg { width: 17px; height: 17px; }
  .band-viz .bv-tile.lg { width: 52px; height: 52px; border-radius: 13px; }
  .band-viz .bv-tile.lg svg { width: 24px; height: 24px; }
  .band-viz .sv-chip { padding: 8px 11px; }
  .band-viz .sv-chip b { font-size: 10.5px; }
  .band-viz .sv-sub { font-size: 9px; }
  .band-viz .sv-mini { width: 26px; height: 26px; }
  /* compact composition pieces on phones */
  .band-viz .bv-card { flex-direction: column; gap: 8px; padding: 10px; }
  .band-viz .bv-mini { display: flex; align-items: center; gap: 10px; padding: 8px 10px; }
  .band-viz .bv-mini .mi { margin-bottom: 0; flex-shrink: 0; }
  .band-viz .bv-mini b { font-size: 11px; }
  .band-viz .bv-mini .bar { display: none; }
  .band-viz .bv-ghost { display: none; }
  .band-viz .bv-rail { width: 48px; padding: 10px 0; gap: 8px; }
  .band-viz .bv-rail .r-ic { width: 32px; height: 32px; }
  .band-viz .bv-chat { width: 54%; }
  .band-viz .bv-chat .bub { font-size: 10px; padding: 6px 8px; }
  .band-viz .bv-node { width: 44px; height: 44px; border-radius: 12px; }
  .band-viz .bv-node svg { width: 19px; height: 19px; }
  .band-viz .bv-lbl { font-size: 10.5px; }
  /* Custom software band: three named chips cannot share one row at phone
     width, so the rail and wires step aside and the chips stack top left. */
  .bv-modules .bv-rail, .bv-modules .bv-net { display: none; }
  .bv-modules .sv-chip[data-mod] { left: 5% !important; }
  .bv-modules .sv-chip[data-mod="1"] { top: 6% !important; }
  .bv-modules .sv-chip[data-mod="2"] { top: 21% !important; }
  .bv-modules .sv-chip[data-mod="3"] { top: 36% !important; }
  .bv-modules .bv-shot { height: 46% !important; }
  /* Agents band: the label moves under the node instead of beside it. */
  .bv-agents .bv-lbl { left: 60% !important; top: 27% !important; width: 32% !important; }
  .bv-agents [data-wire="node-shot"] { display: none; }
  /* Solution card compositions need more vertical room on phones */
  .sol-visual { aspect-ratio: 4 / 3.4; font-size: 10px; }
  .sol-visual .sv-chip { padding: 7px 9px; }
  .sol-visual .sv-chip b { font-size: 10px; }
  .sol-visual .sv-sub { font-size: 8.5px; }
  .sol-visual .sv-mini { width: 20px; height: 20px; }
  .sol-visual .sv-mini svg { width: 11px; height: 11px; }
  .sol-visual .sv-logo { width: 34px; height: 34px; }
}
@keyframes bvFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-7px); }
}

.band-copy h2 { font-size: var(--text-h2); }
.band-copy > p { color: var(--color-secondary); font-size: 16.5px; }

.proof-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.proof-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-weight: 600;
  color: var(--color-primary);
  font-size: 15.5px;
}
.proof-list .check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ---------------- Stats band ---------------- */

.stats-band {
  background:
    radial-gradient(ellipse 70% 90% at 20% 0%, rgba(3, 105, 161, 0.35), transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 100%, rgba(86, 194, 230, 0.18), transparent 60%),
    var(--color-navy-deep);
  color: #fff;
  padding: var(--space-section-sm) 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: center;
}
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, 0.14); }
.stat h3 {
  color: #fff;
  font-size: clamp(34px, 4.5vw, 52px);
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.stat p { color: rgba(255, 255, 255, 0.72); font-size: 15.5px; margin: 0; max-width: 30ch; margin-inline: auto; }
.stat .src {
  display: block;
  margin-top: 10px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
}
.stats-lead {
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  margin: 0 0 36px;
}

/* ---------------- Steps ---------------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.steps::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--color-border);
}
.step { position: relative; text-align: center; padding: 0 8px; }
.step-num {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin: 0 auto 18px;
  background: var(--color-surface);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;
  font-size: 21px;
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-xs);
}
.step h3 { font-size: 17px; margin-bottom: 6px; }
.step p { font-size: 14px; color: var(--color-muted-text); margin: 0; }

/* Scope note: the "not on this list" escape hatch under build grids */
.scope-note {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 6px 18px;
  text-align: center;
}
.scope-note p {
  margin: 0;
  color: var(--color-secondary);
  font-size: 15.5px;
}
.scope-note p b { color: var(--color-primary); font-weight: 600; }

/* ---------------- Team grid (About) ---------------- */

/* 5 people: leadership row of 3, then 2 developers centered beneath */
.team-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 28px;
  max-width: 980px;
  margin-inline: auto;
}
.team-card { text-align: center; grid-column: span 2; }
.team-card:nth-child(4) { grid-column: 2 / span 2; }
.team-card img {
  width: 100%;
  aspect-ratio: 3 / 3.4;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.team-card img { transition: transform 500ms var(--ease-out), box-shadow 500ms var(--ease-out); }
.team-card:hover img { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.team-card h3 { font-size: 21px; margin-bottom: 2px; }

/* About page: the team IS the hero, so it borrows the hero glow and watermarks */
.team-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(72px, 9vw, 112px); }
.team-hero .container { max-width: var(--container); }
.team-hero h1 { font-size: clamp(40px, 5.6vw, 64px); max-width: none; margin: 0 0 20px; }
.team-hero .hero-sub {
  max-width: 58ch;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.65;
  margin: 0 auto 60px;
}
.team-hero .team-grid { position: relative; z-index: 1; }

/* Mission: a dark statement band, generous measure and leading */
.mission-band {
  position: relative;
  overflow: hidden;
  padding: clamp(84px, 11vw, 140px) 0;
  color: #fff;
  background:
    radial-gradient(ellipse 70% 90% at 15% 0%, rgba(3, 105, 161, 0.45), transparent 60%),
    radial-gradient(ellipse 60% 80% at 88% 100%, rgba(86, 194, 230, 0.22), transparent 60%),
    var(--color-navy-deep);
}
.mission-band .hero-deco { color: #fff; opacity: 0.06; }
.mission-inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.mission-band .eyebrow { color: #7DCDEB; margin-bottom: 24px; }
.mission-band h2 {
  color: #fff;
  font-size: clamp(32px, 4.2vw, 50px);
  line-height: 1.15;
  max-width: 18ch;
  margin: 0 auto 30px;
}
.mission-band p {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.8;
  max-width: 56ch;
  margin: 0 auto 18px;
}
.mission-band p:last-child { margin-bottom: 0; }
.team-card p { color: var(--color-muted-text); font-size: 14.5px; margin: 0; }

@media (max-width: 900px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card, .team-grid .team-card:nth-child(4) { grid-column: auto; }
  .team-grid .team-card:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 14px); }
}
@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
  .team-grid .team-card:last-child { grid-column: auto; width: auto; justify-self: stretch; }
}

/* ---------------- Support channel cards ---------------- */

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.support-card { padding: 28px 26px; display: flex; flex-direction: column; }
.support-ic {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-accent-soft);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.support-card h3 { font-size: 19px; margin-bottom: 4px; }
.support-card p { color: var(--color-muted-text); font-size: 14px; margin: 0 0 12px; }
.support-value { font-weight: 600; font-size: 15.5px; color: var(--color-accent); margin-top: auto; }
.support-value.plain { color: var(--color-primary); font-weight: 500; font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
  .support-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ---------------- Send a Request form ---------------- */

.request-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.request-copy .eyebrow { margin-bottom: 14px; }
.request-copy h2 { font-size: var(--text-h2); margin-bottom: 14px; max-width: 18ch; }
.request-copy p { color: var(--color-secondary); font-size: var(--text-lead); max-width: 46ch; }

.request-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.request-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-primary);
}
.request-form input,
.request-form textarea {
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  color: var(--color-primary);
  background: #FBFCFE;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 11px 14px;
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.request-form input:focus,
.request-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(3, 105, 161, 0.12);
}
.request-form textarea { resize: vertical; min-height: 110px; }
.request-form .rf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.request-form .btn { align-self: flex-start; }
.rf-note { font-size: 12.5px; color: var(--color-muted-text); margin: -4px 0 0; }

@media (max-width: 900px) {
  .request-split { grid-template-columns: 1fr; }
  .request-form .rf-row { grid-template-columns: 1fr; }
}

/* ---------------- CTA band ---------------- */

.cta-band {
  text-align: center;
  padding: var(--space-section) 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 50% 65% at 50% 100%, rgba(3, 105, 161, 0.12), transparent 70%);
  pointer-events: none;
}
.cta-band h2 { font-size: var(--text-h2); max-width: 22ch; margin-inline: auto; }
.cta-band p {
  color: var(--color-secondary);
  font-size: var(--text-lead);
  max-width: 52ch;
  margin: 0 auto 32px;
}
.cta-band .btn { position: relative; }

/* ---------------- Footer ---------------- */

.site-footer {
  background: var(--color-navy-deep);
  color: rgba(255, 255, 255, 0.75);
  padding: 72px 0 0;
  font-size: 14.5px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

.footer-brand .nav-logo { color: #fff; margin-bottom: 14px; }
.footer-brand p { max-width: 34ch; color: rgba(255, 255, 255, 0.6); }

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  transition: background-color var(--dur-fast) ease;
}
.footer-social:hover { background: var(--color-accent); color: #fff; }

.footer-col h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 11px; }
.footer-col a { color: rgba(255, 255, 255, 0.72); }
.footer-col a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
}
.footer-bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom-inner nav { display: flex; gap: 22px; }
.footer-bottom-inner a { color: rgba(255, 255, 255, 0.6); }
.footer-bottom-inner a:hover { color: #fff; }

/* ---------------- Industry pages ---------------- */

.industry-hero {
  text-align: center;
  padding: var(--space-section-sm) 0;
  position: relative;
  overflow: hidden;
}
.industry-hero::before {
  content: "";
  position: absolute;
  inset: -12% -6%;
  background:
    radial-gradient(ellipse 62% 85% at 30% 28%, rgba(3, 105, 161, 0.20), transparent 68%),
    radial-gradient(ellipse 55% 75% at 76% 18%, rgba(86, 194, 230, 0.17), transparent 70%),
    radial-gradient(ellipse 48% 60% at 58% 90%, rgba(15, 23, 42, 0.08), transparent 70%);
  pointer-events: none;
}
.industry-hero { text-align: left; }
.industry-hero.hero-centered { text-align: center; }
.industry-hero.hero-centered .container { max-width: 860px; }
.industry-hero.hero-centered .hero-sub { margin-inline: auto; }
.industry-hero.hero-centered::before {
  background:
    radial-gradient(ellipse 62% 85% at 50% 28%, rgba(3, 105, 161, 0.18), transparent 68%),
    radial-gradient(ellipse 55% 75% at 84% 18%, rgba(86, 194, 230, 0.15), transparent 70%),
    radial-gradient(ellipse 55% 75% at 16% 18%, rgba(86, 194, 230, 0.12), transparent 70%);
}
.industry-hero .container { position: relative; z-index: 1; }

/* Oversized watermark icons flanking centered heroes */
.hero-deco {
  position: absolute;
  color: var(--color-accent);
  opacity: 0.09;
  pointer-events: none;
}
.hero-deco svg { width: 100%; height: 100%; display: block; stroke-width: 1.5; }
.hero-deco.dl {
  left: -2%;
  bottom: -22%;
  width: clamp(220px, 26vw, 400px);
  height: clamp(220px, 26vw, 400px);
  transform: rotate(-10deg);
}
.hero-deco.dr {
  right: -3%;
  top: -14%;
  width: clamp(260px, 30vw, 470px);
  height: clamp(260px, 30vw, 470px);
  transform: rotate(13deg);
}
@media (max-width: 768px) {
  .hero-deco { opacity: 0.07; }
  .hero-deco.dl { width: 170px; height: 170px; bottom: -14%; }
  .hero-deco.dr { width: 190px; height: 190px; top: -8%; }
}
.industry-hero.hero-centered h1,
.industry-hero.hero-centered .hero-sub { margin-inline: auto; }

/* Frameless hero art: cutout floats straight on the background.
   Sized from the hero's HEIGHT, so it fills the section top to
   bottom and may spill wider than its column (clipped by the
   section's overflow) — matches the reference mock. */
.hero-cutout {
  min-width: 0;
  align-self: stretch;
  position: relative;
}

.hero-cutout img {
  position: absolute;
  bottom: calc(-1 * var(--space-section-sm));
  left: 0;
  height: calc(100% + 2 * var(--space-section-sm));
  width: auto;
  max-width: none;
  filter: drop-shadow(0 20px 36px rgba(15, 23, 42, 0.16));
}
/* Image-left pages: center narrow images to fill the column; wide
   images anchor to the text-facing edge so their overflow runs off
   the page edge instead of into the copy */
.band-inner.media-left .hero-cutout img {
  left: 50%;
  transform: translateX(-50%);
}
.band-inner.media-left .hero-cutout img.is-wide {
  left: auto;
  right: 0;
  transform: none;
}

/* Full-photo variant: keep the whole scene (person + machine) and
   feather the top/left/right edges into the hero background */
.hero-blend img {
  filter: none;
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 100%);
  mask-composite: intersect;
}

@media (max-width: 768px) {
  .hero-cutout img,
  .band-inner.media-left .hero-cutout img {
    position: static;
    height: auto;
    width: 100%;
    margin: 0 0 calc(-1 * var(--space-section-sm));
    transform: none;
  }
}
.industry-hero h1 {
  font-size: clamp(34px, 5vw, 54px);
  max-width: 20ch;
  margin: 0 0 18px;
  position: relative;
}
.industry-hero .hero-sub { margin: 0 0 32px; }

.builds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
/* SAP style tile list: hairline grid instead of boxed cards */
.builds-grid { gap: 0; border-top: 1px solid var(--color-border); }
.build-tile {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 30px 34px 30px 0;
  border-bottom: 1px solid var(--color-border);
}
.build-tile:nth-child(odd) { border-right: 1px solid var(--color-border); }
.build-tile:nth-child(even) { padding-left: 34px; padding-right: 0; }
.tile-glyph {
  flex-shrink: 0;
  color: var(--color-accent);
  margin-top: 3px;
}
.build-tile h3 { font-size: 19px; margin-bottom: 6px; }
.build-tile p { color: var(--color-muted-text); font-size: 15px; margin: 0; }

/* Case statement: a typographic moment, no box */
.case-quote {
  max-width: 820px;
  text-align: center;
}
.case-quote h3 { font-size: var(--text-h2); margin-bottom: 16px; }
.case-quote p {
  color: var(--color-secondary);
  font-size: var(--text-lead);
  max-width: 56ch;
  margin: 0 auto 22px;
}

/* ---------------- Comparison strip (How We Work) ---------------- */

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
  padding-top: 14px;
}
.compare-col { padding: 30px 28px; display: flex; flex-direction: column; }
.compare-col h3 { font-size: 19px; margin-bottom: 4px; }
.compare-col .compare-tag { font-size: 13.5px; color: var(--color-muted-text); margin-bottom: 18px; }
.compare-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  color: var(--color-secondary);
}
.compare-col li { display: flex; gap: 10px; align-items: flex-start; }
.compare-col li svg { flex-shrink: 0; margin-top: 3px; }
.compare-col.is-featured {
  border: 2px solid var(--color-accent);
  box-shadow: var(--shadow-md);
  position: relative;
}
.compare-col.is-featured::before {
  content: "BetterFlow";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
}

/* ---------------- Prose pages / about ---------------- */

.prose {
  max-width: 720px;
  margin-inline: auto;
}
.prose h2 { font-size: 26px; margin-top: 1.8em; }
.prose h3 { font-size: 19px; margin-top: 1.4em; }
.prose p { color: var(--color-secondary); font-size: 16.5px; }
.prose ul { color: var(--color-secondary); font-size: 16px; padding-left: 22px; margin: 14px 0; display: flex; flex-direction: column; gap: 8px; }
.prose li strong { color: var(--color-primary); }
.prose-lead { font-size: var(--text-lead); }
.prose-meta { font-size: 14px; color: var(--color-muted-text); border-bottom: 1px solid var(--color-border); padding-bottom: 22px; }
/* Privacy layout: sticky table of contents beside the policy */
.privacy-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.privacy-layout .prose { grid-column: 2; grid-row: 1; max-width: 760px; }
.toc {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
}
.toc b {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 12px;
}
.toc a {
  font-size: 14px;
  color: var(--color-muted-text);
  padding: 6px 0 6px 14px;
  border-left: 1px solid var(--color-border);
  transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.toc a:hover { color: var(--color-accent); }
.toc a.is-active {
  color: var(--color-accent);
  font-weight: 600;
  border-left-color: var(--color-accent);
}
.prose h2[id] { scroll-margin-top: 96px; }
@media (max-width: 1024px) {
  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-layout .prose { grid-column: 1; }
  .toc { display: none; }
}

.prose-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 18px 0;
}
.prose-table th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted-text);
  padding: 8px 14px 10px 0;
  border-bottom: 1px solid var(--color-border);
}
.prose-table td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-secondary);
  vertical-align: top;
}
.prose-table td:first-child { color: var(--color-primary); font-weight: 600; }
@media (max-width: 640px) {
  .prose-table { display: block; overflow-x: auto; }
}

.founder-card {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: center;
  padding: 32px;
  max-width: 780px;
  margin-inline: auto;
}
.founder-photo {
  width: 180px;
  height: 180px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-muted), var(--color-border));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted-text);
  font-size: 13px;
  text-align: center;
  padding: 12px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.value-card { padding: 28px 26px; }
.value-card h3 { font-size: 18px; }
.value-card p { color: var(--color-muted-text); font-size: 14.5px; margin: 0; }

/* ---------------- Support / FAQ ---------------- */

.contact-card {
  max-width: 640px;
  margin: 0 auto;
  padding: 36px 38px;
  text-align: center;
}
.contact-card h3 { font-size: var(--text-h3); }
.contact-card .contact-mail {
  display: inline-block;
  font-size: 20px;
  font-weight: 700;
  margin: 8px 0 12px;
}
.contact-card p { color: var(--color-muted-text); font-size: 15px; margin: 0; }

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 4px;
  background: none;
  border: none;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary);
  transition: color var(--dur-fast) ease;
}
.faq-q:hover { color: var(--color-accent); }
.faq-q svg { flex-shrink: 0; transition: transform var(--dur-med) var(--ease-out); }
.faq-item.is-open .faq-q svg { transform: rotate(45deg); }
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-med) var(--ease-out);
}
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a p { color: var(--color-secondary); font-size: 15.5px; padding: 0 4px 22px; margin: 0; }

/* ---------------- Legal ---------------- */

.legal-notice {
  background: #FEF9C3;
  border: 1px solid #FDE047;
  color: #713F12;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 40px;
}

/* ------- Fira Sans weight tuning (TESTING — delete with font swap) ------- */

.nav-logo { font-weight: 600; }
.nav-tab > a,
.nav-tab > button { font-weight: 500; letter-spacing: 0.01em; }
.mega-item b,
.mobile-group > a,
.mobile-group > button,
.contact-mail,
.pain-closer,
.stat h3,
.step-num { font-weight: 600; }
.hero-eyebrow,
.eyebrow,
.axis-line,
.footer-col h4,
.compare-col.is-featured::before,
.legal-notice,
.faq-q,
.proof-list li,
.hero-actions .aside-link a { font-weight: 500; }
.link-arrow { font-weight: 500; letter-spacing: 0.01em; }
/* Touch devices: grow the hit area of text links to ~44px without moving
   the visible text (padding is cancelled by an equal negative margin). */
@media (pointer: coarse) {
  .link-arrow,
  .support-value,
  .footer-col a,
  .footer-bottom-inner a,
  .faq-a a,
  .prose a { padding-block: 10px; margin-block: -10px; }
  .footer-col a, .footer-bottom-inner a { display: inline-block; }
  .nav-logo { padding-block: 4px; }
}
.link-arrow svg { transition: transform var(--dur-fast) ease; }
.link-arrow:hover svg { transform: translateX(3px); }

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

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; }
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1024px) {
  .nav-tabs { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner { justify-content: space-between; }
  .nav-utilities .btn-book-nav { display: none; }

  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .steps::before { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .compare-grid { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; gap: 28px; }
  .compare-col.is-featured { order: -1; }
}

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

@media (max-width: 768px) {
  .band-inner { grid-template-columns: 1fr; }
  .band-inner.media-left .band-media { order: 0; }
  /* Industry heroes: message first, cutout photo below it */
  .band-inner.media-left .hero-cutout { order: 0; }
  /* Static hero: the transparent frame around the laptop makes it render
     small; oversize the box so the laptop itself fills the width */
  .hero.hero-static .hero-video-box { width: 150%; margin-left: -25%; }
  .builds-grid { grid-template-columns: 1fr; }
  .build-tile,
  .build-tile:nth-child(odd),
  .build-tile:nth-child(even) { border-right: none; padding-left: 0; padding-right: 0; }
  .stats-grid { grid-template-columns: 1fr; gap: 36px; }
  .stat + .stat { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 32px; }
  .values-grid { grid-template-columns: 1fr; }
  .founder-card { grid-template-columns: 1fr; text-align: center; }
  .founder-photo { margin-inline: auto; }
  .video-frame { max-width: 100%; }
  .mega-inner { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 560px) {
  .solution-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .hero { padding-top: var(--space-section-sm); }
  .footer-grid { grid-template-columns: 1fr; }
}

/* Home: industries strip, 3 across, each tile ends in an Explore button */
.ind-grid { grid-template-columns: repeat(3, 1fr); max-width: 1140px; margin-inline: auto; }
.ind-tile { flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px 26px 28px; }
.ind-tile > div { flex: 1; }
.ind-tile h3 { font-size: 21px; margin-bottom: 6px; }
.ind-tile p { color: var(--color-muted-text); margin: 0; font-size: 15px; }
.btn-sm { padding: 9px 16px; font-size: 14px; gap: 6px; }
.ind-tile .btn svg { transition: transform var(--dur-fast) ease; }
.ind-tile .btn:hover svg { transform: translateX(3px); }
@media (max-width: 900px) { .ind-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ind-grid { grid-template-columns: 1fr; } }

/* Scope note is a footnote to the list above it: tight below, and the CTA
   band that follows keeps only its own smaller top rhythm. */
.scope-section { padding-top: 0; padding-bottom: 56px; }
.scope-section + .cta-band { padding-top: var(--space-section-sm); }

/* Industries grid hairlines for 3 / 2 / 1 columns (base tile rules assume 2) */
.ind-grid .ind-tile { padding: 30px 26px 28px; border-right: 1px solid var(--color-border); }
.ind-grid .ind-tile:nth-child(3n) { border-right: 0; }
@media (max-width: 900px) {
  .ind-grid .ind-tile:nth-child(3n) { border-right: 1px solid var(--color-border); }
  .ind-grid .ind-tile:nth-child(2n) { border-right: 0; }
}
@media (max-width: 560px) { .ind-grid .ind-tile { border-right: 0; padding-inline: 4px; } }

/* Stats: sources line up on one row regardless of how the copy wraps */
.stats-grid .stat { display: flex; flex-direction: column; align-items: center; }
.stats-grid .stat .src { margin-top: auto; padding-top: 12px; }

/* Balanced headline wrapping: no single orphaned word on the last line */
.band-copy h2, .section-head h2, .cta-band h2, .case-quote h3, .hero h1, .industry-hero h1 { text-wrap: balance; }

/* Scope note lives under the CTA button now */
.cta-note { margin: 28px auto 0; max-width: 60ch; font-size: 15px; color: var(--color-secondary); }
.cta-note b { color: var(--color-primary); }
.cta-note .link-arrow { margin-left: 4px; font-size: 15px; }
.cta-note .link-arrow { display: inline-flex; margin: 10px auto 0; }
.cta-note .link-arrow { display: flex; justify-content: center; }

/* Scope note under the CTA button: clearly secondary, well separated */
.cta-band .cta-note {
  margin: 44px auto 0;
  padding-top: 26px;
  border-top: 1px solid var(--color-border);
  max-width: 52ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-muted-text);
}
.cta-band .cta-note b { color: var(--color-primary); font-weight: 600; }
.cta-band .cta-note .link-arrow { display: inline-flex; margin: 0 0 0 6px; font-size: 15px; }
@media (max-width: 560px) { .ind-grid .ind-tile:nth-child(n) { border-right: 0; } }

/* ---------------- Demos page ---------------- */
.demo-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.demo-card + .demo-card { margin-top: clamp(56px, 8vw, 96px); padding-top: clamp(56px, 8vw, 96px); border-top: 1px solid var(--color-border); }
.demo-viz { aspect-ratio: 16 / 11; }
.demo-viz .shot { top: 8%; width: 86%; }
.demo-viz .shot iframe, .demo-viz .shot video { width: 100%; aspect-ratio: 16 / 10; border: 0; display: block; border-radius: 6px 6px 0 0; }
.demo-slot {
  aspect-ratio: 16 / 10;
  display: grid;
  place-content: center;
  gap: 6px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 6px 6px 0 0;
  color: var(--color-muted-text);
  font-size: 14px;
  padding: 24px;
}
.demo-slot b { color: var(--color-primary); font-size: 17px; }
.demo-slot-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.demo-copy h2 { margin-bottom: 6px; }
.demo-meta { color: var(--color-muted-text); font-size: 14.5px; margin: 0 0 16px; }
.demo-features { margin: 22px 0 28px; }
@media (max-width: 900px) { .demo-card { grid-template-columns: 1fr; } .demo-media { order: -1; } }
.demo-slot-logo { width: 200px; height: auto; margin: 0 auto 10px; }
.demo-viz .shot .demo-slot-logo { width: 200px; height: auto; border-radius: 0; }
.demo-copy p { max-width: 52ch; }
.demo-copy .demo-closing { color: var(--color-primary); font-weight: 500; }
.footer-socials { display: flex; gap: 10px; margin-top: 4px; }