:root{
  --acc:#3D8CD8; --ink:#16324f; --sky:#e6f1fc; --sub:#41597a; --hot:#FF7A45; --paper:#f4f5f7;
}
*{box-sizing:border-box; margin:0; padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif; color:var(--ink); background:#fff}
.disp{font-family:'Baloo 2',sans-serif}
a{color:inherit}
img{max-width:100%; display:block}

.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 28px; box-shadow:0 1px 0 rgba(22,50,79,.1);
}
.nbrand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.nlogo{width:44px; height:44px; border-radius:50%}
.nname{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px; line-height:1.2}
.nlinks{display:flex; gap:4px; flex-wrap:wrap; align-items:center}
.nlink{color:var(--ink); text-decoration:none; font-weight:700; font-size:15px; padding:7px 12px; border-radius:999px}
.nlink:hover{background:var(--sky)}
.nright{display:flex; align-items:center; gap:10px}
.btn.small{padding:9px 18px; font-size:15px}

.burger{
  display:none; width:44px; height:44px; border-radius:12px;
  border:2px solid var(--sky); background:#fff;
  align-items:center; justify-content:center; flex:none; cursor:pointer;
}
.burger span, .burger span::before, .burger span::after{
  content:''; display:block; width:20px; height:2px;
  background:var(--ink); border-radius:2px; position:relative;
  transition:transform .2s, opacity .2s;
}
.burger span::before{position:absolute; top:-6px}
.burger span::after{position:absolute; top:6px}
.burger.open span{background:transparent}
.burger.open span::before{transform:translateY(6px) rotate(45deg)}
.burger.open span::after{transform:translateY(-6px) rotate(-45deg)}
.mobmenu{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 18px; border-radius:999px;
  font-family:'Baloo 2',sans-serif; font-weight:600; font-size:15px;
  text-decoration:none; border:0; cursor:pointer; transition:transform .15s;
}
.btn:hover{transform:translateY(-2px)}
.bp{background:var(--acc); color:#fff; box-shadow:0 8px 20px rgba(61,140,216,.35)}
.bs{background:#fff; color:var(--ink); box-shadow:inset 0 0 0 2px rgba(22,50,79,.15)}
.btn-wa{background:#25D366; color:#fff; box-shadow:0 8px 20px rgba(37,211,102,.35)}

.hero{
  background:linear-gradient(180deg,#c7e2fb 0%,#e9f4fe 62%,#fff 100%);
  text-align:center; padding:64px 24px 40px; position:relative;
}
.hlogo{width:150px; height:150px; border-radius:50%; margin:0 auto; box-shadow:0 18px 44px rgba(22,50,79,.2)}
.kicker{font-family:'Baloo 2',sans-serif; color:var(--acc); letter-spacing:.14em; text-transform:uppercase; font-weight:600; font-size:15px}
.h1{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:clamp(40px,6vw,64px); line-height:1.05; color:var(--ink); margin:14px 0 0}
.hsub{font-size:19px; line-height:1.55; color:var(--sub); max-width:560px; margin:16px auto 28px}
.ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}

.sec{padding:76px 24px; max-width:1060px; margin:0 auto}
.tc{text-align:center}
.h2{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:38px; line-height:1.15; color:var(--ink); margin:6px 0 20px}
.m0{margin:0}

.reveal{animation:reveal-in .6s ease both}
@keyframes reveal-in{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}

.bwidget{display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; padding:44px 36px; min-width:0}
.bwidget-solo{max-width:560px; margin:0 auto; padding:0; align-items:stretch; text-align:left}

#sup-booking{width:100%}
.booking-placeholder{
  width:100%; min-height:140px;
  border:2px dashed #9dc3e8; border-radius:18px;
  background:repeating-linear-gradient(45deg,#fff,#fff 10px,#f2f8fe 10px,#f2f8fe 20px);
  display:flex; align-items:center; justify-content:center;
  color:var(--sub); font-size:14px; font-weight:700; text-align:center; padding:12px;
}

.steps{display:grid; grid-template-columns:repeat(3, minmax(220px,1fr)); gap:20px; margin-top:8px}
.scard{background:#fff; border:2px solid #e0edfa; border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:12px; min-width:0}
.snum{width:46px; height:46px; border-radius:50%; background:var(--acc); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:600; font-size:22px; display:flex; align-items:center; justify-content:center}
.stit{font-family:'Baloo 2',sans-serif; font-weight:600; font-size:22px; line-height:1.2; color:var(--ink); margin:0}
.sdesc{color:var(--sub); line-height:1.55; margin:0}

.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px}
.gslot{width:100%; height:200px; border-radius:20px; background:repeating-linear-gradient(45deg,#fff,#fff 10px,#eef5fd 10px,#eef5fd 20px); border:2px dashed #9dc3e8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#5b7ca0; font-size:13px; text-align:center; padding:12px; min-width:0}
.gslot svg{width:28px; height:28px; opacity:.6}
.gsub{color:var(--sub); margin:-6px 0 18px}

.maprow{display:grid; grid-template-columns:1.4fr 1fr; gap:22px; align-items:stretch; margin-top:8px}
.mapfr{width:100%; height:340px; border:0; border-radius:24px; display:block; min-width:0}
.addr{background:var(--sky); border-radius:24px; padding:32px; display:flex; flex-direction:column; gap:10px; justify-content:center; align-items:flex-start; min-width:0}
.addr-icon{width:48px; height:48px; border-radius:50%; background:#fff; color:var(--acc); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(22,50,79,.12); margin-bottom:4px}
.addr-icon svg{width:24px; height:24px}
.atit{font-family:'Baloo 2',sans-serif; font-weight:600; font-size:22px; line-height:1.2; color:var(--ink); margin:0}
.aline{font-size:18px; font-weight:700; color:#2a466b; margin:0; line-height:1.4}
.anote{color:var(--sub); margin:0 0 8px}

.faqw{max-width:760px; margin:0 auto}
.faqi{border:2px solid #e0edfa; border-radius:18px; margin-bottom:12px; background:#fff; overflow:hidden}
.fq{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:17px 22px; cursor:pointer; font-weight:800; font-size:17px; color:var(--ink); width:100%; text-align:left; background:none; border:0; font-family:inherit}
.fmark{font-family:'Baloo 2',sans-serif; font-size:24px; color:var(--acc); line-height:1; flex:none; transition:transform .25s}
.faqi.open .fmark{transform:rotate(45deg)}
.fa{max-height:0; overflow:hidden; transition:max-height .3s ease}
.fa p{padding:0 22px 18px; color:var(--sub); line-height:1.6}

.or2{text-align:center; font-weight:800; color:var(--sub); margin:26px 0 14px}

.foot{background:var(--ink); color:#cfe0f2; padding:38px 28px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px}
.fbrand{display:flex; align-items:center; gap:12px}
.flogo{width:52px; height:52px; border-radius:50%}
.fname{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:20px; line-height:1.2; color:#fff; margin:0}
.fsub{margin:2px 0 0; font-size:14px; color:#9fc0de}
.fcol{display:flex; flex-direction:column; gap:6px; font-size:15px; font-weight:700; text-align:right}
.flink{color:#cfe0f2; text-decoration:none}
.ficon{display:flex; align-items:center; gap:8px; justify-content:flex-end}
.ficon svg{width:16px; height:16px; flex:none; color:#6fa4d6}

/* 3D scene — model.glb inside sticky section, driven only by scroll */
.scene-sticky{position:relative; height:140vh; background:linear-gradient(180deg,#fff 0%,#e9f4fe 30%,#c7e2fb 50%,#e9f4fe 70%,#fff 100%)}
.scene-view{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.scene-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.scene-loading{position:absolute; z-index:2; color:var(--sub); font-size:14px; font-weight:700}
#hotspots{position:absolute; inset:0; z-index:6; pointer-events:none}
.hotspot{position:absolute; width:26px; height:26px; margin:-13px 0 0 -13px; border-radius:50%; background:rgba(255,122,69,.22); border:2px solid var(--hot); box-shadow:0 2px 8px rgba(22,50,79,.25); cursor:pointer; pointer-events:auto; transition:opacity .3s, transform .2s; animation:pulse 2.4s ease-out infinite}
.hotspot:hover{transform:scale(1.2)}
.hotspot::after{content:'+'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--hot); font-size:15px; font-weight:700}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,122,69,.5)} 70%{box-shadow:0 0 0 14px rgba(255,122,69,0)} 100%{box-shadow:0 0 0 0 rgba(255,122,69,0)}}
.scene-view.zoomed .hotspot:not(.active){opacity:0; pointer-events:none}

.scene-hint{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:4;
  display:flex; align-items:center; gap:10px;
  color:var(--sub); font-size:13px; font-weight:700;
  background:rgba(255,255,255,.9); padding:8px 10px 8px 18px; border-radius:999px;
  box-shadow:0 4px 14px rgba(22,50,79,.1); white-space:nowrap;
  transition:opacity .3s;
}
.info-pin{
  position:relative; z-index:7; width:32px; height:32px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(61,140,216,.18); border:2px solid var(--acc); color:var(--acc);
  cursor:pointer; transition:transform .2s;
}
.info-pin svg{width:18px; height:18px; display:block}
.info-pin:hover{transform:scale(1.1)}
.scene-view.zoomed .scene-hint{opacity:0; pointer-events:none}

.modal-bg{position:fixed; inset:0; z-index:100; display:none; background:rgba(22,50,79,.45); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:24px}
.modal-bg.open{display:flex}
.modal-card{position:relative; max-width:420px; width:100%; background:#fff; border-radius:22px; padding:36px; box-shadow:0 30px 80px -20px rgba(22,50,79,.4); transform:scale(.9); opacity:0; transition:transform .25s, opacity .25s}
.modal-bg.open .modal-card{transform:scale(1); opacity:1}
.modal-close{position:absolute; top:18px; right:22px; background:none; border:0; color:var(--sub); font-size:22px; cursor:pointer}
.modal-tit{font-family:'Baloo 2',sans-serif; font-size:22px; font-weight:700; line-height:1.2; margin-bottom:10px; color:var(--acc)}
.modal-desc{color:var(--sub); font-size:15px; line-height:1.6}
.modal-list{list-style:none; margin-top:12px; display:grid; gap:10px; padding:0}
.modal-list li{padding-left:18px; position:relative}
.modal-list li::before{content:''; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--acc)}
.modal-list strong{color:var(--ink)}

@media (max-width:980px){
  .nlinks{display:none}
  .burger{display:flex}
  .mobmenu.open{display:flex}
  .mobmenu{
    position:absolute; top:100%; left:0; right:0; background:#fff;
    flex-direction:column; padding:10px 20px 20px;
    box-shadow:0 12px 24px rgba(22,50,79,.12); border-bottom:1px solid rgba(22,50,79,.08);
  }
  .mobmenu .nlink{padding:14px 6px; border-bottom:1px solid var(--sky); border-radius:0}
  .nname{display:none}
}

@media (max-width:820px){
  .steps{grid-template-columns:1fr}
  .gal{grid-template-columns:1fr 1fr}
  .maprow{grid-template-columns:1fr}
  .mapfr{min-height:260px}
  .bwidget{padding:32px 24px}
  .bwidget-solo{padding:0}
  .scene-sticky{height:130vh}
  .scene-hint{
    white-space:nowrap; max-width:96%; width:fit-content; left:50%; right:auto;
    transform:translateX(-50%); text-align:center; font-size:11px; line-height:1.3;
    padding:8px 12px; border-radius:16px; gap:8px;
  }
}

@media (max-width:520px){
  .nav{padding:10px 16px}
  .gal{grid-template-columns:1fr}
  .foot{flex-direction:column; align-items:flex-start; text-align:left}
  .fcol{align-items:flex-start; text-align:left}
  .scene-hint{bottom:16px; font-size:11px; padding:9px 10px}
  .info-pin{width:28px; height:28px}
  .info-pin svg{width:16px; height:16px}
}