: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);
  --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 */
.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; gap:10px;
  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;
  position:relative;
}
.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%}

/* Loading button */
.btn .btnSpin{
  width:16px; height:16px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  border-top-color: rgba(255,255,255,.95);
  display:none;
  animation: spin 0.9s linear infinite;
}
.btn.loading .btnSpin{display:inline-block}
.btn.loading .btnText{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

.tiny{font-size:12px; color:rgba(255,255,255,.58); margin-top:10px}

/* Hero */
.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 .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:-.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 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)}
.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}
.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}

/* Grid cards */
.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; cursor:pointer;
  background:transparent;
  padding:0;
}
.shot:focus{outline:2px solid rgba(124,92,255,.5); outline-offset:2px}
.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}
.playBadge{
  position:absolute; right:14px; bottom:14px;
  width:44px; height:44px; border-radius:18px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.35);
  display:grid; place-items:center;
  font-weight:900;
}
.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}

/* Features */
.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}

/* 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)}

/* Contact */
.contactWrap{display:grid; grid-template-columns:1.05fr .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 */
.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)}

/* Modal */
.modal{
  position:fixed; inset:0; display:none;
  z-index:3000;
}
.modal.open{display:block}
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.70);
  backdrop-filter: blur(6px);
}
.modal__panel{
  position:relative;
  width:min(920px, calc(100% - 28px));
  margin: 70px auto 0;
  border-radius: 22px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(10,12,20,.85);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.modal__top{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.modal__title{font-weight:900}
.modal__close{
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius: 14px;
  padding: 8px 10px;
  cursor:pointer;
}
.modalVideo{
  width:100%;
  height: min(62vh, 520px);
  background:#000;
}
.modal__hint{
  padding: 10px 14px 14px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
}

/* Toast */
.toast{
  position:fixed;
  left:50%;
  transform: translateX(-50%);
  bottom: 140px;
  padding: 12px 14px;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  opacity:0;
  transition: opacity .2s ease;
  z-index:3200;
  max-width: min(520px, calc(100% - 28px));
  text-align:center;
  font-weight:800;
}
.toast--ok{border-color: rgba(0,212,255,.30)}
.toast--bad{border-color: rgba(255,80,80,.35)}

/* 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}
  .contactWrap{grid-template-columns:1fr}
  .masonry{grid-template-columns:1fr}
  .s1,.s2,.s3,.s4,.s5,.s6{grid-column:auto; min-height:220px}
  .modal__panel{margin-top: 60px}
}
@media (max-width:520px){
  .formGrid{grid-template-columns:1fr}
  .miniReel{grid-template-columns:1fr}
  .ctaBand{flex-direction:column; align-items:flex-start}
  .modalVideo{height: 46vh}
}