WWWWWW

Current Directory: /home/u588966950/domains/vtsinfotech.online/public_html/swanayurbed/ayan_frontend_demo
Viewing File: /home/u588966950/domains/vtsinfotech.online/public_html/swanayurbed/ayan_frontend_demo/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Ayan Properties — Find Your Space</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=Syne:wght@400;500;600;700;800&family=Lora:ital,wght@0,400;1,400&display=swap" rel="stylesheet"/>
<style>
:root {
  --cream:    #f8f4ee;
  --white:    #ffffff;
  --paper:    #f0ebe1;
  --forest:   #1e3d2f;
  --forest2:  #2a5240;
  --forest3:  #3d7a5e;
  --moss:     #6b9e7e;
  --sage:     #c2d5c8;
  --terra:    #c4532a;
  --terra2:   #e06b3a;
  --terra-lt: #f5ddd3;
  --ink:      #1a1a18;
  --ink2:     #2e2e2a;
  --stone:    #6b6b60;
  --pebble:   #a8a89a;
  --border:   rgba(30,61,47,0.12);
  --r:        0px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  cursor: none;
}

/* ─── CUSTOM CURSOR ─── */
.cursor-dot {
  width: 8px; height: 8px;
  background: var(--terra);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: transform 0.1s, width 0.2s, height 0.2s, background 0.2s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1.5px solid var(--terra);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: transform 0.15s cubic-bezier(.25,.46,.45,.94), width 0.3s, height 0.3s, opacity 0.3s;
}
body:has(a:hover) .cursor-dot,
body:has(button:hover) .cursor-dot { background: var(--forest); transform: translate(-50%,-50%) scale(2); }
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring { width: 56px; height: 56px; border-color: var(--forest); opacity: 0.5; }

/* ─── DOT GRID BG PATTERN ─── */
.dot-bg {
  background-image: radial-gradient(circle, rgba(30,61,47,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--forest3); }

/* ══════════════════════ NAV ══════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 56px;
  height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(248,244,238,0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.logo-mark {
  width: 38px; height: 38px;
  background: var(--white);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.logo-mark::after {
  content: none;
  position: absolute;
  bottom: 0; right: 0;
  width: 14px; height: 14px;
  background: var(--terra);
}
.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.logo-mark span {
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  color: white;
  position: relative; z-index: 1;
}
.logo-text {
  display: flex; flex-direction: column; line-height: 1;
}
.logo-text strong {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--forest);
}
.logo-text small {
  font-size: 9px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 2px;
}

.nav-links {
  display: flex; gap: 36px; list-style: none;
}
.nav-links a {
  font-size: 12px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--stone); text-decoration: none;
  position: relative; padding-bottom: 2px;
  transition: color 0.25s;
}
.nav-links a::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--terra);
  transition: width 0.3s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after { width: 100%; }

.nav-right { display: flex; align-items: center; gap: 14px; }

.btn-outline {
  border: 1.5px solid var(--forest);
  background: transparent;
  color: var(--forest);
  padding: 9px 22px;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.25s;
}
.btn-outline:hover { background: var(--forest); color: var(--cream); }

.btn-fill {
  border: 1.5px solid var(--terra);
  background: var(--terra);
  color: var(--white);
  padding: 9px 22px;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.25s;
}
.btn-fill:hover { background: var(--terra2); border-color: var(--terra2); box-shadow: 0 8px 24px rgba(196,83,42,0.3); }

/* ══════════════════════ HERO ══════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 72px;
  overflow: hidden;
}

.hero-left {
  background: var(--forest);
  padding: 80px 64px 80px 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* diagonal cut on right side */
.hero-left::after {
  content: '';
  position: absolute;
  top: 0; right: -60px;
  width: 120px; height: 100%;
  background: var(--forest);
  clip-path: polygon(0 0, 50% 0, 100% 100%, 0 100%);
  z-index: 2;
}

.hero-left-bg {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 80% 20%, rgba(196,83,42,0.15) 0%, transparent 50%),
                    radial-gradient(circle at 20% 80%, rgba(61,122,94,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 16px;
  width: fit-content;
  margin-bottom: 36px;
  animation: fadeUp 0.9s ease both;
}
.hero-tag-dot {
  width: 6px; height: 6px;
  background: var(--terra);
  border-radius: 50%;
  animation: pulse 2s ease infinite;
}
@keyframes pulse {
  0%,100% { opacity:1; transform: scale(1); }
  50% { opacity:0.5; transform: scale(1.4); }
}
.hero-tag span {
  font-size: 10px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}

.hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(48px, 5.5vw, 82px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--white);
  margin-bottom: 28px;
  animation: fadeUp 0.9s 0.1s ease both;
}
.hero-title .line-accent {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.4);
  display: block;
}
.hero-title em {
  font-style: italic;
  color: var(--terra2);
  display: block;
}

.hero-desc {
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,0.55);
  max-width: 380px; margin-bottom: 48px;
  font-family: 'Lora', serif;
  font-style: italic;
  animation: fadeUp 0.9s 0.2s ease both;
}

.hero-btns {
  display: flex; gap: 14px; flex-wrap: wrap;
  animation: fadeUp 0.9s 0.3s ease both;
}

.btn-hero-primary {
  background: var(--terra);
  color: white; border: 2px solid var(--terra);
  padding: 14px 36px;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.3s;
  display: flex; align-items: center; gap: 10px;
}
.btn-hero-primary:hover { background: var(--terra2); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(196,83,42,0.35); }

.btn-hero-ghost {
  background: transparent; color: white;
  border: 2px solid rgba(255,255,255,0.25);
  padding: 14px 36px;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.3s;
}
.btn-hero-ghost:hover { border-color: white; background: rgba(255,255,255,0.08); }

.hero-stats-row {
  display: flex; gap: 0;
  margin-top: 64px;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 32px;
  animation: fadeUp 0.9s 0.4s ease both;
}
.hstat {
  flex: 1;
  padding-right: 28px;
  border-right: 1px solid rgba(255,255,255,0.1);
  margin-right: 28px;
}
.hstat:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.hstat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: white; line-height: 1;
}
.hstat-num sup { font-size: 16px; color: var(--terra2); }
.hstat-label {
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.4); margin-top: 6px;
}

/* ── Hero Right ── */
.hero-right {
  position: relative; overflow: hidden;
  background: var(--cream);
}
.hero-right-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  animation: heroScale 18s ease-in-out infinite alternate;
}
@keyframes heroScale {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

.hero-card-float {
  position: absolute; bottom: 48px; left: clamp(16px, 3vw, 40px);
  background: white;
  padding: 20px 28px;
  box-shadow: 0 24px 60px rgba(30,61,47,0.18);
  z-index: 5; min-width: 240px;
  max-width: calc(100% - 32px);
  border-left: 4px solid var(--terra);
  animation: slideRight 1s 0.6s ease both;
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
.float-label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--terra); margin-bottom: 8px;
}
.float-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.float-loc { font-size: 11px; color: var(--stone); margin-top: 4px; }
.float-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700;
  color: var(--forest); margin-top: 12px;
}

.hero-scroll-hint {
  position: absolute; bottom: 40px; right: 40px;
  display: flex; align-items: center; gap: 10px;
  z-index: 5;
}
.scroll-line {
  width: 40px; height: 1px; background: var(--pebble);
}
.scroll-text {
  font-size: 9px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--stone); writing-mode: vertical-rl;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════ SEARCH ══════════════════════ */
.search-section {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 0 56px;
  position: sticky; top: 72px; z-index: 90;
  box-shadow: 0 4px 24px rgba(30,61,47,0.06);
}
.search-inner {
  display: flex; align-items: stretch;
  height: 68px; gap: 0;
}
.search-tabs {
  display: flex; gap: 0; border-right: 1px solid var(--border);
  padding-right: 28px; margin-right: 0; align-items: center;
}
.stab {
  padding: 8px 18px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--pebble); background: none; border: none;
  cursor: none; position: relative;
  transition: color 0.2s; font-family: 'Syne', sans-serif;
}
.stab.active { color: var(--forest); }
.stab.active::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0; right: 0; height: 2px;
  background: var(--terra);
}

.search-fields {
  flex: 1; display: flex; align-items: stretch;
}
.sfield {
  flex: 1; padding: 0 20px;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  justify-content: center; cursor: none;
  transition: background 0.2s;
}
.sfield:hover { background: var(--cream); }
.sfield-label {
  font-size: 8px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--terra); margin-bottom: 4px;
}
.sfield select, .sfield input {
  background: none; border: none; outline: none;
  font-family: 'Syne', sans-serif; font-size: 13px;
  font-weight: 600; color: var(--ink); cursor: none;
  width: 100%;
}
.sfield select option { background: white; }

.search-go {
  background: var(--forest);
  color: white; border: none;
  padding: 0 36px;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none;
  display: flex; align-items: center; gap: 8px;
  transition: all 0.25s; white-space: nowrap;
}
.search-go:hover { background: var(--forest2); }
.search-go svg { width: 14px; height: 14px; }

/* ══════════════════════ SECTION COMMONS ══════════════════════ */
.section-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.kicker-square {
  width: 10px; height: 10px;
  background: var(--terra);
  transform: rotate(45deg);
  flex-shrink: 0;
}
.kicker-text {
  font-size: 10px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--terra);
}

.section-heading {
  font-family: 'Playfair Display', serif;
  font-size: clamp(34px, 3.5vw, 54px);
  font-weight: 700; line-height: 1.1;
  color: var(--ink);
}
.section-heading em { font-style: italic; color: var(--forest); }

/* ══════════════════════ FEATURED ══════════════════════ */
.featured-section {
  padding: 100px 56px;
  background: var(--white);
}

.featured-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 52px;
}
.featured-header p {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 14px; color: var(--stone); line-height: 1.8;
  max-width: 320px; margin-top: 12px;
}

/* Big editorial card */
.feat-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.feat-main {
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  background: var(--forest);
  min-height: 580px;
  cursor: none;
}
.feat-main-img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  opacity: 0.7;
  transition: transform 0.8s ease, opacity 0.5s;
}
.feat-main:hover .feat-main-img { transform: scale(1.05); opacity: 0.55; }
.feat-main-body {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end; padding: 40px;
  background: linear-gradient(to top, rgba(20,50,35,0.92) 0%, transparent 55%);
}
.feat-chip {
  background: var(--terra);
  color: white; display: inline-block;
  padding: 5px 14px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  width: fit-content; margin-bottom: 16px;
}
.feat-main-name {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: white; line-height: 1.1; margin-bottom: 8px;
}
.feat-main-loc {
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,0.6); margin-bottom: 24px;
}
.feat-main-row {
  display: flex; align-items: center;
  justify-content: space-between;
}
.feat-main-price {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 700; color: white;
}
.feat-main-price span {
  font-family: 'Syne', sans-serif;
  font-size: 11px; color: rgba(255,255,255,0.5);
  display: block; margin-top: 2px;
}
.feat-view-btn {
  background: white; color: var(--forest);
  border: none; padding: 12px 24px;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: none; transition: all 0.25s;
}
.feat-view-btn:hover { background: var(--terra); color: white; }

/* Side cards */
.feat-side {
  background: var(--cream);
  overflow: hidden; cursor: none;
  position: relative; transition: all 0.3s;
  display: flex; flex-direction: column;
}
.feat-side:hover { box-shadow: 0 20px 50px rgba(30,61,47,0.12); transform: translateY(-3px); }
.feat-side-img {
  height: 180px; overflow: hidden;
}
.feat-side-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.feat-side:hover .feat-side-img img { transform: scale(1.06); }
.feat-side-body {
  padding: 22px 24px; flex: 1;
  display: flex; flex-direction: column;
  justify-content: space-between;
}
.feat-side-name {
  font-family: 'Playfair Display', serif;
  font-size: 20px; font-weight: 600;
  color: var(--ink); line-height: 1.2;
}
.feat-side-loc {
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--stone); margin-top: 5px;
}
.feat-side-price {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 700; color: var(--forest);
  margin-top: 14px;
}
.feat-side-specs {
  display: flex; gap: 14px; margin-top: 6px;
  flex-wrap: wrap;
}
.fspec {
  font-size: 10px; font-weight: 600;
  color: var(--stone);
}
.fspec strong { color: var(--ink); font-weight: 700; }

/* ══════════════════════ CITIES ══════════════════════ */
.cities-section {
  padding: 100px 56px;
  background: var(--forest);
  position: relative; overflow: hidden;
}
.cities-section .dot-bg-dark {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cities-section .section-heading { color: white; }
.cities-section .section-heading em { color: var(--terra2); }
.cities-section .kicker-text { color: rgba(255,255,255,0.5); }
.cities-section .kicker-square { background: var(--terra2); }

.cities-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 52px;
  position: relative; z-index: 1;
}
.cities-header p {
  font-family: 'Lora', serif; font-style: italic;
  color: rgba(255,255,255,0.45); font-size: 14px;
  line-height: 1.8; max-width: 300px; margin-top: 10px;
}

.cities-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 280px 280px;
  gap: 12px; position: relative; z-index: 1;
}
.city-tile {
  position: relative; overflow: hidden; cursor: none;
}
.city-tile:first-child { grid-row: 1 / 3; }
.city-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.7s ease;
  filter: brightness(0.65) saturate(0.75);
}
.city-tile:hover img { transform: scale(1.07); filter: brightness(0.45) saturate(1); }
.city-info {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 24px 22px;
  background: linear-gradient(to top, rgba(20,50,35,0.9) 0%, transparent 70%);
}
.city-name {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; color: white;
  line-height: 1;
}
.city-tile:first-child .city-name { font-size: 42px; }
.city-count {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--terra2); margin-top: 5px;
}
.city-hover-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: var(--terra); color: white;
  padding: 10px 24px; border: none;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  cursor: none; transition: transform 0.35s cubic-bezier(.175,.885,.32,1.275);
}
.city-tile:hover .city-hover-btn { transform: translate(-50%,-50%) scale(1); }

/* ══════════════════════ LISTINGS ══════════════════════ */
.listings-section {
  padding: 100px 56px;
  background: var(--cream);
}

.listings-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 40px;
}

.filter-row {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 44px;
}
.fpill {
  background: white; border: 1.5px solid var(--border);
  color: var(--stone); padding: 7px 20px;
  font-family: 'Syne', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  cursor: none; transition: all 0.2s;
}
.fpill:hover, .fpill.active {
  background: var(--forest); color: white; border-color: var(--forest);
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pcard {
  background: white;
  overflow: hidden; cursor: none;
  transition: box-shadow 0.3s, transform 0.3s;
  position: relative;
}
.pcard:hover {
  box-shadow: 0 24px 60px rgba(30,61,47,0.14);
  transform: translateY(-5px);
}

.pcard-img {
  height: 230px; position: relative; overflow: hidden;
}
.pcard-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.6s ease;
}
.pcard:hover .pcard-img img { transform: scale(1.06); }

.pcard-badge {
  position: absolute; top: 16px; left: 16px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  padding: 5px 12px;
}
.badge-new { background: var(--forest); color: white; }
.badge-hot { background: var(--terra); color: white; }
.badge-sold { background: var(--ink2); color: white; }

.pcard-save {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: white;
  border: none; cursor: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  transition: all 0.25s;
  color: var(--pebble); font-size: 14px;
}
.pcard-save:hover { background: var(--terra); color: white; }

.pcard-type {
  position: absolute; bottom: 14px; right: 14px;
  background: rgba(248,244,238,0.95);
  padding: 4px 12px;
  font-size: 9px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--stone);
}

.pcard-body { padding: 22px 24px 26px; }

.pcard-loc {
  font-size: 10px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--terra); margin-bottom: 8px;
  display: flex; align-items: center; gap: 5px;
}
.pcard-name {
  font-family: 'Playfair Display', serif;
  font-size: 21px; font-weight: 600;
  color: var(--ink); line-height: 1.2; margin-bottom: 4px;
}
.pcard-builder {
  font-size: 11px; color: var(--pebble);
  margin-bottom: 18px;
}

.pcard-divider {
  height: 1px; background: var(--border);
  margin-bottom: 18px;
}

.pcard-specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; margin-bottom: 20px;
}
.pspec { display: flex; flex-direction: column; gap: 3px; }
.pspec-val {
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.pspec-key {
  font-size: 9px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--pebble);
}

.pcard-footer {
  display: flex; align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.pcard-price {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 700; color: var(--forest);
}
.pcard-psf {
  font-size: 10px; color: var(--stone); margin-top: 2px;
  font-weight: 600;
}
.pcard-arrow {
  width: 40px; height: 40px;
  background: var(--forest);
  border: none; cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s; color: white;
}
.pcard-arrow:hover { background: var(--terra); }
.pcard-arrow svg { width: 16px; height: 16px; }

/* ══════════════════════ TICKER ══════════════════════ */
.ticker-strip {
  background: var(--terra);
  overflow: hidden; padding: 14px 0;
}
.ticker-inner {
  display: flex; gap: 60px;
  animation: ticker 25s linear infinite;
  width: max-content; white-space: nowrap;
}
.tick {
  display: flex; align-items: center; gap: 18px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.tick-div {
  width: 4px; height: 4px;
  background: rgba(255,255,255,0.4);
  transform: rotate(45deg);
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ══════════════════════ WHY US ══════════════════════ */
.why-section {
  padding: 100px 56px;
  background: white;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
}

.why-left .section-heading { margin-top: 14px; margin-bottom: 20px; }
.why-left > p {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 14px; color: var(--stone); line-height: 1.8;
  margin-bottom: 44px;
}

.why-features {
  display: flex; flex-direction: column; gap: 0;
}
.wfeat {
  display: flex; gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  transition: all 0.3s; cursor: none;
}
.wfeat:first-child { border-top: 1px solid var(--border); }
.wfeat:hover { padding-left: 10px; }
.wfeat-num {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 700;
  color: var(--sage); line-height: 1;
  flex-shrink: 0; min-width: 48px;
  transition: color 0.3s;
}
.wfeat:hover .wfeat-num { color: var(--terra); }
.wfeat-text h4 {
  font-size: 15px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.wfeat-text p {
  font-size: 13px; color: var(--stone); line-height: 1.6;
}

.why-right {
  position: relative;
}
.why-img-stack {
  position: relative; height: 540px;
}
.wimg1 {
  position: absolute; top: 0; right: 0;
  width: 78%; height: 72%;
  overflow: hidden;
}
.wimg1 img { width: 100%; height: 100%; object-fit: cover; }

.wimg2 {
  position: absolute; bottom: 0; left: 0;
  width: 56%; height: 52%;
  overflow: hidden;
  border: 10px solid white;
  box-shadow: 0 20px 50px rgba(30,61,47,0.15);
}
.wimg2 img { width: 100%; height: 100%; object-fit: cover; }

.why-badge {
  position: absolute; top: 52%; right: -16px;
  width: 100px; height: 100px;
  background: var(--terra); color: white;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(196,83,42,0.35);
  z-index: 3;
}
.why-badge-num {
  font-family: 'Playfair Display', serif;
  font-size: 28px; font-weight: 700; line-height: 1;
}
.why-badge-txt {
  font-size: 8px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  margin-top: 3px; text-align: center; line-height: 1.4;
}

/* ══════════════════════ TESTIMONIALS ══════════════════════ */
.testi-section {
  padding: 100px 56px;
  background: var(--cream);
}
.testi-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 52px;
}

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.tcard {
  background: white; padding: 36px 32px;
  border-top: 3px solid var(--forest);
  transition: all 0.3s; cursor: none;
}
.tcard:nth-child(2) { border-top-color: var(--terra); margin-top: 24px; }
.tcard:hover { box-shadow: 0 20px 48px rgba(30,61,47,0.1); }
.tcard-stars { color: var(--terra); font-size: 14px; letter-spacing: 3px; margin-bottom: 20px; }
.tcard-quote {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 16px; line-height: 1.65;
  color: var(--ink2); margin-bottom: 28px;
}
.tcard-author { display: flex; align-items: center; gap: 14px; }
.tcard-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--sage);
}
.tcard-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.tcard-sub { font-size: 10px; color: var(--stone); margin-top: 2px; letter-spacing: 0.5px; }

/* ══════════════════════ CTA ══════════════════════ */
.cta-section {
  background: var(--forest);
  padding: 100px 56px;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center;
  position: relative; overflow: hidden;
}
.cta-section .dot-bg-dark {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.cta-left { position: relative; z-index: 1; }
.cta-left .section-heading { color: white; margin-top: 14px; }
.cta-left .section-heading em { color: var(--terra2); }
.cta-left .kicker-text { color: rgba(255,255,255,0.5); }
.cta-left .kicker-square { background: var(--terra2); }
.cta-left p {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 14px; color: rgba(255,255,255,0.45);
  line-height: 1.8; margin: 20px 0 40px;
}
.cta-btns { display: flex; gap: 14px; }
.btn-cta-primary {
  background: var(--terra); color: white;
  border: 2px solid var(--terra);
  padding: 14px 36px;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.25s;
}
.btn-cta-primary:hover { background: var(--terra2); border-color: var(--terra2); }
.btn-cta-ghost {
  background: transparent; color: white;
  border: 2px solid rgba(255,255,255,0.25);
  padding: 14px 36px;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none; text-decoration: none;
  transition: all 0.25s;
}
.btn-cta-ghost:hover { border-color: white; }

.cta-right {
  position: relative; z-index: 1;
}
.cta-form {
  background: white; padding: 40px;
}
.cta-form h3 {
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 700; color: var(--ink);
  margin-bottom: 24px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 9px; font-weight: 700;
  letter-spacing: 3px; text-transform: uppercase;
  color: var(--terra);
}
.form-group input, .form-group select {
  border: 1.5px solid var(--border);
  background: var(--cream); padding: 10px 14px;
  font-family: 'Syne', sans-serif; font-size: 13px;
  color: var(--ink); outline: none;
  transition: border-color 0.25s;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--forest);
}
.form-group select option { background: white; }
.form-submit {
  background: var(--forest); color: white; border: none;
  width: 100%; padding: 14px;
  font-family: 'Syne', sans-serif;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase;
  cursor: none; margin-top: 8px;
  transition: background 0.25s;
}
.form-submit:hover { background: var(--forest2); }

/* ══════════════════════ FOOTER ══════════════════════ */
footer {
  background: var(--ink);
  padding: 72px 56px 32px;
}

.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 60px; margin-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  padding-bottom: 60px;
}
.foot-brand .nav-logo { margin-bottom: 18px; display: inline-flex; }
.foot-brand .logo-text strong { color: white; }
.foot-brand .logo-text small { color: rgba(255,255,255,0.3); }
.foot-brand p {
  font-family: 'Lora', serif; font-style: italic;
  font-size: 13px; color: rgba(255,255,255,0.35);
  line-height: 1.8; margin-bottom: 24px;
}
.foot-socials { display: flex; gap: 10px; }
.fsoc {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4); text-decoration: none;
  font-size: 12px; font-weight: 700;
  transition: all 0.25s; cursor: none;
}
.fsoc:hover { border-color: var(--terra); background: var(--terra); color: white; }

.foot-col h5 {
  font-size: 9px; font-weight: 700;
  letter-spacing: 4px; text-transform: uppercase;
  color: var(--terra2); margin-bottom: 22px;
}
.foot-links { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.foot-links a {
  font-size: 13px; color: rgba(255,255,255,0.35);
  text-decoration: none; transition: color 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.foot-links a:hover { color: white; }
.foot-links a:hover::before { content: '→ '; color: var(--terra); }

.foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
}
.foot-copy {
  font-size: 11px; color: rgba(255,255,255,0.2);
}
.foot-copy strong { color: var(--terra2); }
.foot-legal { display: flex; gap: 24px; list-style: none; }
.foot-legal a {
  font-size: 10px; color: rgba(255,255,255,0.2);
  text-decoration: none; letter-spacing: 1px;
  text-transform: uppercase; transition: color 0.2s;
}
.foot-legal a:hover { color: rgba(255,255,255,0.5); }

/* ══════════════════════ RESPONSIVE ══════════════════════ */
@media (max-width: 1200px) {
  nav,
  .search-section,
  .featured-section,
  .cities-section,
  .listings-section,
  .why-section,
  .testi-section,
  .cta-section,
  footer {
    padding-left: 34px;
    padding-right: 34px;
  }

  .hero-left {
    padding-left: 34px;
    padding-right: 42px;
  }

  .nav-links {
    gap: 22px;
  }

  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .foot-top {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 36px;
  }
}

@media (max-width: 980px) {
  nav {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .nav-links {
    order: 3;
    width: 100%;
    justify-content: space-between;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }

  .nav-right .btn-outline {
    display: none;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .hero-left {
    padding-top: 120px;
    padding-bottom: 64px;
  }

  .hero-left::after {
    display: none;
  }

  .hero-right {
    min-height: 420px;
  }

  .hero-scroll-hint {
    display: none;
  }

  .hero-card-float {
    bottom: 22px;
    left: 18px;
    right: 18px;
    min-width: 0;
    max-width: none;
  }

  .search-section {
    position: static;
    box-shadow: none;
    border-top: 1px solid var(--border);
  }

  .search-inner {
    height: auto;
    flex-wrap: wrap;
  }

  .search-tabs {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding-right: 0;
    margin-right: 0;
    padding: 10px 0;
  }

  .search-fields {
    width: 100%;
    flex-wrap: wrap;
  }

  .sfield {
    min-width: 50%;
    min-height: 72px;
  }

  .search-go {
    width: 100%;
    justify-content: center;
    padding: 16px;
  }

  .feat-layout,
  .cities-grid,
  .why-section,
  .testi-grid,
  .cta-section,
  .foot-top {
    grid-template-columns: 1fr;
  }

  .featured-header,
  .cities-header,
  .listings-header,
  .testi-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .feat-main {
    min-height: 460px;
  }

  .feat-main-body {
    padding: 28px;
  }

  .feat-main-name {
    font-size: 30px;
  }

  .feat-main-price {
    font-size: 28px;
  }

  .cities-grid {
    grid-template-rows: 360px repeat(3, 220px);
  }

  .city-tile:first-child {
    grid-row: auto;
  }

  .why-img-stack {
    height: 460px;
  }

  .why-badge {
    right: 10px;
    top: 16px;
  }

  .cta-form {
    padding: 28px;
  }
}

@media (max-width: 680px) {
  nav,
  .search-section,
  .featured-section,
  .cities-section,
  .listings-section,
  .why-section,
  .testi-section,
  .cta-section,
  footer,
  .hero-left {
    padding-left: 18px;
    padding-right: 18px;
  }

  .nav-links {
    gap: 10px;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .nav-right {
    width: 100%;
  }

  .nav-right .btn-fill {
    width: 100%;
    text-align: center;
  }

  .hero-title {
    font-size: clamp(36px, 12vw, 54px);
  }

  .hero-right {
    min-height: 340px;
  }

  .hero-card-float {
    padding: 16px 18px;
  }

  .float-title {
    font-size: 16px;
  }

  .float-price {
    font-size: 20px;
  }

  .hero-stats-row {
    flex-direction: column;
    gap: 18px;
  }

  .hstat {
    border-right: none;
    margin-right: 0;
    padding-right: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    padding-bottom: 14px;
  }

  .hstat:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .sfield {
    min-width: 100%;
  }

  .search-tabs {
    overflow-x: auto;
    white-space: nowrap;
  }

  .stab {
    flex-shrink: 0;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .feat-main-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .cities-grid {
    grid-template-rows: 300px repeat(3, 190px);
  }

  .city-name {
    font-size: 24px;
  }

  .city-tile:first-child .city-name {
    font-size: 34px;
  }

  .why-img-stack {
    height: 360px;
  }

  .wimg1 {
    width: 84%;
    height: 70%;
  }

  .wimg2 {
    width: 62%;
    height: 50%;
    border-width: 6px;
  }

  .why-badge {
    width: 84px;
    height: 84px;
    right: 6px;
  }

  .why-badge-num {
    font-size: 22px;
  }

  .tcard {
    padding: 28px 22px;
  }

  .tcard:nth-child(2) {
    margin-top: 0;
  }

  .cta-btns {
    flex-direction: column;
  }

  .btn-cta-primary,
  .btn-cta-ghost,
  .btn-hero-primary,
  .btn-hero-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .foot-top {
    padding-bottom: 36px;
    margin-bottom: 34px;
  }

  .foot-legal {
    flex-wrap: wrap;
    gap: 12px;
  }
}

@media (max-width: 420px) {
  .hero-left {
    padding-top: 108px;
  }

  .hero-tag,
  .feat-chip {
    letter-spacing: 2px;
  }

  .hero-desc,
  .cta-left p,
  .cities-header p,
  .featured-header p,
  .why-left > p {
    font-size: 13px;
  }

  .nav-links a {
    font-size: 11px;
  }

  .btn-fill,
  .btn-hero-primary,
  .btn-hero-ghost,
  .btn-cta-primary,
  .btn-cta-ghost {
    padding-left: 16px;
    padding-right: 16px;
  }

  .cta-form {
    padding: 20px;
  }
}

@media (hover: none), (pointer: coarse) {
  body {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-ring {
    display: none;
  }

  a,
  button,
  .stab,
  .fpill,
  .city-tile,
  .wfeat,
  .tcard,
  .fsoc,
  .search-go,
  .btn-outline,
  .btn-fill,
  .btn-hero-primary,
  .btn-hero-ghost,
  .btn-cta-primary,
  .btn-cta-ghost,
  .pcard,
  .pcard-arrow {
    cursor: pointer;
  }
}

/* ══════════════════════ REVEAL ══════════════════════ */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-l {
  opacity: 0; transform: translateX(-28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-l.in { opacity: 1; transform: translateX(0); }
.reveal-r {
  opacity: 0; transform: translateX(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-r.in { opacity: 1; transform: translateX(0); }
</style>
</head>
<body>

<!-- cursor -->
<div class="cursor-dot" id="cdot"></div>
<div class="cursor-ring" id="cring"></div>

<!-- ══════════════════ NAV ══════════════════ -->
<nav>
  <a href="#" class="nav-logo">
    <div class="logo-mark"><img src="assets/03d0eb12-a7ab-46eb-a427-d063dcad5f7f.jpeg" alt="Ayan Properties logo"/></div>
    <div class="logo-text">
      <strong>Ayan Properties</strong>
      <small>Est. 2012 · India</small>
    </div>
  </a>
  <ul class="nav-links">
    <li><a href="#listings">Buy</a></li>
    <li><a href="#listings">Rent</a></li>
    <li><a href="#featured">New Projects</a></li>
    <li><a href="#cities">Commercial</a></li>
    <li><a href="#why">About</a></li>
  </ul>
  <div class="nav-right">
    <a href="#" class="btn-outline">List Property</a>
    <a href="#" class="btn-fill">Talk to Expert</a>
  </div>
</nav>

<!-- ══════════════════ HERO ══════════════════ -->
<section class="hero">
  <div class="hero-left">
    <div class="hero-left-bg"></div>
    <div class="hero-tag">
      <span class="hero-tag-dot"></span>
      <span>12,000+ Properties Live</span>
    </div>
    <h1 class="hero-title">
      <span class="line-accent">Where You</span>
      Live <em>Defines</em>
      How You Live
    </h1>
    <p class="hero-desc">Curated residences and commercial spaces across India's most sought-after addresses.</p>
    <div class="hero-btns">
      <a href="#" class="btn-hero-primary">
        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
        Explore Listings
      </a>
      <a href="#" class="btn-hero-ghost">View Projects</a>
    </div>
    <div class="hero-stats-row">
      <div class="hstat">
        <div class="hstat-num">12<sup>K+</sup></div>
        <div class="hstat-label">Properties</div>
      </div>
      <div class="hstat">
        <div class="hstat-num">340<sup>+</sup></div>
        <div class="hstat-label">Builders</div>
      </div>
      <div class="hstat">
        <div class="hstat-num">28</div>
        <div class="hstat-label">Cities</div>
      </div>
    </div>
  </div>
  <div class="hero-right">
    <img class="hero-right-img" src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1200&q=85" alt="Hero Property"/>
    <div class="hero-card-float">
      <div class="float-label">Featured Today</div>
      <div class="float-title">Skyline Heights, Tower A</div>
      <div class="float-loc">📍 Bandra West, Mumbai</div>
      <div class="float-price">₹4.2 Cr onwards</div>
    </div>
    <div class="hero-scroll-hint">
      <div class="scroll-line"></div>
      <div class="scroll-text">Scroll</div>
    </div>
  </div>
</section>

<!-- ══════════════════ SEARCH ══════════════════ -->
<div class="search-section">
  <div class="search-inner">
    <div class="search-tabs">
      <button class="stab active">Buy</button>
      <button class="stab">Rent</button>
      <button class="stab">Projects</button>
      <button class="stab">Plot</button>
    </div>
    <div class="search-fields">
      <div class="sfield">
        <div class="sfield-label">Location</div>
        <input type="text" placeholder="City, locality or project…"/>
      </div>
      <div class="sfield">
        <div class="sfield-label">Property Type</div>
        <select>
          <option>Apartment</option>
          <option>Villa</option>
          <option>Penthouse</option>
          <option>Studio</option>
          <option>Plot</option>
        </select>
      </div>
      <div class="sfield">
        <div class="sfield-label">Budget</div>
        <select>
          <option>Any Budget</option>
          <option>Under ₹50L</option>
          <option>₹50L – ₹1Cr</option>
          <option>₹1Cr – ₹3Cr</option>
          <option>₹3Cr – ₹5Cr</option>
          <option>₹5Cr+</option>
        </select>
      </div>
      <div class="sfield">
        <div class="sfield-label">BHK</div>
        <select>
          <option>Any BHK</option>
          <option>1 BHK</option>
          <option>2 BHK</option>
          <option>3 BHK</option>
          <option>4+ BHK</option>
        </select>
      </div>
    </div>
    <button class="search-go">
      <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
      Search
    </button>
  </div>
</div>

<!-- ══════════════════ FEATURED ══════════════════ -->
<section class="featured-section" id="featured">
  <div class="featured-header reveal">
    <div>
      <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">Editor's Pick</span></div>
      <h2 class="section-heading">Hand-Picked<br/><em>Finest Homes</em></h2>
      <p>Personally verified by our property experts — representing the best the market has to offer right now.</p>
    </div>
    <a href="#" class="btn-outline">See All Featured →</a>
  </div>

  <div class="feat-layout reveal">
    <!-- Main large card -->
    <div class="feat-main">
      <img class="feat-main-img" src="https://images.unsplash.com/photo-1613977257363-707ba9348227?w=1200&q=80" alt="Skyline"/>
      <div class="feat-main-body">
        <span class="feat-chip">New Launch</span>
        <div class="feat-main-name">Skyline Residences<br/>Tower One</div>
        <div class="feat-main-loc">📍 Bandra West, Mumbai</div>
        <div class="feat-main-row">
          <div class="feat-main-price">
            ₹4.2 Cr
            <span>3 & 4 BHK · 1,850–3,200 sqft</span>
          </div>
          <button class="feat-view-btn">View Details</button>
        </div>
      </div>
    </div>

    <!-- Side top -->
    <div class="feat-side">
      <div class="feat-side-img">
        <img src="https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=600&q=80" alt="Serene Villas"/>
      </div>
      <div class="feat-side-body">
        <div>
          <div class="feat-side-name">Serene Valley Villas</div>
          <div class="feat-side-loc">📍 Whitefield, Bengaluru</div>
        </div>
        <div>
          <div class="feat-side-price">₹2.8 Cr</div>
          <div class="feat-side-specs">
            <span class="fspec"><strong>4</strong> BHK</span>
            <span class="fspec"><strong>3,400</strong> sqft</span>
            <span class="fspec">G+2</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Side bottom -->
    <div class="feat-side">
      <div class="feat-side-img">
        <img src="https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=600&q=80" alt="Prestige Heights"/>
      </div>
      <div class="feat-side-body">
        <div>
          <div class="feat-side-name">Prestige Heights</div>
          <div class="feat-side-loc">📍 Hitech City, Hyderabad</div>
        </div>
        <div>
          <div class="feat-side-price">₹1.65 Cr</div>
          <div class="feat-side-specs">
            <span class="fspec"><strong>3</strong> BHK</span>
            <span class="fspec"><strong>1,960</strong> sqft</span>
            <span class="fspec">Ready</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════════ TICKER ══════════════════ -->
<div class="ticker-strip">
  <div class="ticker-inner">
    <span class="tick"><span class="tick-div"></span>Mumbai · 4,280 Listings</span>
    <span class="tick"><span class="tick-div"></span>Bengaluru · 3,910 Listings</span>
    <span class="tick"><span class="tick-div"></span>Delhi NCR · 5,620 Listings</span>
    <span class="tick"><span class="tick-div"></span>Hyderabad · 2,840 Listings</span>
    <span class="tick"><span class="tick-div"></span>Pune · 2,100 Listings</span>
    <span class="tick"><span class="tick-div"></span>Chennai · 1,760 Listings</span>
    <span class="tick"><span class="tick-div"></span>Kolkata · 1,340 Listings</span>
    <span class="tick"><span class="tick-div"></span>Ahmedabad · 980 Listings</span>
    <span class="tick"><span class="tick-div"></span>Mumbai · 4,280 Listings</span>
    <span class="tick"><span class="tick-div"></span>Bengaluru · 3,910 Listings</span>
    <span class="tick"><span class="tick-div"></span>Delhi NCR · 5,620 Listings</span>
    <span class="tick"><span class="tick-div"></span>Hyderabad · 2,840 Listings</span>
    <span class="tick"><span class="tick-div"></span>Pune · 2,100 Listings</span>
    <span class="tick"><span class="tick-div"></span>Chennai · 1,760 Listings</span>
    <span class="tick"><span class="tick-div"></span>Kolkata · 1,340 Listings</span>
    <span class="tick"><span class="tick-div"></span>Ahmedabad · 980 Listings</span>
  </div>
</div>

<!-- ══════════════════ CITIES ══════════════════ -->
<section class="cities-section" id="cities">
  <div class="dot-bg-dark"></div>
  <div class="cities-header reveal">
    <div>
      <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">Browse by City</span></div>
      <h2 class="section-heading">Explore <em>India's</em><br/>Prime Markets</h2>
      <p>From coastal metros to silicon valleys — find property in every major city.</p>
    </div>
    <a href="#" style="padding:12px 28px;border:2px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.6);font-family:'Syne',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none;transition:all 0.25s;" onmouseover="this.style.borderColor='white';this.style.color='white'" onmouseout="this.style.borderColor='rgba(255,255,255,0.2)';this.style.color='rgba(255,255,255,0.6)'">All Cities →</a>
  </div>
  <div class="cities-grid reveal">
    <div class="city-tile">
      <img src="https://images.unsplash.com/photo-1570168007204-dfb528c6958f?w=900&q=80" alt="Mumbai"/>
      <div class="city-info">
        <div class="city-name">Mumbai</div>
        <div class="city-count">4,280 Properties</div>
      </div>
      <button class="city-hover-btn">Explore</button>
    </div>
    <div class="city-tile">
      <img src="https://images.unsplash.com/photo-1596176530529-78163a4f7af2?w=600&q=80" alt="Bengaluru"/>
      <div class="city-info">
        <div class="city-name">Bengaluru</div>
        <div class="city-count">3,910 Properties</div>
      </div>
      <button class="city-hover-btn">Explore</button>
    </div>
    <div class="city-tile">
      <img src="https://images.unsplash.com/photo-1624553985929-f9d781d8eb5e?w=600&q=80" alt="Hyderabad"/>
      <div class="city-info">
        <div class="city-name">Hyderabad</div>
        <div class="city-count">2,840 Properties</div>
      </div>
      <button class="city-hover-btn">Explore</button>
    </div>
    <div class="city-tile">
      <img src="https://images.unsplash.com/photo-1587474260584-136574528ed5?w=600&q=80" alt="Delhi"/>
      <div class="city-info">
        <div class="city-name">Delhi NCR</div>
        <div class="city-count">5,620 Properties</div>
      </div>
      <button class="city-hover-btn">Explore</button>
    </div>
    <div class="city-tile">
      <img src="https://images.unsplash.com/photo-1486325212027-8081e485255e?w=600&q=80" alt="Pune"/>
      <div class="city-info">
        <div class="city-name">Pune</div>
        <div class="city-count">2,100 Properties</div>
      </div>
      <button class="city-hover-btn">Explore</button>
    </div>
  </div>
</section>

<!-- ══════════════════ LISTINGS ══════════════════ -->
<section class="listings-section dot-bg" id="listings">
  <div class="listings-header reveal">
    <div>
      <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">New Listings</span></div>
      <h2 class="section-heading">Recently <em>Added</em></h2>
    </div>
    <a href="#" class="btn-outline">View All Listings →</a>
  </div>

  <div class="filter-row reveal">
    <button class="fpill active">All</button>
    <button class="fpill">Apartment</button>
    <button class="fpill">Villa</button>
    <button class="fpill">Penthouse</button>
    <button class="fpill">Studio</button>
    <button class="fpill">Plot</button>
    <button class="fpill">Commercial</button>
  </div>

  <div class="cards-grid">

    <div class="pcard reveal">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=700&q=80" alt="Aurora"/>
        <span class="pcard-badge badge-new">New</span>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Apartment</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 Powai, Mumbai</div>
        <div class="pcard-name">Aurora Sky Towers</div>
        <div class="pcard-builder">by Lodha Group</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">3 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">1,840 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">32nd Fl</span><span class="pspec-key">Floor</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹2.95 Cr</div>
            <div class="pcard-psf">₹16,032 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div class="pcard reveal" style="transition-delay:0.1s">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=700&q=80" alt="Elara"/>
        <span class="pcard-badge badge-hot">Hot</span>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Villa</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 Sarjapur, Bengaluru</div>
        <div class="pcard-name">Elara Villas Phase II</div>
        <div class="pcard-builder">by Prestige Group</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">4 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">3,200 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">Corner</span><span class="pspec-key">Unit</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹3.48 Cr</div>
            <div class="pcard-psf">₹10,875 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div class="pcard reveal" style="transition-delay:0.2s">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1588854337221-4cf9fa96059c?w=700&q=80" alt="Meridian"/>
        <span class="pcard-badge badge-new">New</span>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Apartment</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 Sector 128, Noida</div>
        <div class="pcard-name">Meridian One</div>
        <div class="pcard-builder">by ATS Infrastructure</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">2 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">1,260 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">12th Fl</span><span class="pspec-key">Floor</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹98.4 L</div>
            <div class="pcard-psf">₹7,810 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div class="pcard reveal" style="transition-delay:0.05s">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be?w=700&q=80" alt="Canopy"/>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Villa</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 Jubilee Hills, Hyderabad</div>
        <div class="pcard-name">Canopy Villas</div>
        <div class="pcard-builder">by My Home Group</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">3 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">2,100 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">G+1</span><span class="pspec-key">Floor</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹1.85 Cr</div>
            <div class="pcard-psf">₹8,810 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div class="pcard reveal" style="transition-delay:0.15s">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1601918774946-25832a4be0d6?w=700&q=80" alt="Quartz"/>
        <span class="pcard-badge badge-hot">Hot</span>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Penthouse</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 Boat Club Rd, Pune</div>
        <div class="pcard-name">Quartz Penthouse</div>
        <div class="pcard-builder">by Godrej Properties</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">5 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">5,800 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">Top Fl</span><span class="pspec-key">Floor</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹7.2 Cr</div>
            <div class="pcard-psf">₹12,413 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

    <div class="pcard reveal" style="transition-delay:0.25s">
      <div class="pcard-img">
        <img src="https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=700&q=80" alt="Harbor"/>
        <span class="pcard-badge badge-new">New</span>
        <button class="pcard-save">♡</button>
        <span class="pcard-type">Apartment</span>
      </div>
      <div class="pcard-body">
        <div class="pcard-loc">📍 EM Bypass, Kolkata</div>
        <div class="pcard-name">Harbor Greens</div>
        <div class="pcard-builder">by Merlin Projects</div>
        <div class="pcard-divider"></div>
        <div class="pcard-specs">
          <div class="pspec"><span class="pspec-val">3 BHK</span><span class="pspec-key">Config</span></div>
          <div class="pspec"><span class="pspec-val">1,560 sqft</span><span class="pspec-key">Area</span></div>
          <div class="pspec"><span class="pspec-val">8th Fl</span><span class="pspec-key">Floor</span></div>
        </div>
        <div class="pcard-footer">
          <div>
            <div class="pcard-price">₹1.24 Cr</div>
            <div class="pcard-psf">₹7,948 / sqft</div>
          </div>
          <button class="pcard-arrow">
            <svg fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </button>
        </div>
      </div>
    </div>

  </div>
  <div style="display:flex;justify-content:center;margin-top:52px" class="reveal">
    <a href="#" class="btn-outline" style="padding:14px 44px;font-size:12px;">Load More Properties</a>
  </div>
</section>

<!-- ══════════════════ WHY US ══════════════════ -->
<section class="why-section" id="why">
  <div class="why-left reveal-l">
    <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">Why Ayan</span></div>
    <h2 class="section-heading">Trusted By <em>Thousands</em><br/>Across India</h2>
    <p>A decade of putting homebuyers first — verified listings, expert guidance and complete transparency, every step of the way.</p>
    <div class="why-features">
      <div class="wfeat">
        <div class="wfeat-num">01</div>
        <div class="wfeat-text">
          <h4>100% Verified Listings</h4>
          <p>Every listing is physically inspected and legally verified by our on-ground team before going live.</p>
        </div>
      </div>
      <div class="wfeat">
        <div class="wfeat-num">02</div>
        <div class="wfeat-text">
          <h4>Dedicated Expert Advisors</h4>
          <p>Relationship managers with 7+ years of local market expertise guide you from discovery to registration.</p>
        </div>
      </div>
      <div class="wfeat">
        <div class="wfeat-num">03</div>
        <div class="wfeat-text">
          <h4>Best Price Assurance</h4>
          <p>Our market intelligence and builder relationships ensure you always secure the most competitive deal.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="why-right reveal-r">
    <div class="why-img-stack">
      <div class="wimg1">
        <img src="https://images.unsplash.com/photo-1600573472591-ee6b68d14c68?w=800&q=80" alt="Interior"/>
      </div>
      <div class="wimg2">
        <img src="https://images.unsplash.com/photo-1560185893-a55cbc8c57e8?w=600&q=80" alt="Interior 2"/>
      </div>
      <div class="why-badge">
        <div class="why-badge-num">12+</div>
        <div class="why-badge-txt">Years of<br/>Trust</div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════════ TESTIMONIALS ══════════════════ -->
<section class="testi-section">
  <div class="testi-header reveal">
    <div>
      <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">Client Stories</span></div>
      <h2 class="section-heading">Words from Our <em>Happy Owners</em></h2>
    </div>
    <a href="#" class="btn-outline">All Reviews →</a>
  </div>
  <div class="testi-grid">
    <div class="tcard reveal">
      <div class="tcard-stars">★★★★★</div>
      <p class="tcard-quote">"The entire process from browsing to getting our keys was seamless. Ayan Properties genuinely cared about finding us the right home, not just closing a sale."</p>
      <div class="tcard-author">
        <img class="tcard-avatar" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&q=80" alt="Priya"/>
        <div>
          <div class="tcard-name">Priya Mehta</div>
          <div class="tcard-sub">Bought 3 BHK · Bandra, Mumbai</div>
        </div>
      </div>
    </div>
    <div class="tcard reveal" style="transition-delay:0.12s">
      <div class="tcard-stars">★★★★★</div>
      <p class="tcard-quote">"Transparent, honest and incredibly professional. No hidden charges, no pressure tactics. Our villa in Whitefield exceeded every expectation we had."</p>
      <div class="tcard-author">
        <img class="tcard-avatar" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&q=80" alt="Arjun"/>
        <div>
          <div class="tcard-name">Arjun Sharma</div>
          <div class="tcard-sub">Bought Villa · Whitefield, Bengaluru</div>
        </div>
      </div>
    </div>
    <div class="tcard reveal" style="transition-delay:0.24s">
      <div class="tcard-stars">★★★★★</div>
      <p class="tcard-quote">"Their advisor found a penthouse within our budget that we didn't even know existed. The post-sale support was just as impressive as the buying experience."</p>
      <div class="tcard-author">
        <img class="tcard-avatar" src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&q=80" alt="Neha"/>
        <div>
          <div class="tcard-name">Neha Kapoor</div>
          <div class="tcard-sub">Bought Penthouse · Jubilee Hills, Hyderabad</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ══════════════════ CTA ══════════════════ -->
<section class="cta-section">
  <div class="dot-bg-dark"></div>
  <div class="cta-left reveal-l">
    <div class="section-kicker"><span class="kicker-square"></span><span class="kicker-text">Get Started</span></div>
    <h2 class="section-heading">Your Dream Home<br/>is <em>One Call Away</em></h2>
    <p>Talk to a dedicated advisor today — free consultation, zero obligations, and local expertise you can count on.</p>
    <div class="cta-btns">
      <a href="#" class="btn-cta-primary">Book Free Consultation</a>
      <a href="#" class="btn-cta-ghost">Browse Listings</a>
    </div>
  </div>
  <div class="cta-right reveal-r">
    <div class="cta-form">
      <h3>Get a Callback</h3>
      <div class="form-row">
        <div class="form-group">
          <label>Your Name</label>
          <input type="text" placeholder="Rahul Verma"/>
        </div>
        <div class="form-group">
          <label>Mobile Number</label>
          <input type="tel" placeholder="+91 98765 43210"/>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group">
          <label>City</label>
          <select>
            <option>Mumbai</option>
            <option>Bengaluru</option>
            <option>Hyderabad</option>
            <option>Delhi NCR</option>
            <option>Pune</option>
          </select>
        </div>
        <div class="form-group">
          <label>Budget</label>
          <select>
            <option>Under ₹50L</option>
            <option>₹50L – ₹1Cr</option>
            <option>₹1Cr – ₹3Cr</option>
            <option>₹3Cr – ₹5Cr</option>
            <option>₹5Cr+</option>
          </select>
        </div>
      </div>
      <button class="form-submit">Request Callback →</button>
    </div>
  </div>
</section>

<!-- ══════════════════ FOOTER ══════════════════ -->
<footer>
  <div class="foot-top">
    <div class="foot-brand">
      <a href="#" class="nav-logo" style="display:inline-flex;margin-bottom:18px">
        <div class="logo-mark"><img src="assets/03d0eb12-a7ab-46eb-a427-d063dcad5f7f.jpeg" alt="Ayan Properties logo"/></div>
        <div class="logo-text">
          <strong>Ayan Properties</strong>
          <small>Est. 2012 · India</small>
        </div>
      </a>
      <p>India's most trusted real estate partner — connecting people to exceptional homes since 2012.</p>
      <div class="foot-socials">
        <a href="#" class="fsoc">in</a>
        <a href="#" class="fsoc">tw</a>
        <a href="#" class="fsoc">ig</a>
        <a href="#" class="fsoc">yt</a>
      </div>
    </div>
    <div class="foot-col">
      <h5>Buy Property</h5>
      <ul class="foot-links">
        <li><a href="#">Apartments in Mumbai</a></li>
        <li><a href="#">Villas in Bengaluru</a></li>
        <li><a href="#">Plots in Hyderabad</a></li>
        <li><a href="#">Penthouses in Delhi</a></li>
        <li><a href="#">Under Construction</a></li>
        <li><a href="#">Ready to Move</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h5>Quick Links</h5>
      <ul class="foot-links">
        <li><a href="#">EMI Calculator</a></li>
        <li><a href="#">Market Insights</a></li>
        <li><a href="#">Builder Profiles</a></li>
        <li><a href="#">New Projects</a></li>
        <li><a href="#">Agent Network</a></li>
        <li><a href="#">NRI Services</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h5>Contact Us</h5>
      <ul class="foot-links">
        <li><a href="#">📞 1800-123-AYAN</a></li>
        <li><a href="#">✉ hello@ayanproperties.in</a></li>
        <li><a href="#">Mumbai Head Office</a></li>
        <li><a href="#">Bengaluru Office</a></li>
        <li><a href="#">Delhi Office</a></li>
        <li><a href="#">Hyderabad Office</a></li>
      </ul>
    </div>
  </div>
  <div class="foot-bottom">
    <div class="foot-copy">© 2025 <strong>Ayan Properties Pvt. Ltd.</strong> All rights reserved. RERA Registered.</div>
    <ul class="foot-legal">
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Terms of Use</a></li>
      <li><a href="#">RERA Info</a></li>
      <li><a href="#">Sitemap</a></li>
    </ul>
  </div>
</footer>

<script>
// ── Custom cursor
const dot = document.getElementById('cdot');
const ring = document.getElementById('cring');
let mx = 0, my = 0, rx = 0, ry = 0;
document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
function animCursor() {
  dot.style.left = mx + 'px';
  dot.style.top  = my + 'px';
  rx += (mx - rx) * 0.12;
  ry += (my - ry) * 0.12;
  ring.style.left = rx + 'px';
  ring.style.top  = ry + 'px';
  requestAnimationFrame(animCursor);
}
animCursor();

// ── Search tabs
document.querySelectorAll('.stab').forEach(t => {
  t.addEventListener('click', () => {
    document.querySelectorAll('.stab').forEach(x => x.classList.remove('active'));
    t.classList.add('active');
  });
});

// ── Filter pills
document.querySelectorAll('.fpill').forEach(p => {
  p.addEventListener('click', () => {
    document.querySelectorAll('.fpill').forEach(x => x.classList.remove('active'));
    p.classList.add('active');
  });
});

// ── Scroll reveal
const obs = new IntersectionObserver((entries) => {
  entries.forEach((e, i) => {
    if (e.isIntersecting) {
      const delay = parseFloat(e.target.style.transitionDelay || '0');
      setTimeout(() => e.target.classList.add('in'), delay * 1000);
    }
  });
}, { threshold: 0.07 });

document.querySelectorAll('.reveal, .reveal-l, .reveal-r').forEach(el => obs.observe(el));

// ── Nav active underline on scroll
document.querySelectorAll('.nav-links a').forEach(link => {
  link.addEventListener('click', function(e) {
    const href = this.getAttribute('href') || '';
    if (href.startsWith('#') && href.length > 1) {
      const target = document.querySelector(href);
      if (target) {
        e.preventDefault();
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
    document.querySelectorAll('.nav-links a').forEach(l => l.style.color = '');
    this.style.color = 'var(--ink)';
  });
});
</script>
</body>
</html>
F1l3 Manager
