/* ============================================
   footprint.broker -- styles.css
   Palette:
     Forest Deep: #1b3a2d
     Canopy Green: #2d6a4f
     Bark Brown: #5c4033
     Lichen Light: #d4edda
     Soil Dark: #1a1a0e
     Verified Gold: #c9a227
     Fresh Air: #f0f7f0
   Fonts: Merriweather, Public Sans, Bitter
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: #1a1a0e;
    background: #f0f7f0;
}

/* --- Typography --- */
h1, h2, h3 {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 700;
}

h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.15;
}

h2 {
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    line-height: 1.2;
}

h3 {
    font-size: 1.15rem;
    line-height: 1.3;
}

/* --- Navigation --- */
.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
}

.nav-logo {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #f0f7f0;
    letter-spacing: -0.02em;
}

.nav-logo-dot {
    color: #c9a227;
}

.nav-links {
    display: flex;
    gap: 1.8rem;
}

.nav-links a {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #d4edda;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #c9a227;
}

/* --- Hero Section --- */
.hero {
    min-height: 100vh;
    background: #1b3a2d;
}

.hero-split {
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: 100vh;
}

.hero-left {
    position: relative;
    background: linear-gradient(160deg, #1b3a2d 0%, #2d6a4f 100%);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hero-left-content {
    position: relative;
    z-index: 2;
    padding: 0 3rem 3rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Tree Ring Background */
.tree-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background:
        radial-gradient(circle,
            transparent 20px, rgba(45,106,79,0.03) 21px, transparent 22px,
            transparent 40px, rgba(45,106,79,0.03) 41px, transparent 42px,
            transparent 65px, rgba(45,106,79,0.04) 66px, transparent 67px,
            transparent 95px, rgba(45,106,79,0.03) 96px, transparent 97px,
            transparent 130px, rgba(45,106,79,0.04) 131px, transparent 132px,
            transparent 170px, rgba(45,106,79,0.03) 171px, transparent 172px,
            transparent 215px, rgba(45,106,79,0.04) 216px, transparent 217px,
            transparent 265px, rgba(45,106,79,0.03) 266px, transparent 267px,
            transparent 320px, rgba(45,106,79,0.04) 321px, transparent 322px,
            transparent 380px, rgba(45,106,79,0.03) 381px, transparent 382px
        );
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}

.hero-tagline {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 2rem;
}

.hero-tagline h1 {
    color: #f0f7f0;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #d4edda;
    max-width: 440px;
}

/* Carbon Flow Arrows */
.carbon-flow {
    display: flex;
    gap: 1rem;
    padding: 2rem 0;
    justify-content: flex-end;
}

.carbon-arrow {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 14px solid rgba(201,162,39,0.5);
    animation: flowRight 2s ease-in-out infinite;
}

.carbon-arrow-2 {
    animation-delay: 0.4s;
}

.carbon-arrow-3 {
    animation-delay: 0.8s;
}

@keyframes flowRight {
    0% {
        transform: translateX(-20px);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(30px);
        opacity: 0;
    }
}

/* --- Hero Right: Exchange Board --- */
.hero-right {
    background: #f0f7f0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
}

.exchange-board {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border: 1px solid #d4edda;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(27,58,45,0.08);
}

.exchange-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: #1b3a2d;
}

.exchange-title {
    font-family: 'Public Sans', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    color: #f0f7f0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.exchange-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #c9a227;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.exchange-table {
    padding: 0;
}

.exchange-row {
    display: grid;
    grid-template-columns: 1.6fr 0.8fr 1fr;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #d4edda;
    transition: background-color 0.2s ease;
    align-items: center;
}

.exchange-row:last-child {
    border-bottom: none;
}

.exchange-row:not(.exchange-row-header):hover {
    background: #d4edda;
}

.exchange-row-header {
    background: #f0f7f0;
}

.exchange-row-header span {
    font-family: 'Public Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5c4033;
}

.exchange-col-category {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    color: #1a1a0e;
}

.exchange-col-price {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 0.95rem;
    color: #2d6a4f;
}

.exchange-col-avail {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.82rem;
    color: #5c4033;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.avail-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.avail-high {
    background: #2d6a4f;
}

.avail-medium {
    background: #c9a227;
}

.avail-low {
    background: #5c4033;
}

.exchange-footer {
    padding: 0.7rem 1.25rem;
    background: #f0f7f0;
    border-top: 1px solid #d4edda;
}

.exchange-updated {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.75rem;
    color: #5c4033;
}

/* --- Leaf Vein Divider --- */
.leaf-divider {
    position: relative;
    height: 60px;
    overflow: hidden;
    background: transparent;
}

.leaf-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(45,106,79,0.2);
}

.leaf-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        /* Left branches */
        linear-gradient(150deg, transparent 46%, rgba(45,106,79,0.15) 46.5%, transparent 47%) 10% 50% / 80px 60px no-repeat,
        linear-gradient(150deg, transparent 46%, rgba(45,106,79,0.12) 46.5%, transparent 47%) 25% 50% / 70px 60px no-repeat,
        linear-gradient(150deg, transparent 46%, rgba(45,106,79,0.15) 46.5%, transparent 47%) 40% 50% / 75px 60px no-repeat,
        /* Right branches */
        linear-gradient(210deg, transparent 46%, rgba(45,106,79,0.15) 46.5%, transparent 47%) 60% 50% / 80px 60px no-repeat,
        linear-gradient(210deg, transparent 46%, rgba(45,106,79,0.12) 46.5%, transparent 47%) 75% 50% / 70px 60px no-repeat,
        linear-gradient(210deg, transparent 46%, rgba(45,106,79,0.15) 46.5%, transparent 47%) 90% 50% / 75px 60px no-repeat;
}

/* --- Projects Section --- */
.projects-section {
    padding: 5rem 3rem;
    background: #f0f7f0;
}

.section-intro {
    text-align: center;
    margin-bottom: 3.5rem;
}

.section-intro h2 {
    color: #1b3a2d;
    margin-bottom: 0.75rem;
}

.section-intro p {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: #5c4033;
    max-width: 560px;
    margin: 0 auto;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* Masonry-like stagger */
.projects-grid .project-card:nth-child(2) {
    margin-top: 2rem;
}

.projects-grid .project-card:nth-child(5) {
    margin-top: 2rem;
}

.project-card {
    position: relative;
    background: #ffffff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(27,58,45,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(27,58,45,0.12);
}

.project-type-bar {
    padding: 0.6rem 1rem;
    font-family: 'Public Sans', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #f0f7f0;
}

.type-reforestation {
    background: #2d6a4f;
}

.type-ocean {
    background: #1b3a2d;
}

.type-renewable {
    background: #5c4033;
}

.verification-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, #c9a227 0%, #b8911e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-check {
    display: block;
    width: 8px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: rotate(-45deg);
    margin-top: -2px;
}

.project-body {
    padding: 1.25rem 1rem 1rem;
}

.project-body h3 {
    color: #1b3a2d;
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.project-body p {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5c4033;
    margin-bottom: 1rem;
}

.project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid #d4edda;
}

.project-metric {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: #2d6a4f;
}

.project-location {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    color: #5c4033;
}

/* --- Impact Section --- */
.impact-section {
    position: relative;
    padding: 6rem 3rem;
    background: #5c4033;
    overflow: hidden;
}

/* Topographic Contour Lines Background */
.topographic-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        repeating-radial-gradient(circle at 20% 40%, transparent 0px, transparent 80px, rgba(45,106,79,0.03) 81px, transparent 82px),
        repeating-radial-gradient(circle at 70% 60%, transparent 0px, transparent 60px, rgba(45,106,79,0.03) 61px, transparent 62px),
        repeating-radial-gradient(circle at 50% 20%, transparent 0px, transparent 100px, rgba(45,106,79,0.03) 101px, transparent 102px),
        repeating-radial-gradient(circle at 30% 80%, transparent 0px, transparent 70px, rgba(45,106,79,0.03) 71px, transparent 72px);
    pointer-events: none;
    z-index: 1;
}

.impact-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.impact-content h2 {
    color: #f0f7f0;
    margin-bottom: 3rem;
}

.impact-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.impact-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.impact-number {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: clamp(2rem, 5vw, 4rem);
    color: #c9a227;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.impact-label {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #d4edda;
}

/* --- How It Works Section --- */
.how-section {
    padding: 5rem 3rem;
    background: #d4edda;
}

.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1000px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    max-width: 220px;
}

.step-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid #2d6a4f;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    background: transparent;
    position: relative;
}

.step-ring::before {
    content: '';
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(45,106,79,0.3);
}

.step-number {
    font-family: 'Bitter', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #2d6a4f;
}

.process-step h3 {
    color: #1b3a2d;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.process-step p {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #5c4033;
}

.process-connector {
    width: 40px;
    height: 2px;
    background: rgba(45,106,79,0.3);
    margin-top: 36px;
    flex-shrink: 0;
}

/* --- Footer --- */
.footer {
    background: #1b3a2d;
    padding: 3rem;
}

.footer-content {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.footer-logo {
    font-family: 'Merriweather', Georgia, serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #f0f7f0;
}

.footer-logo-dot {
    color: #c9a227;
}

.footer-tagline {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: #d4edda;
    margin-top: 0.3rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-links a {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: #d4edda;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #c9a227;
}

.footer-legal p {
    font-family: 'Public Sans', sans-serif;
    font-weight: 400;
    font-size: 0.78rem;
    color: rgba(212,237,218,0.6);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .hero-split {
        grid-template-columns: 1fr;
    }

    .hero-left-content {
        padding: 0 1.5rem 2rem;
    }

    .hero-right {
        padding: 2rem 1.5rem;
    }

    /* Carbon flow arrows reorient vertical on mobile */
    .carbon-flow {
        flex-direction: column;
        align-items: center;
    }

    .carbon-arrow {
        border-top: none;
        border-bottom: none;
        border-left: none;
        border-right: none;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 14px solid rgba(201,162,39,0.5);
        width: 0;
        height: 0;
        animation: flowDown 2s ease-in-out infinite;
    }

    @keyframes flowDown {
        0% {
            transform: translateY(-15px);
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            transform: translateY(20px);
            opacity: 0;
        }
    }

    .projects-section {
        padding: 3rem 1.5rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .projects-grid .project-card:nth-child(2),
    .projects-grid .project-card:nth-child(5) {
        margin-top: 0;
    }

    .impact-section {
        padding: 4rem 1.5rem;
    }

    .impact-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1rem;
    }

    .how-section {
        padding: 3rem 1.5rem;
    }

    .process-steps {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .process-step {
        max-width: 300px;
    }

    .process-connector {
        width: 2px;
        height: 30px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .nav {
        flex-direction: column;
        gap: 0.75rem;
    }

    .nav-links {
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .impact-stats {
        grid-template-columns: 1fr;
    }

    .exchange-row {
        grid-template-columns: 1.4fr 0.8fr 0.8fr;
        padding: 0.6rem 0.8rem;
        font-size: 0.85rem;
    }
}