/* ================================================================
   DHARANI AUTO STORES — home.css
   Navy #0a213d | Gold #ffcd34 | All sections: white #ffffff
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800&family=DM+Sans:wght@300;400;500;600&display=swap');

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

:root {
  --navy        : #0a213d;
  --navy-mid    : #0d2a4f;
  --navy-soft   : #0f2d52;
  --gold        : #ffcd34;
  --gold-dk     : #e6b800;
  --gold-glow   : rgba(255,205,52,0.15);
  --gold-border : rgba(255,205,52,0.38);
  --bg          : #ffffff;
  --bg-soft     : #f4f6fb;
  --bg-card     : #ffffff;
  --text-head   : #0a213d;
  --text-body   : #374151;
  --text-muted  : #64748b;
  --border      : #e2e8f0;
  --sh-sm       : 0 2px  8px  rgba(10,33,61,0.07);
  --sh-md       : 0 8px  24px rgba(10,33,61,0.10);
  --sh-lg       : 0 20px 48px rgba(10,33,61,0.13);
  --sh-xl       : 0 32px 72px rgba(10,33,61,0.16);
  --font-d      : 'Barlow Condensed', sans-serif;
  --font-b      : 'DM Sans', sans-serif;
  --ease        : cubic-bezier(0.22, 1, 0.36, 1);
  --spring      : cubic-bezier(0.34, 1.56, 0.64, 1);
  --r           : 16px;
  /* product card diagonal vars */
  --pp-cut      : 66px;
  --pp-r        : 22px;
}

html { scroll-behavior: auto; }
body {
  font-family : var(--font-b);
  color       : var(--text-body);
  background  : #ffffff;
  overflow-x  : hidden;
}


/* ================================================================
   PAGE LOADER — white, refined
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Cormorant+Garamond:ital,wght@0,400;1,400&display=swap');

#page-loader {
  position        : fixed;
  inset           : 0;
  z-index         : 99999;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : center;
  background      : #ffffff;
  overflow        : hidden;
}

/* ── Top blessing pill ── */
.pl-blessing {
  position        : absolute;
  top             : clamp(20px, 4vh, 40px);
  left            : 0;
  right           : 0;
  display         : flex;
  justify-content : center;
  opacity         : 0;
  animation       : pl-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.pl-blessing span {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : clamp(11px, 1.6vw, 14px);
  font-weight    : 400;
  font-style     : italic;
  letter-spacing : 0.08em;
  color          : #0a213d;
  padding        : 8px 24px;
  border         : 1.5px solid #c9a100;
  border-radius  : 999px;
  white-space    : nowrap;
}

/* ── Centre block ── */
.pl-center {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  gap            : 14px;
}

/* Logo pop — phase 1 only (phase 2 animated by JS) */
.pl-logo-wrap {
  opacity   : 0;
  transform : translateY(22px) scale(0.94);
  animation : pl-pop 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.pl-logo-img {
  display    : block;
  height     : clamp(72px, 14vw, 110px);
  max-width  : 280px;
  object-fit : contain;
}
.pl-brand-img {
  height    : clamp(60px, 11vw, 90px);
  max-width : 240px;
}

/* Company name */
.pl-company-name {
  font-family    : 'Playfair Display', serif;
  font-size      : clamp(20px, 4.5vw, 32px);
  font-weight    : 700;
  color          : #0a213d;
  letter-spacing : 0.04em;
  margin         : 0;
  opacity        : 0;
  transform      : translateY(12px);
  animation      : pl-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.7s forwards;
}

/* Tagline */
.pl-tagline {
  font-family    : 'Cormorant Garamond', serif;
  font-size      : clamp(14px, 2.8vw, 20px);
  font-weight    : 400;
  font-style     : italic;
  letter-spacing : 0.18em;
  color          : #c9a100;
  margin         : 0;
  opacity        : 0;
  transform      : translateY(10px);
  animation      : pl-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) 1.05s forwards;
}

/* ── Progress bar — centred at bottom using flex ── */
.pl-progress-wrap {
  position        : absolute;
  bottom          : clamp(36px, 7vh, 60px);
  left            : 0;
  right           : 0;
  display         : flex;
  justify-content : center;
  opacity         : 0;
  animation       : pl-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.3s forwards;
}
.pl-bar-track {
  width         : clamp(180px, 28vw, 260px);
  height        : 3px;
  border-radius : 99px;
  background    : rgba(201, 161, 0, 0.15);
  overflow      : hidden;
}
.pl-bar-fill {
  height          : 100%;
  width           : 0%;
  border-radius   : 99px;
  background      : linear-gradient(90deg, #c9a100, #ffcd34, #ffe57a, #ffcd34);
  background-size : 200% 100%;
  animation       : pl-bar-shine 2s linear infinite;
  transition      : width 0.08s linear;
  box-shadow      : 0 0 8px rgba(255, 205, 52, 0.55);
}
@keyframes pl-bar-shine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Keyframes ── */
@keyframes pl-pop {
  0%   { opacity: 0; transform: translateY(22px) scale(0.94); }
  65%  { transform: translateY(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pl-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* ── Exit ── */
.pl-exit {
  animation : pl-exit 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pl-exit {
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-16px); pointer-events: none; }
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .pl-blessing span {
    font-size  : clamp(10px, 3vw, 12px);
    padding    : 7px 16px;
    white-space: nowrap;
  }
  .pl-center          { gap: 10px; }
  .pl-logo-img        { height: 72px; }
  .pl-brand-img       { height: 60px; }
  .pl-company-name    { font-size: 22px; }
  .pl-tagline         { font-size: 15px; }
  .pl-progress-wrap   { bottom: 36px; left: 0; right: 0; display: flex; justify-content: center; }
  .pl-bar-track       { width: 200px; }
}


/* ================================================================
   HEADER — glassmorphism floating rounded rectangle
   left/right 6% syncs perfectly with hero's padding: 130px 6%
   ================================================================ */
.header {
  position: fixed;
  top: 22px;
  left: 6%;
  right: 6%;
  z-index: 9999;
  width: auto;
  isolation: isolate;
  /* NO transform here — transform on position:fixed breaks Chrome stacking */
}

.nav-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 8px 12px 8px 26px;
  gap: 26px;

  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border-radius: 999px;
  border: 1.5px solid rgba(255,205,52,0.55);

  box-shadow:
    0 10px 35px rgba(10,33,61,0.12),
    inset 0 0 0 1px rgba(255,255,255,0.2);
}
.nav-left {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.logo-wrap {
  display: flex;
  align-items: center;
  padding: 0;
}

.brand-logo-wrap {
  padding: 0;
}

/* FIXED LOGO SIZE */
.logo-wrap img {
  height: 34px;
  width: auto;
  display: block;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.brand-logo-wrap img {
  height: 34px;
}

.logo-wrap img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 4px 14px rgba(255,205,52,0.6));
}

.nav-divider {
  width: 1px;
  height: 28px;
  background: rgba(10,33,61,0.18);
  margin: 0 16px;
  flex-shrink: 0;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}

.nav-links a {
  font-family: var(--font-b);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  color: var(--navy);
  padding: 8px 20px;
  border-radius: 999px;
  transition: all 0.25s ease;
}

/* Active tab */
.nav-links a.active {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 5px 16px rgba(255,205,52,0.4);
}

/* Hover */
.nav-links a:not(.active):hover {
  color: var(--gold-dk);
}

/* ================================================================
   HERO PIN WRAPPER — 250vh scroll room for 240-frame sequence
   MUST NOT have overflow:hidden — breaks GSAP pin spacer
   ================================================================ */
.hero-pin-wrapper {
  height  : 250vh;
  position: relative;
  overflow: visible;
}

.hero {
  position  : relative;
  width     : 100%;
  height    : 100vh;
  min-height: 640px;
  display   : flex;
  align-items    : center;
  justify-content: space-between;
  gap    : 32px;
  padding: 100px 6% 44px;   /* ← same 6% as header left/right */
  background : transparent;
  overflow   : visible;
  /* will-change:transform removed — breaks position:fixed in Chrome */
}

.hero-left {
  position   : relative;
  z-index    : 2;
  flex       : 0 0 auto;
  width      : clamp(300px, 38%, 480px);
  /* will-change removed — Chrome stacking context fix */
}

/* badge with pulsing dot */
.hero-badge {
  display    : inline-flex;
  align-items: center;
  gap        : 10px;
  background : var(--gold-glow);
  border     : 1px solid var(--gold-border);
  padding    : 8px 18px;
  border-radius: 999px;
  font-family  : var(--font-b);
  font-size    : 13px;
  font-weight  : 600;
  color        : var(--navy);
  letter-spacing: 0.04em;
  margin-bottom : 18px;
}
.badge-dot {
  width : 7px;
  height: 7px;
  border-radius: 50%;
  background   : var(--gold-dk);
  flex-shrink  : 0;
  animation    : dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0   rgba(230,184,0,0.70); }
  50%     { box-shadow: 0 0 0 8px rgba(230,184,0,0);    }
}

.hero-title {
  font-family   : var(--font-d);
  font-size     : 46px;
  font-weight   : 800;
  line-height   : 1.06;
  color         : var(--navy);
  margin-bottom : 16px;
  letter-spacing: -0.01em;
}
.gold-text { color: var(--gold-dk); }

.hero-sub {
  font-size    : 14px;
  line-height  : 1.75;
  color        : var(--text-body);
  max-width    : 460px;
  margin-bottom: 28px;
  font-weight  : 400;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 32px; }

.hero-stats {
  display      : inline-flex;
  align-items  : center;
  background   : var(--bg-soft);
  border       : 1px solid var(--border);
  border-radius: 12px;
  padding      : 14px 0;
  overflow     : hidden;
}
.hstat { display: flex; flex-direction: column; gap: 3px; padding: 0 22px; }
.hstat-n {
  font-family: var(--font-d);
  font-size  : 26px;
  font-weight: 800;
  color      : var(--navy);
  line-height: 1;
}
.hstat-n sup { font-size: 18px; vertical-align: super; }
.hstat-l { font-size: 11.5px; color: var(--text-muted); letter-spacing: 0.04em; }
.hstat-div { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }


/* ── hero frame box ── */
.hero-frame-box {
  position     : relative;
  flex         : 0 0 auto;
  width        : clamp(280px, 36vw, 460px);
  aspect-ratio : 1 / 1;
  border-radius: 32px;
  background   : var(--bg-soft);
  border       : 2px solid var(--gold-border);
  overflow     : hidden;
  z-index      : 2;
  /* will-change removed — Chrome fix */
  box-shadow   :
    0 0 0 1px var(--gold-glow),
    0 24px 60px rgba(10,33,61,0.12),
    0  6px 20px rgba(10,33,61,0.07);
}
@keyframes ringPulse {
  0%,100% { box-shadow: inset 0 0 40px rgba(255,205,52,0.07); }
  50%     { box-shadow: inset 0 0 80px rgba(255,205,52,0.16), 0 0 30px rgba(255,205,52,0.12); }
}
.hfb-ring {
  position     : absolute;
  inset        : -12px;
  border-radius: 40px;
  border       : 2px solid rgba(255,205,52,0.22);
  pointer-events: none;
  z-index      : 3;
  animation    : ringPulse 3.6s ease-in-out infinite;
  transition   : border-color 0.4s ease;
}
.hero-frame-box:hover .hfb-ring { border-color: rgba(255,205,52,0.55); }

.hfb-c {
  position: absolute;
  width: 22px; height: 22px;
  border-color: var(--gold);
  border-style: solid;
  opacity: 0.65; z-index: 4; pointer-events: none;
}
.hfb-c.tl { top:12px;    left:12px;    border-width:2px 0 0 2px; border-radius:4px 0 0 0; }
.hfb-c.tr { top:12px;    right:12px;   border-width:2px 2px 0 0; border-radius:0 4px 0 0; }
.hfb-c.bl { bottom:12px; left:12px;    border-width:0 0 2px 2px; border-radius:0 0 0 4px; }
.hfb-c.br { bottom:12px; right:12px;   border-width:0 2px 2px 0; border-radius:0 0 4px 0; }

#hero-canvas {
  position: absolute !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit;
  background: url('sequence/frame_0001.jpg') center/cover no-repeat;
}

#seq-progress-wrap {
  position : absolute;
  bottom   : 24px;
  left     : 50%;
  transform: translateX(-50%);
  width    : 72%;
  z-index  : 10;
  display  : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 8px;
  pointer-events: none;
}
#seq-progress-wrap::before {
  content : '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background   : rgba(255,255,255,0.15);
  border-radius: 99px;
}
#seq-progress-bar {
  width        : 0%;
  height       : 3px;
  background   : linear-gradient(90deg, var(--gold-dk), var(--gold));
  border-radius: 99px;
  transition   : width 0.25s ease;
  box-shadow   : 0 0 8px rgba(255,205,52,0.55);
  align-self   : flex-start;
}

/* scroll hint */
.sh-wrap {
  position      : absolute;
  bottom        : 52px;
  left          : 50%;
  transform     : translateX(-50%);
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 10px;
  z-index       : 20;
  pointer-events: none;
  white-space   : nowrap;
  opacity       : 0;
  animation     : shFadeIn 0.7s ease 1.9s forwards;
}
@keyframes shFadeIn {
  from { opacity:0; transform: translateX(-50%) translateY(8px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}
.sh-label {
  font-family   : var(--font-b);
  font-size     : 11px;
  font-weight   : 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color         : var(--text-muted);
  margin        : 0;
}
.sh-mouse {
  width : 26px; height: 42px;
  border: 2.5px solid var(--navy);
  border-radius: 13px;
  display        : flex;
  justify-content: center;
  padding-top    : 7px;
}
.sh-wheel {
  width        : 4px; height: 7px;
  background   : var(--gold-dk);
  border-radius: 2px;
  animation    : wheelScroll 1.6s ease-in-out infinite;
  box-shadow   : 0 0 6px rgba(230,184,0,0.7);
}
@keyframes wheelScroll {
  0%   { transform: translateY(0);    opacity: 1; }
  60%  { transform: translateY(12px); opacity: 0; }
  61%  { transform: translateY(0);    opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
.sh-particle { position: absolute; border-radius: 50%; pointer-events: none; animation: shFloat 3s ease-in-out infinite; }
.sh-p1 { width:5px; height:5px; background:var(--gold);    top:-16px; left:-28px;  animation-delay:0s;   opacity:0.70; }
.sh-p2 { width:3px; height:3px; background:var(--navy);    top:-10px; right:-26px; animation-delay:0.6s; opacity:0.35; }
.sh-p3 { width:4px; height:4px; background:var(--gold-dk); top:16px;  left:-36px;  animation-delay:1.1s; opacity:0.55; }
.sh-p4 { width:3px; height:3px; background:var(--gold);    top:20px;  right:-32px; animation-delay:1.7s; opacity:0.45; }
@keyframes shFloat {
  0%,100% { transform: translateY(0) scale(1);    }
  50%     { transform: translateY(-6px) scale(1.2); }
}
#hfb-scroll-hint { transition: opacity 0.4s ease; }


/* ================================================================
   BUTTONS
   ================================================================ */
.btn-grad {
  display  : inline-flex;
  align-items    : center;
  justify-content: center;
  gap           : 8px;
  padding       : 13px 28px;
  border-radius : 11px;
  border        : none;
  cursor        : pointer;
  text-decoration: none;
  font-family   : var(--font-b);
  font-size     : 14px;
  font-weight   : 700;
  letter-spacing: 0.02em;
  transition    : transform 0.25s var(--spring), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.btn-primary {
  background: var(--navy); color: #fff;
  box-shadow: 0 4px 20px rgba(10,33,61,0.28);
  border    : 2px solid transparent;
}
.btn-primary:hover {
  background: var(--navy-soft); color: #fff;
  transform : translateY(-3px);
  box-shadow: 0 10px 32px rgba(10,33,61,0.38);
  border-color: var(--gold);
}
.btn-ghost {
  background: transparent; color: var(--navy);
  border    : 1.5px solid var(--border);
}
.btn-ghost:hover {
  transform: translateY(-3px);
  background: var(--bg-soft);
  border-color: var(--gold-dk);
}
.btn-grad:not(.btn-primary):not(.btn-ghost) {
  background: var(--navy); color: #fff;
  border    : 2px solid transparent;
  box-shadow: 0 4px 14px rgba(10,33,61,0.22);
}
.btn-grad:not(.btn-primary):not(.btn-ghost):hover {
  background: var(--navy-soft);
  transform : translateY(-2px);
  box-shadow: 0 10px 28px rgba(10,33,61,0.32);
  border-color: var(--gold);
}


/* ================================================================
   SECTION HEADER — shared across all sections
   .section-eyebrow has a <span class="ey-dot"> pulsing dot
   ================================================================ */
.section-header  { text-align: center; margin-bottom: 54px; }
.section-eyebrow {
  display    : inline-flex;
  align-items: center;
  gap        : 9px;
  margin-bottom : 14px;
  font-family   : var(--font-b);
  font-size     : 11.5px;
  font-weight   : 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color         : var(--gold-dk);
  background    : var(--gold-glow);
  border        : 1px solid var(--gold-border);
  padding       : 6px 16px 6px 12px;
  border-radius : 999px;
}
/* pulsing dot — same keyframe as hero badge-dot */
.ey-dot {
  width        : 7px;
  height       : 7px;
  border-radius: 50%;
  background   : var(--gold-dk);
  flex-shrink  : 0;
  animation    : dotPulse 2.4s ease-in-out infinite;
}
.section-title {
  font-family   : var(--font-d);
  font-size     : 42px;
  font-weight   : 700;
  color         : var(--text-head);
  letter-spacing: 0.01em;
  margin-bottom : 10px;
}
.section-subtitle { font-size: 15px; color: var(--text-muted); }


/* ================================================================
   DHARANI DEALS — white bg, logo carousel
   ================================================================ */
.dharani-deals {
  position  : relative;
  z-index   : 10;
  padding   : 88px 0;
  background: #ffffff;
  overflow  : hidden;
  border-top: 1px solid var(--border);
}

.dharani-deals .section-header { padding: 0 24px; }

.logo-carousel { width: 100%; overflow: hidden; margin-top: 0; }
.logo-track {
  display: flex;
  align-items: center;
  width      : max-content;
  animation  : scrollLogos 34s linear infinite;
}
.logo-track:hover { animation-play-state: paused; }
.logo-item {
  min-width    : 160px;
  height       : 80px;
  margin-right : 18px;
  background   : #ffffff;
  border       : 1px solid var(--border);
  border-radius: 14px;
  display      : flex;
  align-items  : center;
  justify-content: center;
  box-shadow   : var(--sh-sm);
  transition   : border-color .3s, box-shadow .3s, transform .3s var(--spring);
}
.logo-item:hover {
  border-color: var(--gold-border);
  box-shadow  : var(--sh-md);
  transform   : translateY(-4px);
}
.logo-item img { max-width: 122px; max-height: 54px; object-fit: contain; display: block; }
@keyframes scrollLogos {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}


/* ================================================================
   WHY CHOOSE US — white bg
   ================================================================ */
.why-choose {
  position  : relative;
  z-index   : 10;
  padding   : 100px 24px;
  background: #ffffff;
  text-align: center;
  border-top: 1px solid var(--border);
}
.features-grid {
  display              : grid;
  grid-template-columns: repeat(6, 1fr);
  gap      : 18px;
  max-width: 1100px;
  margin   : 0 auto;
}
.feature-card {
  position    : relative;
  aspect-ratio: 1;
  background  : #ffffff;
  border      : 1px solid var(--border);
  border-radius: var(--r);
  display      : flex;
  flex-direction: column;
  align-items  : center;
  justify-content: center;
  gap          : 10px;
  cursor       : default;
  overflow     : visible;
  box-shadow   : var(--sh-sm);
  transition   : transform 0.36s var(--spring), box-shadow 0.36s ease,
                 border-color 0.36s ease, background 0.36s ease;
}
.feature-card:hover {
  transform   : translateY(-10px) scale(1.04);
  border-color: var(--gold-border);
  box-shadow  : var(--sh-lg), 0 0 0 2px var(--gold-border);
  background  : #fffef5;
}
.feature-card i { font-size: 26px; color: var(--gold-dk); transition: transform 0.36s var(--spring); }
.feature-card:hover i { transform: scale(1.28) rotate(-8deg); }
.feature-card h4 {
  font-family   : var(--font-b);
  font-size     : 11.5px;
  font-weight   : 700;
  color         : var(--text-head);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.feature-popup {
  position : absolute;
  bottom   : calc(100% + 10px);
  left     : 50%;
  transform: translateX(-50%) translateY(6px);
  width    : 196px;
  padding  : 11px 14px;
  background  : var(--navy);
  color       : #fff;
  border-radius: 12px;
  border-top  : 2px solid var(--gold);
  box-shadow  : var(--sh-xl);
  font-family : var(--font-b);
  font-size   : 13px;
  line-height : 1.55;
  text-align  : center;
  opacity     : 0;
  pointer-events: none;
  transition  : opacity 0.28s ease, transform 0.28s var(--ease);
  z-index     : 10;
}
.feature-popup::after {
  content  : '';
  position : absolute;
  top      : 100%; left: 50%;
  transform: translateX(-50%);
  border   : 7px solid transparent;
  border-top-color: var(--navy);
}
.feature-card:hover .feature-popup { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ================================================================
   PRODUCTS PREVIEW — 4 cards / 2×2 / diagonal cut / white bg

   Architecture:
   ┌─ .pp-slot (position:relative, NO overflow clip)
   │   ├─ .pp-card (position:absolute inset:0, clip-path diagonal)
   │   │   ├─ .pp-img
   │   │   ├─ .pp-overlay
   │   │   └─ .pp-content (.pp-tag, .pp-name, .pp-desc)
   │   └─ .pp-circle  ← SIBLING of .pp-card, escapes clip-path
   │       └─ .pp-arrow (fa-arrow-right, rotates -45°→0° on hover)

   Circle pos at diagonal midpoint:
     bottom = (--pp-cut / 2) - --pp-r = 33 - 22 = 11px
     right  = (--pp-cut / 2) - --pp-r = 33 - 22 = 11px

   Arrow: rotate(-45deg) = looks like ↗  →  rotate(0deg) = →
   Arrow color always #0a213d. Circle: white → gold on hover.
   ================================================================ */
.products-preview {
  position  : relative;
  z-index   : 10;
  background: #ffffff;
  padding   : 100px 24px;
  border-top: 1px solid var(--border);
}
.pp-wrap { max-width: 1060px; margin: 0 auto; }

.pp-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows   : 215px 215px;
  gap                  : 14px;
}

/* Slot — position context, no overflow */
.pp-slot { position: relative; }

/* Card — absolute fill, diagonal clip */
.pp-card {
  position     : absolute;
  inset        : 0;
  border-radius: 18px;
  overflow     : hidden;
  display      : block;
  text-decoration: none;
  cursor       : pointer;
  box-shadow   : 0 4px 20px rgba(10,33,61,0.13);
  clip-path    : polygon(
    0 0, 100% 0,
    100% calc(100% - var(--pp-cut)),
    calc(100% - var(--pp-cut)) 100%,
    0 100%
  );
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease;
}
.pp-slot:hover .pp-card {
  transform : translateY(-5px) scale(1.008);
  box-shadow: 0 16px 44px rgba(10,33,61,0.22);
}

.pp-img {
  position  : absolute;
  inset     : 0;
  width     : 100%; height: 100%;
  object-fit: cover;
  display   : block;
  transition: transform .52s cubic-bezier(.22,1,.36,1);
}
.pp-slot:hover .pp-img { transform: scale(1.07); }

.pp-overlay {
  position  : absolute;
  inset     : 0;
  background: linear-gradient(158deg, rgba(5,14,28,.08) 0%, rgba(5,14,28,.78) 100%);
  transition: background .36s ease;
}
.pp-slot:hover .pp-overlay {
  background: linear-gradient(158deg, rgba(5,14,28,.20) 0%, rgba(5,14,28,.91) 100%);
}

.pp-content {
  position: absolute;
  bottom  : 14px;
  left    : 16px;
  right   : calc(var(--pp-cut) + 4px);
  z-index : 2;
}
.pp-tag {
  display        : inline-block;
  font-family    : var(--font-b);
  font-size      : 10px;
  font-weight    : 700;
  letter-spacing : 0.09em;
  text-transform : uppercase;
  color          : #fff;
  background     : rgba(10,33,61,0.55);
  border         : 1.5px solid rgba(255,255,255,.55);
  /* backdrop-filter removed — Chrome fix */
  padding        : 3px 11px;
  border-radius  : 999px;
  margin-bottom  : 6px;
}
.pp-name {
  font-family  : var(--font-d);
  font-size    : clamp(16px, 1.75vw, 21px);
  font-weight  : 700;
  color        : #fff;
  line-height  : 1.2;
  text-shadow  : 0 2px 10px rgba(0,0,0,.30);
  margin       : 0;
}
.pp-desc {
  font-family: var(--font-b);
  font-size  : 12px;
  line-height: 1.60;
  color      : rgba(255,255,255,.82);
  margin-top : 6px;
  max-height : 0;
  overflow   : hidden;
  opacity    : 0;
  transform  : translateY(5px);
  transition : max-height .40s cubic-bezier(.22,1,.36,1),
               opacity .34s ease,
               transform .34s cubic-bezier(.22,1,.36,1);
}
.pp-slot:hover .pp-desc { max-height: 68px; opacity: 1; transform: translateY(0); }

/* Circle — OUTSIDE .pp-card, never clipped */
.pp-circle {
  position     : absolute;
  bottom       : calc(var(--pp-cut)/2 - var(--pp-r));  /* 11px */
  right        : calc(var(--pp-cut)/2 - var(--pp-r));  /* 11px */
  z-index      : 20;
  width        : calc(var(--pp-r) * 2);                /* 44px */
  height       : calc(var(--pp-r) * 2);                /* 44px */
  border-radius: 50%;
  background   : #ffffff;
  box-shadow   : 0 2px 14px rgba(0,0,0,.26), 0 0 0 1.5px rgba(10,33,61,.12);
  display      : flex;
  align-items  : center;
  justify-content: center;
  pointer-events: none;
  transition   : background .28s ease, box-shadow .28s ease, transform .28s cubic-bezier(.22,1,.36,1);
}
.pp-slot:hover .pp-circle {
  background: var(--gold);
  box-shadow: 0 4px 18px rgba(255,205,52,.45), 0 0 0 1.5px var(--gold-dk);
  transform : scale(1.10);
}

/* Single arrow — rotates -45° (↗) → 0° (→) on hover. No fade. No slide. */
.pp-arrow {
  color    : #0a213d;
  font-size: 14px;
  display  : block;
  transform: rotate(-45deg);
  transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.pp-slot:hover .pp-arrow { transform: rotate(0deg); }

.pp-cta { text-align: center; margin-top: 44px; }


/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  position   : relative;
  z-index    : 10;
  padding    : 28px 0;
  text-align : center;
  font-family: var(--font-b);
  font-size  : 13px;
  background : #ffffff;
  color      : rgba(10,33,61,0.52);
  border-top : 2px solid var(--gold);
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1060px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .sh-wrap { bottom: 24px; }
}
@media (max-width: 860px) {
  .header { top: 12px; left: 3%; right: 3%; }
  .nav-pill { padding: 7px 8px 7px 14px; gap: 16px; }
  .logo-wrap { padding: 0; }
  .logo-wrap img { height: 30px; }
  /* Hide divider and second brand logo at 860px — prevents orphan pipe on tablets too */
  .nav-divider { display: none !important; }
}
@media (max-width: 768px) {
  .hero-title { font-size: 44px; }
  .hstat-n   { font-size: 26px; }
  .pp-grid   { grid-template-columns: 1fr; grid-template-rows: repeat(4, 185px); }
  .features-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .header { left: 2%; right: 2%; }
  .nav-divider { display: none !important; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-title { font-size: 36px; }
  .hero-stats { gap: 4px; flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 480px) {
  :root { --pp-cut: 56px; --pp-r: 19px; }
  .pp-grid { grid-template-rows: repeat(4, 170px); gap: 10px; }
  .pp-name { font-size: 16px; }
}
/* ================================================================
   MOBILE-FIRST IMPROVEMENTS
   ================================================================ */



/* ── WHY CHOOSE / FEATURES MOBILE ── */
@media (max-width: 768px) {
  .why-choose { padding: 64px 16px; }
  .features-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .feature-card h4 { font-size: 10px; }
  .feature-card i { font-size: 20px; }
  .section-title { font-size: clamp(26px, 7vw, 42px); }
  .section-subtitle { font-size: 14px; }
  .section-header { margin-bottom: 36px; }
}

@media (max-width: 480px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PRODUCT PREVIEW MOBILE ── */
@media (max-width: 768px) {
  .products-preview { padding: 64px 16px; }
  .pp-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 200px); gap: 12px; }
}

@media (max-width: 480px) {
  :root { --pp-cut: 52px; --pp-r: 18px; }
  .pp-grid { grid-template-rows: repeat(4, 170px); }
}

/* ── BRAND CAROUSEL MOBILE ── */
@media (max-width: 768px) {
  .dharani-deals { padding: 56px 0; }
  .logo-item { min-width: 120px; height: 64px; margin-right: 12px; }
  .logo-item img { max-width: 90px; max-height: 40px; }
}

/* ── FOOTER MOBILE ── */
@media (max-width: 480px) {
  .site-footer { font-size: 12px; padding: 22px 16px; }
}

/* ── PERFORMANCE: reduce motion on mobile ── */
@media (max-width: 768px) {
  .hfb-ring { animation: none; }
  .logo-track { animation-duration: 20s; }
}


/* ══════════════════════════════════════════
   MOBILE NAV OVERLAY — clean implementation
   Always hidden; only .open makes it visible
   Works on ALL screen sizes correctly
   ══════════════════════════════════════════ */

/* iOS Safari fix */
.nav-pill.nav-open {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(255,255,255,0.95);
}

/* ── Mobile nav: compact glassmorphism dropdown ── */
.mobile-nav-overlay {
  display: none !important;
  position: fixed;
  top: 78px;
  left: 16px;
  right: 16px;
  /* No transform — Chrome mobile position:fixed + transform = broken */
  width: auto;
  max-width: 340px;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  background: rgba(8, 28, 54, 0.97); /* Solid for Chrome — no blur needed on dark bg */
  border-radius: 20px;
  border: 1px solid rgba(255, 205, 52, 0.25);
  box-shadow:
    0 8px 32px rgba(10, 33, 61, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  z-index: 99999;
}

.mobile-nav-overlay.open {
  display: flex !important;
  animation: navDropIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes navDropIn {
  from { opacity: 0; transform: translateY(-6px) scaleY(0.92); }
  to   { opacity: 1; transform: translateY(0)    scaleY(1); }
}

.mobile-nav-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,205,52,0.5), transparent);
}

.mobile-nav-overlay a {
  font-family: var(--font-b, 'DM Sans', sans-serif);
  font-size: 16px;
  font-weight: 600;
  padding: 12px 20px;
  color: rgba(255, 255, 255, 0.80);
  border-radius: 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.18s ease, color 0.18s ease;
  position: relative;
}
.mobile-nav-overlay a::before {
  content: '';
  position: absolute;
  left: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,205,52,0.4);
  transition: background 0.18s ease;
}
.mobile-nav-overlay a.active {
  background: rgba(255, 205, 52, 0.18);
  color: #ffcd34;
  font-weight: 700;
}
.mobile-nav-overlay a.active::before {
  background: #ffcd34;
}
.mobile-nav-overlay a:not(.active):hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

/* No separate close button — tapping hamburger again closes it */
.mobile-nav-close { display: none; }


/* ── Mobile breakpoint ── */

/* ══════════════════════════════════════════════════
   MOBILE TWO-PILL HEADER
   Desktop: hide mob-header-bar, show nav-pill
   Mobile:  hide nav-pill, show mob-header-bar
══════════════════════════════════════════════════ */

/* Always hidden on desktop */
.mob-header-bar {
  display: none;
}

@media (max-width: 768px) {

  /* Hide desktop nav-pill */
  .nav-pill { display: none !important; }

  /* Show mobile two-pill bar */
  .mob-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
  }

  /* ── Left pill: logos ── */
  .mob-logo-pill {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 8px 16px 8px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(255, 205, 52, 0.65);
    box-shadow: 0 4px 20px rgba(10, 33, 61, 0.13);
    min-height: 50px;
  }
  .mob-logo-main {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }
  .mob-logo-div {
    display: block;
    width: 1.5px;
    height: 24px;
    background: rgba(10, 33, 61, 0.20);
    margin: 0 12px;
    flex-shrink: 0;
    border-radius: 2px;
  }
  .mob-logo-brand {
    height: 30px;
    width: auto;
    display: block;
    flex-shrink: 0;
  }

  /* ── Right pill: hamburger ── */
  .mob-burger-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 54px;
    height: 50px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid rgba(255, 205, 52, 0.65);
    box-shadow: 0 4px 20px rgba(10, 33, 61, 0.13);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .mob-burger-pill:hover {
    background: rgba(255, 205, 52, 0.18);
    border-color: rgba(255, 205, 52, 0.75);
  }
  .mob-burger-pill span {
    display: block;
    width: 20px;
    height: 2px;
    background: #0a213d;
    border-radius: 2px;
    transition: transform 0.32s ease, opacity 0.22s ease, width 0.22s ease;
    pointer-events: none;
  }
  /* Animate to X when open */
  .mob-burger-pill.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .mob-burger-pill.open span:nth-child(2) { opacity: 0; width: 0; }
  .mob-burger-pill.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .mob-burger-pill.open {
    background: rgba(10, 33, 61, 0.85);
    border-color: rgba(255, 205, 52, 0.60);
  }
  .mob-burger-pill.open span { background: #ffffff; }

  /* Header position on mobile */
  .header {
    top: 14px;
    left: 4%;
    right: 4%;
  }
}

/* ══════════════════════════════════════════════════
   MOBILE HERO — static last-frame image (1:1 square)
   Desktop: canvas animates, static img hidden
   Mobile:  canvas hidden, static img shown instantly
══════════════════════════════════════════════════ */

/* Desktop: always hide static mobile image */
#hero-mobile-img {
  display: none;
}

/* ── Mobile hero layout ── */
@media (max-width: 768px) {

  /* 1. Collapse the GSAP pin-wrapper — no scroll-sequence on mobile */
  .hero-pin-wrapper {
    height: auto !important;
    min-height: 0 !important;
  }

  /* 2. Hero section — vertical stack, enough top gap to clear floating header
        Header height = 14px top + 50px pill + 6px gap ≈ 70px
        We give 88px top padding so badge never touches the pills            */
  .hero {
    height: auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center;
    padding: 88px 5% 48px !important;
    gap: 0;
    overflow: visible;
    background: #ffffff;
  }

  /* 3. Left content column — full width */
  .hero-left {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
  }

  /* 4. Badge */
  .hero-badge {
    margin-bottom: 16px;
    font-size: 12px;
    padding: 7px 14px;
  }

  /* 5. Title */
  .hero-title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.1 !important;
    margin-bottom: 14px;
  }

  /* 6. Subtitle */
  .hero-sub {
    font-size: 14.5px;
    line-height: 1.65;
    max-width: 92%;
    text-align: center;
    margin-bottom: 22px;
  }

  /* 7. CTA buttons */
  .hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px;
    width: 100%;
    max-width: 300px;
    margin-bottom: 24px;
  }
  .btn-grad { min-height: 50px; justify-content: center; font-size: 15px; }

  /* 8. Stats row */
  .hero-stats {
    margin: 0 auto;
    gap: 0;
    flex-wrap: nowrap;
    justify-content: center;
  }
  .hstat-div { display: none; }
  .hstat     { padding: 0 16px; }
  .hstat-n   { font-size: 24px; }

  /* 9. Hide canvas + progress — static img replaces it */
  #hero-canvas       { display: none !important; }
  #seq-progress-wrap { display: none !important; }
  #hfb-scroll-hint   { display: none !important; }

  /* 10. Frame box — 1:1 SQUARE, full width */
  .hero-frame-box {
    position: relative !important;
    width: clamp(280px, 92vw, 400px) !important;
    aspect-ratio: 1 / 1 !important;        /* ← USER REQUEST: square */
    flex-shrink: 0;
    margin: 0 auto;
    border-radius: 24px !important;
    overflow: hidden !important;
    opacity: 1 !important;
    transform: none !important;
    /* Decorative corner brackets visible */
    border: 2px solid rgba(255, 205, 52, 0.55);
    box-shadow: 0 8px 32px rgba(10,33,61,0.14);
  }

  /* 11. Static image fills the square frame */
  #hero-mobile-img {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 60% 20%;  /* show oil can mouth + pour */
    border-radius: inherit;
  }

  /* 12. Corner brackets (.hfb-c) — keep them visible inside the square */
  .hfb-ring { display: none; }
  .hfb-c    { opacity: 1 !important; }
}

/* ── Small phones ── */
@media (max-width: 480px) {
  .hero   { padding: 82px 4% 40px !important; }
  .hero-title { font-size: clamp(26px, 8vw, 36px) !important; }
  .hero-frame-box { width: clamp(260px, 94vw, 340px) !important; }
  .hero-sub { font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   PRODUCT CARDS — touch animation (.touched class)
   JS adds .touched on touchstart, removes on touchend
   Mirrors all :hover states for mobile touch feel
══════════════════════════════════════════════════ */

/* Make pp-card a div not an anchor — remove cursor:pointer */
.pp-card {
  cursor: default;
}

/* Touch state = identical to hover state */
.pp-slot.touched .pp-card {
  transform : translateY(-5px) scale(1.008);
  box-shadow: 0 16px 44px rgba(10,33,61,0.22);
}
.pp-slot.touched .pp-img     { transform: scale(1.07); }
.pp-slot.touched .pp-overlay {
  background: linear-gradient(158deg, rgba(5,14,28,.20) 0%, rgba(5,14,28,.91) 100%);
}
.pp-slot.touched .pp-desc    { max-height: 68px; opacity: 1; transform: translateY(0); }
.pp-slot.touched .pp-circle  {
  background: var(--gold);
  box-shadow: 0 4px 18px rgba(255,205,52,.45), 0 0 0 1.5px var(--gold-dk);
  transform : scale(1.10);
}
.pp-slot.touched .pp-arrow   { transform: rotate(0deg); }