/* ===== Theme Tokens (tuned to match the target) ===== */
:root{
  /* Brand & UI */
  --brand:#5a33ef;           /* primary purple */
  --brand-600:#4d2adf;       /* darker purple for emphasis */
  --brand-300:#cbb8ff;       /* lighter purple (tints) */
  --accent:#ff4d8d;          /* pink accent */
  --teal:#41c7c7;

  /* Base */
  --bg:#ffffff;
  --text:#1a1b22;
  --muted:#6b7280;
  --line:#e5e7eb;
  --card:#ffffff;
  --shadow:0 6px 24px rgba(17,24,39,.10);

  /* Typography scale (desktop exacts; mobile adjusts below) */
  --ff:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --fs-body:16px;
  --fs-menu:15.5px;
  --fs-eyebrow:14px;
  --fs-h1-xl:64px;   /* Home hero title */
  --fs-h1-sm:36px;   /* Browse hero title */
  --lh-tight:1.1;
  --lh-body:1.55;
}

/* ===== Resets ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font:var(--fs-body)/var(--lh-body) var(--ff); color:var(--text); background:var(--bg)}
img{max-width:100%;display:block}
.container{max-width:1080px;margin:0 auto;padding:0 20px}
.hidden{display:none}
.muted{color:var(--muted)}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  border:0;background:#f4f4f6;color:#111;
  padding:.62rem 1.05rem;border-radius:999px;
  cursor:pointer;text-decoration:none;font-weight:700;
}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary-ghost{background:#fff;border:1px solid var(--line);color:#111;box-shadow:var(--shadow)}
.btn:is(:hover,:focus){filter:brightness(.98)}

/* ===== Nav ===== */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav__row{display:flex;justify-content:space-between;align-items:center;padding:14px 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.brand__mark{
  width:28px;height:20px;border-radius:6px;
  background:conic-gradient(from 20deg, var(--accent), var(--brand), var(--teal));
  box-shadow:0 4px 12px rgba(90,51,239,.35)
}
.brand__text{font-weight:800;color:var(--brand)}
.menu{display:flex;align-items:center;gap:22px}
.menu__link{
  color:var(--text);text-decoration:none;font-weight:700;
  font-size:var(--fs-menu);opacity:.88
}
.menu__link:hover,.is-active{opacity:1}

/* ===== Hero ===== */
.hero{position:relative}
.hero--plain{
  background:linear-gradient(180deg,#ffffff 0,#ffffff 42%,#f6f2ff 100%);
  color:var(--text)
}
.hero--image{
  color:#fff;
  background-image:
    linear-gradient(rgba(37,21,84,.55),rgba(37,21,84,.55)),
    url('https://images.unsplash.com/photo-1605557635309-4f8a2b0ea57a?q=80&w=1400&auto=format&fit=crop');
  background-size:cover;background-position:center;
}
.hero__content{padding:64px 0 24px}
.hero__content--home{padding:88px 0 12px}
.hero__content--browse{padding:76px 0 36px}
.hero__title{
  margin:0 0 10px;font-weight:800;line-height:var(--lh-tight)
}
.hero__title--xl{
  font-size:var(--fs-h1-xl); color:var(--brand)
}
.hero__title--sm{
  font-size:var(--fs-h1-sm); color:#fff
}
.hero__eyebrow{
  margin:0 0 26px; font-weight:800; letter-spacing:.06em;
  font-size:var(--fs-eyebrow);
}
.accent{color:var(--brand)}

/* ===== Search ===== */
.hero-search-wrap{position:relative;max-width:760px}
.search{display:flex;align-items:center;gap:10px;max-width:760px}
.search__input{
  flex:1;
  padding:14px 16px; font-size:16px; border-radius:12px;
  border:1px solid #cdd3ea; background:#fff; outline:none;
}
.search__btn{
  width:56px;height:46px;border-radius:12px;border:0;
  background:var(--brand); color:#fff;
  box-shadow:0 10px 16px rgba(90,51,239,.25); cursor:pointer;
}

/* ===== Car animation layer (Home) ===== */
.car{
  position:absolute; right:-420px; top:-90px;
  width:360px; height:120px; pointer-events:none; opacity:0; transform:translateX(0);
}
.car--enter{ animation:carIn .7s ease-out forwards }
.car--exit{  animation:carOut .6s ease-in forwards  }
@keyframes carIn{
  0%{transform:translateX(0);opacity:0}
  100%{transform:translateX(-440px);opacity:1}
}
@keyframes carOut{
  0%{opacity:1;transform:translateX(-440px)}
  100%{opacity:0;transform:translateX(-1200px)}
}

/* ===== Illustration (Home) ===== */
.city-illustration{position:relative;height:280px;margin:40px auto 0;max-width:760px}
.sun{position:absolute;left:80px;top:22px;width:60px;height:60px;background:var(--accent);border-radius:50%;box-shadow:0 10px 30px rgba(255,77,141,.35)}
.birds::before{content:"";position:absolute;left:260px;top:70px;width:140px;height:30px;background:
 radial-gradient(circle at 10px 10px,#000 35%,transparent 36%),
 radial-gradient(circle at 70px 8px,#000 35%,transparent 36%),
 radial-gradient(circle at 120px 12px,#000 35%,transparent 36%);opacity:.33;filter:blur(.8px)}
.buildings{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:28px}
.house{width:170px;height:150px;background:#5c2dcf;border-radius:6px 6px 0 0;position:relative;box-shadow:var(--shadow)}
.house::before{content:"";position:absolute;left:20px;top:24px;width:100px;height:70px;background:#fff;border-radius:4px}
.tower{width:140px;height:200px;background:#4b1fc3;border-radius:6px 6px 0 0;position:relative;box-shadow:var(--shadow)}
.tower.tall{height:230px}
.tower::before,.tower.tall::before{content:"";position:absolute;left:18px;top:20px;width:100px;height:140px;background:repeating-linear-gradient(#fff 0 12px,transparent 12px 24px);opacity:.95;border-radius:3px}
.trees{position:absolute;bottom:0;left:0;right:0;height:18px;background:linear-gradient(90deg,transparent 0 5%,#1f2937 5% 95%,transparent 95% 100%)}
.trees::before{content:"";position:absolute;right:90px;top:-36px;width:42px;height:42px;background:#87e6ef;border-radius:50%}
.trees::after{content:"";position:absolute;right:40px;top:-26px;width:28px;height:28px;background:#87e6ef;border-radius:50%}

/* ===== Filters & Grid (Browse) ===== */
.filters{display:flex;justify-content:flex-end;margin:18px 0}
.filters__price{width:420px}
.filters__label{display:block;font-weight:700;margin-bottom:6px}
#priceMax{width:100%}
.filters__scale{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}

.results-title{margin:22px 0 12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.card__img{aspect-ratio:4/3;object-fit:cover;background:#f5f6fb}
.card__body{padding:14px}
.card__title{font-weight:800;color:var(--brand-600);text-decoration:none}
.specs{display:grid;grid-template-columns:auto 1fr;row-gap:6px;column-gap:8px;margin:10px 0;color:var(--muted);font-size:14px}
.price{font-weight:800;color:#1f2937}

/* ===== Forms ===== */
.form label{display:block;font-weight:600;margin:12px 0 6px}
.form input,.form textarea{width:100%;padding:12px;border:1px solid #cdd3ea;border-radius:10px;font:inherit}
.grid--two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.grid--two{grid-template-columns:1fr}}

/* ===== Responsive typography adjustments ===== */
@media (max-width:1024px){
  :root{ --fs-h1-xl:52px }
}
@media (max-width:640px){
  :root{ --fs-h1-xl:38px; --fs-h1-sm:28px; --fs-menu:15px; --fs-eyebrow:13px }
  .hero__content--home{padding:64px 0 8px}
  .search__btn{width:52px;height:44px}
}