/* ════════════════════════════════════════════════════════
   HNA Proptech, page components
   (hero · carousel · catalog · detail · contact · about)
   ════════════════════════════════════════════════════════ */

/* ═══════════ HERO ═══════════ */
.hero{min-height:100vh; display:flex; align-items:center; position:relative; overflow:hidden;}
.hero-content{position:relative; z-index:5; display:flex; flex-direction:column; padding:180px 6vw 120px; max-width:min(760px,60vw); color:var(--paper);}
.hero-tab{font-family:var(--mono); font-size:11px; letter-spacing:.34em; color:rgba(251,250,246,.62); text-transform:uppercase;
  margin-bottom:40px; opacity:0; animation:fadeUp .9s var(--ease) .2s forwards;}
.hero-tab .blue{color:var(--blue-l);}
.hero-title{font-size:clamp(38px,5vw,70px); font-weight:800; line-height:1.02; letter-spacing:-.028em; color:var(--paper);
  max-width:17ch; text-shadow:0 1px 30px rgba(10,10,10,.35);}
.hero-title .line{display:block; overflow:hidden;}
.hero-title .line span{display:block; transform:translateY(105%); animation:revealUp 1.1s var(--ease) forwards;}
.hero-title .line:nth-child(1) span{animation-delay:.35s;}
.hero-title .line:nth-child(2) span{animation-delay:.48s;}
.hero-title .line:nth-child(3) span{animation-delay:.61s;}
.hero-title .it{font-weight:300; font-style:normal; color:var(--blue-l); letter-spacing:-.02em;}
.hero-sub{margin-top:34px; font-size:clamp(15px,1.4vw,19px); font-weight:300; line-height:1.6; color:rgba(251,250,246,.85);
  max-width:52ch; opacity:0; animation:fadeUp 1s var(--ease) .9s forwards; text-shadow:0 1px 20px rgba(10,10,10,.4);}
.hero-sub strong{font-weight:600; color:var(--paper);}
.hero-actions{margin-top:42px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; opacity:0; animation:fadeUp 1s var(--ease) 1.1s forwards;}
.hero .btn-primary{background:var(--paper); color:var(--ink);}
.hero .btn-primary:hover{color:var(--paper);}
.hero .btn-text{color:var(--paper);}
.hero .btn-text:hover{color:var(--blue-l);}
.hero-stage{position:absolute; inset:0; z-index:1; overflow:hidden; background:#0a0a0a; pointer-events:none;}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;
  filter:saturate(.6) contrast(1.05) brightness(.7) sepia(.1); transform:scale(1.25) translateY(10%);}
.hero-stage::before{content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to right,rgba(10,10,10,.72),rgba(10,10,10,.38) 35%,rgba(10,10,10,.06) 65%,transparent),
  linear-gradient(to bottom,rgba(10,10,10,.22),transparent 28%,transparent 55%,rgba(10,10,10,.7) 80%,rgba(10,10,10,.95));}
.hero-stage::after{content:''; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(135deg,rgba(72,107,148,.35),rgba(72,107,148,.06) 50%,rgba(180,140,80,.1)); mix-blend-mode:soft-light;}
.hero-stat-row{display:flex; gap:38px; margin-top:54px; opacity:0; animation:fadeUp 1s var(--ease) 1.3s forwards; flex-wrap:wrap;}
.hero-stat .n{font-size:clamp(24px,3vw,34px); font-weight:800; letter-spacing:-.02em; color:var(--paper); line-height:1;}
.hero-stat .n .u{color:var(--blue-l);}
.hero-stat .l{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:rgba(251,250,246,.6); margin-top:8px;}

/* page hero (interior pages, compact, no video) */
.page-hero{position:relative; padding:170px 44px 70px; max-width:var(--maxw); margin:0 auto;}
.page-hero .crumb{font-family:var(--mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:18px;}
.page-hero h1{font-size:clamp(34px,5vw,64px); font-weight:800; line-height:1.02; letter-spacing:-.03em; color:var(--ink); max-width:18ch;}
.page-hero h1 .it{font-weight:300; color:var(--blue); font-style:normal;}
.page-hero p{font-size:clamp(15px,1.4vw,18px); font-weight:300; line-height:1.65; color:var(--ink-2); max-width:62ch; margin-top:22px;}

/* ═══════════ FEATURED CAROUSEL ═══════════ */
.carousel-sec{padding-top:30px;}
.carousel-head{max-width:var(--maxw); margin:0 auto; padding:0 44px; display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.carousel-nav{display:flex; gap:10px;}
.carousel-nav button{width:50px; height:50px; border-radius:50%; border:1px solid var(--ink); background:transparent;
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);}
.carousel-nav button:hover{background:var(--ink); color:var(--paper);}
.carousel-nav button:disabled{opacity:.28; cursor:default;}
.carousel-nav button:disabled:hover{background:transparent; color:var(--ink);}
.carousel-nav button svg{width:18px; height:18px;}
.carousel-viewport{margin-top:46px; padding:0 44px 10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory;
  scrollbar-width:none; cursor:grab; -webkit-overflow-scrolling:touch;}
.carousel-viewport::-webkit-scrollbar{display:none;}
.carousel-viewport.dragging{cursor:grabbing; scroll-snap-type:none;}
.carousel-track{display:flex; gap:26px; width:max-content; padding-bottom:6px;}
.carousel-track .pcard{width:380px; scroll-snap-align:start; flex-shrink:0;}
.carousel-progress{max-width:var(--maxw); margin:26px auto 0; padding:0 44px;}
.carousel-progress .rail{height:2px; background:var(--rule); position:relative; overflow:hidden;}
.carousel-progress .rail::after{content:''; position:absolute; left:var(--cp-l,0%); width:var(--cp-w,30%); top:0; bottom:0; background:var(--blue); transition:left .2s var(--ease), width .2s var(--ease);}

/* ═══════════ CATALOG (properties page) ═══════════ */
.filters{max-width:var(--maxw); margin:0 auto; padding:0 44px 10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.filter-chip{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--soft);
  background:var(--white); border:1px solid var(--rule); padding:9px 16px; border-radius:2px; cursor:pointer; transition:all .3s var(--ease);}
.filter-chip:hover{border-color:var(--blue-l); color:var(--ink);}
.filter-chip.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.filter-count{margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--softer); text-transform:uppercase;}
.catalog{max-width:var(--maxw); margin:0 auto; padding:44px 44px 120px; display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.catalog .pcard.hide{display:none;}
.catalog-empty{grid-column:1/-1; text-align:center; padding:80px 0; color:var(--soft); font-weight:300;}

/* ═══════════ PROPERTY DETAIL ═══════════ */
.detail{max-width:var(--maxw); margin:0 auto; padding:150px 44px 40px;}
.detail-crumb{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:20px;}
.detail-crumb a{color:var(--soft); text-decoration:none;}
.detail-crumb a:hover{color:var(--blue);}
.detail-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:30px;}
.detail-builder{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue); margin-bottom:10px;}
.detail-title{font-size:clamp(30px,4.4vw,54px); font-weight:800; letter-spacing:-.03em; line-height:1.04; color:var(--ink);}
.detail-loc{font-size:15px; font-weight:300; color:var(--soft); margin-top:12px; display:flex; align-items:center; gap:7px;}
.detail-loc svg{width:15px; height:15px; opacity:.6;}
.detail-gallery{display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:40px; height:clamp(320px,52vh,560px);}
.detail-gallery .g-main{position:relative; overflow:hidden; border-radius:4px; background:var(--paper-2);}
.detail-gallery .g-main img{width:100%; height:100%; object-fit:cover;}
.detail-gallery .g-side{display:grid; grid-template-rows:1fr 1fr; gap:14px; height:100%;}
.detail-gallery .g-side .g-cell{overflow:hidden; border-radius:4px; background:var(--paper-2); position:relative;}
.detail-gallery .g-side img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease);}
.detail-gallery .g-side .g-cell:hover img{transform:scale(1.06);}
.detail-gallery .g-more{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,10,.55); color:var(--paper); font-family:var(--mono); font-size:13px; letter-spacing:.1em;}
.detail-noimg{height:clamp(280px,40vh,420px); border-radius:4px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--paper-2),var(--rule)); margin-bottom:40px;}
.detail-noimg .ph-logo{width:160px; height:120px; background-image:url('../logo_black.png'); background-size:contain;
  background-repeat:no-repeat; background-position:center; opacity:.18;}
.detail-grid{display:grid; grid-template-columns:1.7fr 1fr; gap:50px; align-items:start;}
.detail-specs{display:grid; grid-template-columns:repeat(2,1fr); gap:0; border-top:1px solid var(--ink); margin-bottom:40px;}
.spec{padding:20px 4px; border-bottom:1px solid var(--rule);}
.spec .k{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--softer); margin-bottom:8px;}
.spec .v{font-size:18px; font-weight:600; color:var(--ink);}
.detail-body h3{font-size:13px; font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin:36px 0 16px;}
.detail-body p{font-size:15.5px; font-weight:300; line-height:1.75; color:var(--ink-2); max-width:62ch;}
.amen-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 26px; margin-top:6px;}
.amen-grid li{list-style:none; font-size:14px; font-weight:300; color:var(--ink-2); display:flex; align-items:center; gap:10px; padding:5px 0;}
.amen-grid li::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--blue); flex-shrink:0;}
.detail-aside{position:sticky; top:100px; background:var(--white); border:1px solid var(--rule); border-radius:4px; padding:30px;}
.detail-aside .da-price-l{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--softer); margin-bottom:10px;}
.detail-aside .da-price{font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--blue-d); line-height:1.2; margin-bottom:6px;}
.detail-aside .da-note{font-size:12px; font-weight:300; color:var(--soft); margin-bottom:24px; line-height:1.5;}
.detail-aside .btn-wa, .detail-aside .btn-call{width:100%; justify-content:center; margin-bottom:11px; padding:15px;}
.detail-aside .da-assure{margin-top:18px; padding-top:18px; border-top:1px solid var(--rule); font-size:12px; font-weight:300; color:var(--soft); line-height:1.6;}

/* ═══════════ CONTACT ═══════════ */
.contact-grid{max-width:var(--maxw); margin:0 auto; padding:20px 44px 110px; display:grid; grid-template-columns:1.1fr 1fr; gap:60px; align-items:start;}
.contact-cards{display:flex; flex-direction:column; gap:0; border-top:1px solid var(--ink);}
.cc{padding:26px 4px; border-bottom:1px solid var(--rule); display:flex; gap:20px; align-items:flex-start;}
.cc-ic{width:44px; height:44px; border:1px solid var(--rule); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--blue);}
.cc-ic svg{width:19px; height:19px;}
.cc h4{font-size:12px; font-family:var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--softer); margin-bottom:8px;}
.cc a, .cc p{font-size:17px; font-weight:500; color:var(--ink); text-decoration:none; line-height:1.5;}
.cc a:hover{color:var(--blue);}
.cc p.sm{font-size:14px; font-weight:300; color:var(--ink-2);}
.contact-form{background:var(--white); border:1px solid var(--rule); border-radius:4px; padding:38px;}
.contact-form h3{font-size:22px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px;}
.contact-form .fsub{font-size:14px; font-weight:300; color:var(--soft); margin-bottom:28px;}
.field{margin-bottom:20px;}
.field label{display:block; font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--soft); margin-bottom:9px;}
.field input,.field select,.field textarea{width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:2px; padding:13px 15px; transition:border-color .3s var(--ease); outline:none;}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);}
.field textarea{resize:vertical; min-height:96px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.contact-form .btn-wa{width:100%; justify-content:center; padding:15px; margin-top:6px;}
.form-note{font-size:12px; font-weight:300; color:var(--softer); text-align:center; margin-top:16px; line-height:1.5;}
.map-wrap{max-width:var(--maxw); margin:0 auto 110px; padding:0 44px;}
.map-wrap iframe{width:100%; height:420px; border:1px solid var(--rule); border-radius:4px; filter:grayscale(.3) contrast(1.05);}

/* ═══════════ ABOUT ═══════════ */
.about-lead{max-width:var(--maxw); margin:0 auto; padding:10px 44px 40px;}
.about-lead p{font-size:clamp(20px,2.4vw,30px); font-weight:300; line-height:1.5; letter-spacing:-.01em; color:var(--ink); max-width:24ch;}
.about-lead p .blue{color:var(--blue);}
.about-cols{max-width:var(--maxw); margin:0 auto; padding:30px 44px 80px; display:grid; grid-template-columns:1fr 1fr; gap:60px;}
.about-cols p{font-size:15.5px; font-weight:300; line-height:1.8; color:var(--ink-2); margin-bottom:20px;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--ink); margin-top:30px;}
.value{padding:36px 28px 42px; border-right:1px solid var(--rule); transition:background .4s var(--ease);}
.value:last-child{border-right:none;}
.value:hover{background:var(--paper-2);}
.value .vnum{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--softer); margin-bottom:22px;}
.value:hover .vnum{color:var(--blue);}
.value h3{font-size:20px; font-weight:600; letter-spacing:-.01em; margin-bottom:12px;}
.value p{font-size:14px; font-weight:300; line-height:1.65; color:var(--ink-2);}
.stat-band{background:var(--ink); color:var(--paper);}
.stat-band .inner{max-width:var(--maxw); margin:0 auto; padding:90px 44px; display:grid; grid-template-columns:repeat(4,1fr); gap:30px;}
.stat-band .sb{display:flex; flex-direction:column; gap:10px;}
.stat-band .sb .n{font-size:clamp(34px,4.4vw,54px); font-weight:800; letter-spacing:-.03em; line-height:1;}
.stat-band .sb .n .u{color:var(--blue-l);}
.stat-band .sb .l{font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--softer);}

/* ═══════════ CTA band (shared interior) ═══════════ */
.cta-band{max-width:var(--maxw); margin:0 auto; padding:120px 44px; text-align:center;}
.cta-band h2{font-size:clamp(32px,5vw,68px); font-weight:800; line-height:1; letter-spacing:-.035em; color:var(--ink); max-width:18ch; margin:0 auto 24px;}
.cta-band h2 .it{font-weight:300; color:var(--blue); font-style:normal;}
.cta-band p{font-size:16px; font-weight:300; color:var(--ink-2); max-width:48ch; margin:0 auto 38px; line-height:1.6;}
.cta-actions{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ═══════════ MICRO-INTERACTIONS (fluidity) ═══════════ */
.filter-chip{transition:all .35s var(--ease);}
.filter-chip:hover{transform:translateY(-2px);}
.filter-chip.active{transform:none;}
.cc{transition:transform .4s var(--ease);}
.cc:hover{transform:translateX(4px);}
.cc:hover .cc-ic{border-color:var(--blue); color:var(--blue); transform:scale(1.06);}
.cc-ic{transition:border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);}
.spec{transition:background .35s var(--ease), padding-left .35s var(--ease);}
.spec:hover{background:var(--paper-2); padding-left:12px;}
.amen-grid li{transition:transform .3s var(--ease), color .3s var(--ease);}
.amen-grid li:hover{transform:translateX(4px); color:var(--ink);}
.hero-stat{transition:transform .4s var(--ease);}
.hero-stat:hover{transform:translateY(-3px);}
.detail-aside{transition:box-shadow .5s var(--ease);}
.detail-aside:hover{box-shadow:0 24px 50px -28px rgba(10,10,10,.22);}
.field input,.field select,.field textarea{transition:border-color .3s var(--ease), box-shadow .3s var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{box-shadow:0 0 0 3px rgba(72,107,148,.12);}

/* ═══════════ CUSTOMIZE FEATURED DRAWER ═══════════ */
.btn-ghost{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--soft); background:transparent; border:1px solid var(--rule);
  padding:11px 16px; border-radius:2px; cursor:pointer; transition:all .35s var(--ease);}
.btn-ghost:hover{border-color:var(--blue); color:var(--blue); transform:translateY(-2px);}
.btn-ghost svg{width:15px; height:15px;}
.cz-overlay{position:fixed; inset:0; z-index:1100; background:rgba(10,10,10,.45); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);}
.cz-overlay.open{opacity:1; pointer-events:auto;}
.cz-drawer{position:fixed; top:0; right:0; bottom:0; z-index:1101; width:min(440px,92vw); background:var(--paper);
  display:flex; flex-direction:column; transform:translateX(105%); transition:transform .55s var(--ease);
  box-shadow:-30px 0 80px -40px rgba(10,10,10,.5);}
.cz-drawer.open{transform:translateX(0);}
.cz-head{padding:26px 26px 18px; border-bottom:1px solid var(--rule);}
.cz-head h3{font-size:20px; font-weight:700; letter-spacing:-.01em; margin-bottom:6px;}
.cz-head p{font-size:12.5px; font-weight:300; color:var(--soft); line-height:1.5;}
.cz-close{position:absolute; top:22px; right:22px; width:34px; height:34px; border:1px solid var(--rule); border-radius:50%;
  background:transparent; cursor:pointer; color:var(--soft); display:flex; align-items:center; justify-content:center; transition:all .3s var(--ease);}
.cz-close:hover{background:var(--ink); color:var(--paper); border-color:var(--ink); transform:rotate(90deg);}
.cz-search{padding:14px 26px 6px;}
.cz-search input{width:100%; background:var(--white); border:1px solid var(--rule); border-radius:2px; padding:11px 14px; font-size:14px; outline:none; transition:border-color .3s var(--ease);}
.cz-search input:focus{border-color:var(--blue);}
.cz-list{flex:1; overflow-y:auto; padding:8px 16px 16px;}
.cz-row{display:flex; align-items:center; gap:14px; padding:12px 10px; border-radius:4px; cursor:pointer; transition:background .25s var(--ease);}
.cz-row:hover{background:var(--paper-2);}
.cz-row.hide{display:none;}
.cz-check{width:22px; height:22px; border:1.5px solid var(--rule); border-radius:5px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:all .25s var(--ease); color:transparent;}
.cz-row.on .cz-check{background:var(--blue); border-color:var(--blue); color:#fff;}
.cz-check svg{width:13px; height:13px;}
.cz-info{flex:1; min-width:0;}
.cz-name{font-size:14px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cz-meta{font-size:11.5px; font-weight:300; color:var(--soft); margin-top:2px;}
.cz-thumb{width:46px; height:36px; border-radius:3px; object-fit:cover; flex-shrink:0; background:var(--paper-2);}
.cz-thumb.ph{display:flex; align-items:center; justify-content:center;}
.cz-thumb.ph::after{content:''; width:60%; height:60%; background:url('../logo_black.png') center/contain no-repeat; opacity:.2;}
.cz-foot{padding:16px 26px 22px; border-top:1px solid var(--rule); display:flex; flex-direction:column; gap:12px;}
.cz-foot-row{display:flex; gap:10px;}
.cz-foot-row .btn-primary{flex:1; text-align:center;}
.cz-foot-row .btn-ghost{flex:1; justify-content:center;}
.cz-count{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--softer); text-align:center;}
.cz-publish{font-size:11.5px; font-weight:300; color:var(--soft); text-align:center; line-height:1.5;}
.cz-publish a{color:var(--blue); cursor:pointer; text-decoration:underline;}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1050px){
  .catalog{grid-template-columns:repeat(2,1fr);}
  .detail-grid{grid-template-columns:1fr; gap:30px;}
  .detail-aside{position:static;}
  .contact-grid{grid-template-columns:1fr; gap:40px;}
  .about-cols{grid-template-columns:1fr; gap:0;}
  .stat-band .inner{grid-template-columns:repeat(2,1fr); gap:40px 30px;}
}
@media (max-width:900px){
  .hero-content{padding:140px 22px 80px; max-width:100%;}
  .carousel-head,.carousel-viewport,.filters,.catalog,.detail,.contact-grid,.map-wrap,.about-lead,.about-cols,.cta-band,.page-hero{padding-left:22px; padding-right:22px;}
  .carousel-track .pcard{width:300px;}
  .detail-gallery{grid-template-columns:1fr; height:auto;}
  .detail-gallery .g-side{grid-template-rows:none; grid-template-columns:1fr 1fr; height:180px;}
  .detail-gallery .g-main{height:300px;}
  .detail-specs{grid-template-columns:1fr 1fr;}
  .values{grid-template-columns:1fr;}
  .value{border-right:none; border-bottom:1px solid var(--rule);}
  .form-row{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .catalog{grid-template-columns:1fr;}
  .stat-band .inner{grid-template-columns:1fr 1fr;}
  .hero-actions{flex-direction:column; align-items:stretch;}
  .amen-grid{grid-template-columns:1fr;}
}