/* =========================================================
   บ้านแหลมฉบัง พัทยา ชลบุรี — Design System
   Bright · Blue + Pink + White · Friendly proptech
   (class & CSS-var names kept identical to engine contract)
   ========================================================= */

:root {
  /* neutrals — blue-tinted */
  --ink-900:#101a33; --ink-800:#16223f; --ink-700:#1e2c50; --ink-600:#2a3a63;
  --slate-500:#5a6a8a; --slate-400:#8b97b4; --slate-300:#b3bdd4;
  --mist-200:#e4ebf8; --mist-100:#f1f5fc; --paper:#f6f9ff; --white:#ffffff;

  /* PRIMARY = blue (mapped onto the engine's --gold-* ramp) */
  --gold-600:#1b57cf; --gold-500:#2b6ef2; --gold-400:#5b8ff7; --gold-100:#e8f0ff;
  /* SECONDARY = pink */
  --pink-600:#e14b7c; --pink-500:#ff5d8f; --pink-400:#ff86ab; --pink-100:#ffe6ef;
  /* success / danger */
  --emerald-600:#0e8f63; --emerald-500:#16b26a; --danger:#e5484d; --success:#16b26a;

  --bg:var(--paper); --surface:var(--white); --text:var(--ink-900);
  --text-soft:var(--slate-500); --line:var(--mist-200); --accent:var(--gold-500);

  --font-head:'Kanit','Noto Sans Thai',system-ui,sans-serif;
  --font-body:'Noto Sans Thai','Sarabun',system-ui,-apple-system,sans-serif;

  --shadow-sm:0 1px 2px rgba(20,30,60,.05), 0 3px 10px rgba(43,110,242,.06);
  --shadow-md:0 10px 26px rgba(43,110,242,.11), 0 3px 10px rgba(20,30,60,.06);
  --shadow-lg:0 24px 54px rgba(43,110,242,.17), 0 10px 22px rgba(20,30,60,.08);
  --shadow-blue:0 12px 28px rgba(43,110,242,.34);
  --shadow-pink:0 12px 28px rgba(255,93,143,.34);

  --radius-sm:10px; --radius:16px; --radius-lg:22px; --radius-xl:30px;
  --container:1240px; --header-h:74px; --ease:cubic-bezier(.22,.61,.36,1);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul { list-style:none; }
h1,h2,h3,h4 { font-family:var(--font-head); font-weight:600; line-height:1.18; letter-spacing:-.01em; }

.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; }

/* ---------- Utility ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.8rem; font-weight:600; letter-spacing:.06em; color:var(--pink-600); }
.eyebrow::before { content:""; width:22px; height:3px; border-radius:3px; background:var(--pink-500); }
.section { padding:92px 0; }
.section-head { max-width:640px; margin-bottom:48px; }
.section-head.center { margin-inline:auto; text-align:center; }
.section-head.center .eyebrow { justify-content:center; }
.section-head h2 { font-size:clamp(1.9rem,3.4vw,2.8rem); margin:12px 0 14px; text-wrap:balance; }
.section-head p { color:var(--text-soft); font-size:1.05rem; }
.text-gold { color:var(--gold-600); }
.muted { color:var(--text-soft); }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:.96rem; padding:13px 26px; border-radius:999px; transition:transform .3s var(--ease), box-shadow .3s var(--ease), background .3s; white-space:nowrap; }
.btn:active { transform:translateY(1px); }
.btn-gold { background:linear-gradient(120deg,var(--gold-500),var(--gold-400)); color:#fff; box-shadow:var(--shadow-blue); }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(43,110,242,.45); }
.btn-pink { background:linear-gradient(120deg,var(--pink-500),var(--pink-400)); color:#fff; box-shadow:var(--shadow-pink); }
.btn-pink:hover { transform:translateY(-2px); box-shadow:0 16px 36px rgba(255,93,143,.45); }
.btn-dark { background:var(--ink-900); color:#fff; }
.btn-dark:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-ghost { background:var(--white); color:var(--gold-600); border:1.5px solid var(--mist-200); }
.btn-ghost:hover { border-color:var(--gold-500); background:var(--gold-100); }
.btn-light { background:rgba(255,255,255,.9); color:var(--gold-600); border:1.5px solid var(--mist-200); }
.btn-light:hover { background:#fff; border-color:var(--gold-500); }
.btn-block { width:100%; }
.btn-lg { padding:16px 32px; font-size:1.02rem; }

.chip { display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:500; padding:6px 14px; border-radius:999px; background:var(--mist-100); color:var(--text-soft); }
.chip.gold { background:var(--gold-100); color:var(--gold-600); }
.chip.emerald { background:#dcf5ea; color:var(--emerald-600); }

/* ---------- Header (light) ---------- */
.site-header { position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100; display:flex; align-items:center; background:rgba(246,249,255,.82); backdrop-filter:blur(14px); transition:box-shadow .4s, background .4s; }
.site-header .container { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.site-header.scrolled { background:rgba(255,255,255,.92); box-shadow:0 6px 24px rgba(20,30,60,.07); }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--font-head); font-weight:600; font-size:1.22rem; color:var(--text); }
.brand .mark { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,var(--gold-500),var(--pink-500)); color:#fff; font-size:1.05rem; font-weight:700; box-shadow:var(--shadow-sm); flex-shrink:0; }
.brand .mark img { width:100%; height:100%; object-fit:cover; display:block; }
.brand small { display:block; font-family:var(--font-body); font-size:.62rem; letter-spacing:.16em; color:var(--pink-600); font-weight:600; margin-top:-2px; }
.nav { display:flex; align-items:center; gap:30px; }
.nav a { font-size:.95rem; font-weight:500; color:var(--text); position:relative; opacity:.82; transition:opacity .2s; }
.nav a:hover, .nav a.active { opacity:1; color:var(--gold-600); }
.nav a::after { content:""; position:absolute; left:0; bottom:-6px; height:2.5px; border-radius:3px; width:0; background:var(--pink-500); transition:width .3s var(--ease); }
.nav a:hover::after, .nav a.active::after { width:100%; }
.header-actions { display:flex; align-items:center; gap:12px; }
.icon-btn { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:var(--gold-600); border:1.5px solid var(--mist-200); background:#fff; transition:.2s; }
.icon-btn:hover { border-color:var(--gold-500); background:var(--gold-100); }
.menu-toggle { display:none; }

/* ---------- Hero (light, split) ---------- */
.hero { position:relative; padding:calc(var(--header-h) + 56px) 0 70px; overflow:hidden; background:radial-gradient(900px 500px at 78% 20%,var(--gold-100),transparent 60%),radial-gradient(700px 500px at 5% 90%,var(--pink-100),transparent 55%),var(--paper); }
.hero .container { display:grid; grid-template-columns:1.05fr .95fr; gap:50px; align-items:center; }
.hero h1 { font-size:clamp(2.3rem,4.8vw,3.7rem); margin:18px 0 18px; }
.hero h1 em { font-style:normal; color:var(--pink-500); }
.hero p.lead { font-size:1.14rem; max-width:520px; color:var(--text-soft); }
.hero-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-badges { display:flex; gap:30px; margin-top:40px; flex-wrap:wrap; }
.hero-badge b { font-family:var(--font-head); font-size:1.9rem; display:block; color:var(--gold-600); }
.hero-badge span { font-size:.86rem; color:var(--text-soft); }
.hero-visual { position:relative; }
.hero-visual > img { width:100%; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); aspect-ratio:4/4.4; object-fit:cover; }
.hero-float { position:absolute; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-md); padding:14px 18px; display:flex; align-items:center; gap:12px; }
.hero-float.tl { top:24px; left:-22px; }
.hero-float.br { bottom:26px; right:-18px; }
.hero-float i { width:40px; height:40px; border-radius:11px; display:grid; place-items:center; font-size:1.2rem; }
.hero-float b { display:block; font-size:1.05rem; font-family:var(--font-head); }
.hero-float span { font-size:.76rem; color:var(--text-soft); }

/* Search panel — white card */
.search-panel { margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:10px; box-shadow:var(--shadow-md); }
.search-tabs { display:flex; gap:6px; padding:6px 6px 12px; }
.search-tab { padding:8px 18px; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--text-soft); }
.search-tab.active { background:var(--gold-100); color:var(--gold-600); }
.search-row { display:grid; grid-template-columns:1.5fr 1fr auto; gap:6px; background:var(--mist-100); border-radius:var(--radius); padding:8px; }
.search-field { padding:8px 16px; display:flex; flex-direction:column; gap:2px; border-right:1px solid var(--mist-200); }
.search-field:last-of-type { border:none; }
.search-field label { font-size:.68rem; letter-spacing:.04em; color:var(--slate-400); font-weight:600; }
.search-field select, .search-field input { border:none; outline:none; font-family:inherit; font-size:.95rem; font-weight:500; color:var(--ink-900); background:transparent; width:100%; }
.search-submit { align-self:stretch; }

/* ---------- Grids / Property cards ---------- */
.grid { display:grid; gap:26px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }

.property-card { background:var(--surface); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); border:1px solid var(--line); transition:transform .4s var(--ease), box-shadow .4s var(--ease); display:flex; flex-direction:column; }
.property-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.property-media { position:relative; aspect-ratio:4/3; overflow:hidden; }
.property-media img { width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.property-card:hover .property-media img { transform:scale(1.07); }
.property-tags { position:absolute; top:14px; left:14px; display:flex; gap:8px; }
.tag { font-size:.74rem; font-weight:600; padding:5px 12px; border-radius:999px; color:#fff; }
.tag.rent { background:var(--pink-500); }
.tag.sale { background:var(--gold-500); }
.tag.hot { background:linear-gradient(120deg,var(--pink-500),var(--pink-400)); }
.property-fav { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:var(--slate-400); transition:.2s; }
.property-fav:hover, .property-fav.on { color:var(--pink-500); transform:scale(1.1); }
.property-price-badge { position:absolute; bottom:14px; left:14px; background:rgba(255,255,255,.95); backdrop-filter:blur(6px); color:var(--gold-600); padding:8px 16px; border-radius:12px; font-weight:700; box-shadow:var(--shadow-sm); }
.property-price-badge small { display:block; font-size:.66rem; color:var(--pink-600); font-weight:600; }
.property-body { padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.property-loc { font-size:.84rem; color:var(--text-soft); display:flex; align-items:center; gap:6px; }
.property-title { font-family:var(--font-head); font-size:1.1rem; font-weight:500; line-height:1.4; }
.property-title a:hover { color:var(--gold-600); }
.property-features { display:flex; gap:16px; padding-top:14px; margin-top:auto; border-top:1px solid var(--line); font-size:.85rem; color:var(--text-soft); }
.property-features span { display:flex; align-items:center; gap:6px; }
.property-agent { display:flex; align-items:center; gap:10px; padding-top:14px; border-top:1px dashed var(--line); }
.property-agent img { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.property-agent b { font-size:.84rem; font-weight:600; }
.property-agent span { font-size:.74rem; color:var(--text-soft); }

/* Category tiles */
.cat-tile { position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:3/3.4; display:flex; align-items:flex-end; color:#fff; box-shadow:var(--shadow-md); }
.cat-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.cat-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(16,26,51,.82)); }
.cat-tile:hover img { transform:scale(1.08); }
.cat-tile .cat-body { position:relative; padding:22px; width:100%; }
.cat-tile h3 { font-size:1.3rem; }
.cat-tile span { font-size:.84rem; color:rgba(255,255,255,.8); }
.cat-tile .cat-arrow { position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.2); backdrop-filter:blur(6px); display:grid; place-items:center; transition:.3s; }
.cat-tile:hover .cat-arrow { background:var(--pink-500); }

/* Feature */
.feature { display:flex; flex-direction:column; gap:14px; padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); transition:.3s; }
.feature:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); }
.feature .f-icon { width:56px; height:56px; border-radius:16px; display:grid; place-items:center; background:var(--gold-100); color:var(--gold-600); font-size:1.4rem; }
.feature h3 { font-family:var(--font-head); font-size:1.15rem; font-weight:500; }
.feature p { color:var(--text-soft); font-size:.94rem; }

/* Stat band — blue gradient */
.stat-band { background:linear-gradient(120deg,var(--gold-600),var(--gold-500) 55%,var(--pink-500)); color:#fff; position:relative; overflow:hidden; }
.stat-grid { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:30px; text-align:center; }
.stat b { font-family:var(--font-head); font-size:clamp(2.2rem,4vw,3rem); color:#fff; display:block; }
.stat span { color:rgba(255,255,255,.86); font-size:.95rem; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step; }
.step { padding:30px 24px; border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--surface); position:relative; }
.step::before { counter-increment:step; content:"0" counter(step); font-family:var(--font-head); font-size:2.4rem; color:var(--gold-100); position:absolute; top:14px; right:22px; }
.step .s-icon { width:50px; height:50px; border-radius:14px; background:linear-gradient(135deg,var(--gold-500),var(--pink-500)); color:#fff; display:grid; place-items:center; font-size:1.2rem; margin-bottom:16px; }
.step h3 { font-family:var(--font-head); font-size:1.08rem; font-weight:500; margin-bottom:8px; }
.step p { font-size:.9rem; color:var(--text-soft); }

/* Testimonials */
.testi { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); }
.testi .stars { color:var(--pink-500); margin-bottom:14px; letter-spacing:2px; }
.testi p { font-size:1.02rem; line-height:1.7; margin-bottom:20px; }
.testi .who { display:flex; align-items:center; gap:12px; }
.testi .who img { width:46px; height:46px; border-radius:50%; object-fit:cover; }
.testi .who b { display:block; font-size:.95rem; }
.testi .who span { font-size:.82rem; color:var(--text-soft); }

/* CTA band */
.cta-band { border-radius:var(--radius-xl); overflow:hidden; position:relative; color:#fff; padding:66px 56px; background:linear-gradient(120deg,var(--gold-600),var(--gold-500) 60%,var(--pink-500)); }
.cta-band::after { content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 85% 0,rgba(255,255,255,.18),transparent 60%); }
.cta-band > * { position:relative; }
.cta-band .eyebrow { color:#ffd9e6; }
.cta-band .eyebrow::before { background:#fff; }
.cta-band h2 { font-size:clamp(1.9rem,3.5vw,2.7rem); margin-bottom:14px; max-width:620px; }
.cta-band p { max-width:540px; color:rgba(255,255,255,.9); margin-bottom:28px; }

/* ---------- Page hero (interior, light) ---------- */
.page-hero { padding:calc(var(--header-h) + 54px) 0 54px; position:relative; overflow:hidden; background:radial-gradient(700px 360px at 82% 0,var(--gold-100),transparent 60%),radial-gradient(600px 360px at 0 100%,var(--pink-100),transparent 55%),var(--paper); }
.page-hero h1 { font-size:clamp(2rem,4vw,3rem); margin:12px 0; }
.page-hero p { color:var(--text-soft); max-width:560px; }
.breadcrumb { font-size:.85rem; color:var(--slate-400); display:flex; gap:8px; }
.breadcrumb a:hover { color:var(--gold-600); }

/* ---------- Listings layout ---------- */
.list-layout { display:grid; grid-template-columns:300px 1fr; gap:34px; align-items:start; }
.filter-panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; position:sticky; top:calc(var(--header-h) + 20px); box-shadow:var(--shadow-sm); }
.filter-group { padding:18px 0; border-bottom:1px solid var(--line); }
.filter-group:last-child { border:none; }
.filter-group h4 { font-family:var(--font-head); font-size:.95rem; font-weight:500; margin-bottom:14px; }
.filter-field { width:100%; padding:11px 14px; border:1.5px solid var(--mist-200); border-radius:10px; font-family:inherit; font-size:.9rem; outline:none; transition:.2s; background:#fff; color:var(--ink-900); }
.filter-field:focus { border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-100); }
.range-row { display:flex; gap:10px; }
.pill-select { display:flex; flex-wrap:wrap; gap:8px; }
.pill { padding:8px 15px; border:1.5px solid var(--mist-200); border-radius:999px; font-size:.85rem; font-weight:500; transition:.2s; background:#fff; }
.pill:hover { border-color:var(--gold-500); color:var(--gold-600); }
.pill.active { background:var(--gold-500); color:#fff; border-color:var(--gold-500); }
.list-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap; }
.list-toolbar .count b { color:var(--gold-600); }
.view-toggle { display:flex; gap:6px; }
.view-toggle button { width:40px; height:40px; border-radius:10px; border:1.5px solid var(--mist-200); color:var(--slate-400); background:#fff; }
.view-toggle button.active { background:var(--gold-500); color:#fff; border-color:var(--gold-500); }
.pagination { display:flex; gap:8px; justify-content:center; margin-top:44px; }
.pagination a { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; border:1.5px solid var(--mist-200); font-weight:600; transition:.2s; background:#fff; }
.pagination a:hover, .pagination a.active { background:var(--gold-500); color:#fff; border-color:var(--gold-500); }

/* ---------- Property detail ---------- */
.gallery { display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2,220px); gap:12px; border-radius:var(--radius-lg); overflow:hidden; }
.gallery img { width:100%; height:100%; object-fit:cover; cursor:pointer; transition:.4s; }
.gallery img:hover { opacity:.92; }
.gallery .g-main { grid-row:span 2; }
.detail-layout { display:grid; grid-template-columns:1fr 380px; gap:40px; align-items:start; margin-top:44px; }
.detail-main > * + * { margin-top:30px; }
.detail-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; }
.spec-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.spec { text-align:center; padding:18px 10px; background:var(--gold-100); border-radius:var(--radius); }
.spec i { font-size:1.3rem; color:var(--gold-600); }
.spec b { display:block; font-size:1.15rem; margin-top:6px; }
.spec span { font-size:.78rem; color:var(--text-soft); }
.amenity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.amenity { display:flex; align-items:center; gap:10px; font-size:.92rem; }
.amenity i { color:var(--emerald-500); }
.booking-card { position:sticky; top:calc(var(--header-h) + 20px); }
.booking-price { font-family:var(--font-head); font-size:2.1rem; color:var(--gold-600); }
.booking-price small { font-family:var(--font-body); font-size:.9rem; color:var(--text-soft); font-weight:400; }
.form-field { margin-bottom:14px; }
.form-field label { display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea { width:100%; padding:12px 15px; border:1.5px solid var(--mist-200); border-radius:10px; font-family:inherit; font-size:.92rem; outline:none; transition:.2s; background:#fff; color:var(--ink-900); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color:var(--gold-500); box-shadow:0 0 0 3px var(--gold-100); }
.map-embed { height:320px; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); background:var(--mist-100); position:relative; }

/* ---------- Dashboard ---------- */
.dash { display:grid; grid-template-columns:258px 1fr; min-height:100vh; }
.dash-side { background:linear-gradient(185deg,#123a8f,#0e2a66); color:rgba(255,255,255,.72); padding:26px 20px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; }
.dash-side .brand { color:#fff; margin-bottom:34px; font-size:1.1rem; }
.dash-side .brand small { color:var(--pink-400); }
.dash-nav a { display:flex; align-items:center; gap:12px; padding:12px 15px; border-radius:12px; font-size:.94rem; margin-bottom:4px; transition:.2s; }
.dash-nav a:hover { background:rgba(255,255,255,.08); color:#fff; }
.dash-nav a.active { background:linear-gradient(120deg,var(--gold-400),var(--pink-500)); color:#fff; font-weight:600; }
.dash-nav .nav-label { font-size:.68rem; letter-spacing:.1em; color:rgba(255,255,255,.45); margin:22px 0 10px 15px; }
.dash-main { background:var(--mist-100); padding:26px 34px; }
.dash-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px; }
.dash-search { flex:1; max-width:420px; position:relative; }
.dash-search input { width:100%; padding:12px 16px 12px 44px; border:1px solid var(--line); border-radius:999px; background:#fff; outline:none; }
.dash-search i { position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--slate-400); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:24px; }
.kpi { background:#fff; border-radius:var(--radius-lg); padding:24px; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.kpi .k-top { display:flex; align-items:center; justify-content:space-between; }
.kpi .k-icon { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:1.15rem; }
.kpi b { font-family:var(--font-head); font-size:2rem; display:block; margin-top:12px; }
.kpi .k-label { font-size:.86rem; color:var(--text-soft); }
.kpi .k-trend { font-size:.8rem; font-weight:600; }
.k-trend.up { color:var(--success); }
.k-trend.down { color:var(--danger); }
.dash-panel { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-sm); }
.dash-panel h3 { font-family:var(--font-head); font-size:1.1rem; font-weight:500; margin-bottom:4px; }
.chart-bars { display:flex; align-items:flex-end; gap:14px; height:220px; margin-top:24px; }
.chart-bars .bar { flex:1; background:linear-gradient(180deg,var(--gold-400),var(--gold-600)); border-radius:8px 8px 0 0; position:relative; transition:height 1s var(--ease); min-height:6px; }
.chart-bars .bar:nth-child(even) { background:linear-gradient(180deg,var(--pink-400),var(--pink-600)); }
.chart-bars .bar span { position:absolute; bottom:-24px; left:0; right:0; text-align:center; font-size:.74rem; color:var(--text-soft); }
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; font-size:.76rem; letter-spacing:.02em; color:var(--slate-400); padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600; }
.data-table td { padding:14px; border-bottom:1px solid var(--line); font-size:.9rem; }
.data-table tr:hover td { background:var(--mist-100); }
.status-badge { font-size:.76rem; font-weight:600; padding:4px 12px; border-radius:999px; }
.status-badge.active { background:#dcf5ea; color:var(--emerald-600); }
.status-badge.pending { background:var(--gold-100); color:var(--gold-600); }
.status-badge.sold { background:var(--pink-100); color:var(--pink-600); }
.mini-prop { display:flex; align-items:center; gap:12px; }
.mini-prop img { width:48px; height:48px; border-radius:10px; object-fit:cover; }

/* ---------- Auth ---------- */
.auth-wrap { display:grid; grid-template-columns:1fr 1fr; min-height:100vh; }
.auth-visual { position:relative; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; padding:60px; overflow:hidden; }
.auth-visual img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; }
.auth-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(43,110,242,.35),rgba(16,26,51,.86)); z-index:-1; }
.auth-visual h2 { font-size:2.2rem; margin-bottom:14px; }
.auth-form { display:flex; align-items:center; justify-content:center; padding:40px; }
.auth-form-inner { width:100%; max-width:400px; }
.social-row { display:flex; gap:12px; }
.social-btn { flex:1; border:1.5px solid var(--mist-200); border-radius:12px; padding:12px; display:flex; align-items:center; justify-content:center; gap:8px; font-weight:500; font-size:.9rem; transition:.2s; background:#fff; }
.social-btn:hover { border-color:var(--gold-500); }
.divider { display:flex; align-items:center; gap:14px; color:var(--slate-400); font-size:.82rem; margin:22px 0; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }

/* ---------- Toast ---------- */
.toast { position:fixed; bottom:30px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink-900); color:#fff; padding:14px 26px; border-radius:999px; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:.4s; z-index:999; font-size:.92rem; display:flex; align-items:center; gap:10px; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }
.toast i { color:var(--pink-400); }

/* ---------- Footer ---------- */
.site-footer { background:var(--ink-900); color:rgba(255,255,255,.72); padding-top:76px; }
.footer-top { display:grid; grid-template-columns:1.6fr 1fr 1fr 1.4fr; gap:40px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,.1); }
.site-footer .brand { color:#fff; margin-bottom:18px; }
.site-footer .brand small { color:var(--pink-400); }
.footer-col h4 { font-family:var(--font-body); font-size:.82rem; letter-spacing:.06em; color:var(--pink-400); margin-bottom:20px; font-weight:600; }
.footer-col a { display:block; padding:6px 0; font-size:.94rem; transition:.2s; }
.footer-col a:hover { color:#fff; padding-left:5px; }
.footer-news { display:flex; gap:8px; margin-top:16px; }
.footer-news input { flex:1; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:12px 18px; color:#fff; outline:none; }
.footer-social { display:flex; gap:12px; margin-top:22px; }
.footer-social a { width:40px; height:40px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; transition:.3s; }
.footer-social a:hover { background:var(--pink-500); transform:translateY(-3px); }
.footer-bottom { display:flex; justify-content:space-between; gap:16px; padding:26px 0; font-size:.85rem; flex-wrap:wrap; }

/* ---------- Owner backend extras ---------- */
.lead-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.lead-row:last-child { border:none; }
.lead-ava { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-weight:600; color:#fff; background:linear-gradient(135deg,var(--gold-500),var(--pink-500)); }
.dash-section { animation:fadeIn .4s var(--ease); }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }
.dash-mobile-tabs { display:none; gap:8px; margin-bottom:20px; overflow-x:auto; padding-bottom:4px; }
.dash-mobile-tabs a { flex-shrink:0; padding:10px 18px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:600; font-size:.9rem; color:var(--text-soft); display:flex; align-items:center; gap:8px; }
.dash-mobile-tabs a.active { background:var(--gold-500); color:#fff; border-color:var(--gold-500); }
@media (max-width:1024px){ .dash-mobile-tabs { display:flex; } }

/* Modal */
.modal { position:fixed; inset:0; z-index:300; background:rgba(16,26,51,.5); backdrop-filter:blur(4px); display:none; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.modal.open { display:flex; }
.modal-panel { background:var(--surface); border-radius:var(--radius-lg); width:100%; max-width:620px; box-shadow:var(--shadow-lg); animation:modalIn .35s var(--ease); }
@keyframes modalIn { from { opacity:0; transform:translateY(20px) scale(.98);} to { opacity:1; transform:none;} }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--line); }
.modal-head h3 { font-family:var(--font-head); font-weight:500; font-size:1.2rem; }
.modal-body { padding:26px; }
.upload-drop { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-align:center; padding:20px 16px; border:2px dashed var(--gold-400); border-radius:12px; background:var(--gold-100); color:var(--gold-600); cursor:pointer; transition:.2s; }
.upload-drop:hover { background:#fff; border-color:var(--gold-500); transform:translateY(-1px); }
.upload-drop i { font-size:1.7rem; }
.upload-drop b { font-size:.92rem; }
.upload-drop span { font-size:.76rem; color:var(--text-soft); }
.img-picker { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.img-picker img { width:60px; height:46px; object-fit:cover; border-radius:8px; cursor:pointer; border:2px solid transparent; transition:.2s; }
.img-picker img:hover { border-color:var(--gold-500); transform:translateY(-2px); }
.switch-field { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--mist-100); border-radius:10px; cursor:pointer; font-size:.9rem; }
.switch-field input { width:auto; }

/* ---------- Mobile drawer ---------- */
.drawer { position:fixed; inset:0; z-index:200; visibility:hidden; }
.drawer.open { visibility:visible; }
.drawer-backdrop { position:absolute; inset:0; background:rgba(16,26,51,.5); opacity:0; transition:.3s; }
.drawer.open .drawer-backdrop { opacity:1; }
.drawer-panel { position:absolute; top:0; right:0; bottom:0; width:min(320px,85vw); background:#fff; padding:26px; transform:translateX(100%); transition:transform .35s var(--ease); display:flex; flex-direction:column; gap:8px; }
.drawer.open .drawer-panel { transform:none; }
.drawer-panel a { padding:14px 12px; border-bottom:1px solid var(--line); font-weight:500; }
.drawer-close { align-self:flex-end; font-size:1.4rem; color:var(--gold-600); }

/* =========================================================
   MOTION LAYER + NEW SECTIONS (distinct look)
   ========================================================= */
/* reveal directions */
.reveal.left { transform:translateX(-42px); }
.reveal.right { transform:translateX(42px); }
.reveal.scale { transform:scale(.9); }
.reveal.in { opacity:1 !important; transform:none !important; }

/* floating + blobs */
@keyframes floaty { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes floaty2 { 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(10px);} }
@keyframes blobMove { 0%,100%{ transform:translate(0,0) scale(1);} 33%{ transform:translate(30px,-20px) scale(1.1);} 66%{ transform:translate(-20px,20px) scale(.95);} }
@keyframes kenburns { from{ transform:scale(1);} to{ transform:scale(1.12);} }
@keyframes shimmer { 0%{ background-position:-200% 0;} 100%{ background-position:200% 0;} }
@keyframes floatUp { from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
@keyframes popIn { 0%{ opacity:0; transform:scale(.8);} 100%{ opacity:1; transform:scale(1);} }

.hero { isolation:isolate; }
.hero .blob { position:absolute; border-radius:50%; filter:blur(40px); opacity:.5; z-index:-1; animation:blobMove 14s ease-in-out infinite; }
.hero .blob.b1 { width:340px; height:340px; background:var(--gold-400); top:-60px; right:8%; }
.hero .blob.b2 { width:300px; height:300px; background:var(--pink-400); bottom:-80px; left:-40px; animation-duration:18s; }
.hero-visual > img { animation:kenburns 12s ease-in-out infinite alternate; }
.hero-float { animation:floaty 5s ease-in-out infinite; }
.hero-float.br { animation:floaty2 6s ease-in-out infinite; }
.hero-inner-anim > * { animation:floatUp .7s var(--ease) both; }
.hero-inner-anim > *:nth-child(2){ animation-delay:.08s; } .hero-inner-anim > *:nth-child(3){ animation-delay:.16s; }
.hero-inner-anim > *:nth-child(4){ animation-delay:.24s; } .hero-inner-anim > *:nth-child(5){ animation-delay:.32s; }

.btn-gold { background-size:200% auto; background-image:linear-gradient(120deg,var(--gold-500),var(--gold-400),var(--gold-500)); }
.btn-gold:hover { background-position:right center; }

/* trust strip */
.trust-strip { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:-38px; position:relative; z-index:5; }
.trust-pill { background:#fff; border:1px solid var(--line); border-radius:999px; padding:12px 22px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; font-weight:600; font-size:.92rem; }
.trust-pill i { color:var(--pink-500); font-size:1.2rem; }

/* Areas we serve — image tiles */
.areas-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.area-tile { position:relative; height:250px; border-radius:var(--radius-lg); overflow:hidden; display:flex; align-items:flex-end; box-shadow:var(--shadow-sm); }
.area-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.area-tile::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(16,26,51,.85)); }
.area-tile:hover img { transform:scale(1.1); }
.area-tile .a-body { position:relative; padding:20px; color:#fff; width:100%; }
.area-tile .a-body b { font-family:var(--font-head); font-size:1.25rem; display:block; }
.area-tile .a-body span { font-size:.82rem; color:rgba(255,255,255,.82); }
.area-tile .a-pin { position:absolute; top:16px; left:16px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.22); backdrop-filter:blur(6px); display:grid; place-items:center; color:#fff; }

/* alternating why-row */
.why-row { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.why-row + .why-row { margin-top:60px; }
.why-row:nth-child(even) .why-media { order:2; }
.why-media { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio:5/4; }
.why-media img { width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.why-media:hover img { transform:scale(1.06); }
.why-media .wm-badge { position:absolute; bottom:16px; left:16px; background:#fff; border-radius:14px; padding:12px 16px; box-shadow:var(--shadow-md); display:flex; align-items:center; gap:10px; font-weight:600; font-size:.9rem; }
.why-list { display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.why-list li { display:flex; gap:14px; align-items:flex-start; }
.why-list .wl-ic { width:44px; height:44px; border-radius:12px; flex-shrink:0; display:grid; place-items:center; background:var(--gold-100); color:var(--gold-600); font-size:1.2rem; }
.why-list b { display:block; font-family:var(--font-head); font-weight:500; }
.why-list p { font-size:.92rem; color:var(--text-soft); }

/* timeline steps */
.timeline { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.timeline::before { content:""; position:absolute; top:30px; left:12%; right:12%; height:3px; background:linear-gradient(90deg,var(--gold-400),var(--pink-400)); border-radius:3px; z-index:0; }
.tl-step { position:relative; text-align:center; z-index:1; }
.tl-step .tl-dot { width:60px; height:60px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:#fff; border:3px solid var(--gold-400); color:var(--gold-600); font-size:1.4rem; box-shadow:var(--shadow-md); transition:.3s; }
.tl-step:hover .tl-dot { transform:translateY(-5px) scale(1.05); border-color:var(--pink-500); color:var(--pink-500); }
.tl-step h3 { font-family:var(--font-head); font-size:1.05rem; font-weight:500; margin-bottom:6px; }
.tl-step p { font-size:.88rem; color:var(--text-soft); padding:0 6px; }

@media (prefers-reduced-motion:reduce){
  .hero .blob, .hero-visual > img, .hero-float, .hero-inner-anim > *, .btn-gold { animation:none !important; }
}

/* =========================================================
   DASHBOARD — mobile polish
   ========================================================= */
@media (max-width:720px){
  .dash-main { padding:16px 14px 40px; }
  .dash-topbar { flex-direction:column; align-items:stretch; gap:12px; }
  .dash-topbar > div:last-child { flex-wrap:wrap; }
  .dash-topbar #userSwitch { flex:1; }
  .dash-topbar h1 { font-size:1.25rem; }
  .kpi { padding:18px; }
  .kpi b { font-size:1.6rem; }
  .dash-panel { padding:18px; }
  .dash-mobile-tabs { position:sticky; top:0; z-index:20; background:var(--mist-100); margin:-16px -14px 16px; padding:12px 14px; }
  .modal { padding:16px 12px; align-items:flex-start; }
  .modal-body { padding:20px; }
  .data-table th, .data-table td { padding:10px; font-size:.85rem; }
  .chart-bars { height:180px; }
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .areas-grid { grid-template-columns:1fr 1fr; }
  .why-row { grid-template-columns:1fr; gap:26px; }
  .why-row:nth-child(even) .why-media { order:0; }
  .timeline { grid-template-columns:1fr 1fr; gap:32px 20px; }
  .timeline::before { display:none; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .list-layout { grid-template-columns:1fr; }
  .filter-panel { position:static; }
  .detail-layout { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr 1fr; }
  .steps { grid-template-columns:repeat(2,1fr); }
  .hero .container { grid-template-columns:1fr; }
  .hero-visual { display:none; }
  .dash { grid-template-columns:1fr; }
  .dash-side { display:none; }
  .gallery { grid-template-columns:1fr 1fr; grid-template-rows:200px 160px; }
  .gallery .g-main { grid-column:span 2; }
  .auth-visual { display:none; }
  .auth-wrap { grid-template-columns:1fr; }
}
@media (max-width:720px){
  .section { padding:64px 0; }
  .nav, .header-actions .btn-desktop { display:none; }
  .menu-toggle { display:grid; }
  .grid-3, .grid-4, .grid-2, .stat-grid, .steps, .spec-grid, .amenity-grid { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .kpi-grid { grid-template-columns:1fr 1fr; }
  .search-row { grid-template-columns:1fr; }
  .cta-band { padding:46px 26px; }
  .footer-top { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr; grid-template-rows:repeat(3,180px); }
  .gallery .g-main { grid-column:auto; }
  .gallery img:nth-child(n+4) { display:none; }
  .areas-grid, .timeline { grid-template-columns:1fr; }
  .trust-strip { margin-top:22px; }
  .why-row { gap:22px; }
}