:root{
--bg:#070913;
--bg-soft:#141a3f;
--text:#eef0ff;
--soft:#aeb6ff;

--neon:#7b6cff;
--neon-strong:#9f93ff;

--glow:0 0 12px rgba(123,108,255,.55);
--glow-strong:0 0 26px rgba(123,108,255,.95);

--border:rgba(123,108,255,.35);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,body{
min-height:100%;
overflow-x:hidden;
font-family:Segoe UI,system-ui,sans-serif;
background:radial-gradient(circle at top,var(--bg-soft) 0%,var(--bg) 65%);
color:var(--text);
}

/* ===== NAV ===== */

nav{
display:flex;
justify-content:space-between;
align-items:center;
padding:22px 60px;
border-bottom:1px solid var(--border);
background:rgba(7,9,19,.85);
backdrop-filter:blur(6px);
}

.brand{
color:var(--neon);
text-decoration:none;
font-weight:600;
letter-spacing:1.6px;
text-shadow:var(--glow);
}

.menu{
display:flex;
gap:28px;
}

.menu a{
color:var(--soft);
text-decoration:none;
transition:.25s;
}

.menu a:hover{
color:var(--neon);
}

.menu a.active{
color:var(--neon-strong);
text-shadow:var(--glow-strong);
}

a:visited{color:inherit}

/* ===== LAYOUT ===== */

.wrapper{
max-width:1100px;
margin:80px auto;
padding:0 32px;
text-align:center;
}

/* ===== LOGO ===== */

.logo-img{
max-width:180px;
margin:40px auto 30px;
display:block;
border-radius:10px;
border:1px solid var(--border);
box-shadow:var(--glow-strong);
}

/* ===== TEXT ===== */

p{
color:var(--soft);
line-height:1.7;
max-width:720px;
margin:0 auto;
font-size:16px;
}

/* ===== GALLERY ===== */

.gallery{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
gap:28px;
margin-top:40px;
}

.gallery img{
width:100%;
height:auto;
border-radius:12px;
border:1px solid var(--border);
cursor:pointer;
transition:.3s ease;
}

.gallery img:hover{
transform:scale(1.03);
box-shadow:var(--glow-strong);
}

/* ===== VIDEO LINK ===== */

.video-access{
margin-top:120px;
font-size:28px;
color:var(--neon-strong);
text-decoration:none;
letter-spacing:3px;
text-shadow:var(--glow-strong);
transition:.3s;
}

.video-access:hover{
color:var(--neon);
}

/* ===== MOBILE ===== */

@media(max-width:720px){

nav{
padding:18px 22px;
}

.wrapper{
margin:50px auto;
}

.gallery{
grid-template-columns:1fr;
}

.logo-img{
max-width:140px;
}
}