/* Minimal, fast landing page (no frameworks) */
:root{
  --bg:#0b0c10;
  --panel:#101218;
  --panel2:#0f1117;
  --text:#e9ecf1;
  --muted:#aab3c2;
  --line:#202534;
  --accent:#7c5cff;
  --accent2:#22c55e;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 18px;
  --radius2: 28px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(124,92,255,.25), transparent 60%),
              radial-gradient(900px 500px at 10% 20%, rgba(34,197,94,.15), transparent 55%),
              var(--bg);
  color: var(--text);
}

.container{width:min(1120px, 92%); margin:0 auto;}
a{color:inherit; text-decoration:none}
code{background:rgba(255,255,255,.06); padding:.1rem .35rem; border-radius:8px; border:1px solid rgba(255,255,255,.08)}
.muted{color:var(--muted)}
.small{font-size:.92rem}

.topbar{
  position:sticky; top:0; z-index:10;
  background: rgba(11,12,16,.75);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; padding:.9rem 0;}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:700;}
.brand__dot{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--accent2))}
.brand__name{letter-spacing:.2px}

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.65rem 1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
  font-weight:600;
}
.btn:hover{background: rgba(255,255,255,.07)}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(34,197,94,.85));
  border-color: rgba(255,255,255,.2);
}
.btn--ghost{background: rgba(255,255,255,.03)}
.btn--lg{padding:.85rem 1.15rem; font-size:1.02rem}

.hero{padding: 4.2rem 0 2.2rem;}
.hero__grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:2rem; align-items:center;}
@media (max-width: 900px){ .hero__grid{grid-template-columns:1fr} .topbar__cta{display:none} }

.pill{
  display:inline-block;
  padding:.35rem .75rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  margin:0 0 1rem;
}
h1{font-size: clamp(2rem, 3.2vw, 3.2rem); margin:.2rem 0 1rem; line-height:1.06;}
.sub{font-size:1.08rem; line-height:1.55; color: var(--muted); margin:0 0 1.4rem;}
.hero__highlights{display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin: 1rem 0 1.3rem;}
@media (max-width: 700px){ .hero__highlights{grid-template-columns:1fr} }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.mini{padding:.85rem .9rem}
.mini__title{font-size:.82rem; color: var(--muted); margin-bottom:.35rem}
.mini__value{font-weight:700}
.hero__buttons{display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom: 1rem}
.trust{display:flex; gap:1rem; flex-wrap:wrap; color: var(--muted); font-size:.95rem}

.hero__media{display:flex; flex-direction:column; gap:1rem}
.media-frame{position:relative; overflow:hidden; border-radius: var(--radius2); border:1px solid rgba(255,255,255,.1); box-shadow: var(--shadow);}
.media-frame__img{width:100%; height: 360px; object-fit:cover; display:block;}
@media (max-width: 900px){ .media-frame__img{height: 280px;} }
.media-frame__badge{
  position:absolute; left:14px; bottom:14px;
  background: rgba(11,12,16,.75);
  border:1px solid rgba(255,255,255,.14);
  padding:.45rem .7rem;
  border-radius:999px;
  font-weight:700;
}

.stats{display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem}
.stat{padding: .9rem .9rem}
.stat__num{font-size:1.6rem; font-weight:800}
.stat__label{color: var(--muted); margin-top:.2rem}

.section{padding: 3.1rem 0}
.section--alt{background: rgba(255,255,255,.02); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
h2{font-size: clamp(1.5rem, 2vw, 2.1rem); margin:0 0 1.2rem}
.grid{display:grid; gap:1rem}
.grid--3{grid-template-columns: repeat(3, 1fr)}
@media (max-width: 900px){ .grid--3{grid-template-columns: 1fr} }
.feature{padding:1.15rem 1.1rem}
.feature h3{margin:.2rem 0 .55rem}
.feature p{margin:0; color:var(--muted); line-height:1.55}

.video-wrap{padding: .9rem}
video{width:100%; border-radius: 14px; border:1px solid rgba(255,255,255,.08); background:#000}

.gallery-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.gallery{display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-top: 1rem}
@media (max-width: 900px){ .gallery{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 520px){ .gallery{grid-template-columns: 1fr} }
.gallery__item{display:block; overflow:hidden; border-radius: 16px; border:1px solid rgba(255,255,255,.09); box-shadow: var(--shadow)}
.gallery__item img{width:100%; height: 220px; object-fit:cover; display:block; transition: transform .25s ease}
.gallery__item:hover img{transform: scale(1.04)}

.map{overflow:hidden}
.map iframe{width:100%; height: 380px; border:0; display:block; border-radius: var(--radius)}

.enquire{padding: 1.2rem; display:grid; grid-template-columns: 1.1fr .9fr; gap:1.2rem}
@media (max-width: 900px){ .enquire{grid-template-columns:1fr} }
.contact-cards{display:grid; grid-template-columns: repeat(3, 1fr); gap:.8rem; margin-top: 1rem}
@media (max-width: 900px){ .contact-cards{grid-template-columns:1fr} }

.contact{padding:1rem}
.contact__title{color: var(--muted); font-size:.86rem}
.contact__value{font-weight:800; margin-top:.35rem}

.details{list-style:none; padding:0; margin: .6rem 0 0}
.details li{display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.06)}
.details li span{color: var(--muted)}
.details li strong{font-weight:800}
.divider{height:1px; background: rgba(255,255,255,.08); margin: 1rem 0}

.note{margin-top: 1rem; padding: .9rem; border-radius: 16px; border:1px dashed rgba(255,255,255,.18); background: rgba(255,255,255,.03)}
.note__title{font-weight:800; margin-bottom:.3rem}
.note__text{color: var(--muted); line-height:1.55}

.footer{padding: 1.8rem 0; border-top:1px solid rgba(255,255,255,.06)}
.footer__inner{display:flex; justify-content:space-between; gap:1rem; align-items:center; flex-wrap:wrap}
.footer__right{display:flex; gap:1rem; color: var(--muted)}