@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700;900&display=swap');
:root{
  --bg:#0a0a12; --text:#ffffff; --muted:#ffffffbc;
  --v1:#008cff; --v2:#006789; --v3:#00bbf9; --v4:#00aeff; --v5:#7b2cbf;
  --glass: rgba(0, 191, 255, 0.354); --line: rgba(255, 255, 255, 0.696);
  --glow:0 0 26px rgba(0, 187, 255, 0.597), 0 0 72px rgba(0, 153, 255, 0.505), 0 0 110px rgba(10, 160, 246, 0.511);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#000 url('../img/bg-street.jpg') center/cover fixed no-repeat; color:var(--text); font-family:'Montserrat', system-ui, Arial; scroll-behavior:smooth; }
a{ color:var(--text); text-decoration:none; }
a:hover{ text-decoration:underline; }
img{ max-width:100%; height:auto; display:block; }

/* NAV */
.nav{ position:fixed; top:0; left:0; right:0; z-index:999; background:linear-gradient(180deg, rgba(10,10,18,.9), rgba(10,10,18,.2)); border-bottom:1px solid var(--line); backdrop-filter: blur(10px); }
.nav-inner{ max-width:1200px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:16px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; letter-spacing:.08em; }
.brand img{ width:42px; height:42px; }
.links{ margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  --grad: linear-gradient(135deg, var(--v2), var(--v3) 40%, var(--v5));
  position:relative; isolation:isolate;
  padding:12px 18px; border-radius:999px; border:1px solid rgba(255,255,255,.18);
  color:#0a0a12; font-weight:900; letter-spacing:.04em;
  background: var(--grad); box-shadow: var(--glow);
  transition: transform .15s ease, filter .2s ease, box-shadow .2s ease;
}
.btn::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0)); opacity:.35; pointer-events:none; }
.btn:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 8px 30px rgba(0,245,212,.25); }
.btn.alt{
  --grad: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#fff; background: var(--grad); border-color: var(--line);
}

/* HERO */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:0 16px; }
.hero::after{ content:''; position:absolute; inset:0; background:radial-gradient(60% 50% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.85)); z-index:-1; }
.hero-inner{ max-width:1100px; text-align:center; }
.kicker{ display:inline-block; padding:8px 12px; border-radius:999px; background:linear-gradient(135deg, var(--v4), var(--v2)); color:#0a0a12; font-weight:900; letter-spacing:.08em; }
.h1{ font-size:clamp(36px,7vw,88px); line-height:1.02; margin:18px 0 10px; letter-spacing:.06em; text-shadow:0 2px 18px rgba(0,0,0,.8); }
.sub{ color:var(--muted); max-width:760px; margin:0 auto 20px; }

/* SECTIONS */
.section{ max-width:1200px; margin:80px auto; padding:0 16px; }
.section .title{ font-size:clamp(22px,3.5vw,36px); margin:0 0 10px; }
.card{ background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:var(--glow); }

.media-embed{ aspect-ratio:16/9; width:100%; border:0; border-radius:16px; overflow:hidden; box-shadow:var(--glow); }

.video-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:16px; }

/* GALLERY */
.gallery{ column-count:1; column-gap:16px; }
@media (min-width:700px){ .gallery{ column-count:2; } }
@media (min-width:1100px){ .gallery{ column-count:3; } }
.gallery figure{ break-inside: avoid; margin:0 0 16px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--glass); cursor:pointer; }
.gallery figcaption{ padding:8px 12px; color:var(--muted); background:linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.6)); font-size:12px; letter-spacing:.08em; }

/* LIGHTBOX */
.lightbox{ position:fixed; inset:0; background:rgba(0,0,0,.9); display:none; align-items:center; justify-content:center; padding:20px; z-index:1000; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:92vw; max-height:82vh; border-radius:16px; box-shadow:var(--glow); }
.lightbox .close{ position:absolute; top:20px; right:24px; font-size:28px; cursor:pointer; background:rgba(255,255,255,.12); border-radius:999px; padding:6px 12px; }

/* SOCIALS */
.socials{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.socials.top-socials{ justify-content:center; margin:32px 0 60px 0; gap:18px; flex-wrap:wrap; }
.socials a{ display:inline-flex; align-items:center; gap:6px; padding:12px 16px; border-radius:999px; color:#fff; font-weight:700; transition: transform .15s ease, filter .2s ease; border:1px solid var(--line); }
.socials a:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.socials a img{ filter: invert(1); }
.socials a.ig{ background:linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.socials a.fb{ background:#1877F2; }
.socials a.sp{ background:#1db954; }
.socials a.yt{ background:#ff0000; }
.socials a.tk{ background:linear-gradient(135deg,#25f4ee,#fe2c55); }

.footer{ max-width:1200px; margin:60px auto 30px; padding:0 16px; text-align:center; color:var(--muted); }

@media (max-width:900px){
  .links{ display:none; }
}


/* === ULTRA Mobile Anti-Distortion (injected) === */
img{max-width:100%; height:auto; image-rendering:auto;}
.gallery img{width:100%; height:auto; max-width:100%; object-fit:contain; image-rendering:auto; display:block;}
.gallery figure{break-inside:avoid; margin:0 0 16px;}
@media (max-width: 768px){ .gallery{ column-count:1; column-gap:12px; } }
@media (min-width: 769px) and (max-width: 1099px){ .gallery{ column-count:2; column-gap:16px; } }
@media (min-width: 1100px){ .gallery{ column-count:3; column-gap:16px; } }