:root {
    --landing-ink: #0b1327;
    --landing-ink-soft: #18243c;
    --landing-copy: #4e5c74;
    --landing-muted: #76839a;
    --landing-line: #e4e9f2;
    --landing-soft: #f5f7fb;
    --landing-white: #ffffff;
    --landing-primary: #5b61ff;
    --landing-primary-dark: #4548e8;
    --landing-primary-soft: #eef0ff;
    --landing-cyan: #21c8f6;
    --landing-violet: #8257f5;
    --landing-green: #0d9f58;
    --landing-orange: #ff7a3d;
    --landing-shadow: 0 24px 70px rgba(26, 37, 69, 0.12);
    --landing-shadow-soft: 0 14px 38px rgba(26, 37, 69, 0.09);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    color: var(--landing-ink);
    background: #ffffff;
    font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:has(.landing-page) {
    overflow-x: hidden;
}

body:has(.landing-page)>nav {
    position: relative;
    z-index: 100;
}

.landing-page,
.landing-page *,
.landing-nav,
.landing-nav * {
    box-sizing: border-box;
}

.landing-page {
    min-width: 0;
    overflow: hidden;
    color: var(--landing-ink);
    background: var(--landing-white);
}

.landing-page img,
.landing-nav img {
    display: block;
    max-width: 100%;
}

.landing-page a,
.landing-nav a {
    color: inherit;
    text-decoration: none;
}

.landing-page button,
.landing-nav button {
    font: inherit;
}

.landing-container {
    width: min(1180px, calc(100% - 48px));
    margin-inline: auto;
}

/* Navigation */
.landing-nav {
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    color: rgba(255, 255, 255, 0.84);
    background: rgba(7, 13, 30, 0.22);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.landing-nav.is-scrolled,
.landing-nav.is-open {
    color: var(--landing-ink);
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(17, 28, 54, 0.08);
    box-shadow: 0 10px 35px rgba(16, 27, 52, 0.08);
}

.landing-nav__inner {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.landing-brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}

.landing-brand__logo {
    width: 164px;
    height: auto;
    filter: brightness(0) invert(1);
    transition: filter 220ms ease;
}

.landing-nav.is-scrolled .landing-brand__logo,
.landing-nav.is-open .landing-brand__logo {
    filter: none;
}

.landing-nav__links {
    display: flex;
    align-items: center;
    gap: 29px;
    margin-left: auto;
}

.landing-nav__links a,
.landing-link-button {
    position: relative;
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 180ms ease;
}

.landing-nav__links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -8px;
    height: 2px;
    border-radius: 999px;
    background: var(--landing-primary);
    transition: right 180ms ease;
}

.landing-nav__links a:hover,
.landing-link-button:hover {
    color: #ffffff;
}

.landing-nav.is-scrolled .landing-nav__links a:hover,
.landing-nav.is-scrolled .landing-link-button:hover,
.landing-nav.is-open .landing-nav__links a:hover,
.landing-nav.is-open .landing-link-button:hover {
    color: var(--landing-primary);
}

.landing-nav__links a:hover::after {
    right: 0;
}

.landing-nav__actions {
    display: flex;
    align-items: center;
    gap: 17px;
}

.landing-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.17);
    border-radius: 13px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    color: currentColor;
    background: rgba(255, 255, 255, 0.07);
    cursor: pointer;
}

.landing-nav.is-scrolled .landing-menu-button,
.landing-nav.is-open .landing-menu-button {
    border-color: var(--landing-line);
    background: var(--landing-white);
}

.landing-menu-button span {
    width: 18px;
    height: 2px;
    border-radius: 99px;
    background: currentColor;
    transition: transform 180ms ease, opacity 180ms ease;
}

.landing-menu-button[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.landing-menu-button[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.landing-menu-button[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.landing-mobile-menu {
    border-top: 1px solid var(--landing-line);
    background: rgba(255, 255, 255, 0.98);
}

.landing-mobile-menu[hidden] {
    display: none;
}

.landing-mobile-menu__inner {
    display: grid;
    padding-block: 18px 24px;
}

.landing-mobile-menu__inner>a {
    padding: 13px 3px;
    color: var(--landing-ink-soft);
    font-size: 0.94rem;
    font-weight: 600;
    border-bottom: 1px solid #eef1f6;
}

.landing-mobile-menu__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding-top: 18px;
}

/* Buttons */
.landing-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: 14px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.015em;
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.landing-button:hover {
    transform: translateY(-2px);
}

.landing-button svg,
.landing-text-link svg,
.landing-pricing-note svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.landing-button--small {
    min-height: 42px;
    padding-inline: 18px;
    border-radius: 12px;
    font-size: 0.82rem;
}

.landing-button--large {
    min-height: 56px;
    padding-inline: 27px;
    border-radius: 16px;
}

.landing-button--primary {
    color: #ffffff !important;
    background: linear-gradient(135deg, #6770ff, #4d51ec);
    box-shadow: 0 13px 30px rgba(79, 83, 236, 0.28);
}

.landing-button--primary:hover {
    box-shadow: 0 17px 38px rgba(79, 83, 236, 0.36);
}

.landing-button--hero-ghost {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.22);
}

.landing-button--hero-ghost:hover {
    background: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.32);
}

.landing-button--ghost,
.landing-button--outline {
    color: var(--landing-primary) !important;
    background: var(--landing-white);
    border-color: #cfd5ff;
}

.landing-button--outline:hover,
.landing-button--ghost:hover {
    background: var(--landing-primary-soft);
    border-color: #aeb5ff;
}

.landing-button--pro {
    color: #ffffff !important;
    background: linear-gradient(135deg, #13a661, #087c47);
    box-shadow: 0 13px 30px rgba(13, 159, 88, 0.2);
}

.landing-button--white {
    color: var(--landing-primary) !important;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(4, 7, 20, 0.24);
}

/* Hero — one full-width WebGL scene with DOM copy layered above it */
.landing-hero {
    /* =====================================================
       HERO POSITIONING CONTROL PANEL

       THREE.JS SCENE
       --scene-x: positive moves the complete GIS scene right
       --scene-y: positive moves the complete GIS scene up
       --scene-scale: scales grid, glow, map and compass together

       GHANA MAP ONLY
       --map-x / --map-y / --map-z: map position inside the scene
       --map-scale: map + parcels only; compass stays unchanged
       --map-tilt-x: X-axis tilt in degrees (higher = more upright)
       --map-yaw-y: Y-axis rotation in degrees
       --map-roll-z: Z-axis roll in degrees

       COMPASS ONLY
       --compass-x: positive moves right
       --compass-y: positive moves up
       --compass-z: smaller values move it farther from the camera

       CAMERA values normally do not need adjustment.
       ===================================================== */

    --scene-x: 1.58;
    --scene-y: 0.28;
    --scene-z: 0;
    --scene-scale: 0.97;

    --map-x: 0;
    --map-y: 0.24;
    --map-z: 0;
    --map-scale: 1.00;

    /* Degrees. Increase tilt to make Ghana stand more upright. */
    --map-tilt-x: 18.5;
    --map-yaw-y: 0;
    --map-roll-z: 0;

    --compass-x: 1.48;
    --compass-y: -0.18;
    --compass-z: 2.55;

    --camera-x: 0.20;
    --camera-y: 4.25;
    --camera-z: 7.15;
    --camera-target-x: 0;
    --camera-target-y: -0.04;
    --camera-target-z: 0.12;

    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    isolation: isolate;
    color: #ffffff;
    background: #050a17;
}

.landing-hero__grid,
.landing-final-cta__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(132, 157, 220, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(132, 157, 220, 0.08) 1px, transparent 1px);
    background-size: 96px 96px;
}

.landing-hero__grid {
    z-index: 0;
    opacity: 0.22;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .58), transparent 87%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .58), transparent 87%);
}

.landing-hero__stars {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.34;
    background-image:
        radial-gradient(circle at 12% 24%, rgba(190, 211, 255, .75) 0 1px, transparent 1.4px),
        radial-gradient(circle at 72% 18%, rgba(146, 180, 255, .58) 0 1px, transparent 1.35px),
        radial-gradient(circle at 89% 42%, rgba(157, 199, 255, .46) 0 .8px, transparent 1.2px),
        radial-gradient(circle at 44% 67%, rgba(146, 180, 255, .34) 0 .8px, transparent 1.2px);
    background-size: 270px 230px, 350px 310px, 210px 260px, 420px 360px;
    mix-blend-mode: screen;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 72%, transparent 100%);
}

.landing-gis-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    outline: none;
    touch-action: pan-y;
    transition: opacity 600ms ease;
}

.landing-hero.is-ready .landing-gis-canvas {
    opacity: 1;
}

.landing-hero__glow {
    position: absolute;
    z-index: 3;
    border-radius: 999px;
    pointer-events: none;
    filter: blur(120px);
    mix-blend-mode: screen;
}

.landing-hero__glow--one {
    right: 4%;
    top: 18%;
    width: min(48vw, 700px);
    height: min(48vw, 700px);
    background: rgba(38, 111, 255, 0.12);
}

.landing-hero__glow--two {
    left: 28%;
    bottom: -32%;
    width: min(44vw, 620px);
    height: min(44vw, 620px);
    background: rgba(105, 75, 255, 0.10);
}

.landing-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background:
        linear-gradient(90deg,
            rgba(5, 10, 23, 0.98) 0%,
            rgba(5, 10, 23, 0.93) 25%,
            rgba(5, 10, 23, 0.70) 38%,
            rgba(5, 10, 23, 0.24) 49%,
            rgba(5, 10, 23, 0.03) 60%,
            transparent 72%),
        linear-gradient(0deg,
            rgba(5, 10, 23, 0.72) 0%,
            transparent 26%);
}

.landing-gis-status {
    position: absolute;
    left: 70%;
    bottom: 8%;
    z-index: 10;
    transform: translateX(-50%);
    color: rgba(223, 231, 249, 0.62);
    font-size: 0.68rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transition: opacity 250ms ease;
}

.landing-hero.is-ready .landing-gis-status {
    opacity: 0;
    pointer-events: none;
}

.landing-hero.has-error .landing-gis-status {
    color: rgba(223, 231, 249, 0.62);
}

.landing-hero__content {
    position: relative;
    z-index: 7;
    width: min(1180px, calc(100% - 48px));
    min-height: 100svh;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    align-items: center;
    gap: 24px;
    padding-block: 104px 18px;
}

.landing-hero__copy {
    position: relative;
    max-width: 520px;
    min-width: 0;
}

.landing-hero__visual-anchor {
    min-width: 0;
    min-height: 620px;
}

.landing-eyebrow,
.landing-kicker,
.landing-mini-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--landing-primary);
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.landing-eyebrow {
    color: #b8c6ff;
}

.landing-eyebrow__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #72d7ff;
    box-shadow: 0 0 0 6px rgba(114, 215, 255, 0.11), 0 0 18px rgba(114, 215, 255, 0.72);
}

.landing-hero h1 {
    max-width: 530px;
    margin: 25px 0 24px;
    color: #ffffff;
    font-size: clamp(3.2rem, 4.55vw, 4.75rem);
    font-weight: 760;
    line-height: 0.99;
    letter-spacing: -0.058em;
}

.landing-hero h1 span {
    display: block;
    margin-top: 8px;
    color: transparent;
    background: linear-gradient(100deg, #a8c3ff 0%, #6ee7f7 48%, #b7a3ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.landing-hero__lead {
    max-width: 500px;
    margin: 0;
    color: rgba(225, 232, 249, 0.76);
    font-size: 1rem;
    line-height: 1.75;
}

.landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 28px;
}

.landing-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.landing-hero__trust>div {
    flex: 0 1 calc(50% - 8px);
    min-width: 190px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(235, 240, 252, 0.68);
    font-size: 0.72rem;
    font-weight: 600;
}

.landing-hero__trust-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    color: #9fb2ff;
    border: 1px solid rgba(154, 175, 255, 0.20);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.05);
}

.landing-hero__trust-icon svg {
    width: 16px;
    height: 16px;
}

.landing-hero__trust>div:last-child {
    flex-basis: auto;
}

.landing-gis-ui {
    /* =====================================================
       HUD POSITIONING CONTROL PANEL

       top: smaller percentage moves a top card upward
       bottom: larger percentage moves a bottom card upward
       left/right: larger positive percentage moves inward
       ===================================================== */

    --gis-card-width: clamp(106px, 8.2vw, 130px);

    --hud-stage-top: clamp(70px, 7vh, 96px);
    --hud-stage-right: max(18px, calc((100vw - 1320px) / 2));
    --hud-stage-bottom: clamp(16px, 2vh, 26px);
    --hud-stage-width: min(49vw, 730px);
    --hud-stage-min-width: 620px;

    --parcel-top: 9%;
    --parcel-left: 4%;
    --parcel-rotate-y: 10deg;
    --parcel-rotate-z: -1.2deg;

    --overlap-left: 2%;
    --overlap-bottom: 24%;
    --overlap-rotate-y: 9deg;
    --overlap-rotate-z: 1deg;

    --basemap-top: 13%;
    --basemap-right: 10%;
    --basemap-rotate-y: -10deg;
    --basemap-rotate-z: 1.2deg;

    --report-right: 9%;
    --report-bottom: 40%;
    --report-rotate-y: -9deg;
    --report-rotate-z: -1deg;

    --grid-right: 8%;
    --grid-bottom: 7%;
    --grid-rotate-y: -6deg;
    --grid-rotate-z: 0.5deg;

    --hud-bg: linear-gradient(150deg, rgba(8, 18, 46, 0.82), rgba(6, 12, 28, 0.68));
    --hud-border: rgba(125, 157, 236, 0.17);
    --hud-text: #f3f7ff;
    --hud-muted: #8799ba;
    --hud-muted-bright: #aab9d4;
    --hud-blue: #77aaff;
    --hud-warning: #f2a453;
    --hud-success: #57d58f;

    position: absolute;
    inset: 0;
    z-index: 6;
    overflow: hidden;
    pointer-events: none;
}

.landing-hero .hud-stage {
    position: absolute;
    top: var(--hud-stage-top);
    right: var(--hud-stage-right);
    bottom: var(--hud-stage-bottom);
    width: var(--hud-stage-width);
    min-width: var(--hud-stage-min-width);
    container-type: inline-size;
    pointer-events: none;
}

.landing-hero .hud-card {
    position: absolute;
    width: var(--gis-card-width);
    padding: clamp(9px, 2.1cqw, 12px);
    overflow: hidden;
    color: var(--hud-text);
    background: var(--hud-bg);
    border: 1px solid var(--hud-border);
    border-radius: 11px;
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.27),
        0 0 0 1px rgba(255, 255, 255, 0.02) inset;
    backdrop-filter: blur(18px) saturate(118%);
    -webkit-backdrop-filter: blur(18px) saturate(118%);
    opacity: 0;
    translate: var(--hud-enter-x, 0) 9px;
    transition:
        opacity 520ms ease,
        translate 650ms cubic-bezier(.2, .75, .25, 1);
}

.landing-hero.is-ready .hud-card,
.landing-hero.is-ready .grid-badge {
    opacity: 1;
    translate: 0 0;
}

.landing-hero .parcel-card,
.landing-hero .overlap-card {
    display: none !important;
    --hud-enter-x: -14px;
}

.landing-hero .basemap-card,
.landing-hero .report-card,
.landing-hero .grid-badge {
    --hud-enter-x: 14px;
}

.landing-hero .parcel-card {
    transition-delay: 80ms;
}

.landing-hero .basemap-card {
    transition-delay: 150ms;
}

.landing-hero .overlap-card {
    transition-delay: 220ms;
}

.landing-hero .report-card {
    transition-delay: 290ms;
}

.landing-hero .grid-badge {
    transition-delay: 340ms;
}

.landing-hero .hud-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255, 255, 255, .045), transparent 28%, transparent 70%, rgba(76, 142, 255, .035));
}

.landing-hero .hud-card__heading {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

.landing-hero .hud-card__title {
    font-size: clamp(0.56rem, 1.9cqw, 0.68rem);
    font-weight: 680;
    letter-spacing: -0.01em;
}

.landing-hero .hud-icon {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    width: clamp(16px, 3.9cqw, 20px);
    height: clamp(16px, 3.9cqw, 20px);
}

.landing-hero .hud-icon svg {
    width: 100%;
    height: 100%;
}

.landing-hero .hud-icon--blue {
    color: var(--hud-blue);
    filter: drop-shadow(0 0 7px rgba(92, 157, 255, .24));
}

.landing-hero .hud-icon--warning {
    color: var(--hud-warning);
    filter: drop-shadow(0 0 7px rgba(244, 163, 76, .20));
}

.landing-hero .hud-divider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 1px;
    margin: clamp(7px, 1.8cqw, 10px) 0;
    background: linear-gradient(90deg, rgba(134, 169, 224, .16), rgba(134, 169, 224, .08), transparent);
}

.landing-hero .hud-divider--soft {
    margin-top: 9px;
    margin-bottom: 8px;
    opacity: .72;
}

.landing-hero .hud-label {
    position: relative;
    z-index: 1;
    margin: 0 0 3px;
    color: var(--hud-muted);
    font-size: clamp(0.46rem, 1.55cqw, 0.56rem);
    line-height: 1.4;
}

.landing-hero .parcel-card {
    top: var(--parcel-top);
    left: var(--parcel-left);
    transform: perspective(800px) rotateY(var(--parcel-rotate-y)) rotateZ(var(--parcel-rotate-z));
}

.landing-hero .overlap-card {
    left: var(--overlap-left);
    bottom: var(--overlap-bottom);
    transform: perspective(800px) rotateY(var(--overlap-rotate-y)) rotateZ(var(--overlap-rotate-z));
}

.landing-hero .basemap-card {
    top: var(--basemap-top);
    right: var(--basemap-right);
    transform: perspective(800px) rotateY(var(--basemap-rotate-y)) rotateZ(var(--basemap-rotate-z));
}

.landing-hero .report-card {
    right: var(--report-right);
    bottom: var(--report-bottom);
    transform: perspective(800px) rotateY(var(--report-rotate-y)) rotateZ(var(--report-rotate-z));
}

.landing-hero .parcel-card__value {
    position: relative;
    z-index: 1;
    margin-top: clamp(9px, 2.4cqw, 13px);
    font-size: clamp(1.05rem, 4.6cqw, 1.40rem);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -0.045em;
}

.landing-hero .parcel-card__value span {
    margin-left: 2px;
    color: #d9e2f3;
    font-size: .60em;
    font-weight: 600;
}

.landing-hero .parcel-card__metric {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    color: var(--hud-muted-bright);
    font-size: clamp(.49rem, 1.7cqw, .60rem);
    font-weight: 530;
}

.landing-hero .metric-pill {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 7px;
    color: #9aadd0;
    background: linear-gradient(180deg, rgba(77, 104, 162, .20), rgba(53, 72, 117, .12));
    border: 1px solid rgba(124, 158, 224, .12);
    border-radius: 7px;
    font-size: clamp(.43rem, 1.42cqw, .51rem);
}

.landing-hero .metric-pill strong {
    color: #bdc9e3;
    font-weight: 650;
}

.landing-hero .overlap-card__land {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #eef3ff;
    font-size: clamp(.67rem, 2.15cqw, .80rem);
    font-weight: 670;
    letter-spacing: -.02em;
}

.landing-hero .overlap-card__status {
    position: relative;
    z-index: 1;
    margin: 3px 0 0;
    color: #f0a55e;
    font-size: clamp(.52rem, 1.8cqw, .61rem);
    font-weight: 650;
}

.landing-hero .ghost-action {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #9b83e9;
    font-size: clamp(.45rem, 1.55cqw, .54rem);
    font-weight: 620;
}

.landing-hero .ghost-action svg {
    width: 12px;
    height: 12px;
    opacity: .75;
}

.landing-hero .basemap-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: clamp(3px, .9cqw, 5px);
}

.landing-hero .basemap-option {
    display: grid;
    grid-template-columns: 13px 1fr;
    align-items: center;
    gap: 6px;
    min-height: 16px;
    color: #c5d0e3;
    font-size: clamp(.45rem, 1.55cqw, .55rem);
    font-weight: 530;
}

.landing-hero .basemap-option--active {
    color: #eff5ff;
    font-weight: 650;
}

.landing-hero .basemap-radio {
    display: grid;
    place-items: center;
    width: 10px;
    height: 10px;
    border: 1.2px solid rgba(159, 181, 219, .48);
    border-radius: 50%;
}

.landing-hero .basemap-option--active .basemap-radio {
    border-color: rgba(103, 165, 255, .88);
    box-shadow: 0 0 9px rgba(75, 135, 255, .35);
}

.landing-hero .basemap-option--active .basemap-radio span {
    width: 5px;
    height: 5px;
    background: #778cff;
    border-radius: 50%;
    box-shadow: 0 0 7px rgba(90, 127, 255, .9);
}

.landing-hero .report-card__plot {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #f1f5ff;
    font-size: clamp(.58rem, 1.9cqw, .68rem);
    font-weight: 640;
    line-height: 1.4;
}

.landing-hero .report-card__plot span {
    display: block;
    color: #afbdd4;
    font-size: .88em;
    font-weight: 510;
}

.landing-hero .report-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: var(--hud-success);
    font-size: clamp(.44rem, 1.5cqw, .53rem);
    font-weight: 650;
}

.landing-hero .report-status svg {
    width: 11px;
    height: 11px;
}

.landing-hero .export-action {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 10px;
    padding: 7px 5px;
    color: #b5c5df;
    background: rgba(69, 100, 157, .19);
    border: 1px solid rgba(118, 153, 216, .14);
    border-radius: 7px;
    font-size: clamp(.43rem, 1.45cqw, .51rem);
    font-weight: 620;
}

.landing-hero .export-action svg {
    width: 12px;
    height: 12px;
}

.landing-hero .grid-badge {
    position: absolute;
    right: var(--grid-right);
    bottom: var(--grid-bottom);
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 105px;
    padding: 7px 9px;
    color: #e7efff;
    background: linear-gradient(145deg, rgba(8, 18, 46, 0.78), rgba(6, 12, 28, 0.58));
    border: 1px solid rgba(115, 146, 226, 0.14);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.20);
    transform: perspective(800px) rotateY(var(--grid-rotate-y)) rotateZ(var(--grid-rotate-z));
    opacity: 0;
    translate: var(--hud-enter-x, 14px) 9px;
    transition: opacity 520ms ease, translate 650ms cubic-bezier(.2, .75, .25, 1);
}

.landing-hero .grid-badge__icon {
    width: 23px;
    height: 23px;
    color: #65a6ff;
}

.landing-hero .grid-badge__icon svg {
    width: 100%;
    height: 100%;
}

.landing-hero .grid-badge__copy {
    display: grid;
}

.landing-hero .grid-badge__copy strong {
    color: #dfeaff;
    font-size: .53rem;
    font-weight: 700;
    line-height: 1.2;
}

.landing-hero .grid-badge__copy small {
    margin-top: 2px;
    color: #8295b4;
    font-size: .42rem;
    line-height: 1.2;
}

/* General sections */
.landing-section {
    position: relative;
    padding-block: 108px;
}

.landing-section--white {
    background: #ffffff;
}

.landing-section--soft {
    background:
        radial-gradient(circle at 8% 10%, rgba(91, 97, 255, 0.055), transparent 25%),
        var(--landing-soft);
}

.landing-section--ink {
    overflow: hidden;
    color: #ffffff;
    background:
        radial-gradient(circle at 80% 30%, rgba(91, 97, 255, 0.2), transparent 35%),
        linear-gradient(145deg, #0a1125, #111a34 60%, #090f21);
}

.landing-section-heading {
    max-width: 720px;
    margin-bottom: 52px;
}

.landing-section-heading--center {
    margin-inline: auto;
    text-align: center;
}

.landing-section h2,
.landing-final-cta h2 {
    margin: 14px 0 17px;
    color: var(--landing-ink);
    font-size: clamp(2.15rem, 3.8vw, 3.6rem);
    font-weight: 760;
    line-height: 1.08;
    letter-spacing: -0.047em;
}

.landing-section-heading p,
.landing-feature-split__lead,
.landing-print-copy>p,
.landing-final-cta p {
    margin: 0;
    color: var(--landing-copy);
    font-size: 1rem;
    line-height: 1.75;
}

.landing-kicker--light {
    color: #aebdff;
}

/* Steps */
.landing-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 55px;
}

.landing-step {
    position: relative;
    min-height: 270px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid var(--landing-line);
    border-radius: 24px;
    background: #ffffff;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.landing-step:hover {
    transform: translateY(-5px);
    border-color: #cfd4ff;
    box-shadow: var(--landing-shadow-soft);
}

.landing-step__number {
    position: absolute;
    top: 24px;
    right: 26px;
    color: #d7dced;
    font-size: 2.4rem;
    font-weight: 800;
    letter-spacing: -0.06em;
}

.landing-step__icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    color: var(--landing-primary);
    border: 1px solid #d9ddff;
    border-radius: 16px;
    background: var(--landing-primary-soft);
}

.landing-step__icon svg {
    width: 25px;
    height: 25px;
}

.landing-step h3,
.landing-feature-list h3,
.landing-workflow-card h3 {
    margin: 0 0 10px;
    color: var(--landing-ink);
    font-size: 1.15rem;
    font-weight: 750;
    letter-spacing: -0.025em;
}

.landing-step p,
.landing-feature-list p,
.landing-workflow-card p {
    margin: 0;
    color: var(--landing-copy);
    font-size: 0.88rem;
    line-height: 1.7;
}

/* Product screenshot composition */
.landing-product-stage {
    position: relative;
    overflow: visible;
    border: 1px solid #dce2ec;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: var(--landing-shadow);
}

.landing-product-stage__bar {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding-inline: 20px;
    color: #667189;
    font-size: 0.73rem;
    font-weight: 600;
    border-bottom: 1px solid #e5e9f0;
    background: #fbfcfe;
}

.landing-window-dots {
    display: flex;
    gap: 6px;
}

.landing-window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4d9e3;
}

.landing-window-dots span:first-child {
    background: #ff756a;
}

.landing-window-dots span:nth-child(2) {
    background: #ffcf56;
}

.landing-window-dots span:nth-child(3) {
    background: #53d46d;
}

.landing-product-stage__status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #27885b;
}

.landing-product-stage__status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #31b974;
    box-shadow: 0 0 0 4px rgba(49, 185, 116, .12);
}

.landing-product-stage__map {
    width: 100%;
    aspect-ratio: 16 / 8.35;
    object-fit: cover;
    object-position: center;
    border-radius: 0 0 26px 26px;
}

.landing-product-stage__modal {
    position: absolute;
    right: 6.5%;
    top: 13%;
    width: min(30%, 315px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 24px;
    box-shadow: 0 24px 64px rgba(10, 17, 36, 0.28);
}

.landing-product-stage__modal img {
    width: 100%;
}

.landing-product-stage__caption {
    position: absolute;
    left: 5%;
    bottom: 5%;
    max-width: 325px;
    padding: 16px 19px;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 16px;
    background: rgba(8, 18, 39, 0.72);
    box-shadow: 0 16px 36px rgba(5, 10, 25, 0.22);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.landing-product-stage__caption span,
.landing-product-stage__caption strong {
    display: block;
}

.landing-product-stage__caption span {
    margin-bottom: 4px;
    color: #aab8ff;
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.landing-product-stage__caption strong {
    font-size: 0.86rem;
    line-height: 1.4;
}

/* Feature split */
.landing-feature-split {
    display: grid;
    grid-template-columns: minmax(0, 1.13fr) minmax(370px, 0.87fr);
    align-items: center;
    gap: 84px;
}

.landing-feature-split__visual {
    position: relative;
    min-height: 570px;
}

.landing-image-frame {
    overflow: hidden;
    border: 1px solid #dce2ec;
    border-radius: 27px;
    background: #ffffff;
    box-shadow: var(--landing-shadow);
}

.landing-image-frame--map {
    position: absolute;
    inset: 4% 0 10% 0;
}

.landing-image-frame--map img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.landing-feature-float {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    border: 1px solid #e1e5ed;
    border-radius: 20px;
    background: white;
    box-shadow: 0 18px 46px rgba(21, 32, 60, 0.18);
}

.landing-feature-float--layers {
    left: -5%;
    bottom: 0;
    width: 28%;
}

.landing-feature-float--basemap {
    right: -5%;
    top: 0;
    width: 27%;
}

.landing-feature-float img {
    width: 100%;
}

.landing-feature-split__copy h2 {
    max-width: 550px;
}

.landing-feature-list {
    display: grid;
    gap: 23px;
    margin-top: 34px;
}

.landing-feature-list article {
    display: grid;
    grid-template-columns: 39px 1fr;
    gap: 15px;
}

.landing-check-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    color: var(--landing-primary);
    border-radius: 12px;
    background: var(--landing-primary-soft);
}

.landing-check-icon svg {
    width: 18px;
    height: 18px;
}

.landing-feature-list h3 {
    margin-bottom: 5px;
    font-size: 1rem;
}

.landing-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 35px;
    color: var(--landing-primary) !important;
    font-size: 0.9rem;
    font-weight: 750;
}

/* Workflow cards */
.landing-workflow-section {
    padding-top: 100px;
}

.landing-workflow-grid {
    display: grid;
    grid-template-columns: 1.02fr 0.98fr;
    gap: 22px;
}

.landing-workflow-card {
    position: relative;
    min-height: 510px;
    overflow: hidden;
    border: 1px solid var(--landing-line);
    border-radius: 28px;
    background: #f8f9fc;
}

.landing-workflow-card__copy {
    position: relative;
    z-index: 3;
    max-width: 475px;
    padding: 35px 36px 0;
}

.landing-mini-label {
    margin-bottom: 14px;
    font-size: 0.67rem;
}

.landing-workflow-card h3 {
    font-size: 1.55rem;
}

.landing-workflow-card__converter-stack {
    position: absolute;
    inset: auto 0 -31% 0;
    height: 420px;
}

.landing-workflow-card__converter-stack img {
    position: absolute;
    width: 46%;
    border: 1px solid #e2e6ee;
    border-radius: 22px;
    box-shadow: 0 22px 50px rgba(20, 30, 55, 0.14);
}

.landing-workflow-card__converter-stack img:first-child {
    left: 8%;
    top: 0;
    transform: rotate(-4deg);
}

.landing-workflow-card__converter-stack img:last-child {
    right: 7%;
    top: 25px;
    transform: rotate(4deg);
}

.landing-workflow-card--converter {
    background:
        radial-gradient(circle at 70% 70%, rgba(91, 97, 255, .09), transparent 37%),
        #f8f9fc;
}

.landing-workflow-card--manage {
    background:
        radial-gradient(circle at 65% 90%, rgba(45, 198, 246, .08), transparent 35%),
        #f8f9fc;
}

.landing-workflow-card__wide-image {
    position: absolute;
    left: 8%;
    right: -22%;
    bottom: 9%;
    overflow: hidden;
    border: 1px solid #e0e5ed;
    border-radius: 19px;
    box-shadow: 0 20px 48px rgba(20, 30, 55, 0.12);
}

.landing-workflow-card__wide-image img {
    width: 100%;
}

/* Print */
.landing-print-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(500px, 1.22fr);
    align-items: center;
    gap: 72px;
}

.landing-print-copy h2 {
    margin: 15px 0 20px;
    color: #ffffff;
}

.landing-print-copy>p {
    color: rgba(225, 232, 249, 0.7);
}

.landing-print-points {
    display: grid;
    gap: 13px;
    margin-top: 30px;
}

.landing-print-points div {
    display: flex;
    align-items: center;
    gap: 13px;
    color: rgba(236, 241, 252, 0.8);
    font-size: 0.84rem;
    font-weight: 600;
}

.landing-print-points span {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: #b9c5ff;
    border: 1px solid rgba(174, 189, 255, 0.24);
    border-radius: 10px;
    background: rgba(255, 255, 255, .05);
    font-size: 0.66rem;
}

.landing-disclaimer {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 13px;
    margin-top: 32px;
    padding: 17px;
    color: #ffcc9f;
    border: 1px solid rgba(255, 158, 94, 0.18);
    border-radius: 16px;
    background: rgba(255, 122, 61, 0.07);
}

.landing-disclaimer svg {
    width: 24px;
    height: 24px;
}

.landing-disclaimer p {
    margin: 0;
    color: rgba(247, 224, 207, 0.69);
    font-size: 0.72rem;
    line-height: 1.65;
}

.landing-print-visual {
    position: relative;
    padding: 18px 0 24px;
}

.landing-print-sheet {
    position: relative;
    overflow: hidden;
    border: 10px solid #ffffff;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
    transform: rotate(1.1deg);
}

.landing-print-sheet::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(12, 23, 45, 0.08);
}

.landing-print-sheet img {
    width: 100%;
}

.landing-print-badge {
    position: absolute;
    left: -22px;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 17px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 16px;
    background: rgba(17, 29, 58, 0.88);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .3);
    backdrop-filter: blur(12px);
}

.landing-print-badge svg {
    width: 27px;
    height: 27px;
    color: #aebdff;
}

.landing-print-badge strong,
.landing-print-badge span {
    display: block;
}

.landing-print-badge strong {
    margin-bottom: 3px;
    color: #ffffff;
    font-size: 0.77rem;
}

.landing-print-badge span {
    color: rgba(225, 232, 249, .6);
    font-size: 0.66rem;
}

/* Pricing */
.landing-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 18px;
}

.landing-price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 31px;
    border: 1px solid var(--landing-line);
    border-radius: 25px;
    background: #ffffff;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.landing-price-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--landing-shadow-soft);
}

.landing-price-card--popular {
    border-color: #8c77f1;
    box-shadow: 0 20px 52px rgba(103, 65, 209, 0.12);
}

.landing-price-card--pro {
    border-color: #a9dfc4;
}

.landing-price-card__ribbon {
    position: absolute;
    left: 26px;
    top: -13px;
    padding: 7px 12px;
    color: #ffffff;
    border-radius: 999px;
    background: linear-gradient(135deg, #8257f5, #6533d3);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.landing-price-card__name {
    display: block;
    margin-bottom: 10px;
    color: var(--landing-ink);
    font-size: 1.14rem;
    font-weight: 800;
}

.landing-price-card--popular .landing-price-card__name {
    color: #6b37d8;
}

.landing-price-card--pro .landing-price-card__name {
    color: var(--landing-green);
}

.landing-price-card__head p {
    min-height: 63px;
    margin: 0;
    color: var(--landing-copy);
    font-size: 0.79rem;
    line-height: 1.6;
}

.landing-price-card__price {
    margin-top: 22px;
}

.landing-price-card__price strong,
.landing-price-card__price span {
    display: block;
}

.landing-price-card__price strong {
    color: var(--landing-ink);
    font-size: 2.45rem;
    line-height: 1;
    letter-spacing: -0.05em;
}

.landing-price-card__price span {
    margin-top: 6px;
    color: var(--landing-muted);
    font-size: 0.72rem;
}

.landing-price-card__limit {
    width: fit-content;
    margin-top: 20px;
    padding: 6px 10px;
    color: var(--landing-primary);
    border: 1px solid #cdd2ff;
    border-radius: 8px;
    background: #f8f8ff;
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.landing-price-card--popular .landing-price-card__limit {
    color: #6b37d8;
    border-color: #d7c6ff;
    background: #faf7ff;
}

.landing-price-card--pro .landing-price-card__limit {
    color: var(--landing-green);
    border-color: #b9e4ce;
    background: #f4fcf8;
}

.landing-price-card ul {
    display: grid;
    gap: 12px;
    margin: 25px 0 29px;
    padding: 0;
    list-style: none;
}

.landing-price-card li {
    position: relative;
    padding-left: 24px;
    color: var(--landing-copy);
    font-size: 0.76rem;
    line-height: 1.5;
}

.landing-price-card li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: -1px;
    color: var(--landing-primary);
    font-weight: 900;
}

.landing-price-card--pro li::before {
    color: var(--landing-green);
}

.landing-price-card .landing-button {
    width: 100%;
    margin-top: auto;
}

.landing-pricing-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 29px;
    color: var(--landing-copy);
    font-size: 0.82rem;
}

.landing-pricing-note a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--landing-primary) !important;
    font-weight: 750;
}

/* Final CTA + footer */
.landing-final-cta {
    position: relative;
    overflow: hidden;
    padding-block: 80px;
    color: #ffffff;
    background:
        radial-gradient(circle at 76% 30%, rgba(113, 219, 255, 0.18), transparent 28%),
        linear-gradient(120deg, #555be9, #4237bd 62%, #242474);
}

.landing-final-cta__grid {
    opacity: 0.09;
    mask-image: none;
}

.landing-final-cta__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 50px;
}

.landing-final-cta h2 {
    max-width: 690px;
    color: #ffffff;
}

.landing-final-cta p {
    max-width: 720px;
    color: rgba(235, 239, 255, 0.73);
}

.landing-final-cta__actions {
    display: flex;
    flex-direction: column;
    gap: 11px;
    min-width: 210px;
}

.landing-footer {
    color: #667189;
    background: #f7f8fb;
}

.landing-footer__top {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    padding-block: 65px 48px;
}

.landing-footer__brand img {
    width: 172px;
}

.landing-footer__brand p {
    max-width: 360px;
    margin: 20px 0 0;
    font-size: 0.82rem;
    line-height: 1.7;
}

.landing-footer__links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.landing-footer__links>div {
    display: grid;
    align-content: start;
    gap: 12px;
}

.landing-footer__links strong {
    margin-bottom: 4px;
    color: var(--landing-ink);
    font-size: 0.77rem;
}

.landing-footer__links a {
    width: fit-content;
    font-size: 0.75rem;
    transition: color 180ms ease;
}

.landing-footer__links a:hover {
    color: var(--landing-primary);
}

.landing-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 72px;
    font-size: 0.67rem;
    border-top: 1px solid #e0e5ed;
}

/* Reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(.2, .7, .25, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive */
@media (max-width: 1120px) {
    .landing-nav__links {
        gap: 19px;
    }

    .landing-nav__links a {
        font-size: 0.78rem;
    }

    .landing-hero__content {
        grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
    }

    .landing-gis-wrap {
        width: min(660px, 118%);
        margin-left: -48px;
        margin-right: -7%;
    }

    .landing-earth-card--top {
        right: 0;
    }

    .landing-feature-split {
        gap: 55px;
    }

    .landing-feature-split__visual {
        min-height: 510px;
    }

    .landing-print-grid {
        gap: 48px;
    }
}

@media (max-width: 960px) {

    .landing-nav__links,
    .landing-nav__actions {
        display: none;
    }

    .landing-menu-button {
        display: flex;
    }

    .landing-hero {
        min-height: auto;
    }

    .landing-hero__content {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-block: 130px 80px;
    }

    .landing-hero__copy {
        max-width: 760px;
        text-align: center;
        margin-inline: auto;
    }

    .landing-eyebrow {
        justify-content: center;
    }

    .landing-hero h1,
    .landing-hero__lead {
        margin-inline: auto;
    }

    .landing-hero__actions,
    .landing-hero__trust {
        justify-content: center;
    }

    .landing-hero__trust>div {
        flex-basis: auto;
        min-width: 0;
    }

    .landing-earth-wrap {
        width: min(620px, 100%);
        justify-self: center;
    }

    .landing-scroll-cue {
        display: none;
    }

    .landing-section {
        padding-block: 88px;
    }

    .landing-feature-split,
    .landing-print-grid {
        grid-template-columns: 1fr;
    }

    .landing-feature-split__visual {
        order: 2;
        min-height: 620px;
    }

    .landing-feature-split__copy {
        order: 1;
        max-width: 700px;
    }

    .landing-print-copy {
        max-width: 700px;
    }

    .landing-print-visual {
        max-width: 800px;
    }

    .landing-workflow-grid {
        grid-template-columns: 1fr;
    }

    .landing-workflow-card {
        min-height: 480px;
    }

    .landing-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 650px;
        margin-inline: auto;
    }

    .landing-price-card__head p {
        min-height: auto;
    }

    .landing-final-cta__inner {
        grid-template-columns: 1fr;
    }

    .landing-final-cta__actions {
        flex-direction: row;
        min-width: 0;
    }

    .landing-footer__top {
        grid-template-columns: 1fr;
        gap: 45px;
    }
}

@media (max-width: 740px) {
    .landing-container {
        width: min(100% - 30px, 1180px);
    }

    .landing-nav__inner {
        min-height: 68px;
    }

    .landing-brand__logo {
        width: 143px;
    }

    .landing-hero__content {
        padding-block: 112px 58px;
    }

    .landing-hero h1 {
        margin-top: 20px;
        font-size: clamp(2.7rem, 12vw, 4.2rem);
        line-height: 1.02;
    }

    .landing-hero__lead {
        font-size: 0.93rem;
        line-height: 1.7;
    }

    .landing-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .landing-hero__actions .landing-button {
        width: 100%;
    }

    .landing-hero__trust {
        display: grid;
        grid-template-columns: 1fr;
        width: fit-content;
        margin-inline: auto;
        text-align: left;
    }

    .landing-earth-wrap {
        margin-top: -10px;
    }

    .landing-earth-card {
        min-width: 0;
        padding: 11px 12px;
    }

    .landing-earth-card--top {
        top: 12%;
        right: 0;
    }

    .landing-earth-card--bottom {
        left: 0;
        bottom: 12%;
    }

    .landing-earth-card strong {
        font-size: 0.7rem;
    }

    .landing-earth-card small {
        font-size: 0.59rem;
    }

    .landing-earth-card__icon {
        width: 29px;
        height: 29px;
    }

    .landing-section {
        padding-block: 72px;
    }

    .landing-section-heading {
        margin-bottom: 38px;
    }

    .landing-section h2,
    .landing-final-cta h2 {
        font-size: clamp(2rem, 9vw, 2.9rem);
    }

    .landing-section-heading p,
    .landing-feature-split__lead,
    .landing-print-copy>p,
    .landing-final-cta p {
        font-size: 0.91rem;
        line-height: 1.7;
    }

    .landing-steps {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .landing-step {
        min-height: 0;
        padding: 25px;
    }

    .landing-product-stage__bar {
        grid-template-columns: auto 1fr;
        min-height: 46px;
    }

    .landing-product-stage__status {
        display: none;
    }

    .landing-product-stage__modal {
        right: 3.5%;
        top: 16%;
        width: 35%;
        border-radius: 14px;
    }

    .landing-product-stage__caption {
        left: 3.5%;
        bottom: 5%;
        max-width: 240px;
        padding: 11px 13px;
    }

    .landing-product-stage__caption strong {
        font-size: 0.7rem;
    }

    .landing-feature-split__visual {
        min-height: 470px;
    }

    .landing-feature-float--layers {
        left: -2%;
        width: 30%;
    }

    .landing-feature-float--basemap {
        right: -2%;
        width: 29%;
    }

    .landing-workflow-card {
        min-height: 0;
    }

    .landing-workflow-card__copy {
        padding: 28px 25px 0;
    }

    /* On narrow screens the workflow visuals participate in normal layout flow.
       This keeps wrapped copy from colliding with the screenshots below it. */
    .landing-workflow-card__converter-stack {
        position: relative;
        inset: auto;
        height: 245px;
        margin: 24px 12px 0;
    }

    .landing-workflow-card__wide-image {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: calc(100% - 50px);
        margin: 24px auto 28px;
    }

    .landing-print-grid {
        gap: 36px;
    }

    .landing-print-sheet {
        border-width: 6px;
        border-radius: 13px;
        transform: none;
    }

    .landing-print-badge {
        left: 12px;
        bottom: -18px;
    }

    .landing-price-card {
        padding: 26px;
    }

    .landing-pricing-note {
        flex-direction: column;
        text-align: center;
    }

    .landing-final-cta {
        padding-block: 65px;
    }

    .landing-final-cta__actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .landing-footer__links {
        grid-template-columns: repeat(2, 1fr);
    }

    .landing-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: 20px;
    }
}

@media (max-width: 480px) {
    .landing-mobile-menu__actions {
        grid-template-columns: 1fr;
    }

    .landing-eyebrow {
        font-size: 0.65rem;
    }

    .landing-earth-card--top {
        right: -6px;
    }

    .landing-earth-card--bottom {
        left: -6px;
    }

    .landing-earth-card small {
        display: none;
    }

    .landing-earth-card__icon {
        display: none;
    }

    .landing-product-stage__caption {
        display: none;
    }

    .landing-feature-split__visual {
        min-height: 390px;
    }

    .landing-workflow-card {
        min-height: 0;
    }

    .landing-workflow-card h3 {
        font-size: 1.3rem;
    }

    .landing-workflow-card__converter-stack {
        height: 220px;
        margin: 22px 8px 0;
    }

    .landing-workflow-card__converter-stack img {
        width: 48%;
        border-radius: 15px;
    }

    .landing-workflow-card__converter-stack img:first-child {
        left: 3%;
    }

    .landing-workflow-card__converter-stack img:last-child {
        right: 3%;
        top: 18px;
    }

    .landing-workflow-card__wide-image {
        width: calc(100% - 40px);
        margin: 22px auto 24px;
        border-radius: 15px;
    }

    .landing-footer__links {
        grid-template-columns: 1fr 1fr;
        gap: 34px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .landing-page *,
    .landing-nav * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }
}


/* Ghana GIS hero responsive tuning */
@media (max-width: 1120px) {
    .landing-gis-wrap {
        width: min(590px, 106%);
        margin-right: -3%;
        --gis-card-width: clamp(104px, 10vw, 122px);
    }
}

@media (max-width: 960px) {
    .landing-gis-wrap {
        width: min(650px, 100%);
        aspect-ratio: 1.06;
        justify-self: center;
        margin: -12px auto 0;
        --gis-card-width: clamp(112px, 15vw, 132px);
    }
}

@media (max-width: 740px) {
    .landing-gis-wrap {
        width: min(590px, 112%);
        margin-left: -6%;
        margin-right: -6%;
        --gis-card-width: clamp(98px, 22vw, 116px);
        --parcel-left: 1%;
        --overlap-left: 0%;
        --basemap-right: 1%;
        --report-right: 1%;
        --report-bottom: 22%;
        --grid-right: 4%;
        --grid-bottom: 6%;
    }
}

@media (max-width: 520px) {
    .landing-gis-wrap {
        width: 118%;
        margin-left: -9%;
        margin-right: -9%;
        aspect-ratio: 1.02;
        --gis-card-width: 96px;
    }

    .landing-gis-wrap .overlap-card,
    .landing-gis-wrap .report-card {
        display: none;
    }

    .landing-gis-wrap .parcel-card {
        --parcel-top: 12%;
        --parcel-left: 2%;
    }

    .landing-gis-wrap .basemap-card {
        --basemap-top: 11%;
        --basemap-right: 2%;
    }

    .landing-gis-wrap .grid-badge {
        --grid-right: 5%;
        --grid-bottom: 3%;
    }
}

@media (prefers-reduced-motion: reduce) {

    .landing-gis-wrap .hud-card,
    .landing-gis-wrap .grid-badge {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}

/* Unified full-scene hero responsive composition */
@media (max-width: 1180px) {
    .landing-hero {
        --scene-x: 1.02;
        --scene-y: 0.12;
        --scene-scale: 0.88;

        --map-y: 0.11;
        --map-scale: 0.93;

        --compass-x: 1.50;
        --compass-y: 0.11;
        --compass-z: 2.48;

        --camera-z: 7.45;
    }

    .landing-hero__content {
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
        width: min(1120px, calc(100% - 38px));
    }

    .landing-hero__copy {
        max-width: 480px;
    }

    .landing-hero h1 {
        max-width: 490px;
        font-size: clamp(3.05rem, 4.7vw, 4.35rem);
    }

    .landing-hero .hud-stage {
        right: 12px;
        width: min(52vw, 700px);
        min-width: 590px;
    }
}

@media (max-width: 960px) {
    .landing-hero {
        --scene-x: 0;
        --scene-y: -1.02;
        --scene-scale: 0.82;

        --map-y: 0.15;
        --map-scale: 0.92;

        --compass-x: 1.46;
        --compass-y: 0.12;
        --compass-z: 2.42;

        --camera-x: 0.10;
        --camera-z: 7.75;
    }

    .landing-hero {
        min-height: 1120px;
    }

    .landing-hero__scrim {
        background:
            linear-gradient(180deg,
                rgba(5, 10, 23, 0.98) 0%,
                rgba(5, 10, 23, 0.92) 31%,
                rgba(5, 10, 23, 0.42) 48%,
                rgba(5, 10, 23, 0.04) 64%,
                transparent 78%),
            linear-gradient(0deg, rgba(5, 10, 23, 0.65), transparent 24%);
    }

    .landing-hero__content {
        min-height: 1120px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 620px;
        align-content: start;
        gap: 20px;
        padding-block: 118px 42px;
    }

    .landing-hero__copy {
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .landing-eyebrow,
    .landing-hero__actions,
    .landing-hero__trust {
        justify-content: center;
    }

    .landing-hero__trust>div {
        flex-basis: auto;
        min-width: 0;
    }

    .landing-hero h1,
    .landing-hero__lead {
        margin-inline: auto;
    }

    .landing-hero__visual-anchor {
        min-height: 620px;
    }

    .landing-gis-ui {
        --gis-card-width: clamp(104px, 14vw, 124px);
    }

    .landing-hero .hud-stage {
        top: 478px;
        left: 50%;
        right: auto;
        bottom: 22px;
        width: min(94vw, 760px);
        min-width: 0;
        transform: translateX(-50%);
    }

    .landing-scroll-cue {
        display: none;
    }
}

@media (max-width: 740px) {
    .landing-hero {
        --scene-x: 0;
        --scene-y: -1.22;
        --scene-scale: 0.72;

        --map-y: 0.16;
        --map-scale: 0.91;

        --compass-x: 1.40;
        --compass-y: 0.12;
        --compass-z: 2.36;

        --camera-x: 0.08;
        --camera-z: 8.05;
    }

    .landing-hero {
        min-height: 1040px;
    }

    .landing-hero__content {
        width: min(100% - 30px, 720px);
        min-height: 1040px;
        grid-template-rows: auto 540px;
        padding-block: 106px 34px;
    }

    .landing-hero h1 {
        max-width: 620px;
        margin-top: 20px;
        font-size: clamp(2.7rem, 11.4vw, 3.8rem);
        line-height: 1.01;
    }

    .landing-hero__lead {
        max-width: 590px;
        font-size: 0.92rem;
    }

    .landing-hero__actions {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 440px;
        margin-inline: auto;
    }

    .landing-hero__actions .landing-button {
        width: 100%;
    }

    .landing-hero__trust {
        display: grid;
        grid-template-columns: 1fr;
        width: fit-content;
        margin-inline: auto;
        text-align: left;
    }

    .landing-gis-ui {
        --gis-card-width: clamp(96px, 20vw, 112px);
        --parcel-left: 1%;
        --overlap-left: 0%;
        --basemap-right: 1%;
        --report-right: 1%;
        --report-bottom: 28%;
        --grid-right: 4%;
        --grid-bottom: 8%;
    }

    .landing-hero .hud-stage {
        top: 496px;
        width: 108%;
        height: 510px;
    }
}

@media (max-width: 560px) {
    .landing-hero {
        --scene-x: 0;
        --scene-y: -1.36;
        --scene-scale: 0.62;

        --map-y: 0.17;
        --map-scale: 1.00;

        --compass-x: 1.30;
        --compass-y: 0.12;
        --compass-z: 2.28;

        --camera-x: 0.05;
        --camera-z: 8.35;
    }

    .landing-hero {
        min-height: 940px;
    }

    .landing-hero__content {
        min-height: 940px;
        grid-template-rows: auto 420px;
        padding-top: 100px;
    }

    .landing-hero h1 {
        font-size: clamp(2.45rem, 12vw, 3.25rem);
    }

    .landing-hero__trust {
        display: none;
    }

    .landing-gis-ui {
        --gis-card-width: 98px;
        --parcel-top: 6%;
        --parcel-left: 1%;
        --basemap-top: 7%;
        --basemap-right: 1%;
    }

    .landing-hero .hud-stage {
        top: 470px;
        width: 112%;
        height: 410px;
    }

    .landing-hero .overlap-card,
    .landing-hero .report-card,
    .landing-hero .grid-badge {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .landing-hero .hud-card,
    .landing-hero .grid-badge {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }
}

/* ================================================================
   HERO TWO-CARD FINAL COMPOSITION
   Basemap + Map report remain in the floating scene.
   Parcel area + Possible overlap are intentionally removed.
   The values below are the easiest ones to brute-force later.
   ================================================================ */

@media (min-width: 961px) {
    .landing-hero__content {
        min-height: 100svh;
        padding-block: 104px 18px;
    }

    .landing-hero__visual-anchor {
        min-height: min(68vh, 610px);
    }

    .landing-hero .basemap-card {
        top: var(--basemap-top);
        right: var(--basemap-right);
    }

    .landing-hero .report-card {
        right: var(--report-right);
        bottom: var(--report-bottom);
    }
}

@media (min-width: 961px) and (max-height: 840px) {
    .landing-hero__content {
        padding-block: 96px 18px;
    }

    .landing-hero h1 {
        margin-block: 18px;
        font-size: clamp(2.85rem, 4.25vw, 4.35rem);
    }

    .landing-hero__lead {
        line-height: 1.62;
    }

    .landing-hero__actions {
        margin-top: 22px;
    }

    .landing-hero__trust {
        margin-top: 18px;
        padding-top: 16px;
    }

    .landing-hero__visual-anchor {
        min-height: min(66vh, 560px);
    }
}

@media (max-width: 1180px) and (min-width: 961px) {
    .landing-hero {
        --scene-y: 0.18;
        --map-y: 0.16;
        --map-scale: 1.00;
        --map-tilt-x: 17.5;
        --compass-y: 0.17;
    }

    .landing-gis-ui {
        --basemap-top: 12%;
        --basemap-right: 7%;
        --report-right: 7%;
        --report-bottom: 39%;
        --grid-right: 6%;
    }
}

@media (max-width: 960px) {
    .landing-hero {
        --map-tilt-x: 16.5;
    }

    .landing-gis-ui {
        --basemap-top: 10%;
        --basemap-right: 3%;
        --report-right: 3%;
        --report-bottom: 31%;
        --grid-right: 4%;
    }
}

@media (max-width: 740px) {
    .landing-hero {
        --map-tilt-x: 15.5;
    }

    .landing-gis-ui {
        --basemap-top: 8%;
        --basemap-right: 2%;
        --report-right: 2%;
        --report-bottom: 29%;
    }
}

@media (max-width: 560px) {
    .landing-hero {
        --map-tilt-x: 14.5;
    }

    /* On very narrow phones, keep only the lightest floating control. */
    .landing-hero .report-card,
    .landing-hero .grid-badge {
        display: none;
    }
}

/* ======================================================================
   HERO RESPONSIVE + CAPABILITY RAIL PASS
   2026-08-10

   This block intentionally lives at the END of landing.css so these
   values win over older hero experiments without deleting them.

   QUICK TUNING
   - Desktop HUD position: --basemap-top/right, --report-top/right
   - Mobile HUD position: --mobile-hud-top, --mobile-report-top
   - Card widths: --basemap-card-width, --report-card-width
   - 3D placement still uses the --scene-* / --map-* / --compass-* values
     already defined on .landing-hero.
   ====================================================================== */

/* ----- Desktop hero layout: copy + scene, then one shared bottom rail ----- */
.landing-hero__content {
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 10px;
}

.landing-hero__copy {
    grid-column: 1;
    grid-row: 1;
}

.landing-hero__visual-anchor {
    grid-column: 2;
    grid-row: 1;
    min-height: clamp(430px, 61vh, 560px);
}

.landing-hero__capabilities {
    grid-column: 1 / -1;
    grid-row: 2;
    position: relative;
    z-index: 9;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    margin-top: 2px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid rgba(130, 159, 231, 0.13);
    border-radius: 16px;
    background:
        linear-gradient(90deg,
            rgba(128, 87, 245, 0.075) 0%,
            rgba(93, 109, 255, 0.055) 35%,
            rgba(51, 170, 255, 0.055) 68%,
            rgba(33, 214, 246, 0.075) 100%),
        rgba(7, 14, 32, 0.48);
    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.025);
    backdrop-filter: blur(13px) saturate(112%);
    -webkit-backdrop-filter: blur(13px) saturate(112%);
}

.landing-hero__capabilities::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg,
        rgba(130, 87, 245, 0.11),
        transparent 22%,
        transparent 76%,
        rgba(33, 214, 246, 0.12));
}

.landing-hero__capability {
    --cap-start: #a993ff;
    --cap-end: #9f8fff;
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 43px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 1px solid rgba(150, 170, 231, 0.08);
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
}

.landing-hero__capability--plotting {
    --cap-start: #b49cff;
    --cap-end: #8f86ff;
}

.landing-hero__capability--print {
    --cap-start: #9fa9ff;
    --cap-end: #78b9ff;
}

.landing-hero__capability--parcel {
    --cap-start: #7fc4ff;
    --cap-end: #59d9fa;
}

.landing-hero__capability--overlap {
    --cap-start: #63d5ff;
    --cap-end: #35eef2;
}

.landing-hero__capability-icon {
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    color: var(--cap-end);
    border: 1px solid color-mix(in srgb, var(--cap-end) 28%, transparent);
    border-radius: 9px;
    background: color-mix(in srgb, var(--cap-start) 8%, transparent);
    box-shadow: inset 0 0 16px color-mix(in srgb, var(--cap-end) 5%, transparent);
}

.landing-hero__capability-icon svg {
    width: 16px;
    height: 16px;
}

.landing-hero__capability-label {
    min-width: 0;
    color: transparent;
    background: linear-gradient(100deg, var(--cap-start), var(--cap-end));
    -webkit-background-clip: text;
    background-clip: text;
    font-size: clamp(0.66rem, 0.72vw, 0.76rem);
    font-weight: 650;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

/* ----- Floating HUD sizing controls ----- */
.landing-gis-ui {
    --basemap-card-width: clamp(142px, 10.4vw, 160px);
    --report-card-width: clamp(122px, 8.8vw, 138px);

    /* Desktop brute-force values. */
    --basemap-top: 12%;
    --basemap-right: 7%;
    --report-top: 48%;
    --report-right: 6.5%;

    /* Mobile brute-force values are activated below 960px. */
    --mobile-hud-top: 620px;
    --mobile-hud-height: 550px;
    --mobile-report-top: 43%;
}

.landing-hero .basemap-card {
    width: var(--basemap-card-width);
    top: var(--basemap-top);
    right: var(--basemap-right);
}

.landing-hero .report-card {
    width: var(--report-card-width);
    top: var(--report-top);
    right: var(--report-right);
    bottom: auto;
}

/* A slightly less cramped list now that the Basemap card is wider. */
.landing-hero .basemap-list {
    gap: clamp(4px, 1cqw, 6px);
}

.landing-hero .basemap-option {
    grid-template-columns: 14px 1fr;
    gap: 7px;
    font-size: clamp(.48rem, 1.48cqw, .58rem);
}

/* Short desktop screens still keep the capability rail inside the first view. */
@media (min-width: 961px) and (max-height: 840px) {
    .landing-hero__content {
        grid-template-rows: minmax(0, 1fr) auto;
        padding-block: 92px 12px;
        row-gap: 6px;
    }

    .landing-hero__visual-anchor {
        min-height: clamp(390px, 55vh, 500px);
    }

    .landing-hero__capabilities {
        padding: 6px;
    }

    .landing-hero__capability {
        min-height: 39px;
        padding-block: 5px;
    }
}

/* ----------------------------------------------------------------------
   TABLET / STACKED HERO
   The 3D scene gets its own vertical breathing room beneath the copy.
   Floating Basemap + Map report stay visible for this inspection pass.
   ---------------------------------------------------------------------- */
@media (max-width: 960px) {
    .landing-hero {
        --scene-x: 0;
        --scene-y: -1.42;
        --scene-scale: 0.78;

        --map-y: 0.16;
        --map-scale: 0.94;
        --map-tilt-x: 16.5;

        --compass-x: 1.43;
        --compass-y: -0.04;
        --compass-z: 2.40;

        --camera-x: 0.08;
        --camera-z: 7.90;

        min-height: max(1240px, 128svh);
    }

    .landing-hero__content {
        width: min(100% - 34px, 760px);
        min-height: max(1240px, 128svh);
        grid-template-columns: 1fr;
        grid-template-rows: auto minmax(590px, 1fr) auto;
        align-content: start;
        gap: 18px;
        padding-block: 112px 30px;
    }

    .landing-hero__copy {
        grid-column: 1;
        grid-row: 1;
        max-width: 720px;
        margin-inline: auto;
        text-align: center;
    }

    .landing-hero__visual-anchor {
        grid-column: 1;
        grid-row: 2;
        min-height: 590px;
    }

    .landing-hero__capabilities {
        grid-column: 1;
        grid-row: 3;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        width: 100%;
        margin-top: 0;
    }

    .landing-hero__capability {
        align-items: flex-start;
    }

    .landing-hero__capability-label {
        font-size: clamp(0.62rem, 1.45vw, 0.72rem);
    }

    .landing-gis-ui {
        --basemap-card-width: clamp(136px, 18vw, 158px);
        --report-card-width: clamp(122px, 15.5vw, 140px);
        --basemap-top: 4%;
        --basemap-right: 2%;
        --report-right: 1.5%;
        --mobile-hud-top: 590px;
        --mobile-hud-height: 570px;
        --mobile-report-top: 44%;
        --grid-right: 2%;
        --grid-bottom: 2%;
    }

    .landing-hero .hud-stage {
        top: var(--mobile-hud-top);
        left: 50%;
        right: auto;
        bottom: auto;
        width: min(96vw, 760px);
        min-width: 0;
        height: var(--mobile-hud-height);
        transform: translateX(-50%);
    }

    .landing-hero .basemap-card {
        top: var(--basemap-top);
        right: var(--basemap-right);
    }

    .landing-hero .report-card {
        display: block;
        top: var(--mobile-report-top);
        right: var(--report-right);
        bottom: auto;
    }

    .landing-hero .grid-badge {
        display: flex;
    }

    .landing-hero__scrim {
        background:
            linear-gradient(180deg,
                rgba(5, 10, 23, 0.99) 0%,
                rgba(5, 10, 23, 0.95) 31%,
                rgba(5, 10, 23, 0.62) 43%,
                rgba(5, 10, 23, 0.12) 57%,
                transparent 72%),
            linear-gradient(0deg, rgba(5, 10, 23, 0.58), transparent 22%);
    }
}

@media (max-width: 740px) {
    .landing-hero {
        --scene-y: -1.60;
        --scene-scale: 0.70;
        --map-scale: 0.96;
        --map-tilt-x: 15.5;
        --compass-x: 1.38;
        --compass-y: -0.08;
        --compass-z: 2.34;
        --camera-z: 8.10;
        min-height: max(1240px, 138svh);
    }

    .landing-hero__content {
        width: min(100% - 28px, 700px);
        min-height: max(1240px, 138svh);
        grid-template-rows: auto 575px auto;
        padding-block: 102px 26px;
    }

    .landing-hero__visual-anchor {
        min-height: 575px;
    }

    .landing-hero__capabilities {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
        padding: 7px;
    }

    .landing-hero__capability {
        min-height: 46px;
        align-items: center;
    }

    .landing-hero__capability-label {
        font-size: 0.67rem;
    }

    .landing-gis-ui {
        --basemap-card-width: clamp(130px, 25vw, 152px);
        --report-card-width: clamp(118px, 22vw, 136px);
        --mobile-hud-top: 610px;
        --mobile-hud-height: 535px;
        --basemap-top: 3%;
        --basemap-right: 1%;
        --mobile-report-top: 46%;
        --report-right: 0.5%;
        --grid-right: 1.5%;
        --grid-bottom: 1%;
    }

    .landing-hero .hud-stage {
        width: 104%;
    }
}

@media (max-width: 560px) {
    .landing-hero {
        --scene-y: -1.78;
        --scene-scale: 0.62;
        --map-y: 0.17;
        --map-scale: 1.00;
        --map-tilt-x: 14.5;
        --compass-x: 1.27;
        --compass-y: -0.14;
        --compass-z: 2.26;
        --camera-x: 0.04;
        --camera-z: 8.38;
        min-height: max(1230px, 148svh);
    }

    .landing-hero__content {
        min-height: max(1230px, 148svh);
        grid-template-rows: auto 530px auto;
        gap: 14px;
        padding-top: 96px;
        padding-bottom: 24px;
    }

    .landing-hero__copy {
        width: 100%;
    }

    .landing-hero h1 {
        font-size: clamp(2.42rem, 11.8vw, 3.22rem);
    }

    .landing-hero__lead {
        max-width: 500px;
        font-size: 0.90rem;
        line-height: 1.66;
    }

    .landing-hero__actions {
        margin-top: 24px;
    }

    .landing-hero__visual-anchor {
        min-height: 530px;
    }

    .landing-hero__capabilities {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-inline: auto;
    }

    .landing-hero__capability {
        min-height: 49px;
        padding: 7px;
    }

    .landing-hero__capability-icon {
        width: 27px;
        height: 27px;
    }

    .landing-hero__capability-label {
        font-size: 0.64rem;
    }

    .landing-gis-ui {
        --basemap-card-width: clamp(126px, 34vw, 148px);
        --report-card-width: clamp(116px, 31vw, 134px);
        --mobile-hud-top: 625px;
        --mobile-hud-height: 500px;
        --basemap-top: 2%;
        --basemap-right: 0.5%;
        --mobile-report-top: 47%;
        --report-right: 0%;
        --grid-right: 1%;
        --grid-bottom: 0%;
    }

    .landing-hero .hud-stage {
        width: 110%;
    }

    /* Explicitly undo older phone rules that hid these controls. */
    .landing-hero .basemap-card,
    .landing-hero .report-card {
        display: block;
    }

    .landing-hero .grid-badge {
        display: flex;
    }
}

@media (max-width: 420px) {
    .landing-hero {
        --scene-y: -1.86;
        --scene-scale: 0.58;
        --compass-x: 1.22;
        --compass-y: -0.16;
        min-height: max(1220px, 154svh);
    }

    .landing-hero__content {
        width: min(100% - 22px, 680px);
        min-height: max(1220px, 154svh);
        grid-template-rows: auto 500px auto;
        padding-top: 92px;
    }

    .landing-hero__visual-anchor {
        min-height: 500px;
    }

    .landing-gis-ui {
        --basemap-card-width: 132px;
        --report-card-width: 118px;
        --mobile-hud-top: 630px;
        --mobile-hud-height: 470px;
        --mobile-report-top: 48%;
    }

    .landing-hero .hud-stage {
        width: 114%;
    }

    .landing-hero__capability-label {
        font-size: 0.61rem;
    }
}

/* ======================================================================
   HERO HUD + CAPABILITY POLISH CONTROL PANEL
   2026-08-10

   THIS IS THE FINAL SOURCE OF TRUTH FOR FLOATING HUD POSITIONING.
   Change these values first when brute-forcing the three floating UI
   elements. The rules below intentionally sit at the end of the file so
   they override the older experimental values above.

   TOP values:
      smaller = higher
      larger  = lower

   RIGHT values:
      smaller = farther right
      larger  = farther left / farther into the scene

   BOTTOM values:
      larger  = higher
      smaller = lower
   ====================================================================== */

.landing-gis-ui {
    /* ---------------- BASEMAP ---------------- */
    --basemap-card-width: clamp(150px, 11vw, 172px);
    --basemap-top: 10%;
    --basemap-right: 7.5%;

    /* ---------------- MAP REPORT ------------- */
    --report-card-width: clamp(128px, 9.2vw, 146px);
    --report-top: 38%;
    --report-right: 6.5%;

    /* ---------------- GHANA GRID ------------- */
    --grid-right: 7%;
    --grid-bottom: 14%;
}

.landing-hero .basemap-card {
    width: var(--basemap-card-width);
    top: var(--basemap-top);
    right: var(--basemap-right);
}

.landing-hero .report-card {
    width: var(--report-card-width);
    top: var(--report-top);
    right: var(--report-right);
    bottom: auto;
}

.landing-hero .grid-badge {
    right: var(--grid-right);
    bottom: var(--grid-bottom);
}

/* ----------------------------------------------------------------------
   CAPABILITY RAIL POLISH
   Keep the four tiles spanning the hero, but make each capability feel
   less empty: slightly larger iconography and centered content.
   ---------------------------------------------------------------------- */

.landing-hero__capabilities {
    gap: 6px;
    padding: 7px;
}

.landing-hero__capability {
    min-height: 46px;
    justify-content: center;
    gap: 10px;
    padding: 7px 10px;
}

.landing-hero__capability-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.landing-hero__capability-icon svg {
    width: 18px;
    height: 18px;
}

.landing-hero__capability-label {
    font-size: clamp(0.69rem, 0.76vw, 0.80rem);
    font-weight: 680;
}

/* ----------------------------------------------------------------------
   TABLET / STACKED HUD CONTROL PANEL
   These preserve the same three named controls when the hero stacks.
   ---------------------------------------------------------------------- */

@media (max-width: 960px) {
    .landing-gis-ui {
        --basemap-card-width: clamp(142px, 19vw, 164px);
        --report-card-width: clamp(126px, 16.5vw, 144px);

        --basemap-top: 4%;
        --basemap-right: 3%;

        --report-right: 2%;
        --mobile-report-top: 39%;

        --grid-right: 4%;
        --grid-bottom: 8%;
    }

    .landing-hero .report-card {
        top: var(--mobile-report-top);
    }

    .landing-hero__capability {
        justify-content: flex-start;
    }
}

@media (max-width: 740px) {
    .landing-gis-ui {
        --basemap-card-width: clamp(134px, 27vw, 156px);
        --report-card-width: clamp(120px, 23vw, 138px);

        --basemap-top: 3%;
        --basemap-right: 2%;

        --mobile-report-top: 42%;
        --report-right: 1.5%;

        --grid-right: 3%;
        --grid-bottom: 6%;
    }

    .landing-hero__capabilities {
        gap: 6px;
    }

    .landing-hero__capability {
        justify-content: flex-start;
        gap: 9px;
    }

    .landing-hero__capability-icon {
        width: 32px;
        height: 32px;
    }

    .landing-hero__capability-icon svg {
        width: 17px;
        height: 17px;
    }
}

@media (max-width: 560px) {
    .landing-gis-ui {
        --basemap-card-width: clamp(128px, 35vw, 150px);
        --report-card-width: clamp(118px, 31vw, 136px);

        --basemap-top: 2%;
        --basemap-right: 1%;

        --mobile-report-top: 44%;
        --report-right: 0.5%;

        --grid-right: 2%;
        --grid-bottom: 5%;
    }

    .landing-hero__capability {
        min-height: 48px;
    }

    .landing-hero__capability-label {
        font-size: 0.65rem;
    }
}