/* =========================================
   EARTH//ACTION
   MAIN STYLESHEET
========================================= */

:root {
    --bg: #070907;
    --surface: #0d120e;
    --surface-light: #121a14;
    --text: #f1f5f1;
    --muted: #8f9a91;
    --accent: #9fbea6;
    --accent-light: #dcebdd;
    --border: rgba(255, 255, 255, 0.08);
    --danger: #d9a0a0;
}


/* =========================================
   RESET
========================================= */

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

html {
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    min-height: 100vh;
    overflow-x: hidden;

    background: var(--bg);
    color: var(--text);

    font-family:
        Inter,
        Helvetica Neue,
        Helvetica,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea {
    font: inherit;
}

button {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}


/* =========================================
   NAVIGATION
========================================= */

.navbar {
    position: fixed;
    z-index: 100;

    top: 0;
    left: 0;

    width: 100%;
    height: 82px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 5vw;

    border-bottom: 1px solid var(--border);

    background: rgba(7, 9, 7, 0.72);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.brand {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.brand span,
.footer-brand span {
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    position: relative;

    color: var(--muted);

    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;

    transition: color 0.25s ease;
}

.nav-links a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: var(--accent);

    transition: width 0.25s ease;
}

.nav-links a:hover {
    color: var(--text);
}

.nav-links a:hover::after {
    width: 100%;
}

.impact-button {
    padding: 12px 18px;

    border: 1px solid rgba(220, 235, 221, 0.22);

    color: var(--text);

    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}

.impact-button:hover {
    border-color: var(--accent);
    background: var(--accent);
    color: var(--bg);
}


/* =========================================
   GENERAL
========================================= */

.section-label {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.eyebrow {
    margin-bottom: 22px;

    color: var(--accent);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.17em;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;

    min-height: 50px;
    padding: 0 21px;

    border: 1px solid transparent;

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        gap 0.3s ease;
}

.button-primary {
    background: var(--accent);
    color: var(--bg);
}

.button-primary:hover {
    background: var(--accent-light);
    gap: 20px;
}

.button-secondary {
    border-color: var(--border);
    color: var(--text);
}

.button-secondary:hover {
    border-color: rgba(220, 235, 221, 0.3);
    background: var(--surface-light);
}


/* =========================================
   HERO
========================================= */

.hero {
    position: relative;

    min-height: 100vh;

    display: grid;
    grid-template-columns: 1fr 0.85fr;
    align-items: center;

    gap: 5vw;

    padding: 140px 8vw 100px;

    overflow: hidden;

    border-bottom: 1px solid var(--border);

    background:
        radial-gradient(
            circle at 76% 48%,
            rgba(159, 190, 166, 0.08),
            transparent 30%
        );
}

.hero-content {
    position: relative;
    z-index: 3;
}

.hero h1 {
    max-width: 900px;

    margin: 0;

    font-size: clamp(4rem, 8vw, 8.5rem);
    line-height: 0.84;

    letter-spacing: -0.07em;
    font-weight: 600;
}

.hero h1 span {
    display: block;
    color: var(--accent);
}

.hero-description {
    max-width: 530px;

    margin-top: 38px;

    color: var(--muted);

    font-size: 0.98rem;
    line-height: 1.8;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 38px;
}

.planet-wrapper {
    position: relative;

    width: min(44vw, 620px);
    aspect-ratio: 1;

    justify-self: end;
}

.planet {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 62%;
    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 32% 30%,
            rgba(220, 235, 221, 0.82),
            rgba(159, 190, 166, 0.3) 17%,
            rgba(67, 91, 73, 0.45) 43%,
            rgba(9, 15, 10, 0.98) 76%
        );

    box-shadow:
        0 0 50px rgba(159, 190, 166, 0.1),
        inset -35px -20px 60px rgba(0, 0, 0, 0.65);

    animation: planetFloat 7s ease-in-out infinite;
}

.planet-glow {
    position: absolute;
    inset: -12%;

    border-radius: 50%;

    background: rgba(159, 190, 166, 0.08);

    filter: blur(25px);

    z-index: -1;
}

.planet-orbit {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 88%;
    height: 34%;

    border: 1px solid rgba(220, 235, 221, 0.16);
    border-radius: 50%;

    transform: translate(-50%, -50%) rotate(-22deg);
}

.planet-orbit-one {
    animation: orbitOne 13s linear infinite;
}

.planet-orbit-two {
    width: 76%;
    height: 52%;

    transform: translate(-50%, -50%) rotate(63deg);

    border-color: rgba(220, 235, 221, 0.08);

    animation: orbitTwo 18s linear infinite reverse;
}

.scroll-indicator {
    position: absolute;

    left: 8vw;
    bottom: 34px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.scroll-indicator span {
    width: 34px;
    height: 1px;

    background: var(--accent);

    animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes planetFloat {
    0%, 100% {
        transform: translate(-50%, -50%) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translateY(-14px);
    }
}

@keyframes orbitOne {
    from {
        transform: translate(-50%, -50%) rotate(-22deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(338deg);
    }
}

@keyframes orbitTwo {
    from {
        transform: translate(-50%, -50%) rotate(63deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(-297deg);
    }
}

@keyframes scrollPulse {
    0%, 100% {
        width: 25px;
        opacity: 0.4;
    }

    50% {
        width: 42px;
        opacity: 1;
    }
}


/* =========================================
   THE PLANET
========================================= */

.planet-intro {
    padding: 150px 8vw 140px;

    border-bottom: 1px solid var(--border);

    background: var(--surface);
}

.planet-intro-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    gap: 80px;

    margin-top: 55px;
}

.planet-intro-heading h2 {
    max-width: 850px;

    margin: 0;

    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.92;

    letter-spacing: -0.055em;
    font-weight: 600;
}

.planet-intro-heading h2 span {
    display: block;
    color: var(--accent);
}

.planet-intro-text {
    align-self: end;

    padding-bottom: 10px;
}

.planet-intro-text p {
    max-width: 480px;

    margin: 0 0 22px;

    color: var(--muted);

    font-size: 0.95rem;
    line-height: 1.8;
}

.planet-image {
    position: relative;

    grid-column: span 2;

    height: min(65vh, 680px);

    overflow: hidden;

    border: 1px solid var(--border);
}

.planet-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(0.72) saturate(0.82);

    transition:
        transform 1s ease,
        filter 0.6s ease;
}

.planet-image:hover img {
    transform: scale(1.025);
    filter: brightness(0.8) saturate(0.9);
}

.image-caption {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    justify-content: space-between;

    padding: 22px 25px;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.75),
        transparent
    );

    color: var(--text);

    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}


/* =========================================
   ACTIONS
========================================= */

.actions-section {
    padding: 150px 8vw 140px;

    border-bottom: 1px solid var(--border);

    background: var(--bg);
}

.actions-header,
.biodiversity-header,
.impact-header,
.my-impact-header,
.record-header {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    gap: 80px;
    align-items: end;

    margin-top: 55px;
    margin-bottom: 80px;
}

.actions-header h2,
.biodiversity-header h2,
.impact-header h2,
.my-impact-header h2,
.record-header h2 {
    max-width: 850px;

    margin: 0;

    font-size: clamp(3rem, 6vw, 6.5rem);
    line-height: 0.92;

    letter-spacing: -0.055em;
    font-weight: 600;
}

.actions-header h2 span,
.biodiversity-header h2 span,
.impact-header h2 span,
.my-impact-header h2 span,
.record-header h2 span {
    display: block;
    color: var(--accent);
}

.actions-intro,
.biodiversity-intro,
.impact-intro,
.my-impact-intro,
.record-intro {
    max-width: 480px;

    margin: 0 0 5px auto;

    color: var(--muted);

    font-size: 0.95rem;
    line-height: 1.8;
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.action-card {
    position: relative;

    min-height: 390px;
    padding: 34px;

    overflow: hidden;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--surface);

    transition: background 0.4s ease;
}

.action-card::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(220, 235, 221, 0.05),
            transparent 45%
        );

    opacity: 0;

    transition: opacity 0.4s ease;
}

.action-card:hover {
    background: var(--surface-light);
}

.action-card:hover::before {
    opacity: 1;
}

.action-number {
    position: absolute;

    top: 30px;
    right: 32px;

    color: rgba(241, 245, 241, 0.22);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.action-content {
    position: absolute;

    left: 34px;
    right: 34px;
    bottom: 34px;
}

.action-category {
    margin-bottom: 18px;

    color: var(--accent);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.action-content h3 {
    max-width: 500px;

    margin: 0;

    font-size: clamp(1.7rem, 3vw, 3rem);
    line-height: 1;

    letter-spacing: -0.035em;
    font-weight: 600;
}

.action-content > p:not(.action-category) {
    max-width: 440px;

    margin: 20px 0 28px;

    color: var(--muted);

    font-size: 0.88rem;
    line-height: 1.7;
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    color: var(--text);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    transition: gap 0.3s ease;
}

.action-link span {
    color: var(--accent);
    font-size: 1rem;
}

.action-link:hover {
    gap: 20px;
}

.actions-footer,
.biodiversity-footer,
.impact-footer {
    display: flex;
    justify-content: space-between;

    margin-top: 30px;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.actions-footer span,
.biodiversity-footer span:last-child,
.impact-footer span:last-child {
    color: var(--accent);
}


/* =========================================
   BIODIVERSITY
========================================= */

.biodiversity-section {
    padding: 150px 8vw 140px;

    border-bottom: 1px solid var(--border);

    background: var(--surface);
}

.biodiversity-feature {
    position: relative;

    width: 100%;
    height: min(70vh, 720px);

    overflow: hidden;

    border: 1px solid var(--border);
}

.biodiversity-feature img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    filter: brightness(0.65) saturate(0.8);

    transition:
        transform 1s ease,
        filter 0.6s ease;
}

.biodiversity-feature:hover img {
    transform: scale(1.035);
    filter: brightness(0.72) saturate(0.9);
}

.biodiversity-feature::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.82),
            rgba(0, 0, 0, 0.08) 60%,
            rgba(0, 0, 0, 0.25)
        );

    pointer-events: none;
}

.biodiversity-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 32px;
}

.biodiversity-location {
    align-self: flex-end;

    color: var(--text);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.biodiversity-feature-text p {
    margin-bottom: 18px;

    color: var(--accent-light);

    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.biodiversity-feature-text h3 {
    max-width: 850px;

    margin: 0;

    font-size: clamp(2.5rem, 5vw, 5.5rem);
    line-height: 0.92;

    letter-spacing: -0.05em;
    font-weight: 600;
}

.biodiversity-feature-text h3 span {
    display: block;
    color: var(--accent);
}

.biodiversity-topics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    margin-top: 1px;

    border-left: 1px solid var(--border);
}

.biodiversity-topic {
    min-height: 240px;

    padding: 30px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--bg);

    transition: background 0.35s ease;
}

.biodiversity-topic:hover {
    background: var(--surface-light);
}

.biodiversity-topic > span {
    display: block;

    margin-bottom: 70px;

    color: rgba(241, 245, 241, 0.3);

    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.biodiversity-topic h3 {
    margin-bottom: 14px;

    font-size: 1.4rem;
    letter-spacing: -0.025em;
}

.biodiversity-topic p {
    max-width: 360px;

    color: var(--muted);

    font-size: 0.82rem;
    line-height: 1.7;
}


/* =========================================
   GLOBAL IMPACT
========================================= */

.impact-section {
    padding: 150px 8vw 140px;

    border-bottom: 1px solid var(--border);

    background: var(--bg);
}

.impact-dashboard {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);
}

.impact-main {
    grid-column: span 2;

    min-height: 390px;
    padding: 34px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--surface);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.impact-main-top {
    display: flex;
    justify-content: space-between;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.impact-main-number {
    font-size: clamp(5rem, 12vw, 12rem);
    line-height: 0.8;

    letter-spacing: -0.07em;
    font-weight: 600;
}

.impact-main > p {
    color: var(--accent);

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.impact-stat {
    min-height: 250px;
    padding: 32px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--surface);

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: background 0.35s ease;
}

.impact-stat:hover {
    background: var(--surface-light);
}

.impact-stat-number {
    font-size: clamp(2.5rem, 4vw, 4.5rem);
    line-height: 1;

    letter-spacing: -0.05em;
    font-weight: 600;
}

.impact-stat-label {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.impact-message {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;

    margin-top: 100px;
    padding-top: 35px;

    border-top: 1px solid var(--border);
}

.impact-message-number {
    color: rgba(241, 245, 241, 0.3);

    font-size: 0.7rem;
    font-weight: 700;
}

.impact-message h3 {
    max-width: 1000px;

    font-size: clamp(2rem, 4vw, 4.5rem);
    line-height: 0.98;

    letter-spacing: -0.045em;
    font-weight: 600;
}

.impact-message h3 span {
    display: block;
    color: var(--accent);
}


/* =========================================
   MY IMPACT
========================================= */

.my-impact-section {
    padding: 150px 8vw 160px;

    border-bottom: 1px solid var(--border);

    background: var(--surface);
}

.impact-profile {
    padding: 35px;

    border: 1px solid var(--border);

    background: var(--bg);
}

.profile-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.profile-label {
    display: block;

    margin-bottom: 15px;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.profile-top h3 {
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -0.04em;
}

.profile-xp {
    text-align: right;
}

.profile-xp span {
    display: block;

    color: var(--accent);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.15em;
}

.profile-xp strong {
    display: block;

    margin-top: 8px;

    font-size: 3rem;
    letter-spacing: -0.05em;
}

.xp-progress {
    margin-top: 80px;
}

.xp-progress-bar {
    width: 100%;
    height: 5px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.08);
}

.xp-progress-bar span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--accent);

    transition: width 0.6s ease;
}

.xp-progress-info {
    display: flex;
    justify-content: space-between;

    margin-top: 12px;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.impact-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-left: 1px solid var(--border);
}

.impact-action-card {
    min-height: 220px;
    padding: 30px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--bg);
}

.impact-action-number {
    display: block;

    margin-bottom: 65px;

    color: rgba(241, 245, 241, 0.3);

    font-size: 0.7rem;
    font-weight: 700;
}

.impact-action-card p {
    margin-bottom: 10px;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.impact-action-card strong {
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -0.05em;
}

.record-action {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 40px;

    margin-top: 70px;
    padding: 45px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.record-action h3 {
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -0.045em;
}

.impact-journal {
    margin-top: 100px;
}

.journal-header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    padding-bottom: 30px;

    border-bottom: 1px solid var(--border);
}

.journal-header h3 {
    font-size: clamp(2rem, 4vw, 4rem);
    letter-spacing: -0.045em;
}

.journal-header > span {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.journal-list {
    border-bottom: 1px solid var(--border);
}

.journal-empty {
    min-height: 260px;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.journal-empty-number {
    color: rgba(241, 245, 241, 0.2);

    font-size: 4rem;
    letter-spacing: -0.05em;
}

.journal-empty p {
    margin: 25px 0 8px;

    color: var(--text);

    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.journal-empty > span:last-child {
    color: var(--muted);

    font-size: 0.75rem;
}

.journal-entry {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    gap: 30px;
    align-items: stretch;

    padding: 30px 0;

    border-bottom: 1px solid var(--border);
}

.journal-entry:last-child {
    border-bottom: 0;
}

.journal-entry-number {
    color: rgba(241, 245, 241, 0.3);

    font-size: 0.7rem;
    font-weight: 800;
}

.journal-entry-main {
    min-width: 0;
}

.journal-entry-top {
    display: flex;
    justify-content: space-between;
    gap: 25px;

    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.journal-entry-main h4 {
    margin: 18px 0;

    font-size: 1.7rem;
    letter-spacing: -0.03em;
}

.journal-entry-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;

    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.journal-entry-notes {
    max-width: 700px;

    margin-top: 18px;

    color: var(--muted);

    font-size: 0.78rem;
    line-height: 1.7;
}

.journal-entry-side {
    min-width: 100px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
}

.journal-entry-side strong {
    color: var(--accent);

    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.journal-delete {
    border: 0;
    background: transparent;

    color: var(--muted);

    cursor: pointer;

    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;

    transition: color 0.25s ease;
}

.journal-delete:hover {
    color: var(--danger);
}


/* =========================================
   RECORD ACTION
========================================= */

.record-section {
    padding: 150px 8vw 160px;

    border-bottom: 1px solid var(--border);

    background: var(--bg);
}

.record-form {
    border: 1px solid var(--border);

    background: var(--surface);
}

.form-heading {
    padding: 30px;

    border-bottom: 1px solid var(--border);
}

.form-heading > span {
    display: block;

    margin-bottom: 14px;

    color: var(--accent);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.form-heading h3 {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: -0.035em;
}

.action-selector {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-left: 1px solid var(--border);
}

.action-option {
    display: flex;
    align-items: center;
    gap: 25px;

    min-height: 130px;
    padding: 28px;

    border: 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    background: var(--bg);
    color: var(--text);

    text-align: left;
    cursor: pointer;

    transition:
        background 0.3s ease,
        padding 0.3s ease,
        border-color 0.3s ease;
}

.action-option:hover {
    padding-left: 34px;

    background: var(--surface-light);
}

.action-option.selected {
    background: var(--surface-light);

    box-shadow:
        inset 4px 0 0 var(--accent);
}

.option-number {
    color: rgba(241, 245, 241, 0.25);

    font-size: 0.7rem;
    font-weight: 800;
}

.action-option strong {
    display: block;

    margin-bottom: 7px;

    font-size: 1rem;
}

.action-option small {
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.form-details {
    border-top: 1px solid var(--border);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-left: 1px solid var(--border);
}

.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 12px;

    padding: 28px;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.form-grid label span {
    color: var(--muted);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.form-grid input,
.form-grid textarea {
    width: 100%;

    padding: 15px 0;

    border: 0;
    border-bottom: 1px solid var(--border);
    outline: none;

    background: transparent;
    color: var(--text);

    font-size: 0.9rem;

    transition: border-color 0.25s ease;
}

.form-grid textarea {
    resize: vertical;
}

.form-grid input::placeholder,
.form-grid textarea::placeholder {
    color: rgba(143, 154, 145, 0.45);
}

.form-grid input:focus,
.form-grid textarea:focus {
    border-color: var(--accent);
}

.form-full {
    grid-column: span 2;
}

.record-submit {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 30px;

    padding: 35px;
}

.record-submit > div span {
    color: var(--accent);

    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

.record-submit p {
    margin-top: 10px;

    color: var(--muted);

    font-size: 0.68rem;
    letter-spacing: 0.08em;
}


/* =========================================
   FOOTER
========================================= */

.site-footer {
    display: flex;
    justify-content: space-between;
    align-items: end;

    gap: 40px;

    padding: 65px 8vw;

    background: #050705;

    border-top: 1px solid var(--border);
}

.footer-brand {
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.09em;
}

.site-footer p {
    margin-top: 14px;

    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
}

.footer-credit {
    color: var(--muted);

    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.11em;

    text-align: right;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 900px) {

    .navbar {
        height: 72px;
        padding: 0 5vw;
    }

    .nav-links {
        display: none;
    }

    .hero,
    .actions-header,
    .biodiversity-header,
    .impact-header,
    .my-impact-header,
    .record-header {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .hero {
        min-height: auto;
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .planet-wrapper {
        width: min(80vw, 560px);
        justify-self: center;
    }

    .scroll-indicator {
        display: none;
    }

    .planet-intro-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .planet-image {
        grid-column: auto;
        height: 55vh;
    }

    .actions-grid {
        grid-template-columns: 1fr;
    }

    .biodiversity-topics {
        grid-template-columns: 1fr;
    }

    .impact-dashboard {
        grid-template-columns: 1fr;
    }

    .impact-main {
        grid-column: auto;
    }

    .impact-actions {
        grid-template-columns: 1fr;
    }

    .form-grid,
    .action-selector {
        grid-template-columns: 1fr;
    }

    .form-full {
        grid-column: auto;
    }

    .record-action,
    .record-submit {
        align-items: flex-start;
        flex-direction: column;
    }

    .journal-entry {
        grid-template-columns: 45px 1fr;
    }

    .journal-entry-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .site-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .footer-credit {
        text-align: left;
    }
}


@media (max-width: 600px) {

    .navbar {
        height: 64px;
    }

    .brand {
        font-size: 0.78rem;
    }

    .impact-button {
        padding: 10px 12px;
        font-size: 0.58rem;
    }

    .hero,
    .planet-intro,
    .actions-section,
    .biodiversity-section,
    .impact-section,
    .my-impact-section,
    .record-section {
        padding-left: 6vw;
        padding-right: 6vw;
    }

    .hero {
        padding-top: 125px;
    }

    .hero h1,
    .planet-intro-heading h2,
    .actions-header h2,
    .biodiversity-header h2,
    .impact-header h2,
    .my-impact-header h2,
    .record-header h2 {
        font-size: clamp(2.8rem, 15vw, 5rem);
    }

    .planet-wrapper {
        width: 90vw;
    }

    .planet-image,
    .biodiversity-feature {
        height: 50vh;
        min-height: 360px;
    }

    .biodiversity-overlay {
        padding: 22px;
    }

    .biodiversity-feature-text h3 {
        font-size: clamp(2.2rem, 11vw, 4rem);
    }

    .impact-main-number {
        font-size: clamp(4rem, 18vw, 8rem);
    }

    .impact-profile {
        padding: 25px;
    }

    .profile-top h3 {
        font-size: 2.3rem;
    }

    .profile-xp strong {
        font-size: 2.3rem;
    }

    .xp-progress {
        margin-top: 55px;
    }

    .xp-progress-info {
        gap: 20px;
        flex-direction: column;
    }

    .action-card {
        min-height: 350px;
    }

    .action-content {
        left: 25px;
        right: 25px;
        bottom: 25px;
    }

    .action-card {
        padding: 25px;
    }

    .record-submit {
        padding: 25px;
    }

    .journal-entry {
        gap: 18px;
    }

    .journal-entry-top {
        flex-direction: column;
        gap: 8px;
    }

    .journal-entry-main h4 {
        font-size: 1.35rem;
    }

    .site-footer {
        padding-left: 6vw;
        padding-right: 6vw;
    }
}


/* =========================================
   REDUCED MOTION
========================================= */

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

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* =========================================================
   ACTION DETAIL MODAL
   ========================================================= */

body.modal-open {
    overflow: hidden;
}

.action-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.action-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.action-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(12px);
}

.action-modal-panel {
    position: relative;
    width: min(820px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    padding: clamp(28px, 5vw, 52px);
    background:
        radial-gradient(circle at 100% 0%, rgba(159,190,166,.10), transparent 32%),
        var(--surface);
    border: 1px solid rgba(220, 235, 221, .12);
    box-shadow: 0 30px 100px rgba(0,0,0,.55);
    transform: translateY(22px) scale(.98);
    transition: transform .3s ease;
}

.action-modal.is-open .action-modal-panel {
    transform: translateY(0) scale(1);
}

.action-modal-close {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,.025);
    color: var(--text);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.action-modal-close:hover {
    background: rgba(255,255,255,.07);
    border-color: rgba(220,235,221,.22);
    transform: rotate(4deg);
}

.action-modal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-right: 54px;
    margin-bottom: 18px;
}

.action-modal-category,
.action-detail-label {
    margin: 0;
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
}

.action-modal-xp {
    padding: 8px 11px;
    border: 1px solid rgba(159,190,166,.2);
    color: var(--accent-light);
    background: rgba(159,190,166,.06);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
}

.action-modal-panel h2 {
    max-width: 680px;
    margin: 0 0 18px;
    font-size: clamp(34px, 6vw, 68px);
    line-height: .95;
    letter-spacing: -.045em;
}

.action-modal-intro {
    max-width: 650px;
    margin: 0 0 38px;
    color: var(--muted);
    font-size: clamp(15px, 2vw, 18px);
    line-height: 1.7;
}

.action-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
}

.action-detail-block {
    min-width: 0;
    padding: 26px;
    background: rgba(255,255,255,.018);
}

.action-detail-block > p {
    margin: 16px 0 0;
    color: var(--muted);
    line-height: 1.7;
}

.action-detail-block ol {
    display: grid;
    gap: 13px;
    margin: 16px 0 0;
    padding-left: 23px;
    color: var(--muted);
    line-height: 1.55;
}

.action-detail-block li::marker {
    color: var(--accent);
    font-weight: 700;
}

.action-modal-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 28px;
}

.action-modal-secondary {
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.action-modal-secondary:hover {
    color: var(--text);
    border-color: rgba(255,255,255,.16);
    background: rgba(255,255,255,.035);
}

@media (max-width: 700px) {
    .action-modal {
        padding: 12px;
    }

    .action-modal-panel {
        max-height: calc(100vh - 24px);
        padding: 28px 20px 22px;
    }

    .action-modal-grid {
        grid-template-columns: 1fr;
    }

    .action-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .action-modal-footer .button,
    .action-modal-secondary {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .action-modal,
    .action-modal-panel,
    .action-modal-close {
        transition: none;
    }
}


/* =========================================================
   EARTH//ACTION — LANGUAGE SELECTOR
   ========================================================= */
.ea-language{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:12px;
  z-index:1001;
}
.ea-language .language-label{
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.language-current{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  min-width:48px;
  height:36px;
  padding:0 10px;
  border-radius:8px;
  font:inherit;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.2s ease;
}
.language-current:hover,
.ea-language.open .language-current{
  border-color:rgba(159,190,166,.4);
  background:rgba(159,190,166,.08);
}
.language-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  width:150px;
  padding:7px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(13,18,14,.98);
  box-shadow:0 18px 50px rgba(0,0,0,.4);
  opacity:0;
  visibility:hidden;
  transform:translateY(-5px);
  transition:.18s ease;
}
.ea-language.open .language-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.language-menu button{
  display:block;
  width:100%;
  border:0;
  background:transparent;
  color:var(--muted);
  padding:9px 10px;
  border-radius:6px;
  text-align:left;
  font:inherit;
  font-size:11px;
  cursor:pointer;
  transition:.15s ease;
}
.language-menu button:hover{
  color:var(--text);
  background:rgba(159,190,166,.09);
}
html[dir="rtl"] .language-menu{
  right:auto;
  left:0;
}
html[dir="rtl"] .language-menu button{
  text-align:right;
}
@media (max-width:800px){
  .ea-language .language-label{display:none}
  .ea-language{margin-left:6px}
  .language-menu{right:0}
}

/* ============================================================
   EARTH//ACTION — STEP 22: MOTION & SCROLL EFFECTS
   ============================================================ */
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Scroll reveal */
.ea-reveal{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  will-change:opacity,transform;
}
.ea-reveal.ea-visible{opacity:1;transform:none}

/* Gentle stagger for groups */
.ea-stagger > *{transition-delay:var(--ea-delay,0ms)}

/* Hero entrance */
.hero .hero-content > *{
  opacity:0;
  transform:translateY(22px);
  animation:eaHeroIn .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero .hero-content > *:nth-child(1){animation-delay:.08s}
.hero .hero-content > *:nth-child(2){animation-delay:.16s}
.hero .hero-content > *:nth-child(3){animation-delay:.24s}
.hero .hero-content > *:nth-child(4){animation-delay:.32s}
.hero .hero-content > *:nth-child(5){animation-delay:.40s}
@keyframes eaHeroIn{to{opacity:1;transform:none}}

/* Planet breathing / floating effect */
.hero img,
.hero .planet,
.hero .hero-planet,
.hero .planet-wrap{
  animation:eaFloat 7s ease-in-out infinite;
}
@keyframes eaFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}

/* Cards */
.action-card,
.biodiversity-card,
.impact-card,
.stat-card{
  transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.action-card:hover,
.biodiversity-card:hover,
.impact-card:hover,
.stat-card:hover{
  transform:translateY(-6px);
}

/* Buttons */
button,
a.btn,
.action-explore,
.record-action-btn{
  transition:transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease;
}
button:hover,
a.btn:hover,
.action-explore:hover,
.record-action-btn:hover{transform:translateY(-2px)}
button:active,
a.btn:active,
.action-explore:active,
.record-action-btn:active{transform:translateY(0) scale(.98)}

/* Navbar responds to scrolling */
.navbar.ea-scrolled{
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 8px 30px rgba(0,0,0,.14);
}

/* Section headings */
.section-label,.section-title,.section-subtitle{will-change:transform,opacity}

/* Animated line used by the page when available */
.ea-line-grow{
  transform-origin:left center;
  transform:scaleX(0);
  transition:transform 1s cubic-bezier(.22,1,.36,1);
}
.ea-line-grow.ea-visible{transform:scaleX(1)}

/* Prevent motion from becoming uncomfortable on small screens */
@media (max-width:800px){
  .ea-reveal{transform:translateY(22px);transition-duration:.6s}
  .action-card:hover,.biodiversity-card:hover,.impact-card:hover,.stat-card:hover{transform:translateY(-3px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ea-reveal{opacity:1;transform:none}
  .ea-line-grow{transform:none}
}


/* ============================================================
   STEP 23 — MOBILE / RESPONSIVE FINAL
   ============================================================ */
.navbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.mobile-menu-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid var(--border);
  background:rgba(255,255,255,.025);
  color:var(--text);
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
  border-radius:8px;
}
.mobile-menu-toggle span{
  display:block;
  width:17px;
  height:1px;
  background:currentColor;
  transition:transform .22s ease, opacity .22s ease;
}
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}
.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .navbar{padding:0 4vw}
  .navbar-actions{margin-left:auto}
  .mobile-menu-toggle{display:flex}
  .nav-links{
    position:fixed;
    top:72px;
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 4vw 18px;
    border-bottom:1px solid var(--border);
    background:rgba(7,9,7,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transform:translateY(-115%);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .28s cubic-bezier(.22,1,.36,1),opacity .22s ease,visibility .22s ease;
  }
  .nav-links.mobile-open{
    transform:translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .nav-links a{
    width:100%;
    padding:17px 4px;
    font-size:.68rem;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a::after{display:none}
  body.menu-open{overflow:hidden}
  .ea-language{margin-left:0}
}

@media (max-width:600px){
  .navbar{height:64px;padding:0 4.5vw}
  .nav-links{top:64px;padding-left:6vw;padding-right:6vw}
  .brand{font-size:.74rem;white-space:nowrap}
  .impact-button{padding:9px 10px;font-size:.52rem;white-space:nowrap}
  .mobile-menu-toggle{width:38px;height:38px}
  .language-current{min-width:42px;height:34px;padding:0 8px;font-size:10px}

  .hero,
  .planet-intro,
  .actions-section,
  .biodiversity-section,
  .impact-section,
  .my-impact-section,
  .record-section{padding-left:6vw;padding-right:6vw}

  .hero{min-height:100svh;padding-top:105px;padding-bottom:70px;gap:42px}
  .hero h1,
  .planet-intro-heading h2,
  .actions-header h2,
  .biodiversity-header h2,
  .impact-header h2,
  .my-impact-header h2,
  .record-header h2{font-size:clamp(2.5rem,13.5vw,4.5rem);line-height:.92;overflow-wrap:anywhere}
  .hero-description,.actions-intro,.biodiversity-intro,.impact-intro,.record-intro{font-size:.9rem;line-height:1.7}
  .hero-buttons{flex-direction:column;align-items:stretch;gap:8px}
  .hero-buttons .button{width:100%;box-sizing:border-box}
  .planet-wrapper{width:min(88vw,430px);max-width:100%;}
  .planet{max-width:100%}

  .planet-image,.biodiversity-feature{height:58svh;min-height:300px;max-height:520px}
  .biodiversity-overlay{padding:18px}
  .biodiversity-location{font-size:.52rem}
  .biodiversity-feature-text h3{font-size:clamp(2rem,10vw,3.3rem)}

  .action-card{min-height:330px}
  .action-content{left:20px;right:20px;bottom:20px}
  .action-content h3{font-size:clamp(1.7rem,8vw,2.5rem)}
  .action-link{font-size:.58rem}

  .impact-main-number{font-size:clamp(3.3rem,17vw,6rem);overflow-wrap:anywhere}
  .impact-profile{padding:20px}
  .profile-top{gap:16px;align-items:flex-start}
  .profile-top h3{font-size:2rem}
  .profile-xp strong{font-size:2rem}

  .record-form{padding:20px}
  .form-grid{gap:16px}
  .form-field input,.form-field textarea,.form-field select{font-size:16px}
  .action-option{min-height:72px;padding:14px}
  .action-option strong{font-size:.72rem}
  .action-option small{font-size:.55rem}
  .record-submit{padding:20px}

  .journal-entry{grid-template-columns:36px 1fr;gap:14px}
  .journal-entry-side{grid-column:2}
  .journal-entry-main h4{font-size:1.15rem}
  .site-footer{padding-left:6vw;padding-right:6vw}
}

@media (max-width:380px){
  .impact-button{display:none}
  .brand{font-size:.68rem}
  .navbar{padding:0 5vw}
  .hero h1{font-size:clamp(2.25rem,13vw,3.5rem)}
  .planet-wrapper{width:92vw}
}

@media (prefers-reduced-motion:reduce){
  .nav-links,.mobile-menu-toggle span{transition:none}
}
\n\n/* ============================================================\n   STEP 24 — SOURCES & VERIFIED FACTS\n   ============================================================ */\n.sources-section{\n  position:relative;\n  padding:clamp(80px,10vw,150px) clamp(20px,6vw,96px);\n  border-top:1px solid rgba(255,255,255,.08);\n  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent 35%);\n}\n.sources-header{\n  display:grid;\n  grid-template-columns:minmax(0,1fr) minmax(280px,520px);\n  gap:60px;\n  align-items:end;\n  margin:28px 0 56px;\n}\n.sources-header h2{margin:0; font-size:clamp(42px,6vw,88px); line-height:.9; letter-spacing:-.05em;}\n.sources-header h2 span{opacity:.45;}\n.sources-intro{margin:0; max-width:520px; line-height:1.75; opacity:.68;}\n.verified-facts-grid{\n  display:grid;\n  grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:16px;\n}\n.verified-fact{\n  min-height:280px; padding:26px; border:1px solid rgba(255,255,255,.09);\n  background:rgba(255,255,255,.025); border-radius:18px;\n  display:flex; flex-direction:column; transition:transform .3s ease,border-color .3s ease,background .3s ease;\n}\n.verified-fact:hover{transform:translateY(-6px); border-color:rgba(255,255,255,.2); background:rgba(255,255,255,.045);}\n.verified-fact-tag{font-size:11px; letter-spacing:.16em; opacity:.5; margin-bottom:30px;}\n.verified-fact strong{font-size:clamp(20px,2vw,28px); letter-spacing:-.03em;}\n.verified-fact p{line-height:1.65; opacity:.65; margin:14px 0 22px;}\n.verified-fact a{margin-top:auto; color:inherit; text-decoration:none; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.8;}\n.verified-fact a:hover{opacity:1;}\n.sources-note{margin-top:22px; padding:20px 22px; border-left:2px solid currentColor; background:rgba(255,255,255,.02); display:grid; grid-template-columns:160px 1fr; gap:20px; align-items:start;}\n.sources-note span{font-size:11px; letter-spacing:.14em; opacity:.55;}\n.sources-note p{margin:0; line-height:1.6; opacity:.6;}\n@media(max-width:900px){\n .sources-header{grid-template-columns:1fr;gap:25px;}\n .verified-facts-grid{grid-template-columns:repeat(2,minmax(0,1fr));}\n}\n@media(max-width:560px){\n .sources-section{padding:70px 18px;}\n .verified-facts-grid{grid-template-columns:1fr;}\n .verified-fact{min-height:230px;padding:22px;}\n .sources-note{grid-template-columns:1fr;gap:8px;}\n}\n
/* =========================================================
   EARTH//ACTION — EDITORIAL POLISH / REFLECTION EXPERIENCE
   Removes the synthetic orb and favors real photography,
   restrained motion and editorial spacing.
   ========================================================= */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5,9,7,.96) 0%, rgba(5,9,7,.86) 42%, rgba(5,9,7,.38) 72%, rgba(5,9,7,.62) 100%),
    url('../assets/images/nature/forest.jpg') center/cover no-repeat;
}
.hero::after {
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:38%;
  background:linear-gradient(transparent, rgba(5,9,7,.92));
  pointer-events:none;
  z-index:-1;
}
.planet-wrapper,
.planet,
.planet-glow,
.planet-orbit,
.hero-planet,
.planet-wrap { display:none !important; }
.hero-content { position:relative; z-index:2; max-width:760px; }
.hero h1 { max-width:780px; letter-spacing:-.055em; }
.hero-description { max-width:600px; }
.hero .button { backdrop-filter:blur(8px); }

/* More human / editorial than floating neon cards */
.action-card,
.reflection-card,
.story-card,
.verified-fact,
.impact-action-card {
  box-shadow:none !important;
  transform:none;
}
.action-card:hover { transform:translateY(-5px) !important; }

.reflection-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  margin-top:48px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.10);
}
.reflection-card {
  padding:32px;
  min-height:280px;
  background:rgba(8,14,11,.88);
  border:0;
}
.reflection-card > span { display:block; font-size:.72rem; opacity:.48; margin-bottom:42px; }
.reflection-card h3 { margin:.55rem 0 1rem; font-size:1.35rem; line-height:1.05; }
.reflection-card p:last-child { opacity:.68; line-height:1.7; max-width:42ch; }
.reflection-question { margin-top:24px; max-width:680px; font-size:1.05rem; opacity:.7; line-height:1.65; }

.stories-section { padding:clamp(90px,11vw,160px) 5vw; }
.stories-header { display:grid; grid-template-columns:1fr minmax(280px,520px); gap:60px; align-items:end; }
.stories-header h2 { margin:0; font-size:clamp(2.7rem,6vw,6rem); line-height:.9; letter-spacing:-.055em; }
.stories-header h2 span { display:block; opacity:.42; }
.stories-intro { opacity:.68; line-height:1.7; max-width:55ch; }
.stories-grid { display:grid; grid-template-columns:1.15fr .925fr .925fr; gap:18px; margin-top:54px; }
.story-card { background:#0a100d; border:1px solid rgba(255,255,255,.09); overflow:hidden; }
.story-media { aspect-ratio:16/10; overflow:hidden; background:#101814; }
.story-media img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.82) contrast(1.02); transition:transform .6s ease, filter .6s ease; }
.story-card:hover .story-media img { transform:scale(1.035); filter:saturate(.98) contrast(1.04); }
.story-copy { padding:24px; }
.story-copy > span { font-size:.68rem; letter-spacing:.15em; opacity:.48; }
.story-copy h3 { font-size:1.35rem; line-height:1.08; margin:.7rem 0 .85rem; }
.story-copy p { line-height:1.65; opacity:.66; }
.story-copy a { display:inline-block; margin-top:12px; color:inherit; font-size:.72rem; letter-spacing:.1em; text-decoration:none; opacity:.8; }
.story-copy a:hover { opacity:1; }
.story-wide { grid-row:span 2; }
.story-wide .story-media { aspect-ratio:auto; height:100%; min-height:620px; }
.story-wide { position:relative; }
.story-wide .story-copy { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(5,9,7,.96) 22%); padding-top:100px; }
.video-feature { display:grid; grid-template-columns:.8fr 1.2fr; gap:30px; align-items:center; margin-top:22px; padding:28px; border:1px solid rgba(255,255,255,.09); background:#090f0c; }
.video-copy h3 { font-size:clamp(1.8rem,3vw,3rem); line-height:1; margin:.6rem 0 1rem; letter-spacing:-.035em; }
.video-copy p { opacity:.66; line-height:1.65; max-width:48ch; }
.video-feature video { width:100%; display:block; aspect-ratio:16/9; object-fit:cover; background:#050806; }

/* Make source links feel like references, not generic cards */
.sources-section { background:#070b09; }
.verified-fact a { text-underline-offset:4px; }

@media (max-width: 900px) {
  .reflection-grid, .stories-grid, .stories-header, .video-feature { grid-template-columns:1fr; }
  .story-wide { grid-row:auto; }
  .story-wide .story-media { min-height:0; height:auto; aspect-ratio:16/10; }
  .story-wide .story-copy { position:static; background:#0a100d; padding-top:24px; }
}
@media (max-width: 600px) {
  .reflection-card { min-height:auto; padding:24px; }
  .reflection-card > span { margin-bottom:26px; }
  .stories-section { padding-left:20px; padding-right:20px; }
  .story-copy { padding:20px; }
  .video-feature { padding:18px; }
}

/* ============================================================
   EARTH//ACTION — VISUAL REFRESH
   Real-photo hero + colorful editorial accents
   ============================================================ */
:root {
    --ea-green: #9de6b3;
    --ea-lime: #d8f56f;
    --ea-blue: #78c8ff;
    --ea-coral: #ff9a7a;
    --ea-yellow: #ffd66b;
}

.hero {
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, .78fr);
    background:
        radial-gradient(circle at 78% 35%, rgba(120,200,255,.12), transparent 22%),
        radial-gradient(circle at 92% 70%, rgba(216,245,111,.09), transparent 24%),
        var(--bg);
}

.hero h1 span { color: var(--ea-green); }

.hero-visual {
    position: relative;
    width: min(43vw, 590px);
    aspect-ratio: 1 / 1.08;
    justify-self: end;
    display: grid;
    place-items: center;
}

.hero-photo-frame {
    position: relative;
    width: min(100%, 500px);
    aspect-ratio: 1 / 1.08;
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,.16);
    background: #101612;
    box-shadow: 0 30px 90px rgba(0,0,0,.42);
    transform: rotate(1.5deg);
    z-index: 2;
}

.hero-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(1.08) contrast(1.03);
    transition: transform .8s cubic-bezier(.2,.7,.2,1), filter .5s ease;
}

.hero-photo-frame:hover img { transform: scale(1.045); filter: saturate(1.18) contrast(1.05); }

.hero-photo-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.02) 35%, rgba(0,0,0,.68) 100%);
    pointer-events: none;
}

.hero-photo-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
    font-size: .63rem;
    font-weight: 800;
    letter-spacing: .16em;
}

.hero-color-orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(1px);
    z-index: 1;
}

.hero-color-orb-one {
    width: 88px;
    height: 88px;
    right: -8px;
    top: 12%;
    background: var(--ea-coral);
    opacity: .75;
    animation: eaFloatOne 6s ease-in-out infinite;
}

.hero-color-orb-two {
    width: 58px;
    height: 58px;
    left: 3%;
    bottom: 10%;
    background: var(--ea-blue);
    opacity: .75;
    animation: eaFloatTwo 7s ease-in-out infinite;
}

@keyframes eaFloatOne { 50% { transform: translateY(-14px) translateX(6px); } }
@keyframes eaFloatTwo { 50% { transform: translateY(12px) translateX(-5px); } }

/* Color accents for the editorial sections */
.planet-intro .section-label span { color: var(--ea-blue); }
.actions-section .section-label span { color: var(--ea-lime); }
.biodiversity-section .section-label span { color: var(--ea-coral); }
.stories-section .section-label span { color: var(--ea-yellow); }

.stories-section {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(120deg, rgba(120,200,255,.055), transparent 35%),
        linear-gradient(300deg, rgba(216,245,111,.045), transparent 38%),
        var(--surface);
}

.story-card {
    border-color: rgba(255,255,255,.12);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.story-card:hover {
    transform: translateY(-7px);
    border-color: rgba(255,255,255,.22);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.media-links {
    display: grid;
    gap: 0;
    margin-top: 42px;
    border-top: 1px solid var(--border);
}

.media-link {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 21px 0;
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: padding .25s ease, background .25s ease, color .25s ease;
}
.media-link:hover { padding-left: 12px; color: var(--ea-green); }
.media-link-number { opacity: .45; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.media-link strong { display: block; font-size: 1rem; }
.media-link small { display: block; margin-top: 5px; opacity: .55; font-size: .75rem; }
.media-link-arrow { font-size: 1.3rem; }

/* Make action area more alive without looking artificial */
.action-card:nth-child(1) { --ea-card-accent: var(--ea-green); }
.action-card:nth-child(2) { --ea-card-accent: var(--ea-blue); }
.action-card:nth-child(3) { --ea-card-accent: var(--ea-yellow); }
.action-card:nth-child(4) { --ea-card-accent: var(--ea-coral); }
.action-card:nth-child(5) { --ea-card-accent: #b9a7ff; }
.action-card:nth-child(6) { --ea-card-accent: #8de0d0; }
.action-card:hover { border-color: color-mix(in srgb, var(--ea-card-accent) 55%, white 10%); }

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; min-height: auto; padding-top: 125px; }
    .hero-visual { width: min(86vw, 520px); justify-self: center; margin-top: 22px; }
    .scroll-indicator { position: static; margin-top: 28px; }
}

@media (max-width: 560px) {
    .hero-photo-frame { border-radius: 20px; }
    .hero-photo-caption { left: 14px; right: 14px; bottom: 14px; font-size: .54rem; }
    .hero-color-orb-one { width: 56px; height: 56px; right: -2px; }
    .hero-color-orb-two { width: 42px; height: 42px; }
    .media-link { grid-template-columns: 32px 1fr auto; gap: 11px; padding: 17px 0; }
    .media-link strong { font-size: .9rem; }
}


/* ============================================================
   EARTH//ACTION — CLEAN EARTH PHOTO GALLERY
   ============================================================ */

.hero {
    background:
        radial-gradient(circle at 76% 34%, rgba(120, 200, 255, .07), transparent 25%),
        radial-gradient(circle at 92% 72%, rgba(216, 245, 111, .05), transparent 26%),
        var(--bg);
}

.hero-visual {
    width: min(42vw, 560px);
    aspect-ratio: 1 / 1.05;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.earth-gallery {
    width: min(100%, 520px);
    position: relative;
}

.earth-gallery-media {
    position: relative;
    aspect-ratio: 4 / 4.35;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    background: #0b100d;
    box-shadow: 0 28px 70px rgba(0,0,0,.30);
}

.earth-gallery-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    opacity: 1;
    transform: scale(1);
    transition: opacity .38s ease, transform 1.2s cubic-bezier(.2,.65,.2,1);
}

.earth-gallery-image.is-changing {
    opacity: .12;
    transform: scale(1.025);
}

.earth-gallery-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(0,0,0,.02) 48%, rgba(0,0,0,.68) 100%);
}

.earth-gallery-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(7,16,13,.45);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: background .2s ease, transform .2s ease, border-color .2s ease;
    z-index: 3;
}

.earth-gallery-control:hover {
    background: rgba(7,16,13,.78);
    border-color: rgba(255,255,255,.5);
}

.earth-gallery-control:active {
    transform: translateY(-50%) scale(.94);
}

.earth-gallery-prev { left: 16px; }
.earth-gallery-next { right: 16px; }

.earth-gallery-caption {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    color: #fff;
}

.earth-gallery-kicker {
    display: block;
    margin-bottom: 8px;
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .18em;
    opacity: .72;
}

.earth-gallery-title {
    display: block;
    max-width: 270px;
    font-size: clamp(1rem, 1.8vw, 1.45rem);
    line-height: 1.05;
    letter-spacing: -.025em;
}

.earth-gallery-count {
    flex: 0 0 auto;
    font-size: .65rem;
    letter-spacing: .13em;
    opacity: .7;
}

.earth-gallery-count b {
    color: var(--ea-green);
}

.earth-gallery-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 13px 2px 0;
}

.earth-gallery-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}

.earth-gallery-dots button {
    width: 28px;
    height: 3px;
    padding: 0;
    border: 0;
    background: rgba(255,255,255,.18);
    cursor: pointer;
    transition: width .25s ease, background .25s ease;
}

.earth-gallery-dots button.is-active {
    width: 46px;
    background: var(--ea-green);
}

.earth-gallery-hint {
    font-size: .56rem;
    letter-spacing: .15em;
    opacity: .38;
}

@media (max-width: 900px) {
    .hero-visual {
        width: min(86vw, 520px);
        justify-self: center;
        margin-top: 18px;
    }
}

@media (max-width: 560px) {
    .earth-gallery-media { border-radius: 14px; }
    .earth-gallery-control { width: 38px; height: 38px; }
    .earth-gallery-prev { left: 11px; }
    .earth-gallery-next { right: 11px; }
    .earth-gallery-caption { left: 15px; right: 15px; bottom: 15px; }
    .earth-gallery-bottom { padding-top: 10px; }
    .earth-gallery-hint { display: none; }
}


/* EARTH//ACTION MUSIC CONTROL */
.music-toggle {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 15px;
    border: 1px solid rgba(157,230,179,.28);
    border-radius: 999px;
    background: rgba(7,16,13,.88);
    color: #e9fff0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.music-toggle:hover {
    transform: translateY(-2px);
    border-color: rgba(157,230,179,.65);
}
.music-toggle.is-playing {
    border-color: rgba(157,230,179,.65);
}
.music-icon {
    font-size: 18px;
    line-height: 1;
}
@media (max-width: 600px) {
    .music-toggle {
        right: 14px;
        bottom: 14px;
        padding: 10px 13px;
    }
}