/* Custom CSS for FAMOUS EV SOLUTION Website */

/* Global Styles */
:root {
    --primary-color: #10b981;
    --secondary-color: #059669;
    --accent-color: #34d399;
    --dark-color: #064e3b;
    --light-color: #ecfdf5;
    --text-muted: #6b7280;
    --success-color: #10b981;
    --gradient-primary: linear-gradient(135deg, #10b981, #059669);
    --gradient-accent: linear-gradient(135deg, #34d399, #10b981);
    --gradient-hero: linear-gradient(135deg, #064e3b, #065f46, #047857);
    --eco-green: #22c55e;
    --forest-green: #15803d;
    --mint-green: #6ee7b7;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
    padding-top: 76px; /* Account for fixed navbar */
}

/* Glass / Enhanced Navbar */
.navbar-glass {
        background: rgba(6,78,59,0.85) !important;
        backdrop-filter: blur(12px) saturate(160%);
        -webkit-backdrop-filter: blur(12px) saturate(160%);
        border-bottom: 1px solid rgba(52,211,153,0.2);
        transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.navbar-glass.scrolled {
        background: rgba(6,78,59,0.95) !important;
        box-shadow: 0 8px 28px -6px rgba(6,78,59,0.4);
}
.navbar-glass .navbar-nav .nav-link { position:relative; padding: .65rem 1rem; }
.navbar-glass .navbar-nav .nav-link::after {
        content:""; position:absolute; left:1rem; right:1rem; bottom:.4rem; height:2px; background:var(--gradient-accent); opacity:0; transform:scaleX(.4); transition:.35s;
}
.navbar-glass .navbar-nav .nav-link:hover::after, .navbar-glass .navbar-nav .nav-link.active::after { opacity:1; transform:scaleX(1); }

/* Mega dropdown */
.mega-dropdown { min-width: 480px; background: #ffffff; border:1px solid #e2e8f0; }
.mega-dropdown .dropdown-item { font-size:.8rem; line-height:1.2; }
.mega-dropdown .dropdown-item:hover { background:#f1f5f9; }
.icon-badge { display:inline-flex; width:36px; height:36px; align-items:center; justify-content:center; border-radius:12px; font-size:1rem; }
.icon-badge.sm { width:32px; height:32px; font-size:.85rem; }

/* CTA button */
.btn-gradient-cta { background: var(--gradient-primary); color:#fff; border:none; box-shadow:0 6px 18px -6px rgba(16,185,129,0.6); }
.btn-gradient-cta:hover { filter:brightness(1.1); transform: translateY(-2px); box-shadow:0 8px 25px -6px rgba(16,185,129,0.8); }

/* Background gradients */
.bg-gradient-green { background: var(--gradient-primary) !important; }

/* Hero stats */
.hero-stat {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    text-align: center;
    transition: all 0.3s ease;
}

.hero-stat:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
}

/* Section helpers */
.section { padding: 90px 0; position:relative; }
.pt-6 { padding-top: 6rem !important; }
.section-heading { max-width:760px; margin:0 auto; }
.section-title { font-weight:700; font-size: clamp(1.75rem,2.2vw + 1rem,2.6rem); background:linear-gradient(135deg,#064e3b,#047857,#10b981); -webkit-background-clip:text; background-clip:text; color:transparent; }
.section-subtitle { color:#6b7280; font-size: .95rem; letter-spacing:.5px; }

/* Eco-friendly background variations */
.bg-soft-radial { background: radial-gradient(circle at 25% 20%,#ecfdf5,transparent 70%), radial-gradient(circle at 85% 65%,#d1fae5,transparent 60%), #f0fdf4; }

/* Client logos new grid */
.client-logo-tile { background:#fff; border:1px solid #d1fae5; border-radius:18px; padding:26px; display:flex; align-items:center; justify-content:center; height:110px; transition:.4s; position:relative; overflow:hidden; }
.client-logo-tile::before { content:""; position:absolute; inset:0; background:var(--gradient-primary); opacity:0; transition:.5s; }
.client-logo-tile img { max-height:80px; filter:grayscale(100%) contrast(1.1); opacity:.65; transition:.45s; position:relative; z-index:2; }
.client-logo-tile:hover { transform: translateY(-6px); box-shadow:0 18px 40px -16px rgba(16,185,129,0.3); border-color: #10b981; }
.client-logo-tile:hover::before { opacity:.12; }
.client-logo-tile:hover img { filter:grayscale(0%) contrast(1) brightness(1.1); opacity:1; }
.client-logos-grid { --bs-gutter-y:2rem; }

/* Feature stack */
.feature-stack { display:flex; flex-direction:column; gap:1.6rem; }
.feature-line { display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.25rem; border-radius:18px; background: linear-gradient(135deg,#ffffff, #ecfdf5); border:1px solid #d1fae5; box-shadow:0 4px 14px -6px rgba(16,185,129,0.15); transition:.4s; }
.feature-line:hover { transform: translateX(6px); box-shadow:0 10px 30px -8px rgba(16,185,129,0.25); border-color: #10b981; }
.icon-circle { width:52px; height:52px; border-radius:16px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; color:#fff; }
.gradient-green { background:linear-gradient(135deg,#10b981,#059669); }
.gradient-blue { background:linear-gradient(135deg,#0891b2,#0e7490); }
.gradient-amber { background:linear-gradient(135deg,#eab308,#ca8a04); }
.feature-title { font-size:1.05rem; font-weight:600; margin-bottom:.25rem; color:#064e3b; }
.feature-text { font-size:.9rem; color:#6b7280; margin:0; }

/* Glass cards */
.glass-card { background: rgba(255,255,255,0.85); border:1px solid #d1fae5; border-radius:22px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position:relative; overflow:hidden; transition:.5s; }
.glass-card::after { content:""; position:absolute; inset:0; background: linear-gradient(135deg,rgba(16,185,129,0.08),rgba(52,211,153,0.12)); opacity:0; transition:.5s; }
.glass-card:hover { transform: translateY(-6px); box-shadow:0 18px 42px -16px rgba(16,185,129,0.3); border-color: #10b981; }
.glass-card:hover::after { opacity:1; }
.icon-xl { width:70px; height:70px; display:flex; align-items:center; justify-content:center; border-radius:22px; font-size:2rem; position:relative; }
.gradient-outline-blue { background: linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg,#0891b2,#0e7490) border-box; border:2px solid transparent; color:#0891b2; }
.gradient-outline-green { background: linear-gradient(#fff,#fff) padding-box, var(--gradient-primary) border-box; border:2px solid transparent; color:#10b981; }

/* Accent ribbon */
.accent-ribbon { background: var(--gradient-hero); padding:1rem 1.4rem; border-radius:20px; color:#fff; font-size:.75rem; letter-spacing:1px; display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; }
.gradient-border { border:2px solid transparent; background: var(--gradient-hero) padding-box, var(--gradient-accent) border-box; }
.tracking-wide { letter-spacing:2px; }

/* Comparison cards */
.bg-alt-layer { background: linear-gradient(180deg,#f0fdf4,#ecfdf5); }
.compare-card { height:100%; background:#fff; border:1px solid #d1fae5; border-radius:28px; overflow:hidden; box-shadow:0 6px 18px -8px rgba(16,185,129,0.15); transition:.5s; display:flex; flex-direction:column; }
.compare-card:hover { transform: translateY(-8px); box-shadow:0 18px 48px -18px rgba(15,23,42,0.28); }
.compare-header { padding:1.1rem 1.4rem; border-bottom:1px solid #e2e8f0; position:relative; }
.compare-body { padding:1.4rem 1.6rem 1.8rem; flex:1; display:flex; flex-direction:column; }
.gradient-blue-soft { background: linear-gradient(135deg,#eff6ff,#dbeafe); }
.gradient-green-soft { background: linear-gradient(135deg,#ecfdf5,#d1fae5); }
.icon-list { list-style:none; padding:0; margin:0 0 1rem; font-size:.9rem; display:flex; flex-direction:column; gap:.55rem; }
.icon-list li { display:flex; align-items:center; gap:.6rem; color:#334155; }
.icon-list i { color:#10b981; font-size:.9rem; width:14px; text-align:center; }

/* CTA gradient section */
.cta-gradient { background: linear-gradient(135deg,#064e3b,#047857 35%,#10b981); position:relative; }
.cta-shape { position:absolute; border-radius:50%; filter: blur(60px); opacity:.25; animation: ctaFloat 14s ease-in-out infinite; }
.cta-shape-1 { width:360px; height:360px; background:#22d3ee; top:-120px; left:-80px; }
.cta-shape-2 { width:340px; height:340px; background:#34d399; bottom:-140px; right:-100px; animation-delay:-5s; }
@keyframes ctaFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(60px);} }

/* Reveal animation utility */
.reveal { opacity:0; transform: translateY(30px); transition: .9s cubic-bezier(.19,1,.22,1); }
.reveal.revealed { opacity:1; transform: translateY(0); }

/* Icon list adjustments on dark backgrounds */
.cta-gradient .icon-list i { color:#fff; }

/* Responsive adjustments */
@media (max-width: 992px) {
    .mega-dropdown { min-width:100%; }
    .navbar-glass .navbar-nav .nav-link::after { display:none; }
}
@media (max-width: 768px) {
    .section { padding:70px 0; }
    .client-logo-tile { height:100px; padding:20px; }
}
@media (max-width: 576px) {
    .section { padding:60px 0; }
    .feature-line { padding:.85rem 1rem; }
    .icon-circle { width:46px; height:46px; font-size:1.1rem; }
}

/* ========================= */
/* Generic Page Hero        */
/* ========================= */
.page-hero { position:relative; padding:140px 0 90px; overflow:hidden; background: linear-gradient(135deg,#0f172a,#1e3a8a 55%,#0f172a); }
.page-hero .container { position:relative; z-index:2; }
.page-hero h1 { font-weight:700; line-height:1.1; letter-spacing:-.5px; }
.page-hero .lead { max-width:780px; }
.page-hero .shape { position:absolute; border-radius:50%; filter:blur(70px); opacity:.28; animation: floatShape 18s ease-in-out infinite; }
.page-hero .shape.shape-1 { width:420px; height:420px; background:#2563eb; top:-120px; left:-120px; }
.page-hero .shape.shape-2 { width:380px; height:380px; background:#10b981; bottom:-140px; right:-140px; animation-delay:-6s; }
.page-hero.variant-green { background: linear-gradient(135deg,#0f172a,#065f46 55%,#0f172a); }
.page-hero.variant-amber { background: linear-gradient(135deg,#0f172a,#92400e 55%,#0f172a); }
.page-hero.variant-cyan { background: linear-gradient(135deg,#0f172a,#0e7490 55%,#0f172a); }
.breadcrumb-mini { font-size:.75rem; text-transform:uppercase; letter-spacing:2px; font-weight:600; color:#94a3b8; margin-bottom:1rem; }

/* Stat grid for subpages */
.stat-grid { display:grid; gap:1.5rem; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); }
.stat-block { text-align:center; padding:1.25rem 1rem; background: linear-gradient(135deg,#ffffff,#f1f5f9); border:1px solid #e2e8f0; border-radius:18px; position:relative; overflow:hidden; }
.stat-block::after { content:""; position:absolute; inset:0; background:linear-gradient(135deg,#2563eb,#10b981); opacity:0; transition:.5s; }
.stat-block:hover::after { opacity:.06; }
.stat-block .stat-value { font-size:1.8rem; }
.stat-block .label { font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:#64748b; font-weight:600; }

/* Table enhancements */
table.table-hover tbody tr { transition:.3s; }
table.table-hover tbody tr:hover { background:#f1f5f9; }

/* Utility modifiers */
.rounded-4 { border-radius:1.25rem!important; }
.rounded-3 { border-radius:1rem!important; }

/* Placeholder visual improvement */
.placeholder-box { background: linear-gradient(135deg,#eef2f7,#e2e8f0); border:1px dashed #cbd5e1; border-radius:20px; }

@media (max-width: 992px) {
    .page-hero { padding:120px 0 70px; }
}
@media (max-width: 576px) {
    .page-hero { padding:110px 0 60px; }
    .page-hero h1 { font-size:2.1rem; }
}

/* Navigation Styles */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    padding:0;
}

.navbar-nav .nav-link {
    font-weight: 500;
    margin: 0 0.5rem;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: #ffd700 !important;
}

.dropdown-menu {
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Hero Section */
.hero-slide {
    position: relative;
    overflow: hidden;
}

.hero-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.3);
    z-index: 1;
}

.hero-slide .container {
    position: relative;
    z-index: 2;
}

/* Card Styles */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1) !important;
}

/* Client Logos */
.client-logo {
    transition: all 0.3s ease;
}

.client-logo:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}

.client-logo img {
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}

.client-logo:hover img {
    opacity: 1 !important;
    filter: grayscale(0%);
}

/* Feature Items */
.feature-item {
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 8px;
}

.feature-item:hover {
    background-color: #f8f9fa;
    transform: translateX(10px);
}

.feature-icon {
    min-width: 60px;
}

/* Buttons */
.btn {
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #3b82f6);
    border: none;
}

.btn-success {
    background: linear-gradient(135deg, var(--secondary-color), #059669);
    border: none;
}

/* Sections */
.section-padding {
    padding: 80px 0;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Gallery Styles */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
}

.gallery-item img {
    transition: transform 0.3s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

/* Portfolio filters & items enhancements */
.portfolio-filters .btn {
    border-radius: 30px;
    font-size: .7rem;
    letter-spacing:1px;
    text-transform: uppercase;
    font-weight:600;
    padding:.55rem 1.05rem;
}
.portfolio-filters .btn.active {
    background: linear-gradient(135deg,var(--primary-color),var(--secondary-color));
    color:#fff;
    border-color:transparent;
    box-shadow:0 6px 18px -6px rgba(37,99,235,0.55);
}
.portfolio-item { transition: opacity .45s ease, transform .45s ease; }
.portfolio-item.is-hiding { opacity:0!important; transform: scale(.92)!important; pointer-events:none; }
.portfolio-item.is-showing { opacity:1; transform: scale(1); }


/* Form Styles */
.form-control {
    border-radius: 6px;
    border: 2px solid #e2e8f0;
    padding: 0.75rem 1rem;
    transition: border-color 0.3s ease;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.25);
}

/* FAQ Styles */
.accordion-button {
    font-weight: 500;
    background-color: #f8f9fa;
}

.accordion-button:not(.collapsed) {
    background-color: var(--primary-color);
    color: white;
}

/* Footer */
footer {
    background: linear-gradient(135deg, #1f2937, #111827) !important;
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--primary-color);
    transform: translateY(-3px);
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .display-4 {
        font-size: 2.5rem;
    }
    
    .hero-slide {
        min-height: 70vh !important;
    }
    
    .client-logo {
        margin-bottom: 1rem;
    }
}

@media (max-width: 576px) {
    .display-4 {
        font-size: 2rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    .feature-item:hover {
        transform: none;
    }
}

/* Loading Animation */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Utility Classes */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color), #3b82f6) !important;
}

.bg-gradient-success {
    background: linear-gradient(135deg, var(--secondary-color), #059669) !important;
}

.shadow-custom {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #1d4ed8;
}

/* ========================= */
/* Enhanced Hero Redesign    */
/* ========================= */
.hero-wrapper {
    position: relative;
    min-height: 100vh;
    background: radial-gradient(circle at 20% 20%, rgba(16,185,129,0.3), transparent 60%),
                radial-gradient(circle at 80% 60%, rgba(52,211,153,0.25), transparent 55%),
                linear-gradient(135deg,#064e3b,#065f46 55%, #064e3b);
    overflow: hidden;
}

.hero-gradient-overlay {
    position: absolute; inset:0;
    background: linear-gradient(180deg, rgba(6,78,59,0.6) 0%, rgba(6,78,59,0.85) 65%, #064e3b 100%);
    pointer-events: none;
    z-index: 1;
}

.hero-shape { position:absolute; border-radius:50%; filter: blur(70px); opacity:0.35; animation: floatShape 14s ease-in-out infinite; }
.hero-shape-1 { width:520px; height:520px; background: #10b981; top:-120px; left:-160px; }
.hero-shape-2 { width:480px; height:480px; background: #34d399; bottom:-140px; right:-120px; animation-delay: -4s; }

@keyframes floatShape { 0%,100% { transform: translateY(0) scale(1);} 50% { transform: translateY(60px) scale(1.08);} }

.hero-carousel { position:relative; z-index:2; }
.hero-slide.advanced { min-height: 100vh; padding: 140px 0 120px; }

.hero-pretitle { opacity:0; transform: translateY(-10px); animation: fadeIn 0.9s ease forwards 0.3s; }
@keyframes fadeIn { to { opacity:1; transform: translateY(0);} }

.hero-title { position:relative; line-height:1.15; }
.hero-title .typed-line { font-size: clamp(1.2rem, 2.2vw + 0.8rem, 2.4rem); font-weight:600; }

.typed-rotate { color: #fff; border-right: 3px solid #ffffff80; padding-right:6px; animation: caret 1s step-end infinite; }
@keyframes caret { 50% { border-color: transparent; } }

.hero-lead { max-width: 660px; }

/* Glowing buttons */
.btn-glow-primary { background: var(--gradient-primary); color:#fff; border:1px solid #34d399; box-shadow:0 0 0 0 rgba(16,185,129,0.7); animation: pulseGlow 3.2s infinite; }
.btn-glow-accent { background: var(--gradient-accent); color:#fff; border:1px solid #6ee7b7; box-shadow:0 0 0 0 rgba(52,211,153,0.65); animation: pulseGlow 3.6s infinite; }
.btn-glow-cyan { background: linear-gradient(135deg,#0891b2,#0e7490); color:#fff; border:1px solid #22d3ee; box-shadow:0 0 0 0 rgba(34,211,238,0.55); animation: pulseGlow 3.8s infinite; }

@keyframes pulseGlow { 0% { box-shadow:0 0 0 0 rgba(255,255,255,0.35);} 70% { box-shadow:0 0 0 18px rgba(255,255,255,0);} 100% { box-shadow:0 0 0 0 rgba(255,255,255,0);} }

.btn-glow-primary:hover, .btn-glow-accent:hover, .btn-glow-cyan:hover { transform: translateY(-3px); filter: brightness(1.08); }

/* Hero stats */
.hero-stats { margin-top: 1.25rem; }
.stat-item { min-width: 110px; }
.stat-value { font-size: 2rem; font-weight:700; background: linear-gradient(135deg,#fff,#cbd5e1); -webkit-background-clip:text; background-clip:text; color:transparent; position:relative; }
.stat-label { font-size: .8rem; text-transform: uppercase; letter-spacing:1px; color:#94a3b8; margin-top: .25rem; }

/* Device mockup */
.hero-device-mockup { position:relative; width:100%; max-width: 420px; aspect-ratio: 1/1; margin:0 auto; }
.mockup-ring { position:absolute; border: 2px solid rgba(255,255,255,0.15); border-radius:50%; animation: spinSlow 22s linear infinite; }
.mockup-ring.ring-1 { inset:10%; }
.mockup-ring.ring-2 { inset:0; animation-direction: reverse; animation-duration: 28s; }
@keyframes spinSlow { to { transform: rotate(360deg);} }
.mockup-icon-wrapper { position:absolute; inset:22%; background: linear-gradient(135deg,#1e3a8a,#2563eb); display:flex; align-items:center; justify-content:center; border-radius:24px; box-shadow:0 10px 30px -5px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.12); }
.mockup-icon-wrapper i { font-size:6rem; color:#ffffffaa; }

/* Smart grid visual */
.hero-visual.smart-grid { position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin: 0 auto; }
.pulse-lines { position:absolute; inset:15%; border:1px dashed rgba(255,255,255,0.2); border-radius:16px; animation: pulseBox 6s ease-in-out infinite; }
@keyframes pulseBox { 0%,100% { transform: scale(0.95);} 50% { transform: scale(1);} }
.pulse-node { position:absolute; width:18px; height:18px; background:#10b981; border-radius:50%; box-shadow:0 0 12px #10b981, 0 0 30px #10b98180; animation: pulseNode 2.8s ease-in-out infinite; }
.pulse-node.node-1 { top:14%; left:20%; animation-delay:0s; }
.pulse-node.node-2 { bottom:22%; right:18%; animation-delay:.9s; }
.pulse-node.node-3 { top:35%; right:12%; animation-delay:1.6s; }
@keyframes pulseNode { 0%,100% { transform: scale(.8); opacity:.7;} 50% { transform: scale(1.25); opacity:1;} }
.main-chip { position:absolute; inset:35%; background:#0f172a; display:flex; align-items:center; justify-content:center; font-size:4rem; border-radius:20px; color:#38bdf8; box-shadow:0 6px 20px -4px #0ea5e980,0 0 0 1px #1e40af; }

/* Installation visual */
.install-visual { position:relative; width:100%; max-width:420px; aspect-ratio:1/1; margin:0 auto; }
.gear { position:absolute; border:4px solid rgba(255,255,255,0.25); border-radius:50%; animation: gearSpin 24s linear infinite; }
.gear-lg { inset:5%; }
.gear-sm { inset:28%; animation-direction: reverse; animation-duration: 18s; }
@keyframes gearSpin { to { transform: rotate(360deg);} }
.shield-icon { position:absolute; inset:38%; background: linear-gradient(135deg,#0ea5e9,#06b6d4); display:flex; align-items:center; justify-content:center; border-radius:24px; box-shadow:0 10px 25px -6px #06b6d480,0 0 0 1px rgba(255,255,255,0.15); }
.shield-icon i { font-size:3.5rem; color:#ffffffcc; }

/* Mini timeline */
.mini-timeline .step { position:relative; padding-left:36px; }
.mini-timeline .step-index { position:absolute; left:0; top:0; width:28px; height:28px; border-radius:8px; background:#1e3a8a; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:600; box-shadow:0 0 0 1px rgba(255,255,255,0.15),0 4px 10px -2px rgba(0,0,0,0.4); }
.mini-timeline .step-label { font-size:.8rem; letter-spacing:1px; text-transform:uppercase; color:#94a3b8; font-weight:600; }

/* Scroll cue */
.scroll-cue { position:absolute; left:50%; bottom:30px; transform:translateX(-50%); z-index:3; animation: fadeIn 1.2s ease .8s forwards; opacity:0; }
.scroll-cue .mouse { width:26px; height:46px; border:2px solid rgba(255,255,255,0.6); border-radius:16px; position:relative; display:block; }
.scroll-cue .wheel { position:absolute; top:8px; left:50%; width:6px; height:10px; margin-left:-3px; background:#fff; border-radius:4px; animation: wheel 2.4s ease-in-out infinite; }
@keyframes wheel { 0% { opacity:0; transform: translate(-50%,0);} 30% { opacity:1;} 100% { opacity:0; transform: translate(-50%,16px);} }

/* Hero theme overlay variants (updated to eco-friendly green tones) */
[data-hero-theme="indigo"] .hero-slide { background: linear-gradient(135deg,rgba(6,78,59,0.7),rgba(4,120,87,0.65)); }
[data-hero-theme="magenta"] .hero-slide { background: linear-gradient(135deg,rgba(21,128,61,0.65),rgba(34,197,94,0.6)); }
[data-hero-theme="cyan"] .hero-slide { background: linear-gradient(135deg,rgba(8,145,178,0.55),rgba(6,182,212,0.5)); }

/* Responsive tweaks */
@media (max-width: 1200px) {
    .hero-device-mockup, .hero-visual, .install-visual { display:none; }
    .hero-slide.advanced { padding: 120px 0 90px; }
}
@media (max-width: 768px) {
    .hero-slide.advanced { padding: 110px 0 80px; }
    .hero-stats { gap:2rem; }
    .stat-item { flex:1 0 90px; }
}
@media (max-width: 576px) {
    .hero-title { font-size:2.2rem; }
    .hero-wrapper { min-height: auto; }
}

/* Additional Eco-Friendly Enhancements */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Green pulse animation for eco elements */
@keyframes ecoGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(16,185,129,0.5), 0 0 10px rgba(16,185,129,0.3); }
    50% { box-shadow: 0 0 20px rgba(16,185,129,0.8), 0 0 30px rgba(16,185,129,0.4); }
}

.eco-glow {
    animation: ecoGlow 3s ease-in-out infinite;
}

/* Enhanced navbar brand with eco colors */
.navbar-brand {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 700;
    text-shadow: none;
}

/* Page hero variants with green theme */
.page-hero {
    background: var(--gradient-hero);
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}

.page-hero.variant-cyan {
    background: linear-gradient(135deg, #047857, #0891b2, #0e7490);
}

.page-hero .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.3;
}

.page-hero .shape-1 {
    width: 300px;
    height: 300px;
    background: #34d399;
    top: -50px;
    left: -100px;
}

.page-hero .shape-2 {
    width: 250px;
    height: 250px;
    background: #10b981;
    bottom: -50px;
    right: -80px;
}

/* Responsive tweaks */
@media (max-width: 1200px) {
    .hero-device-mockup, .hero-visual, .install-visual { display:none; }
    .hero-slide.advanced { padding: 120px 0 90px; }
}
@media (max-width: 768px) {
    .hero-slide.advanced { padding: 110px 0 80px; }
    .hero-stats { gap:2rem; }
    .stat-item { flex:1 0 90px; }
}
@media (max-width: 576px) {
    .hero-title { font-size:2.2rem; }
    .hero-wrapper { min-height: auto; }
    .hero-slide.advanced { min-height: auto; }
}