body {
    box-sizing: border-box;
}

.hero-bg {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.85) 0%, rgba(20, 184, 166, 0.85) 30%, rgba(59, 130, 246, 0.85) 70%, rgba(147, 51, 234, 0.8) 100%),
                url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><radialGradient id="sun" cx="80%" cy="20%" r="15%"><stop offset="0%" style="stop-color:%23fbbf24;stop-opacity:0.9"/><stop offset="50%" style="stop-color:%23f59e0b;stop-opacity:0.6"/><stop offset="100%" style="stop-color:%23ea580c;stop-opacity:0.3"/></radialGradient><linearGradient id="island" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:%23064e3b"/><stop offset="20%" style="stop-color:%2315803d"/><stop offset="40%" style="stop-color:%2316a34a"/><stop offset="70%" style="stop-color:%2322c55e"/><stop offset="100%" style="stop-color:%2334d399"/></linearGradient><filter id="glow"><feGaussianBlur stdDeviation="3" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><circle cx="960" cy="160" r="120" fill="url(%23sun)" filter="url(%23glow)"/><ellipse cx="600" cy="650" rx="450" ry="90" fill="%23065f46" opacity="0.4"/><path d="M150 600 Q350 480 600 600 Q850 480 1050 600 L1050 720 Q850 670 600 720 Q350 670 150 720 Z" fill="url(%23island)"/><g opacity="0.7"><circle cx="280" cy="570" r="30" fill="%2315803d"/><circle cx="305" cy="560" r="25" fill="%2316a34a"/><circle cx="330" cy="565" r="22" fill="%2322c55e"/><circle cx="480" cy="560" r="35" fill="%2315803d"/><circle cx="510" cy="550" r="30" fill="%2316a34a"/><circle cx="540" cy="555" r="25" fill="%2322c55e"/><circle cx="680" cy="565" r="32" fill="%2315803d"/><circle cx="710" cy="555" r="28" fill="%2316a34a"/><circle cx="740" cy="560" r="24" fill="%2322c55e"/><circle cx="880" cy="570" r="28" fill="%2315803d"/><circle cx="905" cy="560" r="22" fill="%2316a34a"/></g><g opacity="0.5"><rect x="430" y="510" width="10" height="70" fill="%23ffffff" filter="url(%23glow)"/><circle cx="435" cy="500" r="18" fill="%23ffffff"/><path d="M417 500 L435 482 L453 500 Z" fill="%23ffffff"/><rect x="630" y="520" width="8" height="60" fill="%23ffffff" filter="url(%23glow)"/><circle cx="634" cy="510" r="15" fill="%23ffffff"/><path d="M619 510 L634 495 L649 510 Z" fill="%23ffffff"/><rect x="730" y="515" width="9" height="65" fill="%23ffffff" filter="url(%23glow)"/><circle cx="734.5" cy="505" r="16" fill="%23ffffff"/><path d="M718.5 505 L734.5 489 L750.5 505 Z" fill="%23ffffff"/></g><g opacity="0.3"><circle cx="200" cy="300" r="3" fill="%23ffffff"><animate attributeName="opacity" values="0.3;0.8;0.3" dur="4s" repeatCount="indefinite"/></circle><circle cx="400" cy="250" r="2" fill="%23ffffff"><animate attributeName="opacity" values="0.2;0.7;0.2" dur="3s" repeatCount="indefinite"/></circle><circle cx="800" cy="280" r="2.5" fill="%23ffffff"><animate attributeName="opacity" values="0.4;0.9;0.4" dur="5s" repeatCount="indefinite"/></circle></g></svg>');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    animation: backgroundShift 20s ease-in-out infinite;
}

@keyframes backgroundShift {
    0%, 100% { background-position: center center; }
    50% { background-position: center top; }
}

.nature-pattern {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="forest" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse"><path d="M25 10 L30 25 L35 10 L40 25 L45 10 L50 25 L25 25 Z" fill="%2316a34a" opacity="0.05"/><path d="M0 25 L5 40 L10 25 L15 40 L20 25 L25 40 L0 40 Z" fill="%2322c55e" opacity="0.03"/></pattern></defs><rect width="100%" height="100%" fill="url(%23forest)"/></svg>');
    background-size: 150px 150px;
}

.eco-texture {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="eco" x="0" y="0" width="30" height="30" patternUnits="userSpaceOnUse"><circle cx="15" cy="15" r="8" fill="none" stroke="%2310b981" stroke-width="0.5" opacity="0.1"/><path d="M10 15 Q15 10 20 15 Q15 20 10 15" fill="%2316a34a" opacity="0.05"/></pattern></defs><rect width="100%" height="100%" fill="url(%23eco)"/></svg>');
    background-size: 120px 120px;
}

.gradient-bg {
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
}

.tree-animation {
    animation: sway 3s ease-in-out infinite;
}

@keyframes sway {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(2deg); }
}

.leaf-float {
    animation: float 4s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.eco-card {
    backdrop-filter: blur(15px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 
                0 0 0 1px rgba(255, 255, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.eco-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
    transition: left 0.6s ease;
}

.eco-card:hover::before {
    left: 100%;
}

.eco-card:hover {
    transform: translateY(-8px) rotateX(5deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 
                0 0 0 1px rgba(16, 185, 129, 0.3),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.pulse-green {
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.floating-leaf {
    position: absolute;
    animation: floatAround 15s infinite linear;
}

@keyframes floatAround {
    0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

.glass-effect {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    overflow: hidden;
}

.glass-effect::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: rotate 4s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-effect:hover::before {
    opacity: 1;
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-primary {
    background: linear-gradient(135deg, #10b981, #059669, #047857);
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transition: all 0.4s ease;
    transform: translate(-50%, -50%);
}

.btn-primary:hover::after {
    width: 300px;
    height: 300px;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.section-divider {
    background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.3), transparent);
    height: 1px;
    margin: 4rem 0;
    position: relative;
}

.section-divider::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, #10b981, #059669);
    border-radius: 50%;
    transform: translateX(-50%);
    animation: pulse 2s ease-in-out infinite;
}

.particle-system {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.8), transparent);
    border-radius: 50%;
    animation: particleFloat 8s linear infinite;
}

@keyframes particleFloat {
    0% {
        transform: translateY(100vh) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(90vh) translateX(10px) scale(1);
    }
    90% {
        opacity: 1;
        transform: translateY(10vh) translateX(-10px) scale(1);
    }
    100% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
}

.morphing-bg {
    background: linear-gradient(-45deg, #10b981, #059669, #0d9488, #0f766e);
    background-size: 400% 400%;
    animation: morphBackground 8s ease infinite;
}

@keyframes morphBackground {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.text-glow {
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.5),
                 0 0 20px rgba(16, 185, 129, 0.3),
                 0 0 30px rgba(16, 185, 129, 0.1);
}

.icon-bounce {
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-5px) scale(1.05); }
}