/* ============ CAHAYA LAND ESTATE — premium design system ============ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
  --gold:#C9A85C;
  --gold-dark:#A9863E;
  --charcoal:#1c1c1c;
  --charcoal-soft:#2a2a28;
  --cream:#f7f6f3;
  --cream-dark:#efece4;
  --sage:#7c8768;
  --terracotta:#b1613f;
  --white:#ffffff;
  --line: rgba(28,28,28,0.1);
  --shadow-soft: 0 10px 40px rgba(28,28,28,0.08);
  --shadow-lift: 0 24px 60px rgba(28,28,28,0.18);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--charcoal);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4,.serif{
  font-family:'Fraunces',serif;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0;
}
p{line-height:1.7; margin:0 0 1em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.container{max-width:1240px; margin:0 auto; padding:0 32px;}
@media (max-width:768px){.container{padding:0 20px;}}

.eyebrow{
  font-family:'Inter',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.18em;
  font-size:12px;
  font-weight:600;
  color:var(--gold-dark);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{content:''; width:22px; height:1px; background:var(--gold-dark);}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 30px;
  border-radius:2px;
  font-size:14px; font-weight:600; letter-spacing:0.04em;
  text-transform:uppercase;
  cursor:pointer; border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s, border-color .3s;
  white-space:nowrap;
}
.btn.primary{background:var(--charcoal); color:var(--cream);}
.btn.primary:hover{background:var(--gold-dark); color:var(--white); transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.btn.gold{background:var(--gold); color:var(--charcoal);}
.btn.gold:hover{background:var(--charcoal); color:var(--gold); transform:translateY(-3px); box-shadow:var(--shadow-lift);}
.btn.outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.55);}
.btn.outline:hover{background:var(--white); color:var(--charcoal); transform:translateY(-3px);}
.btn.outline.dark{color:var(--charcoal); border-color:var(--charcoal);}
.btn.outline.dark:hover{background:var(--charcoal); color:var(--cream);}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 40px;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-nav.solid{
  padding:16px 40px;
  background:rgba(247,246,243,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--line);
}
@media (max-width:768px){.site-nav{padding:20px;} .site-nav.solid{padding:14px 20px;}}

.logo-mark{
  display:flex; align-items:center;
}
.logo-mark img{
  height:34px; width:auto; display:block;
  transition:filter .3s;
}
.logo-mark.footer-logo img{height:42px;}
@media (max-width:768px){.logo-mark img{height:28px;}}

.nav-links{display:flex; align-items:center; gap:38px;}
.nav-links a{
  font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--white); position:relative; padding-bottom:4px;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold);
  transition:width .3s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.site-nav.solid .nav-links a{color:var(--charcoal);}
.nav-cta{margin-left:6px;}

.nav-toggle{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001;}
.nav-toggle span{width:26px; height:2px; background:var(--white); transition:.3s;}
.site-nav.solid .nav-toggle span{background:var(--charcoal);}

/* ---------- Language toggle ---------- */
[hidden]{display:none !important;}
.lang-switch{
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:700; letter-spacing:.06em;
  margin-left:8px;
}
.lang-switch button{
  background:none; border:none; cursor:pointer; padding:4px 7px;
  color:rgba(255,255,255,.6); font-family:'Inter',sans-serif; font-weight:700; font-size:12px;
  transition:color .25s;
}
.lang-switch button.active{color:var(--white);}
.site-nav.solid .lang-switch button{color:rgba(28,28,28,.4);}
.site-nav.solid .lang-switch button.active{color:var(--charcoal);}
.lang-switch .sep{color:rgba(255,255,255,.35); font-size:11px;}
.site-nav.solid .lang-switch .sep{color:rgba(28,28,28,.25);}
@media (max-width:900px){
  .lang-switch{margin:0 0 30px; justify-content:center;}
  .lang-switch button{color:rgba(247,246,243,.55) !important;}
  .lang-switch button.active{color:var(--gold) !important;}
}
@media (max-width:900px){
  .nav-links{
    position:fixed; inset:0; background:var(--charcoal);
    flex-direction:column; justify-content:center; gap:28px;
    transform:translateX(100%); transition:transform .5s var(--ease);
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{color:var(--cream) !important; font-size:20px;}
  .nav-toggle{display:flex;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .nav-toggle span{background:var(--white) !important;}
}

/* ---------- Hero ---------- */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  color:var(--white); overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.08);
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,.55) 0%, rgba(20,18,14,.35) 40%, rgba(20,18,14,.85) 100%);
}
.hero-inner{position:relative; z-index:2; padding-top:120px;}
.hero h1{font-size:clamp(40px,7vw,84px); line-height:1.04; margin:18px 0 22px;}
.hero p.lead{font-size:19px; max-width:560px; color:rgba(255,255,255,.86); margin-bottom:34px;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.hero-scroll{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.75);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
}
.hero-scroll .line{width:1px; height:34px; background:rgba(255,255,255,.5); position:relative; overflow:hidden;}
.hero-scroll .line::after{content:''; position:absolute; top:0; left:0; width:100%; height:40%; background:var(--gold); animation:scrolldrop 2s infinite;}
@keyframes scrolldrop{0%{top:-40%;} 100%{top:100%;}}

.hero.small{min-height:64vh;}

/* ---------- Sections ---------- */
section{padding:120px 0;}
@media (max-width:768px){section{padding:80px 0;}}
.section-head{max-width:640px; margin-bottom:56px;}
.section-head h2{font-size:clamp(30px,4vw,48px); margin-top:16px;}
.section-head p{font-size:17px; color:#5a584f; margin-top:18px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

.bg-charcoal{background:var(--charcoal); color:var(--cream);}
.bg-charcoal .eyebrow{color:var(--gold);}
.bg-charcoal .section-head p{color:rgba(247,246,243,.72);}
.bg-cream-dark{background:var(--cream-dark);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(36px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.reveal.in{opacity:1; transform:translateY(0);}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.22s;}
.reveal.d3{transition-delay:.34s;}

/* ---------- Model cards (Eden / Oasis) ---------- */
.models-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px;}
@media (max-width:860px){.models-grid{grid-template-columns:1fr;}}
.model-card{
  position:relative; border-radius:2px; overflow:hidden; height:560px;
  box-shadow:var(--shadow-soft);
  transition:box-shadow .4s var(--ease);
}
.model-card:hover{box-shadow:var(--shadow-lift);}
.model-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.model-card:hover img{transform:scale(1.06);}
.model-card .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,18,14,0) 30%, rgba(20,18,14,.86) 100%);
}
.model-card .content{
  position:absolute; left:0; right:0; bottom:0; padding:38px; color:var(--white); z-index:2;
}
.model-card .tag{
  display:inline-block; padding:6px 14px; background:var(--gold); color:var(--charcoal);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px;
}
.model-card h3{font-size:32px; margin-bottom:8px;}
.model-card .specs{display:flex; gap:18px; margin:16px 0 20px; font-size:13px; color:rgba(255,255,255,.85); flex-wrap:wrap;}
.model-card .specs span{display:flex; align-items:center; gap:6px;}
.model-card .specs span::before{content:'—'; color:var(--gold);}

/* ---------- Feature list ---------- */
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.feature-grid{grid-template-columns:1fr;}}
.feature{padding:8px 0;}
.feature .num{font-family:'Fraunces',serif; font-size:15px; color:var(--gold-dark); margin-bottom:14px; display:block;}
.feature h4{font-size:19px; margin-bottom:10px;}
.feature p{font-size:15px; color:#5a584f; margin:0;}
.bg-charcoal .feature p{color:rgba(247,246,243,.68);}

/* ---------- Gallery / lightbox ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
@media (max-width:860px){.gallery{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.gallery{grid-template-columns:1fr;}}
.gallery figure{
  margin:0; overflow:hidden; cursor:pointer; position:relative; border-radius:2px;
  box-shadow:var(--shadow-soft);
}
.gallery figure img{width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; transition:transform .6s var(--ease);}
.gallery figure:hover img{transform:scale(1.07);}
.gallery figure.tall img{aspect-ratio:4/5;}
.gallery figure .zoom{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(20,18,14,0); transition:background .3s;
  color:#fff; font-size:22px; opacity:0;
}
.gallery figure:hover .zoom{background:rgba(20,18,14,.25); opacity:1;}

.lightbox{
  position:fixed; inset:0; background:rgba(12,11,9,.94); z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .3s;
}
.lightbox.open{opacity:1; visibility:visible;}
.lightbox img{max-width:88vw; max-height:82vh; box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next{
  position:absolute; color:#fff; font-size:28px; cursor:pointer; background:none; border:none;
  padding:14px; opacity:.8; transition:opacity .2s;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover{opacity:1;}
.lightbox .lb-close{top:18px; right:22px;}
.lightbox .lb-prev{left:10px; top:50%; transform:translateY(-50%);}
.lightbox .lb-next{right:10px; top:50%; transform:translateY(-50%);}

/* ---------- Stats ---------- */
.stats-row{display:flex; gap:60px; flex-wrap:wrap;}
.stat .num{font-family:'Fraunces',serif; font-size:44px; color:var(--gold);}
.stat .label{font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(247,246,243,.65); margin-top:6px;}

/* ---------- Split rows (image + text) ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:36px;}}
.split.reverse .img-col{order:2;}
@media (max-width:860px){.split.reverse .img-col{order:0;}}
.img-col img{border-radius:2px; box-shadow:var(--shadow-soft);}
.img-col.stack{position:relative;}
.img-col.stack img.back{position:relative; z-index:1;}
.img-col.stack img.front{
  position:absolute; width:58%; left:-8%; bottom:-40px; z-index:2; border:8px solid var(--cream);
}
@media (max-width:860px){.img-col.stack img.front{position:relative; width:100%; left:0; bottom:0; margin-top:14px; border:none;}}

/* ---------- Specs table ---------- */
.spec-table{width:100%; border-collapse:collapse; margin-top:10px;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table td{padding:16px 4px; font-size:15px;}
.spec-table td:first-child{color:#7a7768; width:44%;}
.spec-table td:last-child{font-weight:600;}

/* ---------- CTA banner ---------- */
.cta-banner{
  position:relative; padding:130px 0; text-align:center; color:var(--white);
  background-size:cover; background-position:center;
}
.cta-banner .scrim{position:absolute; inset:0; background:rgba(18,16,13,.62);}
.cta-banner .inner{position:relative; z-index:2; max-width:640px; margin:0 auto;}
.cta-banner h2{font-size:clamp(28px,4vw,44px); margin:16px 0 26px;}

/* ---------- Footer ---------- */
footer{background:var(--charcoal); color:rgba(247,246,243,.75); padding:80px 0 30px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
footer h5{color:var(--cream); font-family:'Inter',sans-serif; font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; font-weight:600;}
footer a{display:block; margin-bottom:10px; font-size:14px; color:rgba(247,246,243,.72); transition:color .2s;}
footer a:hover{color:var(--gold);}
.footer-bottom{
  margin-top:60px; padding-top:26px; border-top:1px solid rgba(247,246,243,.12);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12px; color:rgba(247,246,243,.5);
}

/* ---------- Contact / form ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;}}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; color:#7a7768;}
.form-row input, .form-row select, .form-row textarea{
  width:100%; padding:14px 16px; border:1px solid var(--line); background:var(--white);
  font-family:'Inter',sans-serif; font-size:15px; border-radius:2px; color:var(--charcoal);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{outline:none; border-color:var(--gold-dark);}
.contact-card{background:var(--white); padding:34px; box-shadow:var(--shadow-soft); border-radius:2px; margin-bottom:20px;}
.contact-card .ico{font-size:20px; color:var(--gold-dark); margin-bottom:14px;}

/* whatsapp float */
.wa-float{
  position:fixed; bottom:26px; right:26px; z-index:900;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .3s;
}
.wa-float:hover{transform:scale(1.08);}
.wa-float svg{width:28px; height:28px; fill:#fff;}

/* badge */
.badge-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:24px;}
.badge{
  display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.05em;
  padding:8px 14px; border:1px solid var(--line); border-radius:20px; color:#5a584f;
}
.badge .dot{width:6px; height:6px; border-radius:50%; background:var(--gold);}