:root {
  --navy-1000: #020d18;
  --navy-950: #041929;
  --navy-900: #06263c;
  --brand-800: #044674;
  --brand-600: #446c9c;
  --steel-500: #8c949c;
  --stone-400: #b4adad;
  --mist-100: #f4f7f8;
  --paper: #ffffff;
  --ink: #112637;
  --muted: #4f5b66;
  --focus: #28d8ef;
  --cyan: #28d8ef;
  --line: rgba(17, 38, 55, 0.12);
  --shadow: 0 24px 70px rgba(4, 25, 41, 0.18);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

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

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 4vw, 56px);
  color: var(--paper);
  background: linear-gradient(180deg, rgba(4, 25, 41, 0.9), rgba(4, 25, 41, 0.44) 72%, transparent);
}

.brand,
.nav-links,
.hero-proof,
.hero-actions {
  display: flex;
  align-items: center;
}

.brand {
  gap: 10px;
  font-weight: 800;
  font-size: 0.98rem;
  /* No background or padding — the logo is the brand block itself. */
}

.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  /* SVG is wide (~5.4:1). Cap width so it never crowds the nav on tablets. */
  max-width: 220px;
  /* The SVG already paints white via an internal colour-matrix filter, so
     it sits cleanly on the dark header gradient. */
}

@media (max-width: 640px) {
  .brand-logo {
    height: 30px;
    max-width: 170px;
  }
}

.nav-links {
  gap: 26px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.9rem;
  font-weight: 600;
}

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

.header-cta {
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 6px;
  color: var(--paper);
  font-weight: 700;
  font-size: 0.88rem;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero {
  position: relative;
  min-height: 88vh;
  display: grid;
  align-items: center;
  padding: 142px clamp(20px, 6vw, 84px) 70px;
  overflow: hidden;
  color: var(--paper);
  background: var(--navy-950);
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Screen blend so cyan only ADDS light — never darkens. Over the bright
     photo on the right, the photo overpowers; over the dark navy gradient
     on the left, the constellation reads cleanly behind the headline. */
  mix-blend-mode: screen;
  opacity: 0.65;
  /* Soft mask so the constellation fades out before reaching Scott's face. */
  -webkit-mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9) 40%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0) 88%
  );
  mask-image: linear-gradient(
    90deg,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.9) 40%,
    rgba(0, 0, 0, 0.35) 65%,
    rgba(0, 0, 0, 0) 88%
  );
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    /* Subtle left-side darken just for text legibility — much lighter than
       the original overlay because scott-hero-v2.jpeg is already navy on
       the left and has its own geometric design we want to preserve. */
    linear-gradient(90deg, rgba(4, 25, 41, 0.55) 0%, rgba(4, 25, 41, 0.32) 38%, rgba(4, 25, 41, 0.08) 70%, rgba(4, 25, 41, 0) 100%),
    /* Very gentle bottom darken so the hero's cyan underline reads against the image. */
    linear-gradient(180deg, rgba(4, 25, 41, 0), rgba(4, 25, 41, 0.32)),
    url("./assets/scott-hero-v2.webp") center / cover no-repeat;
  transform: scale(1.01);
}

.hero::after {
  content: "";
  position: absolute;
  left: clamp(20px, 6vw, 84px);
  right: clamp(20px, 6vw, 84px);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(40, 216, 239, 0.6), rgba(255, 255, 255, 0.08), transparent);
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--brand-600);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .eyebrow,
.final-cta .eyebrow {
  color: var(--cyan);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  font-size: clamp(2.9rem, 6vw, 5.6rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(2.1rem, 4.6vw, 4.6rem);
  font-weight: 800;
  color: var(--navy-950);
}

h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--navy-950);
}

.hero-copy {
  max-width: 680px;
  margin: 20px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.hero-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.1;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  color: var(--navy-950);
  background: var(--paper);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3), 0 18px 42px rgba(40, 216, 239, 0.18);
}

.final-cta .button-primary {
  color: var(--paper);
  background: var(--brand-800);
}

.button-secondary {
  color: var(--paper);
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(255, 255, 255, 0.08);
}

.hero-proof {
  flex-wrap: wrap;
  gap: 10px;
  max-width: 760px;
  margin-top: 24px;
}

.hero-proof span {
  padding: 8px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(4, 25, 41, 0.38);
  font-size: 0.86rem;
  font-weight: 700;
}

.section {
  padding: clamp(76px, 10vw, 132px) clamp(20px, 6vw, 84px);
}

.section-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.two-column,
.managed-grid,
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(34px, 7vw, 92px);
}

.rich-text p,
.section-heading p,
.managed-grid p,
.final-cta p,
.faq-list p,
.pillar p,
.outcomes-grid p {
  color: var(--muted);
  font-size: 1.04rem;
}

.rich-text p:first-child {
  margin-top: 0;
}

.trust-viz {
  position: relative;
  width: 100%;
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

.trust-stack {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.trust-image {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.trust-scan-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  /* Screen blend: the cyan beam ADDS light to whatever's underneath. On
     the cyan letters it brightens them ("activating" the scan); on the
     white background it composites to white (invisible). That's how it
     reads as a scan beam rather than a moving stripe. */
  mix-blend-mode: screen;
}

.section-problem {
  background: var(--paper);
}

.section-system {
  background: var(--mist-100);
}

.section-heading {
  max-width: 870px;
  margin-bottom: 42px;
}

.section-heading.compact {
  max-width: 820px;
}

.section-heading p {
  max-width: 740px;
}

.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.outcomes-grid article,
.fit-grid article {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 10px 34px rgba(4, 25, 41, 0.06);
}

.outcomes-grid span {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--brand-600);
  font-weight: 800;
}

.section-pillars {
  background: var(--paper);
}

.pillar-list {
  display: grid;
  gap: 14px;
}

.pillar {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 22px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(68, 108, 156, 0.08), rgba(255, 255, 255, 0));
}

.pillar-number {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 6px;
  color: var(--paper);
  background: var(--brand-800);
  font-weight: 800;
}

.section-managed {
  color: var(--paper);
  background:
    linear-gradient(135deg, rgba(4, 70, 116, 0.96), rgba(4, 25, 41, 0.98)),
    var(--navy-900);
}

.section-managed h2,
.section-managed h3 {
  color: var(--paper);
}

.section-managed p {
  color: rgba(255, 255, 255, 0.88);
}

.metric-panel {
  display: grid;
  gap: 12px;
}

.metric-panel[hidden] {
  display: none;
}

.metric-panel div {
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
}

.metric-panel span {
  display: block;
  color: var(--cyan);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-panel strong {
  display: block;
  margin-top: 4px;
  font-size: 1.1rem;
}

/* --- Pipeline Visualizer ----------------------------------------------- */

.pipeline-viz {
  position: relative;
  min-height: 440px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(4, 25, 41, 0.55), rgba(4, 25, 41, 0.15));
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 70px rgba(4, 25, 41, 0.32);
}

.pipeline-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

.pipeline-stages {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-content: center;
  gap: 12px;
  margin: 0;
  padding: 24px 18px;
  list-style: none;
  pointer-events: none;
}

.pipeline-stages li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(4, 25, 41, 0.35);
  backdrop-filter: blur(6px);
}

.pipeline-stages span {
  color: var(--cyan);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pipeline-stages strong {
  color: var(--paper);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
}

@media (max-width: 720px) {
  .pipeline-viz {
    min-height: 460px;
  }

  .pipeline-stages {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px;
  }
}

.section-fit {
  background: var(--mist-100);
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.fit-grid ul {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.fit-grid li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
}

.fit-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-600);
}

.section-faq {
  background: var(--paper);
}

.faq-list {
  display: grid;
  gap: 10px;
}

details {
  border-bottom: 1px solid var(--line);
  padding: 0 0 18px;
}

summary {
  cursor: pointer;
  color: var(--navy-950);
  font-size: 1.05rem;
  font-weight: 800;
}

summary::marker {
  color: var(--brand-600);
}

.final-cta {
  padding: clamp(76px, 10vw, 132px) clamp(20px, 6vw, 84px);
  color: var(--paper);
  background:
    /* Left-darkening overlay so the dark navy CTA text-side stays solid for
       legibility; right side fades to let the new image's design show. */
    linear-gradient(90deg, rgba(4, 25, 41, 0.92) 0%, rgba(4, 25, 41, 0.7) 45%, rgba(4, 25, 41, 0.2) 80%, rgba(4, 25, 41, 0) 100%),
    url("./assets/scott-hero-v2.webp") right center / cover no-repeat;
}

.final-cta .eyebrow {
  color: var(--cyan);
}

.final-cta h2 {
  color: var(--paper);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.9);
}

.final-cta .button-primary {
  background: var(--cyan);
  color: var(--navy-950);
  box-shadow: 0 0 0 1px rgba(40, 216, 239, 0.5), 0 18px 42px rgba(40, 216, 239, 0.28);
}

.final-inner {
  max-width: 760px;
}

.final-inner h2 {
  max-width: 720px;
}

.final-inner p {
  max-width: 620px;
  margin-bottom: 28px;
}

/* --- Proof section --------------------------------------------------- */

/* ============================================
   Unified trust strip — eyebrow + pull-quote + client logos + track-record stats.
   Replaced the old .quote-band + .section-proof pair so there's a single
   above-the-fold trust moment instead of two sequential scrolls.
   ============================================ */
.section-trust,
.section-proof {
  padding: clamp(54px, 7vw, 90px) clamp(20px, 6vw, 84px);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.trust-inner,
.proof-inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.trust-inner .eyebrow,
.proof-inner .eyebrow {
  margin-bottom: 28px;
  color: var(--brand-600);
}

/* The pull-quote that anchors the trust strip. Centred, slightly narrower
   than the section, with a thin divider beneath it before the logos. */
.trust-quote {
  margin: 0 auto 36px;
  max-width: 760px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}

.trust-quote blockquote {
  margin: 0 0 22px;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  line-height: 1.28;
  font-weight: 800;
  color: var(--navy-950);
  letter-spacing: -0.01em;
  position: relative;
}

.trust-quote blockquote::before {
  content: "\201C";
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--cyan);
  margin-bottom: -0.4em;
}

.trust-quote-attrib {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
}

.trust-quote-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
}

.trust-quote-attrib strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.96rem;
}

.trust-quote-attrib span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.83rem;
}

.proof-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 44px;
  padding: 0;
  list-style: none;
}

.proof-logos li {
  height: 64px;
  display: grid;
  place-items: center;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(244, 247, 248, 0.6);
  border: 1px solid var(--line);
  transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.proof-logos li:hover {
  border-color: rgba(4, 70, 116, 0.3);
  background: var(--paper);
  transform: translateY(-1px);
}

/* Logo images: muted by default, full colour on hover.
   max-height keeps wildly-different aspect ratios sitting on the same baseline. */
.proof-logos li img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Native brand colour for each client — no greyscale filter, just a
     slight opacity drop so the row reads as cohesive rather than busy.
     Full opacity on hover for a subtle affordance. */
  opacity: 0.88;
  transition: opacity 220ms ease, transform 220ms ease;
}

.proof-logos li:hover img {
  opacity: 1;
  transform: scale(1.03);
}

/* Pending slots (no logo file yet) keep the dashed-placeholder look so it's
   clear these are awaiting content rather than broken layout. */
.proof-logos-pending {
  border-style: dashed !important;
  border-color: rgba(17, 38, 55, 0.16) !important;
  background: rgba(244, 247, 248, 0.4) !important;
}

.proof-logos-pending:hover {
  transform: none !important;
}

.proof-logos-pending span {
  color: rgba(17, 38, 55, 0.4);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.proof-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  text-align: left;
}

.proof-stats > div {
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.proof-stats > div:hover {
  border-color: rgba(4, 70, 116, 0.35);
  box-shadow: 0 10px 30px rgba(4, 25, 41, 0.08);
  transform: translateY(-1px);
}

.proof-stats dt {
  order: 2;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.35;
}

.proof-stats dd {
  order: 1;
  margin: 0;
}

.proof-stat-num {
  display: inline-block;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 800;
  color: var(--navy-950);
  letter-spacing: -0.02em;
  position: relative;
}

@keyframes proof-pulse {
  0%, 100% { color: var(--navy-950); }
  50% { color: var(--brand-800); }
}

.proof-stat-num[data-pulse] {
  animation: proof-pulse 4.5s ease-in-out infinite;
}

.proof-stats > div:nth-child(2) .proof-stat-num { animation-delay: 0.6s; }
.proof-stats > div:nth-child(3) .proof-stat-num { animation-delay: 1.2s; }
.proof-stats > div:nth-child(4) .proof-stat-num { animation-delay: 1.8s; }

/* --- Focus, transitions, cursor (UI/UX Pro Max checklist) ------------- */

a,
button,
summary,
.button,
.header-cta,
input,
textarea {
  transition: color 180ms ease, background 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease,
              transform 180ms ease;
}

a,
button,
summary,
.button,
.header-cta {
  cursor: pointer;
}

a:focus,
button:focus,
summary:focus,
.button:focus,
.header-cta:focus {
  outline: none;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.button:focus-visible,
.header-cta:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Honor reduced motion for the metric pulse */
@media (prefers-reduced-motion: reduce) {
  .proof-stat-num[data-pulse] {
    animation: none;
  }
}

@media (max-width: 960px) {
  .site-header {
    position: absolute;
  }

  .nav-links {
    display: none;
  }

  .hero {
    min-height: 88vh;
  }

  .hero-bg {
    background:
      linear-gradient(90deg, rgba(4, 25, 41, 0.97), rgba(4, 25, 41, 0.78)),
      linear-gradient(180deg, rgba(4, 25, 41, 0.2), rgba(4, 25, 41, 0.9)),
      url("./assets/scott-hero-v2.webp") 64% center / cover no-repeat;
  }

  .quote-band,
  .two-column,
  .managed-grid,
  .faq-layout,
  .fit-grid {
    grid-template-columns: 1fr;
  }

  .proof-logos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .proof-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quote-band p {
    max-width: none;
  }

  .outcomes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .site-header {
    padding: 14px 16px;
  }

  .header-cta {
    display: none;
  }

  .hero {
    min-height: 92vh;
    padding: 112px 18px 54px;
  }

  h1 {
    font-size: clamp(2.45rem, 14vw, 3.8rem);
  }

  h2 {
    font-size: clamp(1.9rem, 10vw, 2.7rem);
  }

  .button {
    width: 100%;
  }

  .hero-proof span {
    width: 100%;
  }

  .section,
  .final-cta {
    padding: 66px 18px;
  }

  .outcomes-grid {
    grid-template-columns: 1fr;
  }

  .pillar {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .final-cta {
    background:
      /* Mobile: stronger left darken since screen is narrower and image
         compresses tighter. Keeps text legible while showing image on right. */
      linear-gradient(90deg, rgba(4, 25, 41, 0.96) 0%, rgba(4, 25, 41, 0.82) 55%, rgba(4, 25, 41, 0.32) 88%, rgba(4, 25, 41, 0.1) 100%),
      url("./assets/scott-hero-v2.webp") 70% center / cover no-repeat;
  }
}

/* =========================================================
   APEX FORK — bolder mechanics layer
   Loaded on the apex-fork branch only. Sits at the end of
   the file so all selectors win the cascade against the
   defaults above.
   ========================================================= */

/* 1. Hero headline — mixed-color emphasis on the key phrase */
h1 .accent,
h2 .accent {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(40, 216, 239, 0.65);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  text-decoration-skip-ink: none;
}

h1 .accent {
  color: var(--cyan);
}

/* 2. Bigger, more confident hero type */
.hero h1 {
  font-size: clamp(3.2rem, 7vw, 6.4rem);
  letter-spacing: -0.015em;
  line-height: 0.98;
}

.hero .eyebrow {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

/* 3. Stronger CTAs */
.button-primary {
  background: var(--cyan);
  color: var(--navy-950);
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.5),
    0 18px 42px rgba(40, 216, 239, 0.32);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.8),
    0 24px 60px rgba(40, 216, 239, 0.5);
}

.final-cta .button-primary {
  background: var(--cyan);
  color: var(--navy-950);
}

.button-secondary {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.92rem;
  border-color: rgba(255, 255, 255, 0.45);
}

.button-secondary:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.header-cta {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: rgba(40, 216, 239, 0.12);
  border-color: rgba(40, 216, 239, 0.45);
}

.header-cta:hover {
  background: rgba(40, 216, 239, 0.22);
  border-color: var(--cyan);
}

/* 4. Sticky personality bubble (bottom-right) */
.scott-bubble {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 30;
  max-width: 340px;
  padding: 16px 18px 16px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: var(--paper);
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.25),
    0 22px 60px rgba(4, 25, 41, 0.45);
  font-size: 0.92rem;
  line-height: 1.45;
  /* Default invisible state — flipped via the .is-visible class added by JS
     15 seconds after page load. The entrance transitions both opacity and a
     small Y lift for a soft "appear" feel. */
  opacity: 0;
  transform: translateY(18px) scale(0.96);
  transition:
    opacity 380ms ease,
    transform 380ms cubic-bezier(0.16, 1, 0.3, 1);
}

.scott-bubble[hidden] {
  display: none !important;
}

.scott-bubble.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* When the final-CTA section is in view, fade the bubble out so it
   doesn't overlap the primary call-to-action button. The bubble springs
   back into view if the visitor scrolls upward again. */
.scott-bubble.is-hidden-cta {
  opacity: 0;
  transform: translateY(28px) scale(0.94);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .scott-bubble {
    transition: opacity 200ms linear;
    transform: none;
  }
  .scott-bubble.is-visible {
    transform: none;
  }
  .scott-bubble.is-hidden-cta {
    transform: none;
  }
}

/* --- Floating chat icon (FAB) ----------------------------------------
   Persistent way to invoke the chat bubble at any time. Sits in the same
   bottom-right corner as the bubble — visible whenever the bubble is
   closed/dismissed, hidden whenever the bubble is open. */
.scott-fab {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 29;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy-950);
  cursor: pointer;
  /* Hidden by default — JS adds .is-visible on page load + after dismiss. */
  opacity: 0;
  transform: scale(0.7) translateY(20px);
  pointer-events: none;
  transition:
    opacity 280ms ease,
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 220ms ease;
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.4),
    0 14px 38px rgba(40, 216, 239, 0.45),
    0 6px 16px rgba(4, 25, 41, 0.25);
}

.scott-fab.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.scott-fab:hover {
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.7),
    0 18px 50px rgba(40, 216, 239, 0.55),
    0 6px 16px rgba(4, 25, 41, 0.3);
}

.scott-fab:hover .scott-fab-icon {
  transform: scale(1.08);
}

.scott-fab-icon {
  width: 24px;
  height: 24px;
  transition: transform 200ms ease;
  position: relative;
  z-index: 2;
}

/* Soft pulsing ring underneath the FAB to draw attention without being
   loud. Cyan rim that expands + fades on a slow loop. */
.scott-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(40, 216, 239, 0.5);
  z-index: 1;
  animation: scott-fab-pulse 2.6s ease-out infinite;
  pointer-events: none;
}

@keyframes scott-fab-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(1.6); opacity: 0;   }
  100% { transform: scale(1.6); opacity: 0;   }
}

@media (prefers-reduced-motion: reduce) {
  .scott-fab {
    transition: opacity 200ms linear;
    transform: none;
  }
  .scott-fab.is-visible {
    transform: none;
  }
  .scott-fab-pulse {
    animation: none;
    opacity: 0;
  }
}

.scott-bubble-inner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.scott-bubble-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--navy-950);
  font-weight: 800;
  font-size: 0.84rem;
  letter-spacing: 0.02em;
}

.scott-bubble-body p {
  margin: 0 0 10px;
}

/* Channel button row inside the Scott bubble */
.scott-bubble-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.scott-channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--paper);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.scott-channel:hover {
  transform: translateY(-1px);
}

.scott-channel-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Channel-specific accent on hover so each one feels distinct */
.scott-channel-whatsapp:hover {
  background: rgba(37, 211, 102, 0.18);
  border-color: rgba(37, 211, 102, 0.55);
  color: #25d366;
}

.scott-channel-sms:hover {
  background: rgba(40, 216, 239, 0.16);
  border-color: rgba(40, 216, 239, 0.5);
  color: var(--cyan);
}

.scott-channel-book:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--paper);
}

.scott-bubble-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
}

.scott-bubble-close:hover {
  color: var(--paper);
}

/* 5. Edge decorative shapes — subtle geometric brackets at section edges */
.section-system,
.section-managed,
.section-fit {
  position: relative;
}

.section-system::before,
.section-fit::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 36px;
  height: 36px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
  opacity: 0.55;
  pointer-events: none;
}

.section-system::after,
.section-fit::after {
  content: "";
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 36px;
  height: 36px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  opacity: 0.55;
  pointer-events: none;
}

/* 6. Push hero proof tags to feel sharper */
.hero-proof span {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  border-color: rgba(40, 216, 239, 0.3);
  background: rgba(40, 216, 239, 0.06);
}

@media (max-width: 640px) {
  .scott-bubble {
    max-width: calc(100vw - 32px);
  }
}

/* =========================================================
   APEX FORK — full-page boldness extension
   ========================================================= */

/* Section eyebrow numbering — adds an "01 / 02 / ..." indicator
   to every section header so the page reads like a numbered argument. */
.eyebrow-num {
  display: inline-block;
  margin-right: 10px;
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  vertical-align: 1px;
  opacity: 0.85;
}

/* h2 accent inherits dark heading color but gets the underline */
h2 .accent {
  color: var(--navy-950);
}

/* On dark sections, accent flips to cyan so it stays visible */
.section-managed h2 .accent,
.final-cta h2 .accent {
  color: var(--cyan);
}

/* Push every section H2 a touch bigger and tighter */
h2 {
  font-size: clamp(2.3rem, 4.8vw, 4.9rem);
  letter-spacing: -0.015em;
}

/* Section eyebrows: uppercase, more confident */
.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

/* ---- Problem section ---- */
.section-problem {
  position: relative;
}

.section-problem::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 24px;
  width: 36px;
  height: 36px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
  opacity: 0.55;
  pointer-events: none;
}

/* ---- System outcomes grid — make cards hover with cyan kiss ---- */
.outcomes-grid article {
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.outcomes-grid article:hover {
  border-color: rgba(40, 216, 239, 0.6);
  transform: translateY(-3px);
  box-shadow: 0 18px 42px rgba(4, 70, 116, 0.12);
}

.outcomes-grid span {
  font-size: 1.1rem;
  color: var(--brand-800);
  letter-spacing: 0.02em;
}

/* ---- Pillars — huge ghost numbers behind each card ---- */
.pillar {
  position: relative;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.pillar::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: -38px;
  font-size: 9rem;
  font-weight: 800;
  line-height: 1;
  color: rgba(4, 70, 116, 0.06);
  pointer-events: none;
  letter-spacing: -0.04em;
}

.pillar:nth-child(1)::after { content: "01"; }
.pillar:nth-child(2)::after { content: "02"; }
.pillar:nth-child(3)::after { content: "03"; }

.pillar:hover {
  border-color: rgba(40, 216, 239, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(4, 70, 116, 0.1);
}

.pillar-number {
  background: var(--brand-800);
  position: relative;
  overflow: hidden;
}

.pillar-number::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--cyan), transparent);
  opacity: 0.25;
}

/* ---- Managed (black-box) — keep but punch metric panel ---- */
.metric-panel > div,
.pipeline-stages li {
  transition: border-color 200ms ease, background 200ms ease;
}

.metric-panel > div:hover,
.pipeline-stages li:hover {
  border-color: rgba(40, 216, 239, 0.45);
  background: rgba(40, 216, 239, 0.08);
}

/* ---- Fit grid — clear visual contrast between yes/no ---- */
.fit-grid article {
  position: relative;
  overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease;
}

.fit-yes {
  border-color: rgba(40, 216, 239, 0.35) !important;
  background: linear-gradient(160deg, rgba(40, 216, 239, 0.06), var(--paper) 60%) !important;
}

.fit-no {
  border-color: rgba(220, 38, 38, 0.18) !important;
  background: linear-gradient(160deg, rgba(220, 38, 38, 0.04), var(--paper) 60%) !important;
}

.fit-yes h3,
.fit-no h3 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fit-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 800;
}

.fit-icon-yes {
  background: var(--cyan);
  color: var(--navy-950);
}

.fit-icon-no {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
  font-size: 1.1rem;
}

/* Match the bullet colour to the side */
.fit-yes li::before {
  background: var(--cyan);
}

.fit-no li::before {
  background: rgba(220, 38, 38, 0.55);
}

/* ---- FAQ — hover state + open accent ---- */
details {
  transition: border-color 200ms ease, background 200ms ease;
}

details summary {
  position: relative;
  padding: 8px 0 4px;
  transition: color 180ms ease;
}

details summary:hover {
  color: var(--brand-800);
}

details[open] {
  border-bottom-color: rgba(40, 216, 239, 0.6);
}

details[open] summary {
  color: var(--brand-800);
}

details[open] summary::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0.55em;
  width: 6px;
  height: 1.4em;
  background: var(--cyan);
  border-radius: 2px;
}

/* ---- Final CTA — go dark + cyan, much louder ---- */
.final-cta {
  color: var(--paper);
  /* Layers (top → bottom): cyan glow, left-darken overlay, the photo on the
     right, then the navy gradient as fallback if the image doesn't load. */
  background:
    radial-gradient(ellipse at 70% 30%, rgba(40, 216, 239, 0.16), transparent 55%),
    linear-gradient(90deg, rgba(4, 25, 41, 0.94) 0%, rgba(4, 25, 41, 0.72) 45%, rgba(4, 25, 41, 0.3) 75%, rgba(4, 25, 41, 0.08) 100%),
    url("./assets/scott-hero-v2.webp") right center / cover no-repeat,
    linear-gradient(135deg, var(--navy-900), var(--navy-950));
  position: relative;
  overflow: hidden;
}

.final-cta::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-left: 2px solid var(--cyan);
  border-top: 2px solid var(--cyan);
  opacity: 0.55;
}

.final-cta::after {
  content: "";
  position: absolute;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  opacity: 0.55;
}

.final-cta h2 {
  color: var(--paper);
}

.final-cta h2 .accent {
  color: var(--cyan);
}

.final-cta h2 .accent::after {
  background: rgba(40, 216, 239, 0.55);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.9);
}

.final-cta .eyebrow {
  color: var(--cyan);
}

.final-cta .button-primary {
  background: var(--cyan);
  color: var(--navy-950);
  font-size: 1.05rem;
  padding: 18px 28px;
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.55),
    0 22px 60px rgba(40, 216, 239, 0.35);
}

.final-cta .button-primary:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(40, 216, 239, 0.9),
    0 28px 72px rgba(40, 216, 239, 0.55);
}


/* =========================================================
   v3 copy restoration — pillar deliverables, narrative
   sections, responsive 5-card outcomes grid.
   ========================================================= */

/* Outcomes grid: was repeat(4) — now flows responsively to fit 5 items */
.outcomes-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

/* Pillar deliverable bullet lists */
.pillar-deliverables {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.pillar-deliverables li {
  position: relative;
  padding-left: 22px;
  color: var(--muted);
  font-size: 0.96rem;
  line-height: 1.5;
}

.pillar-deliverables li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
}

.pillar-deliverables strong {
  color: var(--ink);
  font-weight: 700;
}

/* Narrative sections (Attendee Engagement, Performance Review, Community) */
.section-narrative {
  background: var(--paper);
}

.section-engagement,
.section-community {
  background: var(--mist-100);
}

/* Dark variant — used for Performance Review section.
   Inverts the colour scheme so the heavy black backdrop of the
   webinar-roast image blends seamlessly with the section, and creates
   a "darker moment" mid-page to break the white → grey → white rhythm. */
.section-review-dark {
  background: linear-gradient(180deg, var(--navy-1000) 0%, var(--navy-950) 60%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, 0.82);
  position: relative;
  overflow: hidden;
}

.section-review-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 140, 60, 0.08), transparent 60%),
    radial-gradient(circle at 18% 30%, rgba(40, 216, 239, 0.06), transparent 55%);
  pointer-events: none;
}

.section-review-dark .section-inner {
  position: relative;
  z-index: 1;
}

.section-review-dark .eyebrow {
  color: var(--cyan);
}

.section-review-dark h2 {
  color: var(--paper);
}

.section-review-dark .narrative-body p {
  color: rgba(255, 255, 255, 0.88);
}

.section-review-dark .narrative-list li {
  color: var(--paper);
}

.section-review-dark .narrative-list li::before {
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(40, 216, 239, 0.6);
}

.section-review-dark .narrative-image img {
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
}

.narrative-body {
  max-width: 760px;
  margin: 24px 0 0;
}

/* Two-column narrative: text left, image right.
   Used for sections like Attendee Engagement where we want a visual
   anchor alongside the body copy. Stacks on narrower screens. */
.narrative-with-image {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-top: 24px;
}

.narrative-with-image .narrative-body {
  margin-top: 0;
}

.narrative-image {
  margin: 0;
  display: block;
}

.narrative-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(4, 25, 41, 0.16);
}

@media (max-width: 880px) {
  .narrative-with-image {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .narrative-image {
    max-width: 480px;
    margin: 0 auto;
  }
}

.narrative-body p {
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.6;
  margin: 0 0 14px;
}

.narrative-body p:last-child {
  margin-bottom: 0;
}

.narrative-list {
  list-style: none;
  margin: 18px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px 28px;
}

.narrative-list li {
  position: relative;
  padding-left: 22px;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.45;
}

.narrative-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-600);
}


/* Hero qualifier — second-line subtitle that holds the "without referrals,
   cold outreach, or expensive agencies" copy without competing with the
   main headline for visual weight. Significantly smaller, lighter weight,
   muted opacity. Scales relative to h1 so it stays proportional across
   viewports. */
.hero-qualifier {
  display: block;
  margin-top: 0.45em;
  font-size: 0.42em;       /* relative to h1 — auto-scales with clamp() */
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: rgba(255, 255, 255, 0.88);
  max-width: 720px;
}


/* =========================================================
   Testimonials — quote band (hero) + standalone cards +
   inline cards inside the pillar list.
   ========================================================= */

/* Standalone testimonial sections (Brett between mechanism + pillars,
   Simon after final CTA). Tight vertical rhythm so they punctuate rather
   than dominate. */
.section-testimonial {
  padding: clamp(44px, 6vw, 80px) clamp(20px, 6vw, 84px);
  background: var(--mist-100);
}

.section-testimonial-closing {
  background: var(--paper);
}

.section-testimonial .section-inner {
  max-width: 860px;
}

/* Testimonial card — used both standalone and inline (inside pillar list) */
.testimonial {
  margin: 0;
  padding: 28px 30px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  display: grid;
  gap: 18px;
  box-shadow: 0 10px 32px rgba(4, 25, 41, 0.05);
}

.testimonial-quote {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.32rem);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-left: 22px;
}

.testimonial-quote::before {
  content: "“";
  position: absolute;
  left: 0;
  top: -0.1em;
  font-size: 2.2em;
  line-height: 1;
  color: var(--cyan);
  font-weight: 800;
  font-family: Georgia, "Times New Roman", serif;
}

.testimonial-attrib {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--line);
}

.testimonial-attrib strong {
  display: block;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.96rem;
}

.testimonial-attrib span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.83rem;
  line-height: 1.35;
}

/* Inline variant — sits inside the pillar list between pillar articles.
   Slightly indented from the left so the visual hierarchy reads:
   pillar (big) → testimonial (smaller, offset) → pillar (big) ... */
.testimonial-inline {
  margin-left: 80px;
  background: linear-gradient(160deg, rgba(40, 216, 239, 0.06), rgba(255, 255, 255, 0.95));
  border-color: rgba(40, 216, 239, 0.25);
}

@media (max-width: 720px) {
  .testimonial-inline {
    margin-left: 0;
  }

  .quote-band {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   About / Team — "Behind the system"
   ============================================ */
.section-about {
  background: var(--paper);
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
  margin-top: 48px;
}

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

.about-founder {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 640px) {
  .about-founder {
    grid-template-columns: 1fr;
  }
}

.about-founder-photo {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(4, 25, 41, 0.12);
}

.about-founder h3 {
  margin: 0 0 14px;
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-founder p {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.6;
}

.about-founder p:last-child {
  margin-bottom: 0;
}

.about-placeholder-note {
  font-size: 0.8rem;
  color: var(--cyan);
  background: rgba(40, 216, 239, 0.08);
  border-left: 3px solid var(--cyan);
  padding: 10px 14px;
  border-radius: 4px;
  font-style: italic;
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.team-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: start;
  gap: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 6px 18px rgba(4, 25, 41, 0.04);
}

.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--line);
  display: block;
}

.team-avatar-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--brand-800), var(--cyan));
  color: var(--paper);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.02em;
}

.team-card-body {
  min-width: 0;
}

.team-card h4 {
  margin: 0 0 4px;
  font-size: 1.02rem;
  color: var(--ink);
  font-weight: 700;
}

.team-card h4 a {
  color: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.team-card h4 a:hover {
  color: var(--brand-800);
  border-bottom-color: var(--cyan);
}

.team-role {
  margin: 0 0 8px;
  color: var(--brand-800);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.team-bio {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ============================================
   As featured in — industry credentials strip
   ============================================ */
.section-featured {
  background: var(--mist-100);
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(48px, 6vw, 80px);
}

.featured-heading {
  text-align: center;
  margin: 0 auto 40px;
  max-width: 820px;
}

.featured-heading .eyebrow {
  display: block;
}

.featured-heading h2 {
  margin: 0 auto;
  max-width: 32ch;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 40px;
  align-items: center;
  justify-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

@media (max-width: 880px) {
  .featured-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 28px;
  }
}

@media (max-width: 560px) {
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

.featured-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64px;
  padding: 4px 8px;
}

.featured-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.62;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.featured-logo:hover img,
.featured-logo:focus-within img {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.04);
}


.section-investment {
  background: linear-gradient(180deg, var(--mist-100) 0%, var(--paper) 100%);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 10px 32px rgba(4, 25, 41, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(4, 25, 41, 0.1);
}

.pricing-card-featured {
  border: 2px solid var(--cyan);
  background: linear-gradient(180deg, var(--paper) 0%, rgba(40, 216, 239, 0.04) 100%);
  box-shadow: 0 14px 44px rgba(40, 216, 239, 0.18);
}

.pricing-card-featured::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--cyan), var(--brand-600));
  z-index: -1;
  opacity: 0.4;
  filter: blur(20px);
}

.pricing-card-tag {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 18px;
  padding: 5px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-800);
  background: rgba(40, 216, 239, 0.12);
  border-radius: 999px;
}

.pricing-card-featured .pricing-card-tag {
  color: var(--paper);
  background: var(--cyan);
}

.pricing-card-name {
  margin: 0 0 18px;
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.pricing-card-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.pricing-card-price-prefix {
  flex-basis: 100%;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.pricing-card-amount {
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.025em;
  line-height: 1;
}

.pricing-card-period {
  font-size: 0.95rem;
  color: var(--muted);
  font-weight: 500;
}

.pricing-card-desc {
  margin: 0 0 22px;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.96rem;
}

.pricing-card-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  gap: 11px;
  flex: 1;
}

.pricing-card-features li {
  position: relative;
  padding-left: 26px;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

.pricing-card-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--cyan);
  background-image: linear-gradient(135deg, var(--cyan), #1ab8d0);
  box-shadow: 0 2px 6px rgba(40, 216, 239, 0.4);
}

.pricing-card-features li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--paper);
  border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}

.pricing-card-cta {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}

/* Guarantee callout */
.guarantee {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--navy-900), var(--brand-800));
  color: var(--paper);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(4, 25, 41, 0.2);
}

.guarantee-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(40, 216, 239, 0.18);
  color: var(--cyan);
}

.guarantee strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
  color: var(--paper);
}

.guarantee p {
  margin: 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

@media (max-width: 560px) {
  .guarantee {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   Site footer
   ============================================ */
.site-footer {
  background: var(--navy-950);
  color: rgba(255, 255, 255, 0.78);
  padding: 64px clamp(20px, 4vw, 56px) 28px;
  margin-top: 0;
}

.site-footer-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.4fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 940px) {
  .site-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 560px) {
  .site-footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.site-footer-brand p {
  margin: 16px 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  max-width: 32ch;
}

.site-footer-logo {
  height: 36px;
  width: auto;
  display: block;
}

.site-footer h4 {
  margin: 0 0 14px;
  color: var(--paper);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.site-footer-contact p,
.site-footer-nav p,
.site-footer-legal p {
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.site-footer-contact a,
.site-footer-nav a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.2s ease;
}

.site-footer-contact a:hover,
.site-footer-nav a:hover {
  color: var(--cyan);
}

.site-footer-legal p {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.55);
}

.site-footer-bottom {
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.52);
}

.site-footer-bottom p {
  margin: 0;
}

.site-footer-links a {
  color: rgba(255, 255, 255, 0.62);
  transition: color 0.2s ease;
}

.site-footer-links a:hover {
  color: var(--cyan);
}

.site-footer-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.site-footer-disabled:hover {
  color: rgba(255, 255, 255, 0.62) !important;
}