/* ====== 0065 — NATURAL FRESH ECO STYLE ====== */

:root {
    --mint: #059669;
    --ivory: #fefce8;
    --dark-green: #064e3b;
    --text: #3d4f47;
    --light-mint: #d1fae5;
}

html { scroll-behavior: smooth; }

body {
    background: var(--ivory);
    color: var(--text);
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* Navbar */
#navbar { transition: all 0.3s ease; }
#navbar.scrolled {
    background: rgba(254,252,232,0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(5,150,105,0.08);
    border-bottom: 1px solid rgba(5,150,105,0.1);
}

/* Leaf feature card */
.feature-leaf-card {
    background: white;
    border: 2px solid rgba(5,150,105,0.15);
    border-radius: 24px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}
.feature-leaf-card:hover {
    border-color: rgba(5,150,105,0.4);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(5,150,105,0.1);
}
.feature-leaf-card::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: rgba(5,150,105,0.04);
    border-radius: 50%;
    transition: all 0.4s;
}
.feature-leaf-card:hover::before {
    transform: scale(2);
}

/* Leaf icon */
.leaf-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--light-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mint);
    font-size: 1.5rem;
    transition: all 0.3s;
}
.feature-leaf-card:hover .leaf-icon {
    background: var(--mint);
    color: white;
    box-shadow: 0 8px 25px rgba(5,150,105,0.3);
}

/* Stats circular progress */
.stat-circle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.stat-circle svg { transform: rotate(-90deg); }
.stat-circle .bg-ring { fill: none; stroke: #d1fae5; stroke-width: 10; }
.stat-circle .fill-ring { fill: none; stroke: #059669; stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 2s ease; }
.stat-circle .stat-value {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark-green);
}

/* Floating icons animation */
.float-icon { animation: floatEco 6s ease-in-out infinite; }
.float-icon:nth-child(2) { animation-delay: -2s; }
.float-icon:nth-child(3) { animation-delay: -4s; }
@keyframes floatEco {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33% { transform: translateY(-15px) rotate(5deg); }
    66% { transform: translateY(-5px) rotate(-3deg); }
}

/* FAQ tree branch */
.faq-branch-item {
    border-left: 3px solid rgba(5,150,105,0.2);
    margin-left: 12px;
    padding-left: 20px;
    transition: all 0.3s;
}
.faq-branch-item.active {
    border-left-color: var(--mint);
}
.faq-branch-toggle {
    width: 100%;
    text-align: left;
    padding: 16px 20px;
    background: white;
    border: 1px solid rgba(5,150,105,0.1);
    border-radius: 12px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s;
    cursor: pointer;
    margin-bottom: 4px;
}
.faq-branch-toggle:hover { border-color: var(--mint); }
.faq-branch-item.active .faq-branch-toggle {
    border-color: var(--mint);
    background: var(--light-mint);
    color: var(--dark-green);
}
.faq-branch-toggle .fa-chevron-down { transition: transform 0.3s; color: var(--mint); }
.faq-branch-item.active .faq-branch-toggle .fa-chevron-down { transform: rotate(180deg); }
.faq-branch-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: white;
    border-radius: 0 0 12px 12px;
    margin-bottom: 8px;
}
.faq-branch-content.show { max-height: 200px; }
.faq-branch-content p { padding: 0 20px 16px; color: #6b7280; }

/* Card styles for multi pages */
.eco-card {
    background: white;
    border: 1px solid rgba(5,150,105,0.1);
    border-radius: 20px;
    transition: all 0.3s;
}
.eco-card:hover {
    border-color: rgba(5,150,105,0.3);
    box-shadow: 0 10px 30px rgba(5,150,105,0.08);
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fefce8; }
::-webkit-scrollbar-thumb { background: #059669; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #047857; }

/* Focus styles */
input:focus, textarea:focus {
    outline: none;
    border-color: #059669 !important;
    box-shadow: 0 0 10px rgba(5,150,105,0.1);
}