:root{
  --bg0:#050B16; --bg1:#071327;
  --blue:#23A6FF; --green:#2EE59D;
  --text:#EAF2FF; --muted: rgba(234,242,255,.72);
  --shadowLight: 0 18px 55px rgba(0,0,0,.38), 0 8px 18px rgba(0,0,0,.22);
  --ease: cubic-bezier(.2,.8,.2,1);
}

*{box-sizing:border-box}

body{
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin:0; color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 600px at 12% 12%, rgba(35,166,255,.18), transparent 55%),
    radial-gradient(1100px 650px at 88% 28%, rgba(46,229,157,.18), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

.container{max-width:1100px;margin:0 auto;padding:0 18px}

.bg-grid{
  position:fixed; inset:-20%;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 48px 48px;
  transform: perspective(900px) rotateX(62deg);
  opacity:.12;
  pointer-events:none;
  animation: drift 18s linear infinite;
}
@keyframes drift{
  0%{transform: perspective(900px) rotateX(62deg) translateY(0)}
  100%{transform: perspective(900px) rotateX(62deg) translateY(220px)}
}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(5,11,22,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{display:flex; gap:12px; align-items:center;}
.logoSpace{
  width:190px; height:56px; border-radius:14px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
}

header .logo{height:56px !important;}

.title{margin:0;font-size:15px;letter-spacing:.6px}
.subtitle{margin:2px 0 0;font-size:12px;color:var(--muted)}

.btn{
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:10px 14px; border-radius:14px;
  font-size:13px; display:inline-flex; gap:10px; align-items:center;
  transition:.25s var(--ease); cursor:pointer; text-decoration:none;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.09)}
.btn.primary{
  border:none;
  background: linear-gradient(135deg, rgba(35,166,255,.95), rgba(46,229,157,.92));
  box-shadow: 0 18px 50px rgba(35,166,255,.16), 0 18px 50px rgba(46,229,157,.12);
  color:#051018; font-weight:900;
}

.hero{padding:46px 0 18px;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:18px; align-items:stretch;}
.hero-title, .hero-subtitle{font-weight:800;}
.hero-subtitle{margin-top:6px;}
.kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px; border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); border-radius:999px;
  color:var(--muted); font-size:12px;
}
.kdot{width:10px;height:10px;border-radius:99px;background: linear-gradient(135deg, var(--blue), var(--green)); box-shadow: 0 0 0 6px rgba(35,166,255,.12), 0 0 0 12px rgba(46,229,157,.08); animation:pulse 2.2s var(--ease) infinite;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

h2{margin:18px 0 12px;font-size:44px;line-height:1.02;letter-spacing:-1.1px;}
.grad{background: linear-gradient(90deg, rgba(35,166,255,.98), rgba(102,240,255,.95), rgba(46,229,157,.98)); -webkit-background-clip:text; background-clip:text; color:transparent;}
p{margin:0 0 16px;color:var(--muted);font-size:15px;line-height:1.6;max-width:56ch;}

.card{
  border-radius:22px;
  position:relative; overflow:hidden;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s var(--ease);
}

/* Glassmorphism */
.card, .slider, .meter{
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.card::before, .slider::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 260px at var(--mx,50%) var(--my,30%), rgba(255,255,255,.18), transparent 60%);
  opacity: var(--glassFade, .35);
  pointer-events:none;
  transition: opacity .25s var(--ease);
}

.booking{padding:16px;}
.booking h3{margin:0 0 4px;font-size:16px;}
.booking small{color:var(--muted)}
form{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{font-size:12px; color:var(--muted)}
input, select, textarea{
  padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(5,11,22,.35); color:var(--text); outline:none; transition:.2s var(--ease);
  width:100%;
}
input:focus, select:focus, textarea:focus{border-color: rgba(35,166,255,.55); box-shadow: 0 0 0 5px rgba(35,166,255,.14);}
.full{grid-column:1/-1}
.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:6px;}
.note{color:var(--muted); font-size:12px; line-height:1.4;}

section{padding:18px 0 24px;}
.section-title{display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:12px;}
.section-title h3{margin:0;font-size:20px}

.slider{
  position:relative;border-radius:22px;overflow:hidden;height:320px;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .35s var(--ease);
}
.slides{height:100%;display:flex;transition: transform .8s var(--ease); will-change: transform;}
.slide{min-width:100%;height:100%;position:relative;display:grid;place-items:end start;padding:18px;}
.bgimg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05);transform:scale(1.06);transition: transform 1.2s var(--ease);}
.slide.active .bgimg{transform:scale(1.0)}
.caption{
  position:relative; max-width:560px; padding:12px;
  border-radius:18px; background: rgba(5,11,22,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px); font-size:12px; color:var(--muted); z-index:2;
}
.caption b{display:block;font-size:15px;color:var(--text)}
.dots{position:absolute;left:0;right:0;bottom:10px;display:flex;gap:8px;justify-content:center;align-items:center;z-index:3;}
.dot{width:10px;height:10px;border-radius:99px;border:1px solid rgba(255,255,255,.25);background: rgba(255,255,255,.08);transition:.25s var(--ease);cursor:pointer;}
.dot.on{width:26px;background: linear-gradient(90deg, rgba(35,166,255,.95), rgba(46,229,157,.9));border:none;}

.meter{border-radius:22px;padding:14px;margin-top:10px; position:relative; overflow:hidden; transition: transform .35s var(--ease);}
.meterRow{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.bigPrice{font-size:32px;letter-spacing:-.8px;margin:8px 0 4px;}
.sub{color:var(--muted); font-size:12px; line-height:1.5}

/* Map */
.map-wrap{
  margin-top:16px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(5,11,22,.35);
  backdrop-filter: blur(12px);
}
.map-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.map-title{font-size:13px;color:var(--muted)}
.map-distance{font-weight:700}
.pricing-map{
  height:240px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
}
.distance-bar{
  margin-top:10px;
  height:8px;
  background: rgba(255,255,255,.12);
  border-radius:999px;
  overflow:hidden;
}
.distance-fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #23A6FF, #2EE59D);
  transition: width .6s ease;
}

.reveal{opacity:0; transform: translate3d(0,28px,0); transition: opacity .75s var(--ease), transform .75s var(--ease);}
.reveal.on{opacity:1; transform: translate3d(0,0,0);}
@media (prefers-reduced-motion: reduce){ .reveal{transition:none;opacity:1;transform:none;} }

.card, .slider, .meter{ backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: paint; }
input[type="range"]{ touch-action: pan-y; }

.hero-video{margin-top:16px;}
.video-frame{position:relative;padding-top:56.25%;border-radius:18px;overflow:hidden;}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

footer{padding:18px 0 26px;border-top:1px solid rgba(255,255,255,.08);color:var(--muted);font-size:12px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:12px;align-items:start;}
.footer-bottom{margin-top:12px;color:var(--muted)}
.footer-grid a{color:var(--muted);text-decoration:none}

/* Hamburger + glassmorphic menu */
.menu-btn{
  display:none;
  width:46px;height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  cursor:pointer;
  position:relative;
  z-index:60;
}
.menu-btn span{
  position:absolute;
  left:12px; right:12px;
  height:3px;
  background:#ffffff;
  border-radius:3px;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}
.menu-btn span:nth-child(1){ top:14px; }
.menu-btn span:nth-child(2){ top:22px; }
.menu-btn span:nth-child(3){ top:30px; }

body.nav-open .menu-btn span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn span:nth-child(3){ top:22px; transform:rotate(-45deg); }

.nav-links{display:flex;gap:10px;flex-wrap:wrap;}

@media (max-width: 980px){
  .hero-grid{grid-template-columns:1fr; gap:14px}
  h2{font-size:36px}
  .logoSpace{width:160px}
}

@media (max-width: 900px){
  header .nav{flex-wrap:wrap;}
  .menu-btn{display:inline-flex;}
  .nav-links{
    display:none;
    width:100%;
    margin-top:10px;
    padding:12px;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2);
  }
  body.nav-open .nav-links{display:flex; flex-direction:column; gap:8px;}
  form{grid-template-columns:1fr;}
}

@media (max-width: 520px){
  .title{ font-size:14px; }
  .subtitle{ font-size:12px; }
  .pricing-map{height:200px;}
}