/* ============================================================
   Barina Green City — design system
   One accent (green), quiet type, generous whitespace.
   Built on Bootstrap 5; this file adds the brand layer.
   ============================================================ */
:root{
  --green:      #15803d;
  --green-600:  #16a34a;
  --green-700:  #0f5c2e;
  --green-800:  #0b3d20;
  --leaf:       #22c55e;
  --green-soft: #e8f3ec;

  --ink:    #0f2417;   /* deep forest — headings */
  --ink-2:  #34503f;   /* body */
  --muted:  #6b7c72;   /* secondary text */
  --white:  #ffffff;
  --surface:#f5f8f5;   /* page tint */
  --surface-2:#eef3ef;
  --line:   #e3ebe5;
  --line-2: #eef2ef;
  --gold:   #b8893b;   /* founder accent */

  --radius:   16px;
  --radius-sm:11px;
  --radius-lg:24px;
  --shadow:   0 1px 2px rgba(15,36,23,.04), 0 12px 30px -12px rgba(15,36,23,.14);
  --shadow-sm:0 1px 2px rgba(15,36,23,.05), 0 6px 16px -10px rgba(15,36,23,.16);
  --ring:     0 0 0 4px rgba(21,128,61,.12);
  --ff-display:'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body:   'Inter', system-ui, -apple-system, sans-serif;
}

*{ scroll-behavior:smooth; }
body{
  font-family:var(--ff-body);
  color:var(--ink-2);
  background:var(--white);
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.display{ font-family:var(--ff-display); color:var(--ink); font-weight:800; letter-spacing:-.02em; }
a{ color:var(--green); text-decoration:none; }
a:hover{ color:var(--green-700); }
.section{ padding:76px 0; }
.container-x{ max-width:1200px; margin:0 auto; padding:0 20px; }
.text-muted-x{ color:var(--muted)!important; }
.eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); display:inline-flex; align-items:center; gap:8px;
}
.sec-title{ font-size:clamp(26px,3.4vw,38px); line-height:1.12; margin:10px 0 8px; }
.sec-sub{ color:var(--muted); font-size:15.5px; max-width:620px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn-green{
  background:var(--green); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:12px 22px; font-weight:700; font-size:14.5px; display:inline-flex;
  align-items:center; gap:9px; transition:.18s; box-shadow:var(--shadow-sm);
}
.btn-green:hover{ background:var(--green-700); color:#fff; transform:translateY(-1px); }
.btn-ghost{
  background:#fff; color:var(--ink); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 20px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:9px; transition:.18s;
}
.btn-ghost:hover{ border-color:var(--green); color:var(--green-700); }
.btn-lite{
  background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.28);
  border-radius:var(--radius-sm); padding:12px 20px; font-weight:700; font-size:14.5px;
  display:inline-flex; align-items:center; gap:9px; backdrop-filter:blur(4px); transition:.18s;
}
.btn-lite:hover{ background:rgba(255,255,255,.24); color:#fff; }
.pill{ border-radius:999px!important; }

/* ── Top utility bar ─────────────────────────────────────── */
.topbar{ background:var(--green-800); color:#cfe6d6; font-size:12.5px; }
.topbar a{ color:#eafaef; }
.topbar .container-x{ display:flex; justify-content:space-between; align-items:center; gap:14px; height:40px; }
.topbar .tb-left{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.topbar .tb-left span{ display:inline-flex; align-items:center; gap:7px; }
.topbar .tb-right{ display:flex; gap:14px; align-items:center; }
.topbar .tb-right a{ opacity:.85; } .topbar .tb-right a:hover{ opacity:1; }
@media(max-width:768px){ .topbar .tb-left span.hide-sm{ display:none; } }

/* ── Navbar ──────────────────────────────────────────────── */
.nav-x{ background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:1030; }
.nav-x .container-x{ display:flex; align-items:center; height:70px; gap:18px; }
.brand{ display:flex; align-items:center; gap:11px; font-family:var(--ff-display); font-weight:800; color:var(--ink); font-size:19px; }
.brand .logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--green-600),var(--green-800)); font-size:20px;
}
.brand small{ display:block; font-family:var(--ff-body); font-weight:500; font-size:11px; color:var(--muted); letter-spacing:.04em; }
.nav-links{ display:flex; gap:6px; margin-left:14px; list-style:none; padding:0; margin-bottom:0; }
.nav-links a{ color:var(--ink-2); font-weight:600; font-size:14.5px; padding:9px 13px; border-radius:9px; transition:.15s; }
.nav-links a:hover, .nav-links a.active{ color:var(--green-700); background:var(--green-soft); }
.nav-cta{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.nav-icon{ width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink); }
.nav-icon:hover{ border-color:var(--green); color:var(--green); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:40px; font-size:20px; color:var(--ink); }
@media(max-width:992px){
  .nav-links{ display:none; }
  .nav-toggle{ display:grid; place-items:center; margin-left:auto; }
  .nav-cta .hide-md{ display:none; }
}
/* mobile drawer */
.mnav{ display:none; border-top:1px solid var(--line); background:#fff; }
.mnav.open{ display:block; }
.mnav a{ display:block; padding:13px 20px; color:var(--ink-2); font-weight:600; border-bottom:1px solid var(--line-2); }

/* ── Hero ────────────────────────────────────────────────── */
.hero{ background:linear-gradient(180deg,var(--surface),#fff); position:relative; overflow:hidden; }
.hero .container-x{ display:grid; grid-template-columns:1.04fr .96fr; gap:46px; align-items:center; padding-top:64px; padding-bottom:64px; }
.hero-title{ font-size:clamp(34px,5vw,58px); line-height:1.04; }
.hero-title .accent{ color:var(--green); }
.hero-sub{ font-size:17px; color:var(--ink-2); margin:20px 0 26px; max-width:520px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-trust{ display:flex; align-items:center; gap:14px; margin-top:26px; }
.avatars{ display:flex; } .avatars img{ width:38px; height:38px; border-radius:50%; border:2px solid #fff; margin-left:-10px; object-fit:cover; }
.avatars img:first-child{ margin-left:0; }
.hero-trust small{ color:var(--muted); font-size:13px; }
.hero-trust strong{ color:var(--ink); }
.hero-visual{ position:relative; }
.hero-img{ width:100%; height:490px; object-fit:cover; border-radius:var(--radius-lg); box-shadow:var(--shadow); background:linear-gradient(135deg,#bfe0c9,#7bbf93); }
.hero-badge{
  position:absolute; left:-14px; bottom:34px; background:#fff; border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px 16px; display:flex; gap:12px; align-items:center; max-width:270px;
}
.hero-badge .hb-ic{ width:44px; height:44px; border-radius:12px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-size:20px; }
.hero-badge .hb-t{ font-family:var(--ff-display); font-weight:800; color:var(--ink); font-size:14px; }
.hero-badge .hb-p{ color:var(--green-700); font-weight:800; font-size:15px; }
.hero-badge .hb-s{ color:var(--muted); font-size:12px; }
.hero-chip{
  position:absolute; right:-6px; top:26px; background:#fff; border-radius:999px; padding:8px 15px;
  box-shadow:var(--shadow-sm); font-weight:700; font-size:13px; color:var(--ink); display:flex; gap:8px; align-items:center;
}
@media(max-width:992px){
  .hero .container-x{ grid-template-columns:1fr; gap:30px; }
  .hero-img{ height:360px; }
  .hero-visual{ order:-1; }
}

/* ── Search bar ──────────────────────────────────────────── */
.searchwrap{ margin-top:-42px; position:relative; z-index:5; }
.searchbar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:14px; display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:6px; align-items:end;
}
.searchbar .fld{ padding:6px 12px; border-right:1px solid var(--line-2); }
.searchbar .fld:last-of-type{ border-right:none; }
.searchbar label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:3px; }
.searchbar input, .searchbar select{ border:none; outline:none; width:100%; font-size:14.5px; color:var(--ink); font-weight:600; background:transparent; padding:2px 0; }
.searchbar .btn-green{ height:52px; justify-content:center; }
@media(max-width:992px){
  .searchbar{ grid-template-columns:1fr 1fr; }
  .searchbar .fld{ border-right:none; border-bottom:1px solid var(--line-2); padding-bottom:10px; }
  .searchbar .btn-green{ grid-column:1 / -1; }
}
@media(max-width:560px){ .searchbar{ grid-template-columns:1fr; } }

/* ── Category chips ──────────────────────────────────────── */
.cats{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.cat{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px 14px;
  text-align:center; transition:.18s; display:block; color:var(--ink);
}
.cat:hover{ border-color:var(--green); box-shadow:var(--shadow-sm); transform:translateY(-3px); color:var(--ink); }
.cat .ic{ width:52px; height:52px; margin:0 auto 12px; border-radius:14px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-size:24px; }
.cat .nm{ font-family:var(--ff-display); font-weight:700; font-size:14.5px; }
.cat .ct{ color:var(--muted); font-size:12.5px; margin-top:2px; }
@media(max-width:992px){ .cats{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:560px){ .cats{ grid-template-columns:repeat(2,1fr); } }

/* ── Listing cards ───────────────────────────────────────── */
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:992px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .grid-3,.grid-4{ grid-template-columns:1fr; } }

.lcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.18s; }
.lcard:hover{ box-shadow:var(--shadow); transform:translateY(-4px); border-color:var(--line); }
.lcard .thumb{ position:relative; height:210px; background:linear-gradient(135deg,#cfe6d6,#8fc4a2); overflow:hidden; }
.lcard .thumb img{ width:100%; height:100%; object-fit:cover; }
.lcard .badge-type{
  position:absolute; top:12px; left:12px; background:var(--green); color:#fff; font-size:11.5px;
  font-weight:700; padding:5px 11px; border-radius:999px; letter-spacing:.02em;
}
.lcard .badge-type.lease{ background:var(--gold); }
.lcard .badge-type.rent{ background:#2563eb; }
.lcard .fav{ position:absolute; top:11px; right:11px; width:34px; height:34px; border-radius:50%; background:#fff; display:grid; place-items:center; color:var(--muted); box-shadow:var(--shadow-sm); }
.lcard .fav:hover{ color:#e0245e; }
.lcard .body{ padding:16px 17px 18px; }
.lcard .price{ font-family:var(--ff-display); font-weight:800; color:var(--green-700); font-size:19px; }
.lcard .price small{ font-weight:600; color:var(--muted); font-size:12.5px; }
.lcard .title{ font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:16px; margin:5px 0 4px; }
.lcard .loc{ color:var(--muted); font-size:13px; display:flex; align-items:center; gap:5px; }
.lcard .meta{ display:flex; gap:16px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line-2); color:var(--ink-2); font-size:12.5px; font-weight:600; }
.lcard .meta span{ display:inline-flex; align-items:center; gap:6px; }
.lcard .meta i{ color:var(--green); }

/* ── Enterprise cards ────────────────────────────────────── */
.ecard{ position:relative; border-radius:var(--radius); overflow:hidden; height:230px; display:block; color:#fff; box-shadow:var(--shadow-sm); }
.ecard img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.ecard:hover img{ transform:scale(1.06); }
.ecard::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,61,32,0) 30%,rgba(11,61,32,.86)); }
.ecard .ov{ position:absolute; left:0; right:0; bottom:0; padding:18px; z-index:2; }
.ecard .ov .ic{ font-size:20px; opacity:.9; }
.ecard .ov h4{ color:#fff; font-size:17px; margin:4px 0 3px; }
.ecard .ov p{ color:rgba(255,255,255,.85); font-size:12.5px; margin:0; }
.ecard .tag{ position:absolute; top:12px; right:12px; z-index:2; background:rgba(255,255,255,.9); color:var(--green-800); font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.06em; }

/* ── Membership tiers (3 onboarding categories) ──────────── */
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media(max-width:900px){ .tiers{ grid-template-columns:1fr; } }
.tier{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; transition:.2s; position:relative; }
.tier:hover{ box-shadow:var(--shadow); transform:translateY(-4px); }
.tier .ic{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px; background:var(--green-soft); color:var(--green-700); margin-bottom:16px; }
.tier.founder{ background:linear-gradient(180deg,#12331f,#0b2417); border-color:transparent; color:#dbe9df; }
.tier.founder h3, .tier.founder .price{ color:#fff; }
.tier.founder .ic{ background:rgba(184,137,59,.2); color:var(--gold); }
.tier.founder .feat li{ color:#cfe0d5; }
.tier.founder .feat i{ color:var(--gold); }
.tier h3{ font-size:22px; margin:0 0 4px; }
.tier .lead-x{ color:var(--muted); font-size:14px; margin-bottom:16px; }
.tier.founder .lead-x{ color:#a9c3b3; }
.tier .feat{ list-style:none; padding:0; margin:0 0 22px; }
.tier .feat li{ display:flex; gap:10px; align-items:flex-start; padding:7px 0; font-size:14px; color:var(--ink-2); }
.tier .feat i{ color:var(--green); margin-top:3px; }
.tier .badge-tier{ position:absolute; top:22px; right:22px; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--gold); }

/* ── Stats band ──────────────────────────────────────────── */
.stats{ background:linear-gradient(135deg,var(--green-700),var(--green-800)); color:#fff; border-radius:var(--radius-lg); padding:38px 20px; }
.stats .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; text-align:center; }
.stats .n{ font-family:var(--ff-display); font-weight:800; font-size:34px; }
.stats .l{ color:#bfe0cb; font-size:13px; margin-top:2px; }
.stats .grid > div{ border-right:1px solid rgba(255,255,255,.14); }
.stats .grid > div:last-child{ border-right:none; }
@media(max-width:768px){ .stats .grid{ grid-template-columns:1fr 1fr; gap:26px; } .stats .grid > div:nth-child(2){ border-right:none; } }

/* ── Why-choose features ─────────────────────────────────── */
.feat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media(max-width:900px){ .feat-row{ grid-template-columns:1fr 1fr; } }
@media(max-width:520px){ .feat-row{ grid-template-columns:1fr; } }
.feat-item .ic{ width:52px; height:52px; border-radius:14px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-size:23px; margin-bottom:13px; }
.feat-item h5{ font-size:16px; margin-bottom:5px; }
.feat-item p{ color:var(--muted); font-size:13.5px; margin:0; }

/* ── Testimonials ────────────────────────────────────────── */
.tcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; height:100%; }
.tcard .stars{ color:#f5b301; font-size:14px; margin-bottom:10px; }
.tcard .q{ color:var(--ink-2); font-size:14.5px; line-height:1.7; }
.tcard .who{ display:flex; align-items:center; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid var(--line-2); }
.tcard .who img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.tcard .who .nm{ font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:14.5px; }
.tcard .who .rl{ color:var(--muted); font-size:12.5px; }

/* ── Newsletter / CTA ────────────────────────────────────── */
.cta-band{ background:linear-gradient(120deg,var(--green-700),var(--green-800)); border-radius:var(--radius-lg); padding:44px 40px; color:#fff; position:relative; overflow:hidden; }
.cta-band::before{ content:"\F5FF"; font-family:"bootstrap-icons"; position:absolute; right:-20px; bottom:-40px; font-size:220px; opacity:.07; }
.cta-band h3{ color:#fff; font-size:27px; }
.cta-band p{ color:#c8e2d1; margin:6px 0 0; }
.cta-form{ display:flex; gap:10px; max-width:440px; }
.cta-form input{ flex:1; border:none; border-radius:var(--radius-sm); padding:13px 16px; font-size:14.5px; }
.cta-form input:focus{ outline:none; box-shadow:var(--ring); }
@media(max-width:768px){ .cta-band{ padding:30px 24px; } .cta-form{ flex-direction:column; } }

/* ── Footer ──────────────────────────────────────────────── */
.footer{ background:#0a1f13; color:#9fb8a8; font-size:14px; padding:56px 0 0; }
.footer h6{ color:#fff; font-family:var(--ff-display); font-size:14px; letter-spacing:.02em; margin-bottom:16px; }
.footer a{ color:#9fb8a8; display:block; padding:5px 0; }
.footer a:hover{ color:#fff; }
.footer .brand{ color:#fff; margin-bottom:12px; }
.footer .brand small{ color:#8aa596; }
.footer .fcol p{ color:#8aa596; font-size:13.5px; }
.footer .social{ display:flex; gap:10px; margin-top:14px; }
.footer .social a{ width:38px; height:38px; border-radius:10px; background:rgba(255,255,255,.06); display:grid; place-items:center; padding:0; }
.footer .social a:hover{ background:var(--green); color:#fff; }
.footer .fbar{ border-top:1px solid rgba(255,255,255,.09); margin-top:40px; padding:20px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#7f9a8b; font-size:13px; }
.footer .fgrid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:34px; }
@media(max-width:900px){ .footer .fgrid{ grid-template-columns:1fr 1fr; gap:28px; } }
@media(max-width:520px){ .footer .fgrid{ grid-template-columns:1fr; } }

/* ── Section header helper ───────────────────────────────── */
.sec-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-bottom:34px; flex-wrap:wrap; }
.sec-head .link-all{ font-weight:700; font-size:14px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.bg-surface{ background:var(--surface); }
.flash{ padding:12px 16px; border-radius:11px; font-size:14px; margin-bottom:16px; }
.flash.ok{ background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.flash.err{ background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; }

/* ── Auth pages ──────────────────────────────────────────── */
.auth{ min-height:calc(100vh - 110px); display:grid; place-items:center; padding:44px 20px; background:linear-gradient(180deg,var(--surface),#fff); }
.auth-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:32px 30px; width:100%; max-width:520px; }
.auth-card.wide{ max-width:760px; }
.auth-card h1{ font-size:24px; margin:0 0 4px; }
.auth-card .lead{ color:var(--muted); font-size:14.5px; margin-bottom:20px; }
.auth-card label{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; display:block; }
.auth-card .form-control{ border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:14.5px; }
.auth-card .form-control:focus{ border-color:var(--green); box-shadow:var(--ring); }
.auth-alt{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:16px; }
.role-picker{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px; }
@media(max-width:600px){ .role-picker{ grid-template-columns:1fr; } }
.role-opt{ position:relative; cursor:pointer; }
.role-opt input{ position:absolute; opacity:0; }
.role-opt .box{ border:1.5px solid var(--line); border-radius:var(--radius); padding:16px 14px; height:100%; transition:.15s; }
.role-opt .box .ic{ width:42px; height:42px; border-radius:11px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-size:20px; margin-bottom:9px; }
.role-opt .box .nm{ font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:15px; }
.role-opt .box .ds{ color:var(--muted); font-size:12px; margin-top:2px; }
.role-opt input:checked + .box{ border-color:var(--green); background:var(--green-soft); box-shadow:var(--ring); }

/* ── Member dashboard ────────────────────────────────────── */
.dash{ background:var(--surface); min-height:calc(100vh - 110px); padding:34px 0 60px; }
.dash-head{ display:flex; align-items:center; gap:16px; margin-bottom:24px; flex-wrap:wrap; }
.dash-head .av{ width:60px; height:60px; border-radius:16px; background:linear-gradient(135deg,var(--green-600),var(--green-800)); color:#fff; display:grid; place-items:center; font-family:var(--ff-display); font-weight:800; font-size:26px; }
.dash-head h1{ font-size:24px; margin:0; }
.dash-head .role-badge{ display:inline-block; font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 10px; border-radius:999px; background:var(--green-soft); color:var(--green-700); }
.dash-head .role-badge.founder{ background:#f5ecd8; color:var(--gold); }
.dash-head .role-badge.pending{ background:#fff7ed; color:#9a3412; }
.dcard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; height:100%; }
.dcard h3{ font-size:16px; margin:0 0 3px; }
.dcard .sub{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.dstat{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px; }
.dstat .n{ font-family:var(--ff-display); font-weight:800; font-size:26px; color:var(--ink); }
.dstat .l{ color:var(--muted); font-size:12.5px; }
.gprog{ height:8px; border-radius:99px; background:var(--surface-2); overflow:hidden; margin:8px 0 4px; }
.gprog span{ display:block; height:100%; background:var(--green); border-radius:99px; }
.nav-user{ display:flex; align-items:center; gap:9px; }
.nav-user .uav{ width:34px; height:34px; border-radius:50%; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-weight:800; font-size:14px; }

/* ── Inner-page hero ─────────────────────────────────────── */
.page-hero{ position:relative; background:linear-gradient(135deg,var(--green-700),var(--green-800)); color:#fff; overflow:hidden; }
.page-hero img.bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(11,61,32,.86),rgba(11,61,32,.5)); }
.page-hero .inner{ position:relative; z-index:2; padding:52px 0 46px; }
.page-hero .crumb{ font-size:13px; color:#bfe0cb; margin-bottom:8px; }
.page-hero .crumb a{ color:#eafaef; } .page-hero .crumb i{ margin:0 6px; opacity:.6; }
.page-hero h1{ color:#fff; font-size:clamp(28px,4vw,42px); margin:0; }
.page-hero p{ color:#d6ece0; font-size:16px; margin:10px 0 0; max-width:640px; }

/* ── Filter bar ──────────────────────────────────────────── */
.filters{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:14px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr auto; gap:8px; align-items:end; }
.filters label{ font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.filters .form-control, .filters .form-select{ border:1px solid var(--line); border-radius:9px; font-size:14px; }
@media(max-width:900px){ .filters{ grid-template-columns:1fr 1fr; } .filters .btn-green{ grid-column:1/-1; } }
@media(max-width:520px){ .filters{ grid-template-columns:1fr; } }
.result-bar{ display:flex; justify-content:space-between; align-items:center; margin:22px 0 18px; flex-wrap:wrap; gap:10px; }
.result-bar .count{ font-weight:700; color:var(--ink); }
.pager{ display:flex; gap:6px; justify-content:center; margin-top:34px; }
.pager a, .pager span{ min-width:40px; height:40px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; font-weight:700; font-size:14px; color:var(--ink); background:#fff; }
.pager a:hover{ border-color:var(--green); color:var(--green-700); }
.pager .on{ background:var(--green); color:#fff; border-color:var(--green); }

/* ── Listing detail ──────────────────────────────────────── */
.detail-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:30px; align-items:start; }
@media(max-width:920px){ .detail-grid{ grid-template-columns:1fr; } }
.gallery{ display:grid; grid-template-columns:2fr 1fr 1fr; grid-auto-rows:120px; gap:8px; border-radius:var(--radius); overflow:hidden; }
.gallery .g0{ grid-row:span 2; grid-column:span 1; }
.gallery img{ width:100%; height:100%; object-fit:cover; background:linear-gradient(135deg,#cfe6d6,#8fc4a2); }
@media(max-width:560px){ .gallery{ grid-template-columns:1fr 1fr; } .gallery .g0{ grid-column:span 2; } }
.spec{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:18px 0; }
.spec .s{ background:var(--surface); border:1px solid var(--line-2); border-radius:11px; padding:12px 14px; }
.spec .s .k{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.spec .s .v{ font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:15px; }
.side-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; position:sticky; top:90px; }
.side-card .price{ font-family:var(--ff-display); font-weight:800; color:var(--green-700); font-size:26px; }

/* ── About sections ──────────────────────────────────────── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split.rev .txt{ order:2; }
@media(max-width:820px){ .split, .split.rev{ grid-template-columns:1fr; gap:24px; } .split.rev .txt{ order:0; } }
.split img{ width:100%; border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
@media(max-width:820px){ .value-grid{ grid-template-columns:1fr; } }
.founder-strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media(max-width:820px){ .founder-strip{ grid-template-columns:1fr 1fr; } }
.founder{ text-align:center; } .founder img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:var(--radius); margin-bottom:10px; }

/* ── Contact ─────────────────────────────────────────────── */
.contact-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:30px; align-items:start; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.info-item{ display:flex; gap:13px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line-2); }
.info-item .ic{ width:44px; height:44px; border-radius:12px; background:var(--green-soft); color:var(--green-700); display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.info-item .k{ font-family:var(--ff-display); font-weight:700; color:var(--ink); font-size:14.5px; }
.info-item .v{ color:var(--muted); font-size:13.5px; }
.empty{ text-align:center; padding:60px 20px; color:var(--muted); }
.empty i{ font-size:44px; color:var(--line); }