/* =========================================================
   GrowSomeFood Landing Page (Landing-only)
   - Uses gsf-theme.css components
   - Keep ONLY page-specific layout/hero/mock styles here
========================================================= */

.gsf-hero {
    position: relative;
    padding: 3.25rem 0 2.5rem;
    overflow: hidden;
}

.gsf-hero-glow {
    position: absolute;
    inset: -200px -200px auto -200px;
    height: 560px;
    background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.20), transparent 55%), radial-gradient(circle at 70% 50%, rgba(96,165,250,0.18), transparent 55%);
    pointer-events: none;
    filter: blur(20px);
}

.gsf-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    font-size: .92rem;
}

    .gsf-badge .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(34,197,94,0.95);
        box-shadow: 0 0 0 6px rgba(34,197,94,0.15);
    }

/* Small keyword “kbd” pills in the hero */
.gsf-kbd {
    display: inline-flex;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: .85rem;
}

/* Stats tiles in hero */
.gsf-stat {
    border-radius: 18px;
    padding: .9rem .95rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

    .gsf-stat .value {
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: 1.05rem;
    }

    .gsf-stat .label {
        color: rgba(255,255,255,0.60);
        font-size: .85rem;
        margin-top: .1rem;
    }

/* Strip under hero */
.gsf-strip {
    padding: 1rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

/* Hero “mock UI” block */
.gsf-hero-card {
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 90px rgba(0,0,0,0.35);
}

.gsf-mock {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(3, 7, 18, 0.85);
    display: grid;
    grid-template-columns: 34% 66%;
    min-height: 320px;
}

.gsf-mock-sidebar {
    padding: 1rem;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.gsf-mock-main {
    padding: 1rem;
}

.gsf-mock .line {
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.10);
    margin-bottom: .6rem;
}

.gsf-mock .sp {
    height: 14px;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.gsf-mock-header {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gsf-mock-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

    .gsf-mock-cards .cardx {
        border-radius: 16px;
        padding: .65rem .7rem;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.10);
    }

    .gsf-mock-cards .t {
        color: rgba(255,255,255,0.55);
        font-size: .75rem;
    }

    .gsf-mock-cards .v {
        font-weight: 800;
        margin-top: .12rem;
    }

.gsf-mock-body .bar {
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.09);
    margin-bottom: .6rem;
}

.gsf-mock-footer {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

    .gsf-mock-footer .btnx {
        width: 120px;
        height: 36px;
        border-radius: 12px;
        background: rgba(34,197,94,0.22);
        border: 1px solid rgba(34,197,94,0.20);
    }

        .gsf-mock-footer .btnx.soft {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
        }

/* Mini CTA blocks */
.gsf-cta-mini {
    border-radius: 22px;
    padding: 1.2rem 1.2rem;
    background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(96,165,250,0.10));
    border: 1px solid rgba(255,255,255,0.12);
}

.gsf-big-cta {
    border-radius: 26px;
    padding: 1.4rem 1.4rem;
    background: radial-gradient(800px 300px at 30% 20%, rgba(34,197,94,0.16), transparent 60%), radial-gradient(600px 260px at 80% 40%, rgba(96,165,250,0.12), transparent 60%), rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
}

/* FAQ accordion polish */
.gsf-acc.accordion-item {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: .8rem;
}

.gsf-acc .accordion-button {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
    box-shadow: none;
}

    .gsf-acc .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }

.gsf-acc .accordion-body {
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.70);
}

/* Footer polish */
.gsf-footer {
    padding: 2.5rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}

.gsf-footer-link {
    color: rgba(255,255,255,0.70);
    text-decoration: none;
    padding: .25rem .4rem;
    border-radius: 10px;
}

    .gsf-footer-link:hover {
        color: #fff;
        background: rgba(255,255,255,0.06);
    }

.gsf-hr {
    border-color: rgba(255,255,255,0.10);
    margin: 1.25rem 0;
}

.gsf-section-head {
    margin-bottom: 1.25rem;
}

.gsf-mini-note {
    color: rgba(255,255,255,0.72);
    font-size: .95rem;
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
}

    .gsf-mini-note i {
        color: rgba(34,197,94,0.95);
    }

.gsf-hero-card-top {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.gsf-hero-card-bottom {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    color: rgba(255,255,255,0.70);
    font-size: .9rem;
}

    .gsf-hero-card-bottom .hint {
        display: flex;
        gap: .45rem;
        align-items: center;
    }

.gsf-step-n {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.22);
    font-weight: 800;
}

/* Let the landing use the same top nav styling */
.gsf-top-nav {
    background: rgba(6, 10, 24, 0.72) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-top: calc(0.5rem + var(--gsf-safe-top, 0px)) !important;
}
/* =========================================================
   GrowSomeFood Landing Page (Landing-only)
   - Uses gsf-theme.css components
   - Keep ONLY page-specific layout/hero/mock styles here
========================================================= */

.gsf-hero {
    position: relative;
    padding: 3.25rem 0 2.5rem;
    overflow: hidden;
}

.gsf-hero-glow {
    position: absolute;
    inset: -200px -200px auto -200px;
    height: 560px;
    background: radial-gradient(circle at 30% 30%, rgba(34,197,94,0.20), transparent 55%), radial-gradient(circle at 70% 50%, rgba(96,165,250,0.18), transparent 55%);
    pointer-events: none;
    filter: blur(20px);
}

.gsf-badge {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    font-size: .92rem;
}

    .gsf-badge .dot {
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(34,197,94,0.95);
        box-shadow: 0 0 0 6px rgba(34,197,94,0.15);
    }

/* Small keyword “kbd” pills in the hero */
.gsf-kbd {
    display: inline-flex;
    padding: .18rem .5rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    font-size: .85rem;
}

/* Stats tiles in hero */
.gsf-stat {
    border-radius: 18px;
    padding: .9rem .95rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
}

    .gsf-stat .value {
        font-weight: 800;
        letter-spacing: -0.02em;
        font-size: 1.05rem;
    }

    .gsf-stat .label {
        color: rgba(255,255,255,0.60);
        font-size: .85rem;
        margin-top: .1rem;
    }

/* Strip under hero */
.gsf-strip {
    padding: 1rem 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
}

/* Hero “mock UI” block */
.gsf-hero-card {
    border-radius: 22px;
    padding: 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 30px 90px rgba(0,0,0,0.35);
}

.gsf-mock {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(3, 7, 18, 0.85);
    display: grid;
    grid-template-columns: 34% 66%;
    min-height: 320px;
}

.gsf-mock-sidebar {
    padding: 1rem;
    border-right: 1px solid rgba(255,255,255,0.08);
}

.gsf-mock-main {
    padding: 1rem;
}

.gsf-mock .line {
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.10);
    margin-bottom: .6rem;
}

.gsf-mock .sp {
    height: 14px;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-65 {
    width: 65%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-85 {
    width: 85%;
}

.w-90 {
    width: 90%;
}

.gsf-mock-header {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.gsf-mock-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: 1rem;
}

    .gsf-mock-cards .cardx {
        border-radius: 16px;
        padding: .65rem .7rem;
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.10);
    }

    .gsf-mock-cards .t {
        color: rgba(255,255,255,0.55);
        font-size: .75rem;
    }

    .gsf-mock-cards .v {
        font-weight: 800;
        margin-top: .12rem;
    }

.gsf-mock-body .bar {
    height: 10px;
    border-radius: 8px;
    background: rgba(255,255,255,0.09);
    margin-bottom: .6rem;
}

.gsf-mock-footer {
    display: flex;
    gap: .6rem;
    margin-top: 1rem;
}

    .gsf-mock-footer .btnx {
        width: 120px;
        height: 36px;
        border-radius: 12px;
        background: rgba(34,197,94,0.22);
        border: 1px solid rgba(34,197,94,0.20);
    }

        .gsf-mock-footer .btnx.soft {
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.10);
        }

/* Mini CTA blocks */
.gsf-cta-mini {
    border-radius: 22px;
    padding: 1.2rem 1.2rem;
    background: linear-gradient(90deg, rgba(34,197,94,0.12), rgba(96,165,250,0.10));
    border: 1px solid rgba(255,255,255,0.12);
}

.gsf-big-cta {
    border-radius: 26px;
    padding: 1.4rem 1.4rem;
    background: radial-gradient(800px 300px at 30% 20%, rgba(34,197,94,0.16), transparent 60%), radial-gradient(600px 260px at 80% 40%, rgba(96,165,250,0.12), transparent 60%), rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
}

/* FAQ accordion polish */
.gsf-acc.accordion-item {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: .8rem;
}

.gsf-acc .accordion-button {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.85);
    box-shadow: none;
}

    .gsf-acc .accordion-button:focus {
        box-shadow: none;
        border-color: transparent;
    }

.gsf-acc .accordion-body {
    background: rgba(255,255,255,0.03);
    color: rgba(255,255,255,0.70);
}

/* Footer polish */
.gsf-footer {
    padding: 2.5rem 0 2rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.15);
}

.gsf-footer-link {
    color: rgba(255,255,255,0.70);
    text-decoration: none;
    padding: .25rem .4rem;
    border-radius: 10px;
}

    .gsf-footer-link:hover {
        color: #fff;
        background: rgba(255,255,255,0.06);
    }

.gsf-hr {
    border-color: rgba(255,255,255,0.10);
    margin: 1.25rem 0;
}

.gsf-section-head {
    margin-bottom: 1.25rem;
}

.gsf-mini-note {
    color: rgba(255,255,255,0.72);
    font-size: .95rem;
    display: flex;
    gap: .55rem;
    align-items: center;
    flex-wrap: wrap;
}

    .gsf-mini-note i {
        color: rgba(34,197,94,0.95);
    }

.gsf-hero-card-top {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: .8rem;
}

.gsf-hero-card-bottom {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .9rem;
    color: rgba(255,255,255,0.70);
    font-size: .9rem;
}

    .gsf-hero-card-bottom .hint {
        display: flex;
        gap: .45rem;
        align-items: center;
    }

.gsf-step-n {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(34,197,94,0.14);
    border: 1px solid rgba(34,197,94,0.22);
    font-weight: 800;
}

/* Let the landing use the same top nav styling */
.gsf-top-nav {
    background: rgba(6, 10, 24, 0.72) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-top: calc(0.5rem + var(--gsf-safe-top, 0px)) !important;
}