.hero {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
        gap: clamp(28px, 5vw, 72px);
        align-items: center;
        min-height: calc(100vh - 68px);
        padding: clamp(42px, 7vw, 88px) clamp(20px, 5vw, 72px) 46px;
      }

      .hero-copy {
        max-width: 720px;
      }

      .hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 32px;
      }

      .trust-row {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
        margin-top: 24px;
        color: var(--muted);
        font-size: 0.94rem;
      }

      .trust-row span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
      }

      .hero-visual {
        position: relative;
        min-height: min(650px, 72vh);
      }

      .property-photo {
        position: absolute;
        inset: 0 0 72px 34px;
        overflow: hidden;
        border-radius: 8px;
        background:
          linear-gradient(180deg, rgba(23, 33, 31, 0.05), rgba(23, 33, 31, 0.34)),
          url("https://images.unsplash.com/photo-1605146769289-440113cc3d00?auto=format&fit=crop&w=1200&q=82") center / cover;
        box-shadow: var(--shadow);
      }

      .scan-card {
        position: absolute;
        right: 0;
        bottom: 0;
        width: min(430px, 86%);
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: var(--shadow);
      }

      .scan-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
      }

      .scan-title strong {
        display: block;
        font-size: 1.05rem;
      }

      .score {
        display: grid;
        width: 58px;
        height: 58px;
        place-items: center;
        border-radius: 50%;
        color: white;
        background: var(--brand);
        font-weight: 800;
      }

      .metric {
        display: grid;
        grid-template-columns: 130px 1fr auto;
        gap: 12px;
        align-items: center;
        margin-top: 13px;
        color: var(--muted);
        font-size: 0.92rem;
      }

      .bar {
        overflow: hidden;
        height: 8px;
        border-radius: 999px;
        background: var(--soft);
      }

      .bar span {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: var(--brand);
      }

      .bar .water {
        background: var(--water);
      }

      .bar .risk {
        background: var(--risk);
      }

      .section {
        padding: 76px clamp(20px, 5vw, 72px);
      }

      .section.alt {
        background: white;
      }

      .section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 28px;
        margin-bottom: 30px;
      }

      .section h2 {
        margin: 0;
        max-width: 720px;
        font-size: clamp(2rem, 3vw, 3.2rem);
        line-height: 1.05;
        letter-spacing: 0;
      }

      .section-head p {
        max-width: 450px;
        margin: 0;
        color: var(--muted);
      }

      .data-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .data-card {
        min-height: 190px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
      }

      .icon {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        margin-bottom: 28px;
        border-radius: 8px;
        background: var(--soft);
        font-size: 1.25rem;
      }

      .data-card h3,
      .step h3 {
        margin: 0 0 8px;
        font-size: 1.1rem;
      }

      .data-card p,
      .step p,
      .source-card p {
        margin: 0;
        color: var(--muted);
      }

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

      .source-card {
        min-height: 220px;
        padding: 22px;
        border: 1px solid var(--line);
        border-radius: 8px;
        background: var(--panel);
        box-shadow: 0 10px 28px rgba(23, 33, 31, 0.08);
      }

      .source-card span {
        display: inline-flex;
        margin-bottom: 22px;
        color: var(--brand-dark);
        font-size: 0.86rem;
        font-weight: 800;
        text-transform: uppercase;
      }

      .source-card h3 {
        margin: 0 0 8px;
        font-size: 1.18rem;
      }

      .report {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: clamp(22px, 4vw, 54px);
        align-items: center;
      }

      .report-preview {
        border: 1px solid var(--line);
        border-radius: 8px;
        overflow: hidden;
        background: #fbfdfc;
        box-shadow: var(--shadow);
      }

      .map {
        position: relative;
        min-height: 300px;
        background:
          linear-gradient(90deg, transparent 48%, rgba(61, 131, 197, 0.2) 49%, rgba(61, 131, 197, 0.2) 52%, transparent 53%),
          linear-gradient(28deg, transparent 42%, rgba(13, 124, 102, 0.16) 43%, rgba(13, 124, 102, 0.16) 46%, transparent 47%),
          linear-gradient(#e7efec 1px, transparent 1px),
          linear-gradient(90deg, #e7efec 1px, transparent 1px);
        background-size: auto, auto, 42px 42px, 42px 42px;
      }

      .map::before {
        content: "";
        position: absolute;
        left: 44%;
        top: 36%;
        width: 74px;
        height: 74px;
        border: 18px solid rgba(13, 124, 102, 0.16);
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }

      .pin {
        position: absolute;
        left: 44%;
        top: 36%;
        width: 18px;
        height: 18px;
        border: 4px solid white;
        border-radius: 50%;
        background: var(--risk);
        box-shadow: 0 6px 20px rgba(216, 95, 69, 0.42);
        transform: translate(-50%, -50%);
      }

      .report-list {
        display: grid;
        gap: 12px;
        padding: 18px;
      }

      .report-item {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 13px 0;
        border-bottom: 1px solid var(--line);
      }

      .report-item:last-child {
        border-bottom: 0;
      }

      .report-item span {
        color: var(--muted);
      }

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

      .step {
        padding: 22px 0;
        border-top: 2px solid var(--line);
      }

      .step-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-bottom: 20px;
        border-radius: 8px;
        color: white;
        background: var(--ink);
        font-weight: 800;
      }

      .cta {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 24px;
        align-items: center;
        padding: 34px;
        border-radius: 8px;
        color: white;
        background: var(--brand-dark);
      }

      .cta h2 {
        color: white;
      }

      .cta p {
        max-width: 680px;
        margin: 12px 0 0;
        color: rgba(255, 255, 255, 0.78);
      }

      footer {
        display: flex;
        justify-content: space-between;
        gap: 18px;
        padding: 28px clamp(20px, 5vw, 72px);
        color: var(--muted);
        border-top: 1px solid var(--line);
      }

      @media (max-width: 980px) {
        .hero,
        .report,
        .cta {
          grid-template-columns: 1fr;
        }

        .hero {
          min-height: auto;
        }

        .hero-visual {
          min-height: 520px;
        }

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

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

        .section-head {
          align-items: start;
          flex-direction: column;
        }
      }

      @media (max-width: 680px) {
        .page-header {
          align-items: start;
          flex-direction: column;
        }

        .nav-links {
          width: 100%;
          justify-content: space-between;
          gap: 10px;
          font-size: 0.9rem;
        }

        .hero {
          padding-top: 32px;
        }

        .hero-actions .button {
          width: 100%;
        }

        .hero-visual {
          min-height: 480px;
        }

        .property-photo {
          inset: 0 0 106px 0;
        }

        .scan-card {
          width: 94%;
        }

        .metric {
          grid-template-columns: 1fr;
          gap: 6px;
        }

        .data-grid,
        .source-grid,
        .steps {
          grid-template-columns: 1fr;
        }

        .cta {
          padding: 24px;
        }

        footer {
          flex-direction: column;
        }
      }