/* =====================================================================
   REALTY INDIA — 3 NEW HOMEPAGE LAYOUTS (Home 7, 8, 9)
   Reuses site.css primitives (.card, .sltrack, .bento/.btile, .loct, .stats).
   Load AFTER site.css and search-repolish.css.
   ===================================================================== */

/* ---------- shared eyebrow-on-dark helper ---------- */
.hglow{position:relative;overflow:hidden}

/* =====================================================================
   HOME 7 — "Showcase" : light hero + search + featured card slider
   ===================================================================== */
.h7hero{position:relative;background:radial-gradient(ellipse 70% 90% at 78% -10%,#e7f0ff 0%,transparent 55%),linear-gradient(180deg,#faf7f0 0%,#f4efe4 100%);
  border-bottom:1px solid var(--line);padding:70px 0 60px;text-align:center}
.h7hero .eyebrow{justify-content:center;margin-bottom:14px}
.h7hero h1{font-size:50px;line-height:1.06;margin-bottom:16px;color:var(--ink)}
.h7hero h1 .accent{background:linear-gradient(90deg,#a88a52,#a88a52);-webkit-background-clip:text;background-clip:text;color:transparent}
.h7hero .sub{color:var(--mut);font-size:16px;max-width:640px;margin:0 auto 34px}
@media(max-width:900px){.h7hero h1{font-size:34px}.h7hero{padding:48px 0 44px}}
.h7trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.h7trust span{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:700;color:var(--ink2);box-shadow:0 1px 2px rgba(15,23,42,.05)}
.h7trust span svg{width:15px;height:15px;color:var(--green)}

/* =====================================================================
   HOME 8 — "Metro" : dark luxury hero + search + Indian-city bento grid
   ===================================================================== */
.h8hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#070f24 0%,#0b1f4a 52%,#0a1730 100%);padding:74px 0 66px;text-align:center}
.h8hero:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 20% 0%,rgba(37,99,235,.30),transparent 60%),radial-gradient(ellipse 55% 65% at 88% 10%,rgba(129,140,248,.22),transparent 60%)}
.h8hero .container{position:relative;z-index:2}
.h8hero .eyebrow{justify-content:center;color:#e0cfa6;margin-bottom:14px}
.h8hero h1{color:#fff;font-size:50px;line-height:1.07;margin-bottom:16px}
.h8hero h1 .accent{background:linear-gradient(90deg,#d8c7a0,#e7dcc4);-webkit-background-clip:text;background-clip:text;color:transparent}
.h8hero .sub{color:#cbd5e1;font-size:16px;max-width:620px;margin:0 auto 34px}
@media(max-width:900px){.h8hero h1{font-size:34px}.h8hero{padding:52px 0 48px}}
/* city bento tiles reuse .bento/.btile from site.css; add a stat pill */
.btile .metapill{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.14);backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:800;border-radius:999px;padding:5px 12px;margin-top:10px}

/* =====================================================================
   HOME 9 — "Spotlight" : rotating background-image hero + centered search
   ===================================================================== */
.h9hero{position:relative;overflow:hidden;background:#0a1a35;padding:96px 0 104px;text-align:center;min-height:560px;display:flex;align-items:center}
.h9slides{position:absolute;inset:0}
.h9slides .h9slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;transform:scale(1.04)}
.h9slides .h9slide.on{opacity:.5;transform:scale(1)}
.h9slides .h9slide img{width:100%;height:100%;object-fit:cover}
.h9hero:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(6,14,32,.72),rgba(6,14,32,.42) 45%,rgba(6,14,32,.85))}
.h9hero:after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 80% 60% at 50% -8%,rgba(59,130,246,.4),transparent 62%)}
.h9hero .container{position:relative;z-index:3;width:100%}
.h9hero .eyebrow{justify-content:center;color:#e0cfa6;margin-bottom:14px}
.h9hero h1{color:#fff;font-size:52px;line-height:1.06;margin-bottom:16px}
.h9hero h1 .accent{background:linear-gradient(90deg,#d8c7a0,#e7dcc4,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
.h9hero .sub{color:#dbe4f0;font-size:16.5px;max-width:640px;margin:0 auto 34px}
@media(max-width:900px){.h9hero h1{font-size:34px}.h9hero{padding:64px 0 72px;min-height:auto}}
.h9dots{display:flex;justify-content:center;gap:8px;margin-top:26px;position:relative;z-index:3}
.h9dots button{width:9px;height:9px;border-radius:999px;border:0;background:rgba(255,255,255,.4);cursor:pointer;transition:all .2s ease;padding:0}
.h9dots button.on{background:#fff;width:26px}

/* ---------- shared: section eyebrow center + slider nav already in site.css ---------- */
.newhome .sec .shead .slink{cursor:pointer}
/* preview only: site.js isn't present to mark lazy imgs loaded, so force-show them
   (scoped to .newhome so your real site's fade-in behaviour is untouched) */
.newhome img[loading="lazy"]{opacity:1 !important}