/* =============================================================
   HOME — homepage sections
   Hero, search band, categories, why-invest, TP zones, developers,
   FAQs and the site-visit CTA. Only loaded by index.html.

   Project cards (.pcard), article cards (.art), rails and tabs
   live in components.css and are reused here as-is.
   ============================================================= */

/* ============ 1. HERO BANNER ============ */
/* Deliberately sparse: eyebrow, headline, one sentence, one button and
   one text link. Everything else that used to live here (trust stats,
   the floating price card) moved out — see .tstrip below. */
.hero{display:grid;grid-template-columns:1.14fr .86fr;min-height:498px;background:var(--navy)}

.hero__copy{position:relative;display:flex;align-items:center;padding:104px 0 84px;overflow:hidden}
.hero__copy::before{content:"";position:absolute;left:-210px;top:-170px;width:560px;height:560px;
  border-radius:50%;background:radial-gradient(circle,rgba(0,163,163,.26),transparent 70%)}
.hero__copy::after{content:"";position:absolute;left:8%;bottom:-260px;width:480px;height:480px;
  border-radius:50%;background:radial-gradient(circle,rgba(235,174,33,.1),transparent 72%)}
/* right-aligned within the column so the text edge lines up with .wrap */
.hero__copy-in{position:relative;z-index:2;width:100%;max-width:calc(var(--maxw)/2 + 24px);
  margin-left:auto;padding:0 54px 0 24px}

.hero__eyebrow{display:flex;align-items:center;gap:13px;font-size:10px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.hero__eyebrow::after{content:"";height:1px;flex:1;max-width:64px;
  background:linear-gradient(90deg,rgba(235,174,33,.5),transparent)}
.hero__title{font-size:55px!important;font-weight:800;line-height:1.09;letter-spacing:-.032em;
  color:#fff;margin:19px 0 0;max-width:17ch}
.hero__title em{font-style:normal;color:var(--accent)}
.hero__sub{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.72;margin:17px 0 0;max-width:44ch}

.hero__btns{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:31px}
.hero__link{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;
  color:#fff;padding-bottom:3px;border-bottom:1px solid rgba(255,255,255,.3);transition:.18s}
.hero__link:hover{color:var(--accent);border-bottom-color:var(--accent)}

.hero__media{position:relative;overflow:hidden;min-height:400px}
.hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* long feathered blend so the split does not read as a hard vertical seam */
.hero__media::after{content:"";position:absolute;inset:0;background:
  linear-gradient(90deg,var(--navy) 0%,rgba(11,46,89,.86) 14%,rgba(11,46,89,.42) 34%,
  rgba(11,46,89,.06) 62%,rgba(11,46,89,.3) 100%)}

/* ============ TRUST STRIP (moved out of the hero) ============ */
.tstrip{padding:30px 0 0}
.tstrip__in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.tstrip b{display:block;font-size:25px;font-weight:800;color:var(--teal);letter-spacing:-.025em;line-height:1.15}
.tstrip small{font-size:9.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}

/* ============ 2. SEARCH PROJECTS ============ */
.hsearch{position:relative;z-index:5;margin-top:-42px}
.hsearch__card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);padding:18px}
.hsearch__tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.hsearch__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hsearch__field{flex:1;min-width:170px;display:flex;align-items:center;gap:8px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px}
.hsearch__field svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:1.9;flex:none}
.hsearch__field input,.hsearch__field select{flex:1;border:0;background:none;font-family:inherit;
  font-size:12.5px;color:var(--ink);min-width:0}
.hsearch__field input:focus,.hsearch__field select:focus{outline:none}
.hsearch__field select{cursor:pointer}
.hsearch .btn{flex:none}
.hsearch__quick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:13px;
  font-size:11.5px;color:var(--muted)}
.hsearch__quick a{padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  font-weight:600;color:var(--ink-2);transition:.15s}
.hsearch__quick a:hover{border-color:var(--teal);color:var(--teal)}

/* ============ 4. BROWSE BY CATEGORY ============ */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat{position:relative;border-radius:var(--r-lg);overflow:hidden;height:172px;display:block}
.cat img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.cat:hover img{transform:scale(1.06)}
.cat::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--veil),.1) 35%,rgba(var(--veil),.88))}
.cat__txt{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff}
.cat__txt b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.cat__txt small{font-size:11px;color:rgba(255,255,255,.72)}
.cat__go{position:absolute;right:14px;bottom:14px;z-index:2;width:28px;height:28px;
  border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:#fff;font-size:13px;backdrop-filter:blur(4px);transition:.2s}
.cat:hover .cat__go{background:var(--accent);border-color:var(--accent);color:var(--navy)}

/* ============ 5. WHY INVEST ============ */
.why{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}
.why__list{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:22px}
.why__item{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px;transition:.2s}
.why__item:hover{border-color:var(--teal)}
.why__ico{width:34px;height:34px;border-radius:9px;background:var(--teal-soft);
  display:grid;place-items:center;margin-bottom:10px}
.why__ico svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.7}
.why__item b{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.why__item p{font-size:11.5px;color:var(--muted);line-height:1.6;margin:0}
.why__visual{position:relative;border-radius:var(--r-xl);overflow:hidden;min-height:400px}
.why__visual img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.why__visual::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(var(--veil),.15),rgba(var(--veil),.85))}
.why__stats{position:absolute;left:20px;right:20px;bottom:20px;z-index:2;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why__stats b{display:block;font-size:21px;font-weight:800;color:var(--accent)}
.why__stats small{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}

/* ============ 6. PROJECTS BY TP ZONE ============ */
.zones{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.zone{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:17px;display:flex;gap:14px;align-items:flex-start;transition:.22s}
.zone:hover{border-color:var(--teal);box-shadow:var(--shadow)}
.zone__no{width:46px;height:46px;border-radius:12px;background:var(--navy);color:var(--accent);
  display:grid;place-items:center;font-size:14px;font-weight:800;flex:none;letter-spacing:-.02em}
.zone__txt{flex:1;min-width:0}
.zone__txt b{display:block;font-size:14px;font-weight:700}
.zone__txt p{font-size:11.5px;color:var(--muted);line-height:1.55;margin:4px 0 9px}
.zone__meta{display:flex;gap:12px;font-size:10.5px;font-weight:600;color:var(--teal)}
.zone__meta span{display:flex;align-items:center;gap:4px}

/* ============ 7. TOP DEVELOPERS ============ */
.devs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.devx{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:18px 12px;text-align:center;transition:.22s}
.devx:hover{border-color:var(--teal);transform:translateY(-3px)}
.devx__logo{width:46px;height:46px;border-radius:13px;background:var(--bg-2);margin:0 auto 10px;
  display:grid;place-items:center;font-size:15px;font-weight:800;color:var(--navy);letter-spacing:-.03em}
.devx b{display:block;font-size:12px;font-weight:700;line-height:1.35}
.devx small{font-size:10px;color:var(--muted)}

/* ============ 10. FAQS ============ */
.faqs{display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}
.faq{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);
  padding:15px 17px;transition:.2s}
.faq[open]{border-color:var(--teal)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-size:13px;font-weight:700;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:17px;font-weight:600;color:var(--teal);flex:none;line-height:1}
.faq[open] summary::after{content:"\2013"}
.faq p{font-size:12.5px;color:var(--ink-2);line-height:1.7;margin:11px 0 0}

/* ============ 11. BOOK SITE VISIT ============ */
.visit{position:relative;border-radius:var(--r-xl);overflow:hidden;
  display:grid;grid-template-columns:1fr 400px;align-items:stretch}
.visit__media{position:relative;min-height:330px}
.visit__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.visit__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(var(--veil),.55),rgba(var(--veil),.9))}
.visit__copy{position:absolute;inset:auto 30px 30px;z-index:2;color:#fff}
.visit__copy small{font-size:10px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.visit__copy h2{font-size:27px;font-weight:800;letter-spacing:-.02em;margin:9px 0 8px;line-height:1.2}
.visit__copy p{font-size:13px;color:rgba(255,255,255,.8);margin:0;max-width:400px;line-height:1.65}
.visit__form{background:var(--navy);padding:28px}
.visit__form h3{font-size:16px;font-weight:700;color:#fff;margin:0 0 3px}
.visit__form > p{font-size:11.5px;color:rgba(255,255,255,.6);margin:0 0 18px}
.vfield + .vfield{margin-top:11px}
.vfield input,.vfield select{width:100%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);border-radius:var(--r-md);padding:11px 13px;
  font-family:inherit;font-size:12.5px;color:#fff}
.vfield input::placeholder{color:rgba(255,255,255,.45)}
.vfield select{cursor:pointer;color:#fff}
.vfield select option{color:var(--ink)}
.vfield input:focus,.vfield select:focus{outline:none;border-color:var(--accent)}
.visit__form .btn{width:100%;justify-content:center;margin-top:15px}
.visit__note{font-size:10px;color:rgba(255,255,255,.45);text-align:center;margin:11px 0 0;line-height:1.5}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__media{order:-1;min-height:258px}
  .hero__media::after{background:linear-gradient(180deg,rgba(11,46,89,.2),var(--navy) 95%)}
  .hero__copy{padding:38px 0 48px}
  .hero__copy-in{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .hero__title{font-size:34px;max-width:20ch}
  .tstrip__in{grid-template-columns:repeat(4,1fr)}
  .cats,.zones{grid-template-columns:repeat(2,1fr)}
  .why{grid-template-columns:1fr;gap:26px}
  .why__visual{min-height:280px;order:-1}
  .devs{grid-template-columns:repeat(3,1fr)}
  .faqs{grid-template-columns:1fr}
  .visit{grid-template-columns:1fr}
  .visit__media{min-height:240px}
}
@media (max-width:640px){
  .hero__media{min-height:196px}
  .hero__title{font-size:27px;max-width:none}
  .hero__sub{font-size:13.5px}
  .hero__btns{gap:16px}
  .tstrip__in{grid-template-columns:1fr 1fr;gap:20px}
  .tstrip b{font-size:21px}
  .hsearch{margin-top:-26px}
  .hsearch__field{min-width:100%}
  .hsearch .btn{width:100%;justify-content:center}
  .cats,.zones,.why__list{grid-template-columns:1fr}
  .devs{grid-template-columns:repeat(2,1fr)}
  .why__stats{grid-template-columns:1fr;gap:9px}
  .visit__copy{position:static;padding:22px}
  .visit__media::after{background:linear-gradient(180deg,rgba(var(--veil),.5),rgba(var(--veil),.9))}
  .visit__copy h2{font-size:22px}
}