/* ============================================================
   GARAGE RESCUE — SHARED BASE STYLESHEET
   ------------------------------------------------------------
   These rules are identical across every page and are linked
   from each HTML file via:  <link rel="stylesheet" href="styles.css">

   Edit something here ONCE and it updates on all 15 pages
   (nav, footer, buttons, colours, fonts, spacing, etc).

   Page-specific styles still live in a small <style> block in
   each HTML file, loaded AFTER this one so they can override.
   ============================================================ */

/* ---------- Variables ---------- */
:root{--gold:#F59E0B;--gold-dark:#D97706;--gold-dim:rgba(245,158,11,0.12);--black:#080808;--dark:#0A0A0A;--card:#141414;--card2:#1C1C1C;--border:rgba(255,255,255,0.08);--white:#F5F5F0;--muted:#6B6B65;--muted2:#9A9A92;--green:#22c55e;--red:#ef4444;--font-head:'Bebas Neue',sans-serif;--font-body:'Plus Jakarta Sans',sans-serif;--max-w:1200px;--nav-h:68px}

/* ---------- Fonts & Keyframes ---------- */
@keyframes pagefadein{from{opacity:0}to{opacity:1}}

/* ---------- Reset & Base Elements ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
a{color:inherit;text-decoration:none}

/* ---------- Top Bar ---------- */
.topbar{background:#050505;border-bottom:1px solid rgba(245,158,11,0.2);padding:8px 24px;display:flex;justify-content:space-between;align-items:center;font-size:12px}
.topbar-right{display:flex;align-items:center;gap:20px}
.topbar-right a{color:var(--gold);font-weight:600}
.topbar-left{color:var(--muted2)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:100;background:rgba(8,8,8,0.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);height:var(--nav-h);display:flex;align-items:center;padding:0 24px}
.nav-logo{font-family:var(--font-head);font-size:26px;letter-spacing:.04em}
.nav-logo span{color:var(--gold)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-cta{background:var(--gold)!important;color:var(--black)!important;font-weight:700!important;padding:10px 20px!important;border-radius:8px!important}
.nav-mobile-btn{display:none;background:none;border:none;color:var(--white);font-size:22px;cursor:pointer}

/* ---------- Buttons ---------- */
.btn-gold{background:var(--gold);color:var(--black)}
.btn-outline:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Section Layout & Headings ---------- */
.container{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.sec-label{display:inline-block;font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.12em;margin-bottom:14px}

/* ---------- Footer ---------- */
.footer-logo{font-family:var(--font-head);font-size:30px;margin-bottom:12px}
.footer-logo span{color:var(--gold)}
.footer-tagline{font-size:13px;color:var(--muted2);line-height:1.6;max-width:260px;margin-bottom:20px}
.footer-social{display:flex;gap:10px}
.footer-social a{width:36px;height:36px;border-radius:8px;background:var(--card2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--muted2);transition:all .15s}
.footer-social a:hover{border-color:var(--gold);color:var(--gold)}
.footer-col-title{font-size:11px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--muted2);padding:4px 0;transition:color .15s}
.footer-col a:hover{color:var(--white)}
.prefooter{background:var(--gold); padding:0 32px; height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px;}
.prefooter-left{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.prefooter-text{font-size:17px; font-weight:600; color:var(--black); letter-spacing:-.01em;}
.prefooter-scarcity{display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:rgba(0,0,0,0.55); text-transform:uppercase; letter-spacing:.08em; background:rgba(0,0,0,0.1); padding:5px 12px; border-radius:100px;}
.prefooter-btn{background:var(--black); color:var(--gold); font-family:var(--font-body); font-size:13px; font-weight:700; padding:12px 24px; border-radius:8px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .2s; white-space:nowrap; letter-spacing:.02em;}
.prefooter-btn:hover{background:#111; transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.3);}
.footer-v2-inner{max-width:var(--max-w);margin:0 auto}
.footer-v2-grid{display:grid; grid-template-columns:2.2fr 1fr 1fr 1.1fr; gap:56px; padding-bottom:56px; border-bottom:1px solid rgba(255,255,255,0.06);}
.footer-brand-logo{font-family:var(--font-head); font-size:42px; letter-spacing:.04em; color:var(--white); line-height:1; margin-bottom:10px;}
.footer-brand-logo span{color:var(--gold)}
.footer-brand-tag{font-size:13px; color:var(--gold); font-weight:500; line-height:1.5; margin-bottom:16px; letter-spacing:.01em;}
.footer-brand-rating{display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(245,158,11,0.7); margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,0.06);}
.footer-brand-rating .stars{color:var(--gold);letter-spacing:1px;font-size:11px}
.footer-socials{display:flex; flex-direction:column; gap:10px;}
.footer-social-link:hover .fsoc-icon{transform:scale(1.08)}
.footer-social-link:hover .fsoc-text{color:var(--white)}
.fsoc-icon{width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .2s; overflow:hidden;}
.fsoc-icon.ig{background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%)}
.fsoc-icon.li{background:#0A66C2}
.fsoc-icon.ph{background:rgba(34,197,94,0.15);border:1px solid rgba(34,197,94,0.25)}
.fsoc-icon.em{background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.2)}
.fsoc-icon svg{width:16px;height:16px}
.fsoc-text{font-size:13px; color:var(--muted2); font-weight:500; transition:color .2s; letter-spacing:.01em;}
.footer-v2-col-title{font-size:10px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.14em; margin-bottom:20px; display:flex; align-items:center; gap:8px;}
.footer-v2-col a:hover{color:var(--white); transform:translateX(4px);}
.footer-v2-col a.popular{color:var(--muted2);}
.footer-v2-col a.popular::after{content:'★ Popular'; margin-left:8px; font-size:9px; font-weight:700; color:var(--gold); text-transform:uppercase; letter-spacing:.06em; opacity:.8;}
.footer-v2-col a.book-now{color:var(--gold); font-weight:700; margin-top:4px;}
.footer-v2-col a.book-now:hover{color:var(--gold-dark)}
.footer-v2-copy{font-size:11px; color:var(--muted); letter-spacing:.02em;}
.footer-v2-copy a{color:var(--muted2);text-decoration:none;transition:color .15s}
.footer-v2-copy a:hover{color:var(--gold)}
.footer-v2-links{display:flex; align-items:center; gap:6px; font-size:11px; flex-wrap:wrap;}
.footer-v2-links a{color:var(--muted2);text-decoration:none;transition:color .15s}
.footer-v2-links a:hover{color:var(--white)}
.footer-v2-links a.ig-handle{color:var(--gold);font-weight:600}
.footer-v2-links a.ig-handle:hover{color:var(--gold-dark)}
.footer-v2-links .sep{color:rgba(255,255,255,0.15);margin:0 2px}

/* ---------- Misc Shared ---------- */
.fade-up{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
.fade-up.visible{opacity:1;transform:none}