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

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


/* =========================
   VARIABLES
========================= */

:root {

    --background: #f4f1e8;

    --dark: #14251b;

    --green: #2f6042;

    --green-light: #dce8d9;

    --cream: #fffdf5;

    --text-muted: #68736b;

    --border: #d5d9cf;

    --white: #ffffff;

}


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

html {
    scroll-behavior: smooth;
}


body {

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

    background: var(--background);

    color: var(--dark);

    min-height: 100vh;

}


button {

    font-family: inherit;

    cursor: pointer;

}


/* =========================
   NAVBAR
========================= */

.navbar {

    height: 76px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 7%;

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

}


.logo {

    font-size: 23px;

    font-weight: 900;

    letter-spacing: -1px;

}


.logo span {

    color: var(--green);

}


.nav-status {

    font-size: 12px;

    color: var(--text-muted);

    letter-spacing: 1px;

}


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

.hero {

    min-height: 82vh;

    padding:
        80px 7%;

    display: grid;

    grid-template-columns:
        1.2fr .8fr;

    gap: 60px;

    align-items: center;

}


.hero-content {

    max-width: 850px;

}


.eyebrow {

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2px;

    color: var(--green);

    margin-bottom: 20px;

}


.hero h1 {

    font-size:
        clamp(55px, 8vw, 105px);

    line-height: .88;

    letter-spacing: -6px;

}


.hero h1 span {

    color: var(--green);

}


.hero-content > p {

    max-width: 570px;

    margin-top: 30px;

    font-size: 19px;

    line-height: 1.6;

    color: var(--text-muted);

}


/* =========================
   BUTTONS
========================= */

.primary-btn {

    margin-top: 35px;

    padding:
        17px 28px;

    background: var(--dark);

    color: white;

    border: none;

    border-radius: 50px;

    font-size: 15px;

    font-weight: 800;

    transition:
        transform .2s,
        box-shadow .2s;

}


.primary-btn:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 10px 25px
        rgba(20,37,27,.2);

}


.secondary-btn {

    border: none;

    background: var(--dark);

    color: white;

    padding:
        13px 20px;

    border-radius: 30px;

    font-weight: 700;

}


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

.hero-card {

    background:
        var(--green);

    color: white;

    border-radius: 30px;

    padding: 35px;

    min-height: 430px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    box-shadow:
        0 25px 60px
        rgba(20,37,27,.15);

}


.card-label {

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

    opacity: .7;

}


.mission-icon {

    font-size: 80px;

    margin-top: 25px;

}


.hero-card h2 {

    font-size: 43px;

    line-height: 1;

    letter-spacing: -2px;

}


.hero-card p {

    margin-top: 15px;

    opacity: .7;

}


/* =========================
   DASHBOARD
========================= */

.dashboard {

    display: none;

    padding:
        50px 7% 90px;

}


.dashboard.active {

    display: block;

}


.dashboard-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 35px;

}


.dashboard-header h2 {

    font-size: 42px;

    letter-spacing: -2px;

}


/* =========================
   GRID
========================= */

.dashboard-grid {

    display: grid;

    grid-template-columns:
        1fr 1fr 1fr;

    gap: 20px;

}


/* =========================
   PANELS
========================= */

.panel {

    background:
        var(--cream);

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

    border-radius: 25px;

    padding: 28px;

}


.panel h3 {

    margin-bottom: 20px;

    font-size: 20px;

}


.mission-panel {

    grid-column:
        span 2;

}


/* =========================
   MISSION
========================= */

.mission {

    background:
        var(--green-light);

    border-radius: 20px;

    padding: 25px;

}


.mission-number {

    color: var(--green);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.mission h3 {

    font-size: 29px;

    margin:
        10px 0;

}


.mission p {

    color:
        var(--text-muted);

    line-height: 1.5;

}


/* =========================
   COMPLETE BUTTON
========================= */

.complete-btn {

    margin-top: 20px;

    border: none;

    padding:
        13px 20px;

    border-radius: 30px;

    background:
        var(--dark);

    color:
        white;

    font-weight: 800;

}


.complete-btn:hover {

    transform:
        translateY(-2px);

}


/* =========================
   TIMER
========================= */

.timer {

    font-size: 55px;

    font-weight: 900;

    letter-spacing: -3px;

}


.timer-controls {

    display: flex;

    gap: 10px;

    margin-top: 20px;

}


.timer-controls button {

    border: none;

    padding:
        11px 17px;

    border-radius: 30px;

    background:
        var(--dark);

    color: white;

    font-weight: 700;

}


/* =========================
   STATS
========================= */

.stats {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

}


.stat {

    padding: 20px;

    background:
        var(--background);

    border-radius: 18px;

}


.stat-value {

    display: block;

    font-size: 32px;

    font-weight: 900;

}


.stat-label {

    color:
        var(--text-muted);

    font-size: 13px;

}


/* =========================
   CAMERA
========================= */

.camera-box {

    border:
        2px dashed var(--border);

    border-radius: 20px;

    min-height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 20px;

}


.camera-icon {

    font-size: 45px;

    margin-bottom: 10px;

}


.upload-btn {

    display: inline-block;

    margin-top: 15px;

    padding:
        11px 18px;

    background:
        var(--dark);

    color: white;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 700;

    cursor: pointer;

}


.upload-btn input {

    display: none;

}


#preview {

    width: 100%;

    max-height: 220px;

    object-fit: cover;

    border-radius: 15px;

    margin-top: 15px;

    display: none;

}


/* =========================
   AI RESULT
========================= */

.ai-result {

    margin-top: 15px;

    padding: 16px;

    border-radius: 15px;

    background:
        var(--green-light);

    display: none;

}


.ai-result p {

    margin-top: 7px;

    line-height: 1.5;

    color:
        var(--text-muted);

}


/* =========================
   LOCATION
========================= */

.location-status {

    color:
        var(--text-muted);

    font-size: 14px;

    line-height: 1.6;

}


/* =========================
   SCORE
========================= */

.score-panel {

    background:
        var(--dark);

    color: white;

}


.score {

    font-size: 75px;

    font-weight: 900;

    letter-spacing: -5px;

}


.score-message {

    opacity: .7;

    line-height: 1.5;

}


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

footer {

    padding:
        40px 7%;

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

    color:
        var(--text-muted);

    text-align: center;

}


footer p {

    margin-top: 8px;

    font-size: 13px;

}


/* =========================
   MOBILE
========================= */

@media (max-width: 850px) {

    .navbar {

        padding:
            0 5%;

    }


    .nav-status {

        display: none;

    }


    .hero {

        grid-template-columns:
            1fr;

        padding:
            55px 5%;

    }


    .hero h1 {

        font-size: 65px;

    }


    .hero-card {

        min-height: 350px;

    }


    .dashboard {

        padding:
            40px 5% 70px;

    }


    .dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .mission-panel {

        grid-column:
            span 1;

    }


    .dashboard-header {

        flex-direction: column;

        align-items: flex-start;

        gap: 20px;

    }


    .dashboard-header h2 {

        font-size: 34px;

    }

}


@media (max-width: 500px) {

    .hero h1 {

        font-size: 55px;

        letter-spacing: -4px;

    }


    .hero-card h2 {

        font-size: 35px;

    }


    .timer {

        font-size: 45px;

    }

}