/* =====================================================================
   LandEMI Public Website Stylesheet
   ===================================================================== */

/* ── Variables ────────────────────────────────────────────────────── */
:root {
  --wb-primary:    #2563eb;
  --wb-primary-d:  #1d4ed8;
  --wb-accent:     #10b981;
  --wb-accent-d:   #059669;
  --wb-dark:       #0f172a;
  --wb-mid:        #475569;
  --wb-muted:      #94a3b8;
  --wb-light:      #f8fafc;
  --wb-border:     #e2e8f0;
  --wb-card:       #ffffff;
  --wb-shadow:     0 4px 24px rgba(15,23,42,.08);
  --wb-shadow-lg:  0 12px 48px rgba(15,23,42,.14);
  --wb-shadow-xl:  0 28px 72px rgba(15,23,42,.22);
  --wb-radius:     14px;
  --wb-radius-sm:  9px;
  --wb-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wb-transition: .22s cubic-bezier(.4,0,.2,1);
  --wb-ease-spring: cubic-bezier(.34,1.56,.64,1);
  --wb-secondary:  #7c3aed;
  --wb-secondary-d:#6d28d9;
  --wb-glass-bg:   rgba(255,255,255,.82);
  --wb-glass-blur: saturate(180%) blur(20px);
  --wb-nav-h:      68px;
  --wb-shadow-md:  0 8px 32px rgba(15,23,42,.11);
  --wb-success:    #16a34a;
  --wb-success-bg: #f0fdf4;
  --wb-warning:    #d97706;
  --wb-warning-bg: #fffbeb;
  --wb-danger:     #dc2626;
  --wb-danger-bg:  #fef2f2;
  --wb-info:       #2563eb;
  --wb-info-bg:    #eff6ff;
}

[data-theme="dark"] {
  --wb-dark:    #f1f5f9;
  --wb-mid:     #94a3b8;
  --wb-muted:   #64748b;
  --wb-light:   #0f172a;
  --wb-border:  #1e293b;
  --wb-card:    #1e293b;
  --wb-shadow:  0 4px 24px rgba(0,0,0,.4);
  --wb-shadow-lg:0 12px 48px rgba(0,0,0,.5);
}

/* ── Reset & Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; max-width: 100vw; }

body {
  font-family: var(--wb-font);
  background: var(--wb-light);
  color: var(--wb-dark);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100vw;
}

a { color: var(--wb-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

/* ── Typography ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-weight: 700;
  line-height: 1.2;
  color: var(--wb-dark);
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

p { color: var(--wb-mid); }

.text-accent { color: var(--wb-accent); }
.text-primary { color: var(--wb-primary); }
.text-muted  { color: var(--wb-muted); }

/* ── Layout Helpers ──────────────────────────────────────────────── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 5rem 0;
}

.section-sm { padding: 3rem 0; }

.section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 3rem;
}
.section-header p {
  font-size: 1.1rem;
  margin-top: .75rem;
}

.badge-label {
  display: inline-block;
  background: rgba(37,99,235,.1);
  color: var(--wb-primary);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .75rem;
  border-radius: 20px;
  margin-bottom: .75rem;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--wb-radius-sm);
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--wb-transition), color var(--wb-transition),
              border-color var(--wb-transition), transform var(--wb-transition),
              box-shadow var(--wb-transition);
  text-decoration: none;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn:active { transform: none; }

.btn-primary {
  background: var(--wb-primary);
  color: #fff;
}
.btn-primary:hover {
  background: var(--wb-primary-d);
  color: #fff;
  box-shadow: 0 6px 20px rgba(37,99,235,.35);
}

.btn-accent {
  background: var(--wb-accent);
  color: #fff;
}
.btn-accent:hover {
  background: var(--wb-accent-d);
  color: #fff;
  box-shadow: 0 6px 20px rgba(16,185,129,.35);
}

.btn-outline {
  border-color: var(--wb-primary);
  color: var(--wb-primary);
  background: transparent;
}
.btn-outline:hover {
  background: var(--wb-primary);
  color: #fff;
}

.btn-ghost {
  color: var(--wb-mid);
  background: transparent;
}
.btn-ghost:hover { background: var(--wb-border); }

.btn-lg { padding: .9rem 2.25rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1.1rem; font-size: .85rem; }
.btn-block { width: 100%; justify-content: center; }

.btn-white {
  background: #fff;
  color: var(--wb-primary);
  font-weight: 700;
}
.btn-white:hover { background: #f0f4ff; color: var(--wb-primary); }

/* ── Cards ───────────────────────────────────────────────────────── */
.card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow);
  overflow: hidden;
}

/* ── Scroll progress bar ─────────────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .1s linear;
}

/* announcement-bar — consolidated in the v6 polish block at the end of this file */

/* ── Navbar ──────────────────────────────────────────────────────── */
.wb-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--wb-border);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 2px 16px rgba(15,23,42,.04);
  transition: background .3s ease, border-color .3s ease,
              box-shadow .3s ease, height .3s ease;
}
.wb-nav.is-scrolled {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border-bottom-color: rgba(15,23,42,.07);
  box-shadow: 0 1px 0 rgba(15,23,42,.07), 0 8px 40px rgba(15,23,42,.1);
}
[data-theme="dark"] .wb-nav {
  background: rgba(15,23,42,.98);
  border-bottom-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .wb-nav.is-scrolled {
  background: rgba(15,23,42,.85);
  border-bottom-color: rgba(255,255,255,.06);
}
.wb-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--wb-nav-h);
  gap: 1.5rem;
  transition: height .3s ease;
}
.wb-nav.is-scrolled .wb-nav__inner { height: 58px; }

.wb-nav__logo {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--wb-primary);
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex-shrink: 0;
}
.wb-nav__logo:hover { text-decoration: none; color: var(--wb-primary-d); }
.wb-nav__logo-mark {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--wb-primary) 0%, #7c3aed 100%);
  color: #fff;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}
.wb-nav__logo:hover .wb-nav__logo-mark {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
}

.wb-nav__links {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
}
.wb-nav__links > li { position: relative; }
.wb-nav__links a {
  padding: .52rem 1rem;
  border-radius: 8px;
  color: var(--wb-mid);
  font-weight: 500;
  font-size: .9rem;
  transition: background var(--wb-transition), color var(--wb-transition), transform .12s;
  display: flex; align-items: center; gap: .3rem;
  position: relative;
}
.wb-nav__links a::after {
  content: '';
  position: absolute; bottom: 4px; left: 50%; right: 50%;
  height: 2px;
  background: var(--wb-primary);
  border-radius: 2px;
  transition: left .22s cubic-bezier(.25,.46,.45,.94), right .22s cubic-bezier(.25,.46,.45,.94), opacity .18s;
  opacity: 0;
}
.wb-nav__links a:hover  { background: rgba(37,99,235,.07); color: var(--wb-primary); text-decoration: none; }
.wb-nav__links a:active { transform: scale(.97); }
.wb-nav__links a.active { background: rgba(37,99,235,.09); color: var(--wb-primary); font-weight: 600; text-decoration: none; }
.wb-nav__links a.active::after { left: 30%; right: 30%; opacity: 1; }

/* Properties dropdown ───────────────────────────────────────────── */
.wb-nav__has-dropdown > a {
  padding-right: .65rem;
}
.wb-nav__dropdown-chevron {
  width: 14px; height: 14px; flex-shrink: 0;
  transition: transform .2s ease;
}
.wb-nav__has-dropdown:hover .wb-nav__dropdown-chevron,
.wb-nav__has-dropdown.is-open .wb-nav__dropdown-chevron {
  transform: rotate(180deg);
}
.wb-nav__dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  width: 220px;
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-xl);
  padding: .5rem;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 2000;
}
.wb-nav__has-dropdown:hover .wb-nav__dropdown-menu,
.wb-nav__has-dropdown.is-open .wb-nav__dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
[data-theme="dark"] .wb-nav__dropdown-menu {
  background: #1e293b; border-color: rgba(255,255,255,.08);
}
.wb-nav__dropdown-item {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .75rem; border-radius: 7px;
  color: var(--wb-mid) !important; font-size: .875rem; font-weight: 500;
  text-decoration: none !important;
  transition: background var(--wb-transition), color var(--wb-transition) !important;
}
.wb-nav__dropdown-item:hover {
  background: rgba(37,99,235,.07);
  color: var(--wb-primary) !important;
}
.wb-nav__dropdown-item-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: rgba(37,99,235,.1); color: var(--wb-primary);
  display: grid; place-items: center; font-size: .85rem; flex-shrink: 0;
}
.wb-nav__dropdown-divider {
  height: 1px; background: var(--wb-border); margin: .35rem .25rem;
}

.wb-nav__actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-shrink: 0;
}

/* ── Theme & hamburger buttons ───────────────────────────────────── */
.wb-nav__theme-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 44px; padding: .55rem .85rem;
  border-radius: 9px; border: 1.5px solid var(--wb-border);
  background: transparent; cursor: pointer;
  color: var(--wb-mid); font-size: .82rem; font-weight: 500;
  transition: background var(--wb-transition), border-color var(--wb-transition), color var(--wb-transition);
}
.wb-nav__theme-btn:hover  { background: var(--wb-border); color: var(--wb-dark); }
.wb-nav__theme-btn:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 2px;
}

.wb-nav__hamburger {
  display: none;
  min-width: 44px; min-height: 44px;
  background: none;
  border: 1.5px solid var(--wb-border);
  border-radius: 10px;
  cursor: pointer;
  padding: .6rem .65rem;
  color: var(--wb-dark);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  transition: background var(--wb-transition), border-color var(--wb-transition), transform .15s, box-shadow .15s;
}
.wb-nav__hamburger:hover    { background: var(--wb-light); border-color: var(--wb-primary); color: var(--wb-primary); box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
.wb-nav__hamburger:active   { transform: scale(.94); }
.wb-nav__hamburger:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; }
.wb-nav__hamburger[aria-expanded="true"] { background: rgba(37,99,235,.06); border-color: rgba(37,99,235,.35); }

/* Animated hamburger bars */
.wb-nav__hamburger-bar {
  display: block;
  width: 18px; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .28s cubic-bezier(.25,.46,.45,.94),
              opacity   .2s ease,
              width     .2s ease;
  transform-origin: center;
}
/* Morph to × when open */
.wb-nav__hamburger[aria-expanded="true"] .wb-nav__hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.wb-nav__hamburger[aria-expanded="true"] .wb-nav__hamburger-bar:nth-child(2) {
  opacity: 0; width: 0;
}
.wb-nav__hamburger[aria-expanded="true"] .wb-nav__hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Focus visible for desktop nav links */
.wb-nav__links a:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 2px;
  border-radius: 7px;
}
.wb-nav__dropdown-item:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: -2px;
  border-radius: 7px;
}

/* Sign-in link hides on small desktop to save space */
@media (max-width: 1024px) { .wb-nav__signin { display: none; } }

/* ── Mobile nav — slide-in drawer ───────────────────────────────── */
.wb-nav__mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
}
.wb-nav__mobile-overlay.is-open { opacity: 1; pointer-events: auto; }

.wb-nav__mobile {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 320px; max-width: 88vw;
  background: var(--wb-card);
  z-index: 1100;
  display: flex; flex-direction: column;
  padding: 0;
  transform: translateX(110%);
  transition: transform .36s cubic-bezier(.32,.72,0,1);
  box-shadow: -20px 0 80px rgba(15,23,42,.28), -1px 0 0 rgba(15,23,42,.06);
  overflow: hidden;
  border-left: 1px solid var(--wb-border);
}
.wb-nav__mobile.is-open { transform: translateX(0); }
[data-theme="dark"] .wb-nav__mobile { background: #111827; border-left-color: rgba(255,255,255,.07); }

.wb-nav__mobile-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1rem .95rem;
  border-bottom: 1px solid var(--wb-border);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(37,99,235,.04) 0%, rgba(124,58,237,.03) 100%);
}
.wb-nav__mobile-logo { font-size: 1.1rem; }
.wb-nav__logo-mark--sm {
  width: 30px !important; height: 30px !important; font-size: .9rem !important;
}

.wb-nav__mobile-close {
  min-width: 44px; min-height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--wb-border); background: none;
  cursor: pointer; display: grid; place-items: center;
  color: var(--wb-mid);
  transition: background var(--wb-transition), color var(--wb-transition), transform .15s;
}
.wb-nav__mobile-close:hover  { background: rgba(220,38,38,.08); color: #dc2626; border-color: rgba(220,38,38,.2); }
.wb-nav__mobile-close:active { transform: scale(.92); }
.wb-nav__mobile-close:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 2px;
}

/* Scrollable links area */
.wb-nav__mobile-links {
  flex: 1;
  overflow-y: auto;
  padding: .75rem .75rem 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

/* Regular links */
.wb-nav__mobile-links > a,
.wb-nav__mobile-links > .wb-nav__mobile-item > a {
  min-height: 52px;
  padding: .8rem 1rem .8rem 1.1rem;
  border-radius: 10px;
  color: var(--wb-mid);
  font-weight: 500; font-size: .95rem;
  display: flex; align-items: center; gap: .65rem;
  transition: background .18s, color .18s, transform .12s;
  text-decoration: none;
  position: relative;
  border-left: 3px solid transparent;
}
.wb-nav__mobile-links > a:hover,
.wb-nav__mobile-links > .wb-nav__mobile-item > a:hover {
  background: rgba(37,99,235,.07);
  color: var(--wb-primary);
  text-decoration: none;
}
.wb-nav__mobile-links > a:active,
.wb-nav__mobile-links > .wb-nav__mobile-item > a:active { transform: scale(.98); }
.wb-nav__mobile-links > a.active,
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active {
  background: rgba(37,99,235,.09);
  color: var(--wb-primary);
  font-weight: 700;
  border-left-color: var(--wb-primary);
}
.wb-nav__mobile-links > a:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: -2px;
  border-radius: 10px;
}

/* Expand row for Properties */
.wb-nav__mobile-item {
  display: flex; align-items: center;
  border-radius: 10px;
  overflow: visible;
  position: relative;
}
.wb-nav__mobile-item > a { flex: 1; }
.wb-nav__mobile-expand {
  min-width: 48px; min-height: 48px;
  border: none; background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--wb-muted); border-radius: 10px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.wb-nav__mobile-expand svg { transition: transform .22s ease; }
.wb-nav__mobile-expand:hover { background: rgba(37,99,235,.07); color: var(--wb-primary); }
.wb-nav__mobile-expand:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; }

/* Sub-menu accordion — smooth max-height transition */
.wb-nav__mobile-sub {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: 0 0 0 1rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .28s cubic-bezier(.4,0,.2,1),
              opacity    .22s ease,
              padding    .22s ease;
}
.wb-nav__mobile-sub.is-open {
  max-height: 300px;
  opacity: 1;
  pointer-events: auto;
  padding: .1rem 0 .35rem 1rem;
}
.wb-nav__mobile-sub a {
  min-height: 44px;
  padding: .6rem .9rem;
  border-radius: 8px;
  font-size: .875rem;
  color: var(--wb-muted);
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.wb-nav__mobile-sub a:hover { background: rgba(37,99,235,.07); color: var(--wb-primary); }

/* Active expand button rotates chevron */
.wb-nav__mobile-item.is-open .wb-nav__mobile-expand svg { transform: rotate(180deg); }
.wb-nav__mobile-item.is-open > a { color: var(--wb-primary); background: rgba(37,99,235,.06); }

.wb-nav__mobile-actions {
  padding: 1.1rem .85rem max(1.1rem, env(safe-area-inset-bottom));
  border-top: 1px solid var(--wb-border);
  display: flex; flex-direction: column; gap: .55rem;
  flex-shrink: 0;
  background: var(--wb-light);
}
.wb-nav__mobile-theme-btn {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px;
  border: 1.5px solid var(--wb-border);
  border-radius: 10px;
  background: none; cursor: pointer;
  color: var(--wb-mid); font-size: .88rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.wb-nav__mobile-theme-btn:hover { background: var(--wb-light); color: var(--wb-dark); }
.wb-nav__mobile-theme-btn:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 2px; }

/* ── Hero ────────────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, #0f1f5c 0%, #1d4ed8 45%, #2563eb 70%, #3b82f6 100%);
  color: #fff;
  padding: 6rem 0 5.5rem;
  min-height: 50vh;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero::after {
  content: '';
  position: absolute; bottom: -2px; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--wb-light), transparent);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  padding: .35rem .9rem;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .05em;
  margin-bottom: 1.25rem;
  backdrop-filter: blur(6px);
}
.hero h1 { color: #fff; margin-bottom: 1.25rem; }
.hero p {
  color: rgba(255,255,255,.85);
  font-size: 1.15rem;
  margin-bottom: 2rem;
}
.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  width: 100%;
  max-width: 360px;
}
.hero__stat-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.25rem;
  text-align: center;
}
.hero__stat-card strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: .25rem;
}
.hero__stat-card span {
  font-size: .8rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

/* ── Stats Bar ───────────────────────────────────────────────────── */
.stats-bar {
  background: var(--wb-primary);
  padding: 1.75rem 0;
}
.stats-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  text-align: center;
}
.stats-bar__item strong {
  display: block;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
.stats-bar__item span {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
}

/* ── Feature Cards ───────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  padding: 2rem;
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  box-shadow: var(--wb-shadow);
  border: 1px solid var(--wb-border);
  position: relative; overflow: hidden;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition),
              border-color var(--wb-transition);
}
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--wb-ease-spring);
}
.feature-card:hover  { transform: translateY(-5px); box-shadow: var(--wb-shadow-lg); border-color: rgba(37,99,235,.2); }
.feature-card:hover::before { transform: scaleX(1); }
.feature-card:active { transform: translateY(-1px) scale(.99); box-shadow: var(--wb-shadow); }
.feature-card__icon {
  width: 54px; height: 54px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(124,58,237,.08) 100%);
  color: var(--wb-primary);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  transition: transform .25s var(--wb-ease-spring), background var(--wb-transition);
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.1);
  background: linear-gradient(135deg, rgba(37,99,235,.18) 0%, rgba(124,58,237,.12) 100%);
}
.feature-card h3 { margin-bottom: .5rem; }
.feature-card p  { font-size: .95rem; }

/* ── Property Cards ──────────────────────────────────────────────── */
.plots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
.plot-card {
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  box-shadow: var(--wb-shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}
.plot-card:hover  { transform: translateY(-4px); box-shadow: var(--wb-shadow-lg); }
.plot-card:active { transform: translateY(-1px) scale(.99); box-shadow: var(--wb-shadow); }
.plot-card__img {
  height: 200px;
  background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plot-card__img img { width: 100%; height: 100%; object-fit: cover; }
.plot-card__img-placeholder {
  font-size: 3rem;
  opacity: .3;
  color: #fff;
}
.plot-card__status {
  position: absolute;
  top: .75rem; left: .75rem;
  padding: .25rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.plot-card__status--available { background: #dcfce7; color: #16a34a; }
.plot-card__status--reserved  { background: #fef9c3; color: #ca8a04; }
.plot-card__status--sold      { background: #fee2e2; color: #dc2626; }
.plot-card__body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.plot-card__location {
  font-size: .8rem;
  color: var(--wb-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-bottom: .5rem;
}
.plot-card h3 {
  font-size: 1.05rem;
  margin-bottom: .35rem;
}
.plot-card__meta {
  display: flex;
  gap: 1rem;
  font-size: .82rem;
  color: var(--wb-muted);
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.plot-card__price {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--wb-dark);
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--wb-border);
}
.plot-card__price span {
  font-size: .8rem;
  font-weight: 500;
  color: var(--wb-muted);
}
.plot-card__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--wb-border);
  display: flex;
  gap: .75rem;
}

/* ── Authority Badge ─────────────────────────────────────────────── */
.authority-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .72rem;
  font-weight: 700;
}
.authority-badge--hmda  { background: #dbeafe; color: #1e40af; }
.authority-badge--dtcp  { background: #d1fae5; color: #065f46; }
.authority-badge--rera  { background: #ede9fe; color: #5b21b6; }
.authority-badge--ghmc  { background: #fef3c7; color: #92400e; }
.authority-badge--other { background: var(--wb-border); color: var(--wb-mid); }

/* ── How it Works ────────────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
  position: relative;
}
.step-item {
  text-align: center;
  padding: 1.5rem 1rem;
}
.step-item__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wb-primary), var(--wb-secondary));
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 6px 20px rgba(37,99,235,.4);
}
.step-item h3 { margin-bottom: .5rem; }
.step-item p  { font-size: .9rem; }

/* ── Testimonials ────────────────────────────────────────────────── */
.testimonials-scroller {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding-bottom: 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.testimonials-scroller::-webkit-scrollbar { height: 4px; }
.testimonials-scroller::-webkit-scrollbar-track { background: var(--wb-border); border-radius: 2px; }
.testimonials-scroller::-webkit-scrollbar-thumb { background: var(--wb-primary); border-radius: 2px; }

.testimonial-card {
  min-width: 320px;
  max-width: 380px;
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow);
  padding: 1.75rem;
  scroll-snap-align: start;
  flex-shrink: 0;
}
.testimonial-card__stars {
  color: #f59e0b;
  font-size: 1rem;
  margin-bottom: 1rem;
  letter-spacing: .05em;
}
.testimonial-card__body {
  font-size: .95rem;
  color: var(--wb-mid);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--wb-border);
}
.testimonial-card__name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--wb-dark);
}
.testimonial-card__title {
  font-size: .8rem;
  color: var(--wb-muted);
}

/* ── FAQ Accordion ───────────────────────────────────────────────── */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: .5rem; }
.faq-item {
  border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  background: var(--wb-card);
  overflow: hidden;
  transition: border-color var(--wb-transition), box-shadow var(--wb-transition);
}
.faq-item:hover {
  border-color: rgba(37,99,235,.2);
  box-shadow: var(--wb-shadow);
}
.faq-question {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 1.15rem 1.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--wb-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: color var(--wb-transition), background var(--wb-transition);
}
.faq-question:hover  { color: var(--wb-primary); background: rgba(37,99,235,.03); }
.faq-question:active { color: var(--wb-primary); background: rgba(37,99,235,.07); }
.faq-question:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: -2px;
}
.faq-question__arrow {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(37,99,235,.08);
  color: var(--wb-primary);
  display: grid;
  place-items: center;
  font-size: .7rem;
  transition: transform .28s var(--wb-ease-spring), background var(--wb-transition);
}
.faq-item.open .faq-question__arrow {
  transform: rotate(180deg);
  background: var(--wb-primary);
  color: #fff;
}
.faq-item.open .faq-question {
  color: var(--wb-primary);
  background: rgba(37,99,235,.04);
}
.faq-item.open {
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 4px 20px rgba(37,99,235,.1);
}
.faq-answer {
  display: none;
  padding: 0 1.25rem 1.25rem;
  font-size: .95rem;
  color: var(--wb-mid);
  line-height: 1.8;
  border-top: 1px solid rgba(37,99,235,.08);
  margin: 0 1.25rem;
  padding-top: 1rem;
}
.faq-answer strong { color: var(--wb-dark); }
.faq-item.open .faq-answer { display: block; }
[data-theme="dark"] .faq-item { background: var(--wb-card); border-color: var(--wb-border); }
[data-theme="dark"] .faq-item.open { border-color: rgba(37,99,235,.4); }
[data-theme="dark"] .faq-question__arrow { background: rgba(37,99,235,.15); }
[data-theme="dark"] .faq-answer { border-top-color: rgba(37,99,235,.15); }

/* ── CTA Banner ──────────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--wb-primary) 0%, #7c3aed 100%);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
.cta-banner h2 { color: #fff; margin-bottom: 1rem; }
.cta-banner p  { color: rgba(255,255,255,.85); font-size: 1.1rem; margin-bottom: 2rem; }
.cta-banner__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* ── Contact Section ─────────────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 3rem;
  align-items: start;
}
.contact-info__item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}
.contact-info__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(37,99,235,.1);
  color: var(--wb-primary);
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.contact-info__label {
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wb-muted);
  margin-bottom: .2rem;
}
.contact-info__value { font-weight: 500; color: var(--wb-dark); }

/* ── Forms ───────────────────────────────────────────────────────── */
.wb-form { display: flex; flex-direction: column; gap: 1rem; }
.wb-form__group { display: flex; flex-direction: column; gap: .35rem; }
.wb-form__label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--wb-dark);
}
.wb-form__control {
  padding: .7rem 1rem;
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: .95rem;
  font-family: var(--wb-font);
  background: var(--wb-light);
  color: var(--wb-dark);
  transition: border-color var(--wb-transition), box-shadow var(--wb-transition);
  width: 100%;
}
.wb-form__control:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}
.wb-form__control.is-invalid { border-color: #dc2626; }
.wb-form__error { font-size: .8rem; color: #dc2626; margin-top: .2rem; }
.wb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

/* ── Alert ───────────────────────────────────────────────────────── */
.wb-alert {
  padding: 1rem 1.25rem;
  border-radius: var(--wb-radius-sm);
  font-size: .92rem;
  border-left: 4px solid;
}
.wb-alert--success { background: #f0fdf4; border-color: #16a34a; color: #15803d; }
.wb-alert--danger  { background: #fef2f2; border-color: #dc2626; color: #b91c1c; }
.wb-alert--info    { background: #eff6ff; border-color: #2563eb; color: #1d4ed8; }
.wb-alert--warning { background: #fffbeb; border-color: #d97706; color: #b45309; }

/* ── About ───────────────────────────────────────────────────────── */
.about-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
.about-hero h1 { color: #fff; }
.about-hero p  { color: rgba(255,255,255,.8); max-width: 600px; margin: .75rem auto 0; font-size: 1.1rem; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}
.value-card {
  padding: 1.75rem;
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  box-shadow: var(--wb-shadow);
  border-top: 3px solid var(--wb-primary);
}
.value-card__icon { font-size: 2rem; margin-bottom: .75rem; }
.value-card h3   { font-size: 1rem; margin-bottom: .4rem; }
.value-card p    { font-size: .9rem; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
}
.team-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow);
  overflow: hidden;
  text-align: center;
  transition: transform var(--wb-transition);
}
.team-card:hover { transform: translateY(-4px); }
.team-card__photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--wb-border);
}
.team-card__body { padding: 1.25rem; }
.team-card__name  { font-weight: 700; font-size: 1.05rem; margin-bottom: .2rem; }
.team-card__role  { color: var(--wb-primary); font-size: .875rem; font-weight: 600; margin-bottom: .75rem; }
.team-card__bio   { font-size: .875rem; color: var(--wb-mid); }

/* ── Property Detail ─────────────────────────────────────────────── */
.prop-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  padding: 3rem 0;
  color: #fff;
}
.prop-hero h1 { color: #fff; margin-bottom: .5rem; }
.prop-meta    { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .75rem; }
.prop-meta span {
  display: flex; align-items: center; gap: .35rem;
  font-size: .875rem; color: rgba(255,255,255,.8);
}

.prop-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 2rem;
  padding: 2.5rem 0;
  align-items: start;
}
.prop-gallery {
  border-radius: var(--wb-radius);
  overflow: hidden;
  background: var(--wb-border);
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: var(--wb-muted);
  margin-bottom: 1.5rem;
}
.prop-gallery img { width: 100%; height: 320px; object-fit: cover; }

.prop-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.5rem;
  margin: 1.5rem 0;
}
.prop-detail-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem;
  border-radius: 8px;
  background: var(--wb-light);
  border: 1px solid var(--wb-border);
}
.prop-detail-row label {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wb-muted);
}
.prop-detail-row strong {
  font-size: .95rem;
  color: var(--wb-dark);
  font-weight: 600;
}

.prop-sidebar-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-lg);
  padding: 1.75rem;
  position: sticky;
  top: 80px;
}
.prop-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--wb-dark);
  margin-bottom: .25rem;
}
.prop-emi-plans { margin: 1.25rem 0; display: flex; flex-direction: column; gap: .5rem; }
.prop-emi-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 1rem;
  border-radius: 8px;
  border: 1.5px solid var(--wb-border);
  cursor: pointer;
  transition: border-color var(--wb-transition), background var(--wb-transition);
}
.prop-emi-option.selected,
.prop-emi-option:hover {
  border-color: var(--wb-primary);
  background: rgba(37,99,235,.05);
}
.prop-emi-option label { font-size: .9rem; font-weight: 600; cursor: pointer; }
.prop-emi-option small  { font-size: .8rem; color: var(--wb-muted); }

/* ── Support ─────────────────────────────────────────────────────── */
.support-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  padding: 4rem 0;
  text-align: center;
  color: #fff;
}
.support-hero h1 { color: #fff; }
.support-hero p  { color: rgba(255,255,255,.8); margin-top: .75rem; font-size: 1.05rem; }

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 760px;
}
.ticket-msg {
  padding: 1rem 1.25rem;
  border-radius: var(--wb-radius-sm);
  max-width: 85%;
}
.ticket-msg--user {
  background: var(--wb-light);
  border: 1px solid var(--wb-border);
  align-self: flex-start;
}
.ticket-msg--agent {
  background: rgba(37,99,235,.07);
  border: 1px solid rgba(37,99,235,.15);
  align-self: flex-end;
}
.ticket-msg--ai {
  background: rgba(16,185,129,.07);
  border: 1px solid rgba(16,185,129,.2);
  align-self: flex-end;
}
.ticket-msg__meta {
  font-size: .75rem;
  color: var(--wb-muted);
  margin-bottom: .35rem;
}
.ticket-msg__content {
  font-size: .95rem;
  color: var(--wb-dark);
  white-space: pre-wrap;
  line-height: 1.7;
}
.ticket-msg__content strong { color: var(--wb-dark); }

.status-badge {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.status-open            { background: #dbeafe; color: #1e40af; }
.status-pending_user    { background: #fef9c3; color: #92400e; }
.status-pending_agent   { background: #ede9fe; color: #5b21b6; }
.status-resolved        { background: #d1fae5; color: #065f46; }
.status-closed          { background: var(--wb-border); color: var(--wb-mid); }

.priority-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.priority-low    { background: #d1fae5; color: #065f46; }
.priority-medium { background: #dbeafe; color: #1e40af; }
.priority-high   { background: #fef3c7; color: #92400e; }
.priority-urgent { background: #fee2e2; color: #991b1b; }

/* ── Filter Bar ──────────────────────────────────────────────────── */
.filter-bar {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  padding: 1.25rem;
  box-shadow: var(--wb-shadow);
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}
.filter-bar select,
.filter-bar input {
  padding: .55rem .9rem;
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: .9rem;
  font-family: var(--wb-font);
  background: var(--wb-light);
  color: var(--wb-dark);
  min-width: 140px;
  min-height: 44px;
}
.filter-bar select:focus,
.filter-bar input:focus {
  outline: none;
  border-color: var(--wb-primary);
}
.filter-bar label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--wb-mid);
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
  min-width: 120px;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.pagination {
  display: flex;
  gap: .4rem;
  justify-content: center;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  height: 44px;
  padding: 0 .6rem;
  border-radius: var(--wb-radius-sm);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid var(--wb-border);
  color: var(--wb-mid);
  transition: background var(--wb-transition), color var(--wb-transition);
}
.pagination a:hover  { background: rgba(37,99,235,.08); color: var(--wb-primary); text-decoration: none; }
.pagination a:active { background: rgba(37,99,235,.18); color: var(--wb-primary); }
.pagination .current { background: var(--wb-primary); color: #fff; border-color: var(--wb-primary); }

/* ── Footer ──────────────────────────────────────────────────────── */
.wb-footer {
  background: #0f172a;
  color: rgba(255,255,255,.65);
  padding: 4rem 0 2rem;
}
.wb-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.wb-footer__brand { color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: .75rem; display: block; }
.wb-footer__tagline { font-size: .9rem; margin-bottom: 1.25rem; }
.wb-footer__social { display: flex; gap: .6rem; }
.wb-footer__social a {
  width: 44px; height: 44px;
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  display: grid;
  place-items: center;
  font-size: .85rem;
  transition: background var(--wb-transition), color var(--wb-transition);
  text-decoration: none;
}
.wb-footer__social a:hover  { background: var(--wb-primary); color: #fff; }
.wb-footer__social a:active { background: var(--wb-primary-d, #1d4ed8); color: #fff; }
.wb-footer__col h4 { color: #fff; font-size: .9rem; margin-bottom: 1rem; font-weight: 600; }
.wb-footer__links { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.wb-footer__links a {
  color: rgba(255,255,255,.55);
  font-size: .875rem;
  text-decoration: none;
  transition: color var(--wb-transition);
  display: block;
  padding: .35rem 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.wb-footer__links a:hover  { color: #fff; }
.wb-footer__links a:active { color: rgba(255,255,255,.9); }
.wb-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .82rem;
}
.wb-footer__disclaimer { max-width: 600px; font-size: .78rem; color: rgba(255,255,255,.4); }

/* ── Page Hero Shared ────────────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
  color: #fff;
  padding: 4rem 0;
}
.page-hero h1 { color: #fff; margin-bottom: .5rem; }
.page-hero p  { color: rgba(255,255,255,.75); font-size: 1.05rem; }

/* ── EMI Calc Widget ─────────────────────────────────────────────── */
.emi-calc-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  border: 1.5px solid var(--wb-border);
  padding: 1.5rem;
  margin-top: 1.5rem;
}
.emi-result-row {
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  padding: .45rem 0;
  border-bottom: 1px dashed var(--wb-border);
  color: var(--wb-mid);
}
.emi-result-row:last-child { border: none; font-weight: 700; color: var(--wb-dark); font-size: 1rem; }
.emi-result-row span:last-child { font-weight: 600; color: var(--wb-dark); }

/* ── Markdown content in AI responses ──────────────────────────── */
.md-content strong { font-weight: 700; }
.md-content table  { width: 100%; border-collapse: collapse; margin: .75rem 0; font-size: .875rem; }
.md-content th, .md-content td { padding: .45rem .75rem; border: 1px solid var(--wb-border); text-align: left; }
.md-content th { background: var(--wb-light); font-weight: 600; }
.md-content a  { color: var(--wb-primary); }

/* ── Utilities ───────────────────────────────────────────────────── */
.d-flex    { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-1  { margin-bottom: .5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .wb-footer__grid   { grid-template-columns: 1fr 1fr; }
  .prop-body         { grid-template-columns: 1fr; }
  .contact-grid      { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* ── Nav: show hamburger, hide desktop links + extra actions ── */
  .wb-nav__links                        { display: none; }
  .wb-nav__actions .btn:not(.btn-sm),
  .wb-nav__actions .btn-premium:not(.btn-sm),
  .wb-nav__theme-label                  { display: none; }
  .wb-nav__hamburger                    { display: flex; }

  /* ── Hero ────────────────────────────────────────────────── */
  .hero__inner   { grid-template-columns: 1fr; }
  .hero__visual  { display: none; }
  .hero          { padding: 3.5rem 0 3rem; }

  /* ── Sections ────────────────────────────────────────────── */
  .section       { padding: 3.5rem 0; }

  /* ── Footer ──────────────────────────────────────────────── */
  .wb-footer__grid   { grid-template-columns: 1fr 1fr; }
  .wb-footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
  /* ── Footer ──────────────────────────────────────────────── */
  .wb-footer__grid { grid-template-columns: 1fr; gap: 1.5rem; }

  /* ── Stats ───────────────────────────────────────────────── */
  .stats-bar__grid { grid-template-columns: 1fr 1fr; }

  /* ── Forms ───────────────────────────────────────────────── */
  .wb-form__row { grid-template-columns: 1fr; }

  /* ── Plot cards ──────────────────────────────────────────── */
  .plot-card__footer { flex-direction: column; }
}

@media (max-width: 480px) {
  .stats-bar__grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .hero__stat-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Enhancement Pack
   ===================================================================== */

/* announcement-bar — consolidated in the v6 polish block at the end of this file */

/* ── Dark Mode Toggle ────────────────────────────────────────────── */
.theme-toggle {
  background: none;
  border: 1.5px solid var(--wb-border);
  border-radius: 20px;
  padding: .3rem .7rem;
  cursor: pointer;
  font-size: .82rem;
  color: var(--wb-mid);
  display: flex;
  align-items: center;
  gap: .3rem;
  transition: background var(--wb-transition), border-color var(--wb-transition), color var(--wb-transition);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--wb-primary); color: var(--wb-primary); background: rgba(37,99,235,.06); }

/* ── Scroll Progress Bar ─────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--wb-primary), var(--wb-accent));
  z-index: 9999;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .08s linear;
  pointer-events: none;
}

/* ── Back to Top ─────────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 1.5rem;
  width: 44px; height: 44px;
  background: var(--wb-primary);
  color: #fff; border: none;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 20px rgba(37,99,235,.4);
  opacity: 0; transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease, background .2s;
  z-index: 400;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover  { background: var(--wb-primary-d); box-shadow: 0 6px 24px rgba(37,99,235,.5); }
.back-to-top:active { background: var(--wb-primary-d); box-shadow: 0 2px 8px rgba(37,99,235,.4); transform: scale(.92); }

/* ── Scroll Reveal ───────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .65s ease, transform .65s ease;
}
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
.reveal-d4 { transition-delay: .4s; }
.reveal-d5 { transition-delay: .5s; }

/* ── Hero City Search ────────────────────────────────────────────── */
.hero__search {
  display: flex;
  max-width: 420px;
  margin-top: 1.75rem;
  border-radius: var(--wb-radius-sm);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
}
.hero__search input {
  flex: 1; min-width: 0;
  padding: .72rem 1rem;
  border: none; outline: none;
  font-size: .9rem;
  font-family: var(--wb-font);
  background: #fff;
  color: var(--wb-dark);
}
.hero__search input::placeholder { color: #94a3b8; }
.hero__search button {
  padding: .72rem 1.1rem;
  background: var(--wb-accent); color: #fff;
  border: none; cursor: pointer;
  font-weight: 700; font-size: .85rem;
  white-space: nowrap;
  transition: background var(--wb-transition);
}
.hero__search button:hover { background: var(--wb-accent-d); }

/* ── City Pills ──────────────────────────────────────────────────── */
.city-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-top: .9rem;
}
.city-pill {
  padding: .28rem .7rem;
  border-radius: 20px;
  font-size: .75rem; font-weight: 600;
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  transition: background .2s, border-color .2s;
}
.city-pill:hover  { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); text-decoration: none; color: #fff; }
.city-pill:active { background: rgba(255,255,255,.35); border-color: rgba(255,255,255,.6); color: #fff; transform: scale(.96); }

/* ── Trust Bar ───────────────────────────────────────────────────── */
.trust-bar {
  background: var(--wb-card);
  border-bottom: 1px solid var(--wb-border);
  padding: 1rem 0;
}
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.75rem;
}
.trust-bar__item {
  display: flex; align-items: center; gap: .5rem;
  font-size: .8rem; color: var(--wb-mid); font-weight: 500;
  white-space: nowrap;
}
.trust-bar__icon { font-size: 1rem; }
.trust-bar__divider { width: 1px; height: 20px; background: var(--wb-border); flex-shrink: 0; }

/* ── Steps connector (desktop 4-col) ─────────────────────────────── */
@media (min-width: 769px) {
  .steps-grid { grid-template-columns: repeat(4, 1fr); position: relative; }
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 12.5%; right: 12.5%;
    height: 2px;
    background: linear-gradient(90deg, var(--wb-primary) 0%, rgba(37,99,235,.12) 100%);
    z-index: 0;
  }
  .step-item { position: relative; z-index: 1; }
}

/* ── Feature card enhanced hover ─────────────────────────────────── */
.feature-card {
  border: 1.5px solid transparent;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition), border-color var(--wb-transition);
}
.feature-card:hover { border-color: rgba(37,99,235,.18); }
.feature-card__icon { transition: transform .3s ease; }
.feature-card:hover .feature-card__icon { transform: scale(1.12) rotate(-4deg); }

/* ── Hero visual floating animation ─────────────────────────────── */
@keyframes float-y { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__stat-grid { animation: float-y 7s ease-in-out infinite; }

/* ── Investment Strip ────────────────────────────────────────────── */
.invest-strip {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #2563eb 100%);
  padding: 4.5rem 0; color: #fff;
  position: relative; overflow: hidden;
}
.invest-strip::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
.invest-strip__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.invest-strip h2 { color: #fff; font-size: clamp(1.4rem, 2.5vw, 2rem); margin-bottom: .75rem; }
.invest-strip > .container > .invest-strip__inner > div:first-child p { color: rgba(255,255,255,.8); font-size: 1rem; line-height: 1.8; margin-bottom: 1.75rem; }
.invest-metrics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
.invest-metric {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--wb-radius);
  padding: 1.25rem; text-align: center;
  backdrop-filter: blur(8px);
  transition: background .3s;
}
.invest-metric:hover { background: rgba(255,255,255,.14); }
.invest-metric strong {
  display: block;
  font-size: 1.85rem; font-weight: 800;
  color: var(--wb-accent);
  line-height: 1; margin-bottom: .35rem;
}
.invest-metric span { font-size: .78rem; color: rgba(255,255,255,.65); font-weight: 500; }

/* ── Timeline ────────────────────────────────────────────────────── */
.timeline {
  position: relative;
  max-width: 680px; margin: 0 auto;
  padding-left: 2.25rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  background: linear-gradient(to bottom, var(--wb-primary) 0%, rgba(37,99,235,.1) 100%);
}
.timeline-item { position: relative; margin-bottom: 2.25rem; }
.timeline-item:last-child { margin-bottom: 0; }
.timeline-item::before {
  content: '';
  position: absolute;
  left: -2.65rem; top: 5px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--wb-primary);
  border: 3px solid var(--wb-card);
  box-shadow: 0 0 0 2px var(--wb-primary);
}
.timeline-year { font-size: .72rem; font-weight: 700; color: var(--wb-primary); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.timeline-item h4 { font-size: 1rem; margin-bottom: .3rem; }
.timeline-item p  { font-size: .88rem; line-height: 1.75; }

/* ── Legal / CMS Page Content ────────────────────────────────────── */
.legal-content {
  max-width: 820px;
  margin: 0 auto;
}
.legal-content h2 {
  font-size: 1.35rem;
  margin: 2.5rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--wb-border);
  color: var(--wb-dark);
}
.legal-content h3 { font-size: 1.05rem; margin: 1.75rem 0 .6rem; color: var(--wb-dark); }
.legal-content p  { margin-bottom: 1.1rem; line-height: 1.85; }
.legal-content ul, .legal-content ol { margin: .6rem 0 1.25rem 1.6rem; }
.legal-content li { margin-bottom: .5rem; line-height: 1.75; }
.legal-content strong { color: var(--wb-dark); }
.legal-content a  { color: var(--wb-primary); }
.legal-content hr { margin: 2.5rem 0; border: none; border-top: 1px solid var(--wb-border); }
.legal-content em { color: var(--wb-mid); font-style: italic; }

/* ── Premium legal page elements (intro / TOC / callouts / contact) ── */
.legal-intro {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  padding: 1.1rem 1.25rem;
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(124,58,237,.03));
  border-left: 4px solid var(--wb-primary, #2563eb);
  border-radius: 0 12px 12px 0;
  margin: 0 0 2rem !important;
  color: var(--wb-text, #111827);
}

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .55rem;
  align-items: center;
  padding: .85rem 1rem;
  background: var(--wb-light, #f8fafc);
  border: 1px dashed rgba(37,99,235,.2);
  border-radius: 12px;
  font-size: .82rem;
  margin-bottom: 2rem;
}
.legal-toc strong {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--wb-text-muted, #6b7280);
  margin-right: .35rem;
}
.legal-toc a {
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 6px;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  text-decoration: none;
  color: var(--wb-text, #111827) !important;
  font-weight: 600;
  font-size: .76rem;
  transition: all .15s ease;
}
.legal-toc a:hover {
  background: var(--wb-primary, #2563eb);
  border-color: transparent;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(37,99,235,.3);
}

.legal-callout {
  padding: 1rem 1.15rem;
  margin: 1.25rem 0;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(99,102,241,.03));
  border: 1px solid rgba(37,99,235,.18);
  border-left: 4px solid var(--wb-primary, #2563eb);
}
.legal-callout p {
  margin: 0 !important;
  font-size: .92rem !important;
  line-height: 1.7 !important;
}
.legal-callout--warn {
  background: linear-gradient(135deg, rgba(217,119,6,.06), rgba(245,158,11,.03));
  border-color: rgba(217,119,6,.22);
  border-left-color: #d97706;
}
.legal-callout--danger {
  background: linear-gradient(135deg, rgba(220,38,38,.06), rgba(239,68,68,.03));
  border-color: rgba(220,38,38,.22);
  border-left-color: #dc2626;
}

.legal-content h2[id] {
  scroll-margin-top: 80px;
  position: relative;
}
.legal-content h2[id]::before {
  content: '#';
  position: absolute;
  left: -1.5rem;
  color: var(--wb-text-faint, #cbd5e1);
  opacity: 0;
  transition: opacity .15s, color .15s;
  font-weight: 700;
}
.legal-content h2[id]:hover::before {
  opacity: 1;
  color: var(--wb-primary, #2563eb);
}

.legal-contact {
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, rgba(34,197,94,.05), rgba(16,185,129,.02));
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 14px;
  margin: 1.5rem 0;
}
.legal-contact p {
  margin: 0 0 .85rem !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}
.legal-contact-list {
  list-style: none !important;
  margin: 0 0 .65rem !important;
  padding: 0 !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .35rem .85rem;
}
.legal-contact-list li {
  margin: 0 !important;
  padding: .35rem 0;
  font-size: .85rem;
  border-bottom: 1px dashed var(--wb-border, rgba(0,0,0,.06));
}
.legal-contact-list li:last-child { border-bottom: 0; }
.legal-contact em {
  display: block;
  margin-top: .65rem;
  font-size: .8rem;
  color: var(--wb-text-muted, #6b7280);
}

.legal-footer {
  margin-top: 2.5rem;
  padding: 1.1rem 1.25rem;
  background: var(--wb-light, #f8fafc);
  border-radius: 12px;
  font-size: .85rem !important;
  color: var(--wb-text-muted, #6b7280) !important;
  text-align: center;
  font-style: italic;
  line-height: 1.65 !important;
  border: 1px solid var(--wb-border, rgba(0,0,0,.06));
}

/* ── Lettered prohibition list (a, b, c…) within ToS ───────────── */
.legal-content .legal-letter-list,
.legal-content .legal-roman-list {
  list-style: none !important;
  padding-left: 0 !important;
  counter-reset: none;
}
.legal-content .legal-letter-list > li,
.legal-content .legal-roman-list > li {
  position: relative;
  padding: .85rem 1rem .85rem 1rem;
  margin-bottom: .55rem !important;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.06));
  border-left: 3px solid rgba(220,38,38,.4);
  border-radius: 8px;
  list-style: none;
  line-height: 1.6;
}
.legal-content .legal-letter-list > li::marker,
.legal-content .legal-roman-list > li::marker { content: ''; }

.legal-content .legal-letter-list > li:hover,
.legal-content .legal-roman-list > li:hover {
  border-left-color: #dc2626;
  background: rgba(220,38,38,.02);
}

/* The (a), (b), etc. labels are inline strong tags — make them stand out */
.legal-content .legal-letter-list > li > strong:first-child,
.legal-content .legal-roman-list > li > strong:first-child {
  display: inline-block;
  min-width: 28px;
  color: #dc2626;
  font-weight: 800;
  letter-spacing: .005em;
}

/* Nested sub-lists inside prohibition items */
.legal-content .legal-sub-list {
  list-style: disc !important;
  padding-left: 1.25rem !important;
  margin: .5rem 0 .25rem !important;
}
.legal-content .legal-sub-list > li {
  padding: 0 !important;
  margin-bottom: .35rem !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  list-style: disc !important;
  font-size: .88rem;
  color: var(--wb-text-muted, #6b7280);
}
.legal-content .legal-sub-list > li:hover {
  background: transparent !important;
}
.legal-content .legal-sub-list > li::marker { content: '• '; color: #dc2626; }

/* Express-agreement (i, ii, iii…) list — softer treatment */
.legal-content .legal-roman-list > li {
  border-left-color: rgba(124,58,237,.4);
}
.legal-content .legal-roman-list > li:hover {
  border-left-color: #7c3aed;
  background: rgba(124,58,237,.02);
}
.legal-content .legal-roman-list > li > strong:first-child {
  color: #7c3aed;
}

/* ═══════════════════════════════════════════════════════════════════════
   Use Cases — 6-persona grid + reference matrix + advisor CTA
   ═══════════════════════════════════════════════════════════════════════ */
.use-cases-section { position: relative; }
.use-cases-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.3), transparent);
}

/* ── Find-your-fit selector ────────────────────────────────────── */
.uc-finder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
  padding: .85rem 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(124,58,237,.03));
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 16px;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
.uc-finder::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
  pointer-events: none;
}
.uc-finder__lbl {
  font-size: .82rem;
  font-weight: 700;
  color: var(--wb-text-muted, #6b7280);
  margin-right: .25rem;
  position: relative; z-index: 1;
}
.uc-finder__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  position: relative; z-index: 1;
}
.uc-finder__chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem;
  background: var(--wb-card, #fff);
  border: 1.5px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 99px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--wb-text, #111827);
  cursor: pointer;
  transition: all .18s cubic-bezier(.34,1.36,.64,1);
}
.uc-finder__chip:hover {
  transform: translateY(-2px);
  border-color: var(--cf-c, #2563eb);
  color: var(--cf-c, #2563eb);
  box-shadow: 0 4px 10px -2px color-mix(in srgb, var(--cf-c, #2563eb) 30%, transparent);
}
.uc-finder__chip.is-active {
  background: var(--cf-c, #2563eb);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--cf-c, #2563eb) 45%, transparent);
}
.uc-finder__chip-icon { font-size: 1rem; line-height: 1; }
.uc-finder__chip-lbl { font-weight: 600; }

/* Flash highlight on the targeted card */
.uc-card.is-uc-flash {
  animation: ucCardFlash 1.6s ease;
}
@keyframes ucCardFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--uc-c, #2563eb) 0%, transparent); }
  20%  {
    transform: translateY(-8px);
    box-shadow:
      0 0 0 4px color-mix(in srgb, var(--uc-c, #2563eb) 35%, transparent),
      0 16px 36px -8px color-mix(in srgb, var(--uc-c, #2563eb) 25%, transparent);
  }
  100% {
    transform: translateY(0);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--uc-c, #2563eb) 0%, transparent);
  }
}

.uc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.uc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.35rem 1.25rem;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 18px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.34,1.36,.64,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.uc-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--uc-c, #2563eb), color-mix(in srgb, var(--uc-c, #2563eb) 60%, transparent));
}
.uc-card::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--uc-c, #2563eb) 14%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  opacity: .8;
  transition: transform .35s ease;
}
.uc-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--uc-c, #2563eb) 35%, var(--wb-border));
  box-shadow:
    0 10px 24px -6px rgba(13,27,46,.08),
    0 22px 48px -12px color-mix(in srgb, var(--uc-c, #2563eb) 18%, transparent);
}
.uc-card:hover::after { transform: scale(1.3); }

.uc-card__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .55rem;
  margin-bottom: .85rem;
  position: relative; z-index: 1;
}
.uc-card__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--uc-c, #2563eb) 12%, transparent);
  color: var(--uc-c, #2563eb);
  font-size: 1.6rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--uc-c, #2563eb) 25%, transparent);
}
.uc-card__pill {
  font-size: .62rem;
  font-weight: 800;
  padding: .25rem .55rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--uc-c, #2563eb) 12%, transparent);
  color: var(--uc-c, #2563eb);
  border: 1px solid color-mix(in srgb, var(--uc-c, #2563eb) 25%, transparent);
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.uc-card h3 {
  margin: 0 0 .65rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wb-text, #111827);
  line-height: 1.3;
  position: relative; z-index: 1;
}

.uc-card__pain {
  font-size: .82rem;
  line-height: 1.55;
  color: var(--wb-text-muted, #6b7280);
  margin-bottom: .85rem;
  padding: .55rem .75rem;
  background: var(--wb-light, #f8fafc);
  border-radius: 8px;
  border-left: 3px solid color-mix(in srgb, var(--uc-c, #2563eb) 50%, transparent);
  position: relative; z-index: 1;
}
.uc-card__pain strong {
  color: var(--uc-c, #2563eb);
  font-weight: 700;
}

.uc-card__how {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  position: relative; z-index: 1;
}
.uc-card__how li {
  position: relative;
  padding: .25rem 0 .25rem 1.35rem;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--wb-text, #111827);
}
.uc-card__how li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: .25rem;
  display: inline-grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--uc-c, #2563eb) 16%, transparent);
  color: var(--uc-c, #2563eb);
  font-size: .7rem;
  font-weight: 800;
}
.uc-card__how strong {
  color: var(--uc-c, #2563eb);
  font-weight: 700;
}

.uc-card__metric {
  margin-top: auto;
  margin-bottom: .85rem;
  padding-top: .75rem;
  border-top: 1px dashed color-mix(in srgb, var(--uc-c, #2563eb) 22%, transparent);
  display: flex;
  align-items: baseline;
  gap: .5rem;
  position: relative; z-index: 1;
}
.uc-card__metric-val {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--uc-c, #2563eb);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.uc-card__metric-lbl {
  font-size: .72rem;
  color: var(--wb-text-muted, #6b7280);
  font-weight: 500;
}

.uc-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .85rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--uc-c, #2563eb) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--uc-c, #2563eb) 22%, transparent);
  color: var(--uc-c, #2563eb);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 700;
  position: relative; z-index: 1;
  transition: background .15s, transform .12s, box-shadow .15s;
  align-self: flex-start;
}
.uc-card__cta:hover {
  background: var(--uc-c, #2563eb);
  color: #fff;
  transform: translateX(2px);
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--uc-c, #2563eb) 35%, transparent);
}

/* ── Reference matrix ───────────────────────────────────────────── */
.uc-matrix {
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  overflow: hidden;
}
.uc-matrix__hd {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1rem;
}
.uc-matrix__icon { font-size: 1.15rem; line-height: 1; }
.uc-matrix__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}

.uc-matrix__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -.5rem;
}
.uc-matrix__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: .85rem;
}
.uc-matrix__table th,
.uc-matrix__table td {
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--wb-border, rgba(0,0,0,.06));
}
.uc-matrix__table th {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wb-text-muted, #6b7280);
  background: var(--wb-light, #f8fafc);
}
.uc-matrix__table tbody tr:last-child td { border-bottom: 0; }
.uc-matrix__table tbody tr {
  transition: background .15s ease;
}
.uc-matrix__table tbody tr:hover {
  background: rgba(37,99,235,.04);
}
.uc-matrix__icon-cell {
  font-size: 1rem;
  margin-right: .35rem;
  vertical-align: -2px;
}

/* ── Advisor CTA ────────────────────────────────────────────────── */
.uc-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 22px;
  background:
    radial-gradient(at top right, rgba(124,58,237,.15), transparent 55%),
    radial-gradient(at bottom left, rgba(37,99,235,.12), transparent 55%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 32px -6px rgba(15,23,42,.30),
    0 24px 48px -12px rgba(124,58,237,.18);
}
.uc-cta__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation: ucCtaWave 3.5s ease-in-out infinite;
}
@keyframes ucCtaWave {
  0%, 100% { transform: rotate(0deg); }
  20%      { transform: rotate(-15deg); }
  40%      { transform: rotate(10deg); }
  60%      { transform: rotate(-5deg); }
}
.uc-cta__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.uc-cta__body h3 {
  margin: 0 0 .35rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.uc-cta__body p {
  margin: 0;
  font-size: .92rem;
  opacity: .85;
  line-height: 1.5;
}
.uc-cta .wb-cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 0;
  color: #fff;
  position: relative; z-index: 1;
  box-shadow:
    0 4px 14px -2px rgba(124,58,237,.5),
    0 8px 20px -4px rgba(37,99,235,.35);
}
.uc-cta .wb-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px -2px rgba(124,58,237,.6),
    0 12px 28px -4px rgba(37,99,235,.45);
}

/* Mobile */
@media (max-width: 720px) {
  .uc-card { padding: 1.25rem 1rem 1rem; }
  .uc-card__icon { width: 44px; height: 44px; font-size: 1.35rem; border-radius: 12px; }
  .uc-card h3 { font-size: 1.05rem; }
  .uc-card__pain { font-size: .78rem; padding: .5rem .65rem; }
  .uc-card__how li { font-size: .8rem; }
  .uc-card__metric-val { font-size: 1.2rem; }
  .uc-card__pill { font-size: .58rem; padding: .2rem .45rem; }

  .uc-matrix { padding: 1rem; }
  .uc-matrix__title { font-size: .9rem; }
  .uc-matrix__table { font-size: .8rem; min-width: 580px; }

  .uc-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    gap: 1rem;
  }
  .uc-cta__icon { font-size: 2rem; }
  .uc-cta__body h3 { font-size: 1.2rem; }
  .uc-cta .wb-cta { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .uc-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-cta__icon { animation: none !important; }
  .uc-card,
  .uc-card::after,
  .uc-card__cta,
  .uc-matrix__table tbody tr {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Partner Network — On-Demand Services + LandEMI Solutions + Roles
   ═══════════════════════════════════════════════════════════════════════ */
.partner-network-section { position: relative; }

/* Tab nav */
.pn-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: 1.25rem;
  padding: .55rem;
  background: var(--wb-light, #f8fafc);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 16px;
}
.pn-tab {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  background: var(--wb-card, #fff);
  border: 1.5px solid transparent;
  border-radius: 12px;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: all .2s cubic-bezier(.34,1.36,.64,1);
}
.pn-tab:hover {
  transform: translateY(-2px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 4px 12px -2px rgba(37,99,235,.12);
}
.pn-tab.is-active {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px -2px rgba(37,99,235,.4);
}
.pn-tab__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}
.pn-tab__lbl {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: inherit;
}
.pn-tab__sub {
  display: block;
  font-size: .68rem;
  font-weight: 500;
  color: var(--wb-text-muted, #6b7280);
  margin-top: 1px;
}
.pn-tab.is-active .pn-tab__sub { color: rgba(255,255,255,.82); }

/* Panel */
.pn-panel {
  animation: pnPanelFade .28s ease;
}
.pn-panel[hidden] { display: none; }
@keyframes pnPanelFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Intro callout */
.pn-intro {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .9rem 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(124,58,237,.03));
  border: 1px solid rgba(37,99,235,.15);
  border-left: 4px solid #2563eb;
  border-radius: 12px;
  margin-bottom: 1.25rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--wb-text, #111827);
}
.pn-intro__icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.pn-intro strong { color: var(--wb-text, #111827); }

/* On-demand services grid */
.pn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: .85rem;
  margin-bottom: 1.5rem;
}

.pn-card {
  position: relative;
  padding: 1.25rem 1.1rem;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-left: 4px solid var(--pn-c, #2563eb);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
}
.pn-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--pn-c, #2563eb) 12%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  opacity: .8;
}
.pn-card:hover {
  transform: translateY(-3px);
  border-left-width: 6px;
  box-shadow:
    0 8px 20px -4px rgba(13,27,46,.10),
    0 16px 36px -8px color-mix(in srgb, var(--pn-c, #2563eb) 18%, transparent);
}

.pn-card__hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .55rem;
  margin-bottom: .65rem;
  position: relative; z-index: 1;
}
.pn-card__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: color-mix(in srgb, var(--pn-c, #2563eb) 14%, transparent);
  color: var(--pn-c, #2563eb);
  font-size: 1.25rem;
}
.pn-card__commission {
  display: inline-flex;
  align-items: center;
  padding: .25rem .6rem;
  background: var(--pn-c, #2563eb);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .02em;
  border-radius: 99px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px -1px color-mix(in srgb, var(--pn-c, #2563eb) 35%, transparent);
}

.pn-card h3 {
  margin: 0 0 .35rem;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wb-text, #111827);
  position: relative; z-index: 1;
}

.pn-card p {
  margin: 0 0 .65rem;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--wb-text-muted, #6b7280);
  position: relative; z-index: 1;
}

.pn-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  position: relative; z-index: 1;
}
.pn-card__chip {
  font-size: .65rem;
  font-weight: 600;
  padding: .15rem .5rem;
  background: var(--wb-light, #f8fafc);
  border: 1px solid var(--wb-border, rgba(0,0,0,.06));
  border-radius: 99px;
  color: var(--wb-text-muted, #6b7280);
}
.pn-card__chip--alt {
  background: color-mix(in srgb, var(--pn-c, #2563eb) 8%, transparent);
  color: var(--pn-c, #2563eb);
  border-color: color-mix(in srgb, var(--pn-c, #2563eb) 20%, transparent);
}

/* Commission callout */
.pn-callout {
  display: flex;
  gap: .65rem;
  padding: .95rem 1.15rem;
  background: linear-gradient(135deg, rgba(34,197,94,.05), rgba(16,185,129,.03));
  border: 1px solid rgba(34,197,94,.2);
  border-radius: 12px;
  font-size: .88rem;
  line-height: 1.55;
}
.pn-callout__icon { font-size: 1.2rem; flex-shrink: 0; }
.pn-callout__body strong { color: #16a34a; }

/* LandEMI Solutions cards */
.pn-grid--solutions {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pn-sol-card {
  padding: 1.4rem 1.25rem;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--pn-c, #2563eb) 4%, var(--wb-card, #fff)) 0%,
    var(--wb-card, #fff) 30%);
  border: 1.5px solid color-mix(in srgb, var(--pn-c, #2563eb) 18%, var(--wb-border));
  border-radius: 16px;
  transition: transform .22s, box-shadow .22s, border-color .2s;
}
.pn-sol-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--pn-c, #2563eb) 35%, var(--wb-border));
  box-shadow:
    0 10px 24px -6px color-mix(in srgb, var(--pn-c, #2563eb) 18%, transparent);
}
.pn-sol-card__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--pn-c, #2563eb) 16%, transparent),
    color-mix(in srgb, var(--pn-c, #2563eb) 8%, transparent));
  color: var(--pn-c, #2563eb);
  font-size: 1.7rem;
  margin-bottom: .85rem;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--pn-c, #2563eb) 25%, transparent);
}
.pn-sol-card h3 {
  margin: 0 0 .55rem;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wb-text, #111827);
}
.pn-sol-card p {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--wb-text-muted, #6b7280);
}
.pn-sol-card__price {
  padding-top: .75rem;
  border-top: 1px dashed color-mix(in srgb, var(--pn-c, #2563eb) 22%, transparent);
}
.pn-sol-card__price-val {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  color: var(--pn-c, #2563eb);
  letter-spacing: -.005em;
}
.pn-sol-card__price-lbl {
  display: block;
  font-size: .68rem;
  color: var(--wb-text-muted, #6b7280);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .15rem;
}

/* Roles & Compliance grid */
.pn-roles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.pn-role-card {
  padding: 1.25rem 1.15rem;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-top: 4px solid var(--pn-c, #2563eb);
  border-radius: 14px;
  transition: transform .18s, box-shadow .18s;
}
.pn-role-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px -4px rgba(13,27,46,.08);
}
.pn-role-card__hd {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: .85rem;
  padding-bottom: .65rem;
  border-bottom: 1px dashed var(--wb-border, rgba(0,0,0,.08));
}
.pn-role-card__icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--pn-c, #2563eb) 14%, transparent);
  color: var(--pn-c, #2563eb);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pn-role-card h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--pn-c, #2563eb);
}
.pn-role-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pn-role-card__list li {
  padding: .25rem 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--wb-text, #111827);
}
.pn-role-card__list li strong {
  color: var(--pn-c, #2563eb);
  font-weight: 700;
  margin-right: .25rem;
}

/* Trust pillars footer */
.pn-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .65rem;
  padding: 1rem 1.15rem;
  background: linear-gradient(135deg, rgba(34,197,94,.06), rgba(37,99,235,.04));
  border: 1px solid rgba(34,197,94,.18);
  border-radius: 14px;
}
.pn-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .15rem;
  font-size: .7rem;
  color: var(--wb-text-muted, #6b7280);
}
.pn-pillar__icon {
  font-size: 1.4rem;
  margin-bottom: .15rem;
}
.pn-pillar strong {
  display: block;
  font-size: .82rem;
  color: var(--wb-text, #111827);
  margin-bottom: .15rem;
}

/* Bottom CTA */
.pn-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 22px;
  background:
    radial-gradient(at top right, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(at bottom left, rgba(34,197,94,.15), transparent 55%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  margin-top: 1rem;
  box-shadow:
    0 12px 32px -6px rgba(15,23,42,.30),
    0 24px 48px -12px rgba(124,58,237,.18);
}
.pn-cta__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  animation: pnGlobeSpin 8s linear infinite;
}
@keyframes pnGlobeSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.pn-cta__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pn-cta__body h3 {
  margin: 0 0 .35rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.pn-cta__body p {
  margin: 0;
  font-size: .92rem;
  opacity: .85;
  line-height: 1.5;
}
.pn-cta__body strong { color: #fbbf24; }
.pn-cta .wb-cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 0;
  color: #fff;
  position: relative; z-index: 1;
  box-shadow:
    0 4px 14px -2px rgba(124,58,237,.5),
    0 8px 20px -4px rgba(37,99,235,.35);
}
.pn-cta .wb-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px -2px rgba(124,58,237,.6),
    0 12px 28px -4px rgba(37,99,235,.45);
}

/* Mobile */
@media (max-width: 720px) {
  .pn-tabs { padding: .35rem; }
  .pn-tab { flex: 1 1 100%; padding: .65rem .85rem; }
  .pn-tab__icon { font-size: 1.25rem; }
  .pn-tab__lbl { font-size: .82rem; }
  .pn-tab__sub { font-size: .62rem; }

  .pn-card { padding: 1rem .9rem; }
  .pn-card h3 { font-size: .92rem; }
  .pn-card p { font-size: .78rem; }
  .pn-card__icon { width: 36px; height: 36px; font-size: 1.1rem; }
  .pn-card__commission { font-size: .68rem; padding: .2rem .5rem; }

  .pn-sol-card { padding: 1.15rem 1rem; }
  .pn-sol-card__icon { width: 48px; height: 48px; font-size: 1.4rem; }
  .pn-sol-card h3 { font-size: 1.05rem; }

  .pn-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    gap: 1rem;
  }
  .pn-cta__icon { font-size: 2rem; }
  .pn-cta__body h3 { font-size: 1.2rem; }
  .pn-cta .wb-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pn-cta__icon,
  .pn-panel { animation: none !important; }
  .pn-card,
  .pn-sol-card,
  .pn-role-card,
  .pn-tab {
    transition: none !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .legal-intro { padding: .85rem 1rem; font-size: .9rem !important; }
  .legal-toc { padding: .65rem .85rem; font-size: .75rem; }
  .legal-toc a { padding: .2rem .45rem; font-size: .7rem; }
  .legal-callout { padding: .85rem 1rem; }
  .legal-callout p { font-size: .85rem !important; }
  .legal-contact { padding: 1rem; }
  .legal-contact-list { grid-template-columns: 1fr; }
}

[data-theme="dark"] .legal-intro,
[data-theme="dark"] .legal-callout,
[data-theme="dark"] .legal-contact,
[data-theme="dark"] .legal-footer {
  background-color: rgba(255,255,255,.02);
}

.legal-meta {
  font-size: .82rem;
  color: var(--wb-muted);
  margin-bottom: 2rem;
  padding: .65rem 1rem;
  background: rgba(37,99,235,.05);
  border-left: 3px solid var(--wb-primary);
  border-radius: 0 var(--wb-radius-sm) var(--wb-radius-sm) 0;
}

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: .9rem;
}
.legal-table th,
.legal-table td {
  padding: .65rem .9rem;
  border: 1px solid var(--wb-border);
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: var(--wb-light);
  font-weight: 600;
  color: var(--wb-dark);
  width: 30%;
}
.legal-table tr:nth-child(even) td { background: rgba(248,250,252,.6); }

/* ── Contact enhancements ────────────────────────────────────────── */
.contact-info__item {
  transition: transform var(--wb-transition);
}
.contact-info__item:hover { transform: translateX(4px); }

/* ── Advanced Enhancement: Filter Chips ──────────────────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: 1.25rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .75rem;
  background: rgba(37,99,235,.08);
  color: var(--wb-primary);
  border: 1px solid rgba(37,99,235,.22);
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
}
.filter-chip__remove {
  font-size: .9rem;
  line-height: 1;
  opacity: .7;
  text-decoration: none;
  color: inherit;
}
.filter-chip__remove:hover { opacity: 1; color: #dc2626; text-decoration: none; }

/* ── Advanced Enhancement: View Toggle ──────────────────────────── */
.view-toggle { display: flex; gap: .3rem; }
.view-toggle-btn,
.view-toggle__btn {
  width: 36px; height: 36px;
  min-width: 36px; min-height: 36px;
  border-radius: 6px;
  background: none;
  border: 1.5px solid var(--wb-border);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .95rem;
  color: var(--wb-muted);
  transition: background .15s, border-color .15s, color .15s;
}
.view-toggle-btn.active,
.view-toggle-btn:hover,
.view-toggle__btn.active,
.view-toggle__btn:hover { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }

/* List-view layout override */
.plots-grid.list-view { grid-template-columns: 1fr; }
.plots-grid.list-view .plot-card { flex-direction: row; align-items: stretch; }
.plots-grid.list-view .plot-card__img { width: 200px; height: auto; flex-shrink: 0; border-radius: var(--wb-radius) 0 0 var(--wb-radius); }
.plots-grid.list-view .plot-card__body { flex: 1; }
.plots-grid.list-view .plot-card__footer { flex-direction: column; justify-content: center; min-width: 130px; border-top: none; border-left: 1px solid var(--wb-border); }

/* ── Advanced Enhancement: Range Inputs ──────────────────────────── */
.range-row { display: flex; gap: .6rem; }
.range-row input[type="number"] {
  flex: 1; min-width: 0;
  padding: .5rem .7rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 6px;
  font-size: .85rem;
  font-family: var(--wb-font);
  background: var(--wb-light);
  color: var(--wb-dark);
}
.range-row input:focus { outline: none; border-color: var(--wb-primary); }

/* ── Advanced Enhancement: Watchlist Heart ───────────────────────── */
.wl-btn {
  position: absolute;
  top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  min-width: 44px; min-height: 44px;
  background: rgba(255,255,255,.9);
  border: none; border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.1rem;
  backdrop-filter: blur(4px);
  transition: background .2s, transform .2s var(--wb-ease-spring, cubic-bezier(.34,1.56,.64,1));
  z-index: 2; text-decoration: none;
}
.wl-btn:hover  { background: #fff; transform: scale(1.12); }
.wl-btn:active { background: #fff; transform: scale(.95); }
.wl-btn.saved { color: #ef4444; }
.wl-btn:not(.saved) { color: #94a3b8; }

/* ── Advanced Enhancement: Infra Score Badge ─────────────────────── */
.infra-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .15rem .5rem; border-radius: 20px;
  font-size: .7rem; font-weight: 700;
}
.infra-badge--high   { background: #dcfce7; color: #16a34a; }
.infra-badge--medium { background: #fef9c3; color: #ca8a04; }
.infra-badge--low    { background: #fee2e2; color: #dc2626; }

/* ── Advanced Enhancement: Sticky Buy Bar ────────────────────────── */
.prop-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--wb-card);
  border-top: 2px solid var(--wb-border);
  box-shadow: 0 -4px 24px rgba(15,23,42,.1);
  padding: .75rem 0;
  z-index: 200;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.prop-sticky-bar.visible { transform: translateY(0); }
.prop-sticky-bar__inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.prop-sticky-bar__info { flex: 1; min-width: 0; }
.prop-sticky-bar__title {
  font-weight: 700; font-size: .95rem;
  color: var(--wb-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prop-sticky-bar__price {
  font-size: 1.3rem; font-weight: 800; color: var(--wb-primary); line-height: 1.1;
}
.prop-sticky-bar__emi { font-size: .75rem; color: var(--wb-muted); }
.prop-sticky-bar__actions { display: flex; gap: .6rem; align-items: center; flex-shrink: 0; }

/* ── Advanced Enhancement: Share Buttons ─────────────────────────── */
.share-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: 1.1rem; }
.share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .38rem .8rem; border-radius: 6px;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  border: 1.5px solid var(--wb-border);
  background: var(--wb-card); color: var(--wb-mid);
  transition: all .2s; text-decoration: none;
}
.share-btn:hover  { border-color: var(--wb-primary); color: var(--wb-primary); background: rgba(37,99,235,.05); text-decoration: none; }
.share-btn:active { border-color: var(--wb-primary); color: var(--wb-primary); background: rgba(37,99,235,.13); transform: scale(.96); }
.share-btn--wa { color: #25d366; border-color: #25d366; }
.share-btn--wa:hover { background: #25d366; color: #fff; border-color: #25d366; }

/* ── Advanced Enhancement: Related Properties ────────────────────── */
.related-section { padding: 3rem 0 4rem; background: var(--wb-light); }
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

/* ── Advanced Enhancement: WhatsApp Float ────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 5.5rem; right: 1.5rem;
  width: 50px; height: 50px;
  background: #25d366; color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.4);
  text-decoration: none; z-index: 398;
  transition: transform .25s, box-shadow .25s;
  animation: wa-pulse 3s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.55); text-decoration: none; color: #fff; }
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.4); }
  50%      { box-shadow: 0 4px 32px rgba(37,211,102,.65); }
}

/* ── Advanced Enhancement: EMI Calculator Page ───────────────────── */
.emi-calc-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: start;
}
.emi-input-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: var(--wb-shadow-lg);
  padding: 1.75rem;
  position: sticky; top: 84px;
}
.emi-input-card h3 { margin-bottom: 1.25rem; }
.emi-input-label {
  font-size: .8rem; font-weight: 600;
  color: var(--wb-mid); margin-bottom: .4rem; display: block;
}
.emi-price-input {
  width: 100%; padding: .75rem 1rem;
  border: 2px solid var(--wb-border);
  border-radius: var(--wb-radius-sm);
  font-size: 1.1rem; font-weight: 700;
  font-family: var(--wb-font);
  background: var(--wb-light); color: var(--wb-dark);
  transition: border-color .2s;
}
.emi-price-input:focus { outline: none; border-color: var(--wb-primary); }

.emi-plan-table {
  width: 100%; border-collapse: collapse;
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  overflow: hidden;
  box-shadow: var(--wb-shadow);
}
.emi-plan-table thead th {
  background: var(--wb-dark); color: #fff;
  padding: .85rem 1rem; font-size: .78rem;
  font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; text-align: left;
}
.emi-plan-table tbody td {
  padding: .75rem 1rem; font-size: .875rem;
  border-bottom: 1px solid var(--wb-border);
  color: var(--wb-mid);
}
.emi-plan-table tbody tr:last-child td { border-bottom: none; }
.emi-plan-table tbody tr:hover td { background: rgba(37,99,235,.03); }
.emi-plan-table .highlight td { background: rgba(16,185,129,.06); }
.emi-plan-table .highlight td:first-child { border-left: 3px solid var(--wb-accent); }
.emi-plan-table .col-monthly { font-weight: 700; font-size: 1rem; color: var(--wb-dark); }
.emi-plan-table .col-total { font-weight: 600; color: var(--wb-dark); }
.emi-plan-table .col-int { color: #dc2626; font-weight: 600; }
.emi-plan-table .col-int-pct { font-size: .8rem; }

/* ── Advanced Enhancement: ROI Calculator ────────────────────────── */
.roi-section { background: var(--wb-card); }
.roi-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem; align-items: center;
}
.roi-calc-card {
  background: var(--wb-light);
  border: 1.5px solid var(--wb-border);
  border-radius: var(--wb-radius);
  padding: 1.75rem;
}
.roi-calc-card label {
  font-size: .8rem; font-weight: 600; color: var(--wb-mid); display: block; margin-bottom: .4rem;
}
.roi-calc-card input[type="range"] {
  width: 100%; accent-color: var(--wb-primary); cursor: pointer;
}
.roi-calc-card input[type="number"] {
  width: 100%; padding: .65rem 1rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 6px; font-size: 1rem; font-weight: 600;
  font-family: var(--wb-font);
  background: #fff; color: var(--wb-dark);
}
.roi-calc-card input[type="number"]:focus { outline: none; border-color: var(--wb-primary); }
.roi-results { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.roi-result-row {
  display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: var(--wb-radius-sm);
  border: 1.5px solid var(--wb-border);
  transition: border-color .2s, background .2s;
}
.roi-result-row:hover { border-color: var(--wb-accent); background: rgba(16,185,129,.04); }
.roi-result-row__rate { font-size: .8rem; color: var(--wb-muted); margin-top: .1rem; }
.roi-result-row__label { font-weight: 600; color: var(--wb-dark); font-size: .9rem; }
.roi-result-row__value { font-size: 1.3rem; font-weight: 800; color: var(--wb-accent); white-space: nowrap; }
.roi-result-row__profit { font-size: .75rem; color: var(--wb-accent); font-weight: 600; }

/* ── Responsive additions ────────────────────────────────────────── */
@media (max-width: 360px) {
  .trust-bar__inner   { gap: .6rem; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .trust-bar__item    { font-size: .72rem; flex-shrink: 0; }
}

@media (max-width: 768px) {
  .trust-bar__divider { display: none; }
  .trust-bar__inner   { gap: 1rem; }
  .hero__search       { max-width: 100%; }
  .invest-strip__inner { grid-template-columns: 1fr; }
  .invest-metrics     { max-width: 360px; }
  .theme-toggle       { display: none; }
  .plots-grid.list-view .plot-card { flex-direction: column; }
  .plots-grid.list-view .plot-card__img { width: 100%; height: 200px; }
  .plots-grid.list-view .plot-card__footer { border-left: none; border-top: 1px solid var(--wb-border); flex-direction: row; }
  .emi-calc-layout    { grid-template-columns: 1fr; }
  .emi-input-card     { position: static; }
  .roi-wrap           { grid-template-columns: 1fr; }
  .prop-sticky-bar__info { display: none; }
}
@media (max-width: 480px) {
  .invest-metrics { grid-template-columns: 1fr 1fr; }
}

/* ── Property Page Enhancements ──────────────────────────────────── */

/* Breadcrumb */
.prop-breadcrumb {
  background: var(--wb-card);
  border-bottom: 1px solid var(--wb-border);
  padding: .65rem 0;
  font-size: .8rem;
  color: var(--wb-muted);
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.prop-breadcrumb a { color: var(--wb-muted); }
.prop-breadcrumb a:hover { color: var(--wb-primary); text-decoration: none; }
.prop-breadcrumb__sep { margin: 0 .4rem; opacity: .45; }

/* Gallery */
.prop-gallery-wrap { position: relative; border-radius: var(--wb-radius); overflow: hidden; background: var(--wb-border); }
.prop-gallery-main {
  width: 100%; height: 360px; object-fit: cover; display: block;
  cursor: pointer; transition: transform .3s ease;
}
.prop-gallery-main:hover { transform: scale(1.015); }
.prop-gallery-placeholder {
  height: 360px; display: flex; align-items: center; justify-content: center;
  font-size: 5rem; background: linear-gradient(135deg, var(--wb-light), var(--wb-border));
  border-radius: var(--wb-radius);
}
.prop-gallery-count {
  position: absolute; bottom: .75rem; right: .75rem;
  background: rgba(15,23,42,.65); color: #fff; font-size: .72rem; font-weight: 600;
  padding: .25rem .6rem; border-radius: 20px; backdrop-filter: blur(4px);
  pointer-events: none;
}
.prop-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,.9); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.15);
  transition: background .15s, transform .15s;
}
.prop-gallery-nav:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.prop-gallery-nav--prev { left: .75rem; }
.prop-gallery-nav--next { right: .75rem; }
.prop-gallery-thumbstrip {
  display: flex; gap: .5rem; margin-top: .6rem; overflow-x: auto;
  padding-bottom: .25rem; scrollbar-width: thin;
}
.prop-gallery-thumb {
  flex-shrink: 0; width: 72px; height: 52px; object-fit: cover;
  border-radius: 6px; cursor: pointer; border: 2px solid transparent;
  transition: border-color .15s, opacity .15s; opacity: .65;
}
.prop-gallery-thumb.active,
.prop-gallery-thumb:hover { border-color: var(--wb-primary); opacity: 1; }

/* Lightbox */
.prop-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; cursor: zoom-out; animation: lb-in .18s ease;
}
@keyframes lb-in { from { opacity:0; } to { opacity:1; } }
.prop-lightbox img { max-width: 95vw; max-height: 90vh; border-radius: 8px; object-fit: contain; }
.prop-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem;
  color: #fff; font-size: 2rem; cursor: pointer; opacity: .7; line-height: 1;
}
.prop-lightbox-close:hover { opacity: 1; }

/* Key Highlights Bar */
.prop-highlights {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .75rem; margin: 1.5rem 0;
}
.prop-highlight-card {
  background: var(--wb-card); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); padding: .9rem .75rem; text-align: center;
  transition: box-shadow .2s, transform .2s;
}
.prop-highlight-card:hover { box-shadow: var(--wb-shadow); transform: translateY(-2px); }
.prop-highlight-card__icon { font-size: 1.4rem; margin-bottom: .3rem; }
.prop-highlight-card__value { font-size: 1rem; font-weight: 700; color: var(--wb-dark); line-height: 1.2; }
.prop-highlight-card__label { font-size: .68rem; color: var(--wb-muted); margin-top: .15rem; text-transform: uppercase; letter-spacing: .04em; }

/* Infra Score Bar */
.prop-infra { margin: 1.5rem 0; }
.prop-infra__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.prop-infra__score { font-size: 1.35rem; font-weight: 800; }
.prop-infra__score--high   { color: #10b981; }
.prop-infra__score--medium { color: #f59e0b; }
.prop-infra__score--low    { color: #ef4444; }
.prop-infra__bar { height: 10px; background: var(--wb-border); border-radius: 5px; overflow: hidden; }
.prop-infra__fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #10b981, #059669);
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.prop-infra__fill--medium { background: linear-gradient(90deg, #f59e0b, #d97706); }
.prop-infra__fill--low    { background: linear-gradient(90deg, #ef4444, #dc2626); }
.prop-infra__labels { display: flex; justify-content: space-between; font-size: .68rem; color: var(--wb-muted); margin-top: .3rem; }

/* Amenities */
.prop-amenities-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.prop-amenity-tag {
  display: flex; align-items: center; gap: .35rem;
  background: rgba(16,185,129,.08); color: #065f46;
  border: 1px solid rgba(16,185,129,.25);
  padding: .3rem .75rem; border-radius: 20px; font-size: .78rem; font-weight: 500;
}
[data-theme="dark"] .prop-amenity-tag { color: #6ee7b7; border-color: rgba(16,185,129,.3); background: rgba(16,185,129,.12); }

/* Feature chips */
.prop-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .75rem; }
.prop-feature-item {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--wb-light); border: 1px solid var(--wb-border);
  border-radius: var(--wb-radius-sm); padding: .6rem .75rem; font-size: .8rem;
}
.prop-feature-item__icon { font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }
.prop-feature-item__key  { font-weight: 600; color: var(--wb-dark); font-size: .75rem; }
.prop-feature-item__val  { color: var(--wb-mid); font-size: .72rem; }

/* Map */
.prop-map-wrap { border-radius: var(--wb-radius); overflow: hidden; border: 1px solid var(--wb-border); margin-top: .75rem; }
.prop-map-wrap iframe { display: block; width: 100%; height: 280px; border: none; }
.prop-map-label { display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: var(--wb-muted); margin-top: .5rem; }

/* Appreciation / Investment card */
.prop-invest-card {
  background: linear-gradient(135deg, #064e3b, #065f46);
  border-radius: var(--wb-radius); padding: 1.25rem 1.5rem;
  color: #fff; margin: 1.5rem 0;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1rem;
}
.prop-invest-card__badge {
  display: inline-block; background: rgba(255,255,255,.15);
  color: #a7f3d0; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  padding: .2rem .6rem; border-radius: 20px; margin-bottom: .5rem;
}
.prop-invest-card__title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .25rem; }
.prop-invest-card__sub   { font-size: .78rem; color: rgba(255,255,255,.7); }
.prop-invest-card__stat  { text-align: center; }
.prop-invest-card__pct   { font-size: 2rem; font-weight: 800; color: #6ee7b7; line-height: 1; }
.prop-invest-card__pct-label { font-size: .65rem; color: rgba(255,255,255,.65); }
.prop-invest-years        { display: flex; gap: .75rem; margin-top: .75rem; flex-wrap: wrap; }
.prop-invest-year         { flex: 1; background: rgba(255,255,255,.1); border-radius: 8px; padding: .5rem .65rem; text-align: center; min-width: 70px; }
.prop-invest-year__yr     { font-size: .65rem; color: rgba(255,255,255,.6); }
.prop-invest-year__val    { font-size: .85rem; font-weight: 700; color: #fff; }

/* Trust seals in sidebar */
.prop-trust-row {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0;
  padding: .75rem; background: rgba(16,185,129,.05);
  border: 1px solid rgba(16,185,129,.15); border-radius: var(--wb-radius-sm);
}
.prop-trust-badge {
  display: flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600; color: #065f46;
}
[data-theme="dark"] .prop-trust-badge { color: #6ee7b7; }

/* Section dividers in property */
.prop-section { margin: 2rem 0; }
.prop-section-title {
  font-size: 1rem; font-weight: 700; color: var(--wb-dark);
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--wb-border);
}
.prop-section-title__icon { font-size: 1.1rem; }

/* Price breakdown in sidebar */
.prop-price-breakdown { margin: .75rem 0 1rem; }
.prop-price-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .78rem; padding: .3rem 0; border-bottom: 1px dotted var(--wb-border);
}
.prop-price-row:last-child { border-bottom: none; }
.prop-price-row--total { font-weight: 700; font-size: .9rem; border-bottom: none; margin-top: .25rem; }

/* Responsive overrides */
@media (max-width: 768px) {
  .prop-highlights { grid-template-columns: repeat(3, 1fr); }
  .prop-gallery-main { height: 240px; }
  .prop-gallery-placeholder { height: 240px; }
  .prop-feature-list { grid-template-columns: 1fr; }
  .prop-invest-card { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .prop-highlights { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive nav ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  .wb-nav__links,
  .wb-nav__actions .btn:not(.wb-nav__theme-btn) { display: none; }
  .wb-nav__hamburger { display: flex; align-items: center; }
  .wb-nav__actions { gap: .4rem; }
}
@media (max-width: 480px) {
  .wb-nav__actions .wb-nav__theme-btn { display: none; }
}

/* ── Section entry animations ────────────────────────────────────── */
@keyframes wbFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-wb {
  animation: wbFadeUp .55s cubic-bezier(.4,0,.2,1) both;
}
.animate-wb--d1 { animation-delay: .1s; }
.animate-wb--d2 { animation-delay: .2s; }
.animate-wb--d3 { animation-delay: .3s; }
.animate-wb--d4 { animation-delay: .4s; }

/* ── Premium value-card top accent ──────────────────────────────── */
.value-card {
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}
.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-lg);
}

/* ── Premium step numbers with glow ─────────────────────────────── */
.step-item__num {
  position: relative;
  transition: transform var(--wb-transition), box-shadow var(--wb-transition);
}
.step-item:hover .step-item__num {
  transform: scale(1.1);
  box-shadow: 0 8px 28px rgba(37,99,235,.5);
}

/* ── Premium testimonial hover ───────────────────────────────────── */
.testimonial-card {
  border: 1px solid var(--wb-border);
  transition: transform var(--wb-transition), box-shadow var(--wb-transition),
              border-color var(--wb-transition);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-lg);
  border-color: rgba(37,99,235,.2);
}

/* ── Enhanced CTA banner ─────────────────────────────────────────── */
.cta-banner {
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.04'%3E%3Cpath d='M20 20.5V18H0v5h20v-.5zm0-6V11H0v5h20v-.5zM20 8.5V6H0v5h20V8.5zM40 23v-5H20v5h20zm0-11v-5H20v5h20z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Button premium gradient variant ────────────────────────────── */
.btn-premium {
  background: linear-gradient(135deg, var(--wb-primary) 0%, #7c3aed 100%);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 18px rgba(37,99,235,.35);
  position: relative; overflow: hidden;
}
.btn-premium::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .5s ease;
}
.btn-premium:hover::after { left: 150%; }
.btn-premium:hover  { background: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%); box-shadow: 0 6px 28px rgba(37,99,235,.5); }
.btn-premium:active { background: linear-gradient(135deg, #1e40af 0%, #5b21b6 100%); box-shadow: 0 2px 10px rgba(37,99,235,.4); transform: scale(.97) translateY(1px); }

/* ── Footer brand gradient ───────────────────────────────────────── */
.wb-footer__brand {
  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.wb-footer__logo-mark {
  width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--wb-primary) 0%, #7c3aed 100%);
  border-radius: 7px; display: inline-grid; place-items: center;
  font-size: .95rem; font-weight: 900; color: #fff;
  vertical-align: middle; margin-right: .5rem;
  -webkit-text-fill-color: #fff;
}

/* ── Scroll progress bar driven by JS (sp.style.transform = scaleX) ── */
.scroll-progress {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 3px; z-index: 9999;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform .1s linear;
  pointer-events: none;
}

/* ── Dark mode tweaks for premium elements ───────────────────────── */
[data-theme="dark"] .feature-card {
  background: #1e293b; border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .feature-card:hover {
  border-color: rgba(99,102,241,.3);
}
[data-theme="dark"] .testimonial-card {
  background: #1e293b; border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .testimonial-card:hover {
  border-color: rgba(99,102,241,.25);
}
[data-theme="dark"] .step-item__num {
  box-shadow: 0 4px 18px rgba(37,99,235,.45);
}
[data-theme="dark"] .stats-bar { background: #1e293b; }

/* announcement-bar — consolidated in the v6 polish block at the end of this file */

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM UPGRADE LAYER — overrides & enhancements on top of base
   ═══════════════════════════════════════════════════════════════════ */

/* ── Enhanced reveal with spring easing ─────────────────────────── */
.reveal {
  transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1);
}
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }
.reveal-d4 { transition-delay: .32s; }
.reveal-d5 { transition-delay: .4s; }

/* ── Premium hero search bar ─────────────────────────────────────── */
.hero__search {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.15);
  max-width: 460px;
}
.hero__search input {
  background: transparent;
  color: #fff;
  padding: .8rem 1.25rem;
  font-size: .9rem;
}
.hero__search input::placeholder { color: rgba(255,255,255,.55); }
.hero__search button {
  border-radius: 0 99px 99px 0;
  padding: .8rem 1.35rem;
  background: rgba(255,255,255,.2);
  font-size: .85rem;
  transition: background var(--wb-transition);
}
.hero__search button:hover { background: rgba(255,255,255,.32); color: #fff; }

/* ── Premium city pills ──────────────────────────────────────────── */
.city-pill {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s, border-color .2s, transform .2s var(--wb-ease-spring);
}
.city-pill:hover { transform: translateY(-2px) scale(1.04); }

/* ── Premium trust bar ───────────────────────────────────────────── */
.trust-bar {
  background: linear-gradient(90deg, var(--wb-card) 0%, var(--wb-light) 50%, var(--wb-card) 100%);
  border-bottom: 1px solid var(--wb-border);
  border-top: 1px solid var(--wb-border);
  padding: 1.1rem 0;
  position: relative; overflow: hidden;
}
.trust-bar::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--wb-primary) 0%, #7c3aed 50%, var(--wb-accent) 100%);
}
.trust-bar__item {
  gap: .55rem;
  transition: transform .2s var(--wb-ease-spring), color var(--wb-transition);
}
.trust-bar__item:hover { color: var(--wb-primary); transform: translateY(-1px); }
.trust-bar__item strong { color: var(--wb-dark); }
.trust-bar__icon { font-size: 1.1rem; }

/* ── Premium invest-strip metric cards ───────────────────────────── */
.invest-metric {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--wb-radius);
  padding: 1.35rem; text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .25s, transform .25s var(--wb-ease-spring), box-shadow .25s;
  position: relative; overflow: hidden;
}
.invest-metric::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.07) 0%, transparent 60%);
  pointer-events: none;
}
.invest-metric:hover {
  background: rgba(255,255,255,.15);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
}
.invest-metric strong {
  font-size: 2rem; font-weight: 800;
  background: linear-gradient(135deg, #fff 0%, var(--wb-accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Premium ROI calculator ──────────────────────────────────────── */
.roi-section {
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  padding: 5rem 0;
  position: relative; overflow: hidden;
}
.roi-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 70% 50%, rgba(99,102,241,.15) 0%, transparent 70%);
  pointer-events: none;
}
.roi-section .section-header * { color: #fff !important; }
.roi-calc-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--wb-radius);
  padding: 2rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.roi-calc-card label { color: rgba(255,255,255,.7); }
.roi-calc-card input[type="number"] {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff; border-radius: 8px;
}
.roi-calc-card input[type="number"]:focus {
  border-color: rgba(99,102,241,.7);
  box-shadow: 0 0 0 3px rgba(99,102,241,.2);
}
.roi-calc-card input[type="range"] { accent-color: #818cf8; }
.roi-results { gap: .75rem; }
.roi-result-row {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--wb-radius-sm);
  padding: 1rem 1.25rem;
  transition: background .2s, border-color .2s, transform .2s;
}
.roi-result-row:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(16,185,129,.4);
  transform: translateX(4px);
}
.roi-result-row__label { color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 500; }
.roi-result-row__value { color: #6ee7b7; font-size: 1.4rem; font-weight: 800; }

/* ── Premium stats bar ───────────────────────────────────────────── */
.stats-bar {
  background: linear-gradient(90deg, #1e3a8a 0%, var(--wb-primary) 50%, #1e3a8a 100%);
  padding: 2rem 0;
  position: relative;
}
.stats-bar::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
}
.stats-bar__item strong {
  font-size: 2.25rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}

/* ── Feature card icon rotation on hover ────────────────────────── */
.feature-card:hover .feature-card__icon {
  transform: scale(1.14) rotate(-5deg);
}

/* ── Plot card premium hover ─────────────────────────────────────── */
.plot-card {
  transition: transform .25s var(--wb-ease-spring), box-shadow .25s;
  border: 1px solid var(--wb-border);
}
.plot-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(15,23,42,.18);
  border-color: rgba(37,99,235,.2);
}

/* ── Hero stat card premium glass ────────────────────────────────── */
.hero__stat-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px;
  transition: transform .3s var(--wb-ease-spring), background .3s;
}
.hero__stat-card:hover {
  background: rgba(255,255,255,.18);
  transform: translateY(-3px) scale(1.03);
}

/* ── Premium section badge-label ─────────────────────────────────── */
.badge-label {
  background: linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(124,58,237,.08) 100%);
  border: 1px solid rgba(37,99,235,.2);
  color: var(--wb-primary);
  font-weight: 700;
  letter-spacing: .1em;
  padding: .35rem .9rem;
  border-radius: 99px;
  display: inline-block;
  font-size: .72rem;
  text-transform: uppercase;
  margin-bottom: .85rem;
}

/* ── About page values/team card premium hover ───────────────────── */
.value-card {
  border-top: 3px solid transparent;
  transition: transform .25s var(--wb-ease-spring), box-shadow .25s, border-color .25s;
}
.value-card:hover {
  border-top-color: var(--wb-primary);
  transform: translateY(-5px);
  box-shadow: 0 16px 48px rgba(15,23,42,.14);
}
.team-card {
  border: 1px solid var(--wb-border);
  transition: transform .25s var(--wb-ease-spring), box-shadow .25s, border-color .25s;
}
.team-card:hover {
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 16px 48px rgba(15,23,42,.14);
}

/* ── Contact form input focus glow ───────────────────────────────── */
.wb-form__control:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15), 0 2px 8px rgba(37,99,235,.1);
}

/* ── Footer premium brand ────────────────────────────────────────── */
.wb-footer {
  background: linear-gradient(180deg, #0a0f1e 0%, #0f172a 100%);
  position: relative;
}
.wb-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.4), rgba(124,58,237,.4), transparent);
}
.wb-footer__social a {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, color .2s, border-color .2s, transform .2s var(--wb-ease-spring);
}
.wb-footer__social a:hover {
  background: var(--wb-primary);
  border-color: var(--wb-primary);
  color: #fff;
  transform: translateY(-2px) scale(1.08);
}

/* ── Animated floating gradient orbs in hero ─────────────────────── */
@keyframes orb-float {
  0%,100% { transform: translate(0, 0) scale(1); }
  33%     { transform: translate(20px, -15px) scale(1.05); }
  66%     { transform: translate(-10px, 10px) scale(.97); }
}
.hero {
  position: relative; overflow: hidden;
}
.hero__orb {
  position: absolute; border-radius: 50%; pointer-events: none; filter: blur(60px);
  animation: orb-float 14s ease-in-out infinite;
}
.hero__orb-1 {
  width: 400px; height: 400px;
  background: rgba(99,102,241,.18);
  top: -100px; right: -100px;
}
.hero__orb-2 {
  width: 300px; height: 300px;
  background: rgba(16,185,129,.12);
  bottom: -80px; left: -80px;
  animation-delay: -7s;
}

/* ── Dark mode premium overrides ────────────────────────────────── */
[data-theme="dark"] .trust-bar {
  background: linear-gradient(90deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
  border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .trust-bar::before {
  opacity: .6;
}
[data-theme="dark"] .roi-calc-card input[type="number"] {
  background: rgba(255,255,255,.05);
}
[data-theme="dark"] .badge-label {
  background: rgba(37,99,235,.15);
  border-color: rgba(37,99,235,.3);
}

/* ══════════════════════════════════════════════════════════════════
   About Page — Responsive Grids & Premium Elements
   ══════════════════════════════════════════════════════════════════ */

/* Story two-column layout */
.about-story-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.about-story-visual {
  background: linear-gradient(135deg, #1e3a8a, #3b82f6);
  border-radius: var(--wb-radius);
  aspect-ratio: 4/3;
  display: grid;
  place-items: center;
  font-size: 5rem;
  box-shadow: 0 20px 60px rgba(37,99,235,.35);
}

/* 2×2 stats mini-grid inside story */
.about-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.about-stat-card {
  padding: 1.25rem;
  background: var(--wb-light);
  border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-border);
  transition: transform .2s, box-shadow .2s;
}
.about-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-md, 0 8px 25px rgba(0,0,0,.1));
}

/* Mission / Vision two-column */
.about-mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.about-mv-card {
  padding: 2.5rem;
  border-radius: var(--wb-radius);
  color: #fff;
  transition: transform .3s var(--wb-ease-spring, cubic-bezier(.34,1.56,.64,1));
}
.about-mv-card:hover { transform: translateY(-5px); }
.about-mv-card--mission { background: var(--wb-primary); box-shadow: 0 16px 48px rgba(37,99,235,.35); }
.about-mv-card--vision  { background: #0f172a; box-shadow: 0 16px 48px rgba(0,0,0,.35); }

/* Certification card */
.about-cert-card {
  padding: 1.5rem 2.5rem;
  border-radius: var(--wb-radius);
  background: var(--wb-card);
  box-shadow: var(--wb-shadow);
  text-align: center;
  min-width: 160px;
  flex: 1 1 160px;
  max-width: 240px;
  transition: transform .25s, box-shadow .25s;
}
.about-cert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
}

/* About hero needs overflow:hidden for orbs */
.about-hero { position: relative; overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════
   Contact Page — Premium Components
   ══════════════════════════════════════════════════════════════════ */

/* Quick contact row */
.contact-quick-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.contact-quick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 1rem;
  border-radius: var(--wb-radius-sm);
  background: var(--wb-light);
  border: 1px solid var(--wb-border);
  text-decoration: none;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-quick-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(37,99,235,.12);
  border-color: var(--wb-primary);
}
.contact-quick-card__icon { font-size: 1.5rem; margin-bottom: .35rem; }
.contact-quick-card__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--wb-muted);
  margin-bottom: .2rem;
}
.contact-quick-card__val {
  font-size: .9rem;
  font-weight: 600;
  color: var(--wb-dark);
  word-break: break-all;
}

/* Support hint box */
.contact-support-box {
  margin-top: 2rem;
  padding: 1.5rem;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.06));
  border-radius: var(--wb-radius-sm);
  border: 1px solid rgba(37,99,235,.15);
}

/* Premium form card */
.contact-form-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
  overflow: hidden;
  border: 1px solid var(--wb-border);
}
.contact-form-card__header {
  padding: 1.5rem 1.75rem 1.25rem;
  background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
  color: #fff;
}
.contact-form-card__header h3 { color: #fff; margin-bottom: .25rem; }
.contact-form-card__header p  { color: rgba(255,255,255,.8); font-size: .9rem; }

/* ══════════════════════════════════════════════════════════════════
   Mobile Responsiveness — About & Contact
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  .about-story-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .about-story-visual {
    aspect-ratio: 16/9;
    font-size: 4rem;
    min-height: 200px;
  }
  .about-mv-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 640px) {
  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
  }
  .about-stat-card { padding: 1rem; }
  .about-mv-card { padding: 1.75rem 1.5rem; }
  .contact-quick-row { grid-template-columns: 1fr 1fr; }
  .about-hero { padding: 3.5rem 0 2.5rem; }
}

@media (max-width: 480px) {
  .about-stats-grid { grid-template-columns: 1fr 1fr; }
  .contact-quick-row { grid-template-columns: 1fr; }
  .contact-quick-card { flex-direction: row; text-align: left; gap: .75rem; align-items: flex-start; }
  .contact-quick-card__icon { flex-shrink: 0; }
  .about-mv-card { padding: 1.5rem 1.25rem; }
  .about-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
}

/* ══════════════════════════════════════════════════════════════════
   Global Mobile Gaps — App Admin Pages
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Tables scroll horizontally on small screens */
  .wb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Full-width modals on mobile */
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }
  .modal-body   { max-height: 75vh; overflow-y: auto; }

  /* Form single-column on small screens */
  .wb-form__row { grid-template-columns: 1fr; }

  /* Hero text scaling */
  .hero h1 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .section-header h2 { font-size: clamp(1.4rem, 6vw, 2rem); }
}

@media (max-width: 480px) {
  /* Landscape phone: reduce section padding */
  .section { padding: 2.5rem 0; }
  .about-hero, .page-hero { padding: 3rem 0 2rem; }

  /* CTA banner vertical stack */
  .cta-banner { padding: 3rem 0; }
  .cta-banner__actions { flex-direction: column; align-items: center; }
  .cta-banner__actions .btn,
  .cta-banner__actions .btn-premium { width: 100%; max-width: 320px; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   Property Page — Premium Additions
   ══════════════════════════════════════════════════════════════════ */

/* Hero overflow for orbs */
.prop-hero { position: relative; overflow: hidden; }

/* Badge row */
.prop-hero__badges {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: .75rem;
}
.prop-hero__appr-badge {
  background: rgba(16,185,129,.2); color: #6ee7b7;
  padding: .2rem .6rem; border-radius: 20px;
  font-size: .72rem; font-weight: 700;
}
.prop-hero__title {
  font-size: clamp(1.4rem, 3.5vw, 2.4rem);
  color: #fff; margin-bottom: .75rem;
}

/* Infra score text colours */
.infra-text--high   { color: #10b981; }
.infra-text--medium { color: #f59e0b; }
.infra-text--low    { color: #ef4444; }
[data-theme="dark"] .infra-text--high   { color: #6ee7b7; }
[data-theme="dark"] .infra-text--medium { color: #fcd34d; }
[data-theme="dark"] .infra-text--low    { color: #fca5a5; }

/* Gallery height responsive */
@media (max-width: 640px) {
  .prop-gallery-main    { height: 220px; }
  .prop-gallery-placeholder { height: 220px; }
}
@media (max-width: 480px) {
  .prop-gallery-main    { height: 180px; }
  .prop-gallery-placeholder { height: 180px; }
  .prop-gallery-nav     { width: 32px; height: 32px; font-size: .85rem; }
}

/* prop-body collapse at 860px for modern devices (override old 1024px) */
@media (max-width: 860px) {
  .prop-body { grid-template-columns: 1fr; }
  .prop-sidebar-card { position: static; }
}

/* Details grid single column on small phones */
@media (max-width: 480px) {
  .prop-details-grid { grid-template-columns: 1fr; }
  .prop-body { padding: 1.5rem 0; }
  .prop-sidebar-card { padding: 1.25rem; }
  .prop-price { font-size: 1.6rem; }
}

/* EMI option touch target */
.prop-emi-option { min-height: 52px; }

/* Invest card mobile */
@media (max-width: 480px) {
  .prop-invest-card { padding: 1rem; }
  .prop-invest-card__pct { font-size: 1.5rem; }
}

/* Sticky bar responsive */
@media (max-width: 480px) {
  .prop-sticky-bar .container {
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .prop-sticky-bar .btn { width: 100%; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════
   EMI Calculator — Premium Components
   ══════════════════════════════════════════════════════════════════ */

.emi-calc-hero { position: relative; overflow: hidden; }

.emi-input-card__header {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--wb-border);
}

.emi-result-summary {
  background: var(--wb-primary);
  border-radius: var(--wb-radius);
  padding: 1.5rem;
  color: #fff;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 32px rgba(37,99,235,.3);
}
.emi-result-summary__label { font-size: .85rem; opacity: .8; margin-bottom: .25rem; }
.emi-result-summary__amount {
  font-size: 2.25rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.1;
}
.emi-result-summary__sub { margin-top: .75rem; font-size: .8rem; opacity: .75; }
.emi-result-summary__sub strong { opacity: 1; }

.emi-plan-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--wb-radius-sm);
  border: 1px solid var(--wb-border);
  margin-bottom: 1.25rem;
}
.emi-plan-table { width: 100%; min-width: 320px; border-collapse: collapse; }
.emi-plan-table th {
  background: var(--wb-light); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--wb-muted);
  padding: .65rem .85rem; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--wb-border);
}
.emi-plan-table td {
  padding: .6rem .85rem; font-size: .875rem; color: var(--wb-dark);
  border-bottom: 1px solid var(--wb-border);
}
.emi-plan-table tr:last-child td { border-bottom: none; }
.emi-plan-table tr:hover td { background: rgba(37,99,235,.03); }
.emi-table-placeholder { text-align: center; color: var(--wb-muted); padding: 1.5rem; }
.emi-table-total td { border-top: 2px solid var(--wb-border); }
.emi-section-label {
  font-size: .88rem; font-weight: 700; color: var(--wb-muted);
  margin-bottom: .65rem; text-transform: uppercase; letter-spacing: .04em;
}

.emi-trust-strip {
  background: var(--wb-card);
  padding: 2.5rem 0;
  border-top: 1px solid var(--wb-border);
}
.emi-trust-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: .5rem;
}
.emi-trust-item {
  display: flex; align-items: flex-start; gap: .75rem;
}
.emi-trust-item__icon {
  font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem;
}
.emi-trust-item__label { font-weight: 700; font-size: .9rem; margin-bottom: .2rem; }
.emi-trust-item__sub   { font-size: .82rem; color: var(--wb-muted); line-height: 1.5; }

@media (max-width: 640px) {
  .emi-trust-strip__grid { grid-template-columns: 1fr; gap: 1rem; }
  .emi-result-summary__amount { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .emi-result-summary { padding: 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Support Track — Premium Components
   ══════════════════════════════════════════════════════════════════ */

.support-lookup-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  padding: 1.5rem;
  box-shadow: var(--wb-shadow);
  border: 1px solid var(--wb-border);
  margin-bottom: 2rem;
}
.support-lookup-form {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center;
}
.support-lookup-input {
  flex: 1; min-width: 180px;
}

.ticket-detail-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  overflow: hidden;
  box-shadow: var(--wb-shadow);
  border: 1px solid var(--wb-border);
  margin-bottom: 1.5rem;
}
.ticket-detail-card__header {
  display: flex; flex-wrap: wrap; gap: 1rem;
  align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--wb-border);
}
.ticket-detail-card__subject {
  padding: .85rem 1.5rem;
  background: var(--wb-light);
  font-size: .9rem;
  border-bottom: 1px solid var(--wb-border);
}
.ticket-detail-item__label {
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--wb-muted); margin-bottom: .25rem;
}
.ticket-detail-item__value { font-size: .95rem; font-weight: 600; }

.ticket-ai-badge {
  background: rgba(16,185,129,.1); color: #065f46;
  font-size: .7rem; padding: .1rem .4rem; border-radius: 10px; margin-left: .4rem;
}
[data-theme="dark"] .ticket-ai-badge { color: #6ee7b7; background: rgba(16,185,129,.2); }

.ticket-empty-state {
  text-align: center; padding: 3rem 0; color: var(--wb-muted);
}
.ticket-empty-state__icon { font-size: 3rem; margin-bottom: 1rem; }

/* Ticket message mobile */
@media (max-width: 480px) {
  .ticket-msg { max-width: 94%; padding: .75rem 1rem; }
  .ticket-detail-card__header { flex-direction: column; align-items: flex-start; }
  .ticket-detail-card__header > div { width: 100%; }
  .support-lookup-form { flex-direction: column; align-items: stretch; }
  .support-lookup-input { min-width: 0; }
  .support-lookup-form .btn { width: 100%; justify-content: center; }
}

/* ── EMI Calc charges row ─────────────────────────────────────────── */
.ec-charges-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: .75rem;
  margin-bottom: 1.1rem;
}
@media (max-width: 480px) {
  .ec-charges-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   Premium Nav Enhancements
   ══════════════════════════════════════════════════════════════════ */

/* Dropdown menu: spring animation */
.wb-nav__has-dropdown:hover .wb-nav__dropdown-menu,
.wb-nav__has-dropdown.is-open .wb-nav__dropdown-menu {
  animation: dropdownIn .2s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* Keyboard focus opens dropdown */
.wb-nav__has-dropdown:focus-within .wb-nav__dropdown-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Nav logo text hides on very small screens */
@media (max-width: 380px) {
  .wb-nav__logo-text { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Properties Page — Hero & Filter Bar Improvements
   ══════════════════════════════════════════════════════════════════ */

.props-hero {
  position: relative;
  overflow: hidden;
}
.filter-bar__price-label {
  flex: 1;
  min-width: 120px;
}
.filter-bar__price-label input {
  width: 100%;
  min-width: 0 !important;
}

@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar label,
  .filter-bar__price-label {
    min-width: 0;
    width: 100%;
    flex: none;
  }
  .filter-bar select,
  .filter-bar input {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
  }
  .filter-bar .btn { width: 100%; min-height: 44px; }
}

/* ══════════════════════════════════════════════════════════════════
   Support Page — Premium Form Card
   ══════════════════════════════════════════════════════════════════ */

.support-hero {
  position: relative;
  overflow: hidden;
}

.support-form-card {
  background: var(--wb-card);
  border-radius: var(--wb-radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
  overflow: hidden;
  border: 1px solid var(--wb-border);
}
.support-form-card__header {
  padding: 2rem 2rem 1.5rem;
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 60%, #7c3aed 100%);
  color: #fff;
  text-align: center;
}
.support-form-card__header h2 { color: #fff; }
.support-form-card__header p  { color: rgba(255,255,255,.8); font-size: .95rem; }
.support-form-card__body { padding: 2rem; }

@media (max-width: 480px) {
  .support-form-card__body { padding: 1.25rem; }
  .support-form-card__header { padding: 1.5rem 1.25rem 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Auto-nearby Banner — Responsive
   ══════════════════════════════════════════════════════════════════ */

.auto-city-banner {
  background: linear-gradient(135deg,rgba(37,99,235,.08),rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 12px;
  padding: .85rem 1.25rem;
  margin-bottom: 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.auto-city-banner__content { flex: 1; min-width: 160px; }
@media (max-width: 480px) {
  .auto-city-banner { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .auto-city-banner .btn { width: 100%; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════
   Global Mobile Gaps — 600px Intermediate Breakpoint
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
  /* Contact quick cards 2-col → 1-col */
  .contact-quick-row { grid-template-columns: 1fr 1fr; }

  /* Properties grid tighter */
  .plots-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }

  /* Values grid */
  .values-grid { grid-template-columns: 1fr 1fr; }

  /* Team grid single column */
  .team-grid { grid-template-columns: 1fr 1fr; }

  /* Timeline less padding */
  .timeline { padding-left: 1.5rem; }
}

@media (max-width: 480px) {
  /* All grids collapse to 1 column */
  .plots-grid  { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .team-grid   { grid-template-columns: 1fr; }
  .contact-quick-row { grid-template-columns: 1fr; }

  /* About hero font scaling */
  .about-hero h1, .page-hero h1, .support-hero h1 {
    font-size: clamp(1.55rem, 8vw, 2.25rem);
  }

  /* Mobile nav action buttons full-width */
  .wb-nav__mobile-actions .btn,
  .wb-nav__mobile-actions .btn-premium { justify-content: center; text-align: center; }
}

/* ══════════════════════════════════════════════════════════════════
   Custom Range Input Styling
   ══════════════════════════════════════════════════════════════════ */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 5px;
  background: var(--wb-border);
  outline: none;
  cursor: pointer;
  padding: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wb-primary);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
  transition: transform .15s var(--wb-ease-spring), box-shadow .15s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  box-shadow: 0 4px 16px rgba(37,99,235,.5);
}
input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--wb-primary);
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(37,99,235,.35);
}
input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 5px;
  background: var(--wb-border);
}
input[type="range"]:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 3px;
}
[data-theme="dark"] input[type="range"] {
  background: rgba(255,255,255,.12);
}

/* ══════════════════════════════════════════════════════════════════
   Dark Mode — New Component Overrides
   ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] .emi-result-summary {
  box-shadow: 0 8px 32px rgba(37,99,235,.5);
}
[data-theme="dark"] .emi-trust-strip {
  background: #0f172a;
  border-top: 1px solid var(--wb-border);
}
[data-theme="dark"] .emi-trust-item {
  background: rgba(255,255,255,.04);
  border-color: var(--wb-border);
}
[data-theme="dark"] .emi-plan-table th {
  background: rgba(255,255,255,.06);
  color: var(--wb-dark);
}
[data-theme="dark"] .emi-plan-table td {
  border-color: var(--wb-border);
  color: var(--wb-dark);
}
[data-theme="dark"] .contact-form-card {
  background: var(--wb-card);
}
[data-theme="dark"] .support-form-card {
  background: var(--wb-card);
}
[data-theme="dark"] .support-lookup-card {
  background: var(--wb-card);
}
[data-theme="dark"] .ticket-detail-card {
  background: var(--wb-card);
}
[data-theme="dark"] .ticket-detail-card__header {
  border-bottom-color: var(--wb-border);
}
[data-theme="dark"] .ticket-msg {
  background: rgba(255,255,255,.04);
  border-color: var(--wb-border);
}
[data-theme="dark"] .ticket-ai-badge {
  background: rgba(16,185,129,.15);
  color: #6ee7b7;
}

/* ══════════════════════════════════════════════════════════════════
   Testimonials — Mobile Snap Scroll
   ══════════════════════════════════════════════════════════════════ */

.testimonials-scroller {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.testimonial-card {
  scroll-snap-align: start;
  min-width: min(300px, 85vw);
}

/* ══════════════════════════════════════════════════════════════════
   Print Styles
   ══════════════════════════════════════════════════════════════════ */

@media print {
  .wb-nav, .wb-nav__mobile, .wb-nav__overlay,
  .wb-footer, .cta-banner, .invest-strip,
  .hero__orb, .trust-bar, .filter-bar { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  a { color: #000; text-decoration: underline; }
  .plot-card { break-inside: avoid; }
  .ticket-detail-card, .ticket-msg { break-inside: avoid; }
}

/* ══════════════════════════════════════════════════════════════════
   prefers-reduced-motion — Accessibility
   ══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__orb { animation: none !important; }
  .animate-wb {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn-premium::after { animation: none !important; }
  input[type="range"]::-webkit-slider-thumb { transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════
   Accessibility — Skip to Content
   ══════════════════════════════════════════════════════════════════ */

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 10000;
  background: var(--wb-primary);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: var(--wb-radius-sm);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.skip-to-content:focus { left: 1rem; }

/* ══════════════════════════════════════════════════════════════════
   Navigation — Dashboard button (subtle, distinct from CTA)
   ══════════════════════════════════════════════════════════════════ */

.wb-nav__dashboard-btn {
  background: rgba(37,99,235,.08);
  color: var(--wb-primary);
  border: 1.5px solid rgba(37,99,235,.22);
}
.wb-nav__dashboard-btn:hover {
  background: rgba(37,99,235,.16);
  border-color: rgba(37,99,235,.45);
  text-decoration: none;
}
[data-theme="dark"] .wb-nav__dashboard-btn {
  background: rgba(37,99,235,.18);
  border-color: rgba(37,99,235,.38);
  color: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════
   Footer — Semantic CSS Classes (replaces inline styles)
   ══════════════════════════════════════════════════════════════════ */

.footer-brand-wrap {
  display: flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  margin-bottom: .85rem;
}
.footer-brand-wrap:hover { text-decoration: none; }

.footer-logo-mark {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--wb-primary), var(--wb-secondary));
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 900;
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,.35);
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s;
}
.footer-brand-wrap:hover .footer-logo-mark {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(37,99,235,.5);
}

.footer-brand-name {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0;
  line-height: 1;
}

.footer-contact-item {
  font-size: .85rem;
  margin-bottom: .45rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.65);
}
.footer-contact-item a {
  color: rgba(255,255,255,.65);
  transition: color var(--wb-transition);
}
.footer-contact-item a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-bottom-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-trust-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .78rem;
}

@media (max-width: 560px) {
  .footer-bottom-trust { gap: .65rem; }
  .wb-footer__bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

/* ══════════════════════════════════════════════════════════════════
   About — Value Card Colour Variants & Certification Cards
   ══════════════════════════════════════════════════════════════════ */

.value-card--accent  { border-top-color: var(--wb-accent) !important; }
.value-card--purple  { border-top-color: var(--wb-secondary) !important; }
.value-card--amber   { border-top-color: var(--wb-warning) !important; }

.cert-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.about-cert-card--hmda strong { color: #1e40af; }
.about-cert-card--dtcp strong { color: #065f46; }
.about-cert-card--rera strong { color: var(--wb-secondary); }
.about-cert-card--ghmc strong { color: #92400e; }
[data-theme="dark"] .about-cert-card--hmda strong { color: #93c5fd; }
[data-theme="dark"] .about-cert-card--dtcp strong { color: #6ee7b7; }
[data-theme="dark"] .about-cert-card--rera strong { color: #c4b5fd; }
[data-theme="dark"] .about-cert-card--ghmc strong { color: #fcd34d; }

/* ══════════════════════════════════════════════════════════════════
   Properties — Upgrade / Add-on Badge
   ══════════════════════════════════════════════════════════════════ */

.upgrade-badge {
  background: rgba(37,99,235,.1);
  color: var(--wb-primary);
  padding: .1rem .45rem;
  border-radius: 10px;
  font-size: .7rem;
  font-weight: 600;
}
[data-theme="dark"] .upgrade-badge {
  background: rgba(37,99,235,.2);
  color: #93c5fd;
}

/* ══════════════════════════════════════════════════════════════════
   Contact — Hero Gradient (replaces inline style)
   ══════════════════════════════════════════════════════════════════ */

.contact-hero {
  background: linear-gradient(135deg, var(--wb-dark) 0%, #1e3a8a 60%, var(--wb-secondary) 100%);
}

/* ══════════════════════════════════════════════════════════════════
   Legal Pages — Nav links row
   ══════════════════════════════════════════════════════════════════ */

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

/* ══════════════════════════════════════════════════════════════════
   Hero Orbs — Mobile Scale-Down (all hero sections)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .about-hero .hero__orb:first-child,
  .support-hero .hero__orb:first-child,
  .page-hero .hero__orb:first-child,
  .prop-hero .hero__orb:first-child,
  .emi-calc-hero .hero__orb:first-child,
  .props-hero .hero__orb:first-child,
  .contact-hero .hero__orb:first-child {
    width: 180px !important;
    height: 180px !important;
    top: -40px !important;
    right: -30px !important;
  }
  .about-hero .hero__orb:last-child,
  .support-hero .hero__orb:last-child,
  .prop-hero .hero__orb:last-child,
  .emi-calc-hero .hero__orb:last-child,
  .props-hero .hero__orb:last-child,
  .contact-hero .hero__orb:last-child {
    width: 110px !important;
    height: 110px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Inline Style Replacement Utilities
   ══════════════════════════════════════════════════════════════════ */

/* Full-width premium submit button */
.btn-premium.btn-submit-full,
.btn-submit-full {
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: .9rem 1.5rem;
}

/* Support hero — track ticket inline link */
.support-hero-track-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.25rem;
  padding: .6rem 1.35rem;
  border: 1.5px solid rgba(255,255,255,.45);
  border-radius: var(--wb-radius-sm);
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  transition: background var(--wb-transition), border-color var(--wb-transition);
  text-decoration: none;
}
.support-hero-track-link:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  text-decoration: none;
}

/* ROI calc label */
.roi-form-label {
  font-size: .85rem;
  font-weight: 600;
  display: block;
  margin-bottom: .35rem;
  color: var(--wb-dark);
}
[data-theme="dark"] .roi-form-label { color: var(--wb-dark); }

/* ══════════════════════════════════════════════════════════════════
   Hero Search — Mobile Stack (640px)
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .hero__search {
    flex-direction: column;
    padding: .5rem;
    gap: .4rem;
  }
  .hero__search input,
  .hero__search button {
    width: 100%;
    border-radius: var(--wb-radius-sm);
  }
  .hero__search input { padding: .8rem 1rem; }
  .hero__search button { padding: .75rem 1rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Plot Card Footer — Button Context Hover
   ══════════════════════════════════════════════════════════════════ */

.plot-card__footer .btn:focus-visible,
.plot-card__footer .btn-premium:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 2px;
}
.plot-card__footer .btn-outline:hover {
  background: rgba(37,99,235,.06);
  border-color: var(--wb-primary);
  color: var(--wb-primary);
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════════
   Testimonials Section — Prevent Horizontal Bleed
   ══════════════════════════════════════════════════════════════════ */

.testimonials-section-wrap {
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════════
   Step Items — Premium Connector Line (desktop)
   ══════════════════════════════════════════════════════════════════ */

@media (min-width: 641px) {
  .steps-grid {
    position: relative;
  }
  .steps-grid::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(56px / 2 + 2rem);
    right: calc(56px / 2 + 2rem);
    height: 2px;
    background: linear-gradient(90deg, var(--wb-primary), var(--wb-secondary));
    opacity: .18;
    pointer-events: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
   FAQ — Smooth Answer Reveal
   ══════════════════════════════════════════════════════════════════ */

.faq-answer {
  animation: faqSlideIn .22s ease forwards;
}
@keyframes faqSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .faq-answer { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Support Track — Find Ticket as outlined action (not primary)
   ══════════════════════════════════════════════════════════════════ */

.support-lookup-form .btn {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   Property Page — Add-on checkbox card interactive state
   ══════════════════════════════════════════════════════════════════ */

.prop-addon-card {
  transition: background var(--wb-transition), border-color var(--wb-transition),
              box-shadow var(--wb-transition);
}
.prop-addon-card:hover {
  border-color: rgba(37,99,235,.35) !important;
  box-shadow: 0 2px 12px rgba(37,99,235,.12);
}

/* announcement-bar — consolidated in the v6 polish block at the end of this file */

/* ══════════════════════════════════════════════════════════════════
   Back-to-Top Button — Premium Style
   ══════════════════════════════════════════════════════════════════ */

.back-to-top {
  background: linear-gradient(135deg, var(--wb-primary), var(--wb-secondary));
  box-shadow: 0 4px 18px rgba(37,99,235,.4);
}
.back-to-top:hover {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 8px 28px rgba(37,99,235,.55);
}

/* ══════════════════════════════════════════════════════════════════
   Nav Dropdown — Enhanced Animation
   ══════════════════════════════════════════════════════════════════ */

.wb-nav__dropdown-menu {
  transform-origin: top center;
  animation: none;
}
.wb-nav__has-dropdown.is-open .wb-nav__dropdown-menu {
  animation: dropdownReveal .2s var(--wb-ease-spring) forwards;
}
@keyframes dropdownReveal {
  from { opacity: 0; transform: translateY(-8px) scaleY(.94); }
  to   { opacity: 1; transform: translateY(0) scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .wb-nav__has-dropdown.is-open .wb-nav__dropdown-menu { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   City Pills — Premium Scroll on Mobile
   ══════════════════════════════════════════════════════════════════ */

.city-pills {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.city-pill { scroll-snap-align: start; }

@media (max-width: 480px) {
  .city-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: .4rem;
    gap: .4rem;
  }
  .city-pill { white-space: nowrap; flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════════
   Property Page — Add-on List & Summary (replaces inline styles)
   ══════════════════════════════════════════════════════════════════ */

.prop-addon-section {
  margin-top: 1.25rem;
  border-top: 1px solid var(--wb-border);
  padding-top: 1rem;
}
.prop-addon-section__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .5rem;
}
.prop-addon-section__title {
  font-size: .88rem;
  font-weight: 700;
}
.prop-addon-section__count {
  font-size: .7rem;
  color: var(--wb-muted);
}
.prop-addon-section__hint {
  font-size: .75rem;
  color: var(--wb-muted);
  margin-bottom: .75rem;
  line-height: 1.5;
}

.prop-addon-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--wb-border) transparent;
}
.prop-addon-list::-webkit-scrollbar { width: 4px; }
.prop-addon-list::-webkit-scrollbar-thumb { background: var(--wb-border); border-radius: 2px; }

.prop-addon {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  padding: .5rem .6rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  background: var(--wb-card);
}
.prop-addon:hover {
  border-color: rgba(37,99,235,.35);
  background: rgba(37,99,235,.03);
}
.prop-addon--checked,
.prop-addon.is-checked {
  border-color: var(--wb-primary);
  background: rgba(37,99,235,.05);
}
.prop-addon-check { margin-top: .2rem; flex-shrink: 0; }
.prop-addon__info { flex: 1; min-width: 0; }
.prop-addon__name { font-weight: 600; font-size: .82rem; }
.prop-addon__cost { font-size: .7rem; color: var(--wb-muted); }

.prop-addon-summary {
  display: none;
  margin-top: .6rem;
  padding: .5rem .75rem;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 6px;
  font-size: .78rem;
}
.prop-addon-summary.is-visible { display: block; }

/* ══════════════════════════════════════════════════════════════════
   Property Page — Share Section Label
   ══════════════════════════════════════════════════════════════════ */

.share-section { margin-bottom: .75rem; }
.share-section__label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--wb-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

/* Save/bookmark state on share-btn */
.share-btn.saved {
  color: #ef4444;
  border-color: rgba(239,68,68,.4);
  background: rgba(239,68,68,.06);
}
.share-btn.saved:hover {
  background: rgba(239,68,68,.12);
  border-color: #ef4444;
}

/* ══════════════════════════════════════════════════════════════════
   Property Page — Sticky Bar (replaces inline styles)
   ══════════════════════════════════════════════════════════════════ */

.prop-sticky-bar__layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.prop-sticky-bar__meta { flex: 1; min-width: 0; }
.prop-sticky-bar__name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--wb-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prop-sticky-bar__price-inline {
  margin-left: .75rem;
  color: #93c5fd;
  font-weight: 700;
}
.prop-sticky-bar__emi-inline {
  font-size: .82rem;
  color: rgba(255,255,255,.75);
}
.prop-sticky-bar__btns {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .prop-sticky-bar__layout { gap: .65rem; }
  .prop-sticky-bar__emi-inline { display: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Forms — iOS Auto-zoom Prevention & Touch Targets
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Prevent iOS Safari from zooming on input focus (requires 16px) */
  .wb-form__control,
  .form-control,
  select.wb-form__control {
    font-size: 1rem;
    min-height: 44px;
  }
  textarea.wb-form__control {
    min-height: 88px;
    font-size: 1rem;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Skeleton Loading State
   ══════════════════════════════════════════════════════════════════ */

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .45; }
}
.skeleton {
  background: var(--wb-border);
  border-radius: var(--wb-radius-sm);
  animation: skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton--text  { height: 1em; margin-bottom: .5em; }
.skeleton--title { height: 1.5em; width: 60%; margin-bottom: .75em; }
.skeleton--img   { height: 200px; border-radius: var(--wb-radius); }
.skeleton--card  { height: 280px; border-radius: var(--wb-radius); }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; opacity: .6; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM NAV v4  —  Website Navigation · Mobile · Tablet · TV
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. NAVBAR: gradient accent line ────────────────────────────── */
.wb-nav { overflow: visible; }
.wb-nav::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
  pointer-events: none; z-index: 1;
}

/* Scrolled glass enhancement */
.wb-nav.is-scrolled {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  backdrop-filter: saturate(200%) blur(20px);
  box-shadow: 0 1px 0 rgba(15,23,42,.07), 0 8px 40px rgba(15,23,42,.1);
}
[data-theme="dark"] .wb-nav.is-scrolled {
  background: rgba(10,15,28,.9);
}

/* ── 2. NAV CTA BUTTON (btn-premium + Get Started) ──────────────── */
.btn-premium,
.wb-nav__cta {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff !important;
  border: none;
  padding: .5rem 1.2rem;
  border-radius: 9px;
  font-weight: 700;
  font-size: .875rem;
  min-height: 42px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(37,99,235,.28);
  transition: transform .18s var(--wb-ease-spring), box-shadow .18s;
  letter-spacing: .01em;
}
.btn-premium::after,
.wb-nav__cta::after {
  content: '';
  position: absolute; top: 0; left: -110%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn-premium:hover,
.wb-nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(37,99,235,.42);
  color: #fff !important; text-decoration: none;
}
.btn-premium:hover::after,
.wb-nav__cta:hover::after { left: 150%; }
.btn-premium:active,
.wb-nav__cta:active { transform: scale(.97); }
.btn-premium.btn-block { justify-content: center; }

/* Dashboard CTA */
.wb-nav__dashboard-btn {
  border: 1.5px solid var(--wb-border); border-radius: 9px;
  font-weight: 600; transition: border-color .18s, color .18s, background .18s;
}
.wb-nav__dashboard-btn:hover {
  border-color: var(--wb-primary); color: var(--wb-primary);
  background: rgba(37,99,235,.05); text-decoration: none;
}

/* Active nav link underline */
.wb-nav__links a.active::after { left: 18%; right: 18%; height: 2.5px; }

/* ── 3. MOBILE NAV DRAWER ────────────────────────────────────────── */
.wb-nav__mobile-header {
  background: linear-gradient(135deg,
    rgba(37,99,235,.07) 0%,
    rgba(124,58,237,.04) 50%,
    rgba(6,182,212,.03) 100%);
}
.wb-nav__mobile-links > a.active,
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active {
  background: linear-gradient(90deg, rgba(37,99,235,.1) 0%, rgba(37,99,235,.03) 100%);
  border-left-color: var(--wb-primary);
  font-weight: 700;
}
.wb-nav__mobile-actions {
  background: var(--wb-light);
  backdrop-filter: blur(8px);
}

/* ── 4. PHONE RESPONSIVE (< 768px) ─────────────────────────────── */
@media (max-width: 767px) {
  /* Nav */
  .wb-nav__links, .wb-nav__signin { display: none; }
  .wb-nav__hamburger { display: inline-flex; }
  .wb-nav__actions { gap: .35rem; }
  .wb-nav__theme-btn > span { display: none; }
  .wb-nav__theme-btn { padding: .45rem .55rem; min-width: 44px; justify-content: center; }

  /* Layout */
  .container { padding: 0 1rem; }
  .section { padding: 3rem 0; }
  .section-header { margin-bottom: 1.75rem; }

  /* Typography */
  h1 { font-size: clamp(1.55rem, 5.5vw, 2.25rem); }
  h2 { font-size: clamp(1.2rem,  4.5vw, 1.7rem);  }

  /* Hero */
  .hero { padding: 3rem 0 2.5rem; min-height: auto; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__visual { display: none; }
  .hero__ctas { justify-content: center; flex-direction: column; align-items: center; gap: .75rem; }
  .hero__ctas .btn,
  .hero__ctas .btn-premium { width: 100%; max-width: 300px; justify-content: center; }

  /* Stats */
  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: .85rem; }
  .stats-bar__item strong { font-size: 1.45rem; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }
  .feature-card { padding: 1.4rem; }
  .feature-card__icon { width: 44px; height: 44px; font-size: 1.2rem; margin-bottom: 1rem; }

  /* Properties */
  .plots-grid { grid-template-columns: 1fr; gap: 1rem; }
  .plot-card__img { height: 180px; }
  .plot-card__footer { flex-direction: column; gap: .5rem; }
  .plot-card__footer .btn { width: 100%; justify-content: center; }

  /* Testimonials */
  .testimonial-card { min-width: 82vw; max-width: 88vw; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .wb-form__row { grid-template-columns: 1fr; }

  /* Property detail */
  .prop-body { grid-template-columns: 1fr; }
  .prop-details-grid { grid-template-columns: 1fr 1fr; gap: .5rem .85rem; }
  .prop-meta { gap: .5rem; }

  /* About */
  .about-hero { padding: 2.5rem 0; }
  .values-grid { grid-template-columns: 1fr 1fr; gap: .85rem; }
  .team-grid { grid-template-columns: 1fr 1fr; gap: .85rem; }

  /* CTA */
  .cta-banner { padding: 2.75rem 0; }
  .cta-banner__actions { flex-direction: column; align-items: center; gap: .75rem; }
  .cta-banner__actions .btn,
  .cta-banner__actions .btn-premium { width: 100%; max-width: 300px; justify-content: center; }

  /* Footer */
  .wb-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
  .wb-footer__bottom { flex-direction: column; text-align: center; gap: .5rem; }

  /* Tables */
  .table { font-size: .8rem; }
  .table th, .table td { padding: .45rem .6rem; }

  /* Prevent nav underline bleed on mobile */
  .wb-nav__links a::after { display: none; }
}

/* ── 5. 360–390px MINIMUM PHONE ─────────────────────────────────── */
@media (max-width: 390px) {
  .container { padding: 0 .75rem; }
  .hero__badge { font-size: .68rem; padding: .22rem .65rem; }
  .btn-lg { padding: .7rem 1.4rem; font-size: .9rem; }
  .stats-bar__grid { gap: .6rem; }
  .stats-bar__item strong { font-size: 1.3rem; }
  .feature-card { padding: 1.1rem; }
  .values-grid, .team-grid { grid-template-columns: 1fr; }
}

/* ── 6. TABLET (768px–1199px) ───────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
  .wb-nav__links { gap: .05rem; }
  .wb-nav__links a { padding: .45rem .75rem; font-size: .875rem; }

  .hero { padding: 4.5rem 0 4rem; }
  .hero__inner { grid-template-columns: 1fr; text-align: center; }
  .hero__visual { display: none; }
  .hero__ctas { justify-content: center; }

  .stats-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .plots-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
  .wb-form__row { grid-template-columns: 1fr 1fr; }

  .container { padding: 0 1.75rem; }
  .section { padding: 4rem 0; }
  .wb-footer__grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
}

/* ── 7. TV (≥ 1920px) ───────────────────────────────────────────── */
@media (min-width: 1920px) {
  .container { max-width: 1600px; }
  .wb-nav__inner { height: 80px; }
  .wb-nav__logo { font-size: 1.55rem; }
  .wb-nav__logo-mark { width: 46px; height: 46px; font-size: 1.25rem; }
  .wb-nav__links a { font-size: .975rem; padding: .6rem 1.15rem; }
  .btn-premium, .wb-nav__cta { font-size: .975rem; padding: .65rem 1.5rem; min-height: 48px; }

  .hero { padding: 9rem 0 8rem; }
  h1 { font-size: 4rem; } h2 { font-size: 3rem; }
  .feature-card { padding: 2.5rem; }
  .feature-card__icon { width: 66px; height: 66px; font-size: 1.75rem; margin-bottom: 1.5rem; }
  .plot-card__img { height: 260px; }

  .section { padding: 8rem 0; }
  .section-header { max-width: 900px; margin-bottom: 4rem; }
  .btn-lg { padding: 1.1rem 2.75rem; font-size: 1.1rem; }
  .steps-grid { gap: 3rem; }

  .wb-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .wb-footer__col h4 { font-size: 1.05rem; }
  .wb-footer__links a { font-size: .95rem; }
}

/* ── 8. REDUCED MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn-premium::after,
  .wb-nav__cta::after,
  .feature-card::before { display: none; }
  .wb-nav__logo-mark,
  .wb-nav__dropdown-menu { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Premium Enhancement v5 — Website / Landing Page
   ═══════════════════════════════════════════════════════════════════ */

/* ── HERO — Animated floating orbs ─────────────────────────────── */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: '';
  position: absolute; top: -120px; left: -80px;
  width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.22) 0%, transparent 70%);
  animation: orb-float 8s ease-in-out infinite;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: -80px; right: -60px;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.18) 0%, transparent 70%);
  animation: orb-float 10s ease-in-out infinite reverse;
  pointer-events: none;
}
@keyframes orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(24px, -18px) scale(1.05); }
  66%       { transform: translate(-16px, 12px) scale(.96); }
}

/* Hero badge/tag above headline */
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--brand, #2563eb);
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.08));
  border: 1px solid rgba(37,99,235,.2);
  border-radius: 999px; padding: .3rem .85rem; margin-bottom: 1.1rem;
}
.hero__eyebrow::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand, #2563eb);
  animation: badge-pulse 2.2s ease-out infinite;
}

/* ── FEATURE CARDS — Step number + icon gradient ────────────────── */
.feature-card { position: relative; }
.feature-card__step {
  position: absolute; top: 1.25rem; right: 1.25rem;
  font-size: 2.5rem; font-weight: 900;
  color: var(--border-color, rgba(0,0,0,.06));
  line-height: 1; user-select: none; pointer-events: none;
  transition: color .3s;
}
.feature-card:hover .feature-card__step { color: rgba(37,99,235,.08); }

.feature-card__icon {
  background: linear-gradient(135deg,
    var(--fc-icon-a, rgba(37,99,235,.18)),
    var(--fc-icon-b, rgba(124,58,237,.1)));
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 8px 24px var(--fc-icon-shadow, rgba(37,99,235,.22));
}
.feature-card--blue   { --fc-icon-a: rgba(37,99,235,.2);  --fc-icon-b: rgba(37,99,235,.07);  --fc-icon-shadow: rgba(37,99,235,.22); }
.feature-card--purple { --fc-icon-a: rgba(124,58,237,.2); --fc-icon-b: rgba(124,58,237,.07); --fc-icon-shadow: rgba(124,58,237,.22); }
.feature-card--green  { --fc-icon-a: rgba(5,150,105,.2);  --fc-icon-b: rgba(5,150,105,.07);  --fc-icon-shadow: rgba(5,150,105,.22); }
.feature-card--amber  { --fc-icon-a: rgba(217,119,6,.2);  --fc-icon-b: rgba(217,119,6,.07);  --fc-icon-shadow: rgba(217,119,6,.22); }

/* ── STATS BAR — Dividers + animated counter ────────────────────── */
.stats-bar { position: relative; }
.stats-bar__item { position: relative; }
.stats-bar__item + .stats-bar__item::before {
  content: '';
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 1px; background: var(--border-color, rgba(255,255,255,.15));
}
@media (max-width: 767px) {
  .stats-bar__item + .stats-bar__item::before { display: none; }
}

.stats-bar__value {
  font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── PROPERTY / PLOT CARDS ──────────────────────────────────────── */
.plot-card {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.plot-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
}
.plot-card__price {
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--brand, #2563eb);
}
.plot-card__status {
  position: absolute; top: .9rem; left: .9rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .25rem .7rem; border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.plot-card__status--available { background: rgba(5,150,105,.85); color: #fff; }
.plot-card__status--sold      { background: rgba(225,29,72,.85);  color: #fff; }
.plot-card__status--reserved  { background: rgba(217,119,6,.85);  color: #fff; }

.plot-card__img-wrap { position: relative; overflow: hidden; }
.plot-card__img-wrap img {
  transition: transform .5s ease;
  width: 100%; height: 100%; object-fit: cover;
}
.plot-card:hover .plot-card__img-wrap img { transform: scale(1.04); }

/* Full-width CTA button on mobile */
@media (max-width: 767px) {
  .plot-card__footer { flex-direction: column; gap: .6rem; }
  .plot-card__footer .btn { width: 100%; }
}

/* ── TRUST BADGES STRIP ─────────────────────────────────────────── */
.trust-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1.5rem 2.5rem; padding: 1.5rem 0;
}
.trust-badge {
  display: flex; align-items: center; gap: .55rem;
  font-size: .82rem; font-weight: 500;
  color: var(--text-muted, #6b7280);
}
.trust-badge__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.07));
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.trust-badge:hover .trust-badge__icon { transform: scale(1.18) rotate(-5deg); }

/* ── CTA BANNER — Richer gradient background ────────────────────── */
.cta-banner {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 40%, #7c3aed 100%);
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,.06) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05) 0%, transparent 40%);
  pointer-events: none;
}
.cta-banner__title   { color: #fff; }
.cta-banner__subtitle{ color: rgba(255,255,255,.8); }

/* ── FOOTER — Social icon hover lift ───────────────────────────── */
.wb-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-elev2, rgba(255,255,255,.06));
  border: 1px solid var(--border-color, rgba(255,255,255,.1));
  transition: transform .22s cubic-bezier(.34,1.56,.64,1),
              background .22s, box-shadow .22s;
  color: inherit; text-decoration: none;
}
.wb-footer__social a:hover {
  transform: translateY(-3px);
  background: rgba(37,99,235,.18);
  box-shadow: 0 6px 16px rgba(37,99,235,.25);
  border-color: rgba(37,99,235,.3);
}

/* Footer links with animated underline */
.wb-footer__links a {
  position: relative; text-decoration: none; display: inline-block;
}
.wb-footer__links a::after {
  content: '';
  position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--brand, #2563eb);
  transition: width .22s ease;
}
.wb-footer__links a:hover::after { width: 100%; }

/* ── NAVBAR — Active link indicator ────────────────────────────── */
.wb-nav__links a.active {
  color: var(--brand, #2563eb);
  font-weight: 600;
}
.wb-nav__links a.active::after { width: 100% !important; opacity: 1 !important; }

/* ── SECTION HEADERS — Gradient headline accent ─────────────────── */
.section-header__eyebrow {
  display: inline-block;
  font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand, #2563eb);
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.18); border-radius: 999px;
  padding: .25rem .85rem; margin-bottom: .85rem;
}
.section-header__title span.gradient {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── STEP CONNECTOR LINE ────────────────────────────────────────── */
.steps-grid { position: relative; }
@media (min-width: 768px) {
  .steps-grid::before {
    content: '';
    position: absolute; top: 32px; left: 15%; right: 15%; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(37,99,235,.2) 20%, rgba(124,58,237,.2) 80%, transparent);
    pointer-events: none;
  }
}
.step-card__number {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; margin: 0 auto 1.1rem;
  font-size: 1.25rem; font-weight: 800;
  background: linear-gradient(135deg, var(--brand) 0%, #7c3aed 100%);
  color: #fff; box-shadow: 0 4px 16px rgba(37,99,235,.3);
  position: relative; z-index: 1;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
}
.step-card:hover .step-card__number {
  transform: scale(1.12);
  box-shadow: 0 8px 24px rgba(37,99,235,.4);
}

/* ── MOBILE NAV — Backdrop blur ─────────────────────────────────── */
.wb-nav__mobile-menu {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(var(--bg-rgb, 255,255,255), .95);
}

/* ── RESPONSIVE FINE-TUNING ─────────────────────────────────────── */
@media (max-width: 767px) {
  .hero__eyebrow { font-size: .72rem; }
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
  .stats-bar__item + .stats-bar__item::before { display: none; }
  .trust-strip  { gap: 1rem 1.5rem; }
  .trust-badge  { font-size: .78rem; }
  .trust-badge__icon { width: 30px; height: 30px; font-size: .9rem; }
  .wb-footer__social a { width: 40px; height: 40px; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .stats-bar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}

@media (min-width: 1920px) {
  .hero__eyebrow { font-size: .85rem; }
  .trust-badge { font-size: .9rem; }
  .trust-badge__icon { width: 44px; height: 44px; font-size: 1.15rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Enhancement v6 — Mobile Nav Drawer · Breakpoints · iOS Zoom Fix
   Applied to website.css (append)
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. MOBILE NAV DRAWER — Gradient header ────────────────────── */
.wb-nav__mobile-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 55%, #7c3aed 100%);
  border-bottom: none;
  padding: 1.1rem 1rem 1.05rem;
  position: relative;
}
.wb-nav__mobile-header::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
}
.wb-nav__mobile-logo,
.wb-nav__mobile-logo span { color: #fff !important; text-shadow: 0 1px 4px rgba(0,0,0,.2); }
.wb-nav__logo-mark--sm {
  background: rgba(255,255,255,.2) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.2) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.3) !important;
}
.wb-nav__mobile-close {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.25) !important;
  color: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(6px);
}
.wb-nav__mobile-close:hover {
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.45) !important;
  transform: scale(1.05) rotate(90deg);
}
[data-theme="dark"] .wb-nav__mobile-header {
  background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 50%, #312e81 100%);
}

/* ── 2. MOBILE NAV — Active-left-border treatment ──────────────── */

/* Base link: thinner transparent bar ready for active override */
.wb-nav__mobile-links > a,
.wb-nav__mobile-links > .wb-nav__mobile-item > a {
  border-left: 4px solid transparent;
  border-radius: 0 10px 10px 0;
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .12s;
}

/* Active state — gradient pill + vibrant left bar */
.wb-nav__mobile-links > a.active,
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active {
  background: linear-gradient(90deg, rgba(37,99,235,.14) 0%, rgba(37,99,235,.03) 100%);
  border-left-color: var(--wb-primary);
  border-left-width: 4px;
  color: var(--wb-primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.1), 0 2px 10px rgba(37,99,235,.1);
  position: relative;
}
/* Gradient shimmer on the left bar via pseudo-element */
.wb-nav__mobile-links > a.active::before,
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active::before {
  content: '';
  position: absolute; left: -4px; top: 18%; bottom: 18%;
  width: 4px; border-radius: 2px;
  background: linear-gradient(to bottom, #2563eb, #7c3aed);
  box-shadow: 2px 0 8px rgba(37,99,235,.4);
}
[data-theme="dark"] .wb-nav__mobile-links > a.active,
[data-theme="dark"] .wb-nav__mobile-links > .wb-nav__mobile-item > a.active {
  background: linear-gradient(90deg, rgba(37,99,235,.22) 0%, rgba(37,99,235,.05) 100%);
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.2), 0 2px 12px rgba(37,99,235,.2);
}

/* Active icon gets a tinted background */
.wb-nav__mobile-links > a.active span[aria-hidden],
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active span[aria-hidden] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(37,99,235,.12);
}

/* Mobile actions area — subtle top separator */
.wb-nav__mobile-actions {
  border-top: 1px solid var(--wb-border);
  background: var(--wb-light);
  padding: 1rem;
  gap: .65rem;
  display: flex; flex-direction: column;
}
.wb-nav__mobile-actions .btn-outline {
  border: 1.5px solid var(--wb-border);
}

/* ── 3a. PHONE (≤ 767px) ────────────────────────────────────────── */
@media (max-width: 767px) {

  /* Hero — compact + readable */
  .hero { padding: 3rem 0 2.5rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__visual { display: none; }
  h1 { font-size: clamp(1.7rem, 6vw, 2.5rem); }
  .hero__ctas { flex-direction: column; gap: .65rem; }
  .hero__ctas .btn,
  .hero__ctas .btn-premium { width: 100%; justify-content: center; }
  .hero__search { flex-direction: column; border-radius: 14px; padding: .5rem; gap: .4rem; }
  .hero__search input  { border-radius: 10px; padding: .75rem 1rem; }
  .hero__search button { border-radius: 10px; width: 100%; }
  .hero__badge { font-size: .72rem; }
  .city-pills { flex-wrap: wrap; gap: .4rem; }

  /* Features — explicit 1-col + full-width cards */
  .features-grid { grid-template-columns: 1fr; gap: 1rem; }
  .feature-card { padding: 1.25rem; }
  .feature-card__icon { width: 48px; height: 48px; font-size: 1.3rem; margin-bottom: .85rem; }

  /* Plots — single column */
  .plots-grid { grid-template-columns: 1fr; gap: 1rem; }
  .plot-card__img { height: 180px; }
  .plot-card__body { padding: 1rem; }

  /* Trust bar — 2-col grid */
  .trust-bar__inner { grid-template-columns: 1fr 1fr; gap: .75rem 1rem; }
  .trust-bar__divider { display: none; }

  /* Footer — single col, tighter */
  .wb-footer { padding: 2.5rem 0 1.5rem; }
  .wb-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .wb-footer__bottom { flex-direction: column; text-align: center; gap: .5rem; }
  .wb-footer__social a { width: 42px; height: 42px; }

  /* Sections */
  .section { padding: 2.75rem 0; }
  .section-header { margin-bottom: 1.75rem; }
  h2 { font-size: clamp(1.5rem, 5vw, 2rem); }

  /* How it works steps — single col */
  .steps-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .steps-grid::before { display: none; }

  /* Stats bar — 2x2 grid */
  .stats-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .stats-bar__item + .stats-bar__item::before { display: none; }

  /* iOS ZOOM PREVENTION — font-size must be ≥ 16px on all inputs */
  input, input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  select, textarea {
    font-size: 16px !important;
  }
}

/* ── 3b. TABLET (768px – 1199px) ────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {

  /* Hero — stacked but with restored visual */
  .hero { padding: 4.5rem 0 4rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero__visual { display: block; }
  .hero__stat-grid { grid-template-columns: repeat(4, 1fr); gap: .75rem; }

  /* Features — 2-col */
  .features-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  /* Plots — 2-col */
  .plots-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

  /* Trust bar — flex row (already is, but cap items) */
  .trust-bar__inner { gap: .5rem 1.25rem; }

  /* Footer — 2x2 */
  .wb-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Steps — 2-col */
  .steps-grid { grid-template-columns: repeat(2, 1fr); }
  .steps-grid::before { display: none; }

  /* Stats bar — 4-col remains, just tighter */
  .stats-bar { gap: 0; }
}

/* ── 3c. TV (≥ 1920px) ──────────────────────────────────────────── */
@media (min-width: 1920px) {

  /* Hero — large breathing room, visual restored large */
  .hero { padding: 10rem 0 9rem; }
  .hero__inner { gap: 5rem; align-items: center; }
  .hero__visual { display: block; }
  .hero__stat-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
  .hero__stat-card { padding: 1.5rem; }
  .hero__stat-card strong { font-size: 2rem; }
  .hero__badge { font-size: .85rem; padding: .45rem 1.1rem; }
  .hero__search input  { font-size: 1.05rem; padding: 1rem 1.3rem; }
  .hero__search button { font-size: 1rem; padding: .9rem 1.8rem; }

  /* Features — 4-col */
  .features-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .feature-card { padding: 2.25rem; }
  .feature-card__icon { width: 64px; height: 64px; font-size: 1.7rem; }
  .feature-card h3 { font-size: 1.15rem; }
  .feature-card p  { font-size: .975rem; }

  /* Plots — 3-col */
  .plots-grid { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .plot-card__img { height: 260px; }
  .plot-card__body { padding: 1.5rem; }
  .plot-card h3 { font-size: 1.15rem; }

  /* Footer — 4-col with wide brand */
  .wb-footer { padding: 5rem 0 2.5rem; }
  .wb-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; }
  .wb-footer__col h4 { font-size: 1rem; margin-bottom: 1.25rem; }
  .wb-footer__links a { font-size: .95rem; }
  .wb-footer__social a { width: 48px; height: 48px; border-radius: 14px; }

  /* Steps */
  .steps-grid { gap: 3rem; }
  .steps-grid::before { top: 36px; }

  /* Trust bar */
  .trust-bar__inner { gap: 0 3rem; }
  .trust-bar__item  { font-size: 1rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   Enhancement v6b — Mobile Nav Footer (.wb-mnf)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────── */
.wb-mnf {
  flex-shrink: 0;
  padding: .9rem 1rem max(1rem, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, rgba(37,99,235,.06) 0%, var(--wb-card, #fff) 100%);
  display: flex; flex-direction: column; gap: .65rem;
  position: relative;
}
.wb-mnf::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(37,99,235,.35) 50%, transparent 100%);
}
[data-theme="dark"] .wb-mnf {
  background: linear-gradient(180deg, rgba(37,99,235,.08) 0%, #0f172a 100%);
}

/* ── Brand strip ────────────────────────────────────────────────── */
.wb-mnf__brand {
  display: flex; align-items: center; gap: .6rem;
  padding-bottom: .65rem;
  border-bottom: 1px solid var(--wb-border);
}
.wb-mnf__logo {
  width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff; font-size: 1rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 12px rgba(37,99,235,.35);
  letter-spacing: -.02em;
}
.wb-mnf__brand-text strong {
  display: block; font-size: .875rem; font-weight: 700;
  color: var(--wb-dark); line-height: 1.2;
}
.wb-mnf__brand-text span {
  display: block; font-size: .68rem; color: var(--wb-muted);
  margin-top: .1rem; letter-spacing: .01em;
}

/* ── CTAs grid ──────────────────────────────────────────────────── */
.wb-mnf__ctas {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.wb-mnf__btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem; min-height: 46px; border-radius: 12px;
  font-size: .875rem; font-weight: 600; text-decoration: none;
  padding: .55rem .9rem; cursor: pointer; border: none;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1),
              box-shadow .18s, background .15s;
  white-space: nowrap;
}
.wb-mnf__btn:active { transform: scale(.95) !important; }

.wb-mnf__btn--primary {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  box-shadow: 0 3px 14px rgba(37,99,235,.35);
  grid-column: 1 / -1;
}
.wb-mnf__btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37,99,235,.45);
}

/* Sign in btn — ghost when paired with primary */
.wb-mnf__ctas .wb-mnf__btn--primary { grid-column: auto; }
.wb-mnf__btn--ghost {
  background: var(--wb-light, #f8fafc);
  color: var(--wb-dark);
  border: 1.5px solid var(--wb-border);
}
.wb-mnf__btn--ghost:hover {
  background: var(--wb-card);
  border-color: var(--wb-primary);
  color: var(--wb-primary);
  transform: translateY(-1px);
}
[data-theme="dark"] .wb-mnf__btn--ghost {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
}
[data-theme="dark"] .wb-mnf__btn--ghost:hover {
  background: rgba(37,99,235,.15);
  border-color: rgba(37,99,235,.5);
  color: #93c5fd;
}

/* ── Utility row ────────────────────────────────────────────────── */
.wb-mnf__util {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: .55rem;
  border-top: 1px solid var(--wb-border);
}

/* Theme toggle button */
.wb-mnf__theme {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .8rem; font-weight: 500; color: var(--wb-mid);
  background: none; border: none; cursor: pointer; padding: .3rem 0;
  transition: color .15s;
}
.wb-mnf__theme:hover { color: var(--wb-dark); }
.wb-mnf__theme:focus-visible { outline: 2px solid var(--wb-primary); outline-offset: 3px; border-radius: 4px; }
.wb-mnf__theme svg { flex-shrink: 0; opacity: .75; }

/* Pill toggle switch */
.wb-mnf__toggle {
  display: inline-flex; align-items: center;
  width: 38px; height: 21px; border-radius: 999px;
  background: var(--wb-border, #e2e8f0);
  position: relative; flex-shrink: 0; margin-left: .2rem;
  transition: background .22s;
}
.wb-mnf__toggle-thumb {
  position: absolute; left: 3px;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.22);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
[data-theme="dark"] .wb-mnf__toggle { background: #2563eb; }
[data-theme="dark"] .wb-mnf__toggle-thumb { transform: translateX(17px); }

/* Help link */
.wb-mnf__help {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 500; color: var(--wb-muted);
  text-decoration: none; padding: .3rem .55rem;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.wb-mnf__help:hover {
  color: var(--wb-primary);
  background: rgba(37,99,235,.07);
}
[data-theme="dark"] .wb-mnf__help:hover { background: rgba(37,99,235,.15); }

/* ═══════════════════════════════════════════════════════════════════
   Premium Elevation v8 — Website / Landing Pages
   Append to website.css
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. DESKTOP NAV — polished active + dropdown
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Scroll-shrink: compact on scroll */
.wb-nav.is-scrolled .wb-nav__inner { height: 58px; }

/* Active nav link — coloured dot before label */
.wb-nav__links a.active { color: var(--wb-primary); font-weight: 600; }
.wb-nav__links a.active::before {
  content: '';
  position: absolute; left: .6rem; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wb-primary);
}
.wb-nav__links a { position: relative; }

/* Dropdown polish */
.wb-nav__dropdown-menu {
  border: 1px solid var(--wb-border);
  border-top: 3px solid var(--wb-primary);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  overflow: hidden;
}
.wb-nav__dropdown-item {
  transition: background .15s, padding-left .15s;
}
.wb-nav__dropdown-item:hover { padding-left: 1.4rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. MOBILE NAV DRAWER — links with per-item colour accents
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Drawer: spring entry animation */
.wb-nav__mobile { transition: transform .34s cubic-bezier(.34,1.56,.64,1); }
.wb-nav__mobile.is-open { box-shadow: -4px 0 40px rgba(0,0,0,.22); }

/* Icon span in mobile links — consistent sizing */
.wb-nav__mobile-links > a span[aria-hidden],
.wb-nav__mobile-links > .wb-nav__mobile-item > a span[aria-hidden] {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
  background: rgba(37,99,235,.08);
  transition: background .18s, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.wb-nav__mobile-links > a:hover span[aria-hidden],
.wb-nav__mobile-links > .wb-nav__mobile-item > a:hover span[aria-hidden] {
  background: rgba(37,99,235,.14);
  transform: scale(1.1) rotate(-4deg);
}

/* Active link — gradient fill pill */
.wb-nav__mobile-links > a.active,
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active {
  background: linear-gradient(90deg, rgba(37,99,235,.14) 0%, rgba(37,99,235,.03) 100%) !important;
  color: var(--wb-primary);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(37,99,235,.12);
}
.wb-nav__mobile-links > a.active span[aria-hidden],
.wb-nav__mobile-links > .wb-nav__mobile-item > a.active span[aria-hidden] {
  background: rgba(37,99,235,.18) !important;
  color: var(--wb-primary);
}

/* Submenu items */
.wb-nav__mobile-sub a {
  display: flex; align-items: center; gap: .55rem;
  padding: .65rem .9rem; border-radius: 8px;
  font-size: .87rem; color: var(--wb-mid);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.wb-nav__mobile-sub a:hover { background: rgba(37,99,235,.07); color: var(--wb-primary); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. HERO — depth & motion
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Hero stat grid cards */
.hero__stat-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; padding: 1.1rem 1.25rem;
  backdrop-filter: blur(12px);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s;
}
.hero__stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.2);
}
.hero__stat-card strong {
  font-size: 1.55rem; font-weight: 800; display: block;
  line-height: 1.1; letter-spacing: -.02em; color: #fff;
}
.hero__stat-card span {
  font-size: .76rem; color: rgba(255,255,255,.65); margin-top: .2rem; display: block;
}

/* Hero search — pill with glass effect */
.hero__search {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  transition: border-color .2s, box-shadow .2s;
}
.hero__search:focus-within {
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 0 0 3px rgba(255,255,255,.1);
}
.hero__search input { color: #fff; }
.hero__search input::placeholder { color: rgba(255,255,255,.55); }
.hero__search button {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-radius: 10px; color: #fff; font-weight: 600;
  box-shadow: 0 2px 10px rgba(37,99,235,.4);
  transition: box-shadow .18s, transform .18s;
}
.hero__search button:hover {
  box-shadow: 0 4px 16px rgba(37,99,235,.55);
  transform: scale(1.02);
}

/* City pills — glass style */
.city-pill {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.85);
  border-radius: 999px; padding: .2rem .7rem;
  font-size: .76rem; text-decoration: none;
  transition: background .18s, border-color .18s, transform .18s;
  display: inline-flex; align-items: center;
}
.city-pill:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  transform: translateY(-1px);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. TRUST BAR — compact icon pills
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.trust-bar__item { transition: transform .2s; }
.trust-bar__item:hover { transform: translateY(-1px); }
.trust-bar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(37,99,235,.1), rgba(124,58,237,.07));
  font-size: .95rem; flex-shrink: 0;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.trust-bar__item:hover .trust-bar__icon { transform: scale(1.15) rotate(-5deg); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. FEATURE CARDS — numbered step glow
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.feature-card {
  border: 1px solid var(--wb-border);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s, border-color .25s;
}
.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  border-color: rgba(37,99,235,.2);
}
[data-theme="dark"] .feature-card:hover {
  box-shadow: 0 18px 44px rgba(0,0,0,.4);
  border-color: rgba(37,99,235,.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. PLOT / PROPERTY CARDS
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.plot-card {
  border: 1px solid var(--wb-border);
}
.plot-card:hover {
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 16px 44px rgba(0,0,0,.13);
}

/* Status chips — glassmorphic overlay */
.plot-card__status {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-weight: 700; letter-spacing: .04em;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. BUTTONS — universal premium treatment
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.btn-premium, .wb-nav__cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
  color: #fff !important; border: none;
  box-shadow: 0 3px 14px rgba(37,99,235,.35);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
  -webkit-tap-highlight-color: transparent;
}
.btn-premium:hover, .wb-nav__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(37,99,235,.48);
}
.btn-premium:active, .wb-nav__cta:active {
  transform: scale(.97);
  box-shadow: 0 2px 8px rgba(37,99,235,.25);
}
/* Shimmer sweep */
.btn-premium::after, .wb-nav__cta::after {
  content: '';
  position: absolute; top: 0; left: -110%; width: 70%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-premium:hover::after, .wb-nav__cta:hover::after { left: 150%; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. FOOTER — refined links + social
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-footer__col h4 {
  position: relative; padding-bottom: .6rem; margin-bottom: 1rem;
}
.wb-footer__col h4::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 24px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed);
}
.wb-footer__social a {
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .2s, border-color .2s,
              transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
}
.wb-footer__social a:hover {
  background: rgba(37,99,235,.22);
  border-color: rgba(37,99,235,.4);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 6px 18px rgba(37,99,235,.3);
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. MOBILE — landing page
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  /* Nav: 100% wide hamburger area */
  .wb-nav__hamburger { width: 44px; height: 44px; border-radius: 10px; }
  .wb-nav__hamburger:hover { background: rgba(37,99,235,.07); }

  /* Hero stat grid: 2x2 */
  .hero__stat-grid { grid-template-columns: 1fr 1fr; gap: .65rem; }

  /* Feature cards: no step number overlap */
  .feature-card__step { display: none; }

  /* Plot cards: tap feedback */
  .plot-card:active { transform: scale(.98); }

  /* Footer social: centered row */
  .wb-footer__social { justify-content: flex-start; flex-wrap: wrap; gap: .5rem; }

  /* Form labels: larger for readability */
  .wb-form .form-label { font-size: .875rem; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. DARK THEME OVERRIDES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .wb-nav__mobile { background: #0f172a; }
[data-theme="dark"] .hero__stat-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
[data-theme="dark"] .trust-bar {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .city-pill {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
[data-theme="dark"] .city-pill:hover {
  background: rgba(255,255,255,.14);
  color: #fff;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. REDUCED MOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .wb-nav__mobile,
  .feature-card,
  .plot-card,
  .btn-premium,
  .wb-nav__cta,
  .hero__stat-card { transition: none !important; transform: none !important; }
  .btn-premium::after, .wb-nav__cta::after { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════
   Website v10 — Premium property pages · EMI calc · Contact · Support
   Append to website.css
   ═══════════════════════════════════════════════════════════════════ */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. PROPERTY LISTING PAGE — premium card grid
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-prop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .wb-prop-grid { grid-template-columns: 1fr; gap: 1rem; }
}

.wb-prop-card {
  background: var(--wb-card-bg, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1),
              box-shadow .25s, border-color .25s;
  position: relative;
}
.wb-prop-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0,0,0,.13);
  border-color: rgba(37,99,235,.22);
}
.wb-prop-card:active { transform: scale(.98); }

/* Image area */
.wb-prop-card__img {
  width: 100%; aspect-ratio: 16/9; object-fit: cover;
  background: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  display: block;
}
.wb-prop-card__img-wrap {
  position: relative; overflow: hidden;
}
.wb-prop-card__img-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 50%;
  background: linear-gradient(to top, rgba(0,0,0,.35) 0%, transparent 100%);
  pointer-events: none;
}

/* Status badge overlay */
.wb-prop-card__status {
  position: absolute; top: .75rem; left: .75rem;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 8px; padding: .2rem .6rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--wb-primary, #2563eb);
  border: 1px solid rgba(37,99,235,.2);
}
.wb-prop-card__status--sold { color: #dc2626; border-color: rgba(220,38,38,.2); }
.wb-prop-card__status--hold { color: #d97706; border-color: rgba(217,119,6,.2); }

/* Watchlist heart */
.wb-prop-card__heart {
  position: absolute; top: .75rem; right: .75rem;
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--text-muted);
  transition: background .15s, transform .22s cubic-bezier(.34,1.56,.64,1),
              color .15s, box-shadow .15s;
}
.wb-prop-card__heart:hover {
  transform: scale(1.14); color: #e11d48;
  box-shadow: 0 4px 14px rgba(225,29,72,.25);
}
.wb-prop-card__heart.is-saved { color: #e11d48; }

/* Body */
.wb-prop-card__body { padding: 1rem 1.1rem 1.15rem; }
.wb-prop-card__title {
  font-size: .975rem; font-weight: 700; line-height: 1.3;
  margin: 0 0 .3rem; color: var(--wb-heading, #0d1b2e);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wb-prop-card__location {
  font-size: .78rem; color: var(--wb-muted, #5a6a7e);
  display: flex; align-items: center; gap: .3rem; margin-bottom: .75rem;
}
.wb-prop-card__location svg { flex-shrink: 0; opacity: .65; }

/* Spec pills */
.wb-prop-card__specs {
  display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem;
}
.wb-prop-card__spec {
  font-size: .72rem; font-weight: 600;
  background: var(--wb-bg-muted, #f1f5f9);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 6px; padding: .18rem .5rem; color: var(--wb-muted, #5a6a7e);
}

/* Price row */
.wb-prop-card__price-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .5rem;
}
.wb-prop-card__price {
  font-size: 1.2rem; font-weight: 800; color: var(--wb-primary, #2563eb);
  line-height: 1;
}
.wb-prop-card__price sup { font-size: .65rem; font-weight: 700; vertical-align: top; margin-top: .1em; }
.wb-prop-card__emi {
  font-size: .72rem; color: var(--wb-muted, #5a6a7e);
  background: rgba(5,150,105,.1); border-radius: 6px;
  padding: .2rem .5rem; font-weight: 600; color: #059669;
  white-space: nowrap;
}

/* CTA strip */
.wb-prop-card__cta {
  display: flex; gap: .5rem; padding: 0 1.1rem 1rem;
}
.wb-prop-card__btn {
  flex: 1; padding: .55rem; border-radius: 10px;
  font-size: .8rem; font-weight: 600; text-align: center; text-decoration: none;
  transition: background .15s, transform .18s cubic-bezier(.34,1.56,.64,1);
  border: none; cursor: pointer;
}
.wb-prop-card__btn--primary {
  background: linear-gradient(135deg, var(--wb-primary, #2563eb), #4f46e5);
  color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
.wb-prop-card__btn--primary:hover {
  transform: translateY(-1px); box-shadow: 0 4px 14px rgba(37,99,235,.4);
}
.wb-prop-card__btn--outline {
  background: transparent;
  border: 1.5px solid var(--wb-border, rgba(0,0,0,.12));
  color: var(--wb-muted, #5a6a7e);
}
.wb-prop-card__btn--outline:hover { background: var(--wb-bg-muted, #f1f5f9); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. PROPERTY FILTER BAR
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-filter-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  padding: 1rem 0; align-items: center;
}
.wb-filter-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .85rem; border-radius: 99px;
  border: 1.5px solid var(--wb-border, rgba(0,0,0,.12));
  background: transparent; color: var(--wb-muted, #5a6a7e);
  font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s,
              transform .18s cubic-bezier(.34,1.56,.64,1);
  white-space: nowrap;
}
.wb-filter-chip:hover {
  border-color: var(--wb-primary, #2563eb);
  color: var(--wb-primary, #2563eb);
  transform: translateY(-1px);
}
.wb-filter-chip.is-active {
  background: var(--wb-primary, #2563eb);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
}
@media (max-width: 767px) {
  .wb-filter-bar { padding: .75rem 0; overflow-x: auto; flex-wrap: nowrap; }
  .wb-filter-bar::-webkit-scrollbar { display: none; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. EMI CALCULATOR PAGE — range slider + result display
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-emi-calc {
  background: var(--wb-card-bg, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 24px; padding: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  max-width: 600px; margin: 0 auto;
}
@media (max-width: 640px) {
  .wb-emi-calc { padding: 1.25rem; border-radius: 20px; }
}

.wb-emi-calc__title {
  font-size: 1.2rem; font-weight: 800;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1.5rem;
}

/* Slider */
.wb-emi-slider-wrap { margin-bottom: 1.5rem; }
.wb-emi-slider-label {
  display: flex; justify-content: space-between;
  font-size: .8rem; margin-bottom: .5rem;
}
.wb-emi-slider-label span { font-weight: 700; color: var(--wb-primary, #2563eb); font-size: .95rem; }
.wb-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 99px;
  background: var(--wb-bg-muted, #e2e8f0); outline: none; cursor: pointer;
  transition: background .15s;
}
.wb-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.4);
  cursor: pointer;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s;
}
.wb-range::-webkit-slider-thumb:hover {
  transform: scale(1.22);
  box-shadow: 0 4px 16px rgba(37,99,235,.55);
}
.wb-range::-webkit-slider-thumb:active {
  transform: scale(.9);
}
.wb-range::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 3px solid #fff; box-shadow: 0 2px 10px rgba(37,99,235,.4);
  cursor: pointer;
}

/* Result box */
.wb-emi-result {
  background: linear-gradient(135deg, rgba(37,99,235,.07) 0%, rgba(124,58,237,.05) 100%);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: 16px; padding: 1.25rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
  text-align: center;
}
@media (max-width: 480px) {
  .wb-emi-result { grid-template-columns: 1fr 1fr; }
}
.wb-emi-result__item {}
.wb-emi-result__value {
  font-size: 1.35rem; font-weight: 800;
  color: var(--wb-primary, #2563eb); line-height: 1;
}
.wb-emi-result__label {
  font-size: .7rem; color: var(--wb-muted, #5a6a7e);
  margin-top: .3rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .05em;
}
.wb-emi-result__divider {
  width: 1px; background: var(--wb-border, rgba(0,0,0,.1));
  grid-row: span 1;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. CONTACT & SUPPORT PAGES — form premium look
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-contact-grid {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .wb-contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.wb-contact-info {}
.wb-contact-info__title {
  font-size: 1.5rem; font-weight: 800;
  background: linear-gradient(135deg, var(--wb-heading, #0d1b2e), #2563eb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: .5rem;
}
.wb-contact-info__sub { font-size: .9rem; color: var(--wb-muted, #5a6a7e); margin-bottom: 2rem; }

.wb-contact-item {
  display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1.25rem;
}
.wb-contact-item__icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.07));
  border: 1px solid rgba(37,99,235,.15);
  box-shadow: 0 2px 8px rgba(37,99,235,.1);
}
.wb-contact-item__label { font-size: .72rem; color: var(--wb-muted, #5a6a7e); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.wb-contact-item__value { font-size: .9rem; font-weight: 600; margin-top: .12rem; }

/* Contact form card */
.wb-contact-form-card {
  background: var(--wb-card-bg, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 24px; padding: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.07);
}
@media (max-width: 640px) {
  .wb-contact-form-card { padding: 1.25rem; border-radius: 18px; }
}

/* Form field with floating label effect on focus */
.wb-form-group {
  position: relative; margin-bottom: 1.15rem;
}
.wb-form-label {
  display: block; font-size: .8rem; font-weight: 600;
  margin-bottom: .4rem; color: var(--wb-heading, #0d1b2e);
}
.wb-form-control {
  display: block; width: 100%;
  padding: .7rem .9rem; font-size: .9rem;
  border: 1.5px solid var(--wb-border, rgba(0,0,0,.12));
  border-radius: 12px; outline: none;
  background: var(--wb-card-bg, #fff); color: var(--wb-heading, #0d1b2e);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.wb-form-control:hover { border-color: rgba(37,99,235,.35); }
.wb-form-control:focus {
  border-color: var(--wb-primary, #2563eb);
  box-shadow: 0 0 0 4px rgba(37,99,235,.1);
}
.wb-form-control::placeholder { color: rgba(90,106,126,.5); }
textarea.wb-form-control { resize: vertical; min-height: 110px; line-height: 1.6; }

/* Submit button */
.wb-form-submit {
  width: 100%; padding: .85rem; border-radius: 14px;
  background: linear-gradient(135deg, var(--wb-primary, #2563eb), #4f46e5);
  color: #fff; font-size: .95rem; font-weight: 700;
  border: none; cursor: pointer;
  box-shadow: 0 4px 16px rgba(37,99,235,.35);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s;
  letter-spacing: .01em;
}
.wb-form-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(37,99,235,.45); }
.wb-form-submit:active { transform: scale(.97); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. PROPERTY DETAIL PAGE — hero + specs + sidebar
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-prop-detail-hero {
  border-radius: 24px; overflow: hidden; position: relative;
  aspect-ratio: 16/6; background: linear-gradient(135deg, #dbeafe, #ede9fe);
  margin-bottom: 2rem;
}
.wb-prop-detail-hero img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wb-prop-detail-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 50%);
}
.wb-prop-detail-hero__badge {
  position: absolute; bottom: 1.25rem; left: 1.25rem;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 12px; padding: .4rem .9rem;
  color: #fff; font-size: .8rem; font-weight: 700;
}
@media (max-width: 767px) {
  .wb-prop-detail-hero { aspect-ratio: 4/3; border-radius: 16px; }
}

/* Detail grid: info + sidebar */
.wb-prop-detail-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 2rem; align-items: start;
}
@media (max-width: 1024px) {
  .wb-prop-detail-grid { grid-template-columns: 1fr; }
}

/* Spec table in detail */
.wb-spec-table { width: 100%; border-collapse: collapse; }
.wb-spec-table tr:not(:last-child) td { border-bottom: 1px solid var(--wb-border, rgba(0,0,0,.07)); }
.wb-spec-table td { padding: .7rem 0; font-size: .875rem; vertical-align: top; }
.wb-spec-table td:first-child { color: var(--wb-muted, #5a6a7e); width: 45%; font-weight: 500; }
.wb-spec-table td:last-child  { font-weight: 700; color: var(--wb-heading, #0d1b2e); }

/* Sticky detail sidebar */
.wb-prop-detail-sidebar {
  position: sticky; top: 80px;
  background: var(--wb-card-bg, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 22px; padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
@media (max-width: 1024px) { .wb-prop-detail-sidebar { position: static; } }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. GENERIC PAGE LAYOUT — about, terms, privacy, support-track
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-page-hero {
  text-align: center; padding: 4rem 1rem 3rem;
  background: linear-gradient(135deg, rgba(37,99,235,.05) 0%, rgba(124,58,237,.03) 100%);
  border-bottom: 1px solid var(--wb-border, rgba(0,0,0,.06));
}
.wb-page-hero__eyebrow {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--wb-primary, #2563eb);
  margin-bottom: .65rem; display: block;
}
.wb-page-hero__title {
  font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800;
  color: var(--wb-heading, #0d1b2e); margin: 0 auto .75rem;
  max-width: 560px; line-height: 1.18; letter-spacing: -.025em;
}
.wb-page-hero__sub {
  font-size: .95rem; color: var(--wb-muted, #5a6a7e); max-width: 480px; margin: 0 auto;
  line-height: 1.7;
}

.wb-page-body {
  max-width: 800px; margin: 0 auto; padding: 3rem 1rem;
  font-size: .95rem; line-height: 1.8; color: var(--wb-text, #334155);
}
.wb-page-body h2 {
  font-size: 1.25rem; font-weight: 800; color: var(--wb-heading, #0d1b2e);
  margin: 2.5rem 0 .75rem;
  padding-left: .85rem;
  border-left: 3px solid var(--wb-primary, #2563eb);
}
.wb-page-body h3 { font-size: 1.05rem; font-weight: 700; margin: 1.75rem 0 .5rem; }
.wb-page-body ul { padding-left: 1.5rem; }
.wb-page-body li { margin-bottom: .45rem; }
.wb-page-body a { color: var(--wb-primary, #2563eb); font-weight: 500; }
.wb-page-body a:hover { text-decoration: underline; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. WEBSITE BREADCRUMB
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-breadcrumb {
  display: flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--wb-muted, #5a6a7e);
  padding: .6rem 0;
}
.wb-breadcrumb a { color: var(--wb-muted, #5a6a7e); text-decoration: none; }
.wb-breadcrumb a:hover { color: var(--wb-primary, #2563eb); }
.wb-breadcrumb__sep { opacity: .4; }
.wb-breadcrumb__current { font-weight: 600; color: var(--wb-heading, #0d1b2e); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. SUPPORT TICKET TRACK PAGE
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.wb-ticket-status {
  background: var(--wb-card-bg, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 22px; padding: 1.75rem;
  max-width: 580px; margin: 2rem auto;
  box-shadow: 0 8px 28px rgba(0,0,0,.07);
}
.wb-ticket-status__header {
  display: flex; align-items: center; gap: .9rem; margin-bottom: 1.5rem;
}
.wb-ticket-status__icon {
  width: 52px; height: 52px; border-radius: 16px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.07));
}
.wb-ticket-status__id { font-size: .72rem; color: var(--wb-muted, #5a6a7e); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.wb-ticket-status__title { font-size: 1.05rem; font-weight: 700; margin-top: .12rem; }

/* Timeline steps */
.wb-ticket-timeline { list-style: none; padding: 0; margin: 0; }
.wb-ticket-timeline li {
  display: flex; gap: 1rem; position: relative;
  padding-bottom: 1.25rem;
}
.wb-ticket-timeline li:last-child { padding-bottom: 0; }
.wb-ticket-timeline li::before {
  content: '';
  position: absolute; left: 19px; top: 36px; bottom: 0; width: 2px;
  background: var(--wb-border, rgba(0,0,0,.1));
}
.wb-ticket-timeline li:last-child::before { display: none; }
.wb-ticket-step-dot {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; z-index: 1;
  background: var(--wb-bg-muted, #f1f5f9);
  border: 2px solid var(--wb-border, rgba(0,0,0,.1));
}
.wb-ticket-step-dot--done {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(37,99,235,.35);
}
.wb-ticket-step-dot--active {
  background: linear-gradient(135deg, #059669, #0d9488);
  border-color: transparent; color: #fff;
  box-shadow: 0 2px 10px rgba(5,150,105,.35);
}
.wb-ticket-step-body { padding-top: .6rem; }
.wb-ticket-step-label { font-size: .875rem; font-weight: 600; }
.wb-ticket-step-date  { font-size: .74rem; color: var(--wb-muted, #5a6a7e); margin-top: .15rem; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. DARK MODE — website pages
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
[data-theme="dark"] .wb-prop-card,
[data-theme="dark"] .wb-contact-form-card,
[data-theme="dark"] .wb-emi-calc,
[data-theme="dark"] .wb-ticket-status,
[data-theme="dark"] .wb-prop-detail-sidebar {
  background: #0f1a2e;
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
[data-theme="dark"] .wb-prop-card__spec,
[data-theme="dark"] .wb-filter-chip {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.65);
}
[data-theme="dark"] .wb-form-control {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
}
[data-theme="dark"] .wb-form-control:focus {
  border-color: rgba(37,99,235,.7);
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
[data-theme="dark"] .wb-range {
  background: rgba(255,255,255,.1);
}
[data-theme="dark"] .wb-page-hero {
  background: linear-gradient(135deg, rgba(37,99,235,.08) 0%, rgba(124,58,237,.05) 100%);
  border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .wb-ticket-step-dot {
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.1);
}
[data-theme="dark"] .wb-ticket-timeline li::before { background: rgba(255,255,255,.1); }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. WEBSITE MOBILE — all pages ≤ 767px
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (max-width: 767px) {
  .wb-emi-calc      { margin: 0 -.5rem; border-radius: 16px; }
  .wb-emi-calc__title { font-size: 1.1rem; }
  .wb-page-hero     { padding: 2.5rem 1rem 2rem; }
  .wb-page-hero__title { font-size: 1.65rem; }
  .wb-prop-detail-hero { border-radius: 12px; }
  .wb-ticket-status { padding: 1.25rem; margin: 1.25rem 0; border-radius: 18px; }
  .wb-contact-form-card { border-radius: 18px; }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   11. WEBSITE REDUCED MOTION
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (prefers-reduced-motion: reduce) {
  .wb-prop-card, .wb-filter-chip, .wb-form-submit,
  .wb-range::-webkit-slider-thumb { transition: none !important; transform: none !important; }
}

/* ================================================================
   ENHANCEMENT PACK v3 — Visual and UX Upgrades
   ================================================================ */

/* Smooth FAQ accordion (override display:none) */
.faq-answer {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  border-top-color: transparent !important;
  transition: max-height .38s cubic-bezier(.4,0,.2,1),
              opacity .3s ease,
              padding .3s ease,
              border-top-color .3s ease;
}
.faq-item.open .faq-answer {
  display: block !important;
  max-height: 900px;
  opacity: 1;
  padding-top: 1rem !important;
  padding-bottom: 1.25rem !important;
  border-top-color: rgba(37,99,235,.08) !important;
}

/* Social proof live strip */
.social-proof-strip {
  background: rgba(37,99,235,.04);
  border-bottom: 1px solid rgba(37,99,235,.08);
  padding: .55rem 0;
  overflow: hidden;
}
[data-theme="dark"] .social-proof-strip {
  background: rgba(37,99,235,.08);
  border-bottom-color: rgba(37,99,235,.15);
}
.social-proof-strip__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: .78rem;
  color: var(--wb-mid);
  font-weight: 500;
}
.social-proof-strip__item {
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
}
.social-proof-strip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #10b981;
  flex-shrink: 0;
  animation: spulse 2.2s ease-in-out infinite;
}
@keyframes spulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(1.45); }
}
.social-proof-strip strong { color: var(--wb-dark); }
@media (max-width: 640px) {
  .social-proof-strip__inner { gap: .75rem 1.25rem; font-size: .73rem; justify-content: flex-start; padding: 0 .75rem; }
  .social-proof-strip__item:nth-child(n+3) { display: none; }
}

/* Testimonial navigation dots */
.testimonial-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
}
.testimonial-dot {
  width: 8px; height: 8px;
  border-radius: 20px;
  background: var(--wb-border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .22s ease, width .22s cubic-bezier(.34,1.56,.64,1), transform .18s;
}
.testimonial-dot:hover   { background: rgba(37,99,235,.4); transform: scale(1.2); }
.testimonial-dot.active  { background: var(--wb-primary); width: 22px; }
.testimonial-prev,
.testimonial-next {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--wb-border);
  background: var(--wb-card);
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--wb-mid);
  transition: background .18s, border-color .18s, color .18s, transform .15s;
  flex-shrink: 0;
  font-size: .85rem;
}
.testimonial-prev:hover,
.testimonial-next:hover { background: var(--wb-primary); border-color: var(--wb-primary); color: #fff; }
.testimonial-prev:active,
.testimonial-next:active { transform: scale(.9); }

/* New ribbon on plot cards */
.plot-card__ribbon {
  position: absolute;
  top: .65rem; right: .65rem;
  background: linear-gradient(135deg, #7c3aed, #2563eb);
  color: #fff;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: .22rem .6rem;
  border-radius: 20px;
  z-index: 3;
  box-shadow: 0 2px 10px rgba(124,58,237,.45);
  pointer-events: none;
}
.plot-card__img { position: relative; }

/* Newsletter section */
.newsletter-section {
  background: linear-gradient(135deg, rgba(37,99,235,.05) 0%, rgba(124,58,237,.04) 100%);
  border-top: 1px solid var(--wb-border);
  border-bottom: 1px solid var(--wb-border);
  padding: 3.5rem 0;
}
[data-theme="dark"] .newsletter-section {
  background: linear-gradient(135deg, rgba(37,99,235,.1) 0%, rgba(124,58,237,.07) 100%);
}
.newsletter-wrap { max-width: 540px; margin: 0 auto; text-align: center; }
.newsletter-icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  display: grid; place-items: center;
  font-size: 1.5rem;
  margin: 0 auto 1.1rem;
}
.newsletter-wrap h3 { font-size: clamp(1.15rem, 2.5vw, 1.45rem); margin-bottom: .5rem; }
.newsletter-wrap p { font-size: .9rem; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; }
.newsletter-form { display: flex; gap: .5rem; max-width: 420px; margin: 0 auto 1rem; }
.newsletter-form input {
  flex: 1; min-width: 0;
  padding: .72rem 1rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 9px;
  font-size: .92rem;
  font-family: var(--wb-font);
  background: var(--wb-card);
  color: var(--wb-dark);
  transition: border-color .2s, box-shadow .2s;
}
.newsletter-form input:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.newsletter-privacy { font-size: .73rem; color: var(--wb-muted); }
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { justify-content: center; }
}

/* Step number hover glow */
.step-item__num {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.step-item:hover .step-item__num {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 10px 32px rgba(37,99,235,.5), 0 0 0 6px rgba(37,99,235,.12);
}
.step-item { transition: transform .2s ease; }
.step-item:hover { transform: translateY(-3px); }

/* Feature card accent color variety */
.feature-card:nth-child(2) .feature-card__icon { background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(5,150,105,.07)); color: var(--wb-accent); }
.feature-card:nth-child(3) .feature-card__icon { background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(109,40,217,.07)); color: #7c3aed; }
.feature-card:nth-child(4) .feature-card__icon { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(217,119,6,.07)); color: #d97706; }
.feature-card:nth-child(5) .feature-card__icon { background: linear-gradient(135deg, rgba(239,68,68,.1), rgba(220,38,38,.07)); color: #dc2626; }
.feature-card:nth-child(6) .feature-card__icon { background: linear-gradient(135deg, rgba(6,182,212,.12), rgba(8,145,178,.07)); color: #0891b2; }
.feature-card:nth-child(2)::before { background: linear-gradient(90deg, var(--wb-accent), #059669); }
.feature-card:nth-child(3)::before { background: linear-gradient(90deg, #7c3aed, #4f46e5); }
.feature-card:nth-child(4)::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
.feature-card:nth-child(5)::before { background: linear-gradient(90deg, #ef4444, #dc2626); }
.feature-card:nth-child(6)::before { background: linear-gradient(90deg, #06b6d4, #0891b2); }

/* Hero visual show on mobile */
@media (max-width: 860px) {
  .hero__visual { display: grid !important; justify-items: center; margin-top: 2.25rem; }
  .hero__stat-grid { animation: none; max-width: 100%; gap: .75rem; }
}
@media (max-width: 480px) {
  .hero__stat-grid { grid-template-columns: 1fr 1fr; }
  .hero__stat-card strong { font-size: 1.45rem; }
  .hero__ctas .btn { flex: 1 1 calc(50% - .5rem); min-width: 0; justify-content: center; }
}

/* Trust bar mobile spacing */
@media (max-width: 640px) {
  .trust-bar__divider { display: none; }
  .trust-bar__inner { gap: .75rem 1.25rem; justify-content: flex-start; padding: 0 .5rem; }
}

/* Invest metric hover */
.invest-metric { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.invest-metric:hover { transform: translateY(-3px); }
.invest-metric strong { color: #34d399; }

/* Enhanced CTA banner overlay */
.cta-banner { position: relative; overflow: hidden; }
.cta-banner::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.06) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.04) 0%, transparent 60%);
  pointer-events: none;
}
.cta-banner > .container { position: relative; z-index: 1; }

/* Gradient section header text utility */
.text-grad {
  background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Testimonial card border on hover */
.testimonial-card {
  border: 1px solid var(--wb-border);
  transition: transform var(--wb-transition), box-shadow var(--wb-transition), border-color var(--wb-transition);
}
.testimonial-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--wb-shadow-lg);
  border-color: rgba(37,99,235,.18);
}

/* ================================================================
   MOBILE RESPONSIVE FIXES — Critical, High, Accessibility
   ================================================================ */

/* ── 1. Filter bar — full-width stack on mobile ──────────────── */
@media (max-width: 640px) {
  .filter-bar {
    flex-direction: column;
    gap: .75rem;
  }
  .filter-bar label {
    min-width: 100% !important;
    width: 100%;
  }
  .filter-bar select,
  .filter-bar input {
    min-width: 100% !important;
    width: 100%;
  }
}

/* ── 2. Hero search — full-width on small phones ─────────────── */
@media (max-width: 480px) {
  .hero__search { max-width: 100%; }
  .hero__ctas   { gap: .6rem; }
  .hero__ctas .btn { flex: 1 1 calc(50% - .3rem); min-width: 0; justify-content: center; padding-left: 1rem; padding-right: 1rem; }
}

/* ── 3. City pills — hide "Popular:" label + bigger font ─────── */
@media (max-width: 480px) {
  .city-pills > span:first-child { display: none; }
  .city-pill { font-size: .8rem; padding: .3rem .75rem; }
}

/* ── 4. ROI calculator — single column on mobile ─────────────── */
@media (max-width: 680px) {
  .roi-wrap { grid-template-columns: 1fr !important; gap: 1.5rem; }
}

/* ── 5. Testimonial card width fix (override conflicting rules) ─ */
@media (max-width: 640px) {
  .testimonial-card {
    min-width: min(300px, 85vw) !important;
    max-width: min(360px, 90vw) !important;
  }
}

/* ── 6. Testimonial nav — 44px touch targets on mobile ────────── */
@media (max-width: 860px) {
  .testimonial-prev,
  .testimonial-next {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
  .testimonial-dot {
    width: 12px;
    height: 12px;
    min-width: 12px;
    min-height: 44px; /* expand click area */
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 7. Trust bar — wrap nicely, hide dividers early ─────────── */
@media (max-width: 768px) {
  .trust-bar__divider { display: none; }
  .trust-bar__inner   { gap: .5rem 1.25rem; flex-wrap: wrap; padding: 0 .25rem; }
}

/* ── 8. Plot card grid — 1-col on phones ─────────────────────── */
@media (max-width: 640px) {
  .plots-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 480px) {
  .plots-grid { grid-template-columns: 1fr; }
}

/* ── 9. Footer grid — 1-col at 640px ─────────────────────────── */
@media (max-width: 640px) {
  .wb-footer__grid {
    grid-template-columns: 1fr !important;
    gap: 1.75rem;
  }
}

/* ── 10. Social proof — font size above 12px on mobile ────────── */
@media (max-width: 640px) {
  .social-proof-strip__inner { font-size: .8rem !important; }
}

/* ── 11. Property detail grid — single col ───────────────────── */
@media (max-width: 640px) {
  .prop-details-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 860px) {
  .prop-body { grid-template-columns: 1fr !important; }
}

/* ── 12. Contact grid — single col at 860px (consistent) ─────── */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr !important; }
}

/* ── 13. Investment strip — stack on mobile ───────────────────── */
@media (max-width: 640px) {
  .invest-strip__inner { grid-template-columns: 1fr !important; gap: 2rem; }
  .invest-metrics { grid-template-columns: 1fr 1fr; gap: .75rem; }
}

/* ── 14. Pagination — better touch targets on mobile ─────────── */
@media (max-width: 640px) {
  .pagination a,
  .pagination span {
    padding: 0 .85rem;
    min-width: 48px;
  }
}

/* ── 15. Property map — reasonable height on mobile ─────────── */
@media (max-width: 640px) {
  .prop-map-wrap iframe { height: 220px !important; }
}

/* ── 16. Section padding — reduce on small phones ────────────── */
@media (max-width: 480px) {
  .section       { padding: 2.75rem 0; }
  .section-header { margin-bottom: 2rem; }
  .section-header h2 { font-size: clamp(1.35rem, 5vw, 1.75rem); }
}

/* ── 17. Container — tighter padding on tiny screens ─────────── */
@media (max-width: 360px) {
  .container { padding: 0 .75rem; }
  .hero       { padding: 2.75rem 0 2.25rem; }
}

/* ── 18. View toggle — hide on mobile (not needed) ───────────── */
@media (max-width: 640px) {
  .view-toggle { display: none !important; }
}

/* ── 19. Newsletter — ensure stacking on tiny phones ─────────── */
@media (max-width: 360px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-form button { justify-content: center; }
  .newsletter-wrap { padding: 0 .25rem; }
}

/* ── 20. Steps grid — 2-col at 640px, 1-col at 400px ────────── */
@media (max-width: 640px) {
  .steps-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1.25rem; }
  .steps-grid::before { display: none; }
}
@media (max-width: 400px) {
  .steps-grid { grid-template-columns: 1fr !important; }
}

/* ── 21. Features grid — 1-col at 480px ─────────────────────── */
@media (max-width: 480px) {
  .features-grid { grid-template-columns: 1fr !important; }
  .feature-card  { padding: 1.5rem; }
}

/* ── 22. About / team / values grids ─────────────────────────── */
@media (max-width: 480px) {
  .values-grid { grid-template-columns: 1fr !important; }
  .team-grid   { grid-template-columns: 1fr !important; }
}

/* ── 23. CTA banner — reduce padding on mobile ───────────────── */
@media (max-width: 640px) {
  .cta-banner { padding: 3rem 0; }
  .cta-banner h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); }
  .cta-banner p  { font-size: .95rem; margin-bottom: 1.5rem; }
  .cta-banner__actions { flex-direction: column; align-items: center; }
  .cta-banner__actions .btn,
  .cta-banner__actions [class*="btn"] { width: 100%; max-width: 320px; justify-content: center; }
}

/* ── 24. Plot card footer — stack on very small phones ────────── */
@media (max-width: 360px) {
  .plot-card__footer { flex-direction: column; }
  .plot-card__footer .btn,
  .plot-card__footer a { text-align: center; justify-content: center; width: 100%; }
}

/* ── 25. Hero badge — font size on mobile ────────────────────── */
@media (max-width: 480px) {
  .hero__badge { font-size: .73rem; padding: .28rem .7rem; }
  .hero h1 { margin-bottom: 1rem; }
  .hero p  { font-size: 1rem; margin-bottom: 1.5rem; }
}

/* ── 26. wb-nav actions — compact on small tablets ───────────── */
@media (max-width: 480px) {
  .wb-nav__logo-text { display: none; }
  .wb-nav__logo { gap: 0; }
}

/* ── 27. FAQ list — padding on mobile ────────────────────────── */
@media (max-width: 480px) {
  .faq-question { padding: 1rem; font-size: .95rem; }
  .faq-answer { padding-left: 1rem !important; padding-right: 1rem !important; margin: 0 !important; }
}

/* ── 28. Related / related-grid ──────────────────────────────── */
@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr !important; }
}

/* ── 29. Property sidebar card sticky — disable on mobile ─────── */
@media (max-width: 860px) {
  .prop-sidebar-card { position: static !important; }
}

/* ── 30. Table overflow wrapper ──────────────────────────────── */
.wb-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
  .filter-chips { gap: .35rem; }
  .filter-chip  { font-size: .75rem; padding: .25rem .6rem; }
}

/* ── 31. Reduced motion accessibility ────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .social-proof-strip__dot { animation: none !important; }
  .hero__orb, .hero__stat-grid { animation: none !important; }
  .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
  .animate-wb { animation: none !important; opacity: 1 !important; }
  .btn-premium::after { animation: none !important; }
  .invest-metric, .feature-card, .step-item { transition: none !important; }
}

/* ── 32. Prop sticky bar — above mobile nav ──────────────────── */
@media (max-width: 640px) {
  .prop-sticky-bar {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom));
  }
}

/* ── 33. WhatsApp float — move up on mobile ──────────────────── */
@media (max-width: 640px) {
  .wa-float    { bottom: 5rem; right: 1rem; }
  .back-to-top { bottom: 5rem; right: 4.5rem; }
}

/* ── 34. Newsletter section — scale on mobile ────────────────── */
@media (max-width: 640px) {
  .newsletter-section { padding: 2.5rem 0; }
  .newsletter-icon    { width: 48px; height: 48px; font-size: 1.25rem; }
}

/* ── 35. Overscroll body fix ─────────────────────────────────── */
body { overflow-x: hidden; max-width: 100vw; }

/* ================================================================
   TARGETED MOBILE FIXES — Touch targets, layout gaps, nav
   ================================================================ */

/* Gallery nav — 44px touch target on all mobile */
@media (max-width: 860px) {
  .prop-gallery-nav {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }
}

/* Auto-city banner — stack on mobile */
.auto-city-banner {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.15);
  border-radius: var(--wb-radius-sm);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}
.auto-city-banner__content { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .auto-city-banner { flex-wrap: wrap; gap: .6rem; }
  .auto-city-banner .btn { width: 100%; text-align: center; justify-content: center; }
}

/* wb-mnf (mobile nav footer) — fix safe area and button sizes */
.wb-mnf {
  border-top: 1px solid var(--wb-border);
  padding: 1rem .85rem max(1.25rem, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: .75rem;
  flex-shrink: 0;
  background: var(--wb-light);
}
.wb-mnf__brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0 .5rem;
  border-bottom: 1px solid var(--wb-border);
  margin-bottom: .25rem;
}
.wb-mnf__logo {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
  color: #fff;
  display: grid; place-items: center;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}
.wb-mnf__brand-text strong { font-size: .9rem; display: block; color: var(--wb-dark); }
.wb-mnf__brand-text span   { font-size: .72rem; color: var(--wb-muted); }
.wb-mnf__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  border-radius: 10px;
  font-size: .92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  padding: .75rem 1.25rem;
  transition: background .18s, transform .15s, box-shadow .18s;
}
.wb-mnf__btn:active { transform: scale(.97); }
.wb-mnf__btn--primary {
  background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
  color: #fff;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.wb-mnf__btn--primary:hover { box-shadow: 0 6px 22px rgba(37,99,235,.4); text-decoration: none; color: #fff; }
.wb-mnf__btn--ghost {
  background: var(--wb-border);
  color: var(--wb-dark);
}
.wb-mnf__btn--ghost:hover { background: rgba(37,99,235,.08); text-decoration: none; }
.wb-mnf__ctas { display: flex; gap: .5rem; }
.wb-mnf__ctas .wb-mnf__btn { flex: 1; }
.wb-mnf__util {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .25rem;
  border-top: 1px solid var(--wb-border);
  margin-top: .1rem;
}
.wb-mnf__theme {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .82rem;
  color: var(--wb-mid);
  font-weight: 500;
  border-radius: 8px;
  padding: .35rem .5rem;
  transition: background .15s, color .15s;
}
.wb-mnf__theme:hover { background: rgba(37,99,235,.07); color: var(--wb-primary); }
.wb-mnf__toggle {
  width: 34px; height: 18px;
  background: var(--wb-border);
  border-radius: 20px;
  position: relative;
  display: inline-block;
  margin-left: .25rem;
  flex-shrink: 0;
  transition: background .22s;
}
[data-theme="dark"] .wb-mnf__toggle { background: var(--wb-primary); }
.wb-mnf__toggle-thumb {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  top: 2px; left: 2px;
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
[data-theme="dark"] .wb-mnf__toggle-thumb { transform: translateX(16px); }
.wb-mnf__help {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-height: 44px;
  padding: .35rem .5rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--wb-mid);
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s, color .15s;
}
.wb-mnf__help:hover { background: rgba(37,99,235,.07); color: var(--wb-primary); text-decoration: none; }

/* Page hero — consistent mobile padding */
@media (max-width: 640px) {
  .page-hero, .props-hero { padding: 2.75rem 0 2.25rem; }
  .page-hero h1 { font-size: clamp(1.4rem, 6vw, 1.8rem); }
  .page-hero p  { font-size: .95rem; }
}

/* Sticky buy bar — safe area on notch phones */
.prop-sticky-bar {
  padding-bottom: max(.75rem, env(safe-area-inset-bottom, .75rem));
}

/* EMI plan options — better touch targets */
.prop-emi-option {
  min-height: 52px;
  padding: .75rem 1rem;
}

/* Property detail — spec labels */
@media (max-width: 480px) {
  .prop-detail-row label { font-size: .8rem; }
  .prop-detail-row strong { font-size: .9rem; }
}

/* Share buttons row — wrap gracefully */
@media (max-width: 480px) {
  .share-row { gap: .4rem; }
  .share-btn { font-size: .75rem; padding: .4rem .7rem; }
}

/* Filter chips — better mobile spacing */
@media (max-width: 480px) {
  .filter-chips { gap: .3rem; }
  .filter-chip { font-size: .78rem; padding: .28rem .6rem; }
}

/* Scroll reveal — ensure works without JS */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .animate-wb { animation: none !important; opacity: 1 !important; }
}

/* Dark mode: wb-mnf */
[data-theme="dark"] .wb-mnf { background: #111827; border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .wb-mnf__brand { border-bottom-color: rgba(255,255,255,.07); }
[data-theme="dark"] .wb-mnf__util  { border-top-color: rgba(255,255,255,.07); }
[data-theme="dark"] .wb-mnf__btn--ghost { background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); }
[data-theme="dark"] .wb-mnf__theme,
[data-theme="dark"] .wb-mnf__help  { color: rgba(255,255,255,.55); }

/* ═══════════════════════════════════════════════════════════════════
   WEBSITE FOOTER — Native Mobile & Tablet Polish
   ═══════════════════════════════════════════════════════════════════ */

/* Instant tap on all interactive footer elements */
.wa-float,
.back-to-top,
.wb-footer__links a,
.wb-footer__social a,
.wb-nav__hamburger { touch-action: manipulation; }

/* Safe-area insets so fixed buttons clear home-indicator / notch on iOS */
.wa-float {
  bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}
.back-to-top {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
@media (max-width: 640px) {
  .wa-float    { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); right: 1rem; }
  .back-to-top { bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); right: 4.5rem; }
}

/* Ensure footer link touch targets are always reachable */
.wb-footer__links a { min-height: 44px; display: flex; align-items: center; }

/* Footer bottom row stacks cleanly on smallest phones */
@media (max-width: 380px) {
  .wb-footer__bottom { flex-direction: column; text-align: center; gap: .75rem; }
  .footer-bottom-trust { justify-content: center; }
  .wb-footer { padding: 3rem 0 1.5rem; }
}

/* Respect reduced-motion: remove pulsing WA button animation */
@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .reveal, .reveal.visible { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   WEBSITE HEADER + NAV — Native mobile/tablet polish v6
   ═══════════════════════════════════════════════════════════════════ */

/* aria-current="page" on desktop nav links — stronger visual signal
   than .active alone: accessible name includes cue read by screen readers */
.wb-nav__links a[aria-current="page"],
.wb-nav__mobile-links a[aria-current="page"] {
  color: var(--wb-primary);
  font-weight: 700;
}

/* Skip-to-content link for keyboard users on public pages */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  padding: .5rem 1.25rem;
  background: var(--wb-primary);
  color: #fff;
  border-radius: 0 0 var(--wb-radius-sm) var(--wb-radius-sm);
  font-weight: 600;
  font-size: .9rem;
  text-decoration: none;
  transition: top .15s;
}
.skip-to-content:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* Touch targets on all interactive nav elements */
.wb-nav__links a,
.wb-nav__mobile-links a,
.wb-nav__mobile-expand,
.wb-nav__mobile-close,
.wb-mnf__btn,
.wb-mnf__theme,
.wb-mnf__help,
.wb-nav__dropdown-item,
.wb-nav__theme-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile nav sub-menu links: 44 × 44 px minimum tap zone */
.wb-nav__mobile-sub a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Mobile nav items: consistent minimum tap height */
.wb-nav__mobile-links a,
.wb-nav__mobile-item a {
  min-height: 48px;
}

/* Focus rings for mobile nav items */
.wb-nav__mobile-links a:focus-visible,
.wb-nav__mobile-sub a:focus-visible,
.wb-nav__mobile-expand:focus-visible,
.wb-nav__mobile-close:focus-visible,
.wb-mnf__btn:focus-visible,
.wb-mnf__theme:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: 2px;
  border-radius: var(--wb-radius-sm, 9px);
}

/* Desktop dropdown: focus rings on items */
.wb-nav__dropdown-item:focus-visible {
  outline: 2px solid var(--wb-primary);
  outline-offset: -2px;
  border-radius: var(--wb-radius-sm, 9px);
}

/* Theme switch button: visual checked state */
.wb-mnf__theme[aria-checked="true"] .wb-mnf__toggle {
  background: var(--wb-primary);
}
.wb-mnf__theme[aria-checked="true"] .wb-mnf__toggle-thumb {
  transform: translateX(18px);
}

/* Desktop theme button: active (dark mode on) visual indicator */
.wb-nav__theme-btn[aria-checked="true"] {
  background: var(--wb-primary);
  border-color: var(--wb-primary);
  color: #fff;
}
.wb-nav__theme-btn[aria-checked="true"]:hover {
  background: var(--wb-primary-dark, #1d4ed8);
  border-color: var(--wb-primary-dark, #1d4ed8);
}

/* Mobile nav overlay: overscroll containment */
.wb-nav__mobile {
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════
   ANNOUNCEMENT BAR — single authoritative definition (v6)
   Replaces all earlier partial blocks above.
   ═══════════════════════════════════════════════════════════════════ */

/* Base layout */
.announcement-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: linear-gradient(135deg, var(--wb-primary) 0%, #7c3aed 100%);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
  padding: .6rem 3.5rem;
  z-index: 1001;
  overflow: hidden;
  /* Smooth slide-up dismiss */
  max-height: 120px;
  transition: max-height .32s ease, opacity .28s ease,
              padding-top .28s ease, padding-bottom .28s ease;
}

/* Dismissed state — triggered by JS adding .is-closing */
.announcement-bar.is-closing {
  max-height: 0 !important;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none;
}

/* Content region */
.announcement-bar__content {
  flex: 1;
  text-align: center;
  word-break: break-word;
}
.announcement-bar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.announcement-bar a:hover { opacity: .85; }

/* Close button — proper icon, 36×36 touch target, focus ring */
.announcement-bar__close {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  padding: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 1.5px solid rgba(255,255,255,.24);
  color: rgba(255,255,255,.88);
  cursor: pointer;
  transition: background .15s, transform .15s, border-color .15s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.announcement-bar__close:hover {
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.45);
  color: #fff;
}
.announcement-bar__close:active {
  transform: translateY(-50%) scale(.88);
}
.announcement-bar__close:focus-visible {
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

/* Mobile: left-align text, tighter padding, larger tap zone */
@media (max-width: 640px) {
  .announcement-bar {
    padding: .55rem 3rem .55rem .85rem;
    font-size: .8rem;
    justify-content: flex-start;
    min-height: 44px;
    text-align: left;
  }
  .announcement-bar__content { text-align: left; }
  .announcement-bar__close { right: .5rem; width: 34px; height: 34px; }
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .announcement-bar,
  .announcement-bar.is-closing {
    transition: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════════════════
   _website_v2.css — Attractive Enhancement + Native Mobile Layer
   Appended to website.css — all rules override via specificity or cascade.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── NEW DESIGN TOKENS ────────────────────────────────────────────── */
:root {
  --wb-glow-blue:    rgba(37,99,235,.35);
  --wb-glow-purple:  rgba(124,58,237,.3);
  --wb-glow-green:   rgba(16,185,129,.3);
  --wb-gradient-hero: linear-gradient(135deg,#0d1b4b 0%,#1a3a8f 30%,#1e56c8 60%,#2563eb 80%,#38bdf8 100%);
  --wb-gradient-cta:  linear-gradient(135deg,#1e1b4b 0%,#312e81 40%,#2563eb 100%);
  --wb-glass:        rgba(255,255,255,.10);
  --wb-glass-border: rgba(255,255,255,.18);
  --wb-premium-from: #2563eb;
  --wb-premium-to:   #7c3aed;
  --safe-b:          env(safe-area-inset-bottom,0px);
}

/* ── 1. BODY SCROLL LOCK HELPERS ──────────────────────────────────── */
body.nav-open { overflow: hidden; }

/* ── 2. HERO — PREMIUM REDESIGN ───────────────────────────────────── */
.hero {
  background: var(--wb-gradient-hero);
  padding: 7rem 0 6rem;
  min-height: 92dvh;
  display: flex;
  align-items: center;
}

/* Mesh gradient overlay */
.hero::before {
  background:
    radial-gradient(ellipse 60% 50% at 70% 40%, rgba(99,102,241,.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 80%, rgba(16,185,129,.15) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Animated orbs */
.hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  animation: orbDrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero__orb-1 {
  width: 500px; height: 500px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(99,102,241,.45) 0%, transparent 70%);
}
.hero__orb-2 {
  width: 380px; height: 380px;
  bottom: -60px; left: 10%;
  background: radial-gradient(circle, rgba(16,185,129,.3) 0%, transparent 70%);
  animation-delay: -6s;
}
@keyframes orbDrift {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(30px,20px) scale(1.08); }
}

/* Hero badge — shimmer animation */
.hero__badge {
  animation: shimmerBadge 3s ease infinite;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: .82rem;
  letter-spacing: .05em;
}
@keyframes shimmerBadge {
  0%,100% { box-shadow: 0 0 0 rgba(255,255,255,.0); }
  50%      { box-shadow: 0 0 20px rgba(255,255,255,.15); }
}

/* Hero heading */
.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem,5.5vw,3.6rem);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: .8rem 0 1rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.2);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(90deg,#38bdf8,#a5f3fc,#38bdf8);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 4s linear infinite;
}
@keyframes textShine {
  to { background-position: 200% center; }
}

.hero > .container { position: relative; z-index: 1; width: 100%; }

/* Hero CTAs */
.hero__ctas { display: flex; gap: .85rem; flex-wrap: wrap; margin: 1.5rem 0 0; }

/* Premium button */
.btn-premium {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  background: linear-gradient(135deg,var(--wb-premium-from),var(--wb-premium-to));
  color: #fff !important;
  border: none;
  padding: .85rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s ease;
  box-shadow: 0 4px 20px rgba(37,99,235,.45), 0 1px 3px rgba(0,0,0,.15);
}
.btn-premium::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
  border-radius: inherit;
}
.btn-premium::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg,rgba(255,255,255,.25) 0%,transparent 100%);
  opacity: 0;
  transition: opacity .25s ease;
  border-radius: inherit;
}
.btn-premium:hover  { transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 32px rgba(37,99,235,.55); }
.btn-premium:hover::after { opacity: 1; }
.btn-premium:active { transform: scale(.98); }
.btn-premium.btn-lg { padding: 1rem 2.25rem; font-size: 1.05rem; }
.btn-premium.btn-sm { padding: .5rem 1.25rem; font-size: .85rem; border-radius: 50px; }

/* Hero search */
.hero__search {
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
  max-width: 480px;
}
.hero__search:focus-within {
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 4px rgba(255,255,255,.1);
}
.hero__search input {
  background: transparent;
  border: none;
  color: #fff;
  font-size: .95rem;
  padding: .75rem 1.25rem;
  flex: 1;
  outline: none;
  min-height: 52px;
}
.hero__search input::placeholder { color: rgba(255,255,255,.55); }
.hero__search button {
  background: #fff;
  color: var(--wb-primary);
  border: none;
  padding: .6rem 1.35rem;
  border-radius: 50px;
  font-weight: 700;
  font-size: .88rem;
  cursor: pointer;
  margin: 5px;
  min-height: 42px;
  transition: background .2s, transform .15s;
}
.hero__search button:hover { background: #f0f4ff; transform: scale(1.03); }

/* City pills */
.city-pills { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; align-items: center; }
.city-pill {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.9);
  padding: .3rem .85rem;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .18s, border-color .18s, transform .15s;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.city-pill:hover  { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.4); transform: translateY(-1px); text-decoration: none; color: #fff; }
.city-pill:active { transform: scale(.97); }

/* Hero stat cards */
.hero__stat-grid { gap: 1rem; }
.hero__stat-card {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px;
  padding: 1.25rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform .2s var(--wb-ease-spring), background .2s;
  text-align: center;
}
.hero__stat-card:hover { transform: translateY(-3px) scale(1.02); background: rgba(255,255,255,.15); }
.hero__stat-card strong {
  display: block;
  font-size: clamp(1.6rem,3.5vw,2.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.hero__stat-card span {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  font-weight: 500;
  margin-top: .25rem;
  display: block;
}

/* ── 3. SOCIAL PROOF STRIP — SCROLLING TICKER ON MOBILE ──────────── */
.social-proof-strip {
  background: linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  padding: .75rem 0;
  overflow: hidden;
  position: relative;
}
.social-proof-strip::before,
.social-proof-strip::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 60px; z-index: 2; pointer-events: none;
}
.social-proof-strip::before { left: 0; background: linear-gradient(to right,#1e293b,transparent); }
.social-proof-strip::after  { right:0; background: linear-gradient(to left, #1e293b,transparent); }

.social-proof-strip__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  animation: proofScroll 24s linear infinite;
  white-space: nowrap;
  width: max-content;
}
.social-proof-strip__inner:hover { animation-play-state: paused; }
@keyframes proofScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.social-proof-strip__item {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: rgba(255,255,255,.8);
  flex-shrink: 0;
}
.social-proof-strip__dot {
  width: 8px; height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s ease infinite;
  box-shadow: 0 0 8px rgba(16,185,129,.6);
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.3); }
}

/* ── 4. TRUST BAR — ENHANCED ──────────────────────────────────────── */
.trust-bar {
  background: #fff;
  border-bottom: 1px solid var(--wb-border);
  padding: .9rem 0;
  overflow: hidden;
}
[data-theme="dark"] .trust-bar { background: #1e293b; border-bottom-color: rgba(255,255,255,.06); }
.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.trust-bar__inner::-webkit-scrollbar { display: none; }
.trust-bar__item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .3rem 1.25rem;
  font-size: .82rem;
  font-weight: 500;
  color: var(--wb-mid);
  white-space: nowrap;
  flex-shrink: 0;
}
.trust-bar__icon { font-size: 1rem; }
.trust-bar__divider {
  width: 1px; height: 20px;
  background: var(--wb-border);
  flex-shrink: 0;
}

/* ── 5. FEATURE CARDS — PREMIUM ───────────────────────────────────── */
.features-grid {
  gap: 1.25rem;
}
.feature-card {
  background: linear-gradient(145deg,var(--wb-card) 0%,rgba(248,250,252,.6) 100%);
  border: 1px solid var(--wb-border);
  position: relative;
  padding: 2rem 1.75rem;
  border-radius: 18px;
  overflow: hidden;
}
.feature-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%, rgba(37,99,235,.04) 0%, transparent 70%);
  pointer-events: none;
}
[data-theme="dark"] .feature-card { background: linear-gradient(145deg,#1e293b 0%,#1a2642 100%); }

.feature-card__icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.08));
  font-size: 1.6rem;
  box-shadow: 0 4px 16px rgba(37,99,235,.12);
}
.feature-card:hover .feature-card__icon {
  background: linear-gradient(135deg,var(--wb-primary),#7c3aed);
  filter: none;
}
.feature-card h3 { font-size: 1.05rem; margin-bottom: .45rem; }
.feature-card p  { font-size: .9rem; line-height: 1.65; }

/* ── 6. PROPERTY CARDS — PREMIUM ──────────────────────────────────── */
.plot-card {
  border-radius: 18px;
  border: 1px solid var(--wb-border);
  overflow: hidden;
  position: relative;
  transition: transform .25s var(--wb-ease-spring), box-shadow .25s ease,
              border-color .2s;
}
.plot-card:hover { transform: translateY(-6px); box-shadow: var(--wb-shadow-xl); border-color: rgba(37,99,235,.2); }

.plot-card__img {
  height: 188px;
  background: linear-gradient(135deg,#0d2b6b 0%,#1e56c8 50%,#38bdf8 100%);
  position: relative;
  overflow: hidden;
}
/* Animated shimmer on card image */
.plot-card__img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg,transparent 30%,rgba(255,255,255,.06) 50%,transparent 70%);
  background-size: 200% 100%;
  animation: cardShimmer 3s linear infinite;
}
@keyframes cardShimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.plot-card__ribbon {
  position: absolute;
  top: 12px; right: 12px;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: .2rem .65rem;
  border-radius: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(16,185,129,.4);
}

.plot-card__body { padding: 1.25rem 1.25rem .75rem; }
.plot-card__location {
  font-size: .78rem;
  color: var(--wb-muted);
  font-weight: 500;
  margin-bottom: .55rem;
  gap: .4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.plot-card h3 {
  font-size: 1rem;
  margin-bottom: .35rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plot-card__price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--wb-dark);
  margin-top: auto;
  padding-top: .7rem;
  border-top: 1px solid var(--wb-border);
  display: flex;
  align-items: baseline;
  gap: .35rem;
}
.plot-card__footer {
  padding: .9rem 1.25rem;
  border-top: 1px solid var(--wb-border);
  gap: .65rem;
  background: linear-gradient(to bottom,transparent,rgba(248,250,252,.5));
}
[data-theme="dark"] .plot-card__footer { background: transparent; }

/* ── 7. STEPS — PREMIUM CONNECTOR ─────────────────────────────────── */
.steps-grid { gap: 1.5rem; }
.step-item {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 18px;
  padding: 2rem 1.5rem;
  text-align: center;
  position: relative;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s;
}
.step-item:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); }
.step-item__num {
  width: 60px; height: 60px;
  border-radius: 50%;
  font-size: 1.5rem;
  font-weight: 900;
  margin: 0 auto 1.25rem;
  box-shadow: 0 6px 24px rgba(37,99,235,.45);
  position: relative;
  z-index: 1;
}
.step-item__num::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(37,99,235,.25);
  animation: ringPulse 3s ease infinite;
}
@keyframes ringPulse {
  0%,100% { transform: scale(1);   opacity: .6; }
  50%      { transform: scale(1.15); opacity: .2; }
}
.step-item h3 { font-size: 1rem; margin-bottom: .5rem; }
.step-item p  { font-size: .88rem; }

/* ── 8. INVEST STRIP — PREMIUM DARK ───────────────────────────────── */
.invest-strip {
  background: linear-gradient(135deg,#0d1b4b 0%,#1a3a8f 50%,#1e4ed8 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.invest-strip::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 80% 50%, rgba(99,102,241,.2) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 20% 20%, rgba(16,185,129,.1) 0%, transparent 60%);
}
.invest-strip__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  position: relative;
  z-index: 1;
}
.invest-strip h2 { color: #fff; font-size: clamp(1.5rem,3vw,2.25rem); }
.invest-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.invest-metric {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background .2s, transform .2s var(--wb-ease-spring);
}
.invest-metric:hover { background: rgba(255,255,255,.16); transform: translateY(-3px); }
.invest-metric strong {
  display: block;
  font-size: clamp(1.75rem,3.5vw,2.5rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.02em;
}
.invest-metric span {
  font-size: .78rem;
  color: rgba(255,255,255,.65);
  margin-top: .3rem;
  display: block;
  font-weight: 500;
}

/* ── 9. ROI CALCULATOR — PREMIUM ──────────────────────────────────── */
.roi-section {
  background: linear-gradient(135deg,#0f172a 0%,#1e293b 50%,#1a3a8f 100%);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}
.roi-section::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 50%, rgba(37,99,235,.12) 0%, transparent 70%);
  pointer-events: none;
}
.roi-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.roi-calc-card,
.roi-results {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 20px;
  padding: 2rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.roi-form-label { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.8); }
.roi-calc-card .form-control {
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.18);
  color: #fff;
  border-radius: 12px;
  padding: .75rem 1rem;
  width: 100%;
  font-size: .95rem;
  transition: border-color .2s, background .2s;
}
.roi-calc-card .form-control:focus {
  outline: none;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.15);
}
.roi-calc-card input[type="range"] {
  width: 100%;
  accent-color: var(--wb-primary);
  height: 6px;
  border-radius: 3px;
  cursor: pointer;
}
.roi-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .9rem;
  color: rgba(255,255,255,.7);
}
.roi-result-row:last-child { border-bottom: none; }
.roi-result-row strong { color: #fff; font-weight: 700; }

/* ── 10. TESTIMONIALS — PREMIUM CARDS ─────────────────────────────── */
.testimonials-section-wrap { background: var(--wb-light) !important; }
.testimonials-scroller {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: .5rem .25rem 1rem;
}
.testimonials-scroller::-webkit-scrollbar { display: none; }
.testimonial-card {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  min-width: clamp(280px,85vw,380px);
  scroll-snap-align: start;
  flex-shrink: 0;
  box-shadow: var(--wb-shadow);
  position: relative;
  overflow: hidden;
  transition: transform .25s var(--wb-ease-spring), box-shadow .25s;
}
.testimonial-card::before {
  content: '"';
  position: absolute;
  top: -10px; right: 20px;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(37,99,235,.07);
  line-height: 1;
  font-family: Georgia, serif;
  pointer-events: none;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-lg); }
.testimonial-card__stars {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.testimonial-card__body {
  font-size: .92rem;
  color: var(--wb-mid);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.testimonial-card__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--wb-border);
}
.testimonial-card__name { font-weight: 700; font-size: .92rem; }
.testimonial-card__title { font-size: .78rem; color: var(--wb-muted); margin-top: .1rem; }
.testimonial-card__author { display: flex; align-items: center; gap: .85rem; }

.testimonial-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}
.testimonial-prev, .testimonial-next {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--wb-border);
  background: var(--wb-card);
  color: var(--wb-mid);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
}
.testimonial-prev:hover, .testimonial-next:hover {
  background: var(--wb-primary);
  color: #fff;
  border-color: var(--wb-primary);
  transform: scale(1.08);
}
.testimonial-dot { width:8px; height:8px; border-radius:50%; background:var(--wb-border); cursor:pointer; transition:background .2s,transform .2s; }
.testimonial-dot.active { background:var(--wb-primary); transform:scale(1.3); }

/* ── 11. NEWSLETTER — PREMIUM ─────────────────────────────────────── */
.newsletter-section {
  background: linear-gradient(135deg,var(--wb-primary) 0%,#7c3aed 100%);
  padding: 4rem 0;
  position: relative;
  overflow: hidden;
}
.newsletter-section::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255,255,255,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 60% at 100% 50%, rgba(0,0,0,.1) 0%, transparent 60%);
}
.newsletter-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.newsletter-icon { font-size: 2.5rem; margin-bottom: .75rem; display: block; }
.newsletter-wrap h3 { color: #fff; font-size: clamp(1.3rem,3vw,1.85rem); margin-bottom: .5rem; }
.newsletter-wrap > p { color: rgba(255,255,255,.8); margin-bottom: 1.5rem; font-size: .95rem; }
.newsletter-form {
  display: flex;
  gap: .5rem;
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 5px 5px 5px 1.25rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .2s, box-shadow .2s;
}
.newsletter-form:focus-within {
  border-color: rgba(255,255,255,.55);
  box-shadow: 0 0 0 4px rgba(255,255,255,.1);
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  font-size: .9rem;
  outline: none;
  min-height: 42px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.6); }
.newsletter-form button {
  border-radius: 50px;
  padding: .55rem 1.5rem;
  background: #fff;
  color: var(--wb-primary);
  font-weight: 700;
  font-size: .88rem;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s;
  min-height: 42px;
}
.newsletter-form button:hover { background: #f0f4ff; transform: scale(1.02); }
.newsletter-privacy { font-size: .75rem; color: rgba(255,255,255,.6); margin-top: .85rem; }

/* ── 12. FAQ — PREMIUM ACCORDION ──────────────────────────────────── */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.faq-item {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .2s, border-color .2s;
}
.faq-item.open {
  box-shadow: var(--wb-shadow-md);
  border-color: rgba(37,99,235,.2);
}
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.25rem 1.5rem;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--wb-dark);
  line-height: 1.4;
  min-height: 58px;
  transition: color .2s, background .2s;
}
.faq-question:hover { color: var(--wb-primary); background: rgba(37,99,235,.03); }
.faq-item.open .faq-question { color: var(--wb-primary); }
.faq-question__arrow {
  font-size: .75rem;
  flex-shrink: 0;
  transition: transform .28s var(--wb-ease-spring);
  color: var(--wb-muted);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--wb-border);
  display: grid;
  place-items: center;
}
.faq-item.open .faq-question__arrow { transform: rotate(180deg); background: rgba(37,99,235,.12); color: var(--wb-primary); }
.faq-answer {
  padding: 0 1.5rem;
  font-size: .9rem;
  color: var(--wb-mid);
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), padding .3s ease;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  padding: 0 1.5rem 1.25rem;
}

/* ── 13. CTA BANNER — PREMIUM ──────────────────────────────────────── */
.cta-banner {
  background: var(--wb-gradient-cta);
  padding: 5.5rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 55% 70% at 50% 50%, rgba(99,102,241,.25) 0%, transparent 70%),
    url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Ccircle cx='40' cy='40' r='1'/%3E%3C/g%3E%3C/svg%3E");
}
.cta-banner > .container { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; font-size: clamp(1.75rem,4vw,3rem); letter-spacing: -.02em; }
.cta-banner p  { color: rgba(255,255,255,.78); font-size: 1.1rem; margin: .75rem 0 2rem; }
.cta-banner__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── 14. FOOTER — ENHANCED ─────────────────────────────────────────── */
.wb-footer {
  background: linear-gradient(180deg,#0f172a 0%,#080d1a 100%);
  padding: 4.5rem 0 2rem;
  position: relative;
  overflow: hidden;
}
.wb-footer::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(37,99,235,.4), rgba(124,58,237,.4), transparent);
}
.wb-footer__col h4 {
  color: #fff;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
  position: relative;
}
.wb-footer__col h4::after {
  content: '';
  position: absolute;
  bottom: -6px; left: 0;
  width: 24px; height: 2px;
  background: var(--wb-primary);
  border-radius: 2px;
}
.wb-footer__links a {
  color: rgba(255,255,255,.5);
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 0;
  min-height: 40px;
  border-radius: 6px;
  transition: color .18s, transform .15s;
}
.wb-footer__links a:hover { color: #fff; transform: translateX(3px); text-decoration: none; }

.wb-footer__social a {
  border-radius: 10px;
  transition: background .2s, transform .15s var(--wb-ease-spring);
}
.wb-footer__social a:hover { transform: translateY(-3px); }

/* Footer contact items */
.footer-contact-item { display: flex; align-items: center; gap: .6rem; font-size: .83rem; color: rgba(255,255,255,.6); margin-bottom: .5rem; }
.footer-contact-item a { color: rgba(255,255,255,.7); text-decoration: none; }
.footer-contact-item a:hover { color: #fff; }

/* Footer trust bar */
.footer-bottom-trust { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; margin-top: .75rem; }
.footer-trust-item   { font-size: .75rem; color: rgba(255,255,255,.4); display: flex; align-items: center; gap: .3rem; }

/* ── 15. CONTACT PAGE — ENHANCED ──────────────────────────────────── */
.contact-hero {
  background: var(--wb-gradient-hero);
  padding: 4rem 0 3.5rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.contact-hero h1 { color: #fff; }
.contact-hero p  { color: rgba(255,255,255,.8); }

.contact-quick-row {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
  margin: 2.5rem 0;
}
.contact-quick-card {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s;
}
.contact-quick-card:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); }
.contact-quick-card .icon { font-size: 1.75rem; margin-bottom: .6rem; display: block; }
.contact-quick-card strong { display: block; font-size: .85rem; margin-bottom: .25rem; }
.contact-quick-card a,
.contact-quick-card span { font-size: .82rem; color: var(--wb-primary); }

.contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2.5rem; align-items: start; }
.contact-info { display: flex; flex-direction: column; gap: 1.5rem; }
.contact-info__item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 14px;
  transition: box-shadow .2s;
}
.contact-info__item:hover { box-shadow: var(--wb-shadow-md); }
.contact-info__icon {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.08));
  display: grid; place-items: center;
  font-size: 1.1rem;
}

.wb-form {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--wb-shadow);
}
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-label { font-size: .85rem; font-weight: 600; color: var(--wb-dark); }
.form-control {
  border: 1.5px solid var(--wb-border);
  border-radius: 10px;
  padding: .75rem 1rem;
  font-size: .95rem;
  font-family: var(--wb-font);
  color: var(--wb-dark);
  background: var(--wb-light);
  transition: border-color .2s, box-shadow .2s;
  min-height: 46px;
  width: 100%;
}
.form-control:focus {
  outline: none;
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
  background: var(--wb-card);
}
textarea.form-control { min-height: 130px; resize: vertical; }

/* ── 16. ABOUT PAGE — ENHANCED ────────────────────────────────────── */
.about-hero {
  background: var(--wb-gradient-hero);
  padding: 5rem 0 4rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.about-hero h1  { color: #fff; }
.about-hero p   { color: rgba(255,255,255,.8); }

.about-stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; margin-top: 1.5rem; }
.about-stat-card {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 14px;
  padding: 1.5rem 1.25rem;
  text-align: center;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s;
}
.about-stat-card:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); }
.about-stat-card strong { display: block; font-size: 2rem; font-weight: 900; color: var(--wb-primary); }
.about-stat-card span   { font-size: .82rem; color: var(--wb-muted); font-weight: 500; margin-top: .25rem; display: block; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.value-card {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s, border-color .2s;
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--wb-shadow-md); border-color: rgba(37,99,235,.2); }
.value-card .icon { font-size: 2rem; margin-bottom: .75rem; display: block; }
.value-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.value-card p  { font-size: .88rem; }

/* ── 17. EMI CALCULATOR PAGE — ENHANCED ──────────────────────────── */
.emi-calc-hero {
  background: var(--wb-gradient-hero);
  padding: 4rem 0 3.5rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.emi-calc-hero h1 { color: #fff; }
.emi-calc-hero p  { color: rgba(255,255,255,.8); }

.emi-calc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.emi-input-card, .emi-results-card {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 20px;
  padding: 2rem;
  box-shadow: var(--wb-shadow);
}
.emi-input-card label { font-size: .85rem; font-weight: 600; color: var(--wb-dark); margin-bottom: .4rem; display: block; }
.emi-input-card input[type="range"] { width: 100%; accent-color: var(--wb-primary); }
.ec-charges-row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: .75rem;
}

/* ── 18. PROPERTIES PAGE — ENHANCED ──────────────────────────────── */
.props-hero {
  background: var(--wb-gradient-hero);
  padding: 4rem 0 3rem;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.props-hero h1 { color: #fff; }
.props-hero p  { color: rgba(255,255,255,.8); }

.filter-bar {
  background: var(--wb-card);
  border: 1px solid var(--wb-border);
  border-radius: 16px;
  padding: 1.25rem;
  box-shadow: var(--wb-shadow);
  margin: 1.5rem 0;
}

/* ── 19. WHATSAPP FLOAT BUTTON — ENHANCED ────────────────────────── */
.wa-float {
  position: fixed;
  bottom: calc(1.5rem + max(0px, var(--safe-b)));
  right: max(1.25rem, env(safe-area-inset-right,1.25rem));
  width: 54px; height: 54px;
  background: #25d366;
  border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  z-index: 300;
  transition: transform .2s var(--wb-ease-spring), box-shadow .2s;
  text-decoration: none;
}
.wa-float:hover { transform: scale(1.12) translateY(-2px); box-shadow: 0 8px 28px rgba(37,211,102,.55); }
.wa-float:active { transform: scale(.95); }
.wa-float svg { width: 28px; height: 28px; }

/* ── 20. ANNOUNCEMENT BAR — ENHANCED ────────────────────────────── */
.announcement-bar {
  background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
  color: #fff;
  padding: .6rem 1rem;
  text-align: center;
  font-size: .84rem;
  font-weight: 500;
  position: relative;
}
.announcement-bar__close {
  position: absolute;
  right: .75rem; top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.2);
  border: none; color: #fff;
  border-radius: 50%;
  width: 24px; height: 24px;
  cursor: pointer;
  display: grid; place-items: center;
  font-size: .8rem;
  transition: background .15s;
}
.announcement-bar__close:hover { background: rgba(255,255,255,.35); }

/* ── 21. SCROLL-BASED ANIMATE ────────────────────────────────────── */
.animate-wb {
  animation: slideUp .65s cubic-bezier(.16,1,.3,1) both;
}
.animate-wb--d2 { animation-delay: .1s; }
.animate-wb--d3 { animation-delay: .2s; }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS — COMPLETE NATIVE EXPERIENCE
   ═══════════════════════════════════════════════════════════════════ */

/* ── TABLET (≤1024px) ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .contact-quick-row { grid-template-columns: repeat(2,1fr); }
  .about-stats-grid  { grid-template-columns: repeat(2,1fr); }
  .roi-wrap          { grid-template-columns: 1fr; max-width: 540px; }
  .invest-strip__inner { gap: 2.5rem; }
  .emi-calc-layout   { grid-template-columns: 1fr; max-width: 540px; margin: 0 auto; }
}

/* ── MOBILE (≤860px) ─────────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Hero */
  .hero {
    padding: 5rem 0 4.5rem;
    min-height: 100dvh;
    display: flex;
    align-items: center;
  }
  .hero h1 { font-size: clamp(1.9rem,7vw,2.6rem); }
  .hero > .container { width: 100%; }

  /* Show mobile hero stats as a 2x2 grid below CTA instead of hiding */
  .hero__visual {
    display: block !important;
    margin-top: 2.5rem;
  }
  .hero__stat-grid {
    grid-template-columns: repeat(2,1fr);
    gap: .75rem;
  }
  .hero__stat-card { padding: 1rem; }
  .hero__stat-card strong { font-size: 1.5rem; }

  /* Invest strip */
  .invest-strip__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    text-align: center;
  }
  .invest-metrics { max-width: 400px; margin: 0 auto; }

  /* Contact quick row */
  .contact-quick-row { grid-template-columns: repeat(2,1fr); }
  .contact-grid { grid-template-columns: 1fr; }
}

/* ── PHONE (≤640px) ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero */
  .hero { padding: 5rem 0 4rem; min-height: 100dvh; }
  .hero h1 { font-size: clamp(1.7rem,8vw,2.4rem); }
  .hero__inner { gap: 2rem; }
  .hero__ctas { flex-direction: column; gap: .75rem; }
  .hero__ctas .btn, .hero__ctas .btn-premium {
    width: 100%; justify-content: center; text-align: center;
  }
  .hero__search { max-width: 100%; flex-direction: column; border-radius: 16px; padding: .5rem; }
  .hero__search input { border-radius: 12px; padding: .75rem 1rem; width: 100%; }
  .hero__search button { border-radius: 12px; width: 100%; padding: .75rem; margin: 0; }
  .city-pills { gap: .35rem; }
  .city-pill { font-size: .72rem; padding: .25rem .65rem; }
  .hero__stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .hero__stat-card { padding: .85rem .75rem; border-radius: 12px; }
  .hero__stat-card strong { font-size: 1.35rem; }

  /* Sections */
  .section { padding: 3rem 0; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }
  .feature-card  { padding: 1.5rem; }

  /* Property cards */
  .plots-grid { grid-template-columns: 1fr; gap: 1rem; }
  .plot-card__footer { flex-direction: row; }
  .plot-card__footer .btn { flex: 1; justify-content: center; text-align: center; }

  /* Steps */
  .steps-grid { grid-template-columns: 1fr 1fr; gap: 1rem; }
  .step-item  { padding: 1.25rem 1rem; border-radius: 14px; }
  .step-item__num { width: 48px; height: 48px; font-size: 1.2rem; }
  .step-item h3 { font-size: .9rem; }
  .step-item p  { font-size: .82rem; }

  /* Invest strip */
  .invest-metrics { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .invest-metric  { padding: 1.1rem 1rem; border-radius: 12px; }
  .invest-metric strong { font-size: 1.75rem; }

  /* ROI calc */
  .roi-wrap { gap: 1.25rem; }
  .roi-calc-card, .roi-results { padding: 1.5rem; border-radius: 16px; }

  /* Testimonials */
  .testimonial-card { min-width: calc(100vw - 3rem); padding: 1.4rem 1.25rem; border-radius: 14px; }

  /* Newsletter */
  .newsletter-form { flex-direction: column; border-radius: 16px; padding: .75rem; gap: .5rem; }
  .newsletter-form input  { padding: .6rem .75rem; min-height: 48px; border-radius: 10px; }
  .newsletter-form button { border-radius: 10px; padding: .75rem; }
  .newsletter-wrap h3 { font-size: 1.3rem; }

  /* CTA banner */
  .cta-banner { padding: 3.5rem 0; }
  .cta-banner h2 { font-size: clamp(1.5rem,6vw,2rem); }
  .cta-banner p  { font-size: .92rem; margin-bottom: 1.5rem; }
  .cta-banner__actions { flex-direction: column; align-items: stretch; gap: .75rem; max-width: 320px; margin: 0 auto; }
  .cta-banner__actions .btn { justify-content: center; }

  /* Footer */
  .wb-footer { padding: 3rem 0 1.5rem; }
  .wb-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; }
  .wb-footer__col:first-child { grid-column: 1/-1; }

  /* Contact */
  .contact-quick-row { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .contact-quick-card { padding: 1.1rem 1rem; border-radius: 12px; }
  .contact-quick-card .icon { font-size: 1.5rem; }
  .wb-form { padding: 1.4rem; border-radius: 14px; }

  /* About */
  .about-stats-grid { grid-template-columns: 1fr 1fr; gap: .75rem; }
  .values-grid { grid-template-columns: 1fr; }

  /* Properties filter */
  .filter-bar { padding: 1rem; border-radius: 12px; gap: .75rem; }
  .filter-bar label { min-width: 100%; }
  .filter-bar select, .filter-bar input { min-width: 100%; width: 100%; }

  /* EMI calc */
  .ec-charges-row { grid-template-columns: 1fr; gap: .65rem; }

  /* Trust bar */
  .trust-bar__item { padding: .25rem .75rem; font-size: .78rem; }

  /* Social proof strip */
  .social-proof-strip__inner { gap: 1.75rem; }
}

/* ── SMALL PHONES (≤480px) ────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Hero tighter */
  .hero { padding: 4.5rem 0 3.5rem; }
  .hero h1 { font-size: clamp(1.5rem,9vw,2rem); }
  .hero__badge { font-size: .72rem; padding: .25rem .7rem; }
  .hero p { font-size: .9rem; }

  .btn-lg { padding: .85rem 1.75rem; font-size: .95rem; }

  /* Steps: single col on very small screens */
  .steps-grid { grid-template-columns: 1fr; }
  .step-item  { text-align: left; display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem; }
  .step-item__num { margin: 0; flex-shrink: 0; width: 42px; height: 42px; font-size: 1.1rem; }
  .step-item h3 { margin-bottom: .3rem; }

  /* Contact quick: single col */
  .contact-quick-row { grid-template-columns: 1fr; }
  .contact-quick-card { display: flex; align-items: center; gap: 1rem; text-align: left; padding: 1rem 1.25rem; }
  .contact-quick-card .icon { font-size: 1.5rem; flex-shrink: 0; }

  /* Footer */
  .wb-footer__grid { grid-template-columns: 1fr; }
  .wb-footer__col:first-child { grid-column: auto; }

  /* About stats */
  .about-stat-card { padding: 1rem .75rem; }
  .about-stat-card strong { font-size: 1.6rem; }

  /* Pagination */
  .pagination { gap: .3rem; }
  .pagination a, .pagination span { min-width: 44px; min-height: 44px; height: auto; font-size: .82rem; }

  /* Announcement bar */
  .announcement-bar { font-size: .77rem; padding: .55rem 2.5rem .55rem .75rem; text-align: left; }
}

/* ── EXTRA SMALL (≤380px) ─────────────────────────────────────────── */
@media (max-width: 380px) {
  .hero h1 { font-size: 1.55rem; }
  .hero__stat-grid { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .hero__stat-card strong { font-size: 1.2rem; }
  .features-grid { gap: .85rem; }
  .wb-footer__grid { gap: 1.25rem; }
  .container { padding: 0 1rem; }
}

/* ── LANDSCAPE PHONE ─────────────────────────────────────────────── */
@media (max-height: 600px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: 3rem 0 2.5rem;
  }
  .hero__visual { display: none !important; }
  .hero__inner  { gap: 1.5rem; }
}

/* ── DARK MODE ENHANCEMENTS ──────────────────────────────────────── */
[data-theme="dark"] .feature-card {
  background: linear-gradient(145deg,#1e293b 0%,#1a2642 100%);
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .plot-card {
  background: #1e293b;
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .step-item,
[data-theme="dark"] .faq-item,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .contact-quick-card,
[data-theme="dark"] .about-stat-card,
[data-theme="dark"] .value-card {
  background: #1e293b;
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .trust-bar {
  background: #111827;
  border-bottom-color: rgba(255,255,255,.06);
}
[data-theme="dark"] .faq-question { color: #f1f5f9; }
[data-theme="dark"] .faq-question:hover { background: rgba(255,255,255,.04); }
[data-theme="dark"] .wb-form,
[data-theme="dark"] .emi-input-card,
[data-theme="dark"] .emi-results-card,
[data-theme="dark"] .roi-calc-card {
  background: #1e293b;
  border-color: rgba(255,255,255,.08);
}
[data-theme="dark"] .form-control {
  background: #111827;
  border-color: rgba(255,255,255,.12);
  color: #f1f5f9;
}
[data-theme="dark"] .form-control:focus { border-color: var(--wb-primary); background: #1a2746; }
[data-theme="dark"] .filter-bar {
  background: #1e293b;
  border-color: rgba(255,255,255,.07);
}
[data-theme="dark"] .filter-bar select,
[data-theme="dark"] .filter-bar input {
  background: #111827;
  border-color: rgba(255,255,255,.1);
  color: #f1f5f9;
}
[data-theme="dark"] .newsletter-section {
  background: linear-gradient(135deg,#1e1b4b 0%,#312e81 50%,#1d3a8f 100%);
}

/* ── ACCESSIBILITY ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero__orb, .social-proof-strip__inner, .hero__badge,
  .animate-wb, .btn-premium::after, .hero h1 em,
  .orbDrift, .proofScroll, .shimmerBadge, .textShine,
  .cardShimmer, .ringPulse, .orbDrift { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .faq-answer { transition: max-height .15s ease, padding .15s ease; }
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
.btn-premium:focus-visible,
.city-pill:focus-visible,
.faq-question:focus-visible,
.wb-footer__links a:focus-visible,
.contact-quick-card a:focus-visible {
  outline: 3px solid var(--wb-primary);
  outline-offset: 3px;
}

/* ── PRINT ───────────────────────────────────────────────────────── */
@media print {
  .wb-nav, .wa-float, .back-to-top, .announcement-bar,
  .social-proof-strip, .newsletter-section, .cta-banner { display: none !important; }
  .hero { min-height: auto; padding: 2rem 0; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NATIVE FOOTER v8
   ══════════════════════════════════════════════════════════════════ */

/* ── Address line ────────────────────────────────────────────────── */
.footer-address {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  line-height: 1.55;
  margin-bottom: .85rem;
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.footer-address svg { flex-shrink: 0; margin-top: .18rem; }

/* ── Column accordion toggle — desktop: looks like plain <h4> ────── */
.wb-footer__col-toggle {
  width: 100%;
  background: none;
  border: none;
  padding: 0 0 1rem;
  margin: 0;
  color: #fff;
  font-size: .9rem;
  font-weight: 600;
  font-family: inherit;
  text-align: left;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.4;
}
.wb-footer__col-chevron { display: none; }

/* ── Mobile contact CTA strip — hidden on desktop ───────────────── */
.wb-ftr-cta { display: none; }

/* ══ MOBILE (≤ 767px) ══════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* Footer outer padding */
  .wb-footer { padding: 0 0 0; }
  .wb-footer__grid { margin-bottom: 0; }

  /* ── Contact CTA strip ─────────────────────────────────────────── */
  .wb-ftr-cta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: .6rem;
    padding: 1.5rem 0 1.35rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 1.5rem;
  }
  .wb-ftr-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .38rem;
    padding: .9rem .5rem;
    border-radius: 14px;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    min-height: 70px;
    transition: transform .18s var(--wb-ease-spring, cubic-bezier(.34,1.56,.64,1)),
                box-shadow .18s;
    -webkit-tap-highlight-color: transparent;
  }
  .wb-ftr-cta__btn:active { transform: scale(.93) !important; }

  .wb-ftr-cta__btn--call {
    background: rgba(22,163,74,.14);
    border: 1px solid rgba(22,163,74,.28);
    color: #4ade80;
  }
  .wb-ftr-cta__btn--call:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(22,163,74,.22);
  }
  .wb-ftr-cta__btn--mail {
    background: rgba(37,99,235,.14);
    border: 1px solid rgba(37,99,235,.28);
    color: #93c5fd;
  }
  .wb-ftr-cta__btn--mail:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,99,235,.22);
  }
  .wb-ftr-cta__btn--wa {
    background: rgba(37,211,102,.11);
    border: 1px solid rgba(37,211,102,.24);
    color: #25d366;
  }
  .wb-ftr-cta__btn--wa:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(37,211,102,.18);
  }

  /* ── Brand column ──────────────────────────────────────────────── */
  .wb-ftr-brand {
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: .15rem;
  }
  .wb-footer__tagline { font-size: .88rem; margin-bottom: 1rem; }
  .wb-footer__social {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
  }
  .wb-footer__social a { width: 44px; height: 44px; border-radius: 12px; }

  /* ── Accordion column toggle ───────────────────────────────────── */
  .wb-footer__col-toggle {
    cursor: pointer;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: .95rem;
    min-height: 52px;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
  }
  .wb-footer__col-toggle:hover { color: rgba(255,255,255,.85); }
  .wb-footer__col-toggle:focus-visible {
    outline: 2px solid rgba(37,99,235,.7);
    outline-offset: 2px;
    border-radius: 4px;
  }
  .wb-footer__col-toggle[aria-expanded="true"] {
    color: #fff;
    border-bottom-color: rgba(255,255,255,.03);
  }
  .wb-footer__col-chevron {
    display: block;
    opacity: .5;
    flex-shrink: 0;
    transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .18s;
  }
  .wb-footer__col-toggle[aria-expanded="true"] .wb-footer__col-chevron {
    transform: rotate(180deg);
    opacity: .85;
  }

  /* ── Links body (JS controls max-height inline) ────────────────── */
  .wb-footer__col-body { overflow: hidden; }
  .wb-footer__links li {
    border-bottom: 1px solid rgba(255,255,255,.04);
  }
  .wb-footer__links li:last-child { border-bottom: none; }
  .wb-footer__links a {
    padding: .8rem 0;
    min-height: 48px;
    font-size: .9rem;
  }

  /* ── Bottom bar ────────────────────────────────────────────────── */
  .wb-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: .55rem;
    padding-top: 1.25rem;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 1rem));
    margin-top: 1.25rem;
    border-top: 1px solid rgba(255,255,255,.07);
  }
  .footer-bottom-trust { justify-content: center; flex-wrap: wrap; gap: .65rem; }
  .wb-footer__disclaimer { text-align: center; padding-bottom: .5rem; }
}

/* ── 360px ultra-narrow ─────────────────────────────────────────── */
@media (max-width: 360px) {
  .wb-ftr-cta { gap: .45rem; }
  .wb-ftr-cta__btn { padding: .75rem .35rem; min-height: 62px; font-size: .7rem; }
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE NATIVE v8 — Hero orbs + 360px narrow fixes
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  /* Home hero uses .hero__orb-1 / .hero__orb-2 classes (not :first/:last-child)
     — the existing 640px block covers page-hero only, not these class-based orbs */
  .hero__orb-1 {
    width: 200px !important;
    height: 200px !important;
  }
  .hero__orb-2 {
    width: 160px !important;
    height: 160px !important;
  }

  /* page-hero last-child orb was absent from the existing 640px block */
  .page-hero .hero__orb:last-child {
    width: 110px !important;
    height: 110px !important;
  }
}

@media (max-width: 360px) {
  /* Ultra-narrow: shrink orbs further so they don't bleed behind content */
  .hero__orb-1 { width: 130px !important; height: 130px !important; }
  .hero__orb-2 { width: 100px !important; height: 100px !important; }

  /* About stats: single column on 360px phones */
  .about-stats-grid { grid-template-columns: 1fr !important; }

  /* Property highlights: single column */
  .prop-highlights { grid-template-columns: 1fr !important; }

  /* Hero CTAs: stack vertically */
  .hero__ctas { flex-direction: column; align-items: stretch; }
  .hero__ctas .btn,
  .hero__ctas .btn-premium { width: 100%; justify-content: center; }
}

/* ── MOBILE NATIVE FOOTER NAV LINKS v8 ──────────────────────────────
   wb-flink: icon-bubble + label + chevron native-app row
   ─────────────────────────────────────────────────────────────────── */

/* Desktop: hide all mobile-only chrome */
.wb-flink__icon,
.wb-flink__arr,
.wb-footer__col-sec-icon { display: none; }

@media (max-width: 767px) {

  /* Section icon inside toggle heading */
  .wb-footer__col-sec-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 6px;
    margin-right: .4rem; flex-shrink: 0;
  }
  .wb-footer__col-title { display: flex; align-items: center; }

  /* Section accent colors for sec-icon */
  .wb-footer__col-toggle--platform .wb-footer__col-sec-icon { background: rgba(37,99,235,.2); color: #93c5fd; }
  .wb-footer__col-toggle--company  .wb-footer__col-sec-icon { background: rgba(124,58,237,.2); color: #c4b5fd; }
  .wb-footer__col-toggle--legal    .wb-footer__col-sec-icon { background: rgba(5,150,105,.2);  color: #6ee7b7; }

  /* Active-section left-border accent pill */
  .wb-footer__col { position: relative; }
  .wb-footer__col-toggle[aria-expanded="true"]::before {
    content: '';
    position: absolute; left: 0; top: 20%; bottom: 20%;
    width: 3px; border-radius: 2px;
  }
  .wb-footer__col-toggle--platform[aria-expanded="true"]::before { background: #2563eb; }
  .wb-footer__col-toggle--company[aria-expanded="true"]::before  { background: #7c3aed; }
  .wb-footer__col-toggle--legal[aria-expanded="true"]::before    { background: #059669; }

  /* wb-flink row */
  .wb-flink {
    display: flex; align-items: center; gap: .65rem;
    padding: .75rem .5rem; margin: 0 -.5rem;
    border-radius: 10px; color: rgba(255,255,255,.6);
    text-decoration: none; min-height: 52px;
    transition: background .15s, color .15s, transform .12s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .wb-flink:hover  { background: rgba(255,255,255,.05); color: rgba(255,255,255,.9); }
  .wb-flink:active { background: rgba(255,255,255,.09); transform: scale(.98); }

  /* Icon bubble */
  .wb-flink__icon {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    background: rgba(255,255,255,.07); color: rgba(255,255,255,.65);
    transition: background .15s;
  }

  /* Label */
  .wb-flink__label { flex: 1; font-size: .9rem; font-weight: 500; line-height: 1.3; }

  /* Chevron arrow */
  .wb-flink__arr {
    display: block; opacity: .3; flex-shrink: 0;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1), opacity .15s;
  }
  .wb-flink:hover       .wb-flink__arr,
  .wb-flink:focus-visible .wb-flink__arr { transform: translateX(3px); opacity: .7; }

  .wb-flink:focus-visible { outline: 2px solid rgba(37,99,235,.6); outline-offset: 1px; }

  /* Section-colored icon bubbles */
  .wb-footer__col-toggle--platform ~ .wb-footer__col-body .wb-flink__icon { background: rgba(37,99,235,.12); color: #93c5fd; }
  .wb-footer__col-toggle--company  ~ .wb-footer__col-body .wb-flink__icon { background: rgba(124,58,237,.12); color: #c4b5fd; }
  .wb-footer__col-toggle--legal    ~ .wb-footer__col-body .wb-flink__icon { background: rgba(5,150,105,.12);  color: #6ee7b7; }

  /* Remove per-item divider; wb-flink press state handles separation */
  .wb-footer__links li { border-bottom: none; }
}

@media (max-width: 360px) {
  .wb-flink { padding: .65rem .4rem; min-height: 48px; gap: .5rem; }
  .wb-flink__icon { width: 30px; height: 30px; border-radius: 8px; }
  .wb-flink__label { font-size: .85rem; }
}

/* ── Mobile bottom navigation bar ─────────────────────────────── */
.wb-bnav { display: none; }

@media (max-width: 860px) {
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  .wb-bnav {
    display: flex;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 900;
    background: var(--wb-glass-bg);
    backdrop-filter: var(--wb-glass-blur);
    -webkit-backdrop-filter: var(--wb-glass-blur);
    border-top: 1px solid var(--wb-border);
    padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -4px 32px rgba(15,23,42,.1);
    gap: .25rem;
  }
  [data-theme="dark"] .wb-bnav {
    background: rgba(15,23,42,.94);
    border-top-color: rgba(255,255,255,.07);
    box-shadow: 0 -4px 32px rgba(0,0,0,.4);
  }

  .wb-bnav__item {
    flex: 1;
    display: flex; flex-direction: column; align-items: center;
    gap: .18rem; padding: .38rem .25rem .28rem;
    color: var(--wb-muted); text-decoration: none;
    font-size: .62rem; font-weight: 600; letter-spacing: .02em;
    border-radius: 10px;
    transition: color .18s, transform .12s;
    -webkit-tap-highlight-color: transparent;
    position: relative;
  }
  .wb-bnav__item:hover,
  .wb-bnav__item:focus-visible { text-decoration: none; color: var(--wb-primary); }
  .wb-bnav__item:active { transform: scale(.9); }

  .wb-bnav__icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 26px; border-radius: 9px;
    position: relative;
    transition: background .18s;
  }
  .wb-bnav__item.active { color: var(--wb-primary); }
  .wb-bnav__item.active .wb-bnav__icon {
    background: rgba(37,99,235,.12);
  }
  .wb-bnav__item.active svg { stroke: var(--wb-primary); }

  /* Center-featured "Browse" button */
  .wb-bnav__item--cta .wb-bnav__icon {
    background: linear-gradient(135deg, var(--wb-primary), #7c3aed);
    border-radius: 14px; width: 44px; height: 32px;
    box-shadow: 0 4px 14px rgba(37,99,235,.4);
    margin-top: -10px;
  }
  .wb-bnav__item--cta svg { stroke: #fff !important; }
  .wb-bnav__item--cta { color: var(--wb-primary); }

  /* Notification dot */
  .wb-bnav__dot {
    position: absolute; top: 3px; right: 2px;
    width: 7px; height: 7px; border-radius: 50%;
    background: #ef4444; border: 1.5px solid var(--wb-card);
  }
}

/* ── Enhanced hero stat cards ──────────────────────────────────── */
.hero__stat-card {
  position: relative; overflow: hidden;
}
.hero__stat-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 60%);
  pointer-events: none;
}
.hero__stat-card strong {
  display: block;
  background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.75));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Enhanced plot card placeholder ──────────────────────────────── */
.plot-card__img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 3rem;
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #7c3aed 100%);
  position: relative; overflow: hidden;
}
.plot-card__img-placeholder::after {
  content: '';
  position: absolute; top: -40%; left: -60%; width: 120%; height: 50%;
  background: rgba(255,255,255,.07);
  transform: rotate(-25deg);
  pointer-events: none;
}

/* Shimmer on hover */
.plot-card:hover .plot-card__img-placeholder::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  animation: shimmer .8s ease forwards;
}
@keyframes shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* ── Gradient accent on section headers ───────────────────────── */
.badge-label {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.08));
  border: 1px solid rgba(37,99,235,.15);
}

/* ── Enhanced feature cards ───────────────────────────────────── */
.feature-card {
  position: relative; overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.25,.46,.45,.94);
  border-radius: 2px 2px 0 0;
}
.feature-card:hover::before { transform: scaleX(1); }

/* ── Improved social proof strip ─────────────────────────────── */
.social-proof-strip__dot {
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}

/* ── Plot card price highlight ───────────────────────────────── */
.plot-card__price {
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
  border-radius: var(--wb-radius-sm);
  padding: .5rem .65rem;
  border: 1px solid rgba(37,99,235,.1);
  margin-top: .5rem;
}

/* ── Newsletter section glow ─────────────────────────────────── */
.newsletter-wrap {
  position: relative;
}
.newsletter-wrap::before {
  content: '';
  position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(37,99,235,.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Step items connector line ───────────────────────────────── */
.steps-grid {
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute; top: 28px; left: calc(12.5% + 28px); right: calc(12.5% + 28px);
  height: 2px;
  background: linear-gradient(90deg, var(--wb-primary), #7c3aed, var(--wb-accent));
  opacity: .25;
}
@media (max-width: 768px) { .steps-grid::before { display: none; } }

/* ── Invest metrics enhanced ─────────────────────────────────── */
.invest-metric strong {
  background: linear-gradient(135deg, #fff 20%, rgba(255,255,255,.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── CTA banner accent ───────────────────────────────────────── */
.cta-banner {
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '';
  position: absolute; top: -120px; right: -80px;
  width: 400px; height: 400px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-banner::after {
  content: '';
  position: absolute; bottom: -100px; left: -60px;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.15) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Install App button in the public website nav ───────────────── */
.wb-nav__install {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem;
  background: linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06));
  border: 1px solid rgba(37,99,235,.32);
  border-radius: 99px;
  color: #2563eb;
  font-size: .78rem; font-weight: 700;
  cursor: pointer;
  transition: transform .12s, box-shadow .25s, border-color .15s, background .2s, color .2s;
  position: relative; overflow: hidden;
  white-space: nowrap;
  animation: wb-install-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
.wb-nav__install[hidden] { display: none !important; }
.wb-nav__install::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: wb-install-shimmer 4s ease-in-out infinite;
  pointer-events: none;
}
.wb-nav__install svg, .wb-nav__install span { position: relative; z-index: 1; }
.wb-nav__install:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(37,99,235,.32);
  transform: translateY(-1px);
}
.wb-nav__install:active { transform: scale(.97); }

@keyframes wb-install-pop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes wb-install-shimmer {
  0%, 88%, 100% { transform: translateX(-100%); }
  92%           { transform: translateX(100%); }
}

[data-theme="dark"] .wb-nav__install {
  background: linear-gradient(135deg, rgba(37,99,235,.18), rgba(124,58,237,.12));
  border-color: rgba(37,99,235,.4);
  color: #93c5fd;
}
[data-theme="dark"] .wb-nav__install:hover {
  color: #fff;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Mobile — hide label, keep icon */
@media (max-width: 640px) {
  .wb-nav__install { padding: .42rem .55rem; }
  .wb-nav__install-label { display: none; }
}

/* ── Touch-device: raise all interactive nav elements to 44px ─────── */
@media (hover:none) and (pointer:coarse) {
  .wb-nav__install {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
  }
  .wb-nav__theme-btn { min-height: 44px; touch-action: manipulation; }
  .wb-bnav__item { min-height: 44px; touch-action: manipulation; }
  .view-toggle-btn, .view-toggle__btn {
    width: 44px; height: 44px;
    min-width: 44px; min-height: 44px;
    touch-action: manipulation;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wb-nav__install { animation: none; }
  .wb-nav__install::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ v2 — Search box, Category tabs, Number badges, Empty state
   ═══════════════════════════════════════════════════════════════════ */

/* Search */
.faq-search-wrap {
  max-width: 480px;
  margin: 0 auto 1.5rem;
}
.faq-search-box {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 40px;
  background: var(--wb-card);
  transition: border-color .2s, box-shadow .2s;
}
.faq-search-box:focus-within {
  border-color: var(--wb-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.faq-search-icon { flex-shrink: 0; color: var(--wb-muted); }
.faq-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .9rem;
  color: var(--wb-dark);
  outline: none;
  min-width: 0;
}
.faq-search-input::placeholder { color: var(--wb-muted); }
.faq-search-clear {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--wb-muted);
  padding: .15rem .35rem;
  border-radius: 4px;
  transition: color .15s, background .15s;
  line-height: 1;
}
.faq-search-clear:hover { color: var(--wb-dark); background: rgba(0,0,0,.06); }
/* Compact variant on support page */
.faq-search-box--sm { padding: .45rem .8rem; }
.faq-search-box--sm .faq-search-input { font-size: .82rem; }

/* Category tabs */
.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.faq-tabs--sm { justify-content: flex-start; }
.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .9rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 99px;
  background: var(--wb-card);
  font-size: .8rem;
  font-weight: 600;
  color: var(--wb-mid);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
  white-space: nowrap;
}
.faq-tab:hover { border-color: var(--wb-primary); color: var(--wb-primary); background: rgba(37,99,235,.04); }
.faq-tab.is-active { border-color: var(--wb-primary); background: var(--wb-primary); color: #fff; }
.faq-tab__count {
  font-size: .68rem;
  font-weight: 700;
  background: rgba(0,0,0,.12);
  border-radius: 99px;
  padding: .05rem .38rem;
  line-height: 1.6;
}
.faq-tab.is-active .faq-tab__count { background: rgba(255,255,255,.25); }

/* Question layout with num badge + text span */
.faq-question__num {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(37,99,235,.1);
  color: var(--wb-primary);
  font-size: .72rem;
  font-weight: 800;
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}
.faq-item.open .faq-question__num { background: var(--wb-primary); color: #fff; }
.faq-question__text { flex: 1; }

/* Empty state */
.faq-empty {
  text-align: center;
  padding: 3rem 1rem 2rem;
  color: var(--wb-muted);
}
.faq-empty__icon { font-size: 2.5rem; margin-bottom: .75rem; }
.faq-empty p { font-size: .95rem; margin: 0; }
.faq-empty__reset {
  background: none; border: none;
  color: var(--wb-primary); font-weight: 700;
  cursor: pointer; font-size: inherit;
  text-decoration: underline; padding: 0;
}

/* Dark mode */
[data-theme="dark"] .faq-search-box { background: var(--wb-card); border-color: var(--wb-border); }
[data-theme="dark"] .faq-search-input { color: var(--wb-dark); }
[data-theme="dark"] .faq-tab { background: var(--wb-card); }
[data-theme="dark"] .faq-question__num { background: rgba(37,99,235,.2); }

/* Mobile */
@media (max-width: 480px) {
  .faq-search-wrap { margin-bottom: 1.1rem; }
  .faq-tabs { gap: .3rem; }
  .faq-tab { font-size: .74rem; padding: .28rem .7rem; }
  .faq-tab__count { font-size: .62rem; padding: .02rem .3rem; }
  .faq-question__num { width: 20px; height: 20px; font-size: .65rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   FAQ SMART FEATURES — Highlight · Helpful · Share · Hash · Sticky
   ═══════════════════════════════════════════════════════════════════ */

/* section-sub (subtitle under section <h2>) */
.section-sub {
  color: var(--wb-muted);
  font-size: 1rem;
  margin-top: .35rem;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Sticky category tabs */
.faq-tabs {
  position: sticky;
  top: 68px;
  z-index: 8;
  background: var(--wb-light);
  padding-top: .6rem;
  padding-bottom: .6rem;
  margin-left: -1.5rem;
  margin-right: -1.5rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.faq-tabs--sm { position: static; background: none; margin: 0; padding: 0; }

/* max-height 900px set on source rule at ~line 5880 to accommodate injected widgets */

/* Search term highlight */
.faq-hl {
  background: rgba(250,204,21,.45);
  color: inherit;
  border-radius: 2px;
  padding: 0 .1em;
  font-style: normal;
}
[data-theme="dark"] .faq-hl { background: rgba(250,204,21,.3); }

/* "Was this helpful?" bar */
.faq-helpful {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--wb-border);
  font-size: .82rem;
}
.faq-helpful__label { color: var(--wb-muted); font-weight: 500; }
.faq-helpful__btn {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem .7rem;
  border: 1.5px solid var(--wb-border);
  border-radius: 99px;
  background: var(--wb-card);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .1s;
  color: var(--wb-mid);
}
.faq-helpful__btn:hover { border-color: var(--wb-primary); color: var(--wb-primary); background: rgba(37,99,235,.05); }
.faq-helpful__btn:active { transform: scale(.94); }
.faq-helpful__thanks {
  font-size: .82rem;
  color: #059669;
  font-weight: 600;
}
[data-theme="dark"] .faq-helpful__thanks { color: #34d399; }

/* Per-FAQ share-link button */
.faq-share-btn {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .85rem;
  padding: .22rem .6rem;
  border: 1px solid var(--wb-border);
  border-radius: 6px;
  background: none;
  font-size: .75rem;
  color: var(--wb-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  float: right;
}
.faq-share-btn:hover { color: var(--wb-primary); border-color: var(--wb-primary); }
/* Clear the float after answer content */
.faq-answer::after { content: ''; display: table; clear: both; }

/* Print: expand all FAQ answers */
@media print {
  .faq-item .faq-answer {
    max-height: none !important;
    opacity: 1 !important;
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }
  .faq-helpful, .faq-share-btn, .faq-search-wrap, .faq-tabs { display: none !important; }
}

/* Mobile: sticky tabs at top (accounts for mobile nav) */
@media (max-width: 767px) {
  .faq-tabs { top: 58px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   TOUCH-SCROLL — Momentum scrolling for all website scrollable regions
   ═══════════════════════════════════════════════════════════════════════ */

/* Horizontal scrollers */
.testimonials-scroller,
.prop-gallery-thumbstrip,
.prop-breadcrumb,
.wb-filter-bar,
.wb-table-scroll,
.emi-plan-table-wrap,
.city-pills {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Vertical scrollers */
.wb-nav__mobile-links,
.modal-body,
.modal-dialog,
.prop-addon-list {
  -webkit-overflow-scrolling: touch;
}

/* Inline-style fallback on website pages */
div[style*="overflow-x:auto"],
div[style*="overflow-x: auto"] {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITE MOBILE-NATIVE FINALE — A11y, Performance, Native Polish
   ═══════════════════════════════════════════════════════════════════════ */

/* Tap highlight reset for public-site interactives */
.wb-nav a, .wb-bnav__item, .wb-cta, .wb-btn,
.testimonials-card, .wb-feature, .wb-card,
.city-pill, .property-card, .property-card a,
.faq-tab, .faq-item__q, .hero__search button {
  -webkit-tap-highlight-color: transparent;
}

/* Active-state touch feedback */
@media (hover:none) and (pointer:coarse) {
  .wb-cta:active, .wb-btn:active,
  .property-card:active, .testimonials-card:active,
  .city-pill:active, .faq-tab:active {
    transform: scale(.98);
    transition: transform .08s ease-out;
  }
}

/* Prevent text selection on UI chrome */
.wb-nav, .wb-bnav, .hero__search button,
.wb-cta, .city-pill, .faq-tab {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Accent-color for site form controls */
input[type="checkbox"],
input[type="radio"],
input[type="range"],
progress {
  accent-color: var(--wb-primary, #2563eb);
}

/* Image defaults */
.property-card img, .hero img, .wb-card img,
.testimonials-card img, .gallery img {
  max-width: 100%;
  height: auto;
}

/* Performance: defer offscreen sections */
.wb-section:nth-child(n+5),
.testimonials-section,
.faq-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 600px;
}

/* High-contrast support for public site */
@media (prefers-contrast: high) {
  .wb-cta, .wb-btn, .property-card, .testimonials-card,
  .faq-item, .wb-card, .city-pill {
    border-width: 2px !important;
  }
  :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

/* Reduced motion - extend to all website animations */
@media (prefers-reduced-motion: reduce) {
  .testimonials-scroller, .city-pills, .wb-filter-bar,
  .property-card, .hero__search, .wb-cta {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* Print optimization for property pages */
@media print {
  .wb-nav, .wb-bnav, .hero__search, .wb-cta,
  .testimonials-section, .faq-section, .wb-footer,
  .property-card .gallery-controls, .ann-bar {
    display: none !important;
  }
  body { background: #fff !important; color: #000 !important; }
  .property-card, .wb-card { break-inside: avoid; box-shadow: none !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WEBSITE v14 — Premium Nav + Unified UI for Public Pages
   Locks horizontal scroll, polishes mobile nav, unifies buttons.
   ═══════════════════════════════════════════════════════════════════════ */

/* Note: page-level horizontal scroll is already prevented by html, body
   { overflow-x: hidden } in app.css and the base reset. Do not redeclare
   on the body — and never put overflow-x:hidden on a vertical scroll
   container, as it can break iOS momentum scrolling. */

/* Premium polish for mobile bottom nav */
@media (max-width: 767px) {
  .wb-bnav {
    margin: 0 .5rem;
    margin-bottom: env(safe-area-inset-bottom, 0);
    border-radius: 22px 22px 0 0;
    box-shadow:
      0 -2px 0 rgba(255,255,255,.6) inset,
      0 -8px 28px rgba(13,27,46,.08),
      0 -16px 40px -8px rgba(37,99,235,.06);
    animation: wbBnSlideUp .4s cubic-bezier(.34,1.56,.64,1) both;
  }
  @keyframes wbBnSlideUp {
    0%   { transform: translateY(110%); opacity: 0; }
    60%  { transform: translateY(-3px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
  }
  .wb-bnav__item {
    transition: color .2s, transform .15s;
    border-radius: 14px;
  }
  .wb-bnav__item:active {
    transform: scale(.92);
  }
}

/* Premium scroll-state for nav */
.wb-nav {
  transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
}
.wb-nav.is-scrolled {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 4px 16px -4px rgba(13,27,46,.06);
}

/* Unified button system on website */
.wb-cta, .wb-btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .005em;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
.wb-cta:hover, .wb-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.3),
              0 8px 20px -6px rgba(124,58,237,.2);
}
.wb-cta:active, .wb-btn:active {
  transform: translateY(0) scale(.98);
}

/* Property cards: unified premium polish */
.property-card {
  border-radius: 16px;
  transition: box-shadow .25s ease, transform .2s ease;
}
@media (hover: hover) {
  .property-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px -4px rgba(13,27,46,.12),
                0 16px 40px -8px rgba(37,99,235,.08);
  }
}
.property-card:active { transform: scale(.99); }

/* City pills: smooth scale on tap */
.city-pill {
  transition: background .2s, color .2s, transform .12s, box-shadow .2s;
  border-radius: 999px;
}
.city-pill:active { transform: scale(.94); }
@media (hover: hover) {
  .city-pill:hover {
    box-shadow: 0 4px 12px -2px rgba(37,99,235,.15);
  }
}

/* Form inputs unified rounded radius */
.wb-input, .wb-select, .hero__search input,
input[type="text"], input[type="email"], input[type="search"], input[type="tel"] {
  border-radius: 12px;
  transition: border-color .2s, box-shadow .2s;
}
.wb-input:focus, .wb-select:focus, .hero__search input:focus {
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wb-bnav { animation: none !important; }
  .property-card, .city-pill, .wb-cta, .wb-btn {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EMI TIPS & KNOWLEDGE HUB — premium info section for the website
   ═══════════════════════════════════════════════════════════════════════ */
.emi-tips-section {
  position: relative;
}
.emi-tips-section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: min(900px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.4), transparent);
}

/* ── 6-card actionable tips grid ───────────────────────────────────── */
.emi-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.emi-tip-card {
  position: relative;
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 18px;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.36,.64,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.emi-tip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tip-c, #2563eb), color-mix(in srgb, var(--tip-c, #2563eb) 60%, transparent));
}
.emi-tip-card::after {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--tip-c, #2563eb) 14%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  opacity: .8;
  transition: transform .35s ease;
}
.emi-tip-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--tip-c, #2563eb) 35%, var(--wb-border));
  box-shadow:
    0 12px 28px -6px rgba(13,27,46,.08),
    0 24px 48px -12px color-mix(in srgb, var(--tip-c, #2563eb) 18%, transparent);
}
.emi-tip-card:hover::after {
  transform: scale(1.3);
}

.emi-tip-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .55rem; margin-bottom: .9rem;
  position: relative; z-index: 1;
}
.emi-tip-card__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--tip-c, #2563eb) 12%, transparent);
  color: var(--tip-c, #2563eb);
  font-size: 1.5rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px -2px color-mix(in srgb, var(--tip-c, #2563eb) 25%, transparent);
}
.emi-tip-card__pill {
  font-size: .65rem; font-weight: 800;
  padding: .25rem .6rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--tip-c, #2563eb) 12%, transparent);
  color: var(--tip-c, #2563eb);
  border: 1px solid color-mix(in srgb, var(--tip-c, #2563eb) 25%, transparent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.emi-tip-card h3 {
  margin: 0 0 .55rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.01em;
  position: relative; z-index: 1;
  color: var(--wb-text, #111827);
}
.emi-tip-card p {
  margin: 0 0 1rem;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--wb-text-muted, #6b7280);
  position: relative; z-index: 1;
}

.emi-tip-card__metric {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px dashed color-mix(in srgb, var(--tip-c, #2563eb) 20%, transparent);
  position: relative; z-index: 1;
  display: flex; align-items: baseline; gap: .55rem;
  flex-wrap: wrap;
}
.emi-tip-card__metric-val {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--tip-c, #2563eb);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.emi-tip-card__metric-lbl {
  font-size: .72rem;
  color: var(--wb-text-muted, #6b7280);
  font-weight: 500;
  flex: 1;
}

/* ── Knowledge Hub (FAQ-like deep info) ───────────────────────────── */
.emi-knowledge {
  background: linear-gradient(135deg,
    rgba(37,99,235,.04),
    rgba(124,58,237,.03));
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  margin-bottom: 2rem;
  position: relative; overflow: hidden;
}
.emi-knowledge::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.10), transparent 70%);
  pointer-events: none;
}
.emi-knowledge__hd {
  text-align: center;
  margin-bottom: 1.5rem;
  position: relative; z-index: 1;
}
.emi-knowledge__icon {
  display: inline-grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff; font-size: 1.5rem;
  margin-bottom: .85rem;
  box-shadow: 0 6px 18px -2px rgba(124,58,237,.35);
}
.emi-knowledge__hd h3 {
  margin: 0 0 .35rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.emi-knowledge__hd p {
  margin: 0;
  font-size: .9rem;
  color: var(--wb-text-muted, #6b7280);
}

.emi-knowledge__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: .75rem;
  position: relative; z-index: 1;
}

/* Premium accordion item */
.emi-faq {
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.emi-faq[open] {
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 4px 14px -4px rgba(37,99,235,.15);
}
.emi-faq summary {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 1rem 1.1rem;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s;
}
.emi-faq summary::-webkit-details-marker { display: none; }
.emi-faq summary::marker { content: ''; }
.emi-faq summary:hover {
  background: rgba(37,99,235,.03);
}
.emi-faq__icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(37,99,235,.08);
  font-size: 1rem;
  flex-shrink: 0;
}
.emi-faq__q {
  flex: 1;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--wb-text, #111827);
  line-height: 1.35;
}
.emi-faq__chev {
  font-size: 1.35rem;
  font-weight: 300;
  color: var(--wb-text-muted, #6b7280);
  transition: transform .25s cubic-bezier(.34,1.36,.64,1), color .15s;
  flex-shrink: 0;
  line-height: 1;
}
.emi-faq[open] .emi-faq__chev {
  transform: rotate(90deg);
  color: #2563eb;
}
.emi-faq[open] .emi-faq__icon {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
}

.emi-faq__a {
  padding: 0 1.1rem 1.1rem 4.05rem;
  font-size: .85rem;
  line-height: 1.65;
  color: var(--wb-text-muted, #6b7280);
  animation: emiFaqSlide .25s ease;
}
.emi-faq__a p { margin: 0 0 .6rem; }
.emi-faq__a p:last-child { margin-bottom: 0; }
.emi-faq__a strong {
  color: var(--wb-text, #111827);
  font-weight: 700;
}
.emi-faq__a ul,
.emi-faq__a ol {
  margin: .35rem 0 .65rem;
  padding-left: 1.2rem;
}
.emi-faq__a li {
  margin-bottom: .25rem;
}
@keyframes emiFaqSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom CTA strip ───────────────────────────────────────────── */
.emi-tips-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 22px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 24px -4px rgba(37,99,235,.35),
    0 16px 48px -8px rgba(124,58,237,.25);
}
.emi-tips-cta::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 60%);
  pointer-events: none;
}
.emi-tips-cta__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
  animation: emiTipsCtaBounce 3s ease-in-out infinite;
}
@keyframes emiTipsCtaBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.emi-tips-cta__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.emi-tips-cta__body h3 {
  margin: 0 0 .35rem;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.emi-tips-cta__body p {
  margin: 0;
  font-size: .92rem;
  opacity: .92;
  line-height: 1.5;
}
.emi-tips-cta .wb-cta {
  flex-shrink: 0;
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: relative; z-index: 1;
}
.emi-tips-cta .wb-cta:hover {
  background: rgba(255,255,255,.28);
  transform: translateY(-2px);
}

/* ── Mobile responsive ──────────────────────────────────────────── */
@media (max-width: 720px) {
  .emi-tips-grid { gap: .85rem; }
  .emi-tip-card { padding: 1.25rem 1rem 1rem; }
  .emi-tip-card__icon { width: 40px; height: 40px; font-size: 1.25rem; border-radius: 12px; }
  .emi-tip-card h3 { font-size: 1rem; }
  .emi-tip-card p { font-size: .82rem; }
  .emi-tip-card__metric-val { font-size: 1.1rem; }

  .emi-knowledge { padding: 1.25rem 1rem; border-radius: 16px; }
  .emi-knowledge__hd h3 { font-size: 1.2rem; }
  .emi-knowledge__icon { width: 48px; height: 48px; font-size: 1.25rem; }
  .emi-faq summary { padding: .85rem; gap: .5rem; }
  .emi-faq__icon { width: 28px; height: 28px; font-size: .9rem; }
  .emi-faq__q { font-size: .85rem; }
  .emi-faq__a { padding: 0 .85rem 1rem 3.45rem; font-size: .82rem; }

  .emi-tips-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    gap: 1rem;
  }
  .emi-tips-cta__icon { font-size: 2rem; }
  .emi-tips-cta__body h3 { font-size: 1.15rem; }
  .emi-tips-cta__body p { font-size: .85rem; }
  .emi-tips-cta .wb-cta { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .emi-tips-grid { grid-template-columns: 1fr; }
  .emi-knowledge__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .emi-tip-card,
  .emi-tip-card::after,
  .emi-tips-cta__icon {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   CITIES COVERAGE — Tamil Nadu × Maharashtra showcase
   ═══════════════════════════════════════════════════════════════════════ */

/* Combined coverage stats strip */
.coverage-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .85rem;
  margin-bottom: 2rem;
}
.coverage-stat {
  text-align: center;
  padding: 1.1rem 1rem;
  border-radius: 16px;
  background: var(--wb-light, #f8fafc);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.coverage-stat:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 8px 20px -4px rgba(13,27,46,.1);
}
.coverage-stat__icon {
  font-size: 1.6rem;
  margin-bottom: .25rem;
}
.coverage-stat__val {
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.02em;
  color: var(--wb-text, #111827);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: .2rem;
}
.coverage-stat__lbl {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wb-text-muted, #6b7280);
}

/* Multi-state coverage grid (auto-fit by state count) */
.state-coverage-grid {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.state-coverage-grid--1up { grid-template-columns: minmax(0, 720px); justify-content: center; }
.state-coverage-grid--2up { grid-template-columns: repeat(2, 1fr); }
.state-coverage-grid--3up { grid-template-columns: repeat(3, 1fr); }
.state-coverage-grid--4up,
.state-coverage-grid--5up,
.state-coverage-grid--6up,
.state-coverage-grid--7up,
.state-coverage-grid--8up,
.state-coverage-grid--9up,
.state-coverage-grid--10up {
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
/* Tablet */
@media (max-width: 1100px) {
  .state-coverage-grid--3up { grid-template-columns: repeat(2, 1fr); }
  .state-coverage-grid--4up,
  .state-coverage-grid--5up,
  .state-coverage-grid--6up,
  .state-coverage-grid--7up,
  .state-coverage-grid--8up,
  .state-coverage-grid--9up,
  .state-coverage-grid--10up { grid-template-columns: repeat(2, 1fr); }
}
/* Mobile */
@media (max-width: 760px) {
  .state-coverage-grid,
  .state-coverage-grid--1up,
  .state-coverage-grid--2up,
  .state-coverage-grid--3up,
  .state-coverage-grid--4up,
  .state-coverage-grid--5up,
  .state-coverage-grid--6up,
  .state-coverage-grid--7up,
  .state-coverage-grid--8up,
  .state-coverage-grid--9up,
  .state-coverage-grid--10up { grid-template-columns: 1fr; }
}

/* Inline icon next to "South India · 30 cities" */
.state-card__icon-inline {
  font-size: .9rem;
  margin-right: .15rem;
  vertical-align: -1px;
}

/* Individual state card */
.state-card {
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 22px;
  padding: 1.5rem 1.4rem;
  position: relative;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.state-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 4px;
}
.state-card--tn::before {
  background: linear-gradient(90deg, #dc2626 0%, #f59e0b 50%, #16a34a 100%);
}
.state-card--mh::before {
  background: linear-gradient(90deg, #f59e0b 0%, #2563eb 50%, #7c3aed 100%);
}
.state-card::after {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .6;
}
.state-card--tn::after {
  background: radial-gradient(circle, rgba(245,158,11,.15), transparent 70%);
}
.state-card--mh::after {
  background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
}
.state-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 12px 28px -6px rgba(13,27,46,.10),
    0 24px 48px -12px rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.18);
}

/* Card header with flag + count */
.state-card__hd {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.1rem;
  position: relative; z-index: 1;
}
.state-card__flag {
  width: 56px; height: 38px;
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.1);
  flex-shrink: 0;
}
.state-card__flag-band { flex: 1; }
.state-card__flag-band--saffron { background: #FF9933; }
.state-card__flag-band--white   { background: #FFFFFF;
  position: relative;
}
.state-card__flag-band--white::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid #1e3a8a;
  background:
    radial-gradient(circle, transparent 35%, #1e3a8a 36%, #1e3a8a 38%, transparent 39%);
}
.state-card__flag-band--green { background: #138808; }

.state-card__title-block { flex: 1; min-width: 0; }
.state-card__title-block h3 {
  margin: 0 0 .15rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wb-text, #111827);
  line-height: 1.1;
}
.state-card__sub {
  font-size: .78rem;
  color: var(--wb-text-muted, #6b7280);
  font-weight: 500;
}
.state-card__count {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.04em;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Highlights block */
.state-card__highlights {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: 1.1rem;
  padding: .85rem 1rem;
  background: var(--wb-light, #f8fafc);
  border-radius: 12px;
  border-left: 3px solid;
  position: relative; z-index: 1;
}
.state-card--tn .state-card__highlights { border-left-color: #f59e0b; }
.state-card--mh .state-card__highlights { border-left-color: #2563eb; }

.state-card__highlight {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .85rem;
  color: var(--wb-text, #111827);
  line-height: 1.4;
}
.state-card__highlight-icon {
  font-size: 1.05rem;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.state-card__highlight strong {
  color: var(--wb-text, #111827);
  font-weight: 700;
}

/* Cities pill cloud */
.state-card__cities-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--wb-text-muted, #6b7280);
  margin-bottom: .55rem;
  position: relative; z-index: 1;
}
.state-card__cities {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: 1.25rem;
  position: relative; z-index: 1;
}

.state-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .35rem .7rem;
  border-radius: 99px;
  background: var(--wb-light, #f8fafc);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  color: var(--wb-text, #111827);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.state-pill:hover {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: transparent;
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(37,99,235,.3);
}
.state-pill--hot {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(220,38,38,.05));
  border-color: rgba(245,158,11,.35);
  color: #b45309;
  font-weight: 700;
}
.state-pill--hot:hover {
  background: linear-gradient(135deg, #f59e0b, #dc2626);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 10px -2px rgba(245,158,11,.4);
}
.state-pill__hot {
  font-size: .7rem;
  line-height: 1;
  animation: stateFireFlicker 1.6s ease-in-out infinite;
}
@keyframes stateFireFlicker {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.15); }
}

/* CTA at bottom of each state card */
.state-card__cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .65rem 1rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .005em;
  transition: transform .15s, box-shadow .15s;
  position: relative; z-index: 1;
  box-shadow: 0 3px 10px -2px rgba(37,99,235,.35);
}
.state-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(37,99,235,.5);
}

/* TN-specific CTA color */
.state-card--tn .state-card__cta {
  background: linear-gradient(135deg, #dc2626, #f59e0b);
  box-shadow: 0 3px 10px -2px rgba(220,38,38,.35);
}
.state-card--tn .state-card__cta:hover {
  box-shadow: 0 6px 16px -2px rgba(220,38,38,.45);
}

/* MH-specific CTA color */
.state-card--mh .state-card__cta {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* Coverage footer note */
.coverage-note {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem 1.1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
  border: 1px dashed rgba(37,99,235,.25);
  font-size: .9rem;
  color: var(--wb-text, #111827);
}
.coverage-note__icon {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
  animation: coverageRocket 3s ease-in-out infinite;
}
@keyframes coverageRocket {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(5deg); }
}
.coverage-note__text { flex: 1; line-height: 1.5; }
.coverage-note__link {
  color: #2563eb;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
}
.coverage-note__link:hover {
  color: #7c3aed;
}

/* Mobile responsive */
@media (max-width: 640px) {
  .state-card { padding: 1.1rem 1rem; }
  .state-card__hd { gap: .65rem; margin-bottom: .85rem; }
  .state-card__flag { width: 44px; height: 30px; }
  .state-card__title-block h3 { font-size: 1.2rem; }
  .state-card__sub { font-size: .72rem; }
  .state-card__count { font-size: 1.6rem; }
  .state-card__highlights { padding: .65rem .8rem; }
  .state-card__highlight { font-size: .8rem; }
  .state-pill { padding: .3rem .55rem; font-size: .72rem; }
  .coverage-note { flex-direction: column; align-items: flex-start; padding: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .state-pill__hot,
  .coverage-note__icon { animation: none !important; }
  .state-card,
  .coverage-stat,
  .state-pill,
  .state-card__cta {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPARISON TABLE — Land EMI vs Bank Loan vs Cash
   ═══════════════════════════════════════════════════════════════════════ */

/* 3-column comparison grid */
.emi-compare-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
  align-items: stretch;
}
@media (max-width: 880px) {
  .emi-compare-grid { grid-template-columns: 1fr; gap: .85rem; }
}

.emi-compare-col {
  position: relative;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 22px;
  padding: 1.5rem 1.4rem 1.25rem;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.emi-compare-col:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(13,27,46,.10);
}

/* Featured Land EMI column — gradient border + lift */
.emi-compare-col--landemi {
  background: linear-gradient(180deg,
    rgba(37,99,235,.04) 0%,
    var(--wb-card, #fff) 18%);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
  z-index: 1;
  box-shadow:
    0 4px 14px -2px rgba(37,99,235,.12),
    0 16px 36px -8px rgba(124,58,237,.10);
}
.emi-compare-col--landemi::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  padding: 2px;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #16a34a 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}
@media (min-width: 881px) {
  .emi-compare-col--landemi {
    transform: translateY(-8px);
  }
  .emi-compare-col--landemi:hover {
    transform: translateY(-12px);
  }
}

.emi-compare-col__ribbon {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  padding: .35rem .85rem;
  border-radius: 99px;
  letter-spacing: .08em;
  white-space: nowrap;
  box-shadow: 0 4px 12px -2px rgba(124,58,237,.35);
  z-index: 2;
}

.emi-compare-col__hd {
  text-align: center;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed var(--wb-border, rgba(0,0,0,.08));
}
.emi-compare-col__icon {
  font-size: 2.5rem;
  line-height: 1;
  margin-bottom: .5rem;
}
.emi-compare-col__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wb-text, #111827);
}
.emi-compare-col--landemi .emi-compare-col__title {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.emi-compare-col__sub {
  font-size: .76rem;
  color: var(--wb-text-muted, #6b7280);
  margin-top: .15rem;
}

.emi-compare-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.emi-compare-row {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .85rem;
  line-height: 1.4;
  color: var(--wb-text, #111827);
}
.emi-compare-row strong {
  color: var(--wb-text, #111827);
  font-weight: 700;
}
.emi-compare-icon {
  display: grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  font-size: .82rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.emi-compare-row--good .emi-compare-icon {
  background: rgba(34,197,94,.14);
  color: #16a34a;
}
.emi-compare-row--bad .emi-compare-icon {
  background: rgba(220,38,38,.12);
  color: #dc2626;
}
.emi-compare-row--warn .emi-compare-icon {
  background: rgba(217,119,6,.12);
  color: #d97706;
}
.emi-compare-row--bad span:not(.emi-compare-icon) {
  color: var(--wb-text-muted, #6b7280);
}

/* Bottom verdict pill */
.emi-compare-col__verdict {
  text-align: center;
  padding: .55rem .85rem;
  border-radius: 10px;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .005em;
  margin-top: auto;
}
.emi-compare-col__verdict--bad {
  background: rgba(220,38,38,.08);
  color: #b91c1c;
  border: 1px solid rgba(220,38,38,.2);
}
.emi-compare-col__verdict--neutral {
  background: rgba(217,119,6,.08);
  color: #b45309;
  border: 1px solid rgba(217,119,6,.2);
}
.emi-compare-col__verdict--good {
  background: linear-gradient(135deg,
    rgba(34,197,94,.12),
    rgba(16,185,129,.08));
  color: #16a34a;
  border: 1px solid rgba(34,197,94,.3);
  box-shadow: 0 2px 8px -2px rgba(34,197,94,.15);
}

/* Quick-glance summary table */
.emi-compare-summary {
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.emi-compare-summary__hd {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1rem;
}
.emi-compare-summary__icon { font-size: 1.1rem; line-height: 1; }
.emi-compare-summary__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.emi-compare-summary__table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -.5rem;
}
.emi-compare-summary__table {
  width: 100%;
  min-width: 540px;
  border-collapse: collapse;
  font-size: .85rem;
}
.emi-compare-summary__table th,
.emi-compare-summary__table td {
  padding: .65rem .85rem;
  text-align: left;
  border-bottom: 1px solid var(--wb-border, rgba(0,0,0,.06));
}
.emi-compare-summary__table th {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--wb-text-muted, #6b7280);
  background: var(--wb-light, #f8fafc);
}
.emi-compare-summary__table tbody tr:last-child td { border-bottom: 0; }
.emi-compare-summary__table tbody tr:hover {
  background: rgba(37,99,235,.02);
}
.emi-compare-summary__table th.is-highlight,
.emi-compare-summary__table td.is-highlight {
  background: linear-gradient(180deg, rgba(37,99,235,.06), rgba(124,58,237,.04));
  border-left: 2px solid #2563eb;
  border-right: 2px solid #7c3aed;
  color: var(--wb-text, #111827);
}
.emi-compare-summary__table tbody td.is-highlight strong {
  color: #2563eb;
}

/* Bottom CTA strip */
.emi-compare-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.75rem;
  border-radius: 22px;
  background:
    radial-gradient(at top right, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(at bottom left, rgba(34,197,94,.15), transparent 55%),
    linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 12px 32px -6px rgba(15,23,42,.35),
    0 24px 48px -12px rgba(124,58,237,.18);
}
.emi-compare-cta__icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.emi-compare-cta__body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.emi-compare-cta__body h3 {
  margin: 0 0 .35rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.01em;
}
.emi-compare-cta__body p {
  margin: 0;
  font-size: .92rem;
  opacity: .82;
  line-height: 1.5;
}
.emi-compare-cta .wb-cta {
  flex-shrink: 0;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border: 0;
  color: #fff;
  position: relative; z-index: 1;
  box-shadow:
    0 4px 14px -2px rgba(124,58,237,.5),
    0 8px 20px -4px rgba(37,99,235,.35);
}
.emi-compare-cta .wb-cta:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px -2px rgba(124,58,237,.6),
    0 12px 28px -4px rgba(37,99,235,.45);
}

/* Mobile adjustments */
@media (max-width: 720px) {
  .emi-compare-col { padding: 1.25rem 1rem 1rem; }
  .emi-compare-col__icon { font-size: 2rem; }
  .emi-compare-col__title { font-size: 1.1rem; }
  .emi-compare-row { font-size: .8rem; }
  .emi-compare-icon { width: 20px; height: 20px; font-size: .75rem; }
  .emi-compare-col__verdict { font-size: .74rem; }

  .emi-compare-summary { padding: 1rem 1rem; }
  .emi-compare-summary__table { font-size: .8rem; min-width: 480px; }

  .emi-compare-cta {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1.25rem;
    gap: 1rem;
  }
  .emi-compare-cta__icon { font-size: 2rem; }
  .emi-compare-cta__body h3 { font-size: 1.2rem; }
  .emi-compare-cta .wb-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .emi-compare-col,
  .emi-compare-col--landemi {
    transform: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   BUYER PROTECTION & GUARANTEES SECTION
   ═══════════════════════════════════════════════════════════════════════ */

/* Trust score banner at top */
.emi-protect-banner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.4rem 1.6rem;
  border-radius: 22px;
  background:
    radial-gradient(at top right, rgba(34,197,94,.15), transparent 55%),
    radial-gradient(at bottom left, rgba(37,99,235,.12), transparent 55%),
    linear-gradient(135deg, rgba(15,42,85,.04), rgba(34,197,94,.04));
  border: 1px solid rgba(34,197,94,.22);
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 14px -4px rgba(34,197,94,.12),
    0 12px 32px -8px rgba(37,99,235,.08);
}
.emi-protect-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #16a34a 0%, #2563eb 50%, #7c3aed 100%);
}

.emi-protect-banner__shield {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #fff;
  flex-shrink: 0;
  box-shadow:
    0 6px 16px -2px rgba(34,197,94,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
  animation: emiShieldGlow 3s ease-in-out infinite;
}
@keyframes emiShieldGlow {
  0%, 100% {
    box-shadow:
      0 6px 16px -2px rgba(34,197,94,.45),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
  50% {
    box-shadow:
      0 6px 16px -2px rgba(34,197,94,.6),
      0 0 0 8px rgba(34,197,94,.08),
      inset 0 1px 0 rgba(255,255,255,.25);
  }
}

.emi-protect-banner__body {
  flex: 1;
  min-width: 0;
}
.emi-protect-banner__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin-bottom: .3rem;
  color: var(--wb-text, #111827);
}
.emi-protect-banner__sub {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--wb-text-muted, #6b7280);
}

.emi-protect-banner__score {
  text-align: center;
  padding: .55rem 1rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(16,185,129,.08));
  border: 1.5px solid rgba(34,197,94,.3);
  flex-shrink: 0;
}
.emi-protect-banner__score-val {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: #16a34a;
  line-height: 1;
}
.emi-protect-banner__score-lbl {
  font-size: .62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #16a34a;
  margin-top: .2rem;
}

/* 6-card guarantee grid */
.emi-protect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.emi-protect-card {
  position: relative;
  padding: 1.5rem 1.25rem 1.1rem;
  border-radius: 18px;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  overflow: hidden;
  transition: transform .22s cubic-bezier(.34,1.36,.64,1),
              box-shadow .22s ease,
              border-color .22s ease;
}
.emi-protect-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--p-c, #16a34a);
}
.emi-protect-card::after {
  content: '';
  position: absolute;
  top: -50px; right: -50px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--p-c, #16a34a) 12%, transparent) 0%,
    transparent 70%);
  pointer-events: none;
  transition: transform .35s ease;
}
.emi-protect-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--p-c, #16a34a) 35%, var(--wb-border));
  box-shadow:
    0 10px 24px -6px rgba(13,27,46,.10),
    0 20px 44px -12px color-mix(in srgb, var(--p-c, #16a34a) 22%, transparent);
}
.emi-protect-card:hover::after {
  transform: scale(1.25);
}

.emi-protect-card__icon {
  font-size: 2.25rem;
  line-height: 1;
  margin-bottom: .85rem;
  position: relative; z-index: 1;
  display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.08));
}

.emi-protect-card h3 {
  margin: 0 0 .55rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--wb-text, #111827);
  position: relative; z-index: 1;
  line-height: 1.3;
}

.emi-protect-card p {
  margin: 0 0 .9rem;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--wb-text-muted, #6b7280);
  position: relative; z-index: 1;
}

.emi-protect-card__chip {
  display: inline-flex;
  align-items: center;
  padding: .25rem .65rem;
  border-radius: 99px;
  background: color-mix(in srgb, var(--p-c, #16a34a) 10%, transparent);
  color: var(--p-c, #16a34a);
  border: 1px solid color-mix(in srgb, var(--p-c, #16a34a) 22%, transparent);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  position: relative; z-index: 1;
}

/* Compliance certification row */
.emi-protect-certs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .7rem;
  padding: 1.1rem;
  border-radius: 18px;
  background: var(--wb-light, #f8fafc);
  border: 1px dashed var(--wb-border, rgba(0,0,0,.12));
  margin-bottom: 1.5rem;
}
.emi-protect-cert {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .85rem;
  border-radius: 12px;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.06));
  transition: transform .15s, border-color .15s;
}
.emi-protect-cert:hover {
  transform: translateY(-2px);
  border-color: rgba(34,197,94,.3);
}
.emi-protect-cert__icon {
  font-size: 1.35rem;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(16,185,129,.05));
  border-radius: 10px;
  flex-shrink: 0;
}
.emi-protect-cert__title {
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--wb-text, #111827);
  line-height: 1.2;
}
.emi-protect-cert__sub {
  font-size: .65rem;
  color: var(--wb-text-muted, #6b7280);
  margin-top: .15rem;
}

/* Final pledge footer */
.emi-protect-pledge {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(34,197,94,.08), rgba(16,185,129,.04));
  border: 1.5px solid rgba(34,197,94,.25);
  font-size: .92rem;
  line-height: 1.5;
  color: var(--wb-text, #111827);
  position: relative;
  overflow: hidden;
}
.emi-protect-pledge::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: linear-gradient(180deg, #16a34a, #22c55e);
}
.emi-protect-pledge__icon {
  font-size: 1.75rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(34,197,94,.25));
  animation: emiPledgeBounce 3.5s ease-in-out infinite;
}
@keyframes emiPledgeBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-3deg); }
}
.emi-protect-pledge__text {
  flex: 1;
}
.emi-protect-pledge__text strong {
  color: #16a34a;
  font-weight: 800;
}

/* Mobile */
@media (max-width: 720px) {
  .emi-protect-banner {
    flex-wrap: wrap;
    padding: 1.1rem;
    gap: .85rem;
  }
  .emi-protect-banner__shield { width: 48px; height: 48px; border-radius: 14px; }
  .emi-protect-banner__shield svg { width: 32px; height: 32px; }
  .emi-protect-banner__title { font-size: 1rem; }
  .emi-protect-banner__sub { font-size: .82rem; }
  .emi-protect-banner__score { padding: .45rem .75rem; }
  .emi-protect-banner__score-val { font-size: 1.5rem; }

  .emi-protect-card { padding: 1.25rem 1rem 1rem; }
  .emi-protect-card__icon { font-size: 1.85rem; }
  .emi-protect-card h3 { font-size: 1rem; }
  .emi-protect-card p { font-size: .8rem; }
  .emi-protect-card__chip { font-size: .62rem; padding: .22rem .55rem; }

  .emi-protect-pledge {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 1rem;
    font-size: .85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emi-protect-banner__shield,
  .emi-protect-pledge__icon { animation: none !important; }
  .emi-protect-card,
  .emi-protect-card::after,
  .emi-protect-cert {
    transition: none !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Properties page — Investment Score · Persona Presets · Recently Viewed
   ═══════════════════════════════════════════════════════════════════════ */

/* Investment Score badge (top-right of card image) */
.invest-score {
  position: absolute;
  top: 10px; right: 10px;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .3rem .55rem .3rem .4rem;
  background: var(--is-c, #2563eb);
  color: #fff;
  border-radius: 99px;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .02em;
  box-shadow:
    0 2px 6px rgba(0,0,0,.2),
    0 4px 14px -2px var(--is-c, #2563eb),
    inset 0 1px 0 rgba(255,255,255,.25);
  z-index: 2;
  font-variant-numeric: tabular-nums;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.invest-score__grade {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255,255,255,.22);
  font-size: .62rem;
  font-weight: 900;
}
.invest-score__num {
  font-size: .76rem;
  letter-spacing: -.01em;
  padding-right: .15rem;
}

/* Persona Filter Presets */
.persona-presets {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: .65rem 0 1rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.04), rgba(124,58,237,.03));
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 16px;
  position: relative; overflow: hidden;
}
.persona-presets::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124,58,237,.12), transparent 70%);
  pointer-events: none;
}
.persona-presets__lbl {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wb-text-muted, #6b7280);
  margin-right: .25rem;
  position: relative; z-index: 1;
}

.persona-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  background: var(--wb-card, #fff);
  border: 1.5px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: transform .18s cubic-bezier(.34,1.36,.64,1),
              box-shadow .15s ease,
              border-color .15s ease,
              background .15s ease;
  position: relative; z-index: 1;
  font-family: inherit;
}
.persona-chip:hover {
  transform: translateY(-3px);
  border-color: rgba(37,99,235,.3);
  box-shadow:
    0 6px 16px -4px rgba(37,99,235,.18),
    0 12px 28px -8px rgba(124,58,237,.10);
}
.persona-chip:active {
  transform: translateY(-1px) scale(.98);
}
.persona-chip.is-applying {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px -2px rgba(37,99,235,.45);
}
.persona-chip.is-applying .persona-chip__sub { opacity: .8; }

.persona-chip__icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.persona-chip__lbl {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--wb-text, #111827);
  line-height: 1.1;
  display: block;
}
.persona-chip.is-applying .persona-chip__lbl { color: #fff; }
.persona-chip__sub {
  display: block;
  font-size: .65rem;
  color: var(--wb-text-muted, #6b7280);
  font-weight: 500;
  margin-top: 1px;
}

/* Recently Viewed strip */
.recently-viewed {
  margin: 0 0 1rem;
  padding: .75rem 1rem;
  background: var(--wb-light, #f8fafc);
  border: 1px dashed rgba(37,99,235,.2);
  border-radius: 14px;
}
.recently-viewed__hd {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .55rem;
}
.recently-viewed__icon { font-size: 1rem; line-height: 1; }
.recently-viewed__title {
  flex: 1;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--wb-text-muted, #6b7280);
}
.recently-viewed__clear {
  background: transparent;
  border: 0;
  color: var(--wb-text-muted, #6b7280);
  cursor: pointer;
  border-radius: 6px;
  padding: .15rem .4rem;
  font-size: .75rem;
  transition: background .15s, color .15s;
}
.recently-viewed__clear:hover {
  background: rgba(220,38,38,.08);
  color: #dc2626;
}

.recently-viewed__strip {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .15rem;
}
.recently-viewed__strip::-webkit-scrollbar { display: none; }

.rv-card {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
  padding: .5rem .65rem;
  min-width: 200px;
  max-width: 240px;
  background: var(--wb-card, #fff);
  border: 1px solid var(--wb-border, rgba(0,0,0,.08));
  border-radius: 10px;
  text-decoration: none;
  color: var(--wb-text, #111827);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.rv-card:hover {
  transform: translateX(-2px);
  border-color: rgba(37,99,235,.3);
  box-shadow: 0 4px 10px -2px rgba(13,27,46,.08);
}
.rv-card__icon {
  font-size: 1.2rem;
  line-height: 1;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: rgba(37,99,235,.08);
  border-radius: 8px;
  flex-shrink: 0;
}
.rv-card__body {
  flex: 1;
  min-width: 0;
}
.rv-card__title {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rv-card__meta {
  font-size: .68rem;
  color: var(--wb-text-muted, #6b7280);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile compaction */
@media (max-width: 640px) {
  .persona-presets {
    padding: .65rem .75rem;
    gap: .35rem;
  }
  .persona-presets__lbl {
    width: 100%;
    margin-bottom: .25rem;
  }
  .persona-chip {
    padding: .45rem .65rem;
    flex: 1 1 calc(50% - .35rem);
    min-width: 0;
  }
  .persona-chip__icon { font-size: 1.1rem; }
  .persona-chip__lbl { font-size: .78rem; }
  .persona-chip__sub { font-size: .6rem; }

  .invest-score {
    top: 8px; right: 8px;
    padding: .22rem .45rem .22rem .3rem;
    font-size: .65rem;
  }
  .invest-score__grade { width: 16px; height: 16px; font-size: .56rem; }
  .invest-score__num { font-size: .68rem; }

  .rv-card { min-width: 180px; }
}

@media (prefers-reduced-motion: reduce) {
  .persona-chip,
  .rv-card {
    transition: none !important;
    transform: none !important;
  }
}