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

    :root {
      --bg: #ffffff;
      --surface: #ffffff;
      --surface-alt: #f4f4f5;
      --border: #e4e4e7;
      --text: #18181b;
      --text-secondary: #3f3f46;
      --muted: #71717a;
      --brand: #FF0000;
      --brand-hover: #CC0000;
      --brand-light: #FFE5E5;
      --navy: #15233f;
      --green: #22c55e;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      max-width: 720px;
      margin: 0 auto;
      padding: 0 24px;
    }

    /* NAV (sticky floating pill) */
    .nav-wrap {
      position: sticky;
      top: 16px;
      z-index: 100;
      padding: 0 24px;
      margin-top: 16px;
    }
    .nav-bar {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      gap: 16px;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 16px;
      padding: 12px 16px;
      box-shadow: none;
      transition: background 0.3s ease, border-color 0.3s ease,
        box-shadow 0.3s ease, backdrop-filter 0.3s ease;
    }
    .nav-wrap.is-scrolled .nav-bar {
      background: rgba(255, 255, 255, 0.75);
      border-color: var(--border);
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
      -webkit-backdrop-filter: saturate(180%) blur(12px);
      backdrop-filter: saturate(180%) blur(12px);
    }
    .nav-logo {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: var(--text);
      text-decoration: none;
    }
    .nav-logo span { color: var(--brand); }
    .nav-logo-mark {
      width: 28px;
      height: 28px;
      margin-right: 8px;
      object-fit: contain;
    }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 4px;
      list-style: none;
      margin: 0 auto;
    }
    .nav-links a {
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: -0.09px;
      color: var(--text);
      text-decoration: none;
      transition: background 0.2s;
    }
    .nav-links a:hover { background: var(--surface-alt); }
    .nav-cta-group {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .btn-google {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 18px;
      background: #fff;
      border: 1.5px solid #d0d5dd;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s;
    }
    .btn-google:hover { background: var(--surface-alt); }
    .btn-google .g-icon { flex-shrink: 0; }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 11px 20px;
      background: var(--brand);
      color: #fff;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    }
    .btn-primary:hover {
      background: var(--brand-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(255, 0, 0, 0.25);
    }
    .btn-primary .btn-arrow { flex-shrink: 0; }

    /* Burger + mobile menu */
    .nav-burger {
      display: none;
      position: relative;
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border: 1px solid var(--border);
      border-radius: 50%;
      background: #fff;
      cursor: pointer;
    }
    .nav-burger span {
      position: absolute;
      left: 50%;
      width: 16px;
      height: 2px;
      background: var(--text);
      border-radius: 2px;
      transform: translateX(-50%);
      transition: transform 0.25s, opacity 0.2s;
    }
    .nav-burger span:nth-child(1) { top: 13px; }
    .nav-burger span:nth-child(2) { top: 50%; margin-top: -1px; }
    .nav-burger span:nth-child(3) { bottom: 13px; }
    .nav-burger.is-open span:nth-child(1) { top: 50%; margin-top: -1px; transform: translateX(-50%) rotate(45deg); }
    .nav-burger.is-open span:nth-child(2) { opacity: 0; }
    .nav-burger.is-open span:nth-child(3) { bottom: auto; top: 50%; margin-top: -1px; transform: translateX(-50%) rotate(-45deg); }

    .nav-mobile {
      position: absolute;
      top: 100%;
      left: 24px;
      right: 24px;
      max-width: 1080px;
      margin: 8px auto 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }
    .nav-mobile[hidden] { display: none; }
    .nav-mobile > a:not(.btn-google):not(.btn-primary) {
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
      text-decoration: none;
    }
    .nav-mobile > a:not(.btn-google):not(.btn-primary):hover { background: var(--surface-alt); }
    .btn-google-block,
    .btn-primary-block {
      justify-content: center;
      margin-top: 6px;
    }

    @media (max-width: 1023px) {
      .nav-links { display: none; }
      .nav-cta-group { display: none; }
      .nav-burger { display: block; margin-left: auto; }
    }
    @media (max-width: 360px) {
      .nav-wrap { padding: 0 12px; }
      .nav-mobile { left: 12px; right: 12px; }
    }

    /* HERO (editorial: left-aligned, oversized type, product below) */
    .hero {
      padding: 72px 0 64px;
      text-align: left;
      background: var(--surface);
    }
    .hero .container {
      max-width: 1080px;
    }
    .hero-copy {
      max-width: 880px;
    }
    h1 {
      font-size: clamp(40px, 7vw, 76px);
      font-weight: 800;
      line-height: 1.04;
      letter-spacing: -2.5px;
      margin-bottom: 24px;
      color: var(--text);
    }
    h1 em {
      font-style: normal;
      color: var(--brand);
    }
    .subtitle {
      font-size: clamp(17px, 1.6vw, 20px);
      color: var(--muted);
      max-width: 560px;
      margin: 0 0 32px;
      line-height: 1.6;
    }
    .cta-btn {
      display: inline-block;
      padding: 14px 36px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      text-decoration: none;
      transition: background 0.2s, box-shadow 0.2s;
    }
    .cta-btn:hover {
      background: var(--brand-hover);
      box-shadow: 0 4px 20px rgba(255, 0, 0, 0.15);
    }

    /* BUILT BY BADGE */
    .built-by {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 14px;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 100px;
      font-size: 12px;
      color: var(--muted);
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .built-by:hover {
      background: #18181b;
      border-color: #18181b;
      color: #fff;
      transform: translateY(-1px);
    }
    .built-by-label {
      font-weight: 500;
    }
    .built-by svg {
      flex-shrink: 0;
    }
    .built-by-pfp {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      object-fit: cover;
      flex-shrink: 0;
      background: var(--border);
    }
    .built-by-x {
      opacity: 0.6;
    }
    .built-by-handle {
      font-weight: 600;
      color: var(--text);
      transition: color 0.2s ease;
    }
    .built-by:hover .built-by-handle {
      color: #fff;
    }

    /* SCROLL REVEAL */
    [data-reveal] {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }
    [data-reveal].in-view {
      opacity: 1;
      transform: translateY(0);
    }
    [data-reveal-stagger] > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    [data-reveal-stagger].in-view > * { opacity: 1; transform: translateY(0); }
    [data-reveal-stagger].in-view > *:nth-child(1) { transition-delay: 0.05s; }
    [data-reveal-stagger].in-view > *:nth-child(2) { transition-delay: 0.15s; }
    [data-reveal-stagger].in-view > *:nth-child(3) { transition-delay: 0.25s; }
    [data-reveal-stagger].in-view > *:nth-child(4) { transition-delay: 0.35s; }
    [data-reveal-stagger].in-view > *:nth-child(5) { transition-delay: 0.45s; }

    @media (prefers-reduced-motion: reduce) {
      [data-reveal], [data-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* CARD HOVER LIFT */
    .step, .benefit, .pain-points li {
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease;
    }
    .step:hover, .benefit:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
      border-color: rgba(255, 0, 0, 0.2);
    }
    .pain-points li:hover {
      border-color: rgba(255, 0, 0, 0.2);
    }

    /* SUBTLE BADGE FLOAT */
    .badge {
      animation: badgeFloat 4s ease-in-out infinite;
    }
    @keyframes badgeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    /* CTA BREATHING GLOW */
    .cta-btn {
      position: relative;
    }
    .cta-btn::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 8px;
      box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.45);
      animation: ctaPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
      pointer-events: none;
    }
    @keyframes ctaPulse {
      0% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.4); }
      70% { box-shadow: 0 0 0 14px rgba(255, 0, 0, 0); }
      100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
    }

    /* HERO BROWSER WINDOW (wraps the GSC + ChatGPT proofs in one chrome) */
    .browser {
      max-width: 100%;
      margin: 48px 0 0;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 16px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.10);
      overflow: hidden;
      text-align: left;
    }
    .browser-tabs {
      display: flex;
      align-items: flex-end;
      gap: 4px;
      padding: 9px 10px 0;
      background: #e7e8ec;
    }
    .browser-tab {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 16px;
      border: none;
      border-radius: 10px 10px 0 0;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      color: #5f6368;
      cursor: pointer;
      transition: background 0.18s ease, color 0.18s ease;
      white-space: nowrap;
    }
    .browser-tab:hover { background: rgba(255, 255, 255, 0.55); }
    .browser-tab.is-active {
      background: #fff;
      color: var(--text);
    }
    .browser-tab-fav {
      width: 18px;
      height: 18px;
      border-radius: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex: none;
    }
    .browser-tab-fav-gsc { background: #4285f4; color: #fff; }
    .browser-tab-fav-ai { background: #10a37f; }
    .browser-tab-hint {
      margin-left: auto;
      align-self: center;
      padding-right: 8px;
      font-size: 12px;
      font-weight: 600;
      color: var(--brand);
      animation: tabHintNudge 2.6s ease-in-out infinite;
    }
    @keyframes tabHintNudge {
      0%, 100% { transform: translateX(0); opacity: 0.85; }
      50% { transform: translateX(4px); opacity: 1; }
    }
    .browser-toolbar {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 10px 16px;
      background: #fff;
      border-bottom: 1px solid var(--border);
    }
    .browser-dots { display: inline-flex; gap: 7px; flex: none; }
    .browser-dots i {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      display: block;
    }
    .browser-dots i:nth-child(1) { background: #ff5f57; }
    .browser-dots i:nth-child(2) { background: #febc2e; }
    .browser-dots i:nth-child(3) { background: #28c840; }
    .browser-url {
      flex: 1;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 7px 14px;
      font-size: 12.5px;
      color: var(--muted);
    }
    .browser-url svg { flex: none; opacity: 0.7; }
    .browser-url span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .browser-body { padding: 16px; }
    .browser-panel { animation: panelFade 0.32s ease; }
    .browser-panel[hidden] { display: none; }
    @keyframes panelFade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* HERO GSC CHART */
    .gsc-chart {
      max-width: 100%;
      margin: 0;
      background: #fff;
      text-align: left;
    }
    .gsc-stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--border);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 14px;
    }
    .gsc-stat {
      padding: 14px 16px;
      background: #fff;
      position: relative;
    }
    .gsc-stat-clicks { background: #4285f4; color: #fff; }
    .gsc-stat-impressions { background: #6741d9; color: #fff; }
    .gsc-stat-label {
      font-size: 11px;
      font-weight: 500;
      margin-bottom: 4px;
      display: flex;
      align-items: center;
      gap: 6px;
      opacity: 0.95;
    }
    .gsc-stat-label::before {
      content: '';
      width: 12px;
      height: 12px;
      border: 1.5px solid currentColor;
      border-radius: 2px;
      display: inline-block;
      flex-shrink: 0;
      opacity: 0.7;
    }
    .gsc-stat-clicks .gsc-stat-label::before,
    .gsc-stat-impressions .gsc-stat-label::before {
      background: currentColor;
    }
    .gsc-stat-value {
      font-size: 22px;
      font-weight: 500;
      letter-spacing: -0.5px;
      font-variant-numeric: tabular-nums;
    }
    .gsc-stat-muted .gsc-stat-label,
    .gsc-stat-muted .gsc-stat-value {
      color: #5f6368;
    }
    .gsc-chart-area {
      position: relative;
      padding: 8px 0 0;
    }
    .gsc-chart-area svg {
      width: 100%;
      height: auto;
      display: block;
    }
    .gsc-chart-grid {
      stroke: #f1f3f4;
      stroke-width: 1;
    }
    .gsc-chart-axis {
      fill: #5f6368;
      font-size: 10px;
      font-family: 'Inter', sans-serif;
    }
    .line-impressions, .line-clicks {
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: 2400;
      stroke-dashoffset: 2400;
      animation: drawLine 3.2s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
    }
    .line-impressions { stroke: #6741d9; }
    .line-clicks {
      stroke: #4285f4;
      animation-delay: 0.7s;
    }
    @keyframes drawLine {
      to { stroke-dashoffset: 0; }
    }
    .gsc-hover {
      position: absolute;
      inset: 8px 0 0;
      opacity: 0;
      transition: opacity 0.12s ease;
      pointer-events: none;
    }
    .gsc-chart-area.is-hovering .gsc-hover { opacity: 1; }
    .gsc-crosshair {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 1px;
      background: rgba(60, 64, 67, 0.35);
      transform: translateX(-0.5px);
      transition: left 0.09s ease;
    }
    .gsc-dot {
      position: absolute;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      border: 2px solid #fff;
      transform: translate(-50%, -50%);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
      transition: left 0.09s ease, top 0.09s ease;
    }
    .gsc-dot-impr { background: #6741d9; }
    .gsc-dot-clk { background: #4285f4; }
    .gsc-tip {
      position: absolute;
      top: 4px;
      transform: translateX(-50%);
      background: #fff;
      border: 1px solid #e8eaed;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 12px;
      line-height: 1.5;
      color: #3c4043;
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
      white-space: nowrap;
    }
    .gsc-tip-row { display: flex; align-items: center; gap: 6px; }
    .gsc-tip-row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
    .gsc-tip-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
    .gsc-tip-dot-impr { background: #6741d9; }
    .gsc-tip-dot-clk { background: #4285f4; }
    .gsc-tip { z-index: 2; }
    .gsc-joinline {
      position: absolute;
      top: 8px;
      bottom: 0;
      left: 56%;
      width: 2px;
      transform: translateX(-1px);
      background: repeating-linear-gradient(to bottom, var(--brand) 0 5px, transparent 5px 11px);
      opacity: 0;
      animation: gscJoinFade 0.6s ease-out 2.4s forwards;
      pointer-events: none;
      z-index: 1;
    }
    @keyframes gscJoinFade { to { opacity: 0.55; } }
    .gsc-annotation {
      position: absolute;
      top: 26px;
      left: 56%;
      transform: translateX(-50%);
      background: var(--brand);
      color: #fff;
      padding: 7px 14px;
      border-radius: 7px;
      font-size: 12px;
      font-weight: 700;
      white-space: nowrap;
      opacity: 0;
      z-index: 5;
      animation: fadeInUp 0.6s ease-out 2.4s forwards;
      box-shadow: 0 6px 18px rgba(255, 0, 0, 0.38);
    }
    .gsc-annotation::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid var(--brand);
    }
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateX(-50%) translateY(8px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* AI citation example (GEO companion to the GSC chart) */
    .ai-cite {
      max-width: 100%;
      margin: 0;
      background: #fff;
      text-align: left;
    }
    .ai-cite-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .ai-cite-mark {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: #10a37f;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .ai-cite-name { font-weight: 700; font-size: 14px; color: var(--text); }
    .ai-cite-q {
      background: var(--surface-alt);
      border-radius: 12px;
      padding: 10px 14px;
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 600;
      margin-bottom: 14px;
    }
    .ai-cite-blank {
      display: inline-block;
      min-width: 130px;
      color: var(--brand-hover);
      font-weight: 700;
      border-bottom: 2px dashed rgba(255, 0, 0, 0.45);
      padding: 0 2px;
    }
    .ai-cite-blank::after {
      content: '';
      display: inline-block;
      width: 1.5px;
      height: 1em;
      vertical-align: -2px;
      margin-left: 1px;
      background: var(--brand);
      animation: aiCaret 0.9s steps(1) infinite;
    }
    .ai-cite-typed {
      font-size: 14px;
      line-height: 1.6;
      color: var(--text);
      margin: 0;
      min-height: 4.8em;
    }
    .ai-cite-typed::after {
      content: '';
      display: inline-block;
      width: 7px;
      height: 1.05em;
      vertical-align: text-bottom;
      margin-left: 2px;
      background: var(--brand);
      opacity: 0;
    }
    .ai-cite.is-typing .ai-cite-typed::after {
      opacity: 1;
      animation: aiCaret 0.9s steps(1) infinite;
    }
    @keyframes aiCaret { 50% { opacity: 0; } }
    .ai-cite-sources {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .ai-cite-sources-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: 700;
      width: 100%;
    }
    .ai-cite-src {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      color: var(--text-secondary);
      background: var(--surface-alt);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 5px 11px;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .ai-cite.is-revealed .ai-cite-src { opacity: 1; transform: translateY(0); }
    .ai-cite.is-revealed .ai-cite-src:nth-of-type(3) { transition-delay: 0.12s; }
    .ai-cite.is-revealed .ai-cite-src:nth-of-type(4) { transition-delay: 0.24s; }
    .ai-cite-fav { width: 11px; height: 11px; border-radius: 3px; flex: none; }
    .ai-cite-src-you {
      color: var(--brand-hover);
      font-weight: 700;
      background: var(--brand-light);
      border-color: rgba(255, 0, 0, 0.25);
    }
    .ai-cite.is-revealed .ai-cite-src-you { animation: aiYouPulse 2.2s ease-out 0.6s 2; }
    @keyframes aiYouPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
      30% { box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.16); }
    }
    .ai-cite-you-tag {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      background: var(--brand);
      color: #fff;
      border-radius: 4px;
      padding: 1px 5px;
      margin-left: 2px;
    }

    @media (max-width: 600px) {
      .browser { margin-top: 40px; border-radius: 12px; }
      .browser-body { padding: 10px; }
      .browser-tab { padding: 8px 11px; font-size: 12px; gap: 6px; }
      .browser-tab-hint { display: none; }
      .gsc-stats { grid-template-columns: repeat(2, 1fr); }
      .gsc-stat { padding: 10px 12px; }
      .gsc-stat-value { font-size: 18px; }
      .gsc-annotation { font-size: 10px; padding: 5px 9px; top: 20px; }
    }

    /* SECTIONS */
    .section {
      padding: 60px 0;
      border-top: 1px solid var(--border);
    }
    .section-alt {
      background: var(--surface);
    }
    .section-label {
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--brand);
      font-weight: 600;
      margin-bottom: 12px;
    }
    h2 {
      font-size: clamp(30px, 4.2vw, 42px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: -1px;
      margin-bottom: 20px;
      color: var(--text);
    }

    /* FAQ accordion */
    .faq {
      display: grid;
      gap: 10px;
      margin-top: 28px;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: 12px;
      background: #fff;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .faq-item[open] {
      border-color: rgba(255, 0, 0, 0.2);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
    }
    .faq-item summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      list-style: none;
    }
    .faq-item summary::-webkit-details-marker { display: none; }
    .faq-item summary:hover { color: var(--brand); }
    .faq-chevron {
      flex: none;
      color: var(--muted);
      transition: transform 0.25s ease, color 0.2s ease;
    }
    .faq-item[open] .faq-chevron {
      transform: rotate(180deg);
      color: var(--brand);
    }
    .faq-body {
      padding: 0 20px 18px;
    }
    .faq-body p {
      margin: 0;
      font-size: 15px;
      line-height: 1.7;
      color: var(--muted);
    }

    .pain-points {
      list-style: none;
      display: grid;
      gap: 12px;
    }
    .pain-points li {
      padding: 16px 20px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      font-size: 15px;
      color: var(--muted);
    }
    .pain-points li strong {
      color: var(--text);
    }

    /* STEPS */
    .steps {
      display: grid;
      gap: 16px;
    }
    .step {
      display: flex;
      gap: 20px;
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .step-num {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      background: var(--brand-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: var(--brand);
      font-size: 16px;
    }
    .step h3 {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 4px;
      color: var(--text);
    }
    .step p {
      font-size: 14px;
      color: var(--muted);
    }

    /* BENEFITS */
    .benefits-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    .benefit {
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
    }
    .benefit-icon {
      width: 40px;
      height: 40px;
      background: var(--brand-light);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 12px;
      font-size: 15px;
      font-weight: 700;
      color: var(--brand);
    }
    .benefit h3 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text);
    }
    .benefit p {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.6;
    }

    /* NETWORK MARQUEE */
    .network-section {
      overflow: hidden;
      padding-bottom: 80px;
    }
    .network-section .container {
      margin-bottom: 32px;
    }
    /* NETWORK GROWTH VISUALIZATION */
    .netviz-wrap {
      max-width: 940px;
      margin: 8px auto 0;
      padding: 0 24px;
    }
    .netviz {
      position: relative;
      width: 100%;
      aspect-ratio: 1000 / 540;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: radial-gradient(120% 120% at 50% 38%, #ffffff 0%, #fafbfc 65%, #f3f5f8 100%);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
      overflow: hidden;
    }
    .netviz-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    .netviz-edge {
      fill: none;
      stroke: #d7dde6;
      stroke-width: 2;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .netviz-edge.to-you {
      stroke: var(--brand);
      stroke-width: 2.5;
    }
    .netviz-dot {
      opacity: 0;
      transition: opacity 0.6s ease;
    }
    .netviz-node {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 6px 11px 6px 8px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
      white-space: nowrap;
      transform: translate(-50%, -50%) scale(0.35);
      opacity: 0;
      transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, box-shadow 0.3s ease;
      z-index: 2;
    }
    .netviz-node.show {
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
    }
    .netviz-node-you {
      border-color: var(--brand);
      box-shadow: 0 6px 22px rgba(255, 0, 0, 0.22);
      z-index: 3;
    }
    .netviz-fav {
      width: 20px;
      height: 20px;
      border-radius: 6px;
      flex: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      background: var(--surface-alt);
    }
    .netviz-node-you .netviz-fav { background: var(--brand); color: #fff; }
    .netviz-meta { display: flex; flex-direction: column; line-height: 1.2; }
    .netviz-domain { font-size: 12px; font-weight: 600; color: var(--text); }
    .netviz-dr {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--muted);
      font-variant-numeric: tabular-nums;
      transition: color 0.3s ease;
    }
    .netviz-node.boost {
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.18), 0 6px 22px rgba(0, 0, 0, 0.09);
    }
    .netviz-node.boost .netviz-dr { color: var(--green); }
    .netviz-node-you.boost {
      box-shadow: 0 0 0 5px rgba(255, 0, 0, 0.16), 0 6px 22px rgba(255, 0, 0, 0.22);
    }
    .netviz-node-mini {
      padding: 4px 9px 4px 6px;
      gap: 5px;
      box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
    }
    .netviz-node-mini .netviz-fav { width: 15px; height: 15px; font-size: 9px; border-radius: 4px; }
    .netviz-node-mini .netviz-domain { font-size: 10px; }
    .netviz-node-mini .netviz-dr { font-size: 8.5px; }
    .netviz-stats {
      position: absolute;
      left: 50%;
      bottom: 16px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 9px 18px;
      background: rgba(21, 35, 63, 0.94);
      border-radius: 100px;
      font-size: 12.5px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
      z-index: 1000;
    }
    .netviz-stat b { transition: transform 0.18s ease; display: inline-block; }
    .netviz-stat.tick b { transform: scale(1.18); }
    .netviz-stat span { color: #93a4c4; font-weight: 500; margin-left: 5px; }
    .netviz-stat + .netviz-stat::before {
      content: '';
      display: inline-block;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      margin-right: 16px;
      vertical-align: middle;
    }

    @media (max-width: 600px) {
      .netviz-wrap { padding: 0 16px; }
      .netviz-node { padding: 4px 8px 4px 6px; gap: 5px; }
      .netviz-fav { width: 16px; height: 16px; }
      .netviz-domain { font-size: 10.5px; }
      .netviz-dr { font-size: 9px; }
      .netviz-stats { font-size: 11px; gap: 10px; padding: 7px 13px; bottom: 10px; }
      .netviz-stat + .netviz-stat::before { margin-right: 10px; }
    }

    /* GSC CALLOUTS */
    .gsc-callout {
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 20px 24px;
      border-radius: 12px;
      margin: 28px 0;
      border: 1px solid var(--border);
      background: #fff;
    }
    .gsc-callout p {
      font-size: 15px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }
    .gsc-callout p strong {
      color: var(--text);
      font-weight: 700;
    }
    .gsc-callout-bad {
      background: #fef2f2;
      border-color: #fecaca;
    }
    .gsc-callout-good {
      background: #f0fdf4;
      border-color: #bbf7d0;
    }

    /* Coded GSC stat tiles (replace the old screenshots) */
    .gsc-tile {
      position: relative;
      flex-shrink: 0;
      width: 232px;
      border-radius: 12px;
      padding: 18px 20px 18px 24px;
      overflow: hidden;
      color: #fff;
      transform: scale(0.92);
      opacity: 0;
      transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s,
                  opacity 0.4s ease 0.12s;
    }
    .gsc-callout.in-view .gsc-tile {
      transform: scale(1);
      opacity: 1;
    }
    .gsc-tile-good {
      background: linear-gradient(135deg, #54a468 0%, #468a57 100%);
      box-shadow: 0 14px 34px rgba(70, 138, 87, 0.38);
    }
    .gsc-tile-bad {
      background: linear-gradient(135deg, #d6564c 0%, #b8403a 100%);
      box-shadow: 0 14px 34px rgba(184, 64, 58, 0.34);
    }
    .gsc-tile-bar {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 8px;
      background: rgba(0, 0, 0, 0.16);
    }
    .gsc-tile-top {
      display: flex;
      align-items: center;
      gap: 9px;
      margin-bottom: 12px;
    }
    .gsc-tile-box {
      width: 24px;
      height: 24px;
      flex: none;
      border: 2px solid rgba(255, 255, 255, 0.85);
      border-radius: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .gsc-tile-box svg {
      width: 15px;
      height: 15px;
    }
    .gsc-tile-label {
      font-size: 16px;
      font-weight: 500;
      letter-spacing: 0.1px;
    }
    .gsc-tile-num {
      font-size: 48px;
      font-weight: 400;
      line-height: 1;
      letter-spacing: -1.5px;
      font-variant-numeric: tabular-nums;
    }
    .gsc-callout.in-view .gsc-tile-num {
      animation: gscTilePop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both;
    }
    @keyframes gscTilePop {
      0% { transform: scale(0.6); opacity: 0; }
      60% { transform: scale(1.06); opacity: 1; }
      100% { transform: scale(1); }
    }
    .gsc-tile-sub {
      margin-top: 11px;
      font-size: 12.5px;
      font-weight: 500;
      opacity: 0.92;
    }
    .gsc-tile-help {
      position: absolute;
      right: 13px;
      bottom: 12px;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      color: rgba(255, 255, 255, 0.8);
    }
    @media (max-width: 600px) {
      .gsc-callout {
        flex-direction: column;
        gap: 16px;
        text-align: center;
      }
      .gsc-tile {
        width: 100%;
        max-width: 260px;
      }
    }

    /* PROOF FIGURE */
    .proof-figure {
      margin: 0;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px;
      box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
      overflow: hidden;
    }
    .proof-figure img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 8px;
    }
    .proof-figure figcaption {
      font-size: 13px;
      color: var(--muted);
      text-align: center;
      padding: 14px 8px 6px;
      font-style: italic;
    }

    /* MONITORING */
    .monitor-card {
      padding: 32px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      position: relative;
      overflow: hidden;
    }
    .monitor-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--green), var(--brand));
    }
    .monitor-card h3 {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 12px;
      color: var(--text);
    }
    .monitor-card p {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 16px;
    }
    .monitor-features {
      list-style: none;
      display: grid;
      gap: 10px;
    }
    .monitor-features li {
      font-size: 14px;
      color: var(--text-secondary);
      padding-left: 28px;
      position: relative;
    }
    .monitor-features li::before {
      content: '\2713';
      position: absolute;
      left: 0;
      color: var(--green);
      font-weight: 700;
    }

    /* CONCERNS */
    .concerns-intro {
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 32px;
      max-width: 640px;
    }
    .concerns {
      display: grid;
      gap: 16px;
    }
    .concern {
      padding: 24px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
    }
    .concern h3 {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 8px;
    }
    .concern p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
    }

    /* SIGNUP */
    .signup-section {
      text-align: center;
    }
    .signup-section h2 {
      margin-bottom: 8px;
    }
    .signup-section > p {
      color: var(--muted);
      margin-bottom: 32px;
      font-size: 15px;
    }
    .signup-form {
      max-width: 440px;
      margin: 0 auto;
      display: grid;
      gap: 12px;
    }
    .signup-form input {
      padding: 14px 16px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-family: inherit;
      font-size: 15px;
      outline: none;
      transition: border-color 0.2s;
    }
    .signup-form input::placeholder { color: var(--muted); }
    .signup-form input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(255, 0, 0, 0.08); }
    .signup-form button {
      padding: 14px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s;
    }
    .signup-form button:hover { background: var(--brand-hover); }
    .signup-form button:disabled {
      background: #bcd9ff;
      cursor: not-allowed;
    }
    .form-msg {
      font-size: 14px;
      min-height: 20px;
      margin-top: 4px;
    }
    .form-msg.success { color: var(--green); }
    .form-msg.error { color: var(--brand); }

    /* GRAND SIGNUP */
    .signup-hero {
      position: relative;
      padding: 100px 0 100px;
      background: linear-gradient(180deg, #fff 0%, #eef4ff 100%);
      border-top: 1px solid var(--border);
      overflow: hidden;
      text-align: center;
    }
    .signup-bg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .signup-glow {
      position: absolute;
      top: -200px;
      left: 50%;
      transform: translateX(-50%);
      width: 900px;
      height: 600px;
      background: radial-gradient(circle, rgba(255, 0, 0, 0.12) 0%, transparent 60%);
      filter: blur(40px);
    }
    .signup-inner {
      position: relative;
      z-index: 1;
    }
    .signup-badge {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 18px;
      background: #fff;
      border: 1px solid rgba(255, 0, 0, 0.2);
      border-radius: 100px;
      font-size: 13px;
      color: var(--brand);
      font-weight: 600;
      margin-bottom: 28px;
      box-shadow: 0 2px 12px rgba(255, 0, 0, 0.08);
    }
    .pulse {
      width: 8px;
      height: 8px;
      background: var(--brand);
      border-radius: 50%;
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.5); }
      50% { box-shadow: 0 0 0 8px rgba(255, 0, 0, 0); }
    }
    .signup-title {
      font-size: clamp(38px, 6vw, 60px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -1.8px;
      margin-bottom: 20px;
      color: var(--text);
    }
    .signup-title em {
      font-style: normal;
      color: var(--brand);
    }
    .signup-sub {
      font-size: 18px;
      color: var(--text-secondary);
      max-width: 520px;
      margin: 0 auto 36px;
      line-height: 1.7;
    }
    .signup-sub strong {
      color: var(--text);
      font-weight: 700;
    }
    .price-compare {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 40px;
      padding: 20px 28px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    }
    .price {
      text-align: left;
    }
    .price-label {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 4px;
    }
    .price-value {
      font-size: 28px;
      font-weight: 800;
      color: var(--text);
      letter-spacing: -1px;
    }
    .price-value span {
      font-size: 13px;
      font-weight: 500;
      color: var(--muted);
    }
    .price-free .price-value {
      color: var(--brand);
    }
    .price-paid .price-value {
      color: var(--muted);
      text-decoration: line-through;
      text-decoration-color: rgba(113, 113, 122, 0.4);
    }
    .price-arrow {
      font-size: 24px;
      color: var(--brand);
      font-weight: 700;
    }
    .signup-form-grand {
      max-width: 480px;
      margin: 0 auto;
    }
    .signup-form-grand input {
      padding: 16px 18px;
      font-size: 16px;
      border: 1.5px solid var(--border);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    }
    .x-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }
    .x-input-prefix {
      position: absolute;
      left: 18px;
      color: var(--muted);
      font-size: 16px;
      font-weight: 500;
      pointer-events: none;
      z-index: 1;
    }
    .x-input-wrap input {
      width: 100%;
      padding-left: 34px;
    }
    .signup-form-grand button {
      padding: 18px;
      font-size: 17px;
      font-weight: 700;
      box-shadow: 0 4px 20px rgba(255, 0, 0, 0.25);
      transition: all 0.2s;
    }
    .signup-form-grand button:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 28px rgba(255, 0, 0, 0.35);
    }
    .signup-trust {
      display: flex;
      justify-content: center;
      gap: 24px;
      margin-top: 28px;
      flex-wrap: wrap;
      font-size: 13px;
      color: var(--muted);
      font-weight: 500;
    }
    .signup-trust span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    @media (max-width: 600px) {
      .signup-hero { padding: 70px 0 70px; }
      .price-compare { flex-direction: column; gap: 12px; padding: 18px; }
      .price-arrow { transform: rotate(90deg); }
      .signup-trust { gap: 12px; flex-direction: column; }
    }

    /* SUCCESS MODAL */
    .modal {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .modal.active {
      display: flex;
    }
    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(24, 24, 27, 0.5);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      animation: fadeIn 0.2s ease-out;
    }
    .modal-card {
      position: relative;
      z-index: 1;
      background: #fff;
      border-radius: 20px;
      padding: 48px 36px 36px;
      max-width: 440px;
      width: 100%;
      text-align: center;
      box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
      border: 1px solid var(--border);
      animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes modalPop {
      from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
      }
      to {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }
    .modal-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      background: linear-gradient(135deg, #dcfce7, #bbf7d0);
      border-radius: 50%;
      margin-bottom: 20px;
      animation: iconBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
    }
    @keyframes iconBounce {
      from {
        opacity: 0;
        transform: scale(0);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }
    .modal-icon svg {
      width: 40px;
      height: 40px;
      color: var(--green);
    }
    .modal-title {
      font-size: 28px;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 12px;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }
    .modal-message {
      color: var(--text-secondary);
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 8px;
    }
    .modal-message strong {
      color: var(--text);
      font-weight: 700;
    }
    .modal-steps {
      background: var(--surface-alt);
      border-radius: 12px;
      padding: 20px;
      margin: 24px 0;
      text-align: left;
    }
    .modal-steps-title {
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--brand);
      margin-bottom: 12px;
    }
    .modal-steps ol {
      list-style: none;
      counter-reset: step;
      display: grid;
      gap: 10px;
    }
    .modal-steps li {
      counter-increment: step;
      font-size: 14px;
      color: var(--text-secondary);
      padding-left: 32px;
      position: relative;
      line-height: 1.5;
    }
    .modal-steps li::before {
      content: counter(step);
      position: absolute;
      left: 0;
      top: 0;
      width: 22px;
      height: 22px;
      background: var(--brand);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 700;
    }
    .modal-btn {
      width: 100%;
      padding: 14px;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 8px;
      font-family: inherit;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      transition: background 0.2s;
    }
    .modal-btn:hover {
      background: var(--brand-hover);
    }

    /* FOOTER */
    footer {
      padding: 40px 0;
      border-top: 1px solid var(--border);
      background: var(--navy);
      text-align: center;
      color: #a1a1aa;
      font-size: 13px;
    }
    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      flex-wrap: wrap;
    }
    footer .built-by {
      background: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.12);
      color: #cbd5e1;
    }
    footer .built-by .built-by-handle {
      color: #fff;
    }
    .footer-blog {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      text-align: left;
      padding-bottom: 28px;
      margin-bottom: 28px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .footer-blog-label {
      color: #71717a;
      font-weight: 600;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 4px;
    }
    .footer-blog-link {
      color: #cbd5e1;
      text-decoration: none;
      transition: color 0.15s ease;
    }
    .footer-blog-link:hover {
      color: #fff;
    }

    @media (max-width: 600px) {
      .benefits-grid { grid-template-columns: 1fr; }
      .hero { padding: 60px 0 40px; }
      .section { padding: 40px 0; }
    }

/* Solution bridge paragraphs */
.solution-lede {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 24px;
}
.solution-lede-last {
  font-size: 17px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
}

/* Network section intro */
.network-intro {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 8px;
}

/* Modal secondary action button ("Do it later") */
.modal-btn-ghost {
  background: transparent;
  color: var(--muted);
  margin-top: 8px;
  box-shadow: none;
}

/* HOW IT WORKS BAND (dark beat: headline, three step cards, callout) */
.hiw-band {
  background: radial-gradient(120% 130% at 16% 50%, #12203c 0%, #0c1426 55%, #080d1a 100%);
  border-top: 1px solid var(--border);
  padding: 88px 0;
  color: #fbfaf9;
}
.hiw-inner {
  max-width: 1000px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
.hiw-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.hiw-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  color: #ff6b6b;
}
.hiw-head h2 {
  color: #fbfaf9;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
}
.hiw-mark { position: relative; display: inline-block; }
.hiw-mark > span { position: relative; z-index: 1; }
.hiw-mark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.18em;
  width: 100%;
  height: 30%;
  background: var(--brand);
  border-radius: 0 0 6px 6px;
}
.hiw-lede {
  color: #9aa3b5;
  font-size: 18px;
  max-width: 680px;
}
.hiw-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  width: 100%;
}
.hiw-card {
  flex: 1;
  min-width: 260px;
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: box-shadow 0.3s;
}
.hiw-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.hiw-card-1 { background: rgba(255, 0, 0, 0.05); border: 1px solid rgba(255, 0, 0, 0.3); }
.hiw-card-2 { background: rgba(59, 130, 246, 0.05); border: 1px solid rgba(59, 130, 246, 0.3); }
.hiw-card-3 { background: rgba(34, 197, 94, 0.05); border: 1px solid rgba(34, 197, 94, 0.3); }
.hiw-card-tag {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #ff6b6b;
}
.hiw-card h3 {
  font-weight: 900;
  font-size: 21px;
  line-height: 1.25;
  color: #fbfaf9;
}
.hiw-card-body {
  color: #9aa3b5;
  font-size: 15px;
  line-height: 1.6;
}

/* Per-card animated mockups: typing prompt, post queue, traffic chart.
   Pure CSS loops; base styles are the finished state so reduced-motion
   just shows the result. */
.hiw-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 4px 0 6px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background-color: rgba(2, 6, 16, 0.45);
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(255, 255, 255, 0.04) 14px 15px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.hiw-prompt {
  width: 100%;
  background: #0a0f1d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
}
.hiw-prompt-q { color: #9aa3b5; }
.hiw-prompt-a { color: #fbfaf9; white-space: nowrap; }
.hiw-typed {
  display: inline-block;
  vertical-align: bottom;
  overflow: hidden;
  white-space: nowrap;
  width: 12ch;
  animation: hiwType 5s steps(12, end) infinite;
}
@keyframes hiwType {
  0%, 8% { width: 0; }
  48%, 92% { width: 12ch; }
  100% { width: 0; }
}
.hiw-caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--brand);
  animation: hiwCaret 0.9s steps(1) infinite;
}
@keyframes hiwCaret { 50% { opacity: 0; } }
.hiw-queue {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hiw-queue-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  background: #0a0f1d;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 9px 12px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
  white-space: nowrap;
  animation: hiwRow 5.5s ease infinite;
}
.hiw-queue-row:nth-child(2) { animation-delay: 0.45s; }
.hiw-queue-row:nth-child(3) { animation-delay: 0.9s; }
@keyframes hiwRow {
  0% { opacity: 0; transform: translateX(-12px); }
  10%, 82% { opacity: 1; transform: translateX(0); }
  94%, 100% { opacity: 0; transform: translateX(-12px); }
}
.hiw-queue-title { color: #fbfaf9; font-weight: 700; }
.hiw-queue-meta { color: #9aa3b5; }
.hiw-queue-link { color: var(--green); font-weight: 700; }
.hiw-chart {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hiw-chart-label {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: #9aa3b5;
  margin-bottom: 10px;
}
.hiw-bars {
  flex: 1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.hiw-bars span {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: rgba(255, 255, 255, 0.18);
  transform-origin: bottom;
  animation: hiwBar 4.5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.hiw-bars span:nth-child(2) { animation-delay: 0.1s; }
.hiw-bars span:nth-child(3) { animation-delay: 0.2s; }
.hiw-bars span:nth-child(4) { animation-delay: 0.3s; }
.hiw-bars span:nth-child(5) { animation-delay: 0.4s; }
.hiw-bars span:nth-child(6) { animation-delay: 0.5s; }
.hiw-bars span:nth-child(7) { animation-delay: 0.6s; }
.hiw-bars .hiw-bar-hot { background: var(--green); }
@keyframes hiwBar {
  0% { transform: scaleY(0); }
  16% { transform: scaleY(1); }
  86% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.hiw-chart-x {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  color: #9aa3b5;
}
@media (prefers-reduced-motion: reduce) {
  .hiw-typed, .hiw-caret, .hiw-queue-row, .hiw-bars span { animation: none; }
}
.hiw-callout {
  width: 100%;
  background: rgba(34, 197, 94, 0.1);
  border-left: 4px solid var(--green);
  border-radius: 6px 12px 12px 6px;
  padding: 20px 24px;
}
.hiw-callout p {
  font-size: 16px;
  line-height: 1.6;
  color: #fbfaf9;
}
.hiw-callout span { color: #c3c9d4; }

@media (max-width: 700px) {
  .hiw-band { padding: 60px 0; }
  .hiw-inner { gap: 26px; }
  .hiw-lede { font-size: 16px; }
  .hiw-card { min-width: 100%; padding: 16px; }
  .hiw-visual { aspect-ratio: 16 / 9; }
  .hiw-card h3 { font-size: 17px; }
  .hiw-card-tag { font-size: 12px; }
  .hiw-card-body { font-size: 13px; }
  .hiw-callout { padding: 16px 20px; }
  .hiw-callout p { font-size: 14px; }
}