:root{
  --bg:#0b1220;
  --panel:#0f1a2f;
  --panel2:#101f3a;
  --text:#eef2ff;
  --muted:#b7c2e2;
  --brand:#6ee7ff;
  --brand2:#a78bfa;
  --border:rgba(255,255,255,.14);
  --shadow: 0 20px 60px rgba(0,0,0,.40);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color:var(--text);
  line-height:1.5;
}

a{color:inherit; text-decoration:none}
code{background: rgba(255,255,255,.08); padding:.15rem .35rem; border-radius:.4rem}

.container{width:min(1100px, 92%); margin:0 auto}
.muted{color:var(--muted)}
.small{font-size:.9rem}

/* ---------- Shared header/nav (used by other pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(11,18,32,.65);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0}

.brand{display:flex; align-items:center; gap:.65rem}
.brand-mark{font-size:1.3rem}
.brand-text{font-weight:800; letter-spacing:.2px}

.nav{display:flex; align-items:center; gap:.9rem}
.nav-link{padding:.45rem .7rem; border-radius:.7rem; border:1px solid transparent; font-weight:600}
.nav-link:hover{border-color: var(--border); background: rgba(255,255,255,.04)}
.nav-link.active{border-color: rgba(110,231,255,.35); background: rgba(110,231,255,.08)}

.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius:.9rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  cursor:pointer;
}
.nav-toggle span{display:block; height:2px; width:18px; background: var(--text); margin:4px auto; border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem;
  border-radius: 1rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition: transform .05s ease, background .2s ease, border-color .2s ease;
  font-weight:700;
}
.btn:hover{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20)}
.btn:active{transform: translateY(1px)}
.btn.primary{ /* legacy */
  border-color: rgba(110,231,255,.35);
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.18));
}
.btn.btn-primary{
  border-color: rgba(255,255,255,.26);
  background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.06));
}
.btn.btn-ghost{
  padding:.6rem 1rem;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.btn.btn-play{
  gap:.6rem;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
}
.play-ico{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.10);
}
.play-ico.big{width:60px; height:60px; font-size:1.25rem}

/* ---------- New homepage hero (glassmorphism) ---------- */
body.home{background:#070b12}
.hero-stage{
  min-height:100vh;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.hero-bg{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.40) 100%),
    url("../img/hero.svg");
  background-size: cover;
  background-position:center;
  filter: saturate(1.1) contrast(1.05);
  transform: scale(1.03);
}
.hero-bg::after{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(900px 500px at 25% 20%, rgba(255,255,255,.25), transparent 55%),
              radial-gradient(700px 420px at 75% 15%, rgba(110,231,255,.22), transparent 60%);
  pointer-events:none;
}

.glass-header{
  position:relative;
  padding: 1.2rem 0 0;
}
.glass-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding: 1rem 1.2rem;
  border-radius: 1.4rem;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}
.brand-glass .brand-text{font-weight:800}
.nav-glass .nav-link{font-weight:650; font-size:.95rem}
.nav-glass .nav-link.active{background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.18)}

.glass-shell{
  position:relative;
  margin-top: 1.2rem;
}
.glass-panel{
  border-radius: 2rem;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  padding: 2.2rem 2rem;
}
.hero-layout{
  display:grid;
  grid-template-columns: 1.2fr .9fr;
  gap: 2rem;
  align-items: start;
}
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.35rem .7rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.92);
  font-weight:700;
  letter-spacing:.08em;
  font-size:.72rem;
}
.kicker .pin{opacity:.95}
.hero-title{
  margin:.9rem 0 .6rem;
  font-size: clamp(2.1rem, 4.4vw, 3.6rem);
  line-height:1.08;
  letter-spacing:-.02em;
}
.hero-sub{
  margin:0 0 1.3rem;
  max-width: 42ch;
  color: rgba(255,255,255,.80);
}
.hero-ctas{display:flex; gap:.8rem; flex-wrap:wrap; align-items:center}

.value-cards{
  display:flex;
  gap: .9rem;
  flex-wrap:wrap;
  margin-top: 2rem;
}
.value-card{
  width: min(280px, 100%);
  padding: .9rem 1rem;
  border-radius: 1.1rem;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.18);
}
.value-title{font-weight:800; margin-bottom:.25rem}
.value-text{color: rgba(255,255,255,.75); font-size:.92rem}

.hero-right{display:flex; flex-direction:column; gap: 1.2rem; align-items: flex-end}
.carousel{
  width: 100%;
  display:grid;
  grid-template-columns: 46px 1fr 46px;
  gap:.8rem;
  align-items:center;
}
.car-btn{
  width:46px; height:46px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 1.35rem;
}
.car-btn:hover{background: rgba(255,255,255,.16)}
.car-viewport{
  border-radius: 1.4rem;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.18);
  overflow:hidden;
  min-height: 260px;
}
.car-slide{
  display:grid;
  grid-template-rows: 1fr auto;
  height: 260px;
}
.car-image{
  background:
    radial-gradient(800px 260px at 10% 20%, rgba(110,231,255,.30), transparent 55%),
    radial-gradient(700px 240px at 90% 25%, rgba(167,139,250,.22), transparent 60%),
    rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.14);
  position:relative;
}
.car-image::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.35));
}
.car-meta{
  padding: .9rem 1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: .8rem;
}
.car-place{font-weight:800}
.car-loc{color: rgba(255,255,255,.75); font-size:.92rem}
.car-chip{
  padding:.28rem .55rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  color: rgba(255,255,255,.80);
  font-size:.82rem;
}

.social-row{
  display:flex;
  gap:.7rem;
  justify-content:flex-end;
}
.soc{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.85);
  font-size:.85rem;
  text-transform: lowercase;
}
.soc:hover{background: rgba(255,255,255,.10)}

.hero-footer{
  position:relative;
  margin-top: auto;
  padding: 1.3rem 0 1.5rem;
}

/* ---------- Modal ---------- */
.modal{position:fixed; inset:0; display:none; z-index:100}
.modal.show{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.55)}
.modal-card{
  position:relative;
  width:min(820px, 92%);
  margin: 7vh auto 0;
  border-radius: 1.4rem;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(15,26,47,.92);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.modal-close{
  width:38px; height:38px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  cursor:pointer;
}
.modal-body{padding: 1.1rem}
.video-placeholder{
  height: 360px;
  border-radius: 1rem;
  border:1px solid rgba(255,255,255,.14);
  background: radial-gradient(600px 220px at 30% 20%, rgba(110,231,255,.20), transparent 55%),
              radial-gradient(600px 220px at 70% 20%, rgba(167,139,250,.18), transparent 55%),
              rgba(0,0,0,.22);
  display:grid;
  place-items:center;
  text-align:center;
  padding: 1.2rem;
}

/* ---------- Existing pages (destinations/about/contact) ---------- */
.hero{padding: 3.5rem 0 2rem} /* legacy, unused on home now */
.section{padding: 2rem 0 3.1rem}
.section-head h1,.section-head h2{margin:0 0 .3rem}
.section-head p{margin:0}

.cards{
  margin-top: 1.1rem;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.card{
  background: rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius: 1.2rem;
  overflow:hidden;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}
.card:hover{transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18)}
.card-body{padding:1rem}
.card h3{margin:.1rem 0 .35rem; font-size:1.05rem}
.tagrow{display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem}
.tag{
  font-size:.84rem;
  padding:.2rem .45rem;
  border-radius: 999px;
  border:1px solid var(--border);
  color: var(--muted);
}
.badge{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.85rem;
  color: var(--muted);
}
.card-top{
  padding: .9rem 1rem;
  background: radial-gradient(500px 120px at 10% 20%, rgba(110,231,255,.24), transparent 55%),
              radial-gradient(450px 120px at 90% 30%, rgba(167,139,250,.22), transparent 55%),
              rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}

.filters{
  display:grid;
  grid-template-columns: 1.4fr .8fr .8fr;
  gap: 1rem;
  margin: 1rem 0 1.2rem;
}
.form{display:grid; gap:.85rem}
.form.wide{max-width:720px}
.grid-2{display:grid; grid-template-columns: 1fr 1fr; gap: .85rem}
.field span{display:block; font-size:.92rem; color:var(--muted); margin-bottom:.3rem}
.field input, .field select, .field textarea{
  width:100%;
  padding:.75rem .85rem;
  border-radius: .95rem;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--text);
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color: rgba(110,231,255,.5);
  box-shadow: 0 0 0 4px rgba(110,231,255,.12);
}
.form-note{margin:.1rem 0 0; color: var(--muted); min-height:1.2rem}

.note-box{
  margin-top: 1.2rem;
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}

/* ---------- Login / Gallery / Payments ---------- */
.auth-shell{max-width: 980px; margin: 0 auto}
.auth-card{max-width: 520px; margin: 0 auto}
.auth-chip{display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .65rem; border-radius: 999px;
  border:1px solid var(--border); background: rgba(255,255,255,.04); color: var(--muted); font-size: .9rem;
}

.g-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem}
.g-item{border:1px solid var(--border); border-radius: 1.2rem; overflow:hidden; background: rgba(255,255,255,.03)}
.g-item img{width:100%; height: 210px; object-fit: cover; display:block}
.g-item figcaption{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .75rem .85rem}
.g-cap{color: var(--text); font-size: .95rem; line-height: 1.2}
.btn-sm{padding: .42rem .65rem; border-radius: 999px; font-size: .9rem}

.price-grid{display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem}
.price-card{border:1px solid var(--border); border-radius: 1.3rem; background: rgba(255,255,255,.03); padding: 1.1rem}
.price-top{display:flex; align-items:flex-start; justify-content:space-between; gap: .8rem}
.price-title{font-weight: 800; font-size: 1.05rem}
.price-amt{font-weight: 900; font-size: 1.5rem; letter-spacing: -.02em}
.price-list{margin:.75rem 0 1rem; padding-left: 1rem; color: var(--muted)}
.status-line{min-height: 1.2rem; color: var(--muted)}

.site-footer{
  border-top:1px solid var(--border);
  background: rgba(11,18,32,.6);
}
.footer-inner{display:flex; justify-content:space-between; gap:1rem; padding: 1.1rem 0; flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width: 900px){
  .hero-layout{grid-template-columns: 1fr; gap: 1.4rem}
  .hero-right{align-items: stretch}
  .glass-panel{padding: 1.6rem 1.2rem}
  .cards{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .filters{grid-template-columns: 1fr}
  .g-grid{grid-template-columns: repeat(2, minmax(0, 1fr))}
  .price-grid{grid-template-columns: 1fr}
}
@media (max-width: 560px){
  .nav{display:none}
  .nav.open{display:flex; position:absolute; right:4%; top:84px; flex-direction:column; gap:.4rem;
    background: rgba(15,26,47,.95); border:1px solid var(--border); border-radius: 1.2rem;
    padding:.65rem; width: 230px;
  }
  .nav-toggle{display:block}
  .cards{grid-template-columns: 1fr}
  .grid-2{grid-template-columns:1fr}
  .glass-inner{padding: .9rem .9rem}
  .g-grid{grid-template-columns: 1fr}
}