/* ─────────────────────────────────────────────
       DESIGN TOKENS
    ───────────────────────────────────────────── */
    :root {
      --green:       #3CE000;
      --green-dim:   #2fb800;
      --green-glow:  rgba(60,224,0,0.18);
      --green-subtle:rgba(60,224,0,0.08);
      --dark:        #212121;
      --dark-2:      #1a1a1a;
      --dark-3:      #2d2d2d;
      --cream:       #F7F5F0;
      --cream-2:     #EFEDE8;
      --mid:         #5a5a5a;
      --light-rule:  rgba(33,33,33,0.10);
      --nav-h:       68px;
      --r:           10px;

      /* Score-gauge palette */
      --gauge-low:   #e53935;
      --gauge-mid:   #fb8c00;
      --gauge-high:  #3CE000;
      --gauge-track: rgba(33,33,33,0.10);
    }

    /* ─────────────────────────────────────────────
       RESET / BASE
    ───────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
    body {
      font-family: 'Google Sans', 'Google Sans Flex', system-ui, sans-serif;
      background: var(--cream);
      color: var(--dark);
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }

    /* ─────────────────────────────────────────────
       HERO, dark full-bleed with gauge focal point
    ───────────────────────────────────────────── */
    .hero {
      background: var(--dark-2);
      padding: calc(var(--nav-h) + 72px) 28px 0;
      min-height: 620px;
      position: relative;
      overflow: hidden;
    }
    /* Ambient radial gradient, green anchored bottom-left, subtle */
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 60% 55% at 5% 92%, rgba(60,224,0,0.13) 0%, transparent 70%);
      pointer-events: none;
    }
    /* Fine grid texture */
    .hero::after {
      content: '';
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 40px 40px;
      pointer-events: none;
    }
    .hero-inner {
      max-width: 1240px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative; z-index: 1;
      padding-bottom: 72px;
    }
    .hero-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(60,224,0,0.12); border: 1px solid rgba(60,224,0,0.28);
      border-radius: 100px; padding: 5px 14px;
      font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em;
      text-transform: uppercase; color: var(--green);
      margin-bottom: 24px;
    }
    .hero-eyebrow::before {
      content: ''; width: 6px; height: 6px; border-radius: 50%;
      background: var(--green);
      animation: pulse-dot 2s infinite;
    }
    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(0.7); }
    }
    .hero-headline {
      font-size: clamp(34px, 4.5vw, 56px);
      font-weight: 700; line-height: 1.10;
      color: #fff; margin-bottom: 20px;
      letter-spacing: -0.02em;
    }
    .hero-headline em {
      font-style: normal; color: var(--green);
    }
    .hero-sub {
      font-size: 16.5px; line-height: 1.65;
      color: rgba(255,255,255,0.62);
      max-width: 520px;
      margin-bottom: 36px;
    }
    .hero-badges {
      display: flex; flex-wrap: wrap; gap: 10px;
    }
    .hero-badge {
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px; padding: 8px 16px;
      font-size: 12.5px; color: rgba(255,255,255,0.75); font-weight: 500;
      display: flex; align-items: center; gap: 8px;
    }
    .hero-badge span.dot {
      width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0;
    }

    /* ─── GAUGE VISUAL ─── */
    .gauge-wrap {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      position: relative;
    }
    .gauge-svg { width: 100%; max-width: 420px; }
    .gauge-label-wrap {
      margin-top: -32px; text-align: center; position: relative; z-index: 2;
    }
    .gauge-threshold-note {
      margin-top: 14px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
      border-radius: 8px; padding: 10px 18px;
      font-size: 12.5px; color: rgba(255,255,255,0.55); line-height: 1.5; text-align: center;
    }
    .gauge-threshold-note strong { color: var(--green); }

    @media (max-width: 900px) {
      .hero-inner { grid-template-columns: 1fr; gap: 40px; }
      .hero-sub { max-width: 100%; }
      .gauge-svg { max-width: 320px; }
    }
    @media (max-width: 600px) {
      .hero { padding-top: calc(var(--nav-h) + 44px); }
    }

    /* ─────────────────────────────────────────────
       PERFORMANCE, skip rendering until in view
    ───────────────────────────────────────────── */
    .explainer, .preview-section, .how-section {
      content-visibility: auto;
      contain-intrinsic-size: 0 600px;
    }
    .section { padding: 80px 28px; }
    .section-inner { max-width: 1240px; margin: 0 auto; }
    .section-tag {
      display: inline-block;
      font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--green-dim); margin-bottom: 12px;
    }
    .section-title {
      font-size: clamp(26px, 3.2vw, 38px); font-weight: 700;
      letter-spacing: -0.02em; line-height: 1.2;
      color: var(--dark); margin-bottom: 16px;
    }
    .section-lead {
      font-size: 17px; line-height: 1.7; color: var(--mid);
      max-width: 680px;
    }

    /* ─────────────────────────────────────────────
       EXPLAINER, two-column split (score details)
    ───────────────────────────────────────────── */
    .explainer { background: var(--cream); }
    .explainer-grid {
      display: grid;
      grid-template-columns: 380px 1fr;
      gap: 64px;
      align-items: start;
    }
    .explainer-sticky {
      position: sticky; top: calc(var(--nav-h) + 28px);
    }
    .explainer-sticky .section-title { margin-bottom: 20px; }
    .explainer-sticky .section-lead { margin-bottom: 28px; }
    .explainer-cta {
      display: inline-flex; align-items: center; gap: 10px;
      background: var(--green); color: var(--dark);
      font-weight: 700; font-size: 14px;
      padding: 13px 24px; border-radius: 8px;
      transition: background 0.2s, transform 0.15s;
    }
    .explainer-cta:hover { background: var(--green-dim); transform: translateY(-1px); }
    .explainer-cta svg { width: 16px; height: 16px; }

    /* Stat block below CTA */
    .explainer-stat-row {
      display: flex; gap: 24px; margin-top: 36px; flex-wrap: wrap;
    }
    .e-stat {
      display: flex; flex-direction: column; gap: 4px;
    }
    .e-stat-num {
      font-size: 28px; font-weight: 700; letter-spacing: -0.03em; color: var(--dark);
    }
    .e-stat-label {
      font-size: 12px; color: var(--mid); font-weight: 500; line-height: 1.3;
    }
    .e-divider {
      width: 1px; background: var(--light-rule); align-self: stretch;
    }

    /* Right: factor cards */
    .factor-cards {
      display: flex; flex-direction: column; gap: 20px;
    }
    .factor-card {
      background: #fff;
      border: 1px solid rgba(33,33,33,0.08);
      border-radius: var(--r);
      padding: 26px 28px;
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 20px;
      align-items: start;
      opacity: 0; transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s;

    }
    .factor-card.visible { opacity: 1; transform: none; }
    .factor-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.07); }
    .factor-icon {
      width: 52px; height: 52px; border-radius: 10px;
      background: var(--green-subtle);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .factor-icon svg { width: 24px; height: 24px; }
    .factor-title {
      font-size: 16px; font-weight: 600; color: var(--dark);
      margin-bottom: 6px; line-height: 1.3;
    }
    .factor-desc {
      font-size: 14px; color: var(--mid); line-height: 1.65;
    }
    .factor-weight {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 10px;
      font-size: 11.5px; font-weight: 600; color: var(--green-dim);
      text-transform: uppercase; letter-spacing: 0.06em;
    }
    .factor-weight-bar {
      height: 3px; border-radius: 2px; background: var(--green);
    }

    @media (max-width: 960px) {
      .explainer-grid { grid-template-columns: 1fr; gap: 40px; }
      .explainer-sticky { position: static; }
    }

    /* ─────────────────────────────────────────────
       REPORT PREVIEW SECTION
    ───────────────────────────────────────────── */
    .preview-section { background: var(--dark); padding: 96px 28px; }
    .preview-inner {
      max-width: 1240px; margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
    }
    .preview-copy .section-tag { color: var(--green); }
    .preview-copy .section-title { color: #fff; }
    .preview-copy .section-lead { color: rgba(255,255,255,0.58); max-width: 520px; margin-bottom: 32px; }

    .preview-feature-list {
      list-style: none; display: flex; flex-direction: column; gap: 14px;
    }
    .preview-feature-list li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 14.5px; color: rgba(255,255,255,0.72); line-height: 1.5;
    }
    .pf-check {
      width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
      background: var(--green-subtle); border: 1px solid rgba(60,224,0,0.3);
      display: flex; align-items: center; justify-content: center;
      margin-top: 2px;
    }
    .pf-check svg { width: 10px; height: 10px; }

    .preview-img-wrap {
      position: relative;
    }
    .preview-img-wrap::before {
      content: '';
      position: absolute; inset: -2px; border-radius: 14px;
      background: linear-gradient(135deg, rgba(60,224,0,0.4), transparent 60%);
      z-index: 0;
    }
    .preview-img-wrap img {
      position: relative; z-index: 1;
      border-radius: 12px;
      box-shadow: 0 24px 64px rgba(0,0,0,0.45);
      width: 100%;
      opacity: 0; transform: translateX(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;

    }
    .preview-img-wrap img.visible { opacity: 1; transform: none; }

    @media (max-width: 900px) {
      .preview-inner { grid-template-columns: 1fr; gap: 40px; }
    }

    /* ─────────────────────────────────────────────
       HOW IT WORKS, horizontal step strip
    ───────────────────────────────────────────── */
    .how-section { background: var(--cream-2); padding: 88px 28px; }
    .steps-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2px;
      margin-top: 56px;
      position: relative;
    }
    /* Connecting rule */
    .steps-row::before {
      content: '';
      position: absolute; top: 28px; left: 14%; right: 14%;
      height: 1px; background: var(--light-rule); z-index: 0;
    }
    .step {
      display: flex; flex-direction: column; align-items: center; text-align: center;
      padding: 0 16px;
      opacity: 0; transform: translateY(24px);
      transition: opacity 0.5s ease, transform 0.5s ease;

      position: relative; z-index: 1;
    }
    .step.visible { opacity: 1; transform: none; }
    .step-num {
      width: 56px; height: 56px; border-radius: 50%;
      background: var(--cream); border: 2px solid var(--light-rule);
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; font-weight: 700; color: var(--dark);
      margin-bottom: 20px;
      position: relative;
    }
    .step.active .step-num {
      background: var(--green); border-color: var(--green); color: var(--dark);
      box-shadow: 0 0 0 6px var(--green-glow);
    }
    .step-title { font-size: 15px; font-weight: 600; color: var(--dark); margin-bottom: 8px; }
    .step-desc { font-size: 13.5px; color: var(--mid); line-height: 1.6; }

    @media (max-width: 720px) {
      .steps-row { grid-template-columns: 1fr 1fr; gap: 32px; }
      .steps-row::before { display: none; }
    }
    @media (max-width: 420px) {
      .steps-row { grid-template-columns: 1fr; }
    }

    /* ─────────────────────────────────────────────
       TRUST STRIP
    ───────────────────────────────────────────── */
    .trust-strip {
      background: var(--dark); border-top: 1px solid rgba(255,255,255,0.06);
      padding: 40px 28px;
    }
    .trust-strip-inner {
      max-width: 1240px; margin: 0 auto;
      display: flex; flex-wrap: wrap; align-items: center;
      justify-content: space-around; gap: 28px;
    }
    .trust-item {
      display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    }
    .trust-num {
      font-size: 30px; font-weight: 700; color: var(--green); letter-spacing: -0.03em;
    }
    .trust-label { font-size: 12px; color: rgba(255,255,255,0.45); font-weight: 500; }
    .trust-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.08); }
    @media (max-width: 560px) { .trust-divider { display: none; } }

    /* ─────────────────────────────────────────────
       SCROLL ANIMATION UTILITY
    ───────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .factor-card, .step, .preview-img-wrap img {
        opacity: 1 !important; transform: none !important; transition: none !important;
      }
    }