/* ============================================================
       DESIGN TOKENS
    ============================================================ */
    :root {
      --navy:        #060F22;
      --navy-alt:    #070D1C;
      --blue:        #1D6FFF;
      --blue-dark:   #1558D6;
      --blue-mid:    #4B8BF5;
      --blue-light:  #EBF2FF;
      --teal:        #00C9B1;
      --green:       #22C55E;
      --white:       #FFFFFF;
      --off-white:   #F6F9FF;
      --text:        #0D1B33;
      --muted:       #637799;
      --border:      #DDE6F5;
      --glass-bg:    rgba(255,255,255,.04);
      --glass-border:rgba(255,255,255,.08);
      --r:           16px;
      --r-sm:        10px;
      --warm-white:  #FAFBFF;
      --card-bg:     #FFFFFF;
      --card-border: #E2EAF6;
      --shadow-sm:   0 1px 4px rgba(13,27,51,.06), 0 2px 12px rgba(13,27,51,.04);
      --shadow-md:   0 4px 16px rgba(13,27,51,.08), 0 12px 40px rgba(13,27,51,.06);
      --shadow-lg:   0 8px 32px rgba(13,27,51,.12), 0 24px 64px rgba(13,27,51,.08);
    }

    /* ============================================================
       RESET & BASE
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'DM Sans', sans-serif;
      font-size: 17px;
      line-height: 1.65;
      color: var(--text);
      background: var(--white);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    img, svg { display: block; max-width: 100%; }
    a { text-decoration: none; color: inherit; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    h1, h2, h3, h4 {
      font-family: 'Manrope', sans-serif;
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    /* ============================================================
       LAYOUT
    ============================================================ */
    .container {
      max-width: 1140px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* ============================================================
       BUTTONS
    ============================================================ */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 28px;
      border-radius: var(--r-sm);
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      font-weight: 600;
      transition: all 0.2s ease;
      cursor: pointer;
      white-space: nowrap;
    }
    .btn-primary {
      background: #1760F0;
      color: var(--white);
      box-shadow: 0 4px 16px rgba(29,111,255,.3);
    }
    .btn-primary:hover {
      background: var(--blue-dark);
      transform: translateY(-1px);
      box-shadow: 0 6px 24px rgba(29,111,255,.4);
    }
    .btn-ghost {
      background: rgba(255,255,255,.08);
      color: var(--white);
      border: 1.5px solid rgba(255,255,255,.2);
    }
    .btn-ghost:hover {
      background: rgba(255,255,255,.15);
      border-color: rgba(255,255,255,.35);
    }
    .btn-outline {
      background: transparent;
      color: var(--blue);
      border: 1.5px solid var(--blue);
    }
    .btn-outline:hover { background: var(--blue-light); }

    /* ============================================================
       SECTION LABEL
    ============================================================ */
    .label {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 18px;
    }
    .label::before {
      content: '';
      display: block;
      width: 18px;
      height: 2px;
      background: var(--blue);
      border-radius: 2px;
      flex-shrink: 0;
    }
    .label--light  { color: rgba(255,255,255,.72); }
    .label--light::before { background: rgba(255,255,255,.55); }
    .label--teal   { color: var(--teal); }
    .label--teal::before { background: var(--teal); }

    /* ============================================================
       SCROLL REVEAL
    ============================================================ */
    .reveal {
      opacity: 0;
      transform: translateY(26px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.in { opacity: 1; transform: none; }
    .d1 { transition-delay: .10s; }
    .d2 { transition-delay: .20s; }
    .d3 { transition-delay: .30s; }
    .d4 { transition-delay: .40s; }
    .d5 { transition-delay: .50s; }

    /* ============================================================
       KEYFRAMES
    ============================================================ */
    @keyframes pulseDot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50%       { opacity: .5; transform: scale(.75); }
    }

    /* ============================================================
       MOBILE MENU
    ============================================================ */
    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      background: var(--navy);
      z-index: 200;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 32px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-family: 'Manrope', sans-serif;
      font-size: 24px;
      font-weight: 700;
      color: var(--white);
      transition: color .2s;
    }
    .mobile-menu a:hover { color: var(--blue-mid); }
    .mobile-close {
      position: absolute;
      top: 22px; right: 22px;
      color: rgba(255,255,255,.6);
      font-size: 28px;
      padding: 8px;
      line-height: 1;
      cursor: pointer;
      transition: color .2s;
    }
    .mobile-close:hover { color: var(--white); }

    /* ============================================================
       NAV
    ============================================================ */
    #mainNav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 20px 0;
      transition: background .35s ease, padding .35s ease, box-shadow .35s ease;
    }
    #mainNav.scrolled {
      background: rgba(6,15,34,.96);
      backdrop-filter: blur(14px);
      padding: 13px 0;
      box-shadow: 0 1px 0 rgba(255,255,255,.06);
    }
    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
    }
    .nav-logo {
      font-family: 'Manrope', sans-serif;
      font-size: 19px;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.03em;
      flex-shrink: 0;
    }
    .nav-logo span { color: var(--blue-mid); }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
    }
    .nav-links a {
      color: rgba(255,255,255,.65);
      font-size: 14.5px;
      font-weight: 500;
      transition: color .2s;
    }
    .nav-links a:hover { color: var(--white); }
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      flex-shrink: 0;
    }
    .hamburger span {
      display: block;
      width: 23px;
      height: 2px;
      background: var(--white);
      border-radius: 2px;
    }

    /* ============================================================
       HERO
    ============================================================ */
    #hero {
      background: var(--navy);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 90px 0 60px;
      position: relative;
      overflow: hidden;
    }
    .hero-video-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 0;
    }
    .hero-video-wrap video {
      width: 100%; height: 100%;
      object-fit: cover;
      opacity: 0.15;
    }
    .hero-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(6,15,34,.88) 0%, rgba(6,15,34,.62) 50%, rgba(6,15,34,.96) 100%);
    }
    .hero-glow {
      position: absolute;
      top: -180px; left: 50%;
      transform: translateX(-50%);
      width: 900px; height: 700px;
      background: radial-gradient(ellipse at center, rgba(29,111,255,.16) 0%, transparent 68%);
      pointer-events: none;
      z-index: 1;
    }
    .hero-grid-bg {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.05) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 80%);
      pointer-events: none;
      z-index: 1;
    }
    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      background: rgba(29,111,255,.12);
      border: 1px solid rgba(29,111,255,.28);
      color: var(--blue-mid);
      font-size: 12.5px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .badge-dot {
      width: 7px; height: 7px;
      background: var(--blue-mid);
      border-radius: 50%;
      animation: pulseDot 2s ease infinite;
      flex-shrink: 0;
    }
    .hero-h1 {
      font-size: clamp(2.4rem, 4.8vw, 3.8rem);
      font-weight: 800;
      color: var(--white);
      line-height: 1.04;
      letter-spacing: -0.04em;
      margin-bottom: 28px;
    }
    .hero-h1 em {
      font-style: normal;
      background: linear-gradient(125deg, #60A5FA, var(--teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .hero-sub {
      font-size: 17px;
      color: rgba(255,255,255,.65);
      line-height: 1.7;
      margin-bottom: 28px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }
    .hero-ctas {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .hero-trust-line {
      margin-top: 20px;
      font-size: 12px;
      color: rgba(255,255,255,.3);
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    /* ============================================================
       HERO TWO-COLUMN + HUB DIAGRAM
    ============================================================ */
    .hero-inner {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: flex-start;
      gap: 48px;
      text-align: left;
      max-width: none;
      margin: 0;
    }
    .hero-content { flex: 1; min-width: 0; }
    .hero-sub     { margin-left: 0; margin-right: 0; }
    .hero-ctas    { justify-content: flex-start; }

    /* Graphic container — square for radial layout */
    .hero-graphic {
      flex: 0 0 550px;
      height: 550px;
      position: relative;
      margin-top: 24px;
    }
    .hub-diagram-wrap {
      width: 460px;
      height: 460px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1.2);
    }

    /* Central hub composite — website card */
    .hub-site-card {
      position: absolute;
      bottom: 0; left: 0;
      width: 150px; height: 115px;
      border-radius: 9px;
      overflow: hidden;
      border: 1.5px solid rgba(29,111,255,.55);
      background: #080F1E;
      transform: rotate(-2deg);
      transform-origin: center bottom;
      animation: hubGlow 3s ease-in-out infinite;
    }
    @keyframes hubGlow {
      0%,100% { box-shadow: 0 0 20px rgba(29,111,255,.22), 0 0 60px rgba(29,111,255,.08); }
      50%      { box-shadow: 0 0 44px rgba(29,111,255,.46), 0 0 80px rgba(29,111,255,.16); }
    }

    /* Browser chrome bar */
    .hub-chrome {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 0 8px;
      height: 22px;
      background: rgba(255,255,255,.05);
      border-bottom: 1px solid rgba(255,255,255,.07);
      flex-shrink: 0;
    }
    .hub-chrome-dot {
      width: 5px; height: 5px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .hub-chrome-dot:nth-child(1) { background: #FF5F57; }
    .hub-chrome-dot:nth-child(2) { background: #FEBC2E; }
    .hub-chrome-dot:nth-child(3) { background: #28C840; }
    .hub-chrome-url {
      flex: 1;
      height: 13px;
      background: rgba(255,255,255,.07);
      border-radius: 4px;
      margin-left: 3px;
    }

    /* Simulated webpage content */
    .hub-page {
      display: flex;
      flex-direction: column;
      height: 108px;
      overflow: hidden;
    }
    .hub-page-bar {
      height: 18px;
      background: linear-gradient(90deg, var(--blue) 0%, var(--teal) 100%);
      opacity: .32;
      flex-shrink: 0;
    }
    .hub-page-hero {
      height: 24px;
      background: rgba(29,111,255,.1);
      margin: 6px 6px 0;
      border-radius: 3px;
      flex-shrink: 0;
    }
    .hub-page-lines {
      display: flex;
      flex-direction: column;
      gap: 5px;
      padding: 7px 6px 0;
    }
    .hub-pl {
      height: 5px;
      background: rgba(255,255,255,.1);
      border-radius: 3px;
      width: 88%;
    }
    .hub-pl--s { width: 52%; }

    /* Collapse to single column below 960px */
    @media (max-width: 960px) {
      .hero-inner      { flex-direction: column; text-align: center; gap: 0; }

      /* Explode hero-content children into the flex flow so we can order
         the graphic between the sub-copy and the CTA button */
      .hero-content    { display: contents; }
      .hero-badge      { order: 1; }
      .hero-h1         { order: 2; }
      .hero-graphic    { order: 3; }
      .hero-sub        { order: 4; margin-left: auto; margin-right: auto; }
      .hero-ctas       { order: 5; justify-content: center; }
      .hero-see-how    { order: 6; }
      .hero-trust-line { order: 7; }

      /* Phone mockup — sits between sub-copy and CTA */
      .hero-graphic {
        display: block;
        flex: none;
        width: 100%;
        height: 380px;
        overflow: hidden;
        margin-top: 40px;
        margin-bottom: 32px;
      }
      /* Center the phone (its center point is at x=107 within the 460px hub) */
      .hub-diagram-wrap {
        top: 0;
        left: 50%;
        transform: translateX(-107px);
      }
      /* Hide desktop-only elements that need horizontal space */
      .srch-site-card,
      .srch-arc,
      .srch-step { display: none; }
    }

    /* Respect reduced-motion preference */
    @media (prefers-reduced-motion: reduce) {
      .svcv-ring-pulse, .svcv-result--top { animation: none; }
      .svcv-wave-bar { animation-duration: 3s !important; }
    }


    /* ============================================================
       PROBLEM STATEMENT
    ============================================================ */
    #problem {
      background: var(--navy);
      padding: 64px 0;
      border-top: 1px solid rgba(255,255,255,.06);
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .problem-para {
      max-width: 740px;
      margin: 0 auto;
      font-size: 19px;
      line-height: 1.8;
      color: rgba(255,255,255,.62);
      text-align: center;
    }
    .problem-para strong {
      color: var(--white);
      font-weight: 600;
    }
    @media (max-width: 640px) {
      .problem-para { font-size: 17px; }
    }

    /* ============================================================
       FULL SYSTEM
    ============================================================ */
    #system {
      background: var(--navy-alt);
      padding: 0;
      position: relative;
      overflow: clip; /* clip trims decorative glows without creating a scroll container — overflow:hidden would break position:sticky on .journey-screen */
    }
    #system::before {
      content: '';
      position: absolute;
      top: 60px; left: 50%;
      transform: translateX(-50%);
      width: 900px; height: 500px;
      background: radial-gradient(ellipse at center, rgba(29,111,255,.06) 0%, rgba(0,201,177,.03) 40%, transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    #system::after {
      content: '';
      position: absolute;
      bottom: 0; left: 50%;
      transform: translateX(-50%);
      width: 800px; height: 500px;
      background: radial-gradient(ellipse at center, rgba(0,201,177,.07) 0%, rgba(29,111,255,.04) 40%, transparent 65%);
      pointer-events: none;
    }
    #system .container { position: relative; z-index: 1; }


    /* .services-head removed — #services section deleted */

    /* #services + sys-arch/panel/bridge/components removed — section deleted */
    #services-DELETED {
      background: #070D1C;
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }
    #services::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }
    #services::after {
      content: '';
      position: absolute;
      bottom: -60px; left: 50%;
      transform: translateX(-50%);
      width: 900px; height: 460px;
      background: radial-gradient(ellipse at center,
        rgba(0,201,177,.06) 0%,
        rgba(29,111,255,.04) 40%,
        transparent 65%);
      pointer-events: none;
      z-index: 0;
    }
    #services .container { position: relative; z-index: 1; }
    #services .services-head { max-width: 800px; }
    #services .services-head h2 { color: var(--white); }
    #services .services-head h2 em,
    .reporting-head h2 em,
    .faq-head h2 em,
    .audit-inner h2 em {
      font-style: normal;
      background: linear-gradient(125deg, #60A5FA, var(--teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    #services .services-head p  { color: rgba(255,255,255,.48); max-width: 600px; margin-left: auto; margin-right: auto; }

    /* ---- Architecture canvas ---- */
    .sys-arch {
      display: grid;
      grid-template-columns: 1fr 72px 1fr;
      gap: 0;
      align-items: stretch;
    }

    /* ---- System panels ---- */
    .sys-panel {
      border-radius: 18px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
      transition: transform .3s, box-shadow .3s;
    }
    .sys-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
      z-index: 0;
    }
    .sys-panel--blue {
      background:
        radial-gradient(ellipse at top left, rgba(29,111,255,.12) 0%, transparent 55%),
        rgba(255,255,255,.04);
      border: 1px solid rgba(29,111,255,.22);
      box-shadow:
        0 0 0 1px rgba(29,111,255,.08),
        0 8px 48px rgba(29,111,255,.12),
        0 24px 80px rgba(29,111,255,.06);
    }
    .sys-panel--blue::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--blue), rgba(29,111,255,.2));
      border-radius: 18px 18px 0 0;
      z-index: 1;
    }
    .sys-panel--teal {
      background:
        radial-gradient(ellipse at top left, rgba(0,201,177,.1) 0%, transparent 55%),
        rgba(255,255,255,.04);
      border: 1px solid rgba(0,201,177,.2);
      box-shadow:
        0 0 0 1px rgba(0,201,177,.08),
        0 8px 48px rgba(0,201,177,.1),
        0 24px 80px rgba(0,201,177,.05);
    }
    .sys-panel--teal::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--teal), rgba(0,201,177,.2));
      border-radius: 18px 18px 0 0;
      z-index: 1;
    }
    .sys-panel--teal::before {
      background-image:
        linear-gradient(rgba(0,201,177,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,201,177,.025) 1px, transparent 1px);
      background-size: 28px 28px;
    }
    .sys-panel:hover { transform: translateY(-3px); }

    /* Panel chrome header */
    .sys-panel-chrome {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 14px 20px;
      border-bottom: 1px solid rgba(255,255,255,.06);
      background: rgba(0,0,0,.2);
      position: relative;
      z-index: 1;
    }
    .sys-layer-tag {
      font-family: 'DM Sans', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.13em;
      text-transform: uppercase;
      padding: 3px 8px;
      border-radius: 4px;
    }
    .sys-layer-tag--blue {
      color: #4B8BF5;
      background: rgba(29,111,255,.14);
      border: 1px solid rgba(29,111,255,.24);
    }
    .sys-layer-tag--teal {
      color: var(--teal);
      background: rgba(0,201,177,.11);
      border: 1px solid rgba(0,201,177,.22);
    }
    /* svc-visual inside sys-panel */
    .sys-panel .svc-visual {
      margin: 18px 20px 0;
      position: relative;
      z-index: 1;
    }

    /* Panel body (copy + components) */
    .sys-panel-body {
      display: flex;
      flex-direction: column;
      flex: 1;
      padding: 20px 20px 28px;
      position: relative;
      z-index: 1;
    }
    .sys-panel-body h3 {
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--white);
      margin-bottom: 8px;
      line-height: 1.2;
    }
    .sys-panel-body > p {
      font-size: 14px;
      color: rgba(255,255,255,.42);
      line-height: 1.6;
      margin-bottom: 18px;
    }

    /* System component rows */
    .sys-components {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
    }
    .sys-component {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 10px;
      border-radius: 8px;
      border: 1px solid transparent;
      transition: background .2s, border-color .2s;
      cursor: default;
    }
    .sys-component::before {
      content: '';
      display: block;
      width: 2px;
      height: 22px;
      border-radius: 2px;
      background: rgba(29,111,255,.4);
      flex-shrink: 0;
    }
    .sys-component:hover {
      background: rgba(29,111,255,.07);
      border-color: rgba(29,111,255,.14);
    }
    .sys-component--teal::before { background: rgba(0,201,177,.4); }
    .sys-component--teal:hover {
      background: rgba(0,201,177,.06);
      border-color: rgba(0,201,177,.14);
    }
    .sys-comp-name {
      font-family: 'DM Sans', sans-serif;
      font-size: 12.5px;
      font-weight: 700;
      color: rgba(255,255,255,.8);
      white-space: nowrap;
      flex-shrink: 0;
      min-width: 118px;
    }
    .sys-comp-desc {
      font-size: 11.5px;
      color: rgba(255,255,255,.3);
      line-height: 1.4;
    }

    /* Panel link */
    .sys-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 12.5px;
      font-weight: 700;
      margin-top: 18px;
      padding: 9px 14px;
      border-radius: 8px;
      border: 1px solid transparent;
      transition: gap .2s, background .2s, border-color .2s;
      align-self: flex-start;
    }
    .sys-link--blue {
      color: #4B8BF5;
      border-color: rgba(29,111,255,.22);
      background: rgba(29,111,255,.07);
    }
    .sys-link--blue:hover {
      gap: 11px;
      background: rgba(29,111,255,.14);
      border-color: rgba(29,111,255,.38);
    }
    .sys-link--teal {
      color: var(--teal);
      border-color: rgba(0,201,177,.2);
      background: rgba(0,201,177,.06);
    }
    .sys-link--teal:hover {
      gap: 11px;
      background: rgba(0,201,177,.12);
      border-color: rgba(0,201,177,.34);
    }

    /* ---- Bridge ---- */
    .sys-bridge {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0;
      padding: 32px 0;
    }
    .sys-bridge-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 8.5px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.4;
    }
    .sys-bridge-label--top { color: rgba(29,111,255,.5); margin-bottom: 10px; }
    .sys-bridge-label--bot { color: rgba(0,201,177,.5); margin-top: 10px; }
    .sys-bridge-track {
      width: 2px;
      min-height: 80px;
      flex: 1;
      background: linear-gradient(to bottom,
        rgba(29,111,255,.35) 0%,
        rgba(0,201,177,.35) 100%);
      border-radius: 2px;
      position: relative;
      overflow: visible;
    }
    .sys-bridge-track--bottom {
      background: linear-gradient(to bottom,
        rgba(0,201,177,.35) 0%,
        rgba(0,201,177,.1) 100%);
    }
    .sys-bridge-dot {
      position: absolute;
      left: 50%;
      top: 0%;
      transform: translateX(-50%);
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--blue);
      box-shadow: 0 0 8px rgba(29,111,255,.9), 0 0 16px rgba(29,111,255,.4);
      animation: bridgeDotTravel 3s ease-in-out infinite;
    }
    .sys-bridge-dot--teal {
      background: var(--teal);
      box-shadow: 0 0 8px rgba(0,201,177,.9), 0 0 16px rgba(0,201,177,.4);
      animation: bridgeDotTravelTeal 3s ease-in-out infinite;
    }
    .sd1 { animation-delay: 0s; }
    .sd2 { animation-delay: 1s; }
    .sd3 { animation-delay: 2s; }
    .sd4 { animation-delay: 0.2s; }
    .sd5 { animation-delay: 1.2s; }
    .sd6 { animation-delay: 2.2s; }
    .sys-bridge-event {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      padding: 8px 7px;
      border-radius: 10px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.08);
      margin: 8px 0;
    }
    .sys-bridge-event span {
      font-size: 7.5px;
      font-weight: 700;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,.25);
      font-family: 'DM Sans', sans-serif;
    }


    @media (prefers-reduced-motion: reduce) {
      .sys-bridge-dot, .sys-bridge-dot--teal { animation: none; top: 50%; opacity: .35; }
    }

    /* ---- Mobile overrides ---- */
    @media (max-width: 900px) {
      .sys-arch {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      .sys-bridge {
        flex-direction: row;
        padding: 0 20px;
        height: 52px;
        min-height: 52px;
      }
      .sys-bridge-track {
        width: auto;
        height: 2px;
        flex: 1;
        min-height: unset;
        background: linear-gradient(to right,
          rgba(29,111,255,.35) 0%,
          rgba(0,201,177,.35) 100%);
      }
      .sys-bridge-track--bottom { display: none; }
      .sys-bridge-dot {
        top: 50%;
        left: 0%;
        transform: translateY(-50%);
      }
      .sys-bridge-dot--teal { display: none; }
      .sys-bridge-event  { padding: 4px 8px; margin: 0 10px; }
      .sys-bridge-label  { display: none; }
      .sys-panel .svc-visual { margin: 16px 16px 0; }
      .sys-panel-body { padding: 18px 16px 24px; }
    }
    @media (max-width: 640px) {
      .sys-comp-name  { min-width: 100px; font-size: 12px; }
      .sys-comp-desc  { font-size: 11px; }
    }

    /* ============================================================
       BENEFITS
    ============================================================ */
    #benefits {
      background: var(--navy);
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }
    #benefits::before {
      content: '';
      position: absolute;
      top: -80px; left: 50%;
      transform: translateX(-50%);
      width: 700px; height: 500px;
      background: radial-gradient(ellipse at center, rgba(0,201,177,.06) 0%, transparent 65%);
      pointer-events: none;
    }
    .benefits-head {
      text-align: center;
      margin-bottom: 60px;
    }
    .benefits-head h2 { font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 800; color: var(--white); margin-bottom: 16px; }
    .benefits-head p { font-size: 17px; color: rgba(255,255,255,.48); max-width: 480px; margin: 0 auto; }
    /* ─── Scene layout ──────────────────────────────────── */
    .scene-list { display: flex; flex-direction: column; gap: 20px; }
    .scene {
      display: flex; align-items: center; gap: 40px;
      padding: 28px 32px;
      border-radius: 20px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.03);
    }
    .scene-stage {
      flex: 0 0 60%; min-height: 190px;
      border-radius: 12px;
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.08);
      overflow: hidden; position: relative;
    }
    .scene-copy { flex: 1; min-width: 0; }
    .scene-step {
      display: block; font-size: 10px; font-weight: 800;
      letter-spacing: .12em; text-transform: uppercase;
      color: rgba(255,255,255,.18); margin-bottom: 10px;
      font-family: 'Manrope', sans-serif;
    }
    .scene h3 {
      font-family: 'Manrope', sans-serif; font-size: 1.3rem; font-weight: 800;
      color: var(--white); margin-bottom: 10px; line-height: 1.25;
    }
    .scene p { font-size: 15px; color: rgba(255,255,255,.5); line-height: 1.55; }

    /* Scene color accents */
    .scene:nth-child(1) { border-color: rgba(29,111,255,.2); box-shadow: 0 4px 32px rgba(29,111,255,.08); }
    .scene:nth-child(1) .scene-stage { border-color: rgba(29,111,255,.22); }
    .scene:nth-child(1) .scene-step  { color: rgba(29,111,255,.6); }
    .scene:nth-child(2) { border-color: rgba(0,201,177,.18); box-shadow: 0 4px 32px rgba(0,201,177,.07); }
    .scene:nth-child(2) .scene-stage { border-color: rgba(0,201,177,.22); }
    .scene:nth-child(2) .scene-step  { color: rgba(0,201,177,.6); }
    .scene:nth-child(3) { border-color: rgba(34,197,94,.18); box-shadow: 0 4px 32px rgba(34,197,94,.07); }
    .scene:nth-child(3) .scene-stage { border-color: rgba(34,197,94,.22); }
    .scene:nth-child(3) .scene-step  { color: rgba(34,197,94,.6); }

    /* ============================================================
       BENEFITS — VIBE UPGRADE
    ============================================================ */
    #benefits::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }
    #benefits .container { position: relative; z-index: 1; }

    .benefits-head h2 em {
      font-style: normal;
      background: linear-gradient(125deg, #60A5FA, var(--teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Scene left accent bar */
    .scene { position: relative; overflow: hidden; }
    .scene::before {
      content: '';
      position: absolute;
      left: 0; top: 16px; bottom: 16px; width: 3px;
      border-radius: 0 2px 2px 0;
    }
    .scene:nth-child(1)::before { background: linear-gradient(180deg, var(--blue), rgba(29,111,255,.15)); }
    .scene:nth-child(2)::before { background: linear-gradient(180deg, var(--teal), rgba(0,201,177,.15)); }
    .scene:nth-child(3)::before { background: linear-gradient(180deg, var(--green), rgba(34,197,94,.15)); }

    /* ============================================================
       BENEFITS — ANIMATIONS
    ============================================================ */

    /* Shared keyframes */
    @keyframes fadeUp   { to { opacity: 1; transform: translateY(0); } }
    @keyframes sigPop   { to { opacity: 1; transform: scale(1); } }
    @keyframes bizFade  { to { opacity: 0.32; } }
    @keyframes leadIn   { to { opacity: 1; transform: translateX(0); } }
    @keyframes ctaPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(0,201,177,.5); }
      50%       { box-shadow: 0 0 0 8px rgba(0,201,177,0); }
    }

    /* Scene 1: your signals pop in (competitors stay fully visible) */
    .scene.reveal.in .bv-sg-1 { animation: sigPop 0.3s cubic-bezier(.34,1.56,.64,1) 0.45s forwards; }
    .scene.reveal.in .bv-sg-2 { animation: sigPop 0.3s cubic-bezier(.34,1.56,.64,1) 0.6s  forwards; }
    .scene.reveal.in .bv-sg-3 { animation: sigPop 0.3s cubic-bezier(.34,1.56,.64,1) 0.75s forwards; }
    .scene.reveal.in .bv-sg-4 { animation: sigPop 0.3s cubic-bezier(.34,1.56,.64,1) 0.9s  forwards; }

    /* Scene 2: website content loads in */
    .scene.reveal.in .bv-page-headline { animation: fadeUp 0.4s ease 0.1s  forwards; }
    .scene.reveal.in .bv-page-stars    { animation: fadeUp 0.4s ease 0.28s forwards; }
    .scene.reveal.in .bv-page-cta      { animation: fadeUp 0.4s ease 0.44s forwards, ctaPulse 1.8s ease 1.2s infinite; }

    /* Scene 3: leads slide in one by one */
    .scene.reveal.in .bv-lead-1 { animation: leadIn 0.4s ease 0.15s forwards; }
    .scene.reveal.in .bv-lead-2 { animation: leadIn 0.4s ease 0.38s forwards; }
    .scene.reveal.in .bv-lead-3 { animation: leadIn 0.4s ease 0.6s  forwards; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .bv-s-good { opacity: 1; transform: none; }
      .bv-page-headline, .bv-page-stars, .bv-page-cta { opacity: 1; transform: none; }
      .bv-lead { opacity: 1; transform: none; }
    }

    /* ============================================================
       WHY NOT A TEMPLATE
    ============================================================ */
    #difference {
      background: var(--navy);
      padding: 100px 0;
    }
    .diff-head {
      text-align: center;
      margin-bottom: 60px;
    }
    .diff-head h2 {
      font-size: clamp(2rem, 3.5vw, 2.9rem);
      font-weight: 800;
      color: var(--white);
      margin-bottom: 16px;
    }
    .diff-head p {
      font-size: 17px;
      color: rgba(255,255,255,.48);
      max-width: 520px;
      margin: 0 auto;
    }
    .callout-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      max-width: 860px;
      margin: 0 auto;
    }
    .callout {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px;
      padding: 28px;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .callout-icon {
      width: 48px; height: 48px;
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .ci-red   { background: rgba(239,68,68,.12);  color: #f87171; }
    .ci-amber { background: rgba(251,191,36,.12); color: #fbbf24; }
    .callout-problem {
      font-size: 15px;
      color: rgba(255,255,255,.42);
      line-height: 1.55;
      margin: 0;
    }
    .callout-fix {
      font-size: 15px;
      font-weight: 700;
      color: var(--white);
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }
    .callout-arrow {
      color: var(--teal);
      flex-shrink: 0;
      font-weight: 800;
    }

    /* ============================================================
       DIFFERENCE — UPGRADE
    ============================================================ */
    #difference { position: relative; overflow: hidden; }
    #difference::before {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.02) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none; z-index: 0;
    }
    #difference::after {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 20% 60%, rgba(239,68,68,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 60%, rgba(0,201,177,.06) 0%, transparent 50%);
      pointer-events: none; z-index: 0;
    }
    #difference .container { position: relative; z-index: 1; }

    .diff-head h2 em {
      font-style: normal;
      background: linear-gradient(125deg, #60A5FA, var(--teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ============================================================
       HOW IT WORKS
    ============================================================ */
    #process {
      background: var(--white);
      padding: 100px 0;
    }
    .process-head {
      text-align: center;
      margin-bottom: 72px;
    }
    .process-head h2 { font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 800; color: var(--text); margin-bottom: 16px; }
    .process-head p { font-size: 17px; color: var(--muted); max-width: 460px; margin: 0 auto; }
    .process-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      position: relative;
      gap: 8px;
    }
    .process-steps::before {
      content: '';
      position: absolute;
      top: 27px;
      left: calc(16.7% + 20px);
      right: calc(16.7% + 20px);
      height: 1px;
      background: var(--border);
      z-index: 0;
    }
    .process-step {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 0 16px;
      position: relative;
    }
    .step-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--blue);
      margin-bottom: 10px;
    }
    .step-num {
      width: 54px; height: 54px;
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Manrope', sans-serif;
      font-size: 16px;
      font-weight: 800;
      color: var(--blue);
      margin-bottom: 24px;
      position: relative;
      z-index: 1;
      box-shadow: var(--shadow-sm);
      flex-shrink: 0;
    }
    .process-step h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin-bottom: 10px; letter-spacing: -0.02em; }
    .process-step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

    /* ============================================================
       PROCESS — UPGRADE
    ============================================================ */
    #process {
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    #process::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none; z-index: 0;
    }
    #process .container { position: relative; z-index: 1; }

    .process-head h2 { color: var(--white); }
    .process-head p  { color: rgba(255,255,255,.48); }
    .process-head h2 em {
      font-style: normal;
      background: linear-gradient(125deg, #60A5FA, var(--teal));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .process-steps::before {
      background: linear-gradient(90deg, rgba(29,111,255,.4), rgba(0,201,177,.4), rgba(34,197,94,.4));
      height: 2px;
    }

    .step-num { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1); }

    .process-step:nth-child(1) .step-num {
      border-color: rgba(29,111,255,.45);
      color: #4B8BF5;
      box-shadow: 0 0 0 7px rgba(29,111,255,.06), 0 0 22px rgba(29,111,255,.14);
    }
    .process-step:nth-child(2) .step-num {
      border-color: rgba(0,201,177,.38);
      color: var(--teal);
      box-shadow: 0 0 0 7px rgba(0,201,177,.06), 0 0 22px rgba(0,201,177,.12);
    }
    .process-step:nth-child(3) .step-num {
      border-color: rgba(34,197,94,.35);
      color: var(--green);
      box-shadow: 0 0 0 7px rgba(34,197,94,.06), 0 0 22px rgba(34,197,94,.1);
    }

    .step-label      { color: rgba(255,255,255,.28); }
    .process-step h3 { color: var(--white); }
    .process-step p  { color: rgba(255,255,255,.45); }

    /* ============================================================
       REPORTING PREVIEW
    ============================================================ */
    #reporting {
      background: #060D1C;
      padding: 100px 0;
      position: relative;
      overflow: hidden;
    }
    #reporting::before {
      content: '';
      position: absolute;
      top: -80px; right: -60px;
      width: 580px; height: 480px;
      background: radial-gradient(ellipse at center, rgba(0,201,177,.07) 0%, transparent 65%);
      pointer-events: none;
    }
    .reporting-head {
      text-align: center;
      margin-bottom: 52px;
    }
    .reporting-head h2 { font-size: clamp(2rem, 3.5vw, 2.9rem); font-weight: 800; color: var(--white); margin-bottom: 16px; }
    .reporting-head p { font-size: 17px; color: rgba(255,255,255,.48); max-width: 500px; margin: 0 auto; }
    .dash-browser {
      background: var(--glass-bg);
      border: 1px solid var(--glass-border);
      border-radius: 14px;
      overflow: hidden;
      max-width: 960px;
      margin: 0 auto;
    }
    .dash-chrome {
      background: rgba(255,255,255,.025);
      border-bottom: 1px solid rgba(255,255,255,.06);
      padding: 13px 20px;
      display: flex;
      align-items: center;
      gap: 7px;
    }
    .chrome-dot {
      width: 10px; height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }
    .chrome-label {
      margin-left: 10px;
      font-size: 11.5px;
      color: rgba(255,255,255,.18);
      letter-spacing: 0.04em;
    }
    .dash-body { padding: 28px; }
    .dash-title {
      font-family: 'Manrope', sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: rgba(255,255,255,.35);
      text-transform: uppercase;
      letter-spacing: 0.1em;
      margin-bottom: 18px;
    }
    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .metric-card {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 10px;
      padding: 20px;
    }
    .metric-card-icon { margin-bottom: 12px; }
    .metric-card-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,.3);
      margin-bottom: 6px;
    }
    .metric-card-value {
      font-family: 'Manrope', sans-serif;
      font-size: 1.9rem;
      font-weight: 800;
      color: var(--white);
      letter-spacing: -0.04em;
      line-height: 1;
      margin-bottom: 7px;
    }
    .metric-card-trend {
      font-size: 11.5px;
      color: var(--green);
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .vital-rows { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
    .vital-row {
      display: flex; align-items: center; justify-content: space-between;
      font-size: 12px;
    }
    .vital-key { color: rgba(255,255,255,.4); }
    .vital-val { color: var(--white); font-weight: 600; }
    .vital-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); flex-shrink: 0;
    }
    .schema-badge {
      display: inline-flex; align-items: center; gap: 6px;
      background: rgba(34,197,94,.1);
      border: 1px solid rgba(34,197,94,.22);
      color: var(--green);
      font-size: 11.5px; font-weight: 700;
      padding: 5px 12px; border-radius: 100px;
      margin-top: 8px;
    }
    .reporting-note {
      text-align: center;
      margin-top: 32px;
      font-size: 14.5px;
      color: rgba(255,255,255,.3);
      font-style: italic;
    }

    /* ============================================================
       FAQ
    ============================================================ */
    #faq {
      background: var(--white);
      padding: 100px 0;
    }
    .faq-head {
      text-align: center;
      margin-bottom: 52px;
    }
    .faq-head h2 { font-size: clamp(2rem, 3.2vw, 2.8rem); font-weight: 800; margin-bottom: 16px; color: var(--text); }
    .faq-head p { font-size: 17px; color: var(--muted); max-width: 480px; margin: 0 auto; }
    .faq-list {
      max-width: 740px;
      margin: 0 auto;
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      background: var(--white);
      box-shadow: var(--shadow-sm);
    }
    .faq-item { border-bottom: 1px solid var(--border); }
    .faq-item:last-child { border-bottom: none; }
    .faq-question {
      width: 100%;
      text-align: left;
      padding: 22px 28px;
      font-family: 'Manrope', sans-serif;
      font-size: 15.5px;
      font-weight: 700;
      color: var(--text);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      background: none;
      border: none;
      transition: background .2s, color .2s;
      letter-spacing: -0.01em;
    }
    .faq-question:hover { background: var(--off-white); }
    .faq-question.open { color: var(--blue); }
    .faq-chevron { flex-shrink: 0; transition: transform .25s; color: var(--muted); }
    .faq-question.open .faq-chevron { transform: rotate(180deg); color: var(--blue); }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .3s ease;
    }
    .faq-answer-inner {
      padding: 0 28px 24px;
      font-size: 15.5px;
      color: var(--muted);
      line-height: 1.75;
    }

    /* ============================================================
       FAQ — UPGRADE
    ============================================================ */
    #faq {
      background: var(--navy);
      position: relative;
      overflow: hidden;
    }
    #faq::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.025) 1px, transparent 1px);
      background-size: 48px 48px;
      pointer-events: none;
      z-index: 0;
    }
    #faq .container { position: relative; z-index: 1; }
    .faq-head h2 { color: var(--white); }
    .faq-head p  { color: rgba(255,255,255,.45); }
    .faq-list {
      background: rgba(255,255,255,.03);
      border: 1px solid rgba(255,255,255,.08);
      box-shadow: 0 0 40px rgba(29,111,255,.06);
    }
    .faq-item { border-bottom-color: rgba(255,255,255,.06); }
    .faq-question {
      color: var(--white);
      background: transparent;
    }
    .faq-question:hover { background: rgba(255,255,255,.03); }
    .faq-question.open { color: var(--teal); }
    .faq-chevron { color: rgba(255,255,255,.3); }
    .faq-question.open .faq-chevron { color: var(--teal); }
    .faq-answer-inner { color: rgba(255,255,255,.5); }

    /* ============================================================
       AUDIT FORM
    ============================================================ */
    #audit {
      background: var(--navy);
      padding: 100px 0;
      border-top: 1px solid rgba(255,255,255,.04);
      position: relative;
      overflow: hidden;
    }
    #audit::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 80%, rgba(29,111,255,.09) 0%, transparent 60%);
      pointer-events: none;
    }
    .audit-inner {
      max-width: 580px;
      margin: 0 auto;
      text-align: center;
      position: relative;
    }
    .audit-inner h2 { font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; color: var(--white); margin-bottom: 14px; }
    .audit-inner > p { font-size: 16px; color: rgba(255,255,255,.48); margin-bottom: 40px; line-height: 1.7; }
    .audit-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .form-field { display: flex; flex-direction: column; gap: 6px; }
    .form-field label {
      font-size: 11.5px; font-weight: 700;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: rgba(255,255,255,.35);
    }
    .form-field input {
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 8px;
      padding: 13px 16px;
      font-family: 'DM Sans', sans-serif;
      font-size: 15px;
      color: var(--white);
      outline: none;
      transition: border-color .2s, background .2s;
    }
    .form-field input::placeholder { color: rgba(255,255,255,.22); }
    .form-field input:focus {
      border-color: rgba(29,111,255,.55);
      background: rgba(29,111,255,.06);
    }
    .form-submit .btn { width: 100%; font-size: 16px; padding: 15px 28px; margin-top: 4px; }
    .audit-note { text-align: center; font-size: 12px; color: rgba(255,255,255,.22); margin-top: 14px; }
    .form-success {
      display: none;
      text-align: center;
      padding: 32px;
      background: rgba(34,197,94,.07);
      border: 1px solid rgba(34,197,94,.18);
      border-radius: 12px;
    }
    .form-success p { color: var(--green); font-size: 16px; font-weight: 600; }
    .form-success span { display: block; font-size: 14px; color: rgba(255,255,255,.45); margin-top: 6px; font-weight: 400; }

    /* ============================================================
       FOOTER
    ============================================================ */
    footer {
      background: #020810;
      border-top: 1px solid rgba(255,255,255,.04);
      padding: 60px 0 40px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1fr;
      gap: 48px;
      margin-bottom: 48px;
    }
    .foot-logo { font-family: 'Manrope', sans-serif; font-size: 18px; font-weight: 800; color: var(--white); display: block; margin-bottom: 12px; }
    .foot-logo span { color: var(--blue-mid); }
    .foot-tag { font-size: 14px; color: rgba(255,255,255,.28); line-height: 1.6; max-width: 210px; }
    .foot-col-title { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.28); margin-bottom: 16px; }
    .foot-col-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .foot-col-links a { font-size: 14px; color: rgba(255,255,255,.45); transition: color .2s; }
    .foot-col-links a:hover { color: rgba(255,255,255,.88); }
    .footer-bot {
      border-top: 1px solid rgba(255,255,255,.05);
      padding-top: 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 12px;
    }
    .foot-copy { font-size: 13px; color: rgba(255,255,255,.32); }
    .foot-legal { display: flex; gap: 22px; }
    .foot-legal a { font-size: 13px; color: rgba(255,255,255,.38); transition: color .2s; }
    .foot-legal a:hover { color: rgba(255,255,255,.88); }
    .foot-book-btn { display: inline-flex; margin-top: 18px; font-size: 14px; padding: 11px 22px; }

    /* ============================================================
       SERVICE CARD ILLUSTRATED HEADERS
    ============================================================ */
    .svc-visual {
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      height: 168px;
      background: #070C19;
      border: 1px solid rgba(255,255,255,.07);
      margin-bottom: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 15px 17px 13px;
    }
    .svc-visual::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(29,111,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(29,111,255,.04) 1px, transparent 1px);
      background-size: 28px 28px;
      pointer-events: none;
    }

    /* SERP / website visual elements */
    .svcv-search-bar {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.05);
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 7px; padding: 7px 12px;
      font-size: 11px; color: rgba(255,255,255,.38);
      position: relative; z-index: 1;
    }
    .svcv-results {
      display: flex; flex-direction: column; gap: 5px;
      position: relative; z-index: 1;
    }
    .svcv-result {
      display: flex; align-items: center; gap: 9px;
      padding: 6px 9px; border-radius: 7px;
    }
    .svcv-result--top {
      background: rgba(29,111,255,.1);
      border: 1px solid rgba(29,111,255,.2);
      animation: svcvGlow 3s ease-in-out infinite;
    }
    @keyframes svcvGlow {
      0%,100% { border-color: rgba(29,111,255,.2); }
      50%      { border-color: rgba(29,111,255,.46); }
    }
    .svcv-result--dim { opacity: .33; }
    .svcv-rank {
      font-family: 'Manrope', sans-serif;
      font-size: 12px; font-weight: 800; color: var(--blue);
      min-width: 14px; flex-shrink: 0;
    }
    .svcv-rank--dim { color: rgba(255,255,255,.3); }
    .svcv-result-title { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.82); }
    .svcv-result-url   { font-size: 9.5px; color: rgba(29,111,255,.6); }
    .svcv-result--dim .svcv-result-title { color: rgba(255,255,255,.26); }
    .svcv-result--dim .svcv-result-url   { color: rgba(255,255,255,.12); }
    .svcv-stars { font-size: 9.5px; color: #FBBF24; letter-spacing:.5px; margin-left:auto; flex-shrink:0; }
    .svcv-pages { display: flex; gap: 5px; flex-wrap: nowrap; overflow: hidden; position: relative; z-index: 1; }
    .svcv-page-chip {
      background: rgba(29,111,255,.1); border: 1px solid rgba(29,111,255,.2);
      color: var(--blue-mid); font-size: 9.5px; font-weight: 600;
      padding: 3px 9px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
    }
    .svcv-page-chip--more {
      background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.08);
      color: rgba(255,255,255,.28);
    }

    /* Voice / Call visual */
    .svc-visual--voice { background: linear-gradient(140deg, #060A14 0%, #03100E 100%); }
    .svcv-call-notify {
      display: flex; align-items: center; gap: 12px;
      background: rgba(0,201,177,.07); border: 1px solid rgba(0,201,177,.18);
      border-radius: 10px; padding: 9px 13px; position: relative; z-index: 1;
    }
    .svcv-call-ring {
      width: 32px; height: 32px; border-radius: 50%;
      background: rgba(0,201,177,.13);
      display: flex; align-items: center; justify-content: center;
      position: relative; flex-shrink: 0;
    }
    .svcv-ring-pulse {
      position: absolute; inset: -5px; border-radius: 50%;
      border: 2px solid rgba(0,201,177,.4);
      animation: ringPulse 1.8s ease-out infinite;
    }
    @keyframes ringPulse {
      0%   { transform: scale(1);   opacity: .9; }
      100% { transform: scale(1.8); opacity: 0;  }
    }
    .svcv-call-incoming {
      font-size: 9px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--teal); margin-bottom: 2px;
    }
    .svcv-call-number { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.82); }
    .svcv-answered-badge {
      margin-left: auto;
      background: rgba(0,201,177,.13); color: var(--teal);
      font-size: 9.5px; font-weight: 700;
      padding: 4px 10px; border-radius: 100px; flex-shrink: 0;
    }
    .svcv-wave {
      display: flex; align-items: center; gap: 3px;
      justify-content: center; height: 40px;
      position: relative; z-index: 1;
    }
    .svcv-wave-bar {
      width: 3.5px; border-radius: 3px; background: var(--teal);
      opacity: .65; transform-origin: bottom;
      animation: waveBar 1.1s ease-in-out infinite;
    }
    @keyframes waveBar {
      0%,100% { transform: scaleY(.25); }
      50%     { transform: scaleY(1);   }
    }
    .svcv-wave-bar:nth-child(1)  { height: 16px; animation-delay:  .00s; }
    .svcv-wave-bar:nth-child(2)  { height: 24px; animation-delay:  .08s; }
    .svcv-wave-bar:nth-child(3)  { height: 32px; animation-delay:  .16s; }
    .svcv-wave-bar:nth-child(4)  { height: 38px; animation-delay:  .24s; }
    .svcv-wave-bar:nth-child(5)  { height: 28px; animation-delay:  .32s; }
    .svcv-wave-bar:nth-child(6)  { height: 20px; animation-delay:  .40s; }
    .svcv-wave-bar:nth-child(7)  { height: 34px; animation-delay:  .48s; }
    .svcv-wave-bar:nth-child(8)  { height: 38px; animation-delay:  .56s; }
    .svcv-wave-bar:nth-child(9)  { height: 26px; animation-delay:  .64s; }
    .svcv-wave-bar:nth-child(10) { height: 36px; animation-delay:  .72s; }
    .svcv-wave-bar:nth-child(11) { height: 22px; animation-delay:  .80s; }
    .svcv-wave-bar:nth-child(12) { height: 14px; animation-delay:  .88s; }
    .svcv-wave-bar:nth-child(13) { height: 26px; animation-delay:  .96s; }
    .svcv-wave-bar:nth-child(14) { height: 14px; animation-delay: 1.04s; }
    .svcv-pickup-stat {
      font-size: 10px; color: rgba(255,255,255,.28);
      text-align: center; letter-spacing: .04em; position: relative; z-index: 1;
    }

    /* ============================================================
       BENEFIT CARD MINI VISUALS
    ============================================================ */
    /* ─── Scene stage: shared base (replaces .benefit-visual) ── */
    .scene-stage {
      display: flex; flex-direction: column;
    }

    /* ─── Scene 1: Google SERP ───────────────────────────────── */
    .bv-serp-wrap { justify-content: flex-start; }
    .bv-google-bar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px; background: rgba(255,255,255,.04);
      border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
    }
    .bv-g-logo {
      font-size: 18px; font-weight: 900; font-family: 'Manrope', sans-serif;
      background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; line-height: 1; flex-shrink: 0;
    }
    .bv-search-bar {
      display: flex; align-items: center; gap: 7px; flex: 1;
      background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
      border-radius: 100px; padding: 5px 12px;
    }
    .bv-search-text { font-size: 11px; color: rgba(255,255,255,.55); font-family: 'Manrope', sans-serif; }
    .bv-cursor { font-size: 11px; color: rgba(29,111,255,.8); font-weight: 300; margin-left: 1px; }
    .bv-serp-results { display: flex; flex-direction: column; gap: 0; padding: 8px 12px; flex: 1; }
    .bv-serp-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 7px 8px; border-radius: 7px; border: 1px solid transparent;
      gap: 10px;
    }
    .bv-serp-row--dim { background: transparent; }
    .bv-serp-row--active {
      background: rgba(29,111,255,.1); border-color: rgba(29,111,255,.28);
      box-shadow: 0 0 18px rgba(29,111,255,.2);
      opacity: 0; transform: translateY(6px);
    }
    .bv-serp-meta { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
    .bv-serp-active-inner { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
    .bv-serp-name { font-size: 11px; color: rgba(255,255,255,.45); font-family: 'Manrope', sans-serif; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bv-serp-name--bright { color: rgba(255,255,255,.92); font-size: 12px; }
    .bv-serp-url  { font-size: 9.5px; color: rgba(255,255,255,.22); font-family: 'Manrope', sans-serif; }
    .bv-serp-desc { font-size: 10px; color: rgba(255,255,255,.45); font-family: 'Manrope', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .bv-serp-flag {
      font-size: 9px; font-weight: 700; padding: 2px 8px;
      border-radius: 100px; white-space: nowrap; flex-shrink: 0;
    }
    .bv-flag--warn { background: rgba(251,191,36,.12); color: #FBBF24; border: 1px solid rgba(251,191,36,.2); }
    .bv-flag--err  { background: rgba(239,68,68,.1);   color: #F87171; border: 1px solid rgba(239,68,68,.2); }
    .bv-flag--ok   { background: rgba(29,111,255,.15); color: #93C5FD; border: 1px solid rgba(29,111,255,.3); }

    /* ─── Scene 2: Browser / Landing Page ───────────────────── */
    .bv-browser-wrap { }
    .bv-browser-chrome {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 12px;
      background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.07);
      flex-shrink: 0;
    }
    .bv-browser-dots { display: flex; gap: 5px; }
    .bv-browser-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.2); }
    .bv-browser-url {
      font-size: 10px; color: rgba(255,255,255,.28); font-family: 'Manrope', sans-serif;
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08);
      border-radius: 5px; padding: 3px 10px; flex: 1; text-align: center;
    }
    .bv-browser-body { padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
    .bv-page-headline {
      font-size: 13px; font-weight: 800; font-family: 'Manrope', sans-serif;
      color: rgba(255,255,255,.92); line-height: 1.3;
      opacity: 0; transform: translateY(6px);
    }
    .bv-page-stars {
      font-size: 13px; color: #FBBF24;
      display: flex; align-items: center; gap: 6px;
      opacity: 0;
    }
    .bv-page-review-count { font-size: 10px; color: rgba(255,255,255,.32); font-family: 'Manrope', sans-serif; }
    .bv-page-cta {
      display: inline-flex; align-items: center; gap: 6px;
      background: var(--teal); color: #000;
      font-size: 11px; font-weight: 800; font-family: 'Manrope', sans-serif;
      padding: 7px 16px; border-radius: 7px; align-self: flex-start;
      opacity: 0;
    }

    /* ─── Scene 3: Status Monitor ────────────────────────────── */
    .bv-monitor-wrap { padding: 18px 18px 14px; gap: 0; justify-content: center; }
    .bv-status-row {
      display: flex; align-items: center; gap: 10px;
      padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05);
    }
    .bv-status-label { font-size: 11px; color: rgba(255,255,255,.38); font-family: 'Manrope', sans-serif; flex-shrink: 0; width: 100px; }
    .bv-status-bar {
      flex: 1; height: 4px; border-radius: 2px;
      background: rgba(255,255,255,.08); overflow: hidden;
    }
    .bv-status-fill {
      height: 100%; width: 0; border-radius: 2px;
      background: linear-gradient(90deg, var(--green), rgba(34,197,94,.6));
    }
    .bv-status-check {
      font-size: 10px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--green);
      opacity: 0; transform: scale(0.7); flex-shrink: 0;
    }
    .bv-monitor-divider { height: 1px; background: rgba(255,255,255,.07); margin: 8px 0; }
    .bv-monitor-email { font-size: 10.5px; color: rgba(255,255,255,.32); font-family: 'Manrope', sans-serif; opacity: 0; transform: translateY(4px); }

    /* ============================================================
       SCENE 1: GOOGLE COMPARISON
    ============================================================ */
    .bv-compare-wrap { padding: 0; }
    .bv-cmp-bar {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 12px; border-bottom: 1px solid rgba(255,255,255,.05);
      font-size: 9px; color: rgba(255,255,255,.2); font-family: 'Manrope', sans-serif;
      letter-spacing: .03em; flex-shrink: 0;
    }
    .bv-cmp-grid {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1px; background: rgba(255,255,255,.04); flex: 1;
    }
    .bv-biz {
      background: #0A1628; padding: 10px 8px 8px;
      display: flex; flex-direction: column; gap: 7px;
      transition: opacity .4s ease;
    }
    .bv-biz--good {
      background: rgba(10,50,20,.6);
      box-shadow: inset 0 0 24px rgba(34,197,94,.08);
    }

    /* CSS website thumbnails */
    .bv-site-thumb {
      border-radius: 4px; overflow: hidden; height: 58px;
      background: #111827; border: 1px solid rgba(255,255,255,.06);
      flex-shrink: 0;
    }
    .bv-t-nav {
      height: 9px; background: rgba(255,255,255,.06);
      display: flex; align-items: center; padding: 0 4px; gap: 2px;
    }
    .bv-t-hero { height: 16px; background: rgba(255,255,255,.03); margin: 1px 0; }
    .bv-t-content { display: flex; flex-direction: column; gap: 2px; padding: 2px 4px; }
    .bv-t-block { height: 7px; background: rgba(255,255,255,.04); border-radius: 1px; }

    /* Custom site overrides */
    .bv-site-custom { position: relative; }
    .bv-site-custom::before {
      content: ''; position: absolute; inset: 0;
      transform: translate(4px, 4px); z-index: -1;
      background: rgba(34,197,94,.08); border-radius: 4px;
      border: 1px solid rgba(34,197,94,.18);
    }
    .bv-t-nav--blue {
      background: linear-gradient(90deg, rgba(21,128,61,.8), rgba(34,197,94,.4));
      justify-content: space-between;
    }
    .bv-t-logo { width: 16px; height: 4px; border-radius: 1px; background: rgba(255,255,255,.6); }
    .bv-t-navlinks { display: flex; gap: 3px; }
    .bv-t-navlinks span { width: 10px; height: 3px; border-radius: 1px; background: rgba(255,255,255,.25); }
    .bv-t-hero--blue {
      height: 22px;
      background: linear-gradient(120deg, rgba(21,128,61,.35) 0%, rgba(34,197,94,.15) 100%);
    }
    .bv-t-content--varied { flex-direction: row; gap: 2px; }
    .bv-t-block--a { flex: 2; background: rgba(34,197,94,.15); }
    .bv-t-block--b { flex: 1; background: rgba(34,197,94,.1); }

    /* Business name labels */
    .bv-biz-label {
      font-size: 8.5px; font-weight: 700; font-family: 'Manrope', sans-serif;
      color: rgba(255,255,255,.25); text-align: center;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .bv-biz-label--good { color: rgba(255,255,255,.85); }

    /* Signal indicator squares */
    .bv-sigs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
    .bv-sig {
      aspect-ratio: 1; border-radius: 4px;
      display: flex; align-items: center; justify-content: center;
      padding: 4px;
    }
    .bv-sig svg { width: 100%; height: 100%; display: block; }
    .bv-s-bad  { background: rgba(239,68,68,.1);   border: 1px solid rgba(239,68,68,.18);  color: rgba(239,68,68,.5); }
    .bv-s-warn { background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.18); color: rgba(251,191,36,.6); }
    .bv-s-good { background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.25); color: #4ADE80; opacity: 0; transform: scale(0.5); }

    /* Rank badge */
    .bv-rank {
      font-size: 9px; font-weight: 800; font-family: 'Manrope', sans-serif;
      text-align: center; padding: 2px 6px; border-radius: 100px;
      align-self: center;
    }
    .bv-rank--low { background: rgba(255,255,255,.05); color: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.08); }
    .bv-rank--top { background: rgba(34,197,94,.2); color: #4ADE80; border: 1px solid rgba(34,197,94,.3); }

    /* ============================================================
       SCENE 2: SITE LANDING
    ============================================================ */
    .bv-site-nav-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 12px; background: rgba(255,255,255,.03);
      border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
    }
    .bv-snav-logo { width: 28px; height: 5px; border-radius: 2px; background: rgba(29,111,255,.5); flex-shrink: 0; }
    .bv-snav-links { display: flex; gap: 5px; flex: 1; }
    .bv-snav-links span { width: 18px; height: 4px; border-radius: 1px; background: rgba(255,255,255,.07); }
    .bv-snav-cta { font-size: 8.5px; font-weight: 700; font-family: 'Manrope', sans-serif; color: var(--teal); border: 1px solid rgba(0,201,177,.3); border-radius: 3px; padding: 2px 7px; flex-shrink: 0; }
    .bv-site-hero-section {
      flex: 1; padding: 16px 16px 14px;
      background: linear-gradient(140deg, rgba(13,32,81,.95) 0%, rgba(7,18,40,1) 100%);
      display: flex; flex-direction: column; gap: 9px;
      position: relative; overflow: hidden;
    }
    .bv-site-hero-section::before {
      content: ''; position: absolute;
      right: -24px; top: -24px; width: 110px; height: 110px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,201,177,.12), transparent 70%);
      pointer-events: none;
    }
    .bv-site-hero-section::after {
      content: ''; position: absolute;
      left: -16px; bottom: -16px; width: 90px; height: 90px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(29,111,255,.1), transparent 70%);
      pointer-events: none;
    }

    /* ============================================================
       SCENE 3: LEAD STREAM
    ============================================================ */
    .bv-leads-wrap { padding: 0; }
    .bv-leads-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.05); flex-shrink: 0;
    }
    .bv-leads-title { font-size: 10px; font-weight: 700; color: rgba(255,255,255,.45); font-family: 'Manrope', sans-serif; }
    .bv-live-dot { font-size: 9px; color: var(--green); font-weight: 700; font-family: 'Manrope', sans-serif; }
    .bv-leads-list { display: flex; flex-direction: column; flex: 1; }
    .bv-lead {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.04);
      opacity: 0; transform: translateX(-12px);
    }
    .bv-lead-icon {
      width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
    }
    .bv-lead-icon--call { background: rgba(29,111,255,.15); }
    .bv-lead-icon--sms  { background: rgba(0,201,177,.13); }
    .bv-lead-info { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .bv-lead-name   { font-size: 11px; font-weight: 700; color: rgba(255,255,255,.82); font-family: 'Manrope', sans-serif; }
    .bv-lead-detail { font-size: 9.5px; color: rgba(255,255,255,.28); font-family: 'Manrope', sans-serif; }
    .bv-lead-new {
      font-size: 8px; font-weight: 800; color: var(--green);
      background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.22);
      border-radius: 100px; padding: 2px 8px; flex-shrink: 0;
      font-family: 'Manrope', sans-serif;
    }
    .bv-leads-foot {
      display: flex; align-items: center; justify-content: space-between;
      padding: 8px 14px; border-top: 1px solid rgba(255,255,255,.05);
      font-size: 9.5px; color: rgba(255,255,255,.22); font-family: 'Manrope', sans-serif;
      flex-shrink: 0;
    }
    .bv-leads-up { color: var(--green); font-weight: 700; }

    /* ============================================================
       RESPONSIVE — 1024px
    ============================================================ */
    @media (max-width: 1024px) {
      .metric-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ============================================================
       RESPONSIVE — 900px
    ============================================================ */
    @media (max-width: 900px) {
      .problem-inner { grid-template-columns: 1fr; gap: 48px; }
      .problem-visual { max-width: 480px; margin: 0 auto; }
      .scene { flex-direction: column; padding: 20px 18px; gap: 16px; }
      .scene-stage { flex: none; width: 100%; min-height: 160px; }
      .scene::before { top: 0; bottom: auto; left: 16px; right: 16px; width: auto; height: 3px; border-radius: 2px 2px 0 0; }
      .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .process-steps { grid-template-columns: repeat(2, 1fr); }
      .process-steps::before { display: none; }
      .process-step { padding-bottom: 32px; }
      .steps-grid { grid-template-columns: 1fr; }
    }

    /* ============================================================
       RESPONSIVE — 640px
    ============================================================ */
    @media (max-width: 640px) {
      #hero { padding: 100px 0 80px; }
      #difference, #process, #reporting, #audit { padding: 72px 0; }
      #system { padding: 0; }
      #benefits, #faq { padding: 72px 0; }
      .hero-ctas { flex-direction: column; align-items: flex-start; }
      .hero-ctas .btn { width: 100%; max-width: 340px; }
      .hero-sub { font-size: 17px; }
      .footer-grid { grid-template-columns: 1fr; gap: 28px; }
      .footer-bot { flex-direction: column; text-align: center; }
      .foot-legal { flex-wrap: wrap; justify-content: center; }
      .process-steps { grid-template-columns: 1fr; }
      .steps-grid { grid-template-columns: 1fr; }
      .metric-grid { grid-template-columns: 1fr; }
      .callout-grid { grid-template-columns: 1fr; }
      .form-row { grid-template-columns: 1fr; }
.faq-question { padding: 18px 20px; }
      .faq-answer-inner { padding: 0 20px 20px; }
    }

    /* ============================================================
       DESIGN CLEANUP OVERRIDES
    ============================================================ */

    /* --- Hero "See How It Works" plain text link --- */
    .hero-see-how {
      margin-top: 14px;
      font-size: 14px;
    }
    .hero-see-how a {
      color: rgba(255,255,255,.45);
      text-decoration: none;
      transition: color .2s;
    }
    .hero-see-how a:hover { color: rgba(255,255,255,.75); }

    /* --- Hub site card: static shadow, no glow (reused in new diagram) --- */
    .hub-site-card {
      animation: none !important;
      box-shadow: 0 4px 20px rgba(0,0,0,.40) !important;
    }

    /* --- Hero badge dot: no pulse --- */
    .badge-dot { animation: none !important; }

    /* ============================================================
       Search result diagram — "The Moment They Find You" v2
       ============================================================ */

    /* Step narrative labels */
    .srch-step {
      position: absolute;
      font-family: 'DM Sans', sans-serif;
      font-size: 7.5px;
      font-weight: 600;
      color: rgba(255,255,255,.42);
      letter-spacing: .03em;
      z-index: 5;
      white-space: nowrap;
    }

    /* iPhone-style device frame — outer dark metallic shell */
    .srch-phone-wrap {
      position: absolute;
      top: 22px; left: 8px;
      width: 197px; height: 294px;
      background: linear-gradient(160deg, #3c3c3e 0%, #1c1c1e 55%, #2c2c2e 100%);
      border-radius: 30px;
      box-shadow:
        0 0 0 1px rgba(255,255,255,.13),
        0 0 0 2.5px rgba(0,0,0,.85),
        0 20px 60px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.10);
      padding: 8px 7px;
      box-sizing: border-box;
      z-index: 2;
      overflow: visible;
    }
    /* Volume buttons — left side */
    .srch-phone-wrap::before {
      content: '';
      position: absolute;
      left: -3.5px; top: 62px;
      width: 3.5px; height: 56px;
      background: linear-gradient(180deg,
        #2c2c2e 0%, #3a3a3c 30%,
        #1e1e20 46%, #3a3a3c 47%,
        #2c2c2e 100%);
      border-radius: 3px 0 0 3px;
    }
    /* Power / side button — right side */
    .srch-phone-wrap::after {
      content: '';
      position: absolute;
      right: -3.5px; top: 80px;
      width: 3.5px; height: 38px;
      background: linear-gradient(180deg, #2c2c2e 0%, #3a3a3c 50%, #2c2c2e 100%);
      border-radius: 0 3px 3px 0;
    }
    /* Screen area inside the bezel */
    .srch-phone {
      position: relative;
      width: 100%; height: 100%;
      background: rgba(255,255,255,.94);
      border-radius: 22px;
      overflow: hidden;
    }
    /* Dynamic Island notch */
    .srch-phone::before {
      content: '';
      position: absolute;
      top: 7px; left: 50%;
      transform: translateX(-50%);
      width: 52px; height: 10px;
      background: #1c1c1e;
      border-radius: 10px;
      z-index: 10;
    }
    /* Home indicator bar */
    .srch-phone::after {
      content: '';
      position: absolute;
      bottom: 4px; left: 50%;
      transform: translateX(-50%);
      width: 40px; height: 3px;
      background: rgba(0,0,0,.22);
      border-radius: 3px;
    }
    .srch-phone-inner {
      padding: 24px 10px 10px;
      display: flex;
      flex-direction: column;
      gap: 0;
      height: 100%;
      box-sizing: border-box;
    }

    /* Search bar — Google style on white */
    .srch-bar {
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(0,0,0,.06);
      border-radius: 20px;
      padding: 4px 8px;
      margin-bottom: 8px;
      border: 1px solid rgba(0,0,0,.08);
    }
    .srch-query {
      font-family: 'DM Sans', sans-serif;
      font-size: 7.5px;
      color: #202124;
      white-space: nowrap;
      overflow: hidden;
    }

    /* Maps section header */
    .srch-maps-header {
      display: flex;
      align-items: center;
      gap: 3px;
      font-family: 'DM Sans', sans-serif;
      font-size: 7.5px;
      font-weight: 700;
      color: #5F6368;
      margin-bottom: 6px;
      padding-bottom: 5px;
      border-bottom: 1px solid #e0e0e0;
    }

    /* Result rows */
    .srch-result {
      display: flex;
      gap: 7px;
      align-items: flex-start;
    }
    .srch-result--top {
      background: rgba(29,111,255,.06);
      border: 1.5px solid rgba(29,111,255,.35);
      border-radius: 9px;
      padding: 7px;
      margin: 0 -2px;
      animation: resultPulse 4s ease-in-out infinite;
    }
    .srch-result--other {
      opacity: .45;
      padding: 6px 3px 0;
    }
    @keyframes resultPulse {
      0%, 100% { border-color: rgba(29,111,255,.35); }
      50%       { border-color: rgba(29,111,255,.65); box-shadow: 0 0 10px rgba(29,111,255,.14); }
    }

    /* Photo thumbnail — gradient placeholder looks like a real photo */
    .srch-photo {
      width: 38px; height: 38px;
      border-radius: 6px;
      background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
      flex-shrink: 0;
    }

    /* Business name — Google blue link color */
    .srch-name {
      font-family: 'DM Sans', sans-serif;
      font-size: 9px;
      font-weight: 700;
      color: #1A73E8;
      margin-bottom: 1px;
    }
    .srch-name--dim { color: #5F6368; font-weight: 500; font-size: 8px; }

    /* Stars */
    .srch-stars {
      font-size: 9px;
      color: #FBBC05;
      margin-bottom: 1px;
      line-height: 1;
    }
    .srch-stars--dim { color: rgba(251,188,5,.55); font-size: 8px; }
    .srch-rating { font-weight: 700; color: #FBBC05; font-size: 8.5px; }
    .srch-rating--dim { color: rgba(251,188,5,.55); }
    .srch-count { font-size: 7.5px; color: #5F6368; }
    .srch-count--dim { color: #9AA0A6; }

    /* Address line */
    .srch-address {
      font-family: 'DM Sans', sans-serif;
      font-size: 7.5px;
      color: #5F6368;
      margin-bottom: 2px;
    }

    /* Open/meta row */
    .srch-meta {
      display: flex;
      align-items: center;
      gap: 3px;
      font-family: 'DM Sans', sans-serif;
      font-size: 7.5px;
      color: #5F6368;
      margin-bottom: 2px;
    }
    .srch-meta--dim { color: #9AA0A6; font-size: 7px; }

    /* Open status dot */
    .srch-open-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #34A853;
      flex-shrink: 0;
      animation: pulseDot 2s ease infinite;
    }

    /* Review snippet */
    .srch-snippet {
      font-family: 'DM Sans', sans-serif;
      font-size: 7px;
      color: #5F6368;
      font-style: italic;
      line-height: 1.3;
      margin-bottom: 4px;
    }

    /* Call button pill */
    .srch-call-btn {
      display: inline-block;
      padding: 2px 8px;
      border: 1.5px solid #1A73E8;
      border-radius: 12px;
      font-family: 'DM Sans', sans-serif;
      font-size: 7px;
      font-weight: 700;
      color: #1A73E8;
      background: rgba(26,115,232,.06);
    }

    /* Divider between results */
    .srch-divider {
      height: 1px;
      background: #e8eaed;
      margin: 5px 0;
    }

    /* SVG overlay — arc + feed lines */
    .srch-arc {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: visible;
      z-index: 4;
    }
    @keyframes hubFlow {
      to { stroke-dashoffset: -24; }
    }
    .srch-arc-path {
      fill: none;
      stroke: rgba(29,111,255,.60);
      stroke-width: 1.5;
      stroke-dasharray: 4 8;
      stroke-dashoffset: 0;
      stroke-linecap: round;
      animation: hubFlow 1.8s linear infinite;
    }
    .srch-feed-line {
      stroke: rgba(255,255,255,.12);
      stroke-width: 1;
      stroke-dasharray: 2 5;
    }

    /* Website card — override hub-site-card defaults */
    .srch-site-card {
      position: absolute !important;
      top: 94px !important;
      left: 250px !important;
      width: 200px !important;
      height: 165px !important;
      transform: none !important;
      bottom: auto !important;
      z-index: 3 !important;
    }
    /* URL bar text */
    .srch-site-card .hub-chrome-url {
      font-family: 'DM Sans', sans-serif;
      font-size: 7px;
      color: rgba(255,255,255,.45);
      display: flex;
      align-items: center;
      padding-left: 4px;
    }
    /* CTA button inside the page preview */
    .srch-site-cta {
      background: #1D6FFF;
      color: #fff;
      font-family: 'DM Sans', sans-serif;
      font-size: 7px;
      font-weight: 700;
      text-align: center;
      padding: 4px 8px;
      border-radius: 4px;
      margin: 4px 8px 6px;
      letter-spacing: .02em;
    }

    /* Platform badges row */
    .srch-platform-row {
      position: absolute;
      bottom: 14px;
      left: 0; right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    @keyframes srchPlatBadgeIn {
      from { opacity: 0; transform: scale(0) translateY(6px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    .srch-plat-badge {
      width: 26px; height: 26px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      animation: srchPlatBadgeIn 0.4s cubic-bezier(0.175,0.885,0.32,1.275) both;
    }
    .srch-plat-badge:nth-child(1)  { animation-delay: 0.70s; }
    .srch-plat-badge:nth-child(2)  { animation-delay: 0.88s; }
    .srch-plat-badge:nth-child(3)  { animation-delay: 1.06s; }
    .srch-plat-badge:nth-child(4)  { animation-delay: 1.24s; }
    .srch-plat-badge:nth-child(5)  { animation-delay: 1.42s; }
    .srch-plat-badge:nth-child(6)  { animation-delay: 1.60s; }
    .srch-plat-badge:nth-child(7)  { animation-delay: 1.78s; }
    .srch-plat-badge:nth-child(8)  { animation-delay: 1.96s; }
    .srch-plat-badge:nth-child(9)  { animation-delay: 2.14s; }
    .srch-plat-badge:nth-child(10) { animation-delay: 2.32s; }
    .srch-plat-label {
      font-family: 'DM Sans', sans-serif;
      font-size: 8px;
      color: rgba(255,255,255,.30);
      margin-left: 2px;
      white-space: nowrap;
    }

    /* --- Benefit scenes: unified border on small screens --- */
    .scene:nth-child(1),
    .scene:nth-child(2),
    .scene:nth-child(3) {
      border-color: rgba(255,255,255,.1) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,.22) !important;
    }

    /* --- System panels: remove neon glow box-shadows --- */
    .sys-panel--blue,
    .sys-panel--teal {
      box-shadow: 0 8px 32px rgba(0,0,0,.28) !important;
    }

    /* --- System bridge dots: static, no animation or glow --- */
    .sys-bridge-dot {
      animation: none !important;
      box-shadow: none !important;
      top: 50% !important;
      opacity: .4 !important;
    }
    .sys-bridge-dot--teal { opacity: .4 !important; }

    /* --- Service panel call ring pulse: off --- */
    .svcv-ring-pulse { animation: none !important; opacity: 0 !important; }

    /* --- SERP top result: no pulse border --- */
    .svcv-result--top { animation: none !important; }

    /* --- Voice wave bars: slower on mobile --- */
    .svcv-wave-bar {
      animation-duration: 1.8s !important;
    }

    /* --- Metric cards: consistent padding --- */
    .metric-card { padding: 22px !important; }

    /* --- Pain point headlines: light gray instead of red --- */
    .pb-pain { color: rgba(255,255,255,.80) !important; }
    .problem-x svg { stroke: rgba(255,255,255,.30) !important; }
    #problem .problem-x { background: rgba(255,255,255,.06) !important; }

    /* --- Problem section: explicit left-align --- */
    .problem-content { text-align: left !important; }

    /* --- 3-step timeline connector: solid color, no gradient --- */
    #process .process-steps::before {
      background: rgba(255,255,255,.15) !important;
    }

    /* --- Process step number circles: remove neon outer glow --- */
    .process-step:nth-child(1) .step-num,
    .process-step:nth-child(2) .step-num,
    .process-step:nth-child(3) .step-num {
      box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
    }



/* ============================================================
   LIGHT-DARK RHYTHM
   Creates visual breathing room between cinematic dark beats.
   Rhythm: Dark hero → Light → Dark cinematic → Dark services →
           Light benefits → Dark difference → Light process →
           Dark reporting → Light FAQ → Dark CTA
============================================================ */

/* ── System / Cinematic → richer deep blue ─────────────────── */
#system {
  background: linear-gradient(
    180deg,
    #070E1E 0%,
    #0D1B30 35%,
    #0B1F38 65%,
    #0A1C34 100%
  );
}
/* ── Benefits → soft blue-white with white cards ───────────── */
#benefits {
  background: #EEF4FF;
}
#benefits::before,
#benefits::after { display: none; }

.benefits-head h2 { color: var(--text); }
.benefits-head p  { color: var(--muted); }

/* Scenes on light bg */
.scene { background: var(--white); }
.scene h3 { color: var(--text); }
.scene p  { color: var(--muted); }
.scene-step { color: rgba(13,27,51,.25); }
.scene:nth-child(1) .scene-step { color: rgba(29,111,255,.5); }
.scene:nth-child(2) .scene-step { color: rgba(0,201,177,.5); }
.scene:nth-child(3) .scene-step { color: rgba(34,197,94,.5); }

/* Scene stage always stays dark — it's a device/screen mockup */
.scene-stage { background: #0A1628; }
.bv-biz       { background: #0A1628; }
.bv-biz--good { background: rgba(10,50,20,.5); }
.bv-site-thumb { background: #111827; }

/* ── Process → white ────────────────────────────────────────── */
#process {
  background: var(--white);
}
#process::before { display: none; }
.process-head h2 { color: var(--text); }
.process-head p  { color: var(--muted); }
.step-label      { color: var(--blue); }
.process-step h3 { color: var(--text); }
.process-step p  { color: var(--muted); }
/* Restore step-num circle — base white bg so nth-child glows read clearly */
.step-num { background: var(--white); border-color: var(--border); box-shadow: none; }
/* Re-apply individual glow rings on white bg */
.process-step:nth-child(1) .step-num {
  border-color: rgba(29,111,255,.45);
  color: #4B8BF5;
  box-shadow: 0 0 0 7px rgba(29,111,255,.06), 0 0 22px rgba(29,111,255,.14);
}
.process-step:nth-child(2) .step-num {
  border-color: rgba(0,201,177,.38);
  color: var(--teal);
  box-shadow: 0 0 0 7px rgba(0,201,177,.06), 0 0 22px rgba(0,201,177,.12);
}
.process-step:nth-child(3) .step-num {
  border-color: rgba(34,197,94,.35);
  color: var(--green);
  box-shadow: 0 0 0 7px rgba(34,197,94,.06), 0 0 22px rgba(34,197,94,.10);
}

/* ── Process → visual step cards ────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .steps-grid { grid-template-columns: 1fr; }
}
.step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s, transform .2s;
}
.step:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.prob-vis { width: 100%; overflow: hidden; line-height: 0; }
.prob-vis svg { width: 100%; height: auto; display: block; }
.step-body { padding: 28px; }
.step-body .step-num {
  width: 30px;
  height: 30px;
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  margin-bottom: 16px;
}
.step h3 { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 10px; letter-spacing: -0.01em; }
.step p  { font-size: 14px; color: var(--muted); line-height: 1.65; }
.step .step-label { color: var(--blue); margin-bottom: 6px; }

/* ── FAQ → white ────────────────────────────────────────────── */
#faq {
  background: var(--white);
  border-top: 1px solid var(--border);
}
#faq::before { display: none; }
.faq-head h2               { color: var(--text); }
.faq-head p                { color: var(--muted); }
.faq-list {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.faq-item                  { border-bottom-color: var(--border); }
.faq-question              { color: var(--text); background: transparent; }
.faq-question:hover        { background: var(--off-white); }
.faq-question.open         { color: var(--blue); }
.faq-chevron               { color: var(--muted); }
.faq-question.open .faq-chevron { color: var(--blue); }
.faq-answer-inner          { color: var(--muted); }

/* ============================================================
   BOOKING MODAL
============================================================ */
#bookingOverlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 34, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 149;
}

#bookingModal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  align-items: center;
  justify-content: center;
  padding: 20px;
  pointer-events: none;
}

#bookingClose {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.12);
  color: #444;
  border-radius: 50%;
  width: 34px;
  height: 34px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  pointer-events: auto;
  z-index: 2;
  transition: background .2s;
}
#bookingClose:hover { background: rgba(0,0,0,.2); }

#ghl-booking-container {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 80px rgba(0,0,0,.45);
  pointer-events: auto;
  min-height: 600px;
}

#ghl-booking-container iframe {
  width: 100%;
  display: block;
  border: none;
  min-height: 600px;
}

@media (max-width: 480px) {
  #bookingModal { padding: 0; align-items: flex-end; }
  #ghl-booking-container {
    border-radius: 16px 16px 0 0;
    max-height: 95vh;
    min-height: 500px;
  }
}

/* Platform badge row must be re-centered AFTER the base definition (line ~2342)
   to win the cascade. Hub left = 50% of hero-graphic − 107px, so hub x=107 maps
   exactly to the viewport horizontal center. */
@media (max-width: 960px) {
  .srch-platform-row {
    top: 322px !important;
    bottom: auto !important;
    left: 107px !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 350px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }
  .srch-plat-label { width: 100%; text-align: center; margin-top: 4px; }
}

/* ============================================================
   HOW IT WORKS — BENTO GRID
============================================================ */
#how-it-works {
  background: var(--navy-alt);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
#how-it-works::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, rgba(29,111,255,.06) 0%, rgba(0,201,177,.03) 40%, transparent 65%);
  pointer-events: none;
}
#how-it-works .container { position: relative; z-index: 1; }

.hiw-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto 60px;
}
.hiw-head h2 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  font-weight: 800;
  color: var(--white);
  margin-bottom: 0;
}
.hiw-head h2 em {
  font-style: normal;
  background: linear-gradient(125deg, #60A5FA, var(--teal));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

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

.hiw-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, background .25s;
}
.hiw-card--blue { border-color: rgba(29,111,255,.2); }
.hiw-card--blue:hover { border-color: rgba(29,111,255,.4); background: rgba(29,111,255,.04); }
.hiw-card--red  { border-color: rgba(239,68,68,.2); }
.hiw-card--red:hover  { border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.03); }
.hiw-card--teal { border-color: rgba(0,201,177,.2); }
.hiw-card--teal:hover { border-color: rgba(0,201,177,.4); background: rgba(0,201,177,.03); }

/* ── Mockup area ── */
.hiw-mock {
  flex: 1;
  padding: 28px 28px 20px;
  display: flex;
  align-items: flex-start;
}

/* ── Browser chrome (card 01) ── */
.hiw-browser {
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}
.hiw-browser-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 12px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hiw-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.hiw-dot--r { background: rgba(255,82,82,.5); }
.hiw-dot--y { background: rgba(255,189,89,.5); }
.hiw-dot--g { background: rgba(62,207,112,.5); }
.hiw-url {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  margin-left: 8px;
  font-family: 'DM Sans', sans-serif;
}

/* ── Scan wrap: positions skeleton + scanline + results ── */
.hiw-scan-wrap {
  position: relative;
  overflow: hidden;
}

/* ── Website skeleton ── */
.hiw-site-skel {
  padding: 10px 10px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hiw-skel-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
}
.hiw-skel-logo {
  width: 36px; height: 10px;
  background: rgba(255,255,255,.18);
  border-radius: 3px;
}
.hiw-skel-navlinks {
  display: flex;
  gap: 6px;
}
.hiw-skel-link {
  width: 22px; height: 7px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
}
.hiw-skel-hero {
  height: 56px;
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.04) 75%);
  background-size: 8px 8px;
}
.hiw-skel-cols {
  display: flex;
  gap: 5px;
}
.hiw-skel-col {
  flex: 1;
  height: 32px;
  background: rgba(255,255,255,.04);
  border-radius: 4px;
}
.hiw-skel-texts {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-bottom: 10px;
}
.hiw-skel-txt {
  height: 7px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
}
.hiw-skel-txt--short { width: 60%; }

/* ── Scan line ── */
.hiw-scanline {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--blue) 30%, rgba(100,180,255,1) 50%, var(--blue) 70%, transparent 100%);
  box-shadow: 0 0 6px 2px rgba(29,111,255,.6), 0 0 18px 4px rgba(29,111,255,.25);
  animation-name: hiwScan;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}
.hiw-card.in .hiw-scanline { animation-play-state: running; }

.hiw-scanline-glow {
  position: absolute;
  top: 2px; left: 0; right: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(29,111,255,.15), transparent);
  pointer-events: none;
}

@keyframes hiwScan {
  0%   { top: 0px; }
  48%  { top: calc(100% - 2px); }
  52%  { top: calc(100% - 2px); }
  100% { top: 0px; }
}

/* ── Results that pop in ── */
.hiw-scan-results {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 10px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.hiw-res {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  font-family: 'DM Sans', sans-serif;
  opacity: 0;
  transform: translateY(5px);
  animation-name: hiwResPop;
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.hiw-card.in .hiw-res { animation-play-state: running; }
.hiw-card.in .hiw-res:nth-child(1) { animation-delay: 1.6s; }
.hiw-card.in .hiw-res:nth-child(2) { animation-delay: 1.85s; }
.hiw-card.in .hiw-res:nth-child(3) { animation-delay: 2.1s; }
.hiw-card.in .hiw-res:nth-child(4) { animation-delay: 2.35s; }
.hiw-card.in .hiw-res:nth-child(5) { animation-delay: 2.6s; }

@keyframes hiwResPop {
  to { opacity: 1; transform: translateY(0); }
}

.hiw-res--bad {
  color: rgba(239,68,68,.95);
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.25);
}
.hiw-res--good {
  color: rgba(34,197,94,.9);
  background: rgba(34,197,94,.1);
  border: 1px solid rgba(34,197,94,.2);
}

/* ── Issues list (card 02) ── */
.hiw-issues {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hiw-issues-title {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hiw-issues-count {
  background: rgba(239,68,68,.15);
  border: 1px solid rgba(239,68,68,.3);
  color: rgba(239,68,68,.9);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
}
.hiw-issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(239,68,68,.06);
  border: 1px solid rgba(239,68,68,.12);
  border-radius: 8px;
}
.hiw-xi {
  color: rgba(239,68,68,.8);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.hiw-issue-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.hiw-issue-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  font-family: 'DM Sans', sans-serif;
}
.hiw-sev {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  white-space: nowrap;
  font-family: 'DM Sans', sans-serif;
}
.hiw-sev--crit {
  background: rgba(239,68,68,.2);
  color: rgba(239,68,68,.95);
  border: 1px solid rgba(239,68,68,.3);
}
.hiw-sev--high {
  background: rgba(251,146,60,.15);
  color: rgba(251,146,60,.9);
  border: 1px solid rgba(251,146,60,.25);
}

/* ── Fixes list (card 03) ── */
.hiw-fixes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hiw-fixes-title {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.4);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.hiw-fix-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: rgba(0,201,177,.06);
  border: 1px solid rgba(0,201,177,.15);
  border-radius: 8px;
}
.hiw-ck {
  color: var(--teal);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.hiw-fix-lbl {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  font-family: 'DM Sans', sans-serif;
}
.hiw-ranking-pill {
  margin-top: 4px;
  padding: 8px 14px;
  background: rgba(0,201,177,.1);
  border: 1px solid rgba(0,201,177,.3);
  border-radius: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--teal);
  font-family: 'DM Sans', sans-serif;
}
.hiw-ranking-pill strong { font-weight: 800; color: var(--white); }

/* ── Automation flow (card 04) ── */
.hiw-flow {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hiw-flow-step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
}
.hiw-flow-step--active {
  background: rgba(29,111,255,.08);
  border-color: rgba(29,111,255,.25);
}
.hiw-flow-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.hiw-flow-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  font-family: 'DM Sans', sans-serif;
}
.hiw-flow-sub {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  font-family: 'DM Sans', sans-serif;
  margin-left: auto;
}
.hiw-flow-arrow { font-size: 14px; color: rgba(255,255,255,.2); text-align: center; }

/* ── CRM dashboard mockup (card 04) ── */
.hiw-crm { width: 100%; }
.hiw-crm-body { padding: 10px 12px 12px; }
.hiw-crm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.hiw-crm-stat {
  background: rgba(29,111,255,.07);
  border: 1px solid rgba(29,111,255,.14);
  border-radius: 8px;
  padding: 8px 6px 6px;
  text-align: center;
}
.hiw-crm-stat-num {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.04em;
}
.hiw-crm-stat-label {
  display: block;
  font-size: 9px;
  color: rgba(255,255,255,.4);
  margin-top: 3px;
  font-family: 'DM Sans', sans-serif;
}
.hiw-crm-rows {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.hiw-crm-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  opacity: 0;
  transform: translateX(-6px);
}
.hiw-card.in .hiw-crm-row--1 { animation: crmRowIn .35s ease forwards; animation-delay: .15s; }
.hiw-card.in .hiw-crm-row--2 { animation: crmRowIn .35s ease forwards; animation-delay: .35s; }
.hiw-card.in .hiw-crm-row--3 { animation: crmRowIn .35s ease forwards; animation-delay: .55s; }
@keyframes crmRowIn { to { opacity: 1; transform: translateX(0); } }
.hiw-crm-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hiw-crm-dot--green  { background: #22C55E; box-shadow: 0 0 6px rgba(34,197,94,.6); }
.hiw-crm-dot--blue   { background: #1D6FFF; box-shadow: 0 0 6px rgba(29,111,255,.6); }
.hiw-crm-dot--yellow { background: #F59E0B; box-shadow: 0 0 6px rgba(245,158,11,.6); }
.hiw-crm-name {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 50px;
}
.hiw-crm-job {
  font-size: 10px;
  color: rgba(255,255,255,.35);
  font-family: 'DM Sans', sans-serif;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hiw-crm-status {
  font-size: 9.5px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  padding: 2px 8px;
  border-radius: 100px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hiw-crm-status--ai      { background: rgba(34,197,94,.12); color: #4ADE80; border: 1px solid rgba(34,197,94,.22); }
.hiw-crm-status--booked  { background: rgba(29,111,255,.12); color: #60A5FA; border: 1px solid rgba(29,111,255,.22); }
.hiw-crm-status--followup{ background: rgba(245,158,11,.12); color: #FCD34D; border: 1px solid rgba(245,158,11,.2); }
.hiw-crm-footer-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.14);
  border-radius: 7px;
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  font-family: 'DM Sans', sans-serif;
}
.hiw-crm-check {
  color: #22C55E;
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .hiw-crm-row { opacity: 1; transform: none; }
}

/* ── Card footer ── */
.hiw-footer {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 28px 28px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.hiw-step {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.25);
  letter-spacing: .08em;
  padding-top: 3px;
  flex-shrink: 0;
}
.hiw-copy h3 {
  font-family: 'Manrope', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  margin-bottom: 6px;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.hiw-copy p {
  font-size: 13.5px;
  color: rgba(255,255,255,.45);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 700px) {
  .hiw-grid { grid-template-columns: 1fr; }
  .hiw-mock { padding: 20px 20px 14px; }
  .hiw-footer { padding: 16px 20px 22px; }
}

/* ============================================================
   BENTO SYSTEM
============================================================ */

#system { padding: 100px 0; }

.bento-head {
  text-align: center;
  margin-bottom: 52px;
}
.bento-head h2 {
  font-family: 'Manrope', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 14px;
}
.bento-head p {
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  color: rgba(255,255,255,.5);
  margin: 0;
}

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

.bento-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r, 16px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.bento-card.in { opacity: 1; transform: none; }
.bento-card:nth-child(2) { transition-delay: .08s; }
.bento-card:nth-child(3) { transition-delay: .16s; }
.bento-card:nth-child(4) { transition-delay: .22s; }
.bento-card:nth-child(5) { transition-delay: .28s; }

.bento-card-a { grid-column: 1 / 8;  grid-row: 1 / 3; }
.bento-card-b { grid-column: 8 / 13; grid-row: 1; }
.bento-card-c { grid-column: 8 / 11; grid-row: 2; }
.bento-card-d { grid-column: 11 / 13; grid-row: 2; }
.bento-card-e { grid-column: 1 / 13;  grid-row: 3; }

.bento-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue, #1D6FFF);
}
.bento-card-c .bento-label,
.bento-card-d .bento-label { color: var(--teal, #00C9B1); }
.bento-card-e .bento-label { color: var(--teal, #00C9B1); }

.bento-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin: 0;
  letter-spacing: -.02em;
}
.bento-card-a .bento-title { font-size: 1.5rem; }

.bento-mock {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento-mock--fill { align-items: flex-start; }
.bento-mock--row  { gap: 14px; flex-wrap: wrap; }

/* ── Card A: SERP mockup ───────────────────────────────────── */
.bento-serp {
  width: 100%;
  max-width: 400px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
.bento-serp-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px 10px;
  border-bottom: 1px solid #e8eaed;
  background: #f8f9fa;
}
.bento-serp-query {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #3c4043;
}
.bento-serp-maps-label {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  background: #f8f9fa;
  border-bottom: 1px solid #e8eaed;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #666;
}
.bento-serp-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
}
.bento-serp-result + .bento-serp-result { border-top: 1px solid #f0f0f0; }
.bento-serp-badge {
  flex-shrink: 0;
  background: var(--blue, #1D6FFF);
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bento-serp-info { flex: 1; min-width: 0; }
.bento-serp-name {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1a0dab;
  margin-bottom: 2px;
}
.bento-serp-stars {
  font-size: 11px;
  color: #fbbc04;
  margin-bottom: 2px;
}
.bento-serp-stars span { color: #3c4043; font-size: 10px; }
.bento-serp-count { color: #888; }
.bento-serp-meta {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #555;
}
.bento-serp-open { color: #137333; font-weight: 600; }
.bento-serp-result--dim .bento-serp-name { color: #9aa0a6; font-weight: 400; }
.bento-serp-result--dim .bento-serp-stars { color: #ddd; }
.bento-serp-result--dim .bento-serp-stars span { color: #aaa; }
.bento-serp-result--dim .bento-serp-meta { color: #bbb; }

/* ── Card B: AI call card ──────────────────────────────────── */
.bento-call-card {
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bento-call-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bento-call-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(29,111,255,.15);
  border: 1px solid rgba(29,111,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue, #1D6FFF);
  flex-shrink: 0;
}
.bento-call-info { flex: 1; }
.bento-call-name {
  font-family: 'Manrope', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  margin-bottom: 2px;
}
.bento-call-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.38);
}
.bento-call-rings {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
}
.bento-call-status {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bento-call-answered {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal, #00C9B1);
}
.bento-call-capture {
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,.38);
  flex: 1;
}
.bento-pulse-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green, #22C55E);
  flex-shrink: 0;
  animation: bentoPulse 1.8s ease-in-out infinite;
}
@keyframes bentoPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(34,197,94,0); }
}

/* ── Card C: Google Reviews ────────────────────────────────── */
.bento-reviews {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.bento-reviews-stars {
  font-size: 24px;
  color: #fbbf24;
  letter-spacing: .05em;
  line-height: 1;
}
.bento-reviews-score {
  font-family: 'Manrope', sans-serif;
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.bento-reviews-count {
  font-size: 14px;
  color: rgba(255,255,255,.4);
}
.bento-reviews-badge {
  background: rgba(0,201,177,.12);
  border: 1px solid rgba(0,201,177,.28);
  color: var(--teal, #00C9B1);
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  border-radius: 100px;
  padding: 5px 14px;
}

/* ── Card D: Automations timeline ──────────────────────────── */
.bento-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.bento-tl-step {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bento-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bento-tl-dot--blue  { background: var(--blue, #1D6FFF); }
.bento-tl-dot--teal  { background: var(--teal, #00C9B1); }
.bento-tl-dot--green { background: var(--green, #22C55E); }
.bento-tl-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,.72);
}
.bento-tl-connector {
  width: 1px;
  height: 18px;
  background: rgba(255,255,255,.12);
  margin: 2px 0 2px 5px;
}

/* ── Card E: Monthly Reporting metrics ─────────────────────── */
.bento-metric-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 10px 22px;
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.bento-metric-up {
  color: var(--green, #22C55E);
  font-size: 16px;
}

/* ── Bento mobile: all cards full-width stack ──────────────── */
@media (max-width: 900px) {
  .bento-grid { grid-template-columns: 1fr; }
  .bento-card-a,
  .bento-card-b,
  .bento-card-c,
  .bento-card-d,
  .bento-card-e { grid-column: 1 / -1; grid-row: auto; }
  #system { padding: 72px 0; }
}