/* =============================================================================
   PROPRIETARY & CONFIDENTIAL
   Rahimli Tech Solutions (https://rahimli.pro)
   =============================================================================
   Shared site chrome for the "corporate" page family (index.html, la.html,
   and any future service/city landing page built on the same design system:
   dark hero, --black/--white/--g1..g4 grays, --orange/--amber accents).

   This file must be loaded together with /css/tokens.css, which defines
   --orange and --amber. It assumes the page's own <style> block still
   defines --black, --white, --g1..--g4 and --r locally (those vary less
   in practice, but keeping them page-local avoids coupling every page's
   token set together).

   What lives here: global reset, nav shell + mobile menu, buttons, footer,
   progress bar, back-to-top button, scroll-reveal engine (.sr), the
   iconBounce hover on service cards, and cursor-glow. These blocks were
   verified byte-identical across index.html and la.html before extraction.

   What does NOT live here: hero content, section layout/grids, and anything
   with page-specific sizing (paddings, max-widths, font sizes) — those
   differ intentionally between pages and stay in each page's own <style>.

   privacy.html and 404.html currently duplicate a lot of this same chrome
   inline — they weren't migrated in this pass to limit blast radius, but
   they're good fast-follow candidates since their nav/footer/button/
   progress-bar/back-to-top rules already match this file.
   ============================================================================= */

/* ── RESET / BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'DM Sans',-apple-system,sans-serif;background:var(--white);color:var(--g4);overflow-x:hidden;}

/* ── NAV ── */
nav{position:fixed;top:0;left:0;right:0;z-index:200;height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border-bottom:1px solid rgba(0,0,0,.06);}
.nav-logo a{display:inline-flex;line-height:0;}
.nav-logo img{height:36px;}
nav ul{display:flex;gap:2rem;list-style:none;align-items:center;}
nav a{color:var(--g3);text-decoration:none;font-size:.8rem;font-weight:500;letter-spacing:.01em;transition:color .2s;}
nav a:hover{color:var(--orange);}
nav.scrolled{box-shadow:0 2px 24px rgba(0,0,0,.10);}

/* ── MOBILE MENU / HAMBURGER ── */
.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:none;}
.nav-hamburger span{width:22px;height:2px;background:var(--g4);border-radius:2px;transition:all .3s;}
.nav-hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;z-index:199;background:rgba(255,255,255,.97);backdrop-filter:blur(20px);padding:1.5rem 2rem 2rem;border-bottom:1px solid var(--g2);flex-direction:column;gap:1rem;}
.mobile-menu.open{display:flex;}
.mobile-menu a{font-size:.95rem;color:var(--g4);text-decoration:none;padding:.5rem 0;border-bottom:1px solid var(--g2);font-weight:500;}
.mobile-menu a:last-child{border:none;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.82rem 1.9rem;border-radius:980px;font-size:.88rem;font-weight:600;text-decoration:none;transition:all .22s;cursor:pointer;border:none;font-family:inherit;}
.btn-fill{background:var(--orange);color:#fff;}
.btn-fill:hover{background:var(--amber);transform:scale(1.04);box-shadow:0 8px 32px rgba(255,119,1,.4);}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:scale(1.04);}

/* ── SHARED KEYFRAMES ── */
@keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes iconBounce{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-8deg)}70%{transform:scale(.95) rotate(4deg)}100%{transform:scale(1) rotate(0)}}

/* ── CURSOR GLOW ── */
#cursor-glow{position:fixed;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,119,1,.06) 0%,transparent 70%);pointer-events:none;transform:translate(-50%,-50%);transition:opacity .3s;z-index:0;top:0;left:0;}

/* ── SERVICE CARD TAGS ── */
.svc-tags{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.9rem;}
.stag{font-size:.58rem;padding:.2rem .55rem;border-radius:980px;background:rgba(255,119,1,.07);color:var(--orange);border:1px solid rgba(255,119,1,.18);font-weight:500;}
.svc:hover .svc-icon svg{animation:iconBounce .4s ease;}

/* ── FOOTER ── */
footer{background:var(--g4);padding:2.5rem 48px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;}
.footer-left{display:flex;align-items:center;gap:1.5rem;}
footer img{height:28px;filter:brightness(0) invert(1) opacity(.45);}
footer span{font-size:.72rem;color:#555;}
.footer-links{display:flex;gap:1.8rem;}
footer a{font-size:.72rem;color:#555;text-decoration:none;transition:color .2s;}
footer a:hover{color:var(--orange);}

/* ── PROGRESS BAR ── */
#progress-bar{position:fixed;top:0;left:0;z-index:999;height:3px;width:0%;background:linear-gradient(90deg,var(--orange),var(--amber));transition:width .1s linear;pointer-events:none;}

/* ── BACK TO TOP ── */
#back-to-top{position:fixed;bottom:2rem;right:2rem;z-index:300;width:44px;height:44px;border-radius:50%;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(255,119,1,.4);opacity:0;transform:translateY(12px);transition:opacity .3s,transform .3s,background .2s;pointer-events:none;}
#back-to-top.visible{opacity:1;transform:translateY(0);pointer-events:all;}
#back-to-top:hover{background:var(--amber);}
#back-to-top svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}

/* ── SCROLL REVEAL ── */
.js .sr{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
.sr.in{opacity:1;transform:translateY(0);}