:root {
    --bg: #f6f7f2;
    --text: #1f2937;
    --emerald-950: #022c22;
    --emerald-900: #064e3b;
    --emerald-800: #065f46;
    --emerald-700: #047857;
    --lime-600: #65a30d;
    --lime-300: #bef264;
    --shadow: 0 20px 50px rgba(15,23,42,.10);
    --shadow-soft: 0 10px 30px rgba(15,23,42,.08)
}

html {
    scroll-behavior: smooth
}

body {
    font-family: Arial,Helvetica,sans-serif;
    color: var(--text);
    background: var(--bg)
}

.navbar {
    background: rgba(255,255,255,.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #e5e7eb
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: .85rem
}

.brand-logo {
    width: 120px;
    height: 120px;
    border-radius: 999px;
    background: #fff;
    padding: 6px;
    object-fit: contain;
    border: 1px solid #dcfce7;
    box-shadow: var(--shadow-soft)
}



.brand-title {
    font-weight: 800;
    color: var(--emerald-900);
    line-height: 1
}

.brand-subtitle {
    font-size: .72rem;
    font-weight: 700;
    color: var(--lime-600);
    text-transform: uppercase;
    letter-spacing: .22em;
    margin-top: .2rem
}

.nav-link {
    font-weight: 700;
    color: #334155 !important
}

    .nav-link.active {
        color: var(--emerald-700) !important
    }

.btn-brand {
    background: var(--emerald-700);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .85rem 1.35rem;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(4,120,87,.18)
}

    .btn-brand:hover {
        background: var(--emerald-800);
        color: #fff
    }

.btn-outline-brand {
    border-radius: 999px;
    padding: .85rem 1.35rem;
    font-weight: 700;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: var(--emerald-800)
}

.section-pad {
    padding: 5rem 0
}

.hero {
    position: relative;
    overflow: hidden;
    padding: 4.5rem 0 5rem;
    background: radial-gradient(circle at top right, rgba(132,204,22,.18), transparent 32%),radial-gradient(circle at left, rgba(5,150,105,.14), transparent 28%),var(--bg)
}

.page-hero {
    padding: 4rem 0 3rem
}

.eyebrow {
    display: inline-block;
    padding: .65rem 1rem;
    border-radius: 999px;
    background: #f7fee7;
    border: 1px solid #ecfccb;
    color: var(--lime-600);
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .2em
}

.hero h1, .page-hero h1 {
    color: var(--emerald-950);
    font-weight: 800;
    line-height: 1.05
}

.hero-lead {
    color: #475569;
    font-size: 1.08rem;
    max-width: 700px
}

.highlight-card, .mini-card, .benefit-card, .contact-card, .product-card, .faq-card {
    border: none;
    border-radius: 28px;
    box-shadow: var(--shadow-soft);
    background: #fff
}

.highlight-card {
    padding: 1rem;
    font-weight: 700
}

.hero-panel {
    border-radius: 32px;
    padding: 1.25rem;
    background: #fff;
    box-shadow: var(--shadow);
    border: 1px solid #e2e8f0
}

.hero-panel-inner {
    border-radius: 28px;
    padding: 1.75rem;
    color: #fff;
    background: linear-gradient(135deg,#022c22 0%,#065f46 55%,#84cc16 100%)
}

.hero-stats .stat-box {
    border-radius: 20px;
    padding: 1rem;
    background: rgba(255,255,255,.12)
}

.stat-label {
    color: #d9f99d;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .2em
}

.panel-note {
    margin-top: 1.25rem;
    border-radius: 22px;
    background: #fff;
    color: #334155;
    padding: 1rem 1.1rem
}

.section-label {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--emerald-700)
}

.section-label-light {
    color: var(--lime-300)
}

.dark-panel, .benefit-side {
    background: linear-gradient(135deg,#064e3b 0%,#022c22 100%);
    color: #fff;
    border-radius: 32px;
    box-shadow: var(--shadow);
    padding: 2rem
}

    .dark-panel p, .benefit-side p, .contact-wrap p {
        color: #dcfce7
    }

.mini-card {
    padding: 1.6rem;
    height: 100%
}

.product-section {
    background: #fff
}

.product-card {
    overflow: hidden;
    background: #fcfcfa;
    height: 100%
}

.product-top {
    color: #fff;
    padding: 1.25rem
}

.product-badge {
    display: inline-block;
    padding: .5rem .8rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .18em;
    background: rgba(255,255,255,.18)
}

.product-img-wrap {
    background: #f3f4f6;
    padding: 1rem;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center
}

.product-img {
    width: 100%;
    height: 260px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff
}

.product-body {
    padding: 1.35rem
}

.meta-row {
    color: #334155;
    margin-bottom: .5rem
}

.heat-box {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0
}

.page-banner {
    width: 100%;
    border-radius: 30px;
    box-shadow: var(--shadow);
    object-fit: cover
}

.icon-pill {
    display: inline-flex;
    align-items: center;
    padding: .55rem 1rem;
    border-radius: 999px;
    background: #eefdf3;
    color: var(--emerald-700);
    font-weight: 700
}

.contact-wrap {
    background: var(--emerald-950);
    color: black;
}

.contact-card {
    padding: 1.75rem
}

.form-control, .form-select {
    border-radius: 16px;
    padding: .9rem 1rem;
    border: 1px solid #d1d5db
}

    .form-control:focus, .form-select:focus {
        border-color: #34d399;
        box-shadow: 0 0 0 .25rem rgba(52,211,153,.18)
    }

.site-footer {
    background: var(--emerald-950);
    color: #cbd5e1
}

.footer-link {
    display: inline-block;
    margin-left: 1rem;
    color: #cbd5e1;
    text-decoration: none
}

    .footer-link:hover {
        color: #fff
    }

.text-footer-soft {
    color: #a7b6c8
}

.accordion-item {
    border: none;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: var(--shadow-soft)
}

.accordion-button:not(.collapsed) {
    background: #f0fdf4;
    color: var(--emerald-800)
}

.accordion-button:focus {
    box-shadow: none
}

.policy-list dt {
    font-weight: 800;
    color: #0f172a;
    margin-top: 1rem
}

.policy-list dd {
    color: #475569
}

.product-image-frame {
    aspect-ratio: 4 / 5;
    background: linear-gradient(180deg,#ffffff,#f3f4f6);
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eef2f7;
}

    .product-image-frame img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
    }

@media (max-width:575.98px) {
    .brand-title {
        font-size: 1rem
    }

    .brand-subtitle {
        font-size: .64rem;
        letter-spacing: .16em
    }

    .hero-panel, .hero-panel-inner, .dark-panel, .benefit-side, .mini-card, .benefit-card, .product-card, .contact-card, .faq-card {
        border-radius: 22px
    }

    .product-img {
        height: 220px
    }

    .footer-link {
        margin-left: 0;
        margin-right: 1rem
    }

    brand-logo {
        width: 150px;
        height: 150px;
    }
}

/*@media screen and (min-width: 768px) {
    brand-logo {
        width: 150px;
        height: 150px;
        border-radius: 999px;
        background: #fff;
        padding: 6px;
        object-fit: contain;
        border: 1px solid #dcfce7;
        box-shadow: var(--shadow-soft)
    }
}*/