/* ================= ROOT COLORS ================= */
:root{
--pink:#ff5fa2;
--hotpink:#ff3cac;
--yellow:#ffe066;
--aqua:#00eaff;
--cyan:#7afcff;
--purple:#c77dff;
--card:linear-gradient(135deg,#ff7adf,#ffb347);
}

/* ================= BODY ================= */
body{
margin:0;
font-family:'Fredoka',sans-serif;
color:#fff;
overflow-x:hidden;

background:
radial-gradient(circle at 20% 20%, #ff9bdc, transparent 40%),
radial-gradient(circle at 80% 30%, #ffe066, transparent 40%),
radial-gradient(circle at 50% 80%, #7afcff, transparent 40%),
#ff5fa2;
}

/* ================= HEADER ================= */
.header{
position:fixed;
top:0;
width:100%;
z-index:100;
background:rgba(0,0,0,0.55);
backdrop-filter:blur(12px);
}

.header-inner{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px 15px;
}

.header-logo{
width:55px;
height:55px;
border-radius:12px;
box-shadow:0 0 10px rgba(0,0,0,0.5);
}

.brand{
display:flex;
align-items:center;
gap:12px;
}

.brand-name{
font-weight:bold;
font-size:20px;
}

.brand-tag{
font-size:12px;
opacity:0.8;
}

/* ================= NAV ================= */
.nav-tabs{
display:flex;
justify-content:center;
gap:15px;
padding:10px;
background:var(--card);
}

.nav-tabs a{
background:#fff;
color:#000;
padding:8px 15px;
border-radius:20px;
font-weight:bold;
text-decoration:none;
transition:0.2s;
}

.nav-tabs a:hover{
background:var(--aqua);
transform:scale(1.1);
}

/* ================= MOBILE MENU ================= */
.menu-btn{
font-size:26px;
cursor:pointer;
display:none;
}

.mobile-menu{
position:fixed;
top:0;
right:-100%;
width:70%;
height:100%;
background:#111;
padding:20px;
transition:0.3s;
z-index:200;
}

.mobile-menu.active{
right:0;
}

.mobile-menu a{
display:block;
color:#fff;
text-decoration:none;
margin:15px 0;
font-size:18px;
}

/* ================= BACKGROUND ================= */
.rotator{
position:fixed;
width:100%;
height:100%;
z-index:0;
}

.rotator img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
opacity:0;
transition:opacity 1.5s;
}

.rotator img.active{
opacity:0.2;
}

.overlay{
position:fixed;
width:100%;
height:100%;
background:rgba(255,255,255,0.15);
z-index:1;
}

/* ================= FLOATING CANDY ================= */
.candy{
position:fixed;
font-size:24px;
animation:floatUp linear infinite;
opacity:0.85;
z-index:2;
pointer-events:none;
}

@keyframes floatUp{
0%{transform:translateY(100vh) rotate(0deg);}
100%{transform:translateY(-10vh) rotate(360deg);}
}

/* ================= LAYOUT ================= */
.main{
padding-top:140px;
position:relative;
z-index:3;
}

.container{
display:flex;
flex-direction:column;
align-items:center;
gap:30px;
padding:20px;
position:relative;
z-index:3;
}

/* ================= CARD ================= */
.card{
width:100%;
max-width:700px;
background:var(--card);
border-radius:25px;
padding:30px;
text-align:center;
box-shadow:0 0 40px rgba(0,0,0,0.3);
backdrop-filter:blur(8px);
transition:transform 0.25s ease;
position:relative;
z-index:4;
}

.card:hover{
transform:scale(1.02);
}

/* ================= TEXT ================= */
h1{
font-size:40px;
text-shadow:2px 2px var(--hotpink);
}

.sub{
margin:15px 0;
font-size:18px;
}

/* ================= BUTTON ================= */
.btn{
display:inline-block;
padding:12px 25px;
border-radius:30px;
background:var(--aqua);
color:#000;
font-weight:bold;
text-decoration:none;
transition:0.2s;
}

.btn:hover{
background:#fff;
transform:scale(1.1);
}

/* ================= FOOTER ================= */
.footer{
margin-top:40px;
padding:20px;
text-align:center;
background:rgba(0,0,0,0.5);
position:relative;
z-index:3;
}

.footer-sub{
font-size:12px;
opacity:0.8;
}

/* ================= 🔥 DESKTOP UPGRADE ================= */
@media (min-width: 1100px){

.container{
gap:50px;
padding:40px;
}

/* BIGGER, USE SPACE */
.card{
max-width:1100px;
padding:50px 70px;
}

/* BETTER TYPOGRAPHY SCALE */
h1{
font-size:56px;
}

.sub{
font-size:22px;
}

/* BUTTON FEELS MORE PREMIUM */
.btn{
padding:16px 35px;
font-size:18px;
}

/* HEADER BREATHES MORE */
.header-inner{
padding:15px 40px;
}

}

/* ================= MOBILE ================= */
@media(max-width:700px){

.nav-tabs{
display:none;
}

.menu-btn{
display:block;
}

.main{
padding-top:90px;
}

.header-logo{
width:45px;
height:45px;
}

h1{
font-size:30px;
}

}