html { scroll-behavior: smooth; }

#navbar.scrolled {
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(51, 65, 85, 0.5);
    box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

.gradient-text {
    background: linear-gradient(135deg, #34d399 0%, #059669 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-bg {
    background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(5, 150, 105, 0.15) 0%, transparent 60%),
                #0F172A;
}

.fade-in {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.feature-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(5, 150, 105, 0.4);
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.1);
}

.pricing-popular {
    background: linear-gradient(180deg, rgba(5, 150, 105, 0.12) 0%, rgba(5, 150, 105, 0.04) 100%);
    border-color: #059669 !important;
    transform: scale(1.03);
}

.stat-number {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: #334155;
    outline: none;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #059669;
    cursor: pointer;
    border: 2px solid #0F172A;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.3);
    transition: box-shadow 0.2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(5, 150, 105, 0.2);
}
input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #059669;
    cursor: pointer;
    border: 2px solid #0F172A;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}
.faq-answer.open {
    max-height: 300px;
}

canvas { max-height: 260px; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e293b; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

.table-row-hover:hover { background: rgba(30, 41, 59, 0.6); }

.badge-green  { background: rgba(5,150,105,0.15); color: #34d399; }
.badge-red    { background: rgba(239,68,68,0.15);  color: #fca5a5; }
.badge-yellow { background: rgba(245,158,11,0.15); color: #fcd34d; }
.badge-blue   { background: rgba(59,130,246,0.15); color: #93c5fd; }
.badge-gray   { background: rgba(100,116,139,0.15);color: #94a3b8; }

@keyframes gradient-border {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
}
.animated-border {
    background: linear-gradient(90deg, #059669, #34d399, #059669);
    background-size: 200% auto;
    animation: gradient-border 3s ease infinite;
}

@media (max-width: 640px) {
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}