/* ============================================================
   Mandzic Detailing Specialist LLC — Shared Site Styles
   Base reset, nav, buttons, footer, and reveal animations.
   Identical across every page — cached once, reused everywhere.
   ============================================================ */

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

        :root {
            --blue:       #1575FE;
            --blue-light: #4DA6FF;
            --blue-dim:   rgba(21, 117, 254, 0.12);
            --blue-glow:  rgba(21, 117, 254, 0.25);
            --black:      #050508;
            --dark:       #0e0e12;
            --dark2:      #141418;
            --dark3:      #1a1a20;
            --white:      #ffffff;
            --ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        html { scroll-behavior: smooth; overflow-x: hidden; }
        body { background: var(--black); color: var(--white); font-family: 'Inter', sans-serif; overflow-x: hidden; }

        ::-webkit-scrollbar { width: 3px; }
        ::-webkit-scrollbar-track { background: var(--black); }
        ::-webkit-scrollbar-thumb { background: var(--blue); }

/* ── NAV ── */
        nav {
            position: fixed; top: 0; left: 0; right: 0;
            z-index: 1000;
            padding: 1rem 5rem;
            display: flex; align-items: center; justify-content: space-between;
            transition: padding 0.4s var(--ease), background 0.4s;
        }
        nav.scrolled {
            background: rgba(5,5,8,0.96);
            backdrop-filter: blur(24px);
            padding: 0.6rem 5rem;
            border-bottom: 1px solid rgba(21,117,254,0.15);
        }
        .nav-logo { display:flex; align-items:center; text-decoration:none; }
        .nav-logo img {
            height: 72px; width: auto; object-fit: contain;
            filter: drop-shadow(0 0 12px rgba(21,117,254,0.35));
            transition: filter 0.3s, height 0.4s;
        }
        nav.scrolled .nav-logo img { height: 58px; }
        .nav-logo:hover img { filter: drop-shadow(0 0 20px rgba(21,117,254,0.55)); }

        .nav-links { list-style:none; display:flex; gap:1.6rem; align-items:center; }
        .nav-links a {
            color: rgba(255,255,255,0.6); text-decoration:none;
            font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase;
            font-weight: 500; transition: color 0.3s; position: relative;
        }
        .nav-links a::after {
            content:''; position:absolute; bottom:-4px; left:0;
            width:0; height:1px; background:var(--blue); transition:width 0.3s;
        }
        .nav-links a:hover { color:var(--white); }
        .nav-links a:hover::after { width:100%; }
        .nav-book {
            background: var(--blue) !important; color: var(--white) !important;
            padding: 0.6rem 1.5rem !important; font-weight:700 !important;
            transition: background 0.3s, box-shadow 0.3s !important;
        }
        .nav-book:hover { background:var(--blue-light) !important; box-shadow:0 0 24px var(--blue-glow) !important; }
        .nav-book::after { display:none !important; }
        .nav-links a[aria-current="page"] { color:var(--blue-light) !important; }
        .nav-links a.nav-featured { color:var(--blue-light) !important; background:rgba(21,117,254,0.09); border:1px solid rgba(21,117,254,0.2); padding:0.3rem 0.9rem; }
        .nav-links a.nav-featured::after { display:none !important; }

        /* ── NAV DROPDOWN ("Explore") ── */
        .nav-dropdown { position: relative; padding-bottom: 1.2rem; margin-bottom: -1.2rem; }
        .nav-dropdown-toggle {
            background: none; border: none; cursor: pointer; padding: 0;
            color: rgba(255,255,255,0.6); font-family: 'Inter', sans-serif;
            font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase;
            font-weight: 500; display: flex; align-items: center; gap: 0.4rem;
            transition: color 0.3s;
        }
        .nav-dropdown-toggle .caret { font-size: 0.55rem; transition: transform 0.3s; display:inline-block; }
        .nav-dropdown-toggle:hover, .nav-dropdown.open .nav-dropdown-toggle { color: var(--white); }
        .nav-dropdown.open .nav-dropdown-toggle .caret { transform: rotate(180deg); }
        .nav-dropdown-menu {
            list-style: none; position: absolute; top: 100%; left: 50%;
            transform: translateX(-50%) translateY(-8px);
            background: var(--dark2); border: 1px solid rgba(21,117,254,0.18);
            min-width: 168px; padding: 0.6rem 0; box-shadow: 0 24px 60px rgba(0,0,0,0.45);
            opacity: 0; pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
            z-index: 1001;
        }
        .nav-dropdown.open .nav-dropdown-menu,
        .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
        .nav-dropdown:hover .nav-dropdown-toggle .caret { transform: rotate(180deg); }
        .nav-dropdown-menu a {
            display: block; padding: 0.65rem 1.4rem; color: rgba(255,255,255,0.6);
            text-decoration: none; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase;
            font-weight: 500; transition: color 0.3s, background 0.3s; white-space: nowrap;
        }
        .nav-dropdown-menu a:hover { color: var(--white); background: rgba(21,117,254,0.08); }
        .nav-dropdown-menu a[aria-current="page"] { color: var(--blue-light) !important; }

        .hamburger { display:none; flex-direction:column; gap:6px; cursor:pointer; padding:4px; background:none; border:none; }
        .hamburger span { display:block; width:26px; height:1.5px; background:var(--white); transition:0.3s; }
        .hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5.5px); }
        .hamburger.active span:nth-child(2) { opacity:0; transform:scaleX(0); }
        .hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5.5px); }

        .nav-drawer {
            display:none; position:fixed; top:0; right:0; width:280px; height:100vh;
            background:var(--dark2); z-index:999;
            padding:5rem 2.5rem 3rem; flex-direction:column; gap:2rem;
            border-left:1px solid rgba(21,117,254,0.18);
            transform:translateX(100%); transition:transform 0.4s var(--ease);
        }
        .nav-drawer.open { transform:translateX(0); }
        .nav-drawer a { color:rgba(255,255,255,0.75); text-decoration:none; font-size:0.85rem; letter-spacing:3px; text-transform:uppercase; font-weight:500; transition:color 0.3s; }
        .nav-drawer a:hover { color:var(--blue-light); }
        .nav-drawer .drawer-book { background:var(--blue); color:var(--white)!important; padding:0.9rem 1.5rem; text-align:center; font-weight:700!important; margin-top:auto; }
        .nav-drawer a.nav-featured { color:var(--blue-light) !important; background:rgba(21,117,254,0.08); border:1px solid rgba(21,117,254,0.18); padding:0.3rem 0.85rem; }


/* ── SHARED (labels, titles, buttons) ── */
.label-pill { display:inline-flex; align-items:center; gap:0.8rem; font-size:0.65rem; letter-spacing:5px; text-transform:uppercase; color:var(--blue-light); margin-bottom:1.2rem; }
.label-pill::before { content:''; display:block; width:24px; height:1px; background:var(--blue); }
.big-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(2.8rem,5.5vw,5.2rem); line-height:0.92; letter-spacing:2px; }
.btn-blue {
            display:inline-block; background:var(--blue); color:var(--white);
            padding:1.1rem 3rem; font-weight:700; font-size:0.8rem;
            letter-spacing:2.5px; text-transform:uppercase; text-decoration:none;
            border:2px solid var(--blue); transition:all 0.3s;
        }
.btn-blue:hover { background:var(--blue-light); border-color:var(--blue-light); transform:translateY(-3px); box-shadow:0 20px 50px var(--blue-glow); }
.btn-ghost {
            display:inline-block; background:transparent; color:var(--white);
            padding:1.1rem 3rem; font-weight:600; font-size:0.8rem;
            letter-spacing:2.5px; text-transform:uppercase; text-decoration:none;
            border:2px solid rgba(255,255,255,0.2); transition:all 0.3s;
        }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue-light); transform:translateY(-3px); }

/* ── FOOTER ── */
footer { background:var(--dark2); border-top:1px solid rgba(21,117,254,0.1); padding:3rem 5rem; }
.footer-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:2rem; padding-bottom:2.5rem; border-bottom:1px solid rgba(255,255,255,0.04); }
.footer-logo img { height:60px; width:auto; object-fit:contain; filter:drop-shadow(0 0 10px rgba(21,117,254,0.25)); }
.footer-nav { list-style:none; display:flex; gap:2.5rem; flex-wrap:wrap; }
.footer-nav a { color:rgba(255,255,255,0.38); text-decoration:none; font-size:0.75rem; letter-spacing:1px; transition:color 0.3s; }
.footer-nav a:hover { color:var(--blue-light); }
.footer-socials { display:flex; gap:0.8rem; }
.social-btn { width:38px; height:38px; border:1px solid rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,0.4); font-size:0.7rem; font-weight:700; text-decoration:none; transition:border-color 0.3s,color 0.3s,box-shadow 0.3s; }
.social-btn:hover { border-color:var(--blue); color:var(--blue-light); box-shadow:0 0 16px rgba(21,117,254,0.2); }
.footer-areas { padding:1.6rem 0; display:flex; flex-wrap:wrap; gap:0.5rem 0.9rem; align-items:center; border-bottom:1px solid rgba(255,255,255,0.04); }
.footer-areas-label { font-size:0.62rem; letter-spacing:2px; text-transform:uppercase; color:rgba(255,255,255,0.3); margin-right:0.4rem; }
.footer-areas a, .footer-areas .fa-plain { font-size:0.72rem; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.3s; }
.footer-areas a:hover { color:var(--blue-light); }
.footer-areas .fa-plain { font-size:0.72rem; color:rgba(255,255,255,0.4); text-decoration:none; transition:color 0.3s; }
.footer-areas .fa-sep { color:rgba(255,255,255,0.12); }
.footer-bottom { padding-top:2rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-copy,.footer-loc { font-size:0.68rem; color:rgba(255,255,255,0.18); }

/* ── ANIMATIONS ── */
@keyframes riseIn { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
        @keyframes fadeIn  { from{opacity:0} to{opacity:1} }
        @keyframes scrollDrop { 0%{top:-100%} 100%{top:100%} }
        @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
        @keyframes pulse { 0%,100%{opacity:1;box-shadow:0 0 6px var(--blue)} 50%{opacity:0.5;box-shadow:none} }

        .reveal { opacity:0; transform:translateY(36px); transition:opacity 0.8s var(--ease),transform 0.8s var(--ease); }
        .reveal.left  { transform:translateX(-36px); }
        .reveal.right { transform:translateX(36px); }
        .reveal.vis   { opacity:1; transform:translate(0); }
        .d1{transition-delay:0.05s} .d2{transition-delay:0.12s} .d3{transition-delay:0.19s}
        .d4{transition-delay:0.26s} .d5{transition-delay:0.33s} .d6{transition-delay:0.40s}

        /* ── RESPONSIVE ── */
        @media (max-width:1100px) {
            nav,nav.scrolled { padding-left:2.5rem; padding-right:2.5rem; }
            .section-wrap { padding:5rem 2.5rem; }
            .services-top { grid-template-columns:1fr; gap:2rem; }
            .levels-grid { grid-template-columns:1fr 1fr; }
            .ceramic-inner { grid-template-columns:1fr; gap:3rem; padding:5rem 2.5rem; }
        }
.reveal { opacity:0; transform:translateY(36px); transition:opacity 0.8s var(--ease),transform 0.8s var(--ease); }
.reveal.left  { transform:translateX(-36px); }
.reveal.right { transform:translateX(36px); }
.reveal.vis   { opacity:1; transform:translate(0); }
.d1{transition-delay:0.05s} .d2{transition-delay:0.12s} .d3{transition-delay:0.19s}
.d4{transition-delay:0.26s} .d5{transition-delay:0.33s} .d6{transition-delay:0.40s}

/* ── BACK TO TOP ── */
.back-top { position:fixed; bottom:2rem; right:2rem; z-index:500; width:42px; height:42px; background:var(--blue); border:none; color:var(--white); font-size:1.1rem; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity 0.3s,transform 0.3s,background 0.3s; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(21,117,254,0.3); }
.back-top.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover { background:var(--blue-light); }