/* =====================================================
HYPE TUNES — Global Theme v4.1 (Polished Fix)
===================================================== */

:root{
--blue:#3dd8ff;
--pink:#ff4dd8;
--blue-soft:#7de8ff;
--bg:#000;
}

/* ====================================================
BASE
===================================================== */
html,body{
margin:0;
background:var(--bg);
color:var(--blue);
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
line-height:1.5;
letter-spacing:.2px;
overflow-x:hidden;

}

h1,h2,h3,legend{
color:var(--blue);
font-weight:800;
text-shadow:
0 0 8px rgba(61,216,255,1),
0 0 18px rgba(61,216,255,.85),
0 0 36px rgba(255,77,216,.45);
}

p,label,span,a{
color:var(--blue);
}

a{
text-decoration:none;
transition:all .25s ease;
}

a:hover{
color:var(--pink);
text-shadow:0 0 10px rgba(255,77,216,.7);
}

/* =====================================================
BACKGROUND
===================================================== */
#energy{
position:fixed;
inset:0;
z-index:0;
filter:brightness(1.05) contrast(1.05);
pointer-events:none;
}

/* =====================================================
NAVIGATION
===================================================== */
.top-nav{
position:fixed;
top:0;
left:0;
width:100%;
padding:14px 24px;
display:flex;
justify-content:space-between;
align-items:center;
background:rgba(0,0,0,0.75);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(61,216,255,0.4);
box-shadow:0 4px 20px rgba(61,216,255,0.25);
z-index:9999;
}

.nav-left,
.nav-center,
.nav-right{
flex:1;
display:flex;
align-items:center;
}

.nav-center{
justify-content:center;
gap:32px;
}

.nav-right{
justify-content:flex-end;
}

.nav-link{
font-weight:800;
font-size:.95rem;
white-space:nowrap;
}

.nav-left,
.nav-right{
  flex:0 0 auto;
}

/* DESKTOP SEPARATORS */
.nav-center .nav-link:not(:last-child)::after{
content:"|";
margin-left:20px;
color:rgba(61,216,255,0.5);
}

/* MOBILE DROPDOWN */
.order-dropdown{
display:none;
position:relative;
}

.order-btn{
background:none;
border:none;
color:var(--blue);
font-weight:800;
cursor:pointer;
}

.order-menu{
display:none;
position:absolute;
top:28px;
left:50%;
transform:translateX(-50%);
background:#000;
border:1px solid rgba(61,216,255,0.4);
border-radius:10px;
padding:10px 0;
min-width:160px;
text-align:center;
box-shadow:0 0 20px rgba(61,216,255,0.25);
}

.order-menu a{
display:block;
padding:10px 16px;
font-weight:700;
}

.order-menu a:hover{
background:var(--pink);
color:#000;
}

.order-dropdown.open .order-menu{
display:block;
}

/* MOBILE BREAKPOINT */
@media(max-width:600px){
.desktop-links{display:none;}
.order-dropdown{display:block;}

.container{
  width:100%;
  max-width:900px;
  margin:90px auto 0 auto;
  padding:0 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
}

/* =====================================================
HERO VIDEO
===================================================== */
.video-wrap{
width:100%;
max-width:600px;
margin:0 auto;
position:relative;
aspect-ratio:4/5;
border-radius:18px;
overflow:hidden;
box-shadow:
0 0 22px rgba(61,216,255,.45),
0 0 44px rgba(255,77,216,.25);

isolation:isolate;
transform:translateZ(0);
}

.video-wrap video{
width:100%;
height:100%;
object-fit:cover;
}

.unmute{
position:absolute;
bottom:12px;
right:12px;
background:rgba(0,0,0,.75);
padding:8px 14px;
border-radius:999px;
font-size:.85rem;
font-weight:700;
border:1px solid rgba(61,216,255,.5);
cursor:pointer;
}

/* =====================================================
SOCIAL LINKS
===================================================== */
.links-row{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
margin-top:28px;
}

.chip{
padding:12px 20px;
border-radius:999px;
background:#000;
font-weight:700;
border:1px solid rgba(61,216,255,.6);
box-shadow:0 0 14px rgba(61,216,255,.25);
}

.chip:hover{
background:var(--pink);
color:#000;
}

/* =====================================================
LAYOUT
===================================================== */
.container{
width:100%;
max-width:900px;
margin:90px auto 0 auto;
padding:0 18px;
display:flex;
flex-direction:column;
align-items:center;
}

/* =====================================================
FOOTER
===================================================== */
footer{
width:100%;
text-align:center;
padding:40px 0 60px;
margin-top:40px;
}