:root{
  --blue:#2563EB;
  --blue-dark:#1D4ED8;
  --navy:#0F1E38;
  --text-soft:#5B6472;
  --bg-blue-soft:#EAF3FE;
  --bg-blue-softer:#F4F9FE;
  --border:#E4E8EE;
  --white:#FFFFFF;
  --shadow:0 10px 30px rgba(15,30,56,0.08);
  --shadow-sm:0 4px 14px rgba(15,30,56,0.06);
  --radius:16px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--navy);
  background:var(--white);
  line-height:1.6;
}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
@media(max-width:640px){.container{padding:0 20px;}}
.section{padding:72px 0;}
.kicker{
  font-size:0.82rem;font-weight:700;color:var(--blue);letter-spacing:0.04em;
  margin-bottom:14px;
}
.section-lead{margin-top:16px;color:var(--white);font-size:1.02rem;max-width:44ch;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:0.98rem;padding:13px 24px;border-radius:10px;
  border:none;cursor:pointer;transition:background .15s ease, transform .1s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--blue);color:#fff;margin-top:26px;}
.btn-primary:hover{background:var(--blue-dark);}
.btn-invert{background:#FDF6E9;color:var(--navy);}
.btn-invert:hover{background:#fff;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;padding:16px 28px;gap:20px;
}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.15rem;}
.logo img { width:150px; }
.main-nav{display:flex;gap:26px;flex:1;justify-content:right;}
.main-nav a{font-size:0.95rem;font-weight:500;color:var(--text-soft);padding:6px 2px;border-bottom:2px solid transparent;}
.main-nav a.active{color:var(--blue);border-color:var(--blue);font-weight:600;}
.main-nav a:hover{color:var(--navy);}
.icon-btn{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;}
@media(max-width:860px){
  .main-nav{position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;
    gap:0;border-bottom:1px solid var(--border);display:none;padding:6px 0;}
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 24px;border-bottom:1px solid var(--border);}
  .nav-toggle{display:block;}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:64px;padding-bottom:96px;}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-fade{
  position:absolute;inset:0;  
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)), url('../images/hero-bg.jpg'); background-size: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-inner{position:relative;z-index:1;max-width:90%; }
.hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.1;color:var(--navy);}
.hero-lead{margin-top:18px;font-size:1.08rem;color:var(--text-soft);max-width:42ch;}
.search-bar{
  margin-top:30px;display:flex;align-items:center;gap:10px;background:#fff;
  border-radius:14px;box-shadow:var(--shadow);padding:8px 8px 8px 18px;max-width:520px;
}
.search-icon{display:flex;}
.search-bar input{
  flex:1;border:none;outline:none;font-family:inherit;font-size:0.98rem;color:var(--navy);
  background:transparent;padding:10px 0;
}
.search-bar input::placeholder{color:#9AA3B2;}
.search-bar button{
  display:flex;align-items:center;gap:6px;background:var(--blue);color:#fff;border:none;
  border-radius:10px;padding:12px 20px;font-weight:600;font-size:0.96rem;cursor:pointer;
}
.search-bar button:hover{background:var(--blue-dark);}
.hero-note{
  position:absolute;top:38px;right:6%;z-index:1;text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.hero-note span{
  font-family:'Caveat',cursive;font-size:1.35rem;font-weight:700;color:var(--blue);line-height:1.15;
}
.hero-note svg{margin-top:4px;transform:scaleX(-1);}
@media(max-width:760px){.hero-note{display:none;}}

/* ---------- Category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media(max-width:920px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){.cat-grid{grid-template-columns:1fr;}}
.cat-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding-bottom:18px;box-shadow:var(--shadow-sm);transition:box-shadow .15s ease, transform .15s ease;
}
.cat-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);}
.photo{
  height:150px;border-radius:var(--radius) var(--radius) 0 0;position:relative;
  background-size:cover;background-position:center;
}
.ph-kos{background:linear-gradient(135deg,#F5E9DA,#E7CBA8); background: url('../images/kosan_buncing_sari.jpeg') center top; background-size: cover; }
.ph-villa{background:linear-gradient(135deg,#CDEBE6,#8FCDBE); background: url('../images/villa-hp.jpeg') center center; background-size: cover; }
.ph-rumah{background:linear-gradient(135deg,#DCEBFB,#9FC4EE); background: url('../images/rumah-hp.jpeg') center center; background-size: cover; }
.ph-map{background:linear-gradient(135deg,#E4F1E0,#B8DDA9); background: url('../images/jelajah.jpg'); background-size: cover; }
.badge-icon{
  position:absolute;left:16px;bottom:-18px;width:38px;height:38px;background:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
}
.cat-card h3{font-size:1.08rem;margin:28px 20px 6px;}
.cat-card p{font-size:0.92rem;color:var(--text-soft);margin:0 20px 4px;min-height:2.6em;}
.cat-card .go{
  display:inline-flex;align-items:center;gap:4px;margin:6px 20px 0;font-size:0.9rem;font-weight:600;color:var(--blue);
}
.cat-card .go i{font-style:normal;transition:transform .15s ease;}
.cat-card:hover .go i{transform:translateX(3px);}

/* ---------- Location / map ---------- */
.location-section{background:var(--bg-blue-soft);border-radius:0; background: url('../images/island.jpg'); background-size: cover;}
.location-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:center;}

@media(max-width:880px){
  .location-grid{grid-template-columns:1fr; gap: 0;}
  .location-section { padding-bottom:48px;  }
  .map-box { display:none; }
  .map-box .map-card, .map-box .pin { display: none; }
  .owner-bg { background-position: left center; }
  .search-bar { display:none; }	
  .hero-lead { margin-bottom: 40px; }
}
.location-grid h2{font-size:clamp(1.7rem,3vw,2.3rem);}
.map-box{
  position:relative;border-radius:20px;overflow:hidden;
  aspect-ratio:8/7;
}
.map-box svg{position:absolute;inset:0;width:100%;height:100%;}
.pin{
  position:absolute;display:flex;align-items:center;gap:5px;font-size:0.82rem;font-weight:600;color:var(--navy);
  transform:translate(-50%,-100%);
}
.pin .dot{
  width:14px;height:14px;border-radius:50% 50% 50% 0;background:var(--blue);
  border:2px solid #fff;box-shadow:0 2px 5px rgba(0,0,0,0.25);transform:rotate(-45deg);
}
.pin.strong{font-weight:700;}
.pin-canggu{top:63%;left:18%;}
.pin-ubud{top:65%;left:43%;}
.pin-denpasar{top:75%;left:38%;}
.pin-uluwatu{top:87%;left:28%;}
.pin-a{top:22%;left:78%;}
.pin-b{top:64%;left:70%;}
.map-card{
  position:absolute;top:37%;left:31%;background:rgba(255, 255, 255, 0.8);border-radius:14px;box-shadow:var(--shadow);
  padding:12px 14px;display:flex;align-items:center;gap:12px;max-width:230px;
}
.map-card .thumb{width:44px;height:44px;border-radius:8px;background:linear-gradient(135deg,#CDEBE6,#8FCDBE);flex-shrink:0;}
.map-card strong{display:block;font-size:0.88rem;}
.map-card small{display:block;color:var(--text-soft);font-size:0.75rem;margin-top:1px;}
.map-card .price{display:block;font-size:0.78rem;color:var(--blue);font-weight:700;margin-top:3px;}
.map-card i{font-style:normal;color:var(--blue); padding-left: 45%;}
.zoom-ctrl{
  position:absolute;bottom:16px;right:16px;display:flex;flex-direction:column;
  background:#fff;border-radius:10px;overflow:hidden;
}
.zoom-ctrl button{
  width:34px;height:34px;border:none;background:#fff;font-size:1.1rem;cursor:pointer;color:var(--navy);
  border-bottom:1px solid var(--border);
}
.zoom-ctrl button:last-child{border-bottom:none;}

/* ---------- Trust section ---------- */
.trust-grid{display:grid;grid-template-columns:0.85fr 1.3fr 0.85fr;gap:40px;align-items:center;}
@media(max-width:980px){.trust-grid{grid-template-columns:1fr;justify-items:center;}}

.phone-mock{
  width:230px;background:#0F1E38;border-radius:34px;padding:10px;box-shadow:var(--shadow);
}
.phone-notch{width:60px;height:6px;background:#0F1E38;border-radius:6px;margin:0 auto 6px;}
.phone-status{
  display:flex;justify-content:space-between;padding:2px 12px 6px;font-size:0.7rem;font-weight:600;color:#fff;
}
.phone-screen{background:#fff;border-radius:24px;overflow:hidden;}
.ph-photo{height:110px;background:linear-gradient(135deg,#CDEBE6,#8FCDBE); background:url('../images/villa-hp.jpeg'); background-size:cover; }
.phone-card{padding:14px;}
.pc-top strong{display:block;font-size:0.95rem;}
.pc-top small{display:block;color:var(--text-soft);font-size:0.76rem;margin-top:1px;}
.pc-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.pc-stats span{font-size:0.68rem;background:var(--bg-blue-softer);color:var(--navy);padding:4px 8px;border-radius:6px;}
.pc-price{margin-top:10px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pc-price strong{font-size:0.92rem;}
.pc-price span{font-size:0.76rem;color:var(--text-soft);}
.pc-price em{
  font-style:normal;margin-left:auto;background:#DFF4E3;color:#1E7E43;font-size:0.68rem;
  font-weight:700;padding:3px 8px;border-radius:6px;
}
.pc-thumbs{display:flex;gap:6px;margin-top:10px;}
.pc-thumbs i{width:32px;height:26px;border-radius:5px;background:var(--bg-blue-softer);display:block;}
.pc-btn{
  width:100%;margin-top:12px;background:var(--blue);color:#fff;border:none;border-radius:8px;
  padding:9px;font-weight:600;font-size:0.8rem;display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;
}

.trust-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);}
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;}
@media(max-width:480px){.feature-grid{grid-template-columns:1fr;}}
.feature{display:flex;align-items:center;gap:10px;font-size:0.88rem;font-weight:500;color:var(--navy);}
.info-box{
  margin-top:26px;background:var(--bg-blue-softer);border-radius:12px;padding:16px 18px;
  display:flex;gap:12px;align-items:flex-start;
}
.info-box p{font-size:0.88rem;color:var(--text-soft);line-height:1.5;}
.info-box strong{color:var(--navy);}

.trust-photo-wrap{position:relative;}
.ph-house-solo{
  width:200px;height:300px;border-radius:18px;
  background:linear-gradient(160deg,#DCEBFB,#9FC4EE); background: url('../images/kosan_buncing_sari.jpeg') center center; background-size: cover;
  box-shadow:var(--shadow-sm);
}
.note-right{position:static;margin-top:14px;align-items:flex-start;text-align:left;}
.note-right svg{transform:none;}
@media(max-width:980px){.note-right{display:flex;align-items:center;}}

/* ---------- Owner banner ---------- */
.owner-banner{
  position:relative;overflow:hidden;border-radius:22px;padding:44px 40px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.owner-bg{position:absolute;inset:0;z-index:0;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), url('../images/cta-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.owner-content{position:relative;z-index:1;display:flex;gap:16px;align-items:flex-start;}
.owner-content h2{color:#fff;font-size:clamp(1.4rem,2.6vw,1.8rem);}
.owner-content p{color:#fff; margin-top:8px;font-size:1rem; font-weight: 500;}
.pill-row{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.pill{
  background:rgba(255,255,255,0.14);color:#fff;font-size:0.78rem;font-weight:600;
  padding:5px 12px;border-radius:999px;
}
.owner-banner .btn-invert{position:relative;z-index:1;flex-shrink:0;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);padding:28px 0;}
.site-footer p{font-size:0.85rem;color:var(--text-soft); text-align: center;}