:root {
      --header-height: 92px;
      --floating-cta-safe-area: 120px;
      --cta-base-bottom: 16px;
      --cta-lift: 0px;
      --cta-lift-buffer: 72px;
      --cta-lift-buffer-mobile: 88px;
      --bg: #050816;
      --bg-soft: #080c1f;
      --bg-soft-alt: #0e1326;
      --card: #0b1024;
      --card-soft: #11172e;
      --accent1: #47c0ff;
      --accent2: #a268ff;
      --accent3: #4de2c2;
      --text: #f7f9ff;
      --muted: #a0a8c5;
      --border-subtle: rgba(255,255,255,0.06);
      --radius-lg: 24px;
      --radius-xl: 32px;
      --shadow-soft: 0 18px 45px rgba(0,0,0,0.6);
      --shadow-subtle: 0 10px 28px rgba(0,0,0,0.45);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", sans-serif;
      background: radial-gradient(circle at 0% 0%, #1f1552 0, #050816 45%, #02030b 100%);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
    }

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

          .page {
            min-height: 100vh;
            color: var(--text);
          }

          .container {
            width: 100%;
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 20px;
          }

          /* Header / nav */

          header {
            /* Make header fixed so it remains visible while scrolling */
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 900; /* below overlay (1000+) but above page content */
            backdrop-filter: blur(22px);
            background: radial-gradient(circle at top left, rgba(117,92,255,0.18), transparent 55%),
              rgba(5,8,22,0.92);
            border-bottom: 1px solid rgba(255,255,255,0.04);
          }

          .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 20px;
            max-width: 1120px;
            margin: 0 auto;
          }

          /* Ensure main content does not sit beneath the fixed header */
          main {
            padding-top: var(--header-height);
          }

          /*
           * Anchor-offset helpers
           * Ensure in-page hash navigation places targets below the fixed header.
           * Uses the global --header-height plus a small buffer so headings are not
           * visually cramped under the header.
           */
          html {
            scroll-padding-top: calc(var(--header-height) + 12px);
          }

          /* Give any element that can be targeted by an anchor a safe offset
             as a fallback (section elements are the primary targets here). */
          section[id],
          [id] {
            scroll-margin-top: calc(var(--header-height) + 12px);
          }

          .brand {
            display: flex;
            align-items: center;
            gap: 12px;
          }

          .brand-logo {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 0%, #ffffff 0, #9ee7ff 30%, #497cff 55%, #6123ff 90%);
            box-shadow: 0 0 24px rgba(80,140,255,0.6);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            letter-spacing: 0.08em;
            color: #020309;
          }

          .brand-text {
            display: flex;
            flex-direction: column;
            gap: 2px;
            min-width: 0;
          }

          /* Header layout: reserve space for right-side controls and keep hamburger visible
             - Ensure brand can shrink without pushing controls off-screen
             - Add padding around the logo so it is not visually cut off
             - Allow title/tagline to wrap on narrow screens (no ellipsis)
          */

          .header-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
          }

          .header-inner .brand {
            flex: 1 1 auto;
            min-width: 0;
            display: flex;
            align-items: center;
            gap: 12px;
          }

          /* Right-side controls container (CTA + hamburger). Use a stable class for clarity. */
          .header-controls {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 84px; /* reserve space so controls never collapse */
          }



          .brand-logo {
            box-sizing: border-box;
            width: 64px;
            height: 64px;
            padding: 8px; /* breathing room so the icon doesn't look clipped */
            border-radius: 999px;
            flex: 0 0 auto;
            background: transparent; /* remove colored ring/background */
            box-shadow: none; /* remove glow/ring */
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }

          .brand-logo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: contain; /* avoid cropping the icon */
            border-radius: 999px;
            background: transparent;
          }

          .brand-text {
            min-width: 0;
            overflow: visible;
          }

          .brand-title,
          .brand-tagline {
            white-space: normal; /* allow wrapping */
            overflow: visible;
            text-overflow: clip;
            overflow-wrap: anywhere;
          }

          .menu-toggle {
            flex: 0 0 auto; /* prevent the button from shrinking */
          }

          /* Mobile tweaks: tighten reserved space so brand can use remaining width */
          @media (max-width: 420px) {
            .brand {
              max-width: calc(100% - 96px);
            }
            .header-controls {
              min-width: 72px;
            }
          }

          @media (max-width: 360px) {
            .brand {
              max-width: calc(100% - 84px);
            }
          }

          .brand-title {
            font-size: 13px;
            color: var(--text);
            -webkit-font-smoothing: antialiased;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            word-break: break-word;
          }

          .primary-cta span.icon {
            font-size: 14px;
          }

          .menu-toggle span {
            font-size: 19px;
            line-height: 1;
          }

          /* Drawer-style overlay nav: right-side panel instead of full-screen takeover */
          nav.overlay-nav {
            position: fixed;
            top: 0;
            right: 0;
            height: 100%;
            /* Default: use a responsive width but cap on desktop */
            width: min(75vw, 360px);
            max-width: 360px;
            background: radial-gradient(circle at top left, rgba(89,132,255,0.08), transparent 55%),
              rgba(4,7,22,0.98);
            backdrop-filter: blur(20px);
            z-index: 1001;
            transform: translateX(100%);
            pointer-events: none;
            transition: transform 240ms ease, opacity 200ms ease;
            box-shadow: -18px 0 36px rgba(0,0,0,0.55);
            border-left: 1px solid rgba(255,255,255,0.04);
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
            overflow: hidden;
          }

          nav.overlay-nav.open {
            transform: translateX(0);
            pointer-events: auto;
          }

          /* Backdrop sits behind the panel and closes the menu when clicked */
          .overlay-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            z-index: 1000;
            opacity: 0;
            pointer-events: none;
            transition: opacity 200ms ease;
          }

          .overlay-backdrop.open {
            opacity: 1;
            pointer-events: auto;
          }

          .overlay-nav-inner {
            /* panel content wrapper inside the right-side drawer */
            width: 100%;
            height: 100%;
            padding: 16px 14px; /* reduced padding for a nav-like feel */
            display: flex;
            flex-direction: column;
            gap: 12px;
            overflow-y: auto;
            align-items: stretch;
            justify-content: flex-start;
          }

          /* overlay-nav-header and close-btn removed from DOM — no internal header or close button */

          .overlay-nav-links {
            display: grid;
            align-content: flex-start;
            gap: 12px;
            font-size: 16px;
          }

          /* Mobile tuning: ensure panel feels like a side-drawer not full-screen */
          @media (max-width: 420px) {
            nav.overlay-nav {
              width: 72vw;
              max-width: 90vw;
              border-top-left-radius: 12px;
              border-bottom-left-radius: 12px;
            }
            .overlay-nav-inner {
              padding: 14px 12px;
              gap: 10px;
            }
          }

          .overlay-nav-links a {
            padding: 9px 4px;
            border-bottom: 1px solid rgba(255,255,255,0.04);
            color: var(--muted);
            display: flex;
            align-items: center;
          }

          .overlay-nav-links a span.label {
            color: var(--text);
            font-weight: 500;
          }

          /* Active page state in navigation */
          .overlay-nav-links a.active {
            opacity: 1;
          }

          .overlay-nav-links a.active span.label {
            text-decoration: underline;
            font-weight: 600;
            color: var(--text);
          }

          /* Blue arrow indicator for active page */
          .overlay-nav-links a .active-indicator {
            display: inline-block;
            width: 14px;
            height: 14px;
            border-right: 3px solid var(--accent1);
            border-bottom: 3px solid var(--accent1);
            transform: rotate(-45deg);
            flex-shrink: 0;
            margin-right: 10px;
            margin-left: 2px;
          }

          .overlay-nav-links a:last-child {
            border-bottom: none;
          }

          /* Hero */

          main {
            padding-bottom: 0;
          }

          body {
            padding-bottom: 0;
          }

          section {
            padding: 40px 0;
          }

          .hero {
            padding-top: 26px;
            padding-bottom: 16px;
          }

          .hero-inner {
            max-width: 1120px;
            margin: 0 auto;
            padding: 0 20px;
          }

          .eyebrow {
            font-size: 12px;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--accent1);
            margin-bottom: 18px;
          }

          .hero-heading {
            font-size: clamp(32px, 4vw, 46px);
            line-height: 1.05;
            font-weight: 800;
            margin-bottom: 12px;
          }

          .hero-heading span.accent {
            display: inline;
            color: var(--accent2);
          }

          .hero-subheading {
            font-size: 18px;
            font-weight: 600;
            color: #d7dcff;
            margin-bottom: 14px;
          }

          .hero-body {
            max-width: 560px;
            font-size: 15px;
            color: var(--muted);
            margin-bottom: 24px;
          }

          .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center;
            margin-bottom: 16px;
          }

          .secondary-link {
            border-radius: 999px;
            padding: 9px 18px;
            border: 1px solid rgba(255,255,255,0.18);
            background: radial-gradient(circle at 0 0, rgba(100,149,255,0.25), transparent 60%),
              rgba(7,11,32,0.96);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 13px;
            color: var(--muted);
          }

          .hero-footnote {
            font-size: 12px;
            color: var(--muted);
            margin-top: 8px;
          }

          /* What I actually do + mini intro */

          .top-layout {
            display: grid;
            grid-template-columns: minmax(0, 3fr) minmax(0, 2.5fr);
            gap: 24px;
            margin-top: 30px;
          }

          .card {
            background: radial-gradient(circle at top left, rgba(122,84,255,0.22), transparent 60%),
              var(--card);
            border-radius: var(--radius-xl);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            padding: 24px 22px 22px;
            position: relative;
            overflow: hidden;
          }

          .card::before {
            content: "";
            position: absolute;
            inset: -40%;
            opacity: 0.35;
            background:
              radial-gradient(circle at 0 0, rgba(85,232,255,0.16), transparent 55%),
              radial-gradient(circle at 120% 0, rgba(170,108,255,0.3), transparent 55%);
            mix-blend-mode: screen;
            pointer-events: none;
          }

          .card > * {
            position: relative;
            z-index: 1;
          }

          .card-title-eyebrow {
            font-size: 12px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--muted);
            margin-bottom: 8px;
          }

          .card-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 12px;
          }

          .card-body {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.6;
          }

          .tag-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 18px;
          }

          .pill {
            font-size: 12px;
            padding: 6px 11px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.16);
            background: rgba(4,9,32,0.82);
            color: var(--muted);
            white-space: nowrap;
          }

          .mini-intro {
            display: flex;
            flex-direction: column;
            gap: 16px;
            background: linear-gradient(135deg, rgba(45,68,172,0.9), rgba(109,63,189,0.98));
            border-radius: var(--radius-xl);
            padding: 20px 18px;
            box-shadow: var(--shadow-soft);
            position: relative;
            overflow: hidden;
          }

          .mini-intro::before {
            content: "";
            position: absolute;
            inset: -40%;
            background:
              radial-gradient(circle at 0 0, rgba(255,255,255,0.25), transparent 55%),
              radial-gradient(circle at 130% 0, rgba(3,239,210,0.3), transparent 55%);
            opacity: 0.3;
            pointer-events: none;
          }

          .mini-intro-content {
            position: relative;
            display: flex;
            gap: 14px;
            align-items: center;
            z-index: 1;
          }

          .mini-intro-photo {
            flex-shrink: 0;
            width: 165px;
            height: 165px;
            border-radius: 999px;
            border: 2px solid rgba(255,255,255,0.85);
            overflow: hidden;
            box-shadow: 0 14px 32px rgba(0,0,0,0.75);
          }

          .mini-intro-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transform: translateY(0);
          }

          .mini-intro-text {
            flex: 1;
            min-width:0;
          }

          .mini-intro-label {
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: rgba(255,255,255,0.72);
            margin-bottom: 4px;
          }

          .mini-intro-heading {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 4px;
          }

          .mini-intro-body {
            font-size: 13px;
            color: rgba(237,241,255,0.9);
            line-height: 1.6;
          }

          .mini-intro-link {
            position: relative;
            margin-top: 10px;
            font-size: 12px;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: #f7f9ff;
            text-decoration: none;
          }

          .mini-intro-link .link-text {
            text-decoration: underline;
          }

          .mini-intro-link span.icon {
            font-size: 13px;
            text-decoration: none;
          }

          /* Mini-intro responsive: stack layout for very small screens */
          @media (max-width: 399px) {
            .mini-intro-content {
              flex-direction: column;
              align-items: center;
              text-align: center;
              gap: 16px;
            }

            .mini-intro-photo {
              width: 240px;
              height: 240px;
            }

            .mini-intro-text {
              width: 100%;
            }

            .mini-intro-label {
              font-size: 12px;
              margin-bottom: 6px;
            }

            .mini-intro-heading {
              font-size: 18px;
              margin-bottom: 8px;
            }

            .mini-intro-body {
              font-size: 14px;
              line-height: 1.7;
            }

            .mini-intro-link {
              justify-content: center;
              margin-top: 14px;
            }
          }

          /* Section titles */

          .section-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 16px;
            margin-bottom: 18px;
          }

          .section-title-group {
            display: flex;
            flex-direction: column;
            gap: 4px;
          }

          .section-eyebrow {
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent1);
          }

          .section-title {
            font-size: 20px;
            font-weight: 700;
          }

          .section-subtitle {
            font-size: 13px;
            color: var(--muted);
            max-width: 420px;
          }

          /* Why, services, who we help etc */

          .segment {
            padding: 32px 0;
          }

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

          .info-bubble {
            border-radius: var(--radius-lg);
            padding: 18px 16px 16px;
            background: radial-gradient(circle at top, rgba(120,184,255,0.25), transparent 65%),
              var(--bg-soft);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-subtle);
          }

          .info-bubble-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
          }

          .info-bubble-body {
            font-size: 13px;
            color: var(--muted);
          }

          .services-grid {
            display: flex;
            flex-direction: column;
            gap: 18px;
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
          }

          .service-card {
            border-radius: var(--radius-lg);
            padding: 18px 16px 16px;
            background: radial-gradient(circle at top left, rgba(148,98,255,0.36), transparent 60%),
              var(--bg-soft-alt);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-subtle);
            position: relative;
          }

          .service-number {
            width: 26px;
            height: 26px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 0, #ffffff, var(--accent1));
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 13px;
            font-weight: 700;
            color: #061021;
            margin-bottom: 10px;
          }

          .service-header-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 6px;
          }

          .service-title {
            font-size: 15px;
            font-weight: 600;
            color: #ffffff;
          }

          .service-price {
            font-size: 13px;
            font-weight: 600;
            color: var(--accent3);
            white-space: nowrap;
          }

          .service-body {
            font-size: 13px;
            color: var(--muted);
            margin-bottom: 10px;
          }

          .service-meta {
            font-size: 12px;
            color: rgba(206,214,255,0.9);
          }

          .service-meta strong {
            font-weight: 600;
          }

          .upgrade-note {
            max-width: 500px;
            width: 100%;
            margin: 14px auto 0;
            font-size: 12px;
            color: var(--muted);
            background: rgba(6,16,40,0.9);
            border-radius: 16px;
            padding: 10px 12px;
            border: 1px dashed rgba(116,155,255,0.7);
          }

          .badge-inline {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 11px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--accent1);
          }

          .badge-inline::before {
            content: "⬆";
            font-size: 11px;
          }

          /* Who we help */

          .who-layout {
            display: grid;
            grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr);
            gap: 20px;
            align-items: center;
          }

          .who-layout > :last-child {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }

          .who-card {
            border-radius: var(--radius-lg);
            padding: 18px 16px 16px;
            background: var(--bg-soft-alt);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-subtle);
          }

          .who-card-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
          }

          .who-card-body {
            font-size: 13px;
            color: var(--muted);
          }

          .who-note {
            border-radius: var(--radius-lg);
            padding: 18px 16px 16px;
            background: radial-gradient(circle at top, rgba(74,210,190,0.26), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            font-size: 13px;
            color: var(--muted);
          }

          .who-note strong {
            color: #e7ecff;
          }

          /* Process */

          .process-flow {
            border-radius: var(--radius-xl);
            padding: 20px 18px 18px;
            background: radial-gradient(circle at top left, rgba(140,192,255,0.3), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
          }

          .process-steps {
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 14px;
            margin-top: 10px;
          }

          .process-steps .process-step {
            border-radius: 16px;
            padding: 12px 11px 11px;
            background: rgba(4,10,32,0.94);
            border: 1px solid rgba(255,255,255,0.06);
            font-size: 12px;
            color: var(--muted);
            position: relative;
          }

          .process-step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            border-radius: 999px;
            background: radial-gradient(circle at 30% 0, #ffffff, var(--accent1));
            color: #050816;
            font-size: 11px;
            font-weight: 700;
            margin-bottom: 4px;
          }

          .process-step-title {
            font-weight: 600;
            color: #e9ecff;
            margin-bottom: 4px;
          }

          /* Subtle step labels above titles */
          .process-step-label {
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--accent1);
            margin-bottom: 4px;
          }

          .process-caption {
            margin-top: 10px;
            font-size: 12px;
            color: var(--muted);
          }

          /* Mobile stepper controls - hidden on desktop */
          .process-stepper-controls {
            display: none;
          }

          /* Intro text spacing - add breathing room before card stack */
          .process-flow > div:first-child {
            margin-bottom: 20px;
          }

          /* Scenarios */

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

          .scenario-card {
            border-radius: var(--radius-lg);
            padding: 16px 14px 14px;
            background: var(--bg-soft);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-subtle);
            font-size: 13px;
            color: var(--muted);
          }

          .scenario-title {
            font-weight: 600;
            margin-bottom: 6px;
            color: #e5e8ff;
          }

          /* FAQ */

          /* FAQ layout: use .faq-list as the primary container for accordion rows. */
          .faq-grid { display: block; }

          /* Content rail utility - single column at 500px max-width */
          .content-rail {
            max-width: 500px;
            width: 100%;
            margin: 0 auto;
          }

          .faq-list {
            display: flex;
            flex-direction: column;
            gap: 12px;
            width: 100%;
            max-width: 500px;
            margin: 0;
            padding: 0 16px;
          }

          /* FAQ row layout: chevron fixed slot + left-aligned text */
          .faq-toggle {
            display: flex;
            align-items: center;
            gap: 0;
            text-align: left;
          }

          .faq-toggle .chevron {
            flex: 0 0 16px; /* fixed left slot for comfortable spacing */
            margin-right: px;
          }

          .faq-question {
            flex: 1;
            text-align: left;
          }
/* FAQ question text size */
.faq-toggle .faq-question {
  font-size: 14px;
}

          .faq-item {
            border-radius: 12px;
            padding: 6px 12px;
            background: linear-gradient(180deg, rgba(15,18,34,0.56), rgba(6,9,20,0.64));
            border: 1px solid var(--border-subtle);
            margin-bottom: 12px;
            font-size: 15px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.35);
            overflow: hidden; /* prevent icon bleed outside rounded card */
          }

          /* Question row is a button (left aligned) with a chevron at the right */
          .faq-toggle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: transparent;
            border: none;
            padding: 4px 0;
            font-weight: 600;
            color: var(--text);
            text-align: left;
            cursor: pointer;
          }

          .faq-toggle::after {
            content: '\25B6'; /* small triangle */
            display: inline-block;
            transform: rotate(0deg);
            transition: transform 200ms ease;
            color: var(--muted);
            font-size: 14px;
            margin-left: 12px;
            flex: 0 0 auto;
          }

          .faq-item.open .faq-toggle::after {
            transform: rotate(90deg);
          }

          /* Answer text: slightly smaller and softer than the question */
          .faq-answer,
          .faq-a {
            color: var(--muted);
            font-size: 14px;
            line-height: 1.7;
            padding-top: 10px;
          }

          /* Smooth open/close: collapse via max-height when not open */
          .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 240ms ease, padding 180ms ease;
            padding-bottom: 0;
          }

          .faq-item.open .faq-answer {
            max-height: 1000px;
            padding-bottom: 12px;
          }

          .faq-note {
            font-size: 12px;
            color: var(--muted);
            border-radius: 16px;
            padding: 10px 12px;
            background: var(--bg-soft);
            border: 1px dashed rgba(255,255,255,0.12);
          }

          /* Ensure the FAQ section has extra bottom padding so the floating CTA doesn't cover the last item on mobile */
          section#faq {
            padding-bottom: 140px;
          }

          /* Remove extra padding when FAQ is followed by another section (e.g., on faqs.html) */
          section#faq:not(:last-child) {
            padding-bottom: 40px;
          }

          /* Mobile-specific adjustments */
          @media (max-width: 640px) {
            section#faq { padding-bottom: 160px; }
            section#faq:not(:last-child) { padding-bottom: 40px; }
          }

          /* Floating callout styling for FAQ follow-up note */
          .faq-callout {
            max-width: 500px;
            width: 100%;
            margin: 18px auto 0;
            padding: 16px 18px;
            border-radius: 18px;
            background: radial-gradient(circle at 0 0, rgba(120,190,255,0.06), transparent 40%), rgba(6,9,20,0.78);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            color: var(--muted);
            font-size: 14px;
            line-height: 1.6;
          }

          @media (max-width: 640px) {
            .faq-callout { padding: 14px 14px; margin-top: 20px; }
            section#faq { padding-bottom: 180px; }
            section#faq:not(:last-child) { padding-bottom: 40px; }
          }

          /* Page-scoped override: remove extra FAQ padding on faqs.html where Scenarios follows */
          .page-faqs section#faq {
            padding-bottom: 40px !important;
          }

          /* Make links inside FAQ answers and the FAQ callout visibly styled */
          .faq-list .faq-answer a,
          .faq-callout a {
            color: var(--accent1);
            text-decoration: underline;
            text-underline-offset: 3px;
          }

          .faq-list .faq-answer a:hover,
          .faq-callout a:hover {
            color: var(--accent2);
          }

          /* Google Form embed styling */
          /* Desktop: Show embedded iframe */
          .contact-form-desktop {
            display: block;
          }

          /* Mobile: Hide by default */
          .contact-form-mobile {
            display: none;
          }

          .google-form-embed {
            border-radius: 18px;
            overflow: hidden;
            background: linear-gradient(180deg, rgba(15,18,34,0.56), rgba(6,9,20,0.64));
            border: 1px solid var(--border-subtle);
            box-shadow: 0 8px 28px rgba(0,0,0,0.45);
            padding: 0;
          }

          .google-form-embed iframe {
            display: block;
            width: 100%;
            border: none;
            height: 1100px;
          }

          .form-fallback {
            padding: 16px;
            text-align: center;
            background: rgba(6,9,20,0.64);
            border-top: 1px solid var(--border-subtle);
          }

          /* Mobile form button container */
          .mobile-form-message {
            font-size: 14px;
            color: var(--muted);
            text-align: center;
            margin-bottom: 16px;
            line-height: 1.5;
          }

          .contact-form-mobile {
            border-radius: 18px;
            padding: 40px 20px;
            background: radial-gradient(circle at top left, rgba(145,214,255,0.32), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            text-align: center;
          }

          .contact-form-mobile .primary-cta {
            display: inline-flex;
          }

          @media (max-width: 640px) {
            /* Hide desktop iframe on mobile */
            .contact-form-desktop {
              display: none;
            }

            /* Show mobile button on mobile */
            .contact-form-mobile {
              display: block;
            }

            .contact-form-mobile .primary-cta {
              width: 100%;
              justify-content: center;
            }

            /* Mobile-optimized direct card */
            .contact-direct-card {
              gap: 14px;
              margin: 20px 0;
              padding: 18px;
              border-radius: 14px;
            }

            .contact-direct-avatar {
              width: 60px;
              height: 60px;
            }

            .contact-direct-text {
              font-size: 13px;
              line-height: 1.6;
            }
          }

          /* About */

          /* ABOUT PAGE STYLES */

          /* Hero section: 2-column layout with image left, text right */
          .about-hero {
            display: grid;
            grid-template-columns: minmax(280px, 360px) 1fr;
            gap: 40px;
            align-items: start;
            margin-bottom: 48px;
            max-width: 1100px;
            margin-left: auto;
            margin-right: auto;
          }

          .about-hero-media {
            border-radius: 18px;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.9);
            box-shadow: 0 12px 30px rgba(0,0,0,0.75);
            aspect-ratio: 4 / 5;
            background: rgba(8,12,28,0.6);
            width: 100%;
            max-width: 360px;
          }

          .about-hero-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .about-hero-content {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding-top: 8px;
            max-width: 620px;
          }

          .about-hero-title {
            font-size: 28px;
            font-weight: 700;
            line-height: 1.3;
            color: var(--text);
            margin: 0;
          }

          .about-hero-intro {
            font-size: 14px;
            color: var(--muted);
            line-height: 1.7;
            margin: 0;
          }

          /* Identity module integrated into hero */
          .about-identity {
            padding-top: 12px;
          }

          .about-identity-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
          }

          .about-identity-title {
            font-size: 13px;
            color: var(--accent1);
            margin-bottom: 12px;
          }

          .about-identity-bullets {
            display: flex;
            flex-direction: column;
            gap: 6px;
          }

          .about-identity-bullets .bullet {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.5;
          }

          /* Legacy profile card styles (kept for backwards compatibility if needed) */
          .about-profile-card {
            border-radius: 18px;
            padding: 24px 20px;
            background: radial-gradient(circle at top left, rgba(145,214,255,0.32), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            margin-bottom: 48px;
            display: none;
          }

          .about-profile-info {
            text-align: center;
            width: 100%;
          }

          .about-profile-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 4px;
          }

          .about-profile-title {
            font-size: 13px;
            color: var(--accent1);
            margin-bottom: 12px;
          }

          .about-profile-bullets {
            display: flex;
            flex-direction: column;
            gap: 8px;
          }

          .about-profile-bullets .bullet {
            font-size: 12px;
            color: var(--muted);
            line-height: 1.5;
          }

          /* Story section with accordion */
          .about-story {
            margin-bottom: 48px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
          }

          .about-story-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--text);
            margin: 0 0 20px;
          }

          .about-accordion-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
          }

          .about-accordion {
            border-radius: 12px;
            border: 1px solid var(--border-subtle);
            background: rgba(255,255,255,0.02);
            overflow: hidden;
          }

          .about-accordion summary {
            display: flex;
            align-items: center;
            padding: 16px;
            cursor: pointer;
            user-select: none;
            font-size: 14px;
            font-weight: 600;
            color: var(--text);
            transition: background-color 0.2s ease;
            list-style: none;
            gap: 12px;
          }

          .about-accordion summary:hover {
            background-color: rgba(255,255,255,0.04);
          }

          .about-accordion summary::marker {
            display: none;
          }

          .about-accordion summary::before {
            content: '';
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-right: 2px solid var(--accent1);
            border-bottom: 2px solid var(--accent1);
            transform: rotate(-45deg);
            flex-shrink: 0;
            transition: transform 0.2s ease;
          }

          .about-accordion[open] summary::before {
            transform: rotate(45deg);
          }

          .about-accordion-body {
            padding: 0 16px 16px 44px;
            border-top: 1px solid rgba(255,255,255,0.06);
            background: rgba(15,18,34,0.3);
          }

          .about-accordion-body p {
            margin: 0;
            font-size: 13px;
            color: var(--muted);
            line-height: 1.7;
          }

          /* Credibility cards */
          .about-credibility {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-bottom: 48px;
          }

          .about-cred-card {
            border-radius: 14px;
            padding: 20px;
            background: radial-gradient(circle at top left, rgba(145,214,255,0.24), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
            display: flex;
            align-items: center;
            gap: 12px;
          }

          .about-cred-icon {
            font-size: 18px;
            color: var(--accent1);
            flex-shrink: 0;
          }

          .about-cred-text {
            font-size: 13px;
            color: var(--muted);
            line-height: 1.5;
            font-weight: 500;
          }



          /* Contact */

          .contact-hero {
            margin-bottom: 24px;
            font-size: 14px;
            color: var(--muted);
            line-height: 1.6;
            max-width: 720px;
          }

          .contact-intro-text {
            margin-bottom: 16px;
          }

          .contact-intro-title {
            font-size: 18px;
            font-weight: 700;
            color: var(--text);
            margin-bottom: 8px;
          }

          .contact-hero p {
            margin: 0 0 12px;
          }

          /* Inline text links in contact section */
          .contact-hero a.text-link {
            color: var(--accent1);
            text-decoration: underline;
            text-underline-offset: 3px;
          }

          .contact-hero a.text-link:hover {
            color: var(--accent2);
          }

          /* Premium card with direct message and larger avatar */
          .contact-direct-card {
            display: flex;
            align-items: center;
            gap: 16px;
            margin: 24px 0;
            padding: 20px;
            border-radius: 16px;
            background: radial-gradient(circle at top left, rgba(145,214,255,0.28), transparent 65%),
              var(--card);
            border: 1px solid var(--border-subtle);
            box-shadow: var(--shadow-soft);
          }

          .contact-direct-avatar {
            width: 68px;
            height: 68px;
            border-radius: 999px;
            overflow: hidden;
            border: 2px solid rgba(255,255,255,0.9);
            box-shadow: 0 12px 30px rgba(0,0,0,0.75);
            flex-shrink: 0;
          }

          .contact-direct-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
          }

          .contact-direct-text {
            font-size: 14px;
            color: rgba(230,235,255,0.95);
            line-height: 1.6;
          }

          .contact-form-area {
            max-width: 1100px;
            margin: 0 auto;
          }

          form.contact-form {
            display: grid;
            gap: 10px;
            font-size: 13px;
          }

          .field {
            display: flex;
            flex-direction: column;
            gap: 4px;
          }

          .field label {
            font-size: 12px;
            color: #d7dcff;
          }

          .field input,
          .field textarea,
          .field select {
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(3,6,20,0.96);
            padding: 9px 10px;
            color: var(--text);
            font-family: inherit;
            font-size: 13px;
            resize: vertical;
            min-height: 0;
          }

          .field textarea {
            min-height: 72px;
          }

          .contact-actions {
            display: flex;
            justify-content: flex-start;
            gap: 10px;
            margin-top: 4px;
          }

          .ghost-button {
            border-radius: 999px;
            padding: 9px 17px;
            border: 1px solid rgba(255,255,255,0.25);
            background: rgba(8,11,32,0.98);
            color: var(--text);
            font-size: 13px;
            cursor: pointer;
          }

          /* CTA landing zone buffer above footer */
          .footer-cta-buffer {
            height: var(--cta-lift-buffer);
          }

          footer {
            padding: 24px 20px 18px;
            font-size: 11px;
            color: var(--muted);
            text-align: center;
            border-top: 1px solid rgba(255,255,255,0.06);
            background: radial-gradient(circle at top, rgba(99,124,255,0.25), transparent 65%),
              #050816;
          }

          /* Responsive */

          @media (max-width: 900px) {
            .header-inner {
              padding-inline: 16px;
            }

            /* Hide only the header's primary CTA on small screens; keep other primary CTAs visible */
            header .primary-cta {
              display: none;
            }

            .menu-toggle {
              display: inline-flex;
            }

            .top-layout {
              grid-template-columns: minmax(0, 1fr);
            }

            .bubble-row {
              grid-template-columns: minmax(0, 1fr);
            }

            .who-layout,
            .faq-grid {
              grid-template-columns: minmax(0, 1fr);
            }


            /* Mobile about page layout */
            .about-hero {
              display: flex;
              flex-direction: column;
              gap: 24px;
              margin-bottom: 36px;
              max-width: 100%;
            }

            .about-hero-content {
              order: 1;
              max-width: 100%;
              gap: 16px;
            }

            .about-hero-media {
              order: 2;
              aspect-ratio: 4 / 5;
              max-width: 320px;
              margin: 0 auto;
            }

            .about-hero-title {
              font-size: 22px;
            }

            .about-identity {
              padding-top: 8px;
              padding: 16px;
              background: rgba(255,255,255,0.02);
              border-radius: 12px;
              border: 1px solid rgba(255,255,255,0.04);
            }

            .about-identity-name {
              font-size: 15px;
            }

            .about-story {
              margin-bottom: 36px;
              max-width: 100%;
            }

            .about-accordion summary {
              padding: 14px;
              font-size: 13px;
            }

            .about-accordion-body {
              padding: 0 14px 14px 40px;
            }

            .about-accordion-body p {
              font-size: 12px;
            }

            .about-story {
              margin-bottom: 36px;
            }

            .about-accordion summary {
              padding: 14px;
              font-size: 13px;
            }

            .about-accordion-body {
              padding: 0 14px 14px;
            }

            .about-accordion-body p {
              font-size: 12px;
            }

            .about-cta-card {
              padding: 20px;
            }

            .about-cta-card p {
              font-size: 13px;
            }

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

            /* Apply mobile stepper on tablet too */
            .process-steps[data-stepper] {
              display: block;
              position: relative;
              min-height: 0;
              height: auto;
              max-width: 560px;
              margin: 0 auto;
            }

            .process-steps[data-stepper] .process-step {
              display: none;
              opacity: 0;
              transition: opacity 240ms ease;
              height: auto;
              min-height: 0;
              padding: 20px 18px;
              font-size: 14px;
              line-height: 1.6;
            }

            .process-steps[data-stepper] .process-step.is-active {
              display: block;
              opacity: 1;
              animation: fadeIn 240ms ease;
            }

            /* Reuse stepper behavior for bubble-row and scenarios-grid */
            .bubble-row[data-stepper],
            .scenarios-grid[data-stepper] {
              display: block;
              position: relative;
              min-height: 0;
              height: auto;
              max-width: 560px;
              margin: 0 auto;
            }

            .bubble-row[data-stepper] .process-step,
            .scenarios-grid[data-stepper] .process-step {
              display: none;
              opacity: 0;
              transition: opacity 240ms ease;
              height: auto;
              min-height: 0;
            }

            .bubble-row[data-stepper] .process-step.is-active,
            .scenarios-grid[data-stepper] .process-step.is-active {
              display: block;
              opacity: 1;
              animation: fadeIn 240ms ease;
            }

            .process-stepper-controls {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 20px;
              margin-top: 18px;
              padding: 0;
              max-width: 560px;
              margin-left: auto;
              margin-right: auto;
            }

            .stepper-btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 40px;
              height: 40px;
              border-radius: 999px;
              border: 1px solid rgba(255,255,255,0.14);
              background: rgba(7,10,30,0.95);
              color: var(--text);
              font-size: 18px;
              cursor: pointer;
              transition: all 160ms ease;
            }

            .stepper-btn:hover {
              background: rgba(71,192,255,0.15);
              border-color: rgba(71,192,255,0.3);
            }

            .stepper-btn:disabled {
              opacity: 0.3;
              cursor: not-allowed;
            }

            .stepper-indicator {
              font-size: 13px;
              color: var(--muted);
              font-weight: 500;
              min-width: 60px;
              text-align: center;
            }

            .stepper-current {
              color: var(--accent1);
              font-weight: 700;
            }

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

            .about-photo-wrap {
              order: -1;
            }
          }

          @media (max-width: 640px) {
            .hero-heading {
              font-size: 30px;
            }

            .contact-card {
              padding-inline: 16px;
            }

            /* Add breathing room at top of sections on mobile */
            .segment {
              padding: 40px 0;
            }

            /* Mobile stepper for process cards */
            .process-flow {
              padding: 20px 16px 18px;
            }

            .process-steps[data-stepper] {
              display: block;
              position: relative;
              min-height: 0;
              height: auto;
              max-width: 520px;
              margin: 0 auto;
            }

            .process-step {
              display: none;
              opacity: 0;
              transition: opacity 240ms ease;
              height: auto;
              min-height: 0;
              padding: 18px 16px;
              font-size: 13px;
              line-height: 1.6;
            }

            .process-step.is-active {
              display: block;
              opacity: 1;
              animation: fadeIn 240ms ease;
            }

            /* Reuse stepper behavior for bubble-row and scenarios-grid on mobile */
            .bubble-row[data-stepper],
            .scenarios-grid[data-stepper],
            .services-grid[data-stepper] {
              display: block;
              position: relative;
              min-height: 0;
              height: auto;
              max-width: 520px;
              margin: 0 auto;
            }

            .bubble-row[data-stepper] .process-step,
            .scenarios-grid[data-stepper] .process-step,
            .services-grid[data-stepper] .process-step {
              display: none;
              opacity: 0;
              transition: opacity 240ms ease;
              height: auto;
              min-height: 0;
              padding: 18px 16px;
              font-size: 13px;
              line-height: 1.6;
            }

            .bubble-row[data-stepper] .process-step.is-active,
            .scenarios-grid[data-stepper] .process-step.is-active,
            .services-grid[data-stepper] .process-step.is-active {
              display: block;
              opacity: 1;
              animation: fadeIn 240ms ease;
            }

            @keyframes fadeIn {
              from { opacity: 0; transform: translateY(8px); }
              to { opacity: 1; transform: translateY(0); }
            }

            .process-stepper-controls {
              max-width: 520px;
            }

            .process-caption {
              margin-top: 16px;
              font-size: 12px;
              line-height: 1.6;
            }
          }

          /* Floating CTA — always visible; lifts up when footer is near */
          .floating-cta {
            position: fixed !important;
            right: 16px !important;
            bottom: calc(var(--cta-base-bottom) + var(--cta-lift)) !important;
            z-index: 9999 !important;
            display: inline-flex !important;
            align-items: center;
            gap: 8px;
            min-height: 44px;
            padding: 10px 16px;
            border-radius: 999px;
            background: linear-gradient(120deg, var(--accent1), var(--accent2));
            color: #050816;
            font-weight: 600;
            font-size: 13px;
            box-shadow: 0 12px 30px rgba(82,144,255,0.75);
            text-decoration: none;
            white-space: nowrap;
            transition: bottom 180ms ease;
          }

          /* Hide the floating CTA while the overlay nav is open */
          body.menu-open .floating-cta {
            display: none !important;
          }

          /* Sentinel element to detect footer proximity */
          .cta-hide-sentinel {
            position: relative;
            width: 100%;
            height: 1px;
          }

          /* Primary CTA: single, clean base (applies to header, hero, other primary CTAs) */
          .primary-cta {
            border-radius: 999px;
            padding: 10px 22px;
            background: linear-gradient(120deg, var(--accent1), var(--accent2));
            color: #050816;
            font-weight: 600;
            font-size: 13px;
            border: none;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 12px 30px rgba(82,144,255,0.75);
            white-space: nowrap;
            text-decoration: none;
          }

          /* Header layout fixes so brand + CTA + menu fit cleanly */
          .header-inner {
            align-items: center;
          }

          .header-inner > .brand {
            flex: 0 0 auto;
            min-width: 0;
          }

          .header-controls {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
          }

          /* Keep menu toggle visible and include core visual styles */
          .menu-toggle,
          #menuToggle {
            display: inline-flex;
            width: 40px;
            height: 40px;
            border-radius: 999px;
            border: 1px solid rgba(255,255,255,0.14);
            background: radial-gradient(circle at 0 0, rgba(163,104,255,0.6), transparent 70%),
              rgba(7,10,30,0.95);
            color: var(--text);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-left: 10px;
            position: relative;
            z-index: 60;
          }

          /* Prevent accidental horizontal overflow */
          html, body {
            max-width: 100%;
            overflow-x: hidden;
          }

          /* Brand image + typography
             - keep the tagline visible on very small screens
             - ensure the brand image fits the circular mark
          */

          .brand-logo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
            border-radius: 999px;
          }

          .brand-title {
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: none;
          }

          .brand-tagline {
            font-size: 12px;
            color: var(--muted);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            display: block;
            white-space: normal;
            overflow: visible;
            text-overflow: clip;
            word-break: break-word;
          }

            /* Section titles */

            .section-header {
              display: flex;
              justify-content: space-between;
              align-items: flex-end;
              gap: 16px;
              margin-bottom: 18px;
            }

            .section-title-group {
              display: flex;
              flex-direction: column;
              gap: 4px;
            }

            .section-eyebrow {
              font-size: 11px;
              letter-spacing: 0.2em;
              text-transform: uppercase;
              color: var(--accent1);
            }

            .section-title {
              font-size: 20px;
              font-weight: 700;
            }

            .section-subtitle {
              font-size: 13px;
              color: var(--muted);
              max-width: 420px;
            }

/* (Removed redundant desktop override; consolidated .menu-toggle earlier) */

            /* Why, services, who we help etc */

            .segment {
              padding: 32px 0;
            }

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

            .info-bubble {
              border-radius: var(--radius-lg);
              padding: 18px 16px 16px;
              background: radial-gradient(circle at top, rgba(120,184,255,0.25), transparent 65%),
                var(--bg-soft);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-subtle);
            }

            .info-bubble-title {
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 6px;
            }

            .info-bubble-body {
              font-size: 13px;
              color: var(--muted);
            }

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

            .service-card {
              border-radius: var(--radius-lg);
              padding: 18px 16px 16px;
              background: radial-gradient(circle at top left, rgba(148,98,255,0.36), transparent 60%),
                var(--bg-soft-alt);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-subtle);
              position: relative;
            }

            .service-number {
              width: 26px;
              height: 26px;
              border-radius: 999px;
              background: radial-gradient(circle at 30% 0, #ffffff, var(--accent1));
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 13px;
              font-weight: 700;
              color: #061021;
              margin-bottom: 10px;
            }

            .service-header-row {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              gap: 12px;
              margin-bottom: 6px;
            }

            .service-title {
              font-size: 15px;
              font-weight: 600;
              color: #ffffff;
            }

            .service-price {
              font-size: 13px;
              font-weight: 600;
              color: var(--accent3);
              white-space: nowrap;
            }

            .service-body {
              font-size: 13px;
              color: var(--muted);
              margin-bottom: 10px;
            }

            .service-meta {
              font-size: 12px;
              color: rgba(206,214,255,0.9);
            }

            .service-meta strong {
              font-weight: 600;
            }

            .upgrade-note {
              margin-top: 14px;
              font-size: 12px;
              color: var(--muted);
              background: rgba(6,16,40,0.9);
              border-radius: 16px;
              padding: 10px 12px;
              border: 1px dashed rgba(116,155,255,0.7);
            }

            .badge-inline {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              font-size: 11px;
              letter-spacing: 0.14em;
              text-transform: uppercase;
              color: var(--accent1);
            }

            .badge-inline::before {
              content: "⬆";
              font-size: 11px;
            }

            /* Who we help */

            .who-layout {
              display: grid;
              grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr);
              gap: 20px;
            }

            .who-card {
              border-radius: var(--radius-lg);
              padding: 18px 16px 16px;
              background: var(--bg-soft-alt);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-subtle);
            }

            .who-card-title {
              font-size: 14px;
              font-weight: 600;
              margin-bottom: 8px;
            }

            .who-card-body {
              font-size: 13px;
              color: var(--muted);
            }

            .who-note {
              border-radius: var(--radius-lg);
              padding: 18px 16px 16px;
              background: radial-gradient(circle at top, rgba(74,210,190,0.26), transparent 65%),
                var(--card);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-soft);
              font-size: 13px;
              color: var(--muted);
            }

            .who-note strong {
              color: #e7ecff;
            }

            /* Process */

            .process-flow {
              border-radius: var(--radius-xl);
              padding: 20px 18px 18px;
              background: radial-gradient(circle at top left, rgba(140,192,255,0.3), transparent 65%),
                var(--card);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-soft);
            }

            .process-steps {
              display: grid;
              grid-template-columns: repeat(4, minmax(0, 1fr));
              gap: 14px;
              margin-top: 10px;
            }

            .process-step {
              border-radius: 16px;
              padding: 12px 11px 11px;
              background: rgba(4,10,32,0.94);
              border: 1px solid rgba(255,255,255,0.06);
              font-size: 12px;
              color: var(--muted);
              position: relative;
            }

            .process-step-number {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 20px;
              height: 20px;
              border-radius: 999px;
              background: radial-gradient(circle at 30% 0, #ffffff, var(--accent1));
              color: #050816;
              font-size: 11px;
              font-weight: 700;
              margin-bottom: 4px;
            }

            .process-step-title {
              font-weight: 600;
              color: #e9ecff;
              margin-bottom: 4px;
            }

            .process-caption {
              margin-top: 10px;
              font-size: 12px;
              color: var(--muted);
            }

            /* Scenarios */

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

            .scenario-card {
              border-radius: var(--radius-lg);
              padding: 16px 14px 14px;
              background: var(--bg-soft);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-subtle);
              font-size: 13px;
              color: var(--muted);
            }

            .scenario-title {
              font-weight: 600;
              margin-bottom: 6px;
              color: #e5e8ff;
            }

            /* FAQ */

            .faq-grid {
              display: grid;
              grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr);
              gap: 22px;
            }

            .faq-item {
              border-radius: 18px;
              padding: 14px 14px 12px;
              background: var(--bg-soft-alt);
              border: 1px solid var(--border-subtle);
              margin-bottom: 10px;
              font-size: 13px;
            }

            .faq-q {
              font-weight: 600;
              margin-bottom: 4px;
            }

            .faq-a {
              color: var(--muted);
            }

            .faq-note {
              font-size: 12px;
              color: var(--muted);
              border-radius: 16px;
              padding: 10px 12px;
              background: var(--bg-soft);
              border: 1px dashed rgba(255,255,255,0.12);
            }

            /* Contact */

            .contact-card {
              border-radius: var(--radius-xl);
              padding: 22px 20px 20px;
              background: radial-gradient(circle at top left, rgba(145,214,255,0.32), transparent 65%),
                var(--card);
              border: 1px solid var(--border-subtle);
              box-shadow: var(--shadow-soft);
              display: grid;
              grid-template-columns: minmax(0, 1.7fr) minmax(0, 2.1fr);
              gap: 20px;
              align-items: center;
            }

            .contact-meta {
              display: flex;
              flex-direction: column;
              gap: 10px;
              font-size: 14px;
              color: var(--muted);
            }

            .contact-title {
              font-size: 18px;
              font-weight: 700;
              margin-bottom: 2px;
            }

            .contact-headshot {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-top: 4px;
            }

            .contact-headshot-img {
              width: 52px;
              height: 52px;
              border-radius: 999px;
              overflow: hidden;
              border: 2px solid rgba(255,255,255,0.9);
              box-shadow: 0 12px 30px rgba(0,0,0,0.75);
              flex-shrink: 0;
            }

            .contact-headshot-img img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .contact-headshot-text {
              font-size: 12px;
              color: rgba(230,235,255,0.9);
            }

            form.contact-form {
              display: grid;
              gap: 10px;
              font-size: 13px;
            }

            .field {
              display: flex;
              flex-direction: column;
              gap: 4px;
            }

            .field label {
              font-size: 12px;
              color: #d7dcff;
            }

            .field input,
            .field textarea,
            .field select {
              border-radius: 12px;
              border: 1px solid rgba(255,255,255,0.18);
              background: rgba(3,6,20,0.96);
              padding: 9px 10px;
              color: var(--text);
              font-family: inherit;
              font-size: 13px;
              resize: vertical;
              min-height: 0;
            }

            .field textarea {
              min-height: 72px;
            }

            .contact-actions {
              display: flex;
              justify-content: flex-start;
              gap: 10px;
              margin-top: 4px;
            }

            .ghost-button {
              border-radius: 999px;
              padding: 9px 17px;
              border: 1px solid rgba(255,255,255,0.25);
              background: rgba(8,11,32,0.98);
              color: var(--text);
              font-size: 13px;
              cursor: pointer;
            }

            /* Increase CTA buffer on mobile for more breathing room */
            .footer-cta-buffer {
              height: var(--cta-lift-buffer-mobile);
            }

            footer {
              padding: 24px 20px 18px;
              font-size: 11px;
              color: var(--muted);
              text-align: center;
              border-top: 1px solid rgba(255,255,255,0.06);
              background: radial-gradient(circle at top, rgba(99,124,255,0.25), transparent 65%),
                #050816;
            }

            /* (Removed duplicate responsive block; kept the original earlier in the file) */

            /* Google Form embed styling */
            .google-form-embed {
              border-radius: 18px;
              overflow: hidden;
              background: linear-gradient(180deg, rgba(15,18,34,0.56), rgba(6,9,20,0.64));
              border: 1px solid var(--border-subtle);
              box-shadow: 0 8px 28px rgba(0,0,0,0.45);
              padding: 0;
            }

            .google-form-embed iframe {
              display: block;
              width: 100%;
              border: none;
              min-height: 1100px;
            }

            .form-fallback {
              padding: 16px;
              text-align: center;
              background: rgba(6,9,20,0.64);
              border-top: 1px solid var(--border-subtle);
            }

            @media (max-width: 640px) {
              .google-form-embed iframe {
                min-height: 1400px;
              }
            }

            /* Global card titles: ensure pure white across all components */
            .card-title,
            .service-title,
            .info-bubble-title,
            .scenario-title,
            .process-step-title,
            .who-card-title {
              color: #ffffff;
            }

            /* Unified chevron icon for all accordions */
            .chevron {
              display: inline-block;
              width: 15px;
              height: 15px;
              border-right: 3px solid var(--accent1);
              border-bottom: 3px solid var(--accent1);
              transform: rotate(-45deg); /* points right when collapsed */
              transition: transform 160ms ease, border-color 160ms ease;
              flex-shrink: 0;
              margin-right: 8px;
            }

            /* Hover: subtle brighten */
            .faq-toggle:hover .chevron,
            .about-accordion summary:hover .chevron {
              border-color: #9ee7ff;
            }

            /* Open state: rotate down */
            .faq-item.open .chevron,
            .faq-toggle[aria-expanded="true"] .chevron,
            .about-accordion[open] summary .chevron {
              transform: rotate(45deg);
            }

            /* Remove any legacy triangle/play markers from FAQ toggles */
            .faq-toggle::before { content: none !important; }
            .faq-toggle::after { content: none !important; background-image: none !important; }

            /* Remove legacy markers and icons from About accordions */
            .about-accordion summary::marker { display: none; }
            .about-accordion summary::before { content: none; }

            /* Ensure FAQ row uses start alignment, not space-between */
            .faq-item .faq-toggle { justify-content: flex-start; }

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS (HOME & SERVICES PAGES)
   ========================================================================== */

/* Scroll reveal animation - elements start hidden and animate in */
.page-home .reveal,
.page-services .reveal,
.page-help .reveal,
.page-faq .reveal,
.page-about .reveal,
.page-contact .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.page-home .reveal.is-visible,
.page-services .reveal.is-visible,
.page-help .reveal.is-visible,
.page-faq .reveal.is-visible,
.page-about .reveal.is-visible,
.page-contact .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero text stagger - each element animates in sequence */
.page-home .hero-inner.reveal .eyebrow {
  transition-delay: 0.1s;
}

.page-home .hero-inner.reveal .hero-heading {
  transition-delay: 0.2s;
}

.page-home .hero-inner.reveal .hero-subheading {
  transition-delay: 0.3s;
}

.page-home .hero-inner.reveal .hero-body {
  transition-delay: 0.4s;
}

.page-home .hero-inner.reveal .hero-actions {
  transition-delay: 0.5s;
}

.page-home .hero-inner.reveal .hero-footnote {
  transition-delay: 0.6s;
}

/* Subtle hover effects for interactive cards */
.page-home .card,
.page-home .mini-intro,
.page-home .info-bubble,
.page-home .service-card,
.page-home .scenario-card,
.page-services .service-card,
.page-help .who-card,
.page-help .process-step,
.page-faq .faq-item,
.page-faq .scenario-card,
.page-about .about-hero,
.page-about .about-story,
.page-contact .contact-hero,
.page-contact .contact-form-area {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Combined transition for reveal cards - includes opacity for smooth scroll reveal */
.page-home .card.reveal,
.page-home .mini-intro.reveal,
.page-services .service-card,
.page-help .who-card,
.page-help .process-step,
.page-faq .faq-item.reveal,
.page-faq .scenario-card,
.page-about .about-hero.reveal,
.page-about .about-story.reveal,
.page-about .about-accordion.reveal,
.page-contact .contact-hero.reveal,
.page-contact .contact-form-area.reveal {
  transition: opacity 600ms ease, transform 600ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.page-home .card:hover,
.page-home .mini-intro:hover,
.page-services .service-card:hover,
.page-help .who-card:hover,
.page-help .process-step:hover,
.page-faq .scenario-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.65);
}

.page-home .info-bubble:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  border-color: rgba(255,255,255,0.12);
}

.page-home .service-card:hover,
.page-home .scenario-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(0,0,0,0.55);
  border-color: rgba(255,255,255,0.10);
}

/* Respect user preferences for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-home .reveal,
  .page-services .reveal,
  .page-help .reveal,
  .page-faq .reveal,
  .page-about .reveal,
  .page-contact .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  
  .page-home .reveal.is-visible,
  .page-services .reveal.is-visible,
  .page-help .reveal.is-visible,
  .page-faq .reveal.is-visible,
  .page-about .reveal.is-visible,
  .page-contact .reveal.is-visible {
    opacity: 1;
    transform: none;
  }
  
  .page-home .card,
  .page-home .mini-intro,
  .page-home .info-bubble,
  .page-home .service-card,
  .page-home .scenario-card,
  .page-services .service-card,
  .page-help .who-card,
  .page-help .process-step,
  .page-faq .faq-item,
  .page-faq .scenario-card,
  .page-about .about-hero,
  .page-about .about-story,
  .page-contact .contact-hero,
  .page-contact .contact-form-area {
    transition: none;
  }
  
  .page-home .card:hover,
  .page-home .mini-intro:hover,
  .page-home .info-bubble:hover,
  .page-home .service-card:hover,
  .page-home .scenario-card:hover,
  .page-services .service-card:hover,
  .page-help .who-card:hover,
  .page-help .process-step:hover,
  .page-faq .scenario-card:hover {
    transform: none;
  }
}