:root{
  --bg:#070A12;
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.72);
  --line:rgba(255,255,255,.14);
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.10);
  --brand:#7C5CFF;
  --brand2:#00D4FF;
  --shadow:0 22px 70px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(124,92,255,.26), transparent 60%),
    radial-gradient(900px 700px at 90% 0%, rgba(0,212,255,.18), transparent 60%),
    var(--bg);
  color:var(--text);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.container{width:min(1160px, calc(100% - 40px)); margin:0 auto}

/* Progress bar */
.progress{
  position:fixed; top:0; left:0; right:0; height:3px;
  background: rgba(255,255,255,.06);
  z-index:2000;
}
.progress__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(0,212,255,.65));
}

/* Top strip */
.topStrip{
  position:sticky; top:3px; z-index:1500;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topStrip__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0;
  font-size:13px; color:var(--muted);
}
.stripLeft{display:flex; align-items:center; gap:10px}
.dotPulse{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 5px rgba(124,92,255,.14);
  animation:pulse 1.4s infinite;
}
@keyframes pulse{
  0%{transform:scale(.95); opacity:.8}
  50%{transform:scale(1.1); opacity:1}
  100%{transform:scale(.95); opacity:.8}
}
.stripLink{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  font-weight:800;
  color:#fff;
}

/* Header */
.header{
  position:sticky; top:44px; z-index:1400;
  background: rgba(7,10,18,.65);
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; gap:14px;
}
.brand{display:flex; align-items:center; gap:10px}
.brand__logo{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(0,212,255,.7));
  box-shadow: 0 14px 40px rgba(124,92,255,.18);
}
.brand__name{font-weight:900; letter-spacing:.2px}
.nav{display:flex; gap:18px; color:var(--muted); font-weight:700}
.nav a:hover{color:#fff}
.header__actions{display:flex; gap:10px}

.menuBtn{
  display:none;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.mobileNav{
  display:none;
  padding:14px 0 18px;
  border-top:1px solid rgba(255,255,255,.08);
}
.mobileNav a{display:block; padding:10px 0; color:var(--muted)}
.mobileNav a:hover{color:#fff}
.mobileNav.open{display:block}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  padding:12px 16px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22)}
.btn--primary{
  border-color: rgba(124,92,255,.40);
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.55));
  box-shadow: 0 20px 50px rgba(124,92,255,.16);
}
.btn--ghost{background: rgba(255,255,255,.03)}
.btn--full{width:100%}

/* Hero video section */
.hero{
  position:relative;
  min-height: calc(100vh - 140px);
  display:grid; align-items:center;
  padding: 50px 0 70px;
  overflow:hidden;
}
.heroVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  filter: saturate(1.1) contrast(1.05);
}
.heroOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 600px at 25% 20%, rgba(124,92,255,.25), transparent 60%),
    radial-gradient(900px 600px at 85% 5%, rgba(0,212,255,.18), transparent 60%),
    linear-gradient(to bottom, rgba(7,10,18,.25), rgba(7,10,18,.92));
}
.heroGlow{
  position:absolute; inset:-40px;
  background:
    radial-gradient(700px 500px at 15% 30%, rgba(124,92,255,.10), transparent 60%),
    radial-gradient(700px 500px at 85% 15%, rgba(0,212,255,.08), transparent 60%);
  pointer-events:none;
}
.hero__inner{
  position:relative;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 24px;
  align-items:center;
}
.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:var(--muted);
  width:max-content;
  margin-bottom:14px;
}
.badgeDot{
  width:10px; height:10px; border-radius:999px;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 0 0 4px rgba(124,92,255,.14);
}
.hero h1{
  margin:0;
  font-size: clamp(36px, 5.3vw, 62px);
  line-height:1.03;
  letter-spacing:-0.8px;
}
.hero p{
  margin:14px 0 18px;
  color: var(--muted);
  line-height:1.75;
  max-width: 64ch;
}
.heroCtas{display:flex; gap:12px; flex-wrap:wrap}
.heroStats{
  margin-top:18px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.stat{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.statNum{font-size:18px; font-weight:900}
.statTxt{font-size:12px; color: var(--muted); margin-top:2px}

/* Glass quote card */
.glassCard{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.24);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glassTop{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  background: rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.glassTitle{font-weight:900}
.pill{
  font-size:12px; font-weight:900;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(124,92,255,.15);
}
.pill--soft{background: rgba(255,255,255,.06); color: var(--muted)}
.glassBody{padding:16px}
.formRow{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
label{font-size:12px; color: var(--muted); font-weight:800}
input, select, textarea{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  color:#fff;
  padding:12px 12px;
  outline:none;
}
textarea{resize:vertical}
input::placeholder, textarea::placeholder{color: rgba(255,255,255,.45)}
.formGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tiny{font-size:12px; color: rgba(255,255,255,.58); margin-top:10px}

.miniReel{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.miniItem{
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  font-weight:800;
  color: rgba(255,255,255,.82);
}

/* Scroll hint */
.scrollDown{
  position:absolute;
  left:50%; bottom:18px;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: rgba(255,255,255,.75);
  font-size:12px;
}
.mouse{
  width:22px; height:34px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  position:relative;
}
.mouse::after{
  content:"";
  position:absolute; left:50%; top:8px;
  width:4px; height:4px; border-radius:50%;
  background:#fff;
  transform:translateX(-50%);
  animation: wheel 1.2s infinite;
}
@keyframes wheel{
  0%{opacity:0; transform:translate(-50%, -2px)}
  20%{opacity:1}
  100%{opacity:0; transform:translate(-50%, 12px)}
}

/* Sections */
.section{padding: 44px 0 22px}
.section--soft{
  background: rgba(255,255,255,.02);
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sectionHead{padding: 0 0 14px}
.sectionHead h2{
  margin:0;
  font-size: clamp(22px, 3.2vw, 36px);
}
.sectionHead p{
  margin:10px 0 0;
  color: var(--muted);
  line-height:1.7;
  max-width: 70ch;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
  margin-top: 10px;
}
.card{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:18px;
}
.card--featured{
  border-color: rgba(124,92,255,.45);
  background: linear-gradient(180deg, rgba(124,92,255,.18), rgba(255,255,255,.06));
}
.tag{
  display:inline-block;
  font-size:12px; font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  margin-bottom:10px;
}
.cardTop h3{margin:0 0 6px}
.cardTop p{margin:0 0 14px; color: var(--muted); line-height:1.7}
.list{display:grid; gap:10px; color: rgba(255,255,255,.82); font-weight:800; margin-bottom:14px}

.ctaBand{
  margin-top: 14px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(0,212,255,.10));
  padding: 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  box-shadow: var(--shadow);
}
.ctaBand h3{margin:0 0 6px}
.ctaBand p{margin:0; color: var(--muted); line-height:1.7}

/* Masonry gallery */
.masonry{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.shot{
  position:relative;
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  min-height: 220px;
  transform: translateZ(0);
}
.shotOverlay{
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(7,10,18,.85), rgba(7,10,18,.10));
}
.shotText{
  position:absolute; left:14px; bottom:14px;
  font-weight:900; letter-spacing:.2px;
}
.s1{grid-column: span 6; background:url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat}
.s2{grid-column: span 6; background:url("https://images.unsplash.com/photo-1526481280695-3c687fd643ed?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat}
.s3{grid-column: span 4; background:url("https://images.unsplash.com/photo-1500375592092-40eb2168fd21?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat}
.s4{grid-column: span 4; background:url("https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat}
.s5{grid-column: span 4; background:url("https://images.unsplash.com/photo-1526779259212-939e64788e3c?auto=format&fit=crop&w=1400&q=80") center/cover no-repeat}
.s6{grid-column: span 12; min-height: 260px; background:url("https://images.unsplash.com/photo-1500835556837-99ac94a94552?auto=format&fit=crop&w=1600&q=80") center/cover no-repeat}

/* Feature cards */
.feature{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:18px;
}
.icon{font-size:24px}
.feature h3{margin:10px 0 6px}
.feature p{margin:0; color: var(--muted); line-height:1.7}

/* Split section */
.split{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:14px;
  align-items:stretch;
}
.splitLeft{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:18px;
}
.splitLeft h3{margin:0 0 8px}
.splitLeft p{margin:0 0 14px; color: var(--muted); line-height:1.75}
.checks{display:grid; gap:10px; font-weight:800; color: rgba(255,255,255,.82); margin-bottom:14px}

.splitRight{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:18px;
}
.splitCard{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  padding:14px;
  height:100%;
}
.splitTop{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
.timelineMini{display:grid; gap:10px}
.tItem{
  padding:10px 12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.80);
  font-weight:800;
}
.tItem span{color:#fff}

/* Reviews */
.review{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:18px;
}
.stars{letter-spacing:2px}
.review p{color: var(--muted); line-height:1.75; margin:10px 0 12px}
.who{display:flex; align-items:center; gap:10px}
.av{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:14px;
  background: linear-gradient(135deg, rgba(124,92,255,.85), rgba(0,212,255,.55));
  font-weight:900;
}
.small{font-size:12px; color: var(--muted)}

/* FAQ */
.faq{
  margin-top: 14px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:14px;
}
.faqItem{
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  padding:14px 16px;
}
.faqItem summary{cursor:pointer; font-weight:900}
.faqBody{margin-top:10px; color: var(--muted); line-height:1.75}
code{
  background: rgba(0,0,0,.25);
  padding:2px 6px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
}

/* Contact */
.contactWrap{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap:14px;
  align-items:start;
}
.contactLeft h2{margin:0 0 8px}
.contactLeft p{margin:0 0 16px; color: var(--muted); line-height:1.75}
.infoBox{display:grid; gap:12px}
.infoRow{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}
.ico{font-size:18px}
.lbl{font-size:12px; color: var(--muted); font-weight:900}
.val{font-weight:900}
.contactForm{
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
  padding:18px;
}

/* Sticky CTA bottom */
.sticky{
  position:fixed;
  left:0; right:0; bottom:0;
  padding: 10px 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  border-top:1px solid rgba(255,255,255,.10);
  z-index:1400;
}
.sticky__inner{display:flex; justify-content:space-between; align-items:center; gap:10px}
.stickyText{color: rgba(255,255,255,.78)}

/* Floating buttons */
.floatBtns{
  position:fixed;
  right:14px;
  bottom:82px;
  display:grid;
  gap:10px;
  z-index:1500;
}
.floatBtn{
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  font-size:22px;
}
.floatBtn:hover{transform: translateY(-2px)}

/* Footer */
.footer{
  padding: 22px 0 110px;
  border-top:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
}
.footer__inner{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; color: var(--muted);
}
.footerLinks{display:flex; gap:14px}
.footerLinks a:hover{color:#fff}

/* Reveal */
.reveal{opacity:0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform: translateY(0)}

/* Responsive */
@media (max-width: 980px){
  .nav, .header__actions{display:none}
  .menuBtn{display:inline-flex}
  .hero__inner{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .contactWrap{grid-template-columns:1fr}
  .masonry{grid-template-columns: 1fr}
  .s1,.s2,.s3,.s4,.s5,.s6{grid-column: auto; min-height:220px}
}
@media (max-width: 520px){
  .formGrid{grid-template-columns:1fr}
  .miniReel{grid-template-columns:1fr}
  .ctaBand{flex-direction:column; align-items:flex-start}
}