:root{
  --bg:#060a12;
  --panel: rgba(255,255,255,.07);
  --panel2: rgba(255,255,255,.10);
  --stroke: rgba(255,255,255,.14);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.70);
  --ice: #a9d0ff;
  --plat:#e6ecf5;
  --shadow: 0 30px 90px rgba(0,0,0,.55);
  --radius: 22px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
.container{ width:min(1160px, calc(100% - 48px)); margin:0 auto; }

/* Background slideshow (CSS only) */
.bgWrap{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
  background: #060a12;
}
.bgLayer{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position:center;
  filter: saturate(1.08) contrast(1.06) brightness(.92);
  transform: scale(1.04);
  opacity:0;
  animation: bgFade 50s infinite;
}
.bg1{ background-image:url("assets/bg/bg1.jpg"); animation-delay: 0s; }
.bg2{ background-image:url("assets/bg/bg2.jpg"); animation-delay: 10s; }
.bg3{ background-image:url("assets/bg/bg3.jpg"); animation-delay: 20s; }
.bg4{ background-image:url("assets/bg/bg4.jpg"); animation-delay: 30s; }
.bg5{ background-image:url("assets/bg/bg5.jpg"); animation-delay: 40s; }

@keyframes bgFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  20%{ opacity:1; }
  24%{ opacity:0; }
  100%{ opacity:0; }
}
/* Force first image visible immediately even before animation kicks in */
.bg1{ opacity:1; }

.noise{
  position:absolute; inset:-20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.33'/%3E%3C/svg%3E");
  opacity:.07;
  mix-blend-mode: overlay;
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(closest-side at 50% 38%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.52) 72%, rgba(0,0,0,.78) 100%);
}

/* Ensure content is above background */
body > *:not(.bgWrap){ position:relative; z-index:2; }

/* Top bar */
.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(6,10,18,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbarInner{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:12px; font-weight:650; letter-spacing:.6px; }
.brandMark{
  width:12px; height:12px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--ice) 58%, rgba(30,60,120,1) 100%);
  box-shadow: 0 0 0 6px rgba(169,208,255,.12);
}
.nav{ display:flex; gap:18px; align-items:center; font-size:14px; }
.nav a{ padding:10px 12px; border-radius:12px; color:var(--muted); }
.nav a:hover{ color:var(--text); background: rgba(255,255,255,.06); }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px;
  border-radius: 14px;
  font-weight:650;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); }
.btnIce{
  border-color: rgba(169,208,255,.45);
  background: linear-gradient(180deg, rgba(230,236,245,.96), rgba(169,208,255,.92));
  color:#08101d;
}
.pill{
  display:inline-flex; padding:8px 10px; border-radius:999px;
  border:1px solid rgba(169,208,255,.25);
  background: rgba(169,208,255,.10);
  color: rgba(230,236,245,.96);
  font-size: 12px;
}

/* Hero */
.hero{ padding:86px 0 34px; }
.heroGrid{ display:grid; gap:22px; grid-template-columns: 1.2fr .8fr; align-items:end; }
.kicker{ color: rgba(169,208,255,.92); font-size:13px; letter-spacing:2.4px; text-transform:uppercase; }
.h1{ font-size: clamp(38px, 5vw, 60px); line-height:1.02; margin:10px 0 14px; letter-spacing:-.8px; }
.sub{ font-size:16px; line-height:1.65; color:var(--muted); max-width:62ch; }
.heroCard{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
}
.heroCard .price{ font-size:13px; color: var(--muted); }
.heroCard .big{ font-size:34px; margin:10px 0 12px; letter-spacing:-.6px; }
.ctaRow{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }

/* Sections / cards */
.section{ padding: 30px 0 8px; }
.sectionTitle{ display:flex; align-items:end; justify-content:space-between; gap:16px; margin: 18px 0 16px; }
.sectionTitle h2{ margin:0; font-size:22px; letter-spacing:-.2px; }
.sectionTitle p{ margin:0; color:var(--muted); font-size:14px; }

.cards{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }
.card{
  grid-column: span 4;
  padding:18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}
.card:before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 30%, rgba(169,208,255,.16), transparent 55%);
  transform: rotate(8deg);
}
.card h3{ margin:0 0 8px; font-size:16px; position:relative; }
.card p{ margin:0; color:var(--muted); font-size:14px; line-height:1.55; position:relative; }
.card .tag{ margin-top:12px; position:relative; }

/* Reviews one-card */
.reviewsBox{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  padding: 18px;
  box-shadow: var(--shadow);
}
.reviewCard{ display:flex; gap:14px; align-items:flex-start; }
.reviewCard .avatar{
  width:40px; height:40px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, #fff, rgba(169,208,255,.9) 55%, rgba(255,255,255,.1) 100%);
  box-shadow: 0 0 0 6px rgba(169,208,255,.10);
  flex: 0 0 auto;
}
.reviewCard strong{ display:block; font-size:14px; }
.reviewCard p{ margin:6px 0 0; color:var(--muted); font-size:15px; line-height:1.55; }

.reviewControls{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);
}
.dots{ display:flex; gap:6px; align-items:center; }
.dot{ width:7px; height:7px; border-radius:99px; background: rgba(255,255,255,.18); cursor:pointer; }
.dot.on{ background: rgba(169,208,255,.92); }
.ctrls{ display:flex; gap:10px; }
.ctrlBtn{
  cursor:pointer; padding:10px 12px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.9);
  font-weight:650;
}
.ctrlBtn:hover{ background: rgba(255,255,255,.08); }

.fade{ opacity:0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease; }
.fade.on{ opacity:1; transform:none; }

/* Popup centered */
.popupOverlay{
  position:fixed; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center; justify-content:center;
  padding:22px;
  z-index:999;
}
.popup{
  width: min(920px, 100%);
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  box-shadow: 0 55px 150px rgba(0,0,0,.72);
  padding: 22px;
  display:flex; gap:18px; align-items:center; justify-content:space-between;
  transform: translateY(10px) scale(.98);
  opacity: 0;
  animation: popIn .28s ease forwards;
}
@keyframes popIn{ to{ transform: translateY(0) scale(1); opacity: 1; } }
.popup p{ margin:0; color: rgba(255,255,255,.86); font-size:14px; line-height:1.45; }
.icon{
  width:52px; height:52px; border-radius: 18px;
  border:1px solid rgba(169,208,255,.28);
  background: rgba(169,208,255,.10);
  display:grid; place-items:center;
  color: rgba(230,236,245,.96);
  font-weight:800;
}
.popupActions{ display:flex; gap:10px; align-items:center; }
.closeX{
  cursor:pointer; padding:12px 14px; border-radius: 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.closeX:hover{ background: rgba(255,255,255,.08); }

.popup .btnIce{
  padding: 13px 18px;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(169,208,255,.22), 0 0 0 6px rgba(169,208,255,.10);
  position:relative;
}
.popup .btnIce:after{
  content:"";
  position:absolute; inset:-10px;
  border-radius: 20px;
  border: 1px solid rgba(169,208,255,.25);
  opacity:.55;
  pointer-events:none;
  animation: pulseGlow 1.6s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%{ transform: scale(.98); opacity:.35; }
  50%{ transform: scale(1.02); opacity:.70; }
  100%{ transform: scale(.98); opacity:.35; }
}

/* Footer */
.footer{ padding: 30px 0 60px; color: rgba(255,255,255,.55); font-size: 13px; }

/* Responsive */
@media (max-width: 960px){
  .heroGrid{ grid-template-columns: 1fr; }
  .card{ grid-column: span 6; }
}
@media (max-width: 640px){
  .card{ grid-column: span 12; }
  .popup{ flex-direction:column; align-items:stretch; }
  .popupActions{ justify-content:space-between; flex-wrap:wrap; }
}


/* Layout V2 */
.sectionPad{ padding: 34px 0 10px; }
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  margin: 10px 0 14px;
}
.grid2{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 16px;
  align-items: start;
}
.panel{
  border-radius: var(--radius);
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow);
  padding: 18px;
}
.miniKicker{
  color: rgba(169,208,255,.92);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.list{
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.list li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  line-height: 1.55;
}
.list li:last-child{ border-bottom:0; }
.statRow{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat{
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 14px;
}
.stat .num{
  font-size: 26px;
  letter-spacing: -.5px;
}
.stat .lbl{
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}
.steps{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.step{
  grid-column: span 4;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
  position:relative;
  overflow:hidden;
}
.step:before{
  content:"";
  position:absolute; inset:-45%;
  background: radial-gradient(circle at 30% 30%, rgba(169,208,255,.14), transparent 55%);
  transform: rotate(12deg);
}
.step .n{
  display:inline-flex;
  width:30px; height:30px;
  border-radius: 12px;
  align-items:center; justify-content:center;
  border:1px solid rgba(169,208,255,.25);
  background: rgba(169,208,255,.10);
  color: rgba(230,236,245,.96);
  font-weight: 800;
  position:relative;
}
.step h4{ margin:10px 0 6px; font-size: 15px; position:relative; }
.step p{ margin:0; color: var(--muted); font-size: 13.5px; line-height:1.55; position:relative; }

.faq{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
.faqItem{
  grid-column: span 6;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
}
.faqItem h4{ margin:0 0 8px; font-size: 15px; }
.faqItem p{ margin:0; color: var(--muted); line-height:1.55; }

.ctaBand{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 18px;
  border-radius: 24px;
  border:1px solid rgba(169,208,255,.20);
  background: linear-gradient(180deg, rgba(169,208,255,.10), rgba(255,255,255,.04));
  box-shadow: var(--shadow);
}
.ctaBand .left p{ margin:6px 0 0; color: var(--muted); }
.ctaBand .right{ display:flex; gap:10px; flex-wrap:wrap; }

/* About page timeline */
.timeline{ display:grid; gap: 12px; }
.tItem{
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  padding: 16px;
}
.tItem .yr{
  display:inline-flex;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(169,208,255,.25);
  background: rgba(169,208,255,.10);
  color: rgba(230,236,245,.96);
  font-size: 12px;
  letter-spacing: .6px;
}
.tItem h4{ margin:10px 0 6px; font-size: 15px; }
.tItem p{ margin:0; color: var(--muted); line-height:1.55; }

@media (max-width: 960px){
  .grid2{ grid-template-columns: 1fr; }
  .step{ grid-column: span 12; }
  .faqItem{ grid-column: span 12; }
  .statRow{ grid-template-columns: 1fr; }
  .ctaBand{ flex-direction: column; align-items: stretch; }
}