/* ==========================================================================
   BENGALURU BATTERY: ULTRA PRO UI
   Theme: Vivid Orange & Deepest Void (MotoGears Inspired)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&family=Rajdhani:wght@500;600;700&display=swap');

:root {
    /* Brand Colors - Ultra Pro Theme */
    --color-amber: #FF6B00; /* Vivid Orange */
    --color-amber-dark: #cc5500;
    --color-onyx: #0B0E14; /* Deepest Void */
    --color-accent: #00D2FF; /* Cyber Blue */
    --color-zinc: #f2f4f8; /* Soft Base Background */
    --color-white: #FFFFFF;
    
    /* Typography */
    --font-body: 'Inter', sans-serif;
    --font-heading: 'Rajdhani', sans-serif;
    
    /* UI Variables & Glaze */
    --shadow-soft: 0 10px 30px rgba(0,0,0,0.08);
    --shadow-glow: 0 5px 20px rgba(255, 107, 0, 0.4);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.05);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.25);
    --glass-light: rgba(255, 255, 255, 0.95);
    --glass-dark: rgba(255, 255, 255, 0.05);
    --radius: 16px;
    --transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --- RESET & BASE --- */
html, body { scroll-behavior: smooth; overflow-x: hidden; }
body { 
    font-family: var(--font-body); 
    background-color: var(--color-zinc); 
    color: #2d3436;
    padding-top: 80px; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility; 
}
body.mobile-nav-active { overflow: hidden; }

/* Typographic Utility Classes */
h1, h2, h3, h4, h5, h6, .font-heading { 
    font-family: var(--font-heading); 
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.fw-black { font-weight: 800; }
.tracking-tight { letter-spacing: -0.05em; }
.tracking-wide { letter-spacing: 0.1em; }
.text-amber { color: var(--color-amber) !important; }
.bg-amber { background-color: var(--color-amber) !important; }
.text-onyx { color: var(--color-onyx) !important; }
.bg-onyx { background-color: var(--color-onyx) !important; }
.bg-zinc { background-color: var(--color-zinc) !important; }
.py-6 { padding-top: 6rem; padding-bottom: 6rem; }
.text-light-muted { color: rgba(255, 255, 255, 0.7) !important; }

/* Retina-Ready Image Optimizations */
img {
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* --- LAYOUT UTILITIES --- */
.min-vh-85 { min-height: 85vh; }
.mt-negative-40 { margin-top: -40px; }
.h-500px { height: 500px; }
.max-w-650 { max-width: 650px; }
.max-w-600 { max-width: 600px; }
.bg-icon-watermark { transform: rotate(25deg); margin: -50px; }
.connection-line { height: 2px; background: linear-gradient(90deg, transparent, var(--color-amber), transparent); opacity: 0.3; z-index: 0; }

/* --- HEADER & NAVIGATION --- */
.premium-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: var(--transition);
}
.premium-header.scrolled { 
    box-shadow: var(--shadow-md); 
    padding-top: 0.5rem; 
    padding-bottom: 0.5rem; 
}

.brand-logo { height: 45px; width: auto; object-fit: contain; transition: var(--transition); }
.logo-hover:hover .brand-logo { transform: scale(1.05); }

.brand-icon-box {
    width: 36px; height: 36px;
    background: var(--color-amber);
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.logo-hover:hover .brand-icon-box { transform: rotate(15deg) scale(1.1); box-shadow: var(--shadow-glow); }

.nav-highlight {
    background-color: rgba(255, 107, 0, 0.1);
    color: var(--color-amber) !important;
    padding: 0.5rem 1rem !important;
    border-radius: 50px;
    border: 1px solid rgba(255, 107, 0, 0.2);
    transition: var(--transition);
}
.nav-highlight:hover { background-color: var(--color-amber); color: var(--color-white) !important; transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.nav-highlight:hover .pulse-icon { color: var(--color-white) !important; }

.link-hover { position: relative; }
.link-hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-amber); transition: 0.3s; }
.link-hover:hover::after { width: 100%; }

/* --- ANIMATIONS & KEYFRAMES --- */
@keyframes pulse-opacity { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse-icon { animation: pulse-opacity 2s infinite; }

@keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0.7); } 70% { box-shadow: 0 0 0 15px rgba(255, 107, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 107, 0, 0); } }
.radar-pulse-btn { animation: pulse-glow 2s infinite; }

@keyframes shimmer { 100% { transform: translateX(100%); } }
.shimmer-bg { position: relative; overflow: hidden; }
.shimmer-bg::after { content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%; background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent); transform: skewX(-20deg); animation: shimmer 3s infinite; }

.krrish-credit .hover-underline-tech { position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--color-amber); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; }
.krrish-link:hover .hover-underline-tech { transform: scaleX(1); transform-origin: left; }
.krrish-link:hover { color: var(--color-amber) !important; text-shadow: 0 0 10px rgba(255,107,0,0.5); }

/* --- MICRO-INTERACTIONS --- */
.hover-lift { transition: var(--transition); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-2xl) !important; }
.hover-lift-subtle { transition: var(--transition); }
.hover-lift-subtle:hover { transform: translateY(-4px); }

/* Group Hovers for Steps */
.group:hover .group-hover-spin { transform: rotate(180deg); transition: 0.5s; }
.group:hover .group-hover-shake { animation: fa-shake 1s ease infinite; }
.group:hover .group-hover-drive { transform: translateX(10px); transition: 0.3s; }
.group:hover .step-bg-glow { opacity: 1; }
.step-bg-glow { 
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
    width: 150px; height: 150px; background: radial-gradient(circle, rgba(255,107,0,0.15) 0%, rgba(255,107,0,0) 70%); 
    opacity: 0; transition: var(--transition); pointer-events: none; z-index: 0; 
}

.spin-hover { transition: 0.5s; }
.stats-pill:hover .spin-hover, .fa-spin-hover:hover { transform: rotate(360deg); }
.bounce-hover { transition: 0.3s; }
.stats-pill:hover .bounce-hover, .service-card-pro:hover .bounce-hover { transform: translateY(-3px); }

/* --- HERO SECTION --- */
.hero-premium { 
    background: linear-gradient(rgba(11,14,20,0.2), rgba(11,14,20,0.5)), var(--bg-url) center center / cover no-repeat;
    background-attachment: fixed;
    position: relative; 
    clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
    overflow: hidden;
}
.hero-glass-card { 
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(16px); 
    -webkit-backdrop-filter: blur(16px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
}

/* --- BUTTONS --- */
.btn { font-family: var(--font-heading); transition: var(--transition); position: relative; overflow: hidden; z-index: 1; }
.btn-amber-solid, .btn-glaze { 
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-dark) 100%);
    color: var(--color-white) !important; 
    border: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(255, 107, 0, 0.3);
}
.btn-amber-solid:hover, .btn-glaze:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255, 107, 0, 0.5); color: var(--color-white) !important; }
.btn-outline-onyx { background-color: transparent; border: 2px solid var(--color-onyx); color: var(--color-onyx); }
.btn-outline-onyx:hover { background-color: var(--color-onyx); color: var(--color-white); }
.btn-onyx-solid { background-color: var(--color-onyx); color: var(--color-white); border: none; }
.btn-onyx-solid:hover { background-color: #1a1e29; color: var(--color-amber); transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.btn-glass { background: rgba(255,255,255,0.1); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.3); }
.btn-glass:hover { background: rgba(255,255,255,0.25); }
.btn-icon-slide i { transition: 0.3s; }
.btn-icon-slide:hover i { transform: translateX(5px); }
.slide-right-hover { transition: 0.3s; }
.btn:hover .slide-right-hover { transform: translateX(5px); }

/* --- SERVICE CARDS --- */
.stats-pill { border: 1px solid rgba(0,0,0,0.05); }
.icon-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.service-card-pro { 
    border-radius: var(--radius);
    background: var(--color-white);
    overflow: hidden;
    border: none !important;
    transition: var(--transition);
    box-shadow: var(--shadow-soft);
}
.service-card-pro:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }
.card-image-box { overflow: hidden; border-radius: calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0 0 !important; margin: 0 !important; background-color: #e2e8f0; }
.img-zoom { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--transition); }
.service-card-pro:hover .img-zoom { transform: scale(1.1); }
.card-title-hover { transition: var(--transition); }
.service-card-pro:hover .card-title-hover { color: var(--color-amber) !important; }
.service-card-pro .badge { background: rgba(11, 14, 20, 0.85) !important; color: var(--color-white) !important; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.1); top: 15px !important; left: 15px !important; }

/* --- UNIQUE SECTION: DIAGNOSTICS (White Theme, Cyber Blue Accents) --- */
.text-accent { color: var(--color-accent) !important; }
.bg-accent { background-color: var(--color-accent) !important; }
.border-accent { border-color: var(--color-accent) !important; }

.diagnostic-card {
    background: var(--color-zinc);
    border: 1px solid rgba(0,0,0,0.03);
    transition: var(--transition);
}

.diagnostic-card .icon-circle {
    width: 60px;
    height: 60px;
    transition: var(--transition);
    background: var(--color-white);
    box-shadow: var(--shadow-sm);
}

.diagnostic-card:hover {
    transform: translateY(-8px);
    background: var(--color-white);
    border-color: rgba(0, 210, 255, 0.4) !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08), 0 0 20px rgba(0, 210, 255, 0.15);
}

.diagnostic-card:hover .icon-circle {
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.3);
    border-color: var(--color-accent) !important;
}

.pattern-grid { 
    background-color: var(--color-white); 
    background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); 
    background-size: 30px 30px; 
}

.review-box { transition: var(--transition); box-shadow: var(--shadow-soft); }
.avatar-circle { width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

.premium-accordion .accordion-button:not(.collapsed) { background-color: transparent; color: var(--color-amber); box-shadow: none; }
.premium-accordion .accordion-button:focus { box-shadow: none; }
.premium-accordion .accordion-button::after { filter: grayscale(1); }

/* --- FORMS --- */
.bg-white.p-4.p-md-5.rounded-4.shadow-2xl {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: var(--shadow-soft);
}
.custom-input { transition: var(--transition); border: 1px solid transparent !important; }
.custom-input:focus { border-color: var(--color-amber) !important; box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15) !important; background-color: var(--color-white) !important; transform: translateY(-2px); }
.custom-input-grp:focus { box-shadow: none !important; background-color: var(--color-white) !important; }
.input-group:focus-within { box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15) !important; transform: translateY(-2px); transition: 0.3s; }

/* --- FLOATING DOCK (SPLIT LAYOUT) --- */
.floating-dock { 
    position: fixed; 
    bottom: 25px; 
    left: 0; 
    width: 100%; 
    padding: 0 25px; 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-end;
    z-index: 1040; 
    pointer-events: none; 
}
.dock-btn { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 1.8rem; 
    color: white; 
    border: 3px solid white;
    pointer-events: auto; 
    transition: transform 0.2s;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.btn-whatsapp { background: #25D366; }
.btn-call { background: var(--color-amber); animation: pulse-glow 2s infinite; }
.dock-btn:hover { transform: scale(1.15); color: white; }

/* --- CUSTOM MODERN SCROLLBAR --- */
::-webkit-scrollbar { width: 8px; background: var(--color-zinc); }
::-webkit-scrollbar-track { background: rgba(9, 9, 11, 0.05); border-radius: 10px; }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--color-amber), var(--color-amber-dark)); border-radius: 10px; border: 2px solid var(--color-zinc); }
::-webkit-scrollbar-thumb:hover { background: var(--color-onyx); }

/* --- SCROLL TO TOP BUTTON --- */
.scroll-top-btn {
    position: fixed;
    bottom: 105px; 
    right: 25px;
    width: 45px;
    height: 45px;
    background: var(--color-onyx);
    color: var(--color-amber);
    border: 2px solid var(--color-amber);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 1030;
    opacity: 0;
    visibility: hidden;
    transform: translateY(30px) scale(0.5);
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.scroll-top-btn.show { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.scroll-top-btn:hover { background: var(--color-amber); color: var(--color-onyx); transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 25px rgba(255, 107, 0, 0.5); }
.scroll-top-btn i { transition: transform 0.3s ease; }
.scroll-top-btn:hover i { transform: translateY(-3px); }

/* --- SCROLL REVEAL CLASSES --- */
.slide-up-text { opacity: 0; animation: slideUp 0.8s ease forwards; }
.delay-1 { animation-delay: 0.2s; }
.delay-2 { animation-delay: 0.4s; }
.delay-3 { animation-delay: 0.6s; }
.delay-4 { animation-delay: 0.8s; }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

.reveal-fade { opacity: 0; transform: translateY(40px); transition: 0.8s cubic-bezier(0.5, 0, 0, 1); }
.reveal-fade.active { opacity: 1; transform: translateY(0); }

/* --- RESPONSIVE FIXES --- */
@media (max-width: 991px) {
    .hero-premium { 
        min-height: auto;
        padding-top: 100px;
        padding-bottom: 100px;
        background-attachment: scroll !important;
        clip-path: none;
    }
    .hero-glass-card { padding: 2rem !important; }
    h1.display-3 { font-size: 2.2rem; }
    .connection-line { display: none !important; }
    .navbar-collapse { background: rgba(255,255,255,0.98); padding: 1.5rem; border-radius: 1rem; box-shadow: var(--shadow-lg); margin-top: 1rem; border: 1px solid var(--color-zinc); }
}

@media (max-width: 576px) {
    .brand-logo { height: 35px; }
    .floating-dock { bottom: 20px; padding: 0 15px; }
    .dock-btn { width: 55px; height: 55px; font-size: 1.5rem; }
    .scroll-top-btn { bottom: 90px; right: 15px; width: 40px; height: 40px; font-size: 1rem; }
    .py-6 { padding-top: 4rem; padding-bottom: 4rem; }
}