/* Override absolute path in fonts/material-symbols.css — relative URL works from file:// too */
      @font-face {
        font-family: "Material Symbols Outlined";
        font-style: normal;
        font-weight: 400;
        font-display: block;
        src: url("fonts/material-symbols-outlined.woff2") format("woff2");
      }

      /* ── Accessibility ── */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

      /* ── Page globals (ensures Inter even before styles-site.css resolves) ── */
      body {
        font-family:
          "Inter",
          system-ui,
          -apple-system,
          sans-serif;
        background:
          radial-gradient(
            ellipse 60% 50% at 50% 0%,
            rgba(43, 205, 238, 0.06),
            transparent 60%
          ),
          var(--color-bg-deep, var(--color-bg-deep));
        color: var(--color-fg-secondary);
        overflow-x: clip;
      }
      ::selection {
        background: rgba(43, 205, 238, 0.3);
        color: var(--color-fg);
      }

      /* ── Section divider ── */
      .scan-divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(43, 205, 238, 0.2) 30%,
          rgba(78, 214, 214, 0.15) 70%,
          transparent
        );
        margin: 0 32px;
      }

      /* ── Gradient text ── */
      .scan-gradient-text {
        background: linear-gradient(135deg, var(--color-fg) 0%, var(--color-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      /* ── Eyebrow label (Mono — intentional, label context) ── */
      .scan-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
      }
      .scan-eyebrow-rule {
        display: inline-block;
        width: 22px;
        height: 2px;
        background: currentColor;
        flex-shrink: 0;
      }

      /* ═══════════════════════════════════════
         SCAN INPUT — shared across 3 positions
         ═══════════════════════════════════════ */
      .scan-input-wrap {
        display: flex;
        align-items: stretch;
        background: rgba(22, 42, 46, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(43, 205, 238, 0.3);
        box-shadow:
          0 0 0 4px rgba(43, 205, 238, 0.1),
          0 10px 40px rgba(0, 0, 0, 0.4);
        border-radius: 14px;
        overflow: hidden;
        max-width: 620px;
        width: 100%;
      }
      .scan-input-prefix {
        display: flex;
        align-items: center;
        padding-left: 18px;
        color: var(--color-primary);
        font-family: "JetBrains Mono", monospace;
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
        flex-shrink: 0;
      }
      .scan-input-field {
        flex: 1;
        padding: 18px 12px;
        background: transparent;
        border: 0;
        outline: 0;
        font-family: "JetBrains Mono", monospace;
        font-size: 16px;
        color: var(--color-fg);
        letter-spacing: 0.01em;
        min-width: 0;
      }
      .scan-input-field::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
      .scan-input-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 26px;
        border: 0;
        cursor: pointer;
        background: linear-gradient(to right, var(--color-primary), #22d3ee);
        color: var(--color-bg-deep);
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: 15px;
        letter-spacing: -0.01em;
        box-shadow:
          0 4px 25px rgba(43, 205, 238, 0.4),
          0 0 60px rgba(43, 205, 238, 0.18);
        white-space: nowrap;
        flex-shrink: 0;
        transition: filter 0.2s;
      }
      .scan-input-btn:hover {
        filter: brightness(1.06);
      }

      /* ═══════════════════════════════════════
         1. HERO
         ═══════════════════════════════════════ */
      .scan-hero {
        position: relative;
        padding: 80px 32px 60px;
        overflow: hidden;
      }
      .scan-hero-orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
      }
      .scan-hero-orb--cyan {
        left: -8%;
        top: 5%;
        width: 560px;
        height: 560px;
        background: rgba(43, 205, 238, 0.22);
        filter: blur(180px);
      }
      .scan-hero-orb--teal {
        right: -10%;
        bottom: -10%;
        width: 520px;
        height: 520px;
        background: rgba(78, 214, 214, 0.16);
        filter: blur(180px);
      }
      .scan-hero-orb--rose {
        right: 20%;
        top: -10%;
        width: 360px;
        height: 360px;
        background: rgba(236, 85, 103, 0.1);
        filter: blur(160px);
      }
      .scan-hero-grid {
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(236, 85, 103, 0.1) 1px, transparent 1px),
          linear-gradient(90deg, rgba(236, 85, 103, 0.1) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: radial-gradient(
          ellipse 80% 70% at 50% 40%,
          #000 25%,
          transparent 70%
        );
        -webkit-mask-image: radial-gradient(
          ellipse 80% 70% at 50% 40%,
          #000 25%,
          transparent 70%
        );
        animation: heroGridDrift 10s linear infinite;
      }
      @keyframes heroGridDrift {
        from {
          background-position: 0 0;
        }
        to {
          background-position: 56px 56px;
        }
      }
      .scan-hero-inner {
        position: relative;
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
      }
      .scan-hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 8px 16px;
        border-radius: 999px;
        background: rgba(236, 85, 103, 0.1);
        border: 1px solid rgba(236, 85, 103, 0.32);
        text-decoration: none;
        margin-bottom: 26px;
      }
      .scan-hero-eyebrow-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-rose);
        box-shadow: 0 0 10px var(--color-rose);
        flex-shrink: 0;
      }
      .scan-hero-eyebrow-text {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-rose);
      }
      .scan-h1 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(48px, 7vw, 96px);
        line-height: 1.02;
        letter-spacing: -0.03em;
        margin: 0;
        color: var(--color-fg);
      }
      .scan-h1-line {
        display: block;
      }
      .scan-h1-strike-wrap {
        position: relative;
        display: inline-block;
      }
      .scan-h1-strike {
        position: absolute;
        left: -2%;
        right: -2%;
        top: 55%;
        height: 6px;
        background: var(--color-rose);
        transform: rotate(-1.5deg);
        border-radius: 4px;
        box-shadow: 0 0 14px rgba(236, 85, 103, 0.55);
        pointer-events: none;
      }
      .scan-h1-logo {
        height: 0.72em;
        width: auto;
        vertical-align: middle;
        margin-left: 0.18em;
        margin-bottom: 0.06em;
        display: inline-block;
      }
      .scan-h1-attack {
        color: var(--color-fg);
        -webkit-text-fill-color: var(--color-fg);
        position: relative;
        z-index: 1;
      }
      .scan-h1-attack .scan-h1-strike {
        z-index: 2;
      }
      /* ICP entry hook — stays hidden until ?icp= resolves against
         window.SQUR_ICP_MAP (_applyIcpEntry). .scan-eyebrow sets an author-level
         `display`, which beats the UA sheet's [hidden] rule, so the hidden
         state has to be declared here or the empty label flashes on load. */
      .scan-hero-icp[hidden] {
        display: none;
      }

      /* Hero body text — Inter, matching testimonial style */
      .scan-hero-sub {
        font-family: "Inter", system-ui, sans-serif;
        margin: 26px auto 0;
        max-width: 720px;
        font-size: 19px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
      }
      .scan-input-center {
        display: flex;
        justify-content: center;
        margin-top: 36px;
      }
      /* Trust row: Mono label context (intentional) */
      .scan-trust-row {
        margin-top: 14px;
        display: inline-flex;
        align-items: center;
        gap: 18px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
        flex-wrap: wrap;
        justify-content: center;
      }
      .scan-trust-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .scan-trust-check {
        color: var(--color-success);
      }
      .scan-trust-sep {
        color: rgba(255, 255, 255, 0.25);
      }
      .scan-stat-strip {
        margin-top: 56px;
        display: inline-flex;
        align-items: stretch;
        padding: 18px 28px;
        background: rgba(22, 42, 46, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 14px;
      }
      .scan-stat-item {
        padding: 0 24px;
        text-align: left;
      }
      /* A genuine red *box*, not just red text — a rose wash behind the one
         step that isn't live yet. align-items:stretch makes it full-height. */
      .scan-stat-item--next {
        background: rgba(236, 85, 103, 0.09);
        border: 1px solid rgba(236, 85, 103, 0.28);
        border-radius: 10px;
        /* Negative margin cancels the padding so "Fix" keeps the same baseline
           as Scan/Check/Validate — the box grows, the text does not move. */
        padding: 8px 20px;
        margin: -8px 0;
      }
      .scan-stat-value {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 28px;
        line-height: 1.05;
        letter-spacing: -0.02em;
        color: var(--color-fg);
      }
      .scan-stat-value--primary {
        color: var(--color-primary);
      }
      /* Alert Rose, the brand's "use sparingly" accent — spent here on the one
         step in the ladder that is not live yet. One box in five is the whole
         budget. */
      .scan-stat-value--next {
        color: var(--color-rose);
      }
      /* Stat labels: Mono, intentional — unit labels */
      .scan-stat-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
        margin-top: 4px;
      }
      .scan-stat-note {
        font-family: "Inter", sans-serif;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.4);
        margin-top: 2px;
      }
      .scan-stat-divider {
        width: 1px;
        align-self: stretch;
        background: rgba(255, 255, 255, 0.1);
      }

      /* ═══════════════════════════════════════
         2. TRUSTED-BY
         ═══════════════════════════════════════ */
      .scan-trusted {
        padding: 0 32px 24px;
      }
      .scan-trusted-inner {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 36px;
        flex-wrap: wrap;
      }
      .scan-trusted-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-muted);
      }
      .scan-trusted-logo {
        height: 24px;
        opacity: 0.6;
        filter: grayscale(1) brightness(2);
      }
      .scan-trusted-logo--gameforge {
        height: 22px;
        opacity: 0.45;
        filter: grayscale(1) brightness(2.4);
      }

      /* ═══════════════════════════════════════
         3. X-RAY LAYERS
         ═══════════════════════════════════════ */
      .scan-xray {
        position: relative;
        padding: 100px 32px;
        overflow: hidden;
        background: linear-gradient(
          to bottom,
          transparent 0%,
          rgba(43, 205, 238, 0.03) 50%,
          transparent 100%
        );
      }
      .scan-xray-inner {
        max-width: 1180px;
        margin: 0 auto;
      }
      .scan-xray-header {
        text-align: center;
        max-width: 760px;
        margin: 0 auto 56px;
      }
      .scan-xray-h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(36px, 4.5vw, 56px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin: 0;
        color: var(--color-fg);
      }
      /* Body text in section — Inter */
      .scan-xray-sub {
        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
        margin-top: 18px;
      }
      .scan-xray-stack {
        position: relative;
        padding: 20px 0 0;
      }
      .scan-xray-depth {
        position: absolute;
        left: -8px;
        top: 0;
        bottom: 0;
        width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding-top: 10px;
        padding-bottom: 30px;
        pointer-events: none;
      }
      .scan-xray-depth-label {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .scan-xray-layers {
        margin-left: 70px;
        display: flex;
        flex-direction: column;
        gap: 14px;
      }
      .scan-layer {
        padding: 20px 24px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        box-shadow:
          0 10px 30px rgba(0, 0, 0, 0.25),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .scan-layer--free {
        background: rgba(43, 205, 238, 0.06);
        border: 1px solid rgba(43, 205, 238, 0.35);
      }
      .scan-layer--signup {
        background: rgba(43, 205, 238, 0.1);
        border: 1px solid rgba(43, 205, 238, 0.55);
      }
      .scan-layer--pentest {
        background: rgba(236, 85, 103, 0.08);
        border: 1px solid rgba(236, 85, 103, 0.45);
      }
      .scan-layer-left {
        display: flex;
        align-items: center;
        gap: 18px;
        flex: 1;
        min-width: 0;
      }
      /* Layer badge: Mono (L1–L5 label) */
      .scan-layer-badge {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        font-weight: 700;
        flex-shrink: 0;
      }
      .scan-layer-badge--free {
        background: rgba(43, 205, 238, 0.1);
        border: 1px solid rgba(43, 205, 238, 0.35);
        color: var(--color-primary);
      }
      .scan-layer-badge--signup {
        background: rgba(43, 205, 238, 0.18);
        border: 1px solid rgba(43, 205, 238, 0.55);
        color: var(--color-primary);
      }
      .scan-layer-badge--pentest {
        background: rgba(236, 85, 103, 0.14);
        border: 1px solid rgba(236, 85, 103, 0.45);
        color: var(--color-rose-bright);
      }
      /* Layer heading: Montserrat */
      .scan-layer-label {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 20px;
        color: var(--color-fg);
        letter-spacing: -0.01em;
      }
      /* Layer body text: Inter — matches testimonial/paragraph style */
      .scan-layer-sub {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: #b6c0c4;
        margin-top: 4px;
      }
      .scan-layer-ex {
        font-family: "Inter", sans-serif;
        font-size: 13px;
        font-style: italic;
        color: #7e8a91;
        margin-top: 5px;
        line-height: 1.5;
      }
      /* Tier pills: Mono (functional label) */
      .scan-layer-pill {
        padding: 6px 14px;
        border-radius: 999px;
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }
      .scan-layer-pill--free {
        background: rgba(43, 205, 238, 0.1);
        border: 1px solid rgba(43, 205, 238, 0.35);
        color: var(--color-primary);
      }
      .scan-layer-pill--signup {
        background: rgba(43, 205, 238, 0.18);
        border: 1px solid rgba(43, 205, 238, 0.55);
        color: var(--color-primary);
      }
      .scan-layer-pill--pentest {
        background: rgba(236, 85, 103, 0.14);
        border: 1px solid rgba(236, 85, 103, 0.45);
        color: var(--color-rose-bright);
      }
      .scan-pill-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
      }
      .scan-pill-dot--cyan {
        background: var(--color-primary);
      }
      .scan-pill-dot--rose {
        background: var(--color-rose);
      }

      /* ═══════════════════════════════════════
         4. MID-PAGE SCAN CTA
         ═══════════════════════════════════════ */
      .scan-mid-cta {
        position: relative;
        padding: 0 32px 60px;
      }
      .scan-mid-card {
        max-width: 980px;
        margin: 0 auto;
        padding: 40px 44px;
        border-radius: 18px;
        background: linear-gradient(
          135deg,
          rgba(43, 205, 238, 0.1),
          rgba(78, 214, 214, 0.06)
        );
        border: 1px solid rgba(43, 205, 238, 0.3);
        box-shadow:
          0 0 0 4px rgba(43, 205, 238, 0.06),
          0 20px 60px rgba(0, 0, 0, 0.4);
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 32px;
        align-items: center;
      }
      .scan-mid-eyebrow {
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--color-primary);
        margin-bottom: 10px;
      }
      .scan-mid-h3 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 32px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--color-fg);
        margin: 0;
      }
      /* Body text: Inter */
      .scan-mid-sub {
        font-family: "Inter", sans-serif;
        font-size: 15px;
        line-height: 1.65;
        color: #b6c0c4;
        margin-top: 10px;
      }
      .scan-mid-right {
        display: flex;
        justify-content: flex-end;
      }

      /* ═══════════════════════════════════════
         5. EDGE SECTION
         ═══════════════════════════════════════ */
      .scan-edge {
        position: relative;
        padding: 60px 32px 100px;
      }
      .scan-edge-inner {
        max-width: 1180px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr 1.1fr;
        gap: 56px;
        align-items: center;
      }
      /* Iceberg */
      .scan-iceberg {
        position: relative;
        aspect-ratio: 1 / 1;
        border-radius: 16px;
        overflow: hidden;
        background: linear-gradient(
          to bottom,
          rgba(43, 205, 238, 0.06) 0%,
          rgba(43, 205, 238, 0.1) 36%,
          rgba(10, 18, 21, 0.55) 36%,
          rgba(10, 18, 21, 0.95) 100%
        );
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow:
          0 20px 60px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }
      .scan-iceberg-waterline {
        position: absolute;
        left: 0;
        right: 0;
        top: 36%;
        border-top: 1.5px dashed rgba(43, 205, 238, 0.55);
      }
      .scan-iceberg-wall {
        position: absolute;
        right: 16px;
        top: calc(36% - 22px);
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-primary);
        background: rgba(10, 18, 21, 0.55);
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(43, 205, 238, 0.3);
      }
      .scan-iceberg-above {
        position: absolute;
        left: 22px;
        right: 22px;
        top: 22px;
      }
      .scan-iceberg-below {
        position: absolute;
        left: 22px;
        right: 22px;
        top: 44%;
      }
      .scan-iceberg-pill {
        padding: 5px 12px;
        border-radius: 999px;
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .scan-iceberg-pill--cyan {
        background: rgba(43, 205, 238, 0.14);
        border: 1px solid rgba(43, 205, 238, 0.4);
        color: var(--color-primary);
      }
      .scan-iceberg-pill--rose {
        background: rgba(236, 85, 103, 0.16);
        border: 1px solid rgba(236, 85, 103, 0.45);
        color: var(--color-rose-bright);
      }
      .scan-iceberg-pill-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        display: inline-block;
        flex-shrink: 0;
      }
      .scan-iceberg-pill-dot--cyan {
        background: var(--color-primary);
        box-shadow: 0 0 8px var(--color-primary);
      }
      .scan-iceberg-pill-dot--rose {
        background: var(--color-rose);
        box-shadow: 0 0 8px var(--color-rose);
      }
      .scan-iceberg-h4 {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 18px;
        color: var(--color-fg);
        margin: 12px 0 6px;
      }
      /* Iceberg body text: Inter */
      .scan-iceberg-desc {
        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--color-fg-muted);
      }
      .scan-iceberg-list {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        line-height: 1.75;
        color: #b6c0c4;
      }
      .scan-iceberg-list li.scan-iceberg-cta-line {
        color: var(--color-primary);
        margin-top: 8px;
      }
      /* Comparison table */
      .scan-compare-wrap {
        background: rgba(22, 42, 46, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
      }
      .scan-compare-header {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        padding: 16px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
      }
      .scan-compare-header-squr {
        color: var(--color-primary);
      }
      .scan-compare-row {
        display: grid;
        grid-template-columns: 1.6fr 1fr 1fr;
        padding: 14px 22px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        align-items: center;
      }
      .scan-compare-row:last-child {
        border-bottom: none;
      }
      .scan-compare-row--highlight {
        background: rgba(43, 205, 238, 0.04);
      }
      /* Table label: Inter */
      .scan-compare-cell-label {
        font-family: "Inter", sans-serif;
        color: var(--color-fg-secondary);
        font-size: 14.5px;
        line-height: 1.5;
      }
      .scan-compare-cell {
        text-align: center;
        font-family: "JetBrains Mono", monospace;
        font-size: 14px;
      }
      .scan-compare-cell--no {
        color: var(--color-muted);
      }
      .scan-compare-cell--yes {
        color: var(--color-primary);
        font-weight: 600;
      }

      /* Mobile responsive comparison table — fit within viewport (no h-scroll) */
      @media (max-width: 767px) {
        .scan-compare-wrap {
          overflow-x: visible;
        }

        .scan-compare-header,
        .scan-compare-row {
          min-width: 0;
          grid-template-columns: 1.4fr 0.8fr 0.9fr;
          column-gap: 8px;
          padding: 12px 14px;
        }

        .scan-compare-header {
          font-size: 9.5px;
          letter-spacing: 0.08em;
        }

        .scan-compare-cell-label {
          font-size: 12.5px;
        }

        .scan-compare-cell {
          font-size: 12.5px;
        }
      }

      /* Right-column copy */
      .scan-edge-h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(32px, 3.6vw, 44px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin: 0 0 18px;
        color: var(--color-fg);
      }
      /* Lede: Inter — paragraph, matches testimonials */
      .scan-edge-lede {
        font-family: "Inter", sans-serif;
        font-size: 16.5px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
        margin-bottom: 28px;
      }

      /* ═══════════════════════════════════════
         5b. AUTONOMOUS REMEDIATION (not live yet)
         Rose throughout, deliberately: this is the only band on the page
         describing something we cannot do TODAY, and the colour is what keeps
         it visibly separate from the shipped capabilities above it.
         ═══════════════════════════════════════ */
      .scan-repair {
        position: relative;
        padding: 20px 32px 80px;
      }
      .scan-repair-card {
        max-width: 1180px;
        margin: 0 auto;
        padding: 44px 40px;
        border-radius: 20px;
        border: 1px solid rgba(236, 85, 103, 0.32);
        background: linear-gradient(
          160deg,
          rgba(236, 85, 103, 0.1),
          rgba(236, 85, 103, 0.02) 60%
        );
      }
      .scan-repair-h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(30px, 3.4vw, 42px);
        line-height: 1.1;
        letter-spacing: -0.02em;
        margin: 0 0 18px;
        color: var(--color-fg);
      }
      .scan-repair-lede {
        font-family: "Inter", sans-serif;
        font-size: 16.5px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
        max-width: 720px;
        margin: 0 0 32px;
      }
      /* Three steps, the third one pending — same visual grammar as the hero
         ladder, so a visitor who read "Fix · coming very soon" up top meets the
         same promise here with the detail attached. */
      .scan-repair-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 28px;
      }
      .scan-repair-step {
        padding: 18px 20px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(0, 0, 0, 0.2);
      }
      .scan-repair-step--next {
        border-color: rgba(236, 85, 103, 0.42);
        background: rgba(236, 85, 103, 0.08);
      }
      /* Step index: Mono, intentional — a numbered sequence, not prose */
      .scan-repair-step-n {
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
        margin-bottom: 8px;
      }
      .scan-repair-step--next .scan-repair-step-n {
        color: var(--color-rose);
      }
      .scan-repair-step-t {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 17px;
        line-height: 1.2;
        color: var(--color-fg);
        margin-bottom: 6px;
      }
      .scan-repair-step-b {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.55;
        color: var(--color-fg-secondary);
      }
      /* The honesty line. Small, but it is the reason this band is allowed to
         exist next to the free scan without blurring the two products. */
      .scan-repair-note {
        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        line-height: 1.6;
        color: var(--color-fg-muted);
        margin: 0;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }

      /* Early-access form. Rose, not cyan: the hero's cyan input starts a scan
         that runs right now, this one joins a list for something that does not
         exist yet. Same shape so it reads as a sibling, different colour so it
         never gets mistaken for the free scan. */
      .scan-wait {
        margin: 26px 0 0;
        padding-top: 24px;
        border-top: 1px solid rgba(236, 85, 103, 0.22);
      }
      .scan-wait-h {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 18px;
        line-height: 1.25;
        color: var(--color-fg);
        margin: 0 0 6px;
      }
      .scan-wait-sub {
        font-family: "Inter", sans-serif;
        font-size: 14.5px;
        line-height: 1.6;
        color: var(--color-fg-secondary);
        max-width: 560px;
        margin: 0 0 18px;
      }
      .scan-wait-form {
        display: flex;
        align-items: stretch;
        background: rgba(22, 42, 46, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(236, 85, 103, 0.34);
        border-radius: 14px;
        overflow: hidden;
        max-width: 560px;
        width: 100%;
      }
      .scan-wait-field {
        flex: 1;
        padding: 15px 18px;
        background: transparent;
        border: 0;
        outline: 0;
        font-family: "JetBrains Mono", monospace;
        font-size: 15px;
        color: var(--color-fg);
        min-width: 0;
      }
      .scan-wait-field::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
      .scan-wait-btn {
        padding: 0 24px;
        border: 0;
        cursor: pointer;
        background: var(--color-rose);
        color: var(--color-fg);
        font-family: "Inter", sans-serif;
        font-weight: 800;
        font-size: 14.5px;
        white-space: nowrap;
        flex-shrink: 0;
        transition: filter 0.2s;
      }
      .scan-wait-btn:hover {
        filter: brightness(1.1);
      }
      .scan-wait-btn[disabled] {
        cursor: default;
        filter: grayscale(0.5) brightness(0.8);
      }
      /* The honeypot. Off-screen rather than display:none — some bots skip
         hidden fields but fill positioned ones, and a real user tabbing through
         never reaches it because it is aria-hidden and tabindex="-1". */
      .scan-wait-hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
      }
      .scan-wait-msg {
        font-family: "Inter", sans-serif;
        font-size: 13.5px;
        line-height: 1.6;
        margin: 12px 0 0;
        min-height: 1.6em;
      }
      .scan-wait-msg[data-state="ok"] {
        color: var(--color-primary);
      }
      .scan-wait-msg[data-state="err"] {
        color: var(--color-rose);
      }
      .scan-wait-fine {
        font-family: "Inter", sans-serif;
        font-size: 12.5px;
        line-height: 1.6;
        color: var(--color-fg-muted);
        margin: 10px 0 0;
        max-width: 560px;
      }

      /* ═══════════════════════════════════════
         6. PRICING LADDER
         ═══════════════════════════════════════ */
      .scan-pricing {
        position: relative;
        padding: 100px 32px;
        background: linear-gradient(
          to bottom,
          transparent,
          rgba(43, 205, 238, 0.04)
        );
      }
      .scan-pricing-inner {
        max-width: 1180px;
        margin: 0 auto;
      }
      .scan-pricing-header {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 56px;
      }
      .scan-pricing-h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(36px, 4.5vw, 56px);
        line-height: 1.05;
        letter-spacing: -0.02em;
        margin: 0;
        color: var(--color-fg);
      }
      /* Body text: Inter */
      .scan-pricing-sub {
        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
        margin-top: 14px;
      }
      .scan-pricing-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 20px;
        align-items: stretch;
      }
      .scan-tier {
        padding: 28px 26px;
        border-radius: 16px;
        position: relative;
        display: flex;
        flex-direction: column;
      }
      .scan-tier--ghost {
        background: rgba(22, 42, 46, 0.55);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
      }
      .scan-tier--hot {
        background: linear-gradient(
          135deg,
          rgba(236, 85, 103, 0.08),
          rgba(43, 205, 238, 0.06)
        );
        border: 1px solid rgba(236, 85, 103, 0.4);
        box-shadow:
          0 0 0 4px rgba(236, 85, 103, 0.06),
          0 20px 60px rgba(0, 0, 0, 0.4);
      }
      .scan-tier-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
      }
      /* Tag: Mono (label) */
      .scan-tier-tag {
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
        margin-bottom: 8px;
      }
      .scan-tier-tag--hot {
        color: var(--color-rose-bright);
      }
      .scan-tier-name {
        font-family: "Montserrat", sans-serif;
        font-weight: 800;
        font-size: 22px;
        color: var(--color-fg);
        margin: 0;
      }
      .scan-tier-edge-pill {
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(236, 85, 103, 0.16);
        border: 1px solid rgba(236, 85, 103, 0.4);
        font-family: "JetBrains Mono", monospace;
        font-size: 9.5px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-rose-bright);
        white-space: nowrap;
      }
      .scan-tier-price-row {
        margin-top: 18px;
        display: flex;
        align-items: baseline;
        gap: 4px;
      }
      .scan-tier-price {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: 44px;
        color: var(--color-fg);
        letter-spacing: -0.02em;
      }
      .scan-tier-unit {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        color: var(--color-fg-muted);
      }
      .scan-tier-bullets {
        list-style: none;
        padding: 0;
        margin: 20px 0 24px;
        flex: 1;
      }
      /* Bullet text: Inter — matches testimonial paragraph weight */
      .scan-tier-bullets li {
        font-family: "Inter", sans-serif;
        font-size: 14px;
        line-height: 1.6;
        color: var(--color-fg-secondary);
        margin-bottom: 10px;
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .scan-tier-check {
        flex-shrink: 0;
        margin-top: 1px;
      }
      .scan-tier-check--cyan {
        color: var(--color-primary);
      }
      .scan-tier-check--rose {
        color: var(--color-rose-bright);
      }
      .scan-tier-cta {
        padding: 12px 18px;
        border-radius: 12px;
        cursor: pointer;
        font-family: "Inter", sans-serif;
        font-weight: 700;
        font-size: 14px;
        transition: filter 0.2s;
        text-align: center;
        text-decoration: none;
        display: block;
        border: 0;
      }
      .scan-tier-cta:hover {
        filter: brightness(1.06);
      }
      .scan-tier-cta--outline {
        background: rgba(43, 205, 238, 0.1);
        color: var(--color-primary);
        border: 1px solid rgba(43, 205, 238, 0.3) !important;
      }
      .scan-tier-cta--rose {
        background: linear-gradient(135deg, var(--color-rose), var(--color-rose-bright));
        color: var(--color-fg);
        box-shadow: 0 4px 25px rgba(236, 85, 103, 0.4);
      }

      /* ═══════════════════════════════════════
         7. FOOTER CTA
         ═══════════════════════════════════════ */
      .scan-footer-cta {
        position: relative;
        padding: 80px 32px 100px;
        overflow: hidden;
      }
      .scan-footer-orb {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 720px;
        height: 380px;
        border-radius: 50%;
        background: rgba(43, 205, 238, 0.18);
        filter: blur(180px);
        pointer-events: none;
      }
      .scan-footer-inner {
        position: relative;
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
      }
      .scan-footer-live {
        padding: 6px 14px;
        border-radius: 999px;
        background: rgba(0, 255, 157, 0.1);
        border: 1px solid rgba(0, 255, 157, 0.3);
        font-family: "JetBrains Mono", monospace;
        font-size: 10.5px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--color-success);
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }
      .scan-footer-live-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-success);
        box-shadow: 0 0 8px var(--color-success);
        animation: scan-pulse 2s ease-in-out infinite;
      }
      @keyframes scan-pulse {
        0%,
        100% {
          opacity: 1;
          box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.5);
        }
        50% {
          opacity: 0.8;
          box-shadow: 0 0 0 6px rgba(0, 255, 157, 0);
        }
      }
      .scan-footer-h2 {
        font-family: "Montserrat", sans-serif;
        font-weight: 900;
        font-size: clamp(40px, 5.5vw, 72px);
        line-height: 1.02;
        letter-spacing: -0.03em;
        margin: 20px 0 18px;
        color: var(--color-fg);
      }
      /* Body text: Inter */
      .scan-footer-sub {
        font-family: "Inter", sans-serif;
        font-size: 17px;
        line-height: 1.65;
        color: var(--color-fg-secondary);
        margin-top: 8px;
        margin-bottom: 32px;
      }
      /* Footer pills: Mono (label/tag context) */
      .scan-footer-pills {
        margin-top: 18px;
        display: inline-flex;
        align-items: center;
        gap: 18px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--color-fg-muted);
        flex-wrap: wrap;
        justify-content: center;
      }

      /* ═══════════════════════════════════════
         RESPONSIVE
         ═══════════════════════════════════════ */
      @media (max-width: 1023px) {
        .scan-xray-layers .scan-layer {
          margin-left: 0 !important;
        }
        .scan-edge-inner {
          grid-template-columns: 1fr;
        }
        .scan-edge-inner > div {
          min-width: 0;
        }
        .scan-mid-card {
          grid-template-columns: 1fr;
        }
        .scan-mid-card > div {
          min-width: 0;
        }
        .scan-mid-right {
          justify-content: flex-start;
        }
        .scan-pricing-grid {
          grid-template-columns: 1fr;
        }
        /* Three steps stack rather than squeeze — the third one carries the
           whole point of the band and must not end up as a sliver. */
        .scan-repair-steps {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 767px) {
        .scan-hero {
          padding: 60px 20px 40px;
        }
        .scan-h1 {
          font-size: clamp(36px, 9vw, 56px);
        }
        .scan-hero-sub {
          font-size: 17px;
        }
        .scan-input-wrap {
          flex-direction: column;
          border-radius: 14px;
        }
        .scan-input-prefix {
          padding: 14px 18px 0;
        }
        .scan-input-field {
          padding: 10px 18px;
        }
        .scan-input-btn {
          min-height: 48px;
          justify-content: center;
          border-radius: 0;
        }
        .scan-stat-strip {
          flex-wrap: wrap;
        }
        .scan-stat-item {
          width: 50%;
          padding: 12px 16px;
        }
        /* Five items wrap to 2 + 2 + 1. The odd one out is the last, so give it
           the whole row — it reads as the destination instead of an orphan. */
        .scan-stat-item:last-child {
          width: 100%;
        }
        .scan-stat-divider {
          display: none;
        }
        .scan-xray {
          padding: 60px 20px;
        }
        .scan-xray-depth {
          display: none;
        }
        .scan-xray-layers {
          margin-left: 0;
        }
        .scan-layer {
          flex-wrap: wrap;
        }
        .scan-mid-card {
          padding: 28px 20px;
        }
        .scan-edge {
          padding: 40px 20px 60px;
        }
        .scan-repair {
          padding: 12px 20px 56px;
        }
        .scan-repair-card {
          padding: 32px 22px;
        }
        .scan-pricing {
          padding: 60px 20px;
        }
        .scan-pricing-grid {
          padding: 0 4px;
        }
        .scan-footer-cta {
          padding: 60px 20px 80px;
        }
        .scan-divider {
          margin: 0 20px;
        }
      }
    
      /* ── Homepage-specific inline styles (not Tailwind-dependent) ── */
      .glow-cyan {
        box-shadow: 0 0 30px rgba(43, 205, 238, 0.4);
      }
      .glass {
        background: rgba(22, 42, 46, 0.65);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border: 1px solid rgba(255, 255, 255, 0.12);
      }
      .glass:hover {
        border-color: rgba(43, 205, 238, 0.25);
        box-shadow: 0 0 20px rgba(43, 205, 238, 0.08);
      }
      .gradient-text {
        background: linear-gradient(135deg, var(--color-fg) 0%, var(--color-primary) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .nav-link {
        color: rgba(255, 255, 255, 0.7);
        transition: color 0.2s ease;
      }
      .nav-link:hover {
        color: var(--color-primary-hover);
      }
      .nav-link:active {
        color: var(--color-rose);
      }
      button.hp-dropdown-trigger {
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
      }
      .progress-bar {
        height: 6px;
        border-radius: 9999px;
        background: rgba(255, 255, 255, 0.1);
        overflow: hidden;
        margin-top: 10px;
      }
      .progress-fill {
        height: 100%;
        border-radius: 9999px;
        box-shadow: 0 0 8px currentColor;
      }

      /* Section headings */
      section h2 {
        text-shadow: 0 0 40px rgba(255, 255, 255, 0.08);
      }

      /* CTA button glow */
      .hp-btn-primary-gradient,
      .hp-btn-primary-gradient-sm,
      .hp-btn-primary-gradient-lg {
        box-shadow:
          0 4px 25px rgba(43, 205, 238, 0.35),
          0 0 60px rgba(43, 205, 238, 0.1);
      }
      .hp-btn-primary-gradient:hover,
      .hp-btn-primary-gradient-sm:hover,
      .hp-btn-primary-gradient-lg:hover {
        box-shadow:
          0 4px 35px rgba(43, 205, 238, 0.5),
          0 0 80px rgba(43, 205, 238, 0.15);
      }

      /* Kobalt Rose active states */
      a:active,
      button:active {
        transition: none;
      }
      .glass:active {
        border-color: rgba(236, 85, 103, 0.4) !important;
        box-shadow: 0 0 25px rgba(236, 85, 103, 0.15);
      }
      .hp-btn-primary-gradient:active,
      .hp-btn-primary-gradient-sm:active,
      .hp-btn-primary-gradient-lg:active {
        background: var(--color-rose) !important;
        background-image: none !important;
        box-shadow: 0 0 20px rgba(236, 85, 103, 0.3);
      }
      .hp-btn-secondary:active,
      .hp-btn-secondary-lg:active {
        border-color: rgba(236, 85, 103, 0.4) !important;
        box-shadow: 0 0 15px rgba(236, 85, 103, 0.12);
      }
      .faq-question:active {
        color: var(--color-rose) !important;
      }
      .faq-icon {
        transition:
          transform 0.3s,
          color 0.1s;
      }
      .faq-question:active .faq-icon {
        color: var(--color-rose) !important;
      }

      /* Testimonial stars */
      .star-rating {
        color: #facc15;
        letter-spacing: 2px;
      }

      /* FAQ Accordion */
      .faq-item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      .faq-item:first-child {
        border-top: 1px solid rgba(255, 255, 255, 0.08);
      }
      .faq-question {
        width: 100%;
        text-align: left;
        padding: 26px 24px;
        background: none;
        border: none;
        color: white;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1.5rem;
        transition: color 0.2s;
      }
      .faq-question:hover {
        color: var(--color-primary-hover);
      }
      .faq-answer {
        max-height: 0;
        overflow: hidden;
        transition:
          max-height 0.4s ease,
          padding 0.3s ease;
        color: #94a3b8;
        font-size: 0.95rem;
        line-height: 1.8;
      }
      .faq-item.open .faq-answer {
        max-height: 500px;
        padding: 16px 24px 28px;
      }
      .faq-item.open .faq-icon {
        transform: rotate(45deg);
      }
      .faq-icon {
        transition: transform 0.3s;
        font-size: 20px;
        color: var(--color-primary);
        flex-shrink: 0;
      }

      /* Newsletter */
      .newsletter-input {
        background: rgba(22, 42, 46, 0.8);
        border: 1px solid rgba(43, 205, 238, 0.3);
        border-radius: 0.75rem;
        padding: 12px 16px;
        color: white;
        outline: none;
        transition: all 0.3s;
        font-size: 0.9rem;
        flex: 1;
      }
      .newsletter-input::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
      .newsletter-input:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 8px var(--border-accent-bright);
      }

      /* Cookie banner */
      .cookie-banner {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        transform: translateY(100%);
        opacity: 0;
        transition:
          transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
          opacity 0.3s ease;
        background: rgba(16, 31, 34, 0.98);
        border-top: 1px solid rgba(43, 205, 238, 0.2);
        backdrop-filter: blur(12px);
      }
      .cookie-banner.visible {
        transform: translateY(0);
        opacity: 1;
      }

      /* Dropdown menu */
      .nav-dropdown {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        padding-top: 8px;
        z-index: 200;
      }
      .nav-dropdown-inner {
        background: rgba(22, 42, 46, 0.95);
        backdrop-filter: blur(16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 0.75rem;
        padding: 8px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
      }
      .nav-dropdown a {
        display: block;
        padding: 10px 14px;
        border-radius: 0.5rem;
        transition: all 0.2s;
        text-decoration: none;
      }
      .nav-dropdown a:hover {
        background: rgba(43, 205, 238, 0.1);
      }
      .has-dropdown:hover .nav-dropdown {
        display: block;
      }

      /* Benefits carousel */
      .benefit-slide {
        display: none;
      }
      .benefit-slide.active {
        display: grid;
      }

      /* Mobile menu */
      .mobile-menu {
        display: none;
      }
      .mobile-menu.open {
        display: flex;
      }

      /* Orbs */
      .orb {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(150px);
        animation: float-orb 20s ease-in-out infinite;
        will-change: transform;
      }
      .orb-cyan {
        background: rgba(43, 205, 238, 0.25);
      }
      .orb-teal {
        background: rgba(78, 214, 214, 0.15);
      }
      .orb-rose {
        background: rgba(236, 85, 103, 0.1);
      }

      /* Grid pattern */
      .grid-pattern {
        position: relative;
      }
      .grid-pattern::before {
        display: none;
      }

      /* Enhanced card hover */
      .glass {
        transition:
          border-color 0.3s,
          box-shadow 0.3s;
      }

      /* Asset showcase */
      .asset-showcase {
        position: relative;
      }
      .asset-glow {
        position: absolute;
        inset: -4px;
        background: linear-gradient(
          to right,
          rgba(43, 205, 238, 0.5),
          rgba(34, 211, 238, 0.5)
        );
        border-radius: 1rem;
        filter: blur(16px);
        opacity: 0.3;
        transition: opacity 1s ease;
        pointer-events: none;
      }
      .asset-showcase:hover .asset-glow {
        opacity: 1;
      }
      .asset-card {
        position: relative;
        background: var(--color-bg-card-solid);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 1rem;
        overflow: hidden;
        box-shadow: 0 0 20px rgba(43, 205, 238, 0.3);
      }

      /* Section divider */
      .section-divider {
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(43, 205, 238, 0.15) 30%,
          rgba(78, 214, 214, 0.15) 70%,
          transparent
        );
      }

      /* Counter animation */
      .stat-value {
        display: inline-block;
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      }
      .stat-value:hover {
        transform: scale(1.12);
      }

      /* Benefit tabs - pill-shaped subtle buttons */
      .benefit-tab {
        padding: 0.625rem 1.375rem;
        border-radius: var(--radius-xl);
        font-size: 0.8125rem;
        font-weight: 600;
        font-family: var(--font-body);
        letter-spacing: 0.01em;
        cursor: pointer;
        transition: all 0.25s;
        -webkit-appearance: none;
        appearance: none;
      }
      .benefit-tab--active {
        background: rgba(43, 205, 238, 0.12);
        border: 1px solid rgba(43, 205, 238, 0.35);
        color: var(--color-primary);
        box-shadow: 0 0 12px rgba(43, 205, 238, 0.15);
      }
      .benefit-tab--inactive {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.09);
        color: rgba(255, 255, 255, 0.5);
      }
      .benefit-tab--inactive:hover {
        background: rgba(255, 255, 255, 0.07);
        border-color: rgba(255, 255, 255, 0.18);
        color: rgba(255, 255, 255, 0.85);
      }
      /* Homepage blog card images */
      .hp-blog-card-image {
        aspect-ratio: 16/9;
        overflow: hidden;
        position: relative;
      }
      .hp-blog-card-image-gradient {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.5s ease;
      }
      .hp-blog-card:hover .hp-blog-card-image-gradient {
        transform: scale(1.04);
      }
      .hp-blog-cat-benchmarks .hp-blog-card-image-gradient {
        background: linear-gradient(
          135deg,
          rgba(16, 185, 129, 0.25) 0%,
          rgba(16, 31, 34, 0.9) 100%
        );
      }
      .hp-blog-cat-ai-security .hp-blog-card-image-gradient {
        background: linear-gradient(
          135deg,
          rgba(168, 85, 247, 0.25) 0%,
          rgba(16, 31, 34, 0.9) 100%
        );
      }
      .hp-blog-cat-pentesting .hp-blog-card-image-gradient {
        background: linear-gradient(
          135deg,
          rgba(78, 214, 214, 0.25) 0%,
          rgba(16, 31, 34, 0.9) 100%
        );
      }
      .hp-blog-card-image-icon {
        font-size: 2.5rem;
        opacity: 0.35;
      }

      /* Reduce motion for accessibility */
      @media (prefers-reduced-motion: reduce) {
        .orb,
        .grid-pattern {
          animation: none !important;
        }
        .fade-up,
        .fade-in-left,
        .fade-in-right,
        .scale-in {
          transition: opacity 0.3s ease !important;
          transform: none !important;
        }
        [data-parallax] {
          transform: none !important;
          transition: none !important;
        }
        .hero-reveal {
          animation: none !important;
          opacity: 1 !important;
          transform: none !important;
        }
        .glass:hover {
          transform: none !important;
        }
      }