:root {
    --primary: #e63946;
    --primary-glow: rgba(230,57,70,0.3);
    --accent: #f4a261;
    --dark: #0b0f1a;
    --dark2: #111827;
    --dark3: #1e293b;
    --light: #f1f5f9;
    --white: #ffffff;
    --glass: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.1);
    --text: #cbd5e1;
    --text-bright: #f8fafc;
    --gradient: linear-gradient(135deg, #e63946, #f4a261);
    --shadow: 0 8px 32px rgba(0,0,0,0.3);
    --transition: all 0.4s cubic-bezier(0.4,0,0.2,1);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:'Outfit',sans-serif; background:var(--dark); color:var(--text); line-height:1.7; overflow-x:hidden; }
h1,h2,h3 { color:var(--text-bright); font-weight:700; }
a { text-decoration:none; color:inherit; }

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

/* Particles Canvas */
#particles-canvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }

/* Reveal Animation */
.reveal { opacity:0; transform:translateY(40px); transition:opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity:1; transform:translateY(0); }

/* Navbar */
.navbar { position:fixed; top:0; width:100%; z-index:1000; padding:1rem 5%; display:flex; justify-content:space-between; align-items:center; background:rgba(11,15,26,0.85); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); transition:var(--transition); }
.navbar.scrolled { padding:0.7rem 5%; background:rgba(11,15,26,0.95); box-shadow:0 4px 30px rgba(0,0,0,0.5); }
.logo { font-size:1.6rem; font-weight:900; color:var(--accent); text-transform:uppercase; letter-spacing:1px; }
.logo span { color:var(--primary); }
.nav-links { display:flex; gap:1.5rem; }
.nav-links a { color:var(--text); font-weight:500; font-size:1rem; padding:0.5rem 0; position:relative; transition:var(--transition); }
.nav-links a::after { content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--gradient); transition:var(--transition); }
.nav-links a:hover, .nav-links a.active { color:var(--text-bright); }
.nav-links a:hover::after, .nav-links a.active::after { width:100%; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001; }
.hamburger span { width:28px; height:3px; background:var(--text-bright); border-radius:3px; transition:var(--transition); }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(6px,6px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(6px,-6px); }

/* Hero */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:120px 5% 60px; background:linear-gradient(180deg, rgba(11,15,26,0.7), rgba(11,15,26,0.9)), url('garage_hero.png') center/cover no-repeat; z-index:1; }
.hero-content { position:relative; z-index:2; max-width:800px; }
.hero-badge { display:inline-flex; align-items:center; gap:0.5rem; background:var(--glass); border:1px solid var(--glass-border); padding:0.6rem 1.5rem; border-radius:50px; font-size:0.95rem; color:var(--accent); margin-bottom:1.5rem; backdrop-filter:blur(10px); }
.hero h1 { font-size:3.8rem; font-weight:900; line-height:1.1; margin-bottom:1rem; text-transform:uppercase; letter-spacing:2px; color:var(--text-bright); }
.hero p { font-size:1.2rem; color:var(--text); margin-bottom:2rem; max-width:650px; margin-left:auto; margin-right:auto; }
.hero-btns { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }

/* Page Hero (Sub Pages) */
.page-hero { position:relative; min-height:50vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:120px 5% 60px; z-index:1; }
.page-hero-content { position:relative; z-index:2; max-width:700px; }
.page-hero-content h1 { font-size:3.2rem; font-weight:900; text-transform:uppercase; letter-spacing:2px; margin-bottom:1rem; }
.page-hero-content p { font-size:1.15rem; color:var(--text); margin-bottom:1.5rem; }
.page-hero-nav { display:flex; align-items:center; justify-content:center; gap:0.6rem; font-size:0.95rem; color:var(--text); }
.breadcrumb-link { color:var(--accent); transition:var(--transition); }
.breadcrumb-link:hover { color:var(--primary); }
.breadcrumb-active { color:var(--text-bright); font-weight:600; }


/* Buttons */
.btn { display:inline-flex; align-items:center; gap:0.6rem; padding:0.9rem 2rem; border-radius:50px; font-size:1rem; font-weight:600; cursor:pointer; border:none; transition:var(--transition); font-family:'Outfit',sans-serif; }
.btn:hover { transform:translateY(-3px); box-shadow:0 8px 25px rgba(0,0,0,0.3); }
.btn-primary { background:var(--gradient); color:var(--white); }
.btn-whatsapp { background:#25D366; color:var(--white); }
.btn-outline { background:transparent; color:var(--text-bright); border:2px solid var(--glass-border); }
.btn-outline:hover { border-color:var(--primary); background:var(--primary-glow); }
.btn-sm { padding:0.6rem 1.5rem; font-size:0.9rem; }
.btn-full { width:100%; justify-content:center; }

/* Scroll Indicator */
.scroll-indicator { position:absolute; bottom:30px; display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:var(--text); z-index:2; animation:float 2s ease-in-out infinite; }
.mouse { width:26px; height:40px; border:2px solid var(--text); border-radius:15px; display:flex; justify-content:center; padding-top:6px; }
.wheel { width:4px; height:8px; background:var(--primary); border-radius:4px; animation:scroll 2s infinite; }
.scroll-indicator span { font-size:0.75rem; text-transform:uppercase; letter-spacing:2px; }
@keyframes scroll { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* Counters */
.counters { display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; padding:4rem 10%; background:var(--dark2); position:relative; z-index:1; border-top:1px solid var(--glass-border); border-bottom:1px solid var(--glass-border); }
.counter-item { text-align:center; padding:2rem 1rem; }
.counter-icon { font-size:2rem; color:var(--primary); margin-bottom:1rem; }
.counter-item h2 { font-size:2.8rem; color:var(--accent); }
.counter-item p { color:var(--text); font-size:1rem; margin-top:0.5rem; }

/* Section Headers */
section { padding:5rem 8%; position:relative; z-index:1; }
.section-header { text-align:center; margin-bottom:3rem; }
.section-tag { display:inline-flex; align-items:center; gap:0.5rem; background:var(--primary-glow); color:var(--primary); padding:0.4rem 1.2rem; border-radius:50px; font-size:0.85rem; font-weight:600; margin-bottom:1rem; text-transform:uppercase; letter-spacing:1px; }
.section-header h2, .detail-header h2 { font-size:2.5rem; margin-bottom:0.8rem; }
.section-header p, .detail-header p { color:var(--text); max-width:600px; margin:0 auto; font-size:1.05rem; }
.detail-header { text-align:center; margin-bottom:3rem; }

/* Services Tabs */
.services-tabs { display:flex; justify-content:center; gap:0.8rem; margin-bottom:2.5rem; flex-wrap:wrap; }
.tab-btn { padding:0.7rem 1.8rem; border-radius:50px; border:1px solid var(--glass-border); background:var(--glass); color:var(--text); font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:500; cursor:pointer; transition:var(--transition); display:flex; align-items:center; gap:0.5rem; }
.tab-btn:hover, .tab-btn.active { background:var(--gradient); color:var(--white); border-color:transparent; transform:translateY(-2px); }

/* Category Cards */
.services-category-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.category-card { position:relative; border-radius:20px; overflow:hidden; height:320px; display:block; }
.category-card img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.category-card:hover img { transform:scale(1.1); }
.category-overlay { position:absolute; inset:0; background:linear-gradient(180deg, transparent 20%, rgba(11,15,26,0.9) 100%); display:flex; flex-direction:column; justify-content:flex-end; padding:1.5rem; transition:var(--transition); }
.category-overlay i { font-size:2rem; color:var(--primary); margin-bottom:0.5rem; }
.category-overlay h3 { font-size:1.3rem; margin-bottom:0.3rem; }
.category-overlay p { font-size:0.9rem; color:var(--text); margin-bottom:0.5rem; }
.explore-btn { color:var(--accent); font-weight:600; font-size:0.9rem; display:flex; align-items:center; gap:0.3rem; }
.explore-btn i { transition:transform 0.3s; }
.category-card:hover .explore-btn i { transform:translateX(5px); }

/* Service Detail Sections */
.service-detail { background:var(--dark); }
.alt-bg { background:var(--dark2); }
.detail-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:1.5rem; }
.detail-card { background:var(--glass); border:1px solid var(--glass-border); border-radius:16px; padding:2rem; text-align:center; transition:var(--transition); backdrop-filter:blur(10px); }
.detail-card:hover { transform:translateY(-8px); border-color:var(--primary); box-shadow:0 10px 40px var(--primary-glow); }
.detail-card-icon { width:60px; height:60px; margin:0 auto 1rem; border-radius:50%; background:var(--primary-glow); display:flex; align-items:center; justify-content:center; font-size:1.4rem; color:var(--primary); }
.detail-card h3 { font-size:1.2rem; margin-bottom:0.5rem; }
.detail-card p { font-size:0.92rem; color:var(--text); margin-bottom:1rem; }


/* About Section */
.about-section { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; padding:5rem 8%; background:var(--dark2); }
.about-content h2 { font-size:2.3rem; margin-bottom:1rem; }
.about-content > p { margin-bottom:1.5rem; }
.about-features { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; }
.about-feature { display:flex; align-items:center; gap:0.6rem; font-size:0.95rem; }
.about-feature i { color:#22c55e; font-size:1.1rem; }
.about-image { position:relative; }
.about-image img { width:100%; border-radius:20px; box-shadow:var(--shadow); }
.experience-badge { position:absolute; bottom:-20px; right:-20px; width:120px; height:120px; background:var(--gradient); border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; box-shadow:0 8px 30px var(--primary-glow); }
.exp-number { font-size:2.5rem; font-weight:900; color:var(--white); line-height:1; }
.exp-text { font-size:0.9rem; color:var(--white); font-weight:600; }

/* Offer Banner */
.offer-banner { background:var(--gradient); text-align:center; padding:4rem 8% !important; }
.offer-banner h2 { font-size:2rem; color:var(--white); margin-bottom:0.8rem; }
.offer-banner .highlight { font-size:2.5rem; font-weight:900; }
.offer-banner p { color:rgba(255,255,255,0.9); font-size:1.1rem; margin-bottom:1.5rem; }
.offer-banner .btn { background:var(--dark); color:var(--white); margin:0 auto; }

/* Contact */
.contact-section { background:var(--dark); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; }
.contact-info { display:flex; flex-direction:column; gap:1rem; }
.contact-card { display:flex; gap:1rem; align-items:flex-start; padding:1.2rem; background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; transition:var(--transition); }
.contact-card:hover { border-color:var(--primary); }
.contact-card-icon { width:45px; height:45px; min-width:45px; border-radius:50%; background:var(--primary-glow); display:flex; align-items:center; justify-content:center; color:var(--primary); font-size:1.1rem; }
.contact-card h3 { font-size:1rem; margin-bottom:0.3rem; }
.contact-card p { font-size:0.9rem; color:var(--text); }
.contact-card a { color:var(--accent); transition:var(--transition); }
.contact-card a:hover { color:var(--primary); }
.map-container { border-radius:16px; overflow:hidden; min-height:400px; border:1px solid var(--glass-border); }
.map-container iframe { width:100%; height:100%; min-height:400px; }

/* WhatsApp Float */
.whatsapp-float { position:fixed; bottom:25px; right:25px; width:60px; height:60px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; color:white; z-index:999; box-shadow:0 4px 15px rgba(37,211,102,0.4); transition:var(--transition); animation:pulse-green 2s infinite; }
.whatsapp-float:hover { transform:scale(1.1); }
.float-tooltip { display:none; }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,0.4)} 50%{box-shadow:0 0 0 15px rgba(37,211,102,0)} }

/* Back to Top */
.back-to-top { position:fixed; bottom:95px; right:30px; width:45px; height:45px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-border); color:var(--text-bright); font-size:1rem; cursor:pointer; z-index:999; opacity:0; visibility:hidden; transition:var(--transition); backdrop-filter:blur(10px); }
.back-to-top.visible { opacity:1; visibility:visible; }
.back-to-top:hover { background:var(--primary); border-color:var(--primary); transform:translateY(-3px); }

/* Footer */
.footer { background:var(--dark2); border-top:1px solid var(--glass-border); padding:4rem 8% 0; position:relative; z-index:1; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1.5fr; gap:3rem; padding-bottom:3rem; }
.footer-col .logo { margin-bottom:1rem; }
.footer-col p { font-size:0.92rem; color:var(--text); margin-bottom:0.5rem; }
.footer-col p i { color:var(--primary); margin-right:0.5rem; width:16px; }
.footer-col h3 { color:var(--text-bright); margin-bottom:1rem; font-size:1.1rem; }
.footer-col a { display:block; color:var(--text); padding:0.3rem 0; font-size:0.92rem; transition:var(--transition); }
.footer-col a:hover { color:var(--primary); padding-left:5px; }
.social-links { display:flex; gap:0.8rem; margin-top:1rem; }
.social-links a { width:40px; height:40px; border-radius:50%; background:var(--glass); border:1px solid var(--glass-border); display:flex; align-items:center; justify-content:center; color:var(--text); font-size:1rem; transition:var(--transition); }
.social-links a:hover { background:var(--gradient); color:var(--white); border-color:transparent; transform:translateY(-3px); }
.footer-bottom { border-top:1px solid var(--glass-border); padding:1.5rem 0; text-align:center; }
.footer-bottom p { font-size:0.85rem; color:var(--text); }

/* Responsive */
@media(max-width:1024px) {
    .services-category-cards { grid-template-columns:repeat(2,1fr); }
    .counters { grid-template-columns:repeat(2,1fr); }
    .about-section { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr 1fr; }
}
@media(max-width:768px) {
    .nav-links { position:fixed; top:0; right:-100%; width:70%; height:100vh; background:var(--dark2); flex-direction:column; padding:100px 2rem 2rem; transition:var(--transition); border-left:1px solid var(--glass-border); }
    .nav-links.open { right:0; }
    .hamburger { display:flex; }
    .hero h1 { font-size:2.4rem; }
    .hero p { font-size:1rem; }
    section { padding:3rem 5%; }
    .services-category-cards { grid-template-columns:1fr; }
    .category-card { height:240px; }
    .detail-grid { grid-template-columns:1fr; }
    .contact-grid { grid-template-columns:1fr; }
    .counters { grid-template-columns:1fr 1fr; padding:3rem 5%; }
    .counter-item h2 { font-size:2rem; }
    .about-features { grid-template-columns:1fr; }
    .footer-grid { grid-template-columns:1fr; }
    .section-header h2, .detail-header h2 { font-size:1.8rem; }
    .hero-btns { flex-direction:column; align-items:center; }
    .experience-badge { bottom:-10px; right:10px; width:90px; height:90px; }
    .exp-number { font-size:1.8rem; }
    .page-hero-content h1 { font-size:2.2rem; }
    .page-hero { min-height:40vh; padding:100px 5% 40px; }
    .services-category-cards[style] { grid-template-columns:1fr !important; }
}