/* Property Booster BD public website: warm cream page, white rounded panels, Plus Jakarta Sans,
   the brand yellow of the logo (#ffc000) with dark text on it, and coloured number tiles. */
:root{
  --acc:#ffc000; --acc2:#f5a300; --accH:#f2b200; --accT:#9a6700; --on:#241a00; --grad:linear-gradient(120deg,#fff6d6 0%,#ffe9a3 50%,#ffd666 100%);
  --sky:#03b1f0; --ink:#151a27; --ink2:#6a7489; --paper:#ffffff; --bg:#fffaf0; --soft:#fff7e6; --line:#efe5cc;
  --dark:#0d1017; --dark2:#161b26; --dline:#252c3b;
  --ok:#15803d; --okS:#e8f7ee; --bad:#c2382d; --badS:#fde8e6;
  --sans:"Plus Jakarta Sans","Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:18px; --max:1200px; --sh:0 1px 2px rgba(80,55,0,.05),0 8px 24px rgba(80,55,0,.08);
  --panel:#ffffff; --line2:#ecd9a2; --ink3:#3d4559; --ink4:#b3bacb; --tint:#fff2c7; --ph1:#fcefc6; --ph2:#f6d985;
  --glass:rgba(255,252,244,.9); --foot:#0d1017; --warn:#b45309; --warnS:#fff3dc; color-scheme:light;
  /* kept for older markup */
  --navy:#0d1017; --navy2:var(--acc); --serif:var(--sans);
}
/* dark mode: the phone's setting, or the sun / moon button (kept in this browser) */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1017; --soft:#0d1017; --panel:#161b26; --line:#252c3b; --line2:#34405a; --ink:#eef1f7; --ink2:#8a94a8; --ink3:#c3cad8; --ink4:#55607a;
  --tint:#2a2310; --ph1:#2a2412; --ph2:#4a3b14; --accT:#ffcc4d; --glass:rgba(13,16,23,.82); --foot:#080a0f;
  --ok:#86efac; --okS:#0f2417; --bad:#fca5a5; --badS:#2a1215; --warn:#fcd34d; --warnS:#2a2110;
  --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0d1017; --soft:#0d1017; --panel:#161b26; --line:#252c3b; --line2:#34405a; --ink:#eef1f7; --ink2:#8a94a8; --ink3:#c3cad8; --ink4:#55607a;
  --tint:#2a2310; --ph1:#2a2412; --ph2:#4a3b14; --accT:#ffcc4d; --glass:rgba(13,16,23,.82); --foot:#080a0f;
  --ok:#86efac; --okS:#0f2417; --bad:#fca5a5; --badS:#2a1215; --warn:#fcd34d; --warnS:#2a2110;
  --sh:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25); color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
body.bn{font-family:"Hind Siliguri","Plus Jakarta Sans",system-ui,sans-serif;font-size:17px}
a{color:inherit}
img{max-width:100%}
.in{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
h1,h2{font-weight:800;line-height:1.12;letter-spacing:-.025em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3vw,36px)}
h3{font-size:18px;margin:0;line-height:1.3;font-weight:700}
body.bn h1,body.bn h2{letter-spacing:0;line-height:1.3}
p{margin:0}
.lead{color:var(--ink2);font-size:17px;max-width:60ch}
.kicker{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accT);margin-bottom:12px}
body.bn .kicker{letter-spacing:.02em;font-size:14px}
.kicker.dark{color:var(--accT)}
.sel{user-select:all}
:focus-visible{outline:3px solid rgba(245,170,0,.55);outline-offset:2px}

/* the master's preview of the closed website */
.pv-bar{background:#f59e0b;color:#1f1300;text-align:center;font-size:13.5px;font-weight:700;padding:7px 16px}
.pv-bar a{margin-left:8px;color:#1f1300;text-decoration:underline}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--glass);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.top .in{display:flex;align-items:center;gap:14px;padding-block:12px}
.logo{order:1;display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo img{height:46px;width:auto}
.logo .l-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo .l-light{display:none}:root:not([data-theme="light"]) .logo .l-dark{display:block}}
:root[data-theme="dark"] .logo .l-light{display:none}:root[data-theme="dark"] .logo .l-dark{display:block}
.mode{order:3;display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink3);cursor:pointer;padding:0;flex:none}
.mode:hover{border-color:var(--acc);color:var(--accT)}
.mode svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mode .moon{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mode .sun{display:none}:root:not([data-theme="light"]) .mode .moon{display:block}}
:root[data-theme="dark"] .mode .sun{display:none}:root[data-theme="dark"] .mode .moon{display:block}
.logo b{color:var(--accT)}
.logo .lt{display:grid;line-height:1.15}
.slogan{font-style:italic;font-weight:600;font-size:12.5px;letter-spacing:.01em;color:var(--accT)}
.top nav{order:2;margin-left:auto;display:flex;align-items:center;gap:2px}
.top nav a{text-decoration:none;padding:8px 13px;border-radius:12px;font-weight:600;font-size:14.5px;color:var(--ink3)}
.top nav a:hover{background:var(--bg);color:var(--ink)}
.top nav a.login{background:var(--acc);color:var(--on);border-radius:12px;padding:9px 18px;margin-left:8px;box-shadow:0 6px 16px rgba(214,150,0,.28)}
.top nav a.login:hover{background:var(--accH)}
.lang{order:3;text-decoration:none;font-weight:700;font-size:13.5px;border-radius:10px;padding:7px 12px;background:var(--bg);border:1px solid var(--line);white-space:nowrap}
.lang:hover{border-color:var(--acc);color:var(--accT)}
.lang[lang=bn]{font-family:"Hind Siliguri",sans-serif}
.nav-t,.burger{display:none}
@media (max-width:960px){
  .burger{order:4;display:grid;gap:5px;padding:10px;cursor:pointer;border-radius:12px}
  .burger i{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px}
  .lang{margin-left:auto}
  .logo{font-size:15.5px}.logo img{height:40px}.slogan{font-size:11.5px}
}
@media (max-width:480px){
  .top .in{gap:8px}
  .logo{gap:7px;font-size:14px;min-width:0;flex:0 1 auto}.logo img{height:34px}.slogan{font-size:10.5px}
  .logo .lt{min-width:0;overflow:hidden}
  .lang{padding:5px 9px;font-size:12.5px}
  .mode{width:32px;height:32px}
  .burger{padding:6px}
  .top nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;padding:10px max(20px,env(safe-area-inset-left,0px)) 18px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 18px 30px rgba(16,24,40,.12)}
  .nav-t:checked ~ nav{display:flex}
  .top nav a{padding:12px 14px}
  .top nav a.login{margin:8px 0 0;text-align:center}
}

/* hero: one big gradient panel like the CRM's "Call next" card */
.hero{padding-block:22px 8px}
.hero-card{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:36px;align-items:center;background:var(--grad);color:var(--on);border:1px solid #f6dd92;border-radius:28px;padding:56px 52px;overflow:hidden;box-shadow:0 24px 50px rgba(214,150,0,.25)}
.hero-card::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% -10%,rgba(255,255,255,.22),transparent 60%),radial-gradient(500px 260px at -10% 110%,rgba(255,192,0,.45),transparent 60%);pointer-events:none}
.hero-card::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(120,80,0,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(120,80,0,.06) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(90deg,transparent,#000 70%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none}
.hero-copy,.hero-side{position:relative;z-index:1;min-width:0}
.hero .kicker{color:#9a6700}
.hero h1{font-size:clamp(34px,4.6vw,56px)}
.hero .sub{font-size:17.5px;opacity:.9;max-width:50ch;margin-top:16px}
.search{margin-top:28px;max-width:620px}
.tabs{display:inline-flex;gap:4px;background:rgba(255,255,255,.6);border-radius:12px;padding:4px;margin-bottom:10px}
.tabs input{position:absolute;opacity:0;pointer-events:none}
.tabs span{display:block;padding:7px 18px;border-radius:9px;cursor:pointer;font-weight:700;font-size:14.5px}
.tabs input:checked + span{background:var(--panel);color:var(--accT)}
.tabs input:focus-visible + span{outline:3px solid var(--accT)}
.bar{display:flex;align-items:center;gap:6px;background:var(--panel);border-radius:16px;padding:6px 6px 6px 14px;box-shadow:0 18px 40px rgba(110,75,0,.18)}
.bar .lens{width:20px;height:20px;flex:none;fill:none;stroke:#8a94a8;stroke-width:2.2;stroke-linecap:round}
.bar input{flex:1;min-width:0;border:0;font:inherit;font-size:16px;padding:11px 6px;color:var(--ink);background:transparent}
.bar input:focus{outline:none}
.bar button{border:0;background:var(--acc);color:var(--on);font:inherit;font-weight:700;padding:12px 22px;border-radius:12px;cursor:pointer}
.bar button:hover{background:var(--accH)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.quick a{text-decoration:none;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(150,100,0,.18)}
.quick a:hover{background:#fff}
.panel{background:var(--panel);color:var(--ink);border-radius:22px;padding:18px;box-shadow:0 24px 50px rgba(110,75,0,.18)}
.p-head{display:flex;justify-content:space-between;align-items:baseline;margin:2px 4px 12px;font-weight:800}
.p-head small{color:var(--ink2);font-weight:600;font-size:13px}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tiles a{display:grid;justify-items:center;gap:2px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:14px 8px;font-size:13.5px;font-weight:600;color:var(--ink3);transition:transform .15s,box-shadow .15s}
.tiles a b{font-size:28px;font-weight:800;line-height:1.1;color:var(--c)}
.tiles a:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.call{display:flex;align-items:center;gap:12px;margin-top:12px;text-decoration:none;background:var(--grad);color:var(--on);border-radius:16px;padding:12px 14px;font-weight:800;font-size:17px}
.call small{display:block;font-size:12px;font-weight:600;opacity:.85}
.call .ph{width:40px;height:40px;border-radius:50%;background:var(--acc);display:grid;place-items:center;flex:none}
.call .ph svg{width:19px;height:19px;fill:none;stroke:var(--on);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.call i{margin-left:auto;font-style:normal;font-size:24px;opacity:.8}
.panel .ticks{margin-top:14px;gap:6px;font-size:14px}
@media (max-width:900px){
  .hero{padding-block:14px 4px}
  .hero-card{grid-template-columns:1fr;padding:34px 22px;border-radius:24px;gap:26px}
}
@media (max-width:520px){
  .bar{flex-wrap:wrap;padding:6px}
  .bar .lens{display:none}
  .bar input{flex:1 1 100%;padding:12px 10px}
  .bar button{flex:1}
}

/* sections */
.sec{padding-block:64px}
.band{background:var(--panel);border-block:1px solid var(--line)}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.more{color:var(--accT);font-weight:700;text-decoration:none;font-size:15px}
.more:hover{text-decoration:underline}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.two > *{min-width:0}
.two h2{margin-bottom:14px}
@media (max-width:860px){.two{grid-template-columns:1fr;gap:28px}}
.mt{margin-top:26px;margin-bottom:12px}
.ticks{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:30px}
.ticks li::before{content:"";position:absolute;left:0;top:.3em;width:19px;height:19px;border-radius:50%;background:var(--okS) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}

/* areas */
.area-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:960px){.area-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.area-grid{grid-template-columns:1fr}}
.area{display:flex;align-items:center;gap:12px;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;transition:border-color .15s,box-shadow .15s,transform .15s}
.area:hover{border-color:var(--line2);box-shadow:var(--sh);transform:translateY(-2px)}
.area .pin{width:40px;height:40px;border-radius:12px;background:var(--tint);display:grid;place-items:center;flex:none}
.area .pin svg{width:20px;height:20px;fill:none;stroke:var(--accT);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.area .at{display:grid;min-width:0}
.area b{font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.area small{color:var(--ink2);font-size:13px}
.area i{margin-left:auto;font-style:normal;color:var(--ink4);font-size:22px}

/* panels and forms (CRM inputs: soft grey, no border) */
.card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--sh)}
.enq{display:grid;gap:14px}
.enq .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.enq .row{grid-template-columns:1fr}}
.enq label{display:grid;gap:6px;font-weight:700;font-size:13.5px;color:var(--ink3)}
.enq .opt{font-weight:500;color:var(--ink2)}
.enq input,.enq select,.enq textarea{font:inherit;font-size:15.5px;padding:12px 14px;border:1.5px solid transparent;border-radius:12px;background:var(--bg);color:var(--ink);width:100%}
.enq input:focus,.enq select:focus,.enq textarea:focus{outline:none;background:var(--panel);border-color:var(--acc);box-shadow:0 0 0 4px rgba(214,150,0,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok{background:var(--okS);color:var(--ok);border-radius:12px;padding:12px 14px}
.err{background:var(--badS);color:var(--bad);border-radius:12px;padding:12px 14px}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;font-size:15.5px;text-decoration:none;text-align:center;
  background:var(--acc);color:var(--on);padding:13px 22px;border-radius:12px;transition:background .15s,box-shadow .15s;box-shadow:0 6px 16px rgba(214,150,0,.25)}
.btn:hover{background:var(--accH)}
.btn.ghost{background:var(--panel);color:var(--accT);box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--acc)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.cta.center{align-self:center;justify-content:flex-end;margin-top:0}
@media (max-width:860px){.cta.center{justify-content:flex-start}}

/* CRM section + the drawn CRM screen */
.crm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.crm h2{margin-bottom:14px}
@media (max-width:900px){.crm{grid-template-columns:1fr}}
.mock{border-radius:22px;background:var(--bg);border:1px solid var(--line);box-shadow:0 30px 60px rgba(16,24,40,.14);overflow:hidden;font-size:13px;min-width:0}
.m-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
.m-bar i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.m-bar span{margin-left:10px;color:var(--ink2);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-body{display:grid;grid-template-columns:58px 1fr;min-height:300px}
.m-side{background:var(--panel);border-right:1px solid var(--line);display:grid;gap:12px;align-content:start;padding:16px 12px}
.m-side b{height:9px;border-radius:4px;background:var(--line)}
.m-side b:first-child{background:var(--tint);height:22px;border-radius:8px}
.m-main{padding:16px;display:grid;gap:10px;align-content:start;min-width:0}
.m-hi{font-weight:800;font-size:19px;letter-spacing:-.02em}
.m-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.m-tiles div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 4px;text-align:center;color:var(--ink2);font-size:11px;font-weight:600}
.m-tiles span{display:block;font-size:19px;font-weight:800;color:var(--c)}
.m-call{background:var(--grad);color:var(--on);border-radius:12px;padding:11px 14px;font-weight:700}
.m-rows{display:grid;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.m-rows div{display:grid;grid-template-columns:96px 1fr 22px;gap:10px;align-items:center}
.m-rows span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-rows em{height:7px;border-radius:4px;background:var(--acc)}
.m-rows b{text-align:right}
/* the CRM picture plays through its features (partials/mock) */
.m-bar .m-cap{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:700;color:var(--accT);background:var(--tint);border-radius:999px;padding:3px 10px;white-space:nowrap}
.m-bar span{min-width:0}
.m-side b{transition:background .3s}
.m-side b.on{background:var(--acc)}
.m-main{display:grid;grid-template-columns:minmax(0,1fr)}
.m-sc{grid-area:1/1;display:grid;gap:10px;align-content:start;min-width:0;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s,transform .45s,visibility 0s .45s}
.m-sc.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s}
.m-hi small{font-size:13px;font-weight:700;color:var(--accT);background:var(--tint);border-radius:999px;padding:1px 9px;vertical-align:3px}
.m-sc.on .m-in{animation:mIn .5s both;animation-delay:var(--d,0s)}
@keyframes mIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.m-list{display:grid;gap:7px}
.m-li{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.m-li span{flex:1;min-width:0;display:grid}
.m-li span b,.m-li span small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-li small{color:var(--ink2);font-size:11px}
.m-li i{font-style:normal;font-size:11px;font-weight:700;border-radius:999px;padding:4px 10px;white-space:nowrap}
.m-act{position:relative;display:grid;justify-items:end;font-style:normal}
.m-ph{background:#22c55e;color:#fff;grid-area:1/1}
.m-ok{background:#dcfce7;color:#166534;grid-area:1/1;opacity:0}
.m-sc.on .m-done{animation:mIn .5s both,mDone .6s 1.9s both}
.m-sc.on .m-done .m-ph{animation:mTap .9s .7s both,mOut .3s 1.8s both}
.m-sc.on .m-done .m-ok{animation:mIn .4s 1.9s both}
@keyframes mTap{30%{transform:scale(.9);box-shadow:0 0 0 6px rgba(34,197,94,.3)}100%{transform:none;box-shadow:0 0 0 14px rgba(34,197,94,0)}}
@keyframes mOut{to{opacity:0;transform:scale(.8)}}
@keyframes mDone{to{background:color-mix(in srgb,#22c55e 9%,var(--panel));border-color:#86efac}}
.m-bars{display:grid;gap:11px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 12px}
.m-bars div{display:grid;grid-template-columns:110px 1fr 26px;gap:10px;align-items:center}
.m-bars span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:6px}
.m-bars span i{width:7px;height:7px;border-radius:50%;background:var(--ink4);flex:none}
.m-bars span i.on{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.2)}
.m-bars em{height:9px;border-radius:5px;background:var(--acc);width:var(--w)}
.m-sc.on .m-bars em{animation:mGrow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
@keyframes mGrow{from{width:0}}
.m-bars b{text-align:right}
.m-note{color:var(--ink2);font-size:12px;font-weight:600}
.m-chips{display:flex;gap:6px;flex-wrap:wrap}
.m-chips i{font-style:normal;font-size:11.5px;font-weight:700;border:1px solid var(--line);background:var(--panel);border-radius:10px;padding:6px 10px;color:var(--ink2)}
.m-chips i.on{border-color:var(--acc);background:var(--tint);color:var(--ink)}
.m-sc.on .m-chips i.on{animation:mPick .5s .2s both}
@keyframes mPick{from{background:var(--panel);border-color:var(--line)}}
.m-sum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px}
.m-sum div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.m-sum div:first-child{border-top:0}
.m-sum span{color:var(--ink2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-sum .b span,.m-sum .b b{color:var(--ink);font-weight:800}
.m-pdf,.m-call{border-radius:12px}
.m-pdf{background:var(--grad);color:var(--on);padding:10px 14px;font-weight:700}
.m-coll{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.m-coll span{flex:1;display:grid;min-width:0}
.m-coll span b{font-size:18px}
.m-coll small{color:var(--ink2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-coll i{font-style:normal;font-size:11px;font-weight:700;background:#dcfce7;color:#166534;border-radius:999px;padding:4px 10px;white-space:nowrap}
.m-inc{display:grid;gap:7px}
.m-inc div{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,#22c55e 8%,var(--panel));border:1px solid color-mix(in srgb,#22c55e 25%,var(--line));border-radius:10px;padding:7px 10px}
.m-inc i{font-style:normal;font-size:10.5px;font-weight:800;background:var(--acc);color:var(--on);border-radius:6px;padding:2px 6px}
.m-inc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-dim{opacity:.45}
.m-sc .m-push{display:flex;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;box-shadow:0 12px 28px rgba(16,24,40,.16)}
.m-push i{font-style:normal;font-size:18px}
.m-push span{display:grid;min-width:0}
.m-push small{color:var(--ink2);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-sc.on .m-push{animation:mDrop .6s cubic-bezier(.2,.9,.3,1.2) .4s both}
.m-sc.on .m-p2{animation-delay:1.4s}
@keyframes mDrop{from{opacity:0;transform:translateY(-26px) scale(.96)}}
.m-dots{display:flex;justify-content:center;gap:4px;padding:8px;background:var(--panel);border-top:1px solid var(--line)}
.m-dots button{border:0;background:none;padding:6px 3px;cursor:pointer}
.m-dots i{display:block;width:8px;height:8px;border-radius:999px;background:var(--line2);transition:width .3s,background .3s}
.m-dots .on i{width:22px;background:var(--acc)}
.m-still .m-sc *,.m-still .m-sc{animation:none!important;transition:none!important}
@media (max-width:480px){.m-body{grid-template-columns:40px 1fr}.m-side{padding:14px 8px}.m-bars div{grid-template-columns:86px 1fr 22px}.m-bar span{display:none}.m-hi{font-size:17px}}

/* inner pages */
.page-head{padding-block:22px 0}
.page-head > .in{background:var(--panel);border:1px solid var(--line);border-radius:28px;padding:44px 44px 40px;box-shadow:var(--sh)}
.page-head h1{font-size:clamp(30px,4vw,48px);margin-bottom:14px}
.page-head .two{align-items:center}
@media (max-width:700px){.page-head > .in{margin-inline:12px;padding:28px 20px;border-radius:22px}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;background:var(--panel)}
.chips a.on,.chips a:hover{border-color:var(--acc);color:var(--accT)}
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
@media (max-width:900px){.feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feat{grid-template-columns:1fr}}
.f{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:8px;align-content:start}
.f::before{content:"";width:36px;height:36px;border-radius:11px;background:var(--tint) no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b07d00' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");margin-bottom:4px}
.soon .f::before{background-color:var(--warnS);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}
.f p{color:var(--ink2);font-size:15px}
.soon-tag{justify-self:start;font-size:12px;font-weight:700;color:var(--warn);background:var(--warnS);border-radius:999px;padding:1px 10px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:10px}
.plan.best{border:2px solid var(--acc);box-shadow:0 20px 40px rgba(214,150,0,.14)}
.plan .tag{position:absolute;top:-13px;left:24px;background:var(--grad);color:var(--on);font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 12px}
.plan h3{font-weight:800;font-size:26px;letter-spacing:-.02em}
.plan .users{color:var(--accT);font-weight:700}
.plan p{color:var(--ink2)}
.plan .price{font-size:20px;font-weight:800;margin-top:6px}
.plan .ticks{margin:6px 0 10px}
.note-small{margin-top:26px;color:var(--ink2)}
.contact{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:26px}
.contact .line{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
.contact .line:last-child{border-bottom:0}
.contact .line span{color:var(--ink2)}
.contact .line a{text-decoration:none}
.contact h2{margin-bottom:6px}

/* property cards (CRM panels) */
.pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:960px){.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:10px;transition:box-shadow .2s,transform .2s;min-width:0}
.pcard:hover{box-shadow:0 18px 40px rgba(16,24,40,.1);transform:translateY(-3px)}
.pimg{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,var(--ph1),var(--ph2));overflow:hidden;border-radius:15px}
.pimg img{width:100%;height:100%;object-fit:cover;display:block}
.nophoto{position:absolute;inset:auto 0 0 0;height:75%;display:flex;align-items:flex-end;gap:6px;padding:0 14px;opacity:.6}
.nophoto i{flex:1;background:var(--panel);border-radius:3px 3px 0 0}
.tagp,.tagf{position:absolute;top:10px;font-size:12px;font-weight:700;border-radius:8px;padding:3px 9px}
.tagp{left:10px;background:var(--panel);color:var(--accT)}
.tagf{right:10px;background:#fbbf24;color:#3b2600}
.pbody{display:grid;gap:3px;padding:14px 8px 8px}
.price{font-size:21px;font-weight:800;color:var(--accT);letter-spacing:-.01em}
.price small,.lprice small{font-size:13.5px;font-weight:600;color:var(--ink2)}
.ptitle{font-weight:700;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ploc{color:var(--ink2);font-size:14.5px}
.pfacts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pfacts span{font-size:12.5px;font-weight:600;background:var(--bg);border-radius:8px;padding:3px 9px;color:var(--ink3)}

/* search page */
.page-head.slim > .in{padding:34px 36px 30px}
.page-head.slim h1{font-size:clamp(26px,3.4vw,40px);margin-bottom:20px}
.tabs.light{background:var(--bg);border:1px solid var(--line)}
.tabs.light span{color:var(--ink2)}
.tabs.light input:checked + span{color:var(--on);background:var(--acc)}
.fbar{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) auto;gap:10px;align-items:end}
.fbar label{display:grid;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
body.bn .fbar label{text-transform:none;letter-spacing:0;font-size:14px}
.fbar input,.fbar select{font:inherit;font-size:15px;padding:11px 12px;border:1.5px solid transparent;border-radius:12px;background:var(--bg);color:var(--ink);width:100%;text-transform:none;letter-spacing:0;font-weight:500}
.fbar input:focus,.fbar select:focus{outline:none;border-color:var(--acc);background:var(--panel)}
.fbar .btn{padding:12px 22px}
@media (max-width:960px){.fbar{grid-template-columns:repeat(2,minmax(0,1fr))}.fbar .wide{grid-column:1/-1}.fbar .btn{grid-column:1/-1}}
@media (max-width:700px){.page-head.slim > .in{padding:24px 18px}}
.results{padding-block:34px 64px}
.count{font-weight:700}
.sort label{display:flex;gap:8px;align-items:center;font-size:14.5px;color:var(--ink2);font-weight:600}
.sort select{font:inherit;font-size:14.5px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.pager{display:flex;gap:14px;align-items:center;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pager .btn{padding:9px 18px;font-size:15px}
.empty{text-align:center;padding:40px 20px;display:grid;gap:14px;justify-items:center;background:var(--panel);border:1px dashed var(--line2);border-radius:22px}
.empty .lead{margin:0 auto}

/* one property */
.lhead{padding-block:22px 12px}
.lwrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;padding-bottom:60px}
@media (max-width:960px){.lwrap{grid-template-columns:1fr}}
.lmain{background:var(--panel);border:1px solid var(--line);border-radius:24px;padding:12px 12px 26px}
.lmain > :not(.gal):not(.thumbs){margin-inline:14px}
.gal{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:16px;aspect-ratio:16/10;background:var(--ph1);scrollbar-width:none}
.gal::-webkit-scrollbar{display:none}
.gal img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.gal.none{position:relative;background:linear-gradient(180deg,var(--ph1),var(--ph2))}
.thumbs{display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:4px}
.thumbs a{flex:0 0 88px;height:64px;border-radius:10px;overflow:hidden;opacity:.85}
.thumbs a:hover{opacity:1}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.ltitle{margin-top:22px}
.ltitle .kicker{margin-bottom:8px}
.ltitle h1{font-size:clamp(26px,3.2vw,38px);margin-bottom:8px}
.lprice{font-size:30px;font-weight:800;color:var(--accT);margin-top:10px;letter-spacing:-.02em}
.sold{color:var(--bad)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:24px 0}
.facts div{background:var(--bg);border-radius:14px;padding:12px 14px}
.facts dt{font-size:12px;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
body.bn .facts dt{text-transform:none;letter-spacing:0;font-size:14px}
.facts dd{margin:0;font-weight:700}
.h3{font-size:20px;font-weight:800;margin:28px 0 4px;letter-spacing:-.01em}
.ticks.cols2{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));margin-top:14px}
.desc{color:var(--ink2);margin-top:10px;max-width:70ch}
.lside .sticky{position:sticky;top:86px}
.who{display:grid;margin-bottom:14px}
.who small{color:var(--ink2);font-size:14px}
.calls{display:grid;grid-template-columns:1fr auto;gap:10px}
.calls .btn{padding:12px 16px}
.calls .wa{color:#128c4b;box-shadow:inset 0 0 0 1.5px #128c4b;background:var(--panel)}
.lside h3.mt{margin-top:22px}

/* footer: the CRM's dark theme */
.foot{background:var(--foot);border-top:1px solid var(--line);color:#aab3c5;padding-block:56px 26px;font-size:15px;margin-top:20px}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
@media (max-width:820px){.foot .cols{grid-template-columns:1fr 1fr}}
.foot .fb img{height:58px;width:auto;margin-bottom:10px}
.foot .fb p{max-width:34ch}
.foot .fb .slogan{font-size:15px;margin:-2px 0 10px;color:#ffc000}
.foot h4{color:#fff;margin:4px 0 12px;font-size:15px;font-weight:700}
.foot .cols > div{display:grid;gap:7px;align-content:start}
.foot a{text-decoration:none}
.foot a:hover{color:#fff}
.foot .copy{margin-top:40px;padding-top:18px;border-top:1px solid var(--dline);opacity:.75;font-size:13.5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* social links (footer, contact) */
.social{display:flex;gap:10px;margin-top:14px}
.social a{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.1);color:#fff;transition:background .15s,transform .15s}
.social a:hover{transform:translateY(-2px)}.social svg{width:20px;height:20px;fill:currentColor}
.social .so-facebook:hover{background:#1877f2}.social .so-youtube:hover{background:#ff0000}.social .so-instagram:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}
.social.on-light a{background:var(--soft,#eef1f7);color:var(--ink,#151a27)}.social.on-light a:hover{color:#fff}

/* listing: price list (asking prices) and installment calculator (partials/prices) */
.pl{margin:26px 0 0}
.pl h2{margin:0 0 4px}
.pl .sub{color:var(--ink2);font-size:14px;margin:0 0 12px}
.ptab{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);font-size:15px}
.ptab th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink2);text-align:left;padding:11px 14px;background:var(--soft)}
.ptab td{padding:12px 14px;border-top:1px solid var(--line)}
.ptab td.n,.ptab th.n{text-align:right;white-space:nowrap}
.ptab td b{font-size:16px}
.ptab tr.pg td{background:var(--soft);font-weight:700;font-size:13px;color:var(--accT);padding:8px 14px}
.calc{margin-top:22px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);box-shadow:var(--sh);overflow:hidden}
.calc-h{padding:16px 20px;background:var(--grad);color:var(--on)}
.calc-h b{font-size:18px}.calc-h span{display:block;font-size:13px;opacity:.8}
.calc-b{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;padding:20px}
@media(max-width:760px){.calc-b{grid-template-columns:minmax(0,1fr)}}
.cl{font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 7px}
.cchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.cchips button{font:inherit;font-size:14px;font-weight:700;padding:8px 13px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.cchips button.on{border-color:var(--acc);background:var(--tint)}
.step{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px;background:var(--panel)}
.step button{font:inherit;font-size:20px;width:44px;height:42px;border:0;background:var(--soft);color:var(--ink);cursor:pointer}
.step input{width:84px;border:0;text-align:center;font:inherit;font-size:17px;font-weight:700;background:transparent;color:var(--ink);padding:0}
.rng{width:100%;accent-color:var(--acc2)}
.rngv{display:flex;justify-content:space-between;font-size:12px;color:var(--ink2)}
.res{background:var(--soft);border:1px solid var(--line);border-radius:16px;padding:14px 16px;display:grid;gap:4px;align-content:start}
.res div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;font-size:15px}
.res div b{font-weight:600;white-space:nowrap}
.res .t{border-top:1px dashed var(--line2);margin-top:4px;padding-top:10px;align-items:center}
.res .big{font-size:24px;font-weight:800;color:var(--accT)}
.res .note{font-size:12px;color:var(--ink2);margin:6px 0 0}
.res .btn{margin-top:8px;text-align:center;width:100%}
