:root {
    --bg-primary: #05050f;
    --bg-secondary: #0a0a1a;
    --bg-tertiary: #020208;
    --text-primary: #d0d0e0;
    --text-secondary: #6a6a8a;
    --border-color: rgba(255, 255, 255, 0.04);
    --nav-bg: rgba(5, 5, 15, 0.95);
    --card-bg: #0d0d24;
    --input-bg: #0a0a1a;
    --input-border: #1a1a3a;
}

body {
    color-scheme: dark;
}

.hero-section {
    background: linear-gradient(135deg, #020208 0%, #080818 50%, #0a0a1a 100%);
}

.hero-bg {
    filter: brightness(0.18) saturate(0.6);
}

.hero-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.7) 40%,
        rgba(var(--primary-rgb), 0.08) 100%
    );
}

.header-top {
    background: linear-gradient(135deg, #020208 0%, #0a0a1a 100%);
}

.main-nav {
    border-bottom-color: rgba(255, 255, 255, 0.03);
}

.service-card,
.testimonial-card,
.process-card,
.contact-info-card,
.form-container,
.prefooter-inner,
.faq-accordion .accordion-item,
.faq-accordion .accordion-button {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.service-card:hover,
.testimonial-card:hover,
.process-card:hover,
.contact-info-card:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.06), var(--shadow-lg);
}

.stats-section {
    background: linear-gradient(135deg, #060612 0%, #0a0a1a 50%, #060612 100%);
}

.cta-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-dark) 100%);
}

.footer-modern {
    background: #020208;
}

.footer-wave svg path {
    fill: #020208;
}

.footer-social a {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.04);
}

.footer-social a:hover {
    background: var(--primary-gradient);
    border-color: transparent;
}

.whatsapp-float {
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.2);
}

.back-to-top-btn {
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15);
}

.form-control {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus {
    background: var(--input-bg);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.form-control::placeholder {
    color: var(--text-secondary);
    opacity: 0.4;
}

.contact-social-icons a {
    background: var(--card-bg);
    border-color: var(--input-border);
}

.portfolio-section,
.services-section,
.faq-section,
.contact-section-home,
.page-content,
.prefooter-cta {
    background: var(--bg-primary);
}

.testimonials-section,
.process-section,
.location-section {
    background: var(--bg-secondary);
}

.about-features-list li {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.about-features-list li:hover {
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 16px rgba(var(--primary-rgb), 0.04);
}

.hero-shape-1,
.hero-shape-2 {
    opacity: 0.04;
}

.reveal-scale:hover .stat-number {
    transform: scale(1.05);
}

.stat-card .stat-number {
    transition: transform 0.4s ease;
}

.btn-primary-gradient {
    background: var(--primary-gradient);
}

.btn-primary-gradient:hover {
    background: var(--primary-gradient-hover);
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.3);
}

.btn-submit {
    background: var(--primary-gradient);
}

.btn-submit:hover {
    background: var(--primary-gradient-hover);
    box-shadow: 0 8px 25px rgba(var(--primary-rgb), 0.25);
}

.nav-cta-btn {
    background: var(--primary-gradient);
}

.nav-cta-btn:hover {
    box-shadow: 0 8px 28px rgba(var(--primary-rgb), 0.3);
}

.nav-link:hover .nav-link-text,
.nav-link.active .nav-link-text {
    color: var(--primary-light);
}

.nav-link::before {
    background: var(--primary);
}

.nav-link::after {
    background: var(--primary-gradient);
}

.hamburger:hover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}

.hamburger.active {
    border-color: var(--primary);
}

.hamburger.active .hamburger-line:nth-child(1),
.hamburger.active .hamburger-line:nth-child(3) {
    background: var(--primary);
}

.section-divider {
    background: var(--primary-gradient);
}

.process-card-icon {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-light);
}

.process-card:hover .process-card-icon {
    background: var(--primary-gradient);
    color: #fff;
}

.service-card-icon {
    background: var(--primary-gradient);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.25);
}

.service-card-body .btn {
    background: var(--primary-gradient);
}

.service-card-body .btn:hover {
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.25);
}

.portfolio-tag {
    background: var(--primary-gradient);
}

.benefit-icon {
    background: var(--primary-gradient);
}

.prefooter-btn {
    background: var(--primary-gradient);
}

.prefooter-btn:hover {
    box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.25);
}

.contact-info-card .contact-icon {
    background: var(--primary-gradient);
}

.contact-social-icons a:hover {
    background: var(--primary-gradient);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.2);
}

.header-top-link i {
    color: var(--primary-light);
}

.header-top-social a:hover {
    background: rgba(var(--primary-rgb), 0.15);
}

.hero-stat .hero-stat-number .plus {
    color: var(--primary-light);
}

.hero-badge {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-light);
}

.testimonial-quote {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.testimonial-avatar {
    background: var(--primary-gradient);
}

.faq-accordion .accordion-button:not(.collapsed) {
    color: var(--primary-light);
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    color: var(--primary-light);
}

.footer-link i {
    color: var(--primary-light);
}

.service-features li i {
    color: var(--primary-light);
}

::selection {
    background: var(--primary);
}

::-webkit-scrollbar-thumb {
    background: var(--primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
}

.main-logo::after {
    background: var(--primary-gradient);
}

.hero-typing .typed-text {
    color: var(--primary-light);
}

.hero-typing .typed-text::after {
    color: var(--primary-light);
}