:root{
    --primary:#1f7a3d;
    --primary-dark:#14572b;
    --primary-soft:#eef8f0;
    --secondary:#8a6b2b;
    --ink:#17212b;
    --muted:#667085;
    --surface:#ffffff;
    --surface-soft:#f6faf7;
    --surface-strong:#edf5ef;
    --border:#dbe7dd;
    --shadow-sm:0 12px 28px rgba(23,33,43,.06);
    --shadow-md:0 18px 44px rgba(23,33,43,.1);
    --shadow-lg:0 28px 70px rgba(14,28,20,.16);
    --radius-sm:16px;
    --radius-md:22px;
    --radius-lg:28px;
}

html{scroll-behavior:smooth}
body{
    font-family:Inter,Segoe UI,Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at top left, rgba(31,122,61,.08), transparent 28%),
        radial-gradient(circle at bottom right, rgba(138,107,43,.06), transparent 30%),
        #f7faf8;
    color:var(--ink);
    letter-spacing:.01em;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--primary-dark)}
img{max-width:100%}

.demo-ribbon{
    background:linear-gradient(90deg,#103c23 0%, #176838 52%, #229955 100%);
    color:#fff;
    padding:.7rem 0;
    font-size:.92rem;
    box-shadow:0 10px 24px rgba(16,60,35,.2);
}
.topbar{
    background:linear-gradient(90deg,#1b5e31 0%, #2c8f4f 50%, #82b84a 100%);
}
header.sticky-top{
    backdrop-filter:blur(10px);
    box-shadow:0 18px 44px rgba(15,23,42,.08);
}
.navbar{
    border-bottom:1px solid rgba(31,122,61,.08);
}
.navbar-brand{
    font-size:1.05rem;
    font-weight:800;
    color:#10261a;
}
.navbar-brand img{
    background:#fff;
    border-radius:14px;
    box-shadow:0 12px 28px rgba(22,66,38,.12);
    padding:.3rem;
}
.navbar .nav-link{
    color:#294133;
    font-weight:600;
    padding:.7rem .95rem !important;
    border-radius:999px;
    transition:.2s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
    color:var(--primary);
    background:var(--primary-soft);
}
.navbar .nav-link.position-relative{padding-right:1.1rem !important}
.navbar-toggler{
    border:none;
    border-radius:16px;
    background:var(--surface-soft);
    padding:.6rem .75rem;
}
.navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(31,122,61,.12)}

.hero-section{
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(129,184,74,.14), transparent 35%),
        radial-gradient(circle at left center, rgba(31,122,61,.09), transparent 32%),
        linear-gradient(180deg,#ffffff 0%, #f2f8f3 100%);
    border-bottom:1px solid rgba(31,122,61,.08);
}
.hero-section::before{
    content:'';
    position:absolute;
    inset:auto -8% -120px auto;
    width:340px;
    height:340px;
    background:radial-gradient(circle, rgba(31,122,61,.12), rgba(31,122,61,0) 70%);
    pointer-events:none;
}
.hero-banner{
    height:480px;
    object-fit:cover;
    filter:brightness(.7) saturate(1.08);
}
.hero-caption-box{
    background:linear-gradient(135deg, rgba(15,23,42,.72), rgba(26,52,36,.44));
    border:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(8px);
    padding:1.35rem 1.4rem;
    border-radius:var(--radius-md);
    max-width:680px;
    box-shadow:var(--shadow-md);
}
.hero-caption-box h1,.hero-caption-box h2,.hero-caption-box h3{line-height:1.1}
.hero-caption-box p{color:rgba(255,255,255,.86)}
.display-5,.display-6{letter-spacing:-.03em}

.hero-note,
.surface-panel,
.credential-panel,
.detail-panel,
.filter-panel,
.dashboard-hero{
    background:rgba(255,255,255,.92);
    border:1px solid rgba(31,122,61,.1);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-sm);
}
.hero-note{padding:1rem 1.15rem}
.surface-panel{padding:1.5rem}
.credential-panel{padding:1.35rem}
.detail-panel{padding:1.5rem}
.filter-panel{padding:1.25rem}
.dashboard-hero{
    padding:1.35rem 1.45rem;
    background:
        radial-gradient(circle at top right, rgba(129,184,74,.18), transparent 36%),
        linear-gradient(135deg,#113b24 0%, #1d6f3a 56%, #d9a955 160%);
    color:#fff;
    border-color:rgba(255,255,255,.08);
    box-shadow:var(--shadow-lg);
}
.dashboard-hero .text-muted{color:rgba(255,255,255,.75)!important}
.section-kicker{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    background:rgba(31,122,61,.08);
    color:var(--primary);
    padding:.5rem .9rem;
    border-radius:999px;
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.section-heading{
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.05;
    margin:.8rem 0 1rem;
}
.section-subtitle{
    font-size:1.05rem;
    color:var(--muted);
    max-width:780px;
}

.usp-box,
.spec-box,
.stat-card{
    background:
        linear-gradient(180deg,#ffffff 0%, #f8fbf8 100%);
    border:1px solid rgba(31,122,61,.1);
    border-radius:var(--radius-md);
    padding:1.15rem 1.2rem;
    height:100%;
    box-shadow:var(--shadow-sm);
}
.usp-box{
    position:relative;
    overflow:hidden;
}
.usp-box::before{
    content:'';
    position:absolute;
    width:42px;height:42px;
    right:-10px;top:-10px;
    border-radius:50%;
    background:rgba(31,122,61,.1);
}
.usp-box h3,.stat-label{
    font-size:.98rem;
    margin:0 0 .45rem;
    font-weight:800;
    color:#193123;
}
.usp-box p,.text-muted{color:var(--muted)!important}
.stat-card{
    padding:1.2rem 1.25rem;
    box-shadow:0 16px 34px rgba(31,122,61,.08);
}
.stat-card .stat-label{
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:.78rem;
    color:#55705f;
}
.stat-value{
    font-size:clamp(1.65rem, 3vw, 2.25rem);
    font-weight:900;
    color:var(--primary);
    letter-spacing:-.04em;
    line-height:1.1;
}

.product-card,
.article-card,
.testimonial-card{
    overflow:hidden;
    border:1px solid rgba(31,122,61,.09);
    box-shadow:var(--shadow-sm);
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.product-card:hover,
.article-card:hover,
.testimonial-card:hover{
    transform:translateY(-6px);
    box-shadow:var(--shadow-md);
    border-color:rgba(31,122,61,.22);
}
.product-card .card-body,
.article-card .card-body,
.testimonial-card .card-body{
    padding:1.35rem;
}
.product-thumb{
    height:245px;
    object-fit:cover;
    background:linear-gradient(180deg,#f1f6f2,#e3efe6);
}
.product-thumb-sm{
    height:112px;
    object-fit:cover;
}
.product-price{
    font-size:1.1rem;
    font-weight:800;
    color:var(--primary);
}
.product-meta{
    display:flex;
    gap:.6rem;
    flex-wrap:wrap;
    margin:.9rem 0 0;
}
.product-meta span{
    background:var(--surface-soft);
    border:1px solid rgba(31,122,61,.08);
    color:#446553;
    border-radius:999px;
    padding:.4rem .75rem;
    font-size:.78rem;
    font-weight:700;
}
.object-fit-cover{object-fit:cover}

.card{
    border-radius:var(--radius-md);
    border:1px solid rgba(31,122,61,.1);
    box-shadow:var(--shadow-sm);
}
.card.shadow-sm,.card.shadow-lg{box-shadow:var(--shadow-sm)!important}
.card.shadow-lg{box-shadow:var(--shadow-lg)!important}
.border-0{border-color:transparent!important}
.card-header{
    background:#fff;
    border-bottom:1px solid rgba(31,122,61,.08);
}
.table-wrap{
    background:#fff;
    border-radius:var(--radius-md);
    border:1px solid rgba(31,122,61,.08);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
}

.btn,
.form-control,
.form-select,
.form-check-input,
.accordion-item{
    border-radius:16px;
}
.btn{
    font-weight:700;
    padding:.78rem 1.15rem;
    box-shadow:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-success{
    background:linear-gradient(180deg,#23924a 0%, #1f7a3d 100%);
    border-color:#1c7038;
    box-shadow:0 14px 30px rgba(31,122,61,.18);
}
.btn-success:hover,
.btn-success:focus{
    background:linear-gradient(180deg,#1f8a44 0%, #16622f 100%);
    border-color:#16622f;
}
.btn-outline-success{
    color:var(--primary);
    border-color:rgba(31,122,61,.28);
    background:#fff;
}
.btn-outline-success:hover{
    color:#fff;
    background:var(--primary);
    border-color:var(--primary);
}
.btn-outline-dark{
    border-color:rgba(23,33,43,.2);
    color:#15212b;
}
.btn-warning{font-weight:800}
.form-control,.form-select{
    border:1px solid rgba(31,122,61,.16);
    background:#fff;
    padding:.82rem 1rem;
    color:var(--ink);
    box-shadow:inset 0 1px 2px rgba(15,23,42,.02);
}
.form-control:focus,.form-select:focus{
    border-color:rgba(31,122,61,.4);
    box-shadow:0 0 0 .2rem rgba(31,122,61,.12);
}
.form-label{
    font-weight:700;
    color:#294133;
    margin-bottom:.5rem;
}
textarea.form-control{min-height:110px}
.badge{
    font-weight:800;
    letter-spacing:.02em;
    padding:.55rem .8rem;
    border-radius:999px;
}
code{
    background:#eef3f0;
    color:#14532d;
    padding:.18rem .42rem;
    border-radius:.45rem;
    font-size:.92em;
}
.alert{
    border-radius:20px;
    border:1px solid rgba(31,122,61,.08);
    box-shadow:var(--shadow-sm);
}
.list-group-item{border-color:rgba(31,122,61,.08)}
.table{
    --bs-table-bg:transparent;
    --bs-table-striped-bg:#f6faf7;
}
.table>:not(caption)>*>*{
    padding:1rem .8rem;
    border-bottom-color:rgba(31,122,61,.08);
}
.table thead th{
    color:#3a5645;
    font-size:.82rem;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-weight:800;
}
.table-light{background:#f6faf7}
.bg-light{background:#f7faf8!important}

.timeline{list-style:none;padding-left:0;margin:0}
.timeline li{
    position:relative;
    padding:0 0 1.05rem 1.3rem;
    margin-left:.35rem;
    border-left:2px solid rgba(31,122,61,.18);
}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
    content:'';
    width:12px;height:12px;border-radius:50%;
    background:linear-gradient(180deg,#28a256,#15672f);
    position:absolute;left:-7px;top:4px;
    box-shadow:0 0 0 4px rgba(31,122,61,.1);
}

.footer{
    background:
        radial-gradient(circle at top right, rgba(129,184,74,.14), transparent 24%),
        linear-gradient(180deg,#10261a 0%, #14321f 100%);
    color:#fff;
    border-top:none;
}
.footer h5,.footer h6{color:#fff;font-weight:800}
.footer .text-muted,.footer a{color:rgba(255,255,255,.78)!important}
.footer a:hover{color:#fff!important}
.footer .border-top{border-color:rgba(255,255,255,.12)!important}
.footer .footer-pill{
    display:inline-flex;
    align-items:center;
    padding:.6rem .9rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff!important;
    font-size:.88rem;
}
.footer .footer-cta{
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:var(--radius-md);
    padding:1.2rem;
}
.wa-float{
    position:fixed;
    right:20px;
    bottom:20px;
    width:58px;
    height:58px;
    border-radius:50%;
    background:linear-gradient(180deg,#36db79 0%, #18b354 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:800;
    box-shadow:0 18px 34px rgba(37,211,102,.32);
    z-index:99;
}
.article-content{line-height:1.85;color:#314155}
.proof-thumb{width:72px;height:72px;object-fit:cover}
.min-vh-100{min-height:100vh}

.login-body{
    background:
        radial-gradient(circle at top left, rgba(31,122,61,.18), transparent 28%),
        radial-gradient(circle at bottom right, rgba(138,107,43,.13), transparent 32%),
        linear-gradient(180deg,#eff7f0 0%, #edf1ef 100%);
}
.login-shell{
    position:relative;
    overflow:hidden;
}
.login-showcase{
    min-height:100%;
    padding:1.6rem;
    border-radius:var(--radius-lg);
    background:
        radial-gradient(circle at top right, rgba(129,184,74,.28), transparent 34%),
        linear-gradient(135deg,#0f2d1c 0%, #175830 55%, #c79745 160%);
    color:#fff;
    box-shadow:var(--shadow-lg);
}
.login-showcase .lead,
.login-showcase .text-muted{color:rgba(255,255,255,.78)!important}
.login-showcase .metric{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    padding:.95rem 1rem;
    border-radius:18px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.08);
}
.login-panel{
    background:rgba(255,255,255,.96);
    border:1px solid rgba(31,122,61,.12);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
}
.login-panel .card-body{padding:2rem}
.credential-list{
    display:grid;
    gap:.95rem;
}
.credential-item{
    background:var(--surface-soft);
    border:1px solid rgba(31,122,61,.08);
    border-radius:18px;
    padding:1rem;
}

.admin-body,.customer-body{
    background:
        radial-gradient(circle at top left, rgba(31,122,61,.08), transparent 24%),
        linear-gradient(180deg,#f1f6f2 0%, #edf2ef 100%);
}
.admin-shell{display:flex;min-height:100vh}
.admin-sidebar{
    width:292px;
    background:
        linear-gradient(180deg,#0f281c 0%, #123021 42%, #163a29 100%);
    color:#fff;
    border-right:none;
    position:sticky;
    top:0;
    height:100vh;
    overflow-y:auto;
    box-shadow:22px 0 44px rgba(15,23,42,.12);
}
.admin-sidebar .border-bottom{border-color:rgba(255,255,255,.08)!important}
.admin-sidebar .small.text-muted,
.admin-sidebar .text-muted{color:rgba(255,255,255,.66)!important}
.admin-sidebar .brand-logo{
    width:46px;height:46px;
    border-radius:18px;
    background:rgba(255,255,255,.1);
    padding:.35rem;
    box-shadow:0 10px 22px rgba(0,0,0,.16);
}
.admin-sidebar .brand-mark{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.45rem .7rem;
    border-radius:999px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.admin-sidebar .nav-link{
    color:rgba(255,255,255,.86);
    border-radius:18px;
    padding:.82rem 1rem;
    font-weight:700;
    transition:.2s ease;
}
.admin-sidebar .nav-link.active,
.admin-sidebar .nav-link:hover{
    background:rgba(255,255,255,.1);
    color:#fff;
    transform:translateX(3px);
}
.admin-sidebar .btn-warning{border-radius:999px}
.admin-content{
    flex:1;
    min-width:0;
}
.admin-content > header,
.customer-header{
    position:sticky;
    top:0;
    z-index:20;
}
.admin-header{
    background:rgba(255,255,255,.82);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(31,122,61,.08);
    padding:1rem 1.25rem;
}
.admin-header .header-chip{
    display:inline-flex;
    align-items:center;
    gap:.45rem;
    background:rgba(31,122,61,.08);
    color:var(--primary);
    padding:.45rem .8rem;
    border-radius:999px;
    font-size:.8rem;
    font-weight:800;
}
.page-intro{
    background:#fff;
    border:1px solid rgba(31,122,61,.08);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-sm);
    padding:1rem 1.1rem;
}
.admin-stat-card .stat-value{color:#102d1b}
.customer-body .admin-sidebar{
    background:
        linear-gradient(180deg,#fff 0%, #f7fbf8 100%);
    color:var(--ink);
    border-right:1px solid rgba(31,122,61,.08);
    box-shadow:18px 0 38px rgba(15,23,42,.06);
}
.customer-body .admin-sidebar .border-bottom{border-color:rgba(31,122,61,.08)!important}
.customer-body .admin-sidebar .small.text-muted,
.customer-body .admin-sidebar .text-muted{color:var(--muted)!important}
.customer-body .admin-sidebar .brand-mark{
    background:var(--primary-soft);
    color:var(--primary);
}
.customer-body .admin-sidebar .nav-link{
    color:#314155;
}
.customer-body .admin-sidebar .nav-link.active,
.customer-body .admin-sidebar .nav-link:hover{
    background:#edf7ef;
    color:var(--primary);
}
.customer-body .admin-sidebar .brand-logo{
    background:var(--primary-soft);
    box-shadow:none;
}
.customer-body .admin-header{
    background:rgba(255,255,255,.9);
}

.content-grid{
    display:grid;
    gap:1rem;
}
.detail-grid{
    display:grid;
    gap:1rem;
}
.detail-grid.two{
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.metric-strip{
    display:grid;
    gap:1rem;
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.feature-list{
    display:grid;
    gap:.9rem;
}
.feature-list .feature-item{
    display:flex;
    gap:.85rem;
    align-items:flex-start;
    padding:1rem 1.05rem;
    border-radius:20px;
    background:#fff;
    border:1px solid rgba(31,122,61,.08);
    box-shadow:var(--shadow-sm);
}
.feature-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    border-radius:14px;
    background:var(--primary-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--primary);
    font-weight:900;
}

.pill{
    display:inline-flex;
    align-items:center;
    padding:.55rem .85rem;
    background:#fff;
    border:1px solid rgba(31,122,61,.1);
    border-radius:999px;
    color:#466352;
    font-size:.82rem;
    font-weight:700;
}

.filter-pills{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1rem;
}
.filter-pills .pill{
    display:inline-flex;
    align-items:center;
    padding:.55rem .85rem;
    background:#fff;
    border:1px solid rgba(31,122,61,.1);
    border-radius:999px;
    color:#466352;
    font-size:.82rem;
    font-weight:700;
}
.sticky-panel{
    position:sticky;
    top:118px;
}
.soft-divider{
    height:1px;
    background:linear-gradient(90deg, rgba(31,122,61,0), rgba(31,122,61,.14), rgba(31,122,61,0));
    margin:1.6rem 0;
}

@media (max-width: 1199px){
    .metric-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 992px){
    .admin-shell{display:block}
    .admin-sidebar{
        position:relative;
        width:100%;
        height:auto;
        box-shadow:none;
    }
    .hero-banner{height:340px}
    .sticky-panel{position:relative;top:auto}
}
@media (max-width: 768px){
    .demo-ribbon .container{
        justify-content:center!important;
        text-align:center;
    }
    .hero-caption-box{max-width:none}
    .hero-banner{height:280px}
    .section-heading{font-size:2.2rem}
    .login-panel .card-body{padding:1.35rem}
    .metric-strip,
    .detail-grid.two{grid-template-columns:1fr}
    .navbar .nav-link{padding:.65rem .85rem!important}
}