/* ==========================================================================
   AANGAN — MOTION & PREMIUM VISUAL LAYER
   Loads last. Turns a static page into a designed, animated experience.

    1. Page load choreography
    2. Aurora / mesh backgrounds
    3. Headline reveal (word-by-word mask)
    4. Scroll reveal variants
    5. Magnetic + shine buttons
    6. Card 3D tilt & image treatments
    7. Animated counters, badges, marquee
    8. Section dividers & decorative grain
    9. Scroll progress + custom scrollbar
   10. Micro-interactions
   ========================================================================== */

/* ============================================ 1. PAGE LOAD CHOREOGRAPHY == */
/* Everything starts hidden only when JS is alive — no-JS users see it all. */
html.ag-js .ag-hero-anim{ opacity:0; }

@keyframes agRise{
  from{ opacity:0; transform:translate3d(0,26px,0); filter:blur(6px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
@keyframes agFade{ from{opacity:0} to{opacity:1} }
@keyframes agScaleIn{
  from{ opacity:0; transform:scale(.94) translateY(20px); }
  to  { opacity:1; transform:none; }
}
@keyframes agSlideL{
  from{ opacity:0; transform:translate3d(-28px,0,0); }
  to  { opacity:1; transform:none; }
}

html.ag-js.ag-ready .ag-hero-anim{
  animation:agRise .85s cubic-bezier(.19,1,.22,1) forwards;
}
html.ag-js.ag-ready .ag-hero-anim[data-d="1"]{ animation-delay:.06s }
html.ag-js.ag-ready .ag-hero-anim[data-d="2"]{ animation-delay:.14s }
html.ag-js.ag-ready .ag-hero-anim[data-d="3"]{ animation-delay:.30s }
html.ag-js.ag-ready .ag-hero-anim[data-d="4"]{ animation-delay:.40s }
html.ag-js.ag-ready .ag-hero-anim[data-d="5"]{ animation-delay:.50s }
html.ag-js.ag-ready .ag-hero-anim[data-d="6"]{
  animation:agScaleIn 1.05s cubic-bezier(.19,1,.22,1) .22s forwards;
}

/* ================================================ 2. AURORA BACKGROUNDS == */
/* Slow-drifting brand-coloured light behind the light sections. Sits at
   z-index 0 with content lifted above it. */
.ag-aurora{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;
}
.ag-aurora::before,
.ag-aurora::after{
  content:""; position:absolute; border-radius:50%;
  filter:blur(70px); opacity:.55;
  will-change:transform;
}
.ag-aurora::before{
  width:38rem; height:38rem; top:-14rem; right:-10rem;
  background:radial-gradient(circle,rgba(167,154,218,.55),transparent 66%);
  animation:agDrift1 22s ease-in-out infinite alternate;
}
.ag-aurora::after{
  width:32rem; height:32rem; bottom:-16rem; left:-8rem;
  background:radial-gradient(circle,rgba(122,190,168,.34),transparent 66%);
  animation:agDrift2 27s ease-in-out infinite alternate;
}
@keyframes agDrift1{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(-5rem,4rem,0) scale(1.14) }
}
@keyframes agDrift2{
  from{ transform:translate3d(0,0,0) scale(1) }
  to  { transform:translate3d(4rem,-3rem,0) scale(1.18) }
}
main > section{ position:relative; }
main > section > *:not(.ag-aurora){ position:relative; z-index:1; }

/* dark bands get a richer, deeper glow */
#locations .ag-aurora::before,
#compare .ag-aurora::before,
#contact .ag-aurora::before{
  background:radial-gradient(circle,rgba(124,107,176,.60),transparent 68%);
  opacity:.75;
}
#locations .ag-aurora::after,
#compare .ag-aurora::after,
#contact .ag-aurora::after{
  background:radial-gradient(circle,rgba(90,120,190,.40),transparent 68%);
}

/* ============================================= 3. HEADLINE WORD REVEAL === */
.ag-word{
  display:inline-block; overflow:hidden; vertical-align:top;
  padding-bottom:.06em; margin-bottom:-.06em;
}
.ag-word > i{
  display:inline-block; font-style:inherit;
  transform:translateY(112%) rotate(3deg);
  transition:transform .95s cubic-bezier(.19,1,.22,1);
}
.ag-in .ag-word > i,
html.ag-ready .ag-hero-anim .ag-word > i{ transform:none; }

/* the accent word gets an animated underline sweep */
.ag-accent-word{ position:relative; display:inline-block; }
.ag-accent-word::after{
  content:""; position:absolute; left:0; right:0; bottom:.08em; height:.09em;
  border-radius:99px;
  background:linear-gradient(90deg,var(--ag-brand-lt),var(--ag-brand));
  transform:scaleX(0); transform-origin:left;
  transition:transform 1s cubic-bezier(.19,1,.22,1) .75s;
}
html.ag-ready .ag-accent-word::after{ transform:scaleX(1); }

/* ================================================ 4. SCROLL REVEAL ======= */
.ag-reveal{
  opacity:0; transform:translate3d(0,32px,0);
  transition:opacity .8s cubic-bezier(.19,1,.22,1),
             transform .8s cubic-bezier(.19,1,.22,1);
  will-change:opacity,transform;
}
.ag-reveal.ag-in{ opacity:1; transform:none; }

.ag-reveal[data-rev="left"] { transform:translate3d(-38px,0,0); }
.ag-reveal[data-rev="right"]{ transform:translate3d(38px,0,0); }
.ag-reveal[data-rev="scale"]{ transform:scale(.93); }
.ag-reveal[data-rev="blur"] { filter:blur(9px); transform:translate3d(0,20px,0); }
.ag-reveal[data-rev="blur"].ag-in{ filter:blur(0); }

/* staggered children (cards, tiles, list items) */
.ag-stagger > *{
  opacity:0; transform:translate3d(0,26px,0);
  transition:opacity .65s cubic-bezier(.19,1,.22,1),
             transform .65s cubic-bezier(.19,1,.22,1);
}
.ag-stagger.ag-in > *{ opacity:1; transform:none; }
.ag-stagger.ag-in > *:nth-child(1){ transition-delay:.03s }
.ag-stagger.ag-in > *:nth-child(2){ transition-delay:.09s }
.ag-stagger.ag-in > *:nth-child(3){ transition-delay:.15s }
.ag-stagger.ag-in > *:nth-child(4){ transition-delay:.21s }
.ag-stagger.ag-in > *:nth-child(5){ transition-delay:.27s }
.ag-stagger.ag-in > *:nth-child(6){ transition-delay:.33s }
.ag-stagger.ag-in > *:nth-child(n+7){ transition-delay:.38s }

/* ======================================== 5. MAGNETIC + SHINE BUTTONS ==== */
.ag-mag{
  position:relative; overflow:hidden;
  transition:transform .35s cubic-bezier(.19,1,.22,1),
             box-shadow .35s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
/* travelling sheen */
.ag-mag::after{
  content:""; position:absolute; top:0; left:-140%;
  width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-22deg);
  transition:left .75s cubic-bezier(.19,1,.22,1);
  pointer-events:none;
}
.ag-mag:hover::after{ left:150%; }

/* primary CTA gets a soft animated halo */
.ag-glow{ position:relative; }
.ag-glow::before{
  content:""; position:absolute; inset:-3px; z-index:-1; border-radius:inherit;
  background:linear-gradient(120deg,var(--ag-brand-lt),var(--ag-brand),var(--ag-brand-lt));
  background-size:220% 220%;
  opacity:0; filter:blur(9px);
  transition:opacity .4s ease;
  animation:agHue 5s linear infinite;
}
.ag-glow:hover::before{ opacity:.85; }
@keyframes agHue{
  0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

/* arrow nudge on any CTA containing an arrow */
.ag-arrow{ display:inline-block; transition:transform .35s cubic-bezier(.19,1,.22,1); }
a:hover > .ag-arrow, button:hover > .ag-arrow{ transform:translateX(4px); }

/* ==================================== 6. CARD TILT & IMAGE TREATMENTS ==== */
.ag-tilt{
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.19,1,.22,1),
             box-shadow .45s cubic-bezier(.19,1,.22,1);
  will-change:transform;
}
.ag-tilt > *{ transform:translateZ(0); }

/* project card imagery: subtle zoom + colour lift on hover */
.ap-media img,
.why-card, .loc-card{ will-change:transform; }
.ap-media{ position:relative; }
.ap-media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(28,26,34,.30) 100%);
  opacity:0; transition:opacity .45s ease;
}
.ap-card:hover .ap-media::after{ opacity:1; }
.ap-card:hover .ap-media img{ transform:scale(1.08); }
.ap-media img{ transition:transform .8s cubic-bezier(.19,1,.22,1); }

/* badge pop-in when the card reveals */
.ap-badge, .ap-prio{
  animation:agPop .5s cubic-bezier(.19,1,.22,1) both;
}
@keyframes agPop{ from{opacity:0;transform:scale(.7)} to{opacity:1;transform:none} }

/* ================================= 7. COUNTERS / BADGES / MARQUEE ======== */
.ag-count{ font-variant-numeric:tabular-nums; }

/* live "pulse" dot in the hero eyebrow */
.ag-pulse{ position:relative; }
.ag-pulse::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:inherit; animation:agPulse 2.1s ease-out infinite;
}
@keyframes agPulse{
  0%{ transform:scale(1); opacity:.75 }
  70%{ transform:scale(3.2); opacity:0 }
  100%{ opacity:0 }
}

/* trusted-builder marquee strip */
.ag-marquee{
  position:relative; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ag-marquee__track{
  display:flex; gap:3rem; width:max-content;
  animation:agScroll 34s linear infinite;
}
.ag-marquee:hover .ag-marquee__track{ animation-play-state:paused; }
@keyframes agScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ag-marquee__item{
  font:800 clamp(.95rem,.85rem+.4vw,1.2rem) Inter,system-ui,sans-serif;
  letter-spacing:-.01em; color:var(--ag-mute);
  white-space:nowrap; display:flex; align-items:center; gap:.6rem;
  opacity:.72; transition:opacity .3s ease, color .3s ease;
}
.ag-marquee__item:hover{ opacity:1; color:var(--ag-brand); }
.ag-marquee__item::before{
  content:""; width:5px; height:5px; border-radius:99px;
  background:var(--ag-brand-lt); flex:none;
}

/* ============================ 8. SECTION DIVIDERS & GRAIN ================ */
.ag-grain::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================ 9. SCROLL PROGRESS + SCROLLBAR ========= */
#agProgress{
  position:fixed; top:0; left:0; height:3px; width:100%;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg,var(--ag-brand-lt),var(--ag-brand),#5fc3a4);
  z-index:70; pointer-events:none;
  box-shadow:0 0 14px rgba(124,107,176,.65);
}
@media (min-width:768px){
  *{ scrollbar-width:thin; scrollbar-color:var(--ag-brand-lt) transparent; }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-track{ background:#efecf6; }
  ::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--ag-brand-lt),var(--ag-brand));
    border-radius:99px; border:3px solid #efecf6;
  }
  ::-webkit-scrollbar-thumb:hover{ background:var(--ag-brand); }
}

/* ==================================== 10. MICRO-INTERACTIONS ============= */
/* section eyebrow rule grows on reveal */
main p.uppercase.tracking-\[0\.22em\]::before{
  transition:width .7s cubic-bezier(.19,1,.22,1) .1s;
}
.ag-in p.uppercase.tracking-\[0\.22em\]::before{ width:2.6rem; }

/* FAQ opens with a slide */
#faq details[open] > p,
#faq details[open] > div{ animation:agRise .45s cubic-bezier(.19,1,.22,1); }

/* location tile arrow */
.loc-go{ transition:transform .35s cubic-bezier(.19,1,.22,1), color .3s; }
.loc-card:hover .loc-go{ transform:translateX(4px); }

/* why-card icon spring */
.why-ico{ transition:transform .5s cubic-bezier(.34,1.56,.64,1); }
.why-card:hover .why-ico{ transform:translateY(-5px) rotate(-7deg) scale(1.07); }

/* testimonial stars cascade */
#testimonials .ag-in span{ animation:agPop .4s cubic-bezier(.19,1,.22,1) both; }

/* form focus lift */
#contactForm input:focus, #contactForm textarea:focus{ transform:translateY(-2px); }
#contactForm input, #contactForm textarea{ transition:transform .3s cubic-bezier(.19,1,.22,1), border-color .3s, box-shadow .3s, background .3s; }

/* chat launcher — gentle attention breathe, stops on hover */
#ag-launch{ animation:agBreathe 3.4s ease-in-out infinite; }
#ag-launch:hover{ animation:none; }
@keyframes agBreathe{
  0%,100%{ box-shadow:0 12px 34px rgba(0,0,0,.28) }
  50%    { box-shadow:0 12px 34px rgba(0,0,0,.28), 0 0 0 10px rgba(124,107,176,.14) }
}

/* ============================ REDUCED MOTION — honour it completely ====== */
@media (prefers-reduced-motion:reduce){
  html.ag-js .ag-hero-anim{ opacity:1 !important; animation:none !important; }
  .ag-word > i{ transform:none !important; }
  .ag-accent-word::after{ transform:scaleX(1) !important; }
  .ag-reveal, .ag-stagger > *{
    opacity:1 !important; transform:none !important; filter:none !important;
  }
  .ag-aurora::before, .ag-aurora::after,
  .ag-marquee__track, #ag-launch, .ag-pulse::after,
  .ag-glow::before{ animation:none !important; }
  .ag-mag::after{ display:none; }
  #agProgress{ display:none; }
}

/* ==========================================================================
   COLOUR HARMONY PASS
   The location tiles and why-cards were using six unrelated hues (pink, gold,
   sky blue…). They looked fine alone but read as a different site from the
   purple hero. Everything is now tuned to one violet-anchored family:
   analogous hues (indigo → violet → orchid) plus two supporting tones that
   share the same saturation and lightness, so they feel deliberate.
   ========================================================================== */

/* --------------------------------------------- location tiles (dark) ---- */
.loc-1{ --lc:#b3a4e8 }   /* violet    — brand */
.loc-2{ --lc:#8fa8e8 }   /* indigo    */
.loc-3{ --lc:#c9a2e0 }   /* orchid    */
.loc-4{ --lc:#7fb6d8 }   /* dusk blue */
.loc-5{ --lc:#d3a0d0 }   /* mauve     */
.loc-6{ --lc:#9fb0e0 }   /* periwinkle*/

/* Tone the wash down so the *card* reads first and the accent supports it. */
.loc-card::before{ opacity:.30; }
.loc-card:hover::before{ opacity:.50; }
.loc-card{
  background:rgba(255,255,255,.038);
  border-color:rgba(255,255,255,.10);
}
.loc-count{
  background:color-mix(in srgb, var(--lc) 82%, #ffffff);
  color:#1b1826;
}

/* ---------------------------------------------- why cards (light) ------- */
.why-1{ --why-solid:#7c6bb0; --why-tint:#e2dcf3; --why-shadow:rgba(124,107,176,.32);
        background:#f5f2fc; border-color:#e6e0f5; }
.why-2{ --why-solid:#5a6fb8; --why-tint:#dde3f5; --why-shadow:rgba(90,111,184,.28);
        background:#f2f5fc; border-color:#e0e6f5; }
.why-3{ --why-solid:#9a63ad; --why-tint:#eddcf2; --why-shadow:rgba(154,99,173,.28);
        background:#faf3fc; border-color:#f0e4f5; }

/* -------------------------------------- section banding, re-tuned ------- */
/* Light sections now share a faint violet cast instead of neutral grey, so
   moving between light and dark bands feels like one continuous surface. */
#projects{ background:linear-gradient(180deg,#eeebf7 0%,#f7f5fc 100%) !important; }
#why{ background:#fdfcff !important; }
#faq{ background:linear-gradient(180deg,#f7f5fc 0%,#eeebf7 100%) !important; }
#emi{ background:#fdfcff !important; }
#testimonials{ background:linear-gradient(180deg,#f7f5fc 0%,#efecf8 100%) !important; }

/* Dark bands: warm the near-black toward the brand so it stops reading grey */
#locations, #compare, #contact{ background:#221f2e !important; }

/* the aurora on dark bands leans violet/indigo, matching the tiles */
#locations .ag-aurora::before,
#compare .ag-aurora::before,
#contact .ag-aurora::before{
  background:radial-gradient(circle,rgba(140,120,215,.55),transparent 68%);
}
#locations .ag-aurora::after,
#compare .ag-aurora::after,
#contact .ag-aurora::after{
  background:radial-gradient(circle,rgba(110,135,205,.38),transparent 68%);
}
/* light-band aurora: softer, same family */
#projects .ag-aurora::before, #why .ag-aurora::before,
#faq .ag-aurora::before, #emi .ag-aurora::before,
#testimonials .ag-aurora::before{
  background:radial-gradient(circle,rgba(167,154,218,.42),transparent 66%);
}
#projects .ag-aurora::after, #why .ag-aurora::after,
#faq .ag-aurora::after, #emi .ag-aurora::after,
#testimonials .ag-aurora::after{
  background:radial-gradient(circle,rgba(150,165,225,.30),transparent 66%);
}

/* ------------------- smoother handoff between light and dark bands ------ */
#locations::after, #compare::after, #contact::after{
  content:""; position:absolute; left:0; right:0; top:-1px; height:5rem;
  z-index:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(247,245,252,.55),transparent);
}

/* status badges pulled into the same family */
.ap-new,  .hs-new    { background:#3f8f70 !important; }
.ap-uc,   .hs-uc     { background:#5a6fb8 !important; }
.ap-partial,.hs-partial{ background:#a8763c !important; }
.ap-ready,.hs-ready  { background:#2a2636 !important; }
.ap-prio{ background:linear-gradient(135deg,#b3a4e8,#8f7ed0) !important; color:#1b1826 !important; }

/* ==========================================================================
   ANIMATION REFINEMENT
   Longer, softer curves; parallax on the hero; shimmer on headings.
   ========================================================================== */

/* Headline words rise a touch slower and settle more gently. */
.ag-word > i{ transition-duration:1.05s; }

/* A slow sheen that travels across big headings once they land. */
main h1, main section h2{
  background-image:linear-gradient(100deg,
    currentColor 0%, currentColor 38%,
    color-mix(in srgb, currentColor 62%, #a79ada) 50%,
    currentColor 62%, currentColor 100%);
  background-size:300% 100%;
  background-position:120% 0;
  -webkit-background-clip:text; background-clip:text;
}
html.ag-ready main h1,
.ag-in h2{ animation:agSheen 2.6s cubic-bezier(.19,1,.22,1) .55s 1 forwards; }
@keyframes agSheen{ to{ background-position:-40% 0 } }

/* Buttons: softer, slower magnetic settle */
.ag-mag{ transition:transform .5s cubic-bezier(.19,1,.22,1), box-shadow .45s ease; }
.ag-mag::after{ transition:left .95s cubic-bezier(.19,1,.22,1); }

/* Cards ease more slowly into their tilt */
.ag-tilt{ transition:transform .6s cubic-bezier(.19,1,.22,1), box-shadow .5s ease; }

/* Reveal: slightly longer, with a gentler travel */
.ag-reveal{ transition-duration:.95s; }
.ag-stagger > *{ transition-duration:.8s; }
.ag-stagger.ag-in > *:nth-child(1){ transition-delay:.04s }
.ag-stagger.ag-in > *:nth-child(2){ transition-delay:.12s }
.ag-stagger.ag-in > *:nth-child(3){ transition-delay:.20s }
.ag-stagger.ag-in > *:nth-child(4){ transition-delay:.28s }
.ag-stagger.ag-in > *:nth-child(5){ transition-delay:.36s }
.ag-stagger.ag-in > *:nth-child(6){ transition-delay:.44s }

/* Aurora drifts more slowly so it never distracts */
.ag-aurora::before{ animation-duration:34s; }
.ag-aurora::after { animation-duration:41s; }

/* Hero parallax — the slider drifts a little as you scroll away */
.ag-parallax{ will-change:transform; }

/* Location tile: accent bar grows on hover */
.loc-card::after{ transition:transform .45s cubic-bezier(.19,1,.22,1); transform-origin:top; }
.loc-card:hover::after{ transform:scaleY(1.06); }

/* Badge shimmer on the priority ribbon */
.ap-prio{ position:relative; overflow:hidden; }
.ap-prio::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65),transparent 70%);
  transform:translateX(-100%);
  animation:agRibbon 3.6s ease-in-out infinite;
}
@keyframes agRibbon{ 0%,72%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }

@media (prefers-reduced-motion:reduce){
  main h1, main section h2{ animation:none !important; background-image:none !important; }
  .ap-prio::after{ animation:none !important; display:none; }
}

/* Pune guide — the injected h2 was inheriting body size, not the section scale */
#pune-guide h2{
  font-size:var(--fs-h2) !important;
  line-height:1.06 !important;
  letter-spacing:-.025em !important;
  font-weight:900;
  color:var(--ag-ink);
  margin:0 0 1.1rem !important;
}
#pune-guide .sg-lede{ font-size:var(--fs-base); }
#pune-guide{ position:relative; }

/* ==========================================================================
   COLOUR PASS 2 — visible, not washed out
   The harmony pass went too far: all six tiles collapsed into the same
   grey-lavender and the why-cards were near-white. Colour needs to be
   *felt*. These are still one violet-anchored family, but each tile now
   carries a real, saturated identity you can see across the room.
   ========================================================================== */

/* ---------------------------------------------- location tiles (dark) --- */
.loc-1{ --lc:#a78bfa; --lc2:#7c5cf0 }  /* violet   */
.loc-2{ --lc:#5fd3c4; --lc2:#22a99b }  /* teal     */
.loc-3{ --lc:#f0a868; --lc2:#dd8235 }  /* amber    */
.loc-4{ --lc:#6cb4f5; --lc2:#3b8ede }  /* azure    */
.loc-5{ --lc:#f08bb4; --lc2:#dd5c94 }  /* rose     */
.loc-6{ --lc:#c3d05f; --lc2:#9aab2c }  /* lime     */

.loc-card{
  background:linear-gradient(150deg,
      color-mix(in srgb, var(--lc) 22%, transparent) 0%,
      rgba(255,255,255,.05) 55%,
      rgba(255,255,255,.03) 100%) !important;
  border:1px solid color-mix(in srgb, var(--lc) 34%, transparent) !important;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
}
.loc-card::before{
  background:radial-gradient(120% 90% at 0% 0%,
      color-mix(in srgb, var(--lc) 34%, transparent) 0%, transparent 62%) !important;
  opacity:1 !important;
  transition:opacity .45s var(--ease);
}
.loc-card:hover{
  border-color:color-mix(in srgb, var(--lc) 70%, transparent) !important;
  box-shadow:0 16px 40px color-mix(in srgb, var(--lc) 28%, transparent),
             0 4px 14px rgba(0,0,0,.3);
}
.loc-card:hover::before{ opacity:1.35 !important }
/* thicker, gradient accent bar */
.loc-card::after{
  width:4px !important;
  background:linear-gradient(180deg, var(--lc), var(--lc2)) !important;
  box-shadow:0 0 14px color-mix(in srgb, var(--lc) 60%, transparent);
}
.loc-count{
  background:linear-gradient(135deg, var(--lc), var(--lc2)) !important;
  color:#15121c !important;
  box-shadow:0 3px 10px color-mix(in srgb, var(--lc) 45%, transparent);
}
.loc-price{ color:var(--lc) !important; }
.loc-name{ color:#fff !important }

/* ----------------------------------------------- why cards (light) ------ */
.why-1{ --why-solid:#7c5cf0; --why-tint:#ddd3ff; --why-shadow:rgba(124,92,240,.38);
        background:linear-gradient(155deg,#efe9ff 0%,#f9f7ff 62%) !important;
        border-color:#ded3fb !important; }
.why-2{ --why-solid:#1aa593; --why-tint:#c6efe8; --why-shadow:rgba(26,165,147,.32);
        background:linear-gradient(155deg,#e2f7f3 0%,#f6fdfb 62%) !important;
        border-color:#c9ece5 !important; }
.why-3{ --why-solid:#dd8235; --why-tint:#fbe0c6; --why-shadow:rgba(221,130,53,.32);
        background:linear-gradient(155deg,#fdefe0 0%,#fffaf5 62%) !important;
        border-color:#f8ddc4 !important; }

.why-ico{
  background:linear-gradient(135deg,
      var(--why-solid),
      color-mix(in srgb, var(--why-solid) 62%, #000)) !important;
  box-shadow:0 8px 22px var(--why-shadow) !important;
}
.why-card::after{ opacity:.85 !important }
.why-tag{
  background:#fff !important;
  border-color:color-mix(in srgb, var(--why-solid) 32%, transparent) !important;
  color:var(--why-solid) !important;
  font-weight:800;
}
.why-card:hover{
  border-color:color-mix(in srgb, var(--why-solid) 45%, transparent) !important;
  box-shadow:0 18px 44px var(--why-shadow) !important;
}

/* ------------------------------------------- dark band, richer ---------- */
#locations, #compare, #contact{
  background:linear-gradient(165deg,#221f2e 0%,#1b1826 55%,#241f34 100%) !important;
}
#locations .ag-aurora::before,
#compare .ag-aurora::before,
#contact .ag-aurora::before{
  background:radial-gradient(circle,rgba(150,110,240,.42),transparent 68%) !important;
  opacity:.9;
}
#locations .ag-aurora::after,
#compare .ag-aurora::after,
#contact .ag-aurora::after{
  background:radial-gradient(circle,rgba(50,190,175,.26),transparent 68%) !important;
}

/* section eyebrow gets the brand colour back */
#locations p.uppercase, #compare p.uppercase, #contact p.uppercase{
  color:#b9a6ff !important;
}

/* ==========================================================================
   LAYOUT & RHYTHM PASS
   Two remaining problems from the screenshot:
     • #locations — the heading column and the tile grid felt like two
       unrelated blocks floating in a lot of dead space.
     • #why — three flat rectangles in a row, no hierarchy, tiny icons.
   ========================================================================== */

/* ------------------------------------------------------ LOCATIONS ------- */
#locations > .mx-auto,
#locations > div{
  align-items:start !important;
  gap:clamp(2rem,4vw,4.5rem) !important;
}
/* the copy column sticks while the tiles scroll past — feels intentional */
@media (min-width:1024px){
  #locations > div > div:first-of-type{
    position:sticky; top:7rem;
  }
}
#locations h2{ margin-bottom:1.1rem !important; }
#locations p.text-lg{ max-width:26ch; }

/* a small stat line under the copy ties the two columns together */
#locations .ag-locstat{
  display:flex; gap:1.6rem; flex-wrap:wrap;
  margin-top:1.8rem; padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.14);
}
#locations .ag-locstat div{ display:flex; flex-direction:column; gap:.15rem; }
#locations .ag-locstat b{
  font:900 clamp(1.35rem,1.1rem+.7vw,1.8rem) Inter,system-ui,sans-serif;
  background:linear-gradient(135deg,#c9b8ff,#8fd8cc);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.1;
}
#locations .ag-locstat span{
  font:600 .75rem Inter,sans-serif; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
}

.loc-grid{ gap:1rem !important; }
.loc-card{ min-height:172px; padding:1.3rem 1.35rem 1.2rem !important; }
.loc-num{ color:rgba(255,255,255,.34) !important; }
.loc-desc{ color:rgba(255,255,255,.66) !important; }

/* ------------------------------------------------------------ WHY ------- */
#why > div{ max-width:80rem; margin-inline:auto; }
#why h2{ max-width:16ch; }
/* give the section a lead-in line so it isn't heading-then-boxes */
#why .ag-whylede{
  max-width:52ch;
  margin:1.1rem 0 0;
  font-size:var(--fs-lg);
  line-height:1.7;
  color:var(--ag-ink-soft);
}
.why-grid{ margin-top:clamp(2.5rem,5vw,4rem) !important; gap:1.15rem !important; }
.why-card{
  padding:2.1rem 1.85rem 1.75rem !important;
  border-radius:1.6rem !important;
  min-height:270px;
}
.why-ico{
  width:3.6rem !important; height:3.6rem !important;
  border-radius:1.15rem !important;
  margin-bottom:1.7rem !important;
}
.why-ico svg{ width:1.75rem !important; height:1.75rem !important; }
.why-card h3{ margin-bottom:.7rem !important; }
.why-card p{ color:var(--ag-ink-soft) !important; }
/* a big soft number watermark gives the trio hierarchy */
.why-card{ position:relative; overflow:hidden; }
.why-card .why-idx{
  position:absolute; right:1.1rem; top:.55rem;
  font:900 4.6rem/1 Inter,system-ui,sans-serif;
  color:var(--why-solid); opacity:.08;
  pointer-events:none; user-select:none;
}

/* The 01/02/03 watermarks came out too strong at .08 on a tinted card. */
.why-card .why-idx{
  opacity:.13 !important;
  font-size:3.9rem !important;
  top:.9rem !important; right:1.25rem !important;
  color:color-mix(in srgb, var(--why-solid) 70%, #000) !important;
}
@media (max-width:520px){ .why-card .why-idx{ font-size:3.1rem !important } }

/* ==========================================================================
   WIDTH ALIGNMENT PASS
   Measured problem: most sections use max-w-7xl (1280px) but FAQ and Contact
   were built on max-w-4xl (896px) — a 384px difference. Scrolling the page
   made the content jump narrow, then wide, then narrow again, which is the
   "kuch page full, kuch side chhod raha hai" effect.

   Everything now shares ONE container width and ONE gutter.
   ========================================================================== */

:root{ --ag-container: 1280px; }

/* One rail for every section, including the injected guide. */
main > section > .mx-auto,
main > section > div.mx-auto,
#pune-guide .sg-wrap,
footer > div{
  width:100%;
  max-width:var(--ag-container) !important;
  margin-inline:auto !important;
  padding-inline:var(--sp-gutter) !important;
}

/* FAQ and Contact were the two narrow ones. They keep a comfortable reading
   measure for their inner content, but the *section* now lines up with the
   rest of the page. */
#faq > .mx-auto,
#contact > .mx-auto{ max-width:var(--ag-container) !important; }

#faq .space-y-3,
#faq > .mx-auto > div:last-child{
  max-width:56rem; margin-inline:auto;
}
#contactForm{ max-width:44rem; margin-inline:auto; }
#contact > .mx-auto > div:first-child{ max-width:46rem; margin-inline:auto; }

/* Footer had a 40px left / 80px right imbalance from its own px-6 padding
   fighting the container. */
footer{ padding-inline:0 !important; }

/* Wide screens: let the rail grow, but keep the same gutter on both sides. */
@media (min-width:1600px){ :root{ --ag-container:1400px } }
@media (min-width:1900px){ :root{ --ag-container:1520px } }

/* ==========================================================================
   HEADLINE VISIBILITY FIX  (critical)
   Bug found in testing: 7 of 9 headings were rendering INVISIBLE.

   Cause — the word-mask sets `.ag-word > i { transform: translateY(112%) }`
   and only clears it when an ancestor gains `.ag-in`. The selector required
   the *reveal container itself* to be the animating element, but for several
   sections the h2 sits deeper in the tree, so the rule never matched and the
   words stayed parked below their mask forever.

   Fix — the mask is now opt-IN via `.ag-split` (added by JS only after the
   observer is wired), and ANY of the reveal states clears it. Default state
   for every word is visible, so a heading can never be lost again.
   ========================================================================== */

/* default: always visible */
.ag-word > i{ transform:none; }

/* only animate when JS has explicitly armed it AND the section is pending */
.ag-split .ag-word > i{
  transform:translateY(112%) rotate(3deg);
}
/* any of these ancestors becoming visible releases the words */
.ag-in .ag-word > i,
.ag-in.ag-split .ag-word > i,
html.ag-ready .ag-hero-anim .ag-word > i,
.ag-split.ag-in .ag-word > i{
  transform:none;
}

/* safety net: after the page has settled, nothing stays masked */
html.ag-settled .ag-word > i{ transform:none !important; }

/* The guide and footer sat at 0px because the earlier rule only targeted
   `main > section > .mx-auto`. Target them explicitly. */
#pune-guide > .sg-wrap,
footer > .mx-auto{
  width:100%;
  max-width:var(--ag-container) !important;
  margin-inline:auto !important;
  padding-inline:var(--sp-gutter) !important;
  box-sizing:border-box;
}
/* footer's own horizontal padding was doubling up with the container */
footer{ padding-inline:0 !important; }
#pune-guide{ padding-inline:0 !important; }

/* ==========================================================================
   FINAL RAIL FIX
   Measured: most sections were double-padded — Tailwind's px-6/lg:px-10 on
   the <section> PLUS the container's own gutter (42px total at 390px),
   while #pune-guide and footer had only the gutter (18px). That 24px
   difference is exactly the "kuch full, kuch side chhod raha hai" jump.

   Solution: the SECTION never pads horizontally. The container owns the
   gutter, and there is only one of them.
   ========================================================================== */
main > section,
#pune-guide,
footer{
  padding-left:0 !important;
  padding-right:0 !important;
}
main > section > .mx-auto,
main > section > div.mx-auto,
#pune-guide > .sg-wrap,
footer > .mx-auto{
  box-sizing:border-box;
  width:100%;
  max-width:var(--ag-container) !important;
  margin-inline:auto !important;
  padding-inline:var(--sp-gutter) !important;
}