/* ============================================================
   Deanna's Towing — Premium Elevation Layer
   Non-destructive enhancement of the existing dark/red theme.
   Loaded after inline styles so it refines, never rewrites.
   ============================================================ */

:root{
  --premium-glass: rgba(255,255,255,0.04);
  --premium-glass-border: rgba(255,255,255,0.09);
  --premium-red-glow: rgba(213,32,39,0.35);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---- Cinematic background depth ---- */
body{
  background-color:#161616;
  background-image:
    radial-gradient(1200px 700px at 78% -8%, rgba(213,32,39,0.10), transparent 60%),
    radial-gradient(900px 600px at 0% 30%, rgba(255,255,255,0.03), transparent 55%),
    linear-gradient(180deg, #1b1b1b 0%, #141414 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.1px;
}
/* fine grain texture */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.c-section, header, footer, .sticky-bar, main, section{position:relative;z-index:1}

/* ---- Typography refinement ---- */
h1{letter-spacing:-1.2px;font-weight:800}
h2{letter-spacing:-.6px}
h4{letter-spacing:2px !important}
.chip{letter-spacing:1.4px;text-transform:uppercase;font-size:.72rem !important;
  backdrop-filter:blur(8px);background:var(--premium-glass) !important}
p{color:#b3b3b3}

/* outlined headline accent — apply to <span> inside h1 if desired */
.outline{-webkit-text-stroke:1.5px var(--brand);color:transparent}

/* ---- Header: glass + hairline ---- */
header{
  background:rgba(20,20,20,0.72) !important;
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid var(--premium-glass-border) !important;
}
.nav-links a{position:relative;letter-spacing:.3px}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--brand);transition:width .3s var(--ease)}
.nav-links a:hover::after{width:100%}

/* ---- Buttons: premium sheen + depth ---- */
.btn{
  border-radius:14px !important;
  letter-spacing:.4px;
  box-shadow:0 8px 24px -10px var(--premium-red-glow), inset 0 1px 0 rgba(255,255,255,0.18);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  overflow:hidden;position:relative;
}
.btn::before{content:"";position:absolute;top:0;left:-130%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.28),transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease)}
.btn:hover::before{left:140%}
.btn:hover{transform:translateY(-3px);box-shadow:0 16px 34px -12px var(--premium-red-glow), inset 0 1px 0 rgba(255,255,255,0.22)}
.btn.ghost{backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px var(--premium-glass-border)}

/* ---- Hero polish ---- */
.hero{padding-top:72px;padding-bottom:72px}
.hero-img{border-radius:24px !important;box-shadow:0 30px 80px -30px rgba(0,0,0,.8), 0 0 0 1px var(--premium-glass-border)}
.hero-img::after{content:"";position:absolute;inset:0;border-radius:24px;
  box-shadow:inset 0 -80px 120px -60px rgba(213,32,39,0.25);pointer-events:none}
.hero-img{position:relative}

/* ---- Cards: glassmorphism + smoother lift ---- */
.card{
  background:linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)) !important;
  border:1px solid var(--premium-glass-border) !important;
  border-radius:18px !important;
  backdrop-filter:blur(10px);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover{
  transform:translateY(-7px);
  border-color:rgba(213,32,39,0.55) !important;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(213,32,39,0.25);
}
.card-icon{filter:drop-shadow(0 4px 10px var(--premium-red-glow))}

/* ---- Neighborhood chips: premium ---- */
.hood-tag{
  border-radius:10px !important;
  background:var(--premium-glass) !important;
  border:1px solid var(--premium-glass-border) !important;
  letter-spacing:.3px;font-weight:600;
  transition:all .25s var(--ease);
  backdrop-filter:blur(6px);
}
.hood-tag:hover{background:var(--brand) !important;transform:translateY(-2px);box-shadow:0 10px 22px -10px var(--premium-red-glow)}

/* ---- Entity / pricing blocks ---- */
.entity-section{border-radius:18px;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.price-row{transition:color .2s var(--ease)}

/* ---- Sticky bar: premium glass ---- */
.sticky-bar{
  background:rgba(20,20,20,0.82) !important;
  border:1px solid var(--premium-glass-border) !important;
  backdrop-filter:saturate(140%) blur(16px);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.8);
}

/* ---- Section rhythm: hairline dividers ---- */
section + section{border-top:1px solid rgba(255,255,255,0.045)}

/* ---- Footer ---- */
footer{background:linear-gradient(180deg,#121212,#0e0e0e) !important}

/* ---- Scroll reveal ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease), transform .7s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}

/* ---- Selection ---- */
::selection{background:var(--brand);color:#fff}
