:root{
  --bg:#070816;
  --panel:#0c0e24;
  --panel2:#0a0b1d;
  --text:#e8ebff;
  --muted:#b7bdd8;
  --muted2:#8c93b5;
  --border:rgba(255,255,255,.10);
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --c1:#33d7ff;
  --c2:#ff3bd4;
  --c3:#7b6cff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: radial-gradient(1200px 600px at 30% 10%, rgba(51,215,255,.12), transparent 60%),
              radial-gradient(900px 520px at 80% 30%, rgba(255,59,212,.10), transparent 65%),
              radial-gradient(900px 520px at 50% 90%, rgba(123,108,255,.10), transparent 60%),
              var(--bg);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
strong{font-weight:700}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}

.container{
  width:min(1100px, 92vw);
  margin:0 auto;
}

/* Top bar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(14px);
  background: rgba(7,8,22,.55);
  border-bottom:1px solid var(--border);
}
.topbar__inner{
  display:flex;
  align-items:center;
  gap:18px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:10px;
  min-width: 230px;
}
.brand__dot{
  width:10px;height:10px;border-radius:999px;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow:0 0 22px rgba(51,215,255,.35);
}
.brand__name{font-weight:800; letter-spacing:-.03em}
.brand__sub{color:var(--muted2); font-size:12px; font-weight:600}

.nav{
  display:flex;
  gap:14px;
  flex:1;
  justify-content:center;
}
.nav a{
  color:var(--muted);
  font-weight:600;
  font-size:14px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid transparent;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.nav a:hover{
  color:var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  transform: translateY(-1px);
}

.cta{
  font-weight:800;
  font-size:14px;
  padding:10px 14px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(51,215,255,.16), rgba(255,59,212,.14));
  border:1px solid rgba(255,255,255,.14);
  box-shadow: 0 14px 45px rgba(0,0,0,.35);
  transition: transform .2s ease, filter .2s ease;
}
.cta:hover{ transform: translateY(-1px); filter: brightness(1.08); }

/* Hero */
.hero{
  position:relative;
  padding: 84px 0 72px;
}
.hero__inner{
  position:relative;
  z-index:2;
  text-align:center;
}
.hero__glow{
  position:absolute;
  inset:-120px -40px -200px;
  background:
    radial-gradient(500px 260px at 20% 25%, rgba(51,215,255,.14), transparent 60%),
    radial-gradient(520px 300px at 80% 35%, rgba(255,59,212,.13), transparent 60%),
    radial-gradient(520px 320px at 55% 65%, rgba(123,108,255,.10), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
  z-index:1;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color:var(--muted);
  font-weight:700;
  font-size:13px;
  backdrop-filter: blur(10px);
}
.pill__icon{
  width:24px;height:24px;
  display:grid;place-items:center;
  border-radius:999px;
  background: linear-gradient(135deg, rgba(51,215,255,.22), rgba(255,59,212,.18));
  border:1px solid rgba(255,255,255,.14);
}

.hero__title{
  margin: 18px auto 0;
  max-width: 980px;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height:1.05;
  letter-spacing:-.05em;
  font-weight: 900;
}
.grad{
  background: linear-gradient(135deg, var(--c1), var(--c2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 22px rgba(51,215,255,.14);
}

.hero__subtitle{
  margin: 14px auto 0;
  max-width: 900px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--muted);
}

.hero__stats{
  margin: 26px auto 0;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 860px;
}
.stat{
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 16px 14px;
  box-shadow: var(--shadow);
}
.stat__num{
  font-weight: 900;
  font-size: 26px;
  letter-spacing:-.03em;
}
.stat__label{
  margin-top: 4px;
  color: var(--muted2);
  font-weight: 700;
  font-size: 13px;
}

.hero__actions{
  margin-top: 22px;
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .2s ease, filter .2s ease, background .2s ease;
}
.btn--primary{
  background: linear-gradient(135deg, rgba(51,215,255,.22), rgba(255,59,212,.18));
  box-shadow: 0 20px 55px rgba(0,0,0,.45);
}
.btn--primary:hover{ transform: translateY(-2px); filter: brightness(1.08); }
.btn--ghost{
  background: rgba(255,255,255,.03);
}
.btn--ghost:hover{ transform: translateY(-2px); filter: brightness(1.06); }

.hero__hint{
  margin-top: 36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
  opacity:.9;
}
.hint__mouse{
  width: 22px; height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  position:relative;
}
.hint__mouse::after{
  content:"";
  width: 4px; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.65);
  position:absolute; left:50%; top:8px;
  transform: translateX(-50%);
  animation: wheel 1.6s ease-in-out infinite;
}
.hint__text{ color: var(--muted2); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }

@keyframes wheel{
  0%{ transform: translate(-50%, 0); opacity:.9 }
  70%{ transform: translate(-50%, 10px); opacity:.25 }
  100%{ transform: translate(-50%, 0); opacity:.9 }
}

/* Sections */
.section{ padding: 72px 0; }
.section--alt{
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.section__head{
  max-width: 860px;
  margin: 0 auto 22px;
  text-align:center;
}
.section__head h2{
  margin:0;
  font-size: 28px;
  letter-spacing:-.04em;
}
.section__head p{
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.7;
}
.h2-small{ font-size:22px !important; }

.grid{
  display:grid;
  gap: 14px;
}
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 18px 16px;
  box-shadow: var(--shadow);
}
.card h3{
  margin: 0 0 8px;
  letter-spacing:-.02em;
}
.card p{ margin:0; color: var(--muted); line-height:1.65 }
.card--soft{
  background: linear-gradient(135deg, rgba(51,215,255,.05), rgba(255,59,212,.04));
}

.list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.75;
}
.list li{ margin: 8px 0; }

.quote{
  margin: 20px auto 0;
  max-width: 900px;
  padding: 18px 16px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  text-align:center;
}
.quote p{ margin:0; font-weight:700; color: var(--text); line-height:1.55 }
.quote span{ display:block; margin-top:10px; color: var(--muted2); font-weight:700; font-size: 13px; }

.divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 22px 0;
}

/* Media */
.media{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  align-items:start;
}
.shot__img{
  width:100%;
  height:120px;
  object-fit:cover;
  display:block;
  background:#000;
}
.media__title{
  font-weight: 900;
  letter-spacing:-.02em;
}
.video{
  width: 100%;
  border-radius: 14px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: #000;
}
.media__caption{
  margin-top: 10px;
  color: var(--muted2);
  font-weight: 700;
  font-size: 13px;
}
.gallery{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.shot{
  width:100%;
  text-align:left;
  padding: 0;
  border: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
  transition: transform .2s ease, filter .2s ease, border-color .2s ease;
}
.shot:hover{
  transform: translateY(-2px);
  filter: brightness(1.06);
  border-color: rgba(255,255,255,.18);
}
.shot__ph{
  height: 120px;
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  background: linear-gradient(135deg, rgba(51,215,255,.09), rgba(255,59,212,.08));
}
.shot__cap{
  padding: 10px 10px 12px;
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

.tags{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.tag{
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight: 800;
  font-size: 13px;
}

/* Footer */
.footer{
  padding: 28px 0 40px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.14);
}
.footer__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
}
.footer__title{ font-weight: 900; letter-spacing:-.02em }
.footer__meta{ color: var(--muted2); font-weight:700; font-size:13px; margin-top: 6px }
.footer__right{ display:flex; gap:10px; align-items:center; color: var(--muted2); font-weight:800; font-size:13px }
.footlink{ color: var(--muted); }
.footlink:hover{ color: var(--text); }
.dot{ opacity:.5 }

/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  display:none;
  z-index: 80;
}
.lightbox.is-open{ display:block; }
.lightbox__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
}
.lightbox__panel{
  position:relative;
  width: min(980px, 92vw);
  margin: 7vh auto 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(10,11,29,.92);
  box-shadow: 0 28px 90px rgba(0,0,0,.65);
  overflow:hidden;
}
.lightbox__img{
  width:100%;
  max-height: 70vh;
  object-fit: contain;
  background: #000;
  display:block;
}
.lightbox__cap{
  padding: 12px 14px 16px;
  color: var(--muted);
  font-weight: 700;
}
.lightbox__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-size: 18px;
  cursor:pointer;
}
.lightbox__close:hover{ filter: brightness(1.08); }

/* Responsive */
@media (max-width: 920px){
  .nav{ display:none; }
  .brand{ min-width:auto; }
  .hero{ padding: 66px 0 58px; }
  .grid--3{ grid-template-columns: 1fr; }
  .grid--2{ grid-template-columns: 1fr; }
  .hero__stats{ grid-template-columns: 1fr; }
  .media{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px){
  .gallery{ grid-template-columns: 1fr; }
}