/* =====================================================================
   HOME V2 — Spotlight hero + transparent header + quick-booking strip
   Sirf index.html par load hota hai (body.home-v2 se scoped), baaki
   pages ka header/hero bilkul waise hi rahega.
   ===================================================================== */

body.home-v2{background:#000}

/* ---------- HEADER (dark bar, serif wordmark + tagline, glass pill nav) ---------- */
body.home-v2 header{
  background:linear-gradient(180deg,rgba(28,28,30,.62) 0%,rgba(22,22,24,.48) 100%);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
body.home-v2 .nav-wrap{height:85px;position:relative}
body.home-v2 .nav-actions .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
body.home-v2 .nav-actions .btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.12);color:#fff}

@media (min-width:1141px){
  body.home-v2 nav.main-nav{
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 6px;
  }
  body.home-v2 nav.main-nav ul{gap:2px}
  body.home-v2 nav.main-nav a{
    display:block;padding:8px 15px;border-radius:999px;
    font-size:14px;font-weight:400;color:rgba(255,255,255,.9);transition:background .25s,color .25s;
  }
  body.home-v2 nav.main-nav a::after{display:none}
  body.home-v2 nav.main-nav a:hover,
  body.home-v2 nav.main-nav a.active{background:rgba(255,255,255,.2);color:#fff}
}
@media (max-width:1140px){body.home-v2 nav.main-nav{top:85px}}


/* ---------- HERO ---------- */
.hx{
  position:relative;width:100%;overflow:hidden;background:#000;
  height:100vh;height:100dvh;min-height:560px;isolation:isolate;
  --r:260px;--mx:-999px;--my:-999px;
}
.hx-base,.hx-reveal-img{
  background-position:center;background-size:cover;background-repeat:no-repeat;
}
.hx-base{position:absolute;inset:0}
.hx-base{z-index:10;background-image:url('/images/services/hero-foam.jpg');
  background-image:image-set(url('/images/services/webp/hero-foam.webp') type('image/webp'),url('/images/services/hero-foam.jpg') type('image/jpeg'));
}
/* SMOOTH spotlight: chhota (2R x 2R) circle layer sirf transform se hilta hai (GPU), mask static rehta hai.
   Andar ki full-size polish image ulti disha me chalti hai taaki image jagah par thehri dikhe. */
.hx-reveal{
  position:absolute;left:0;top:0;z-index:30;pointer-events:none;overflow:hidden;
  width:calc(var(--r)*2);height:calc(var(--r)*2);
  transform:translate3d(-999px,-999px,0);will-change:transform;contain:strict;
  -webkit-mask-image:radial-gradient(circle var(--r) at 50% 50%,
    rgba(0,0,0,1) 0,rgba(0,0,0,1) calc(var(--r)*.4),rgba(0,0,0,.75) calc(var(--r)*.6),
    rgba(0,0,0,.4) calc(var(--r)*.75),rgba(0,0,0,.12) calc(var(--r)*.88),rgba(0,0,0,0) var(--r));
  mask-image:radial-gradient(circle var(--r) at 50% 50%,
    rgba(0,0,0,1) 0,rgba(0,0,0,1) calc(var(--r)*.4),rgba(0,0,0,.75) calc(var(--r)*.6),
    rgba(0,0,0,.4) calc(var(--r)*.75),rgba(0,0,0,.12) calc(var(--r)*.88),rgba(0,0,0,0) var(--r));
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
.hx-reveal-img{
  position:absolute;left:0;top:0;width:var(--hw,100vw);height:var(--hh,100vh);
  will-change:transform;
  background-image:url('/images/services/hero-polish.jpg');
  background-image:image-set(url('/images/services/webp/hero-polish.webp') type('image/webp'),url('/images/services/hero-polish.jpg') type('image/jpeg'));
}
/* readability shade for text, sits above both images */
.hx-shade{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(0,0,0,.55) 0,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.18) 34%,rgba(0,0,0,0) 52%),
    linear-gradient(0deg,rgba(0,0,0,.66) 0,rgba(0,0,0,0) 38%);
}

/* heading — left aligned, Montserrat Bold */
.hx-head{
  position:absolute;z-index:50;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  padding:85px max(28px,calc((100% - 1240px)/2 + 28px)) 0;pointer-events:none;
}
.hx-head h1{color:#fff;line-height:1.12;font-family:'Montserrat','Inter',sans-serif;font-weight:700;letter-spacing:-.01em;text-shadow:0 2px 28px rgba(0,0,0,.55);max-width:760px}
.hx-l1,.hx-l2{display:block;font-size:34px}
.hx-l2{color:var(--blue-1)}
@media (min-width:640px){.hx-l1,.hx-l2{font-size:50px}}
@media (min-width:1024px){.hx-l1,.hx-l2{font-size:62px}}
.hx-book{
  pointer-events:auto;margin-top:30px;font-family:'Montserrat',sans-serif;font-weight:600;font-size:16px;
  padding:15px 38px;border-radius:999px;border:0;cursor:pointer;color:#04111f;
  background:linear-gradient(90deg,var(--blue-1),var(--blue-3));
  box-shadow:0 8px 28px rgba(31,160,255,.45);transition:transform .25s,box-shadow .25s;
}
.hx-book:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,224,255,.55)}

/* Quick Booking slide-in panel */
.hx-backdrop{position:absolute;inset:0;z-index:55;background:rgba(0,0,0,.35);opacity:0;pointer-events:none;transition:opacity .35s}
.hx-panel{
  position:absolute;z-index:60;top:50%;right:max(20px,calc((100% - 1240px)/2 + 28px));
  width:min(400px,calc(100% - 40px));
  transform:translate(120%,-50%);opacity:0;visibility:hidden;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s,visibility 0s .5s;
}
.hx.qb-open .hx-panel{transform:translate(0,-50%);opacity:1;visibility:visible;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s,visibility 0s}
.hx.qb-open .hx-backdrop{opacity:1;pointer-events:auto}
.hx-panel .qb-bar{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:24px;
  background:linear-gradient(160deg,rgba(14,24,38,.94),rgba(8,14,24,.94));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.hx-panel .qb-title h4{font-family:'Montserrat',sans-serif;font-weight:700;font-size:20px}
.hx-panel-close{position:absolute;top:10px;right:14px;background:none;border:0;color:var(--muted);font-size:28px;line-height:1;cursor:pointer}
.hx-panel-close:hover{color:#fff}
@media (max-width:700px){
  .hx-panel{top:auto;bottom:0;right:0;left:0;width:100%;transform:translateY(110%)}
  .hx.qb-open .hx-panel{transform:translateY(0)}
  .hx-panel .qb-bar{border-radius:22px 22px 0 0;max-height:85dvh;overflow:auto}
  .hx-head{padding-top:70px}
}
.hx-hint{
  margin-top:22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.7);display:inline-flex;align-items:center;gap:10px;
}
.hx-hint::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue-2);box-shadow:0 0 0 0 rgba(95,208,255,.6);animation:hxPing 2.2s ease-out infinite}
.hx-hint .t-touch{display:none}
@media (hover:none),(pointer:coarse){.hx-hint .t-mouse{display:none}.hx-hint .t-touch{display:inline}}
@keyframes hxPing{0%{box-shadow:0 0 0 0 rgba(95,208,255,.55)}100%{box-shadow:0 0 0 12px rgba(95,208,255,0)}}

@media (max-height:520px) and (orientation:landscape){
  .hx{min-height:440px}
  .hx-l1,.hx-l2{font-size:30px}
  .hx-hint{margin-top:12px}
}

/* entrance animations */
@keyframes hxReveal{0%{opacity:0;transform:translateY(28px);filter:blur(12px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes hxFadeUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes hxZoom{0%{transform:scale(1.12)}100%{transform:scale(1)}}
.hx-anim{opacity:0;animation-fill-mode:forwards;animation-timing-function:cubic-bezier(.16,1,.3,1)}
.hx-reveal-in{animation-name:hxReveal;animation-duration:1.1s}
.hx-fade{animation-name:hxFadeUp;animation-duration:1s}
.hx-zoom{animation:hxZoom 1.8s cubic-bezier(.16,1,.3,1) forwards}
@media (prefers-reduced-motion:reduce){.hx-anim,.hx-zoom{animation:none;opacity:1}.hx-hint::before{animation:none}}

/* ---------- QUICK BOOKING STRIP (pehle hero card me tha, IDs same) ---------- */
.qb{background:var(--bg);padding:36px 0 8px;position:relative;scroll-margin-top:100px}
.qb-bar{
  display:grid;grid-template-columns:auto 1fr 1fr 1fr auto;gap:16px;align-items:end;
  padding:22px 26px;border-radius:22px;
  background:linear-gradient(160deg,rgba(20,34,52,.85),rgba(10,18,30,.85));
  border:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.7),var(--shadow-glow);
}
.qb-title{align-self:center;padding-right:8px}
.qb-title h4{font-family:var(--ff-display);font-size:17px;color:var(--white)}
.qb-title span{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.qb-bar label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted);font-weight:500;min-width:0}
.qb-bar select{
  background:#0f1b2b;border:1px solid var(--line);color:var(--white);
  padding:12px;border-radius:10px;font-size:14px;font-family:var(--ff-body);width:100%;
}
.qb-bar select option{background:#0f1b2b;color:var(--white)}
.qb-bar select:focus{outline:2px solid var(--blue-2)}
.qb-bar .btn{height:46px}
.qb-trust{display:flex;justify-content:center;gap:48px;margin-top:0;flex-wrap:wrap}
.qb-trust div{display:flex;flex-direction:column;align-items:center}
.qb-trust b{font-family:var(--ff-display);font-size:22px;color:var(--white)}
.qb-trust span{font-size:12.5px;color:var(--muted);margin-top:4px}
@media (max-width:1000px){
  .qb-bar{grid-template-columns:1fr 1fr;align-items:stretch}
  .qb-title{grid-column:1/-1}
  .qb-bar .btn{grid-column:1/-1}
}
@media (max-width:560px){
  .qb-bar{grid-template-columns:1fr;padding:18px}
  .qb-trust{gap:26px}
}

/* Header "Book Now" ke baad box ko halka glow */
.qb-bar.qb-flash{animation:qbFlash 1.8s ease}
@keyframes qbFlash{
  0%{box-shadow:0 0 0 0 rgba(95,208,255,0)}
  30%{box-shadow:0 0 0 6px rgba(95,208,255,.35),0 0 44px rgba(31,160,255,.5)}
  100%{box-shadow:0 30px 60px -28px rgba(0,0,0,.7),var(--shadow-glow)}
}

/* Panel khula ho to floating WhatsApp button upar na aaye (mobile) */
@media (max-width:700px){body.home-v2:has(.hx.qb-open) .whatsapp-float{display:none}}