
body{
 margin:0;
 background:radial-gradient(circle at center, #ffcc33 0%, #ff9a1f 40%, #ff7a00 90%);
 background-attachment:fixed;
 font-family:Poppins, sans-serif;
 overflow:hidden;
 color:#fff;
}

/* Loader */
#loader{
 position:fixed;inset:0;
 display:flex;align-items:center;justify-content:center;
 background:#000;
 z-index:20;transition:.6s;
}
#loader.hidden{opacity:0;visibility:hidden}
.pulse{
 width:40px;height:40px;border-radius:50%;
 background:#fff;
 animation:pulseLoader 1s infinite ease-in-out;
}
@keyframes pulseLoader{
 0%{transform:scale(0.6);opacity:.4}
 50%{transform:scale(1.1);opacity:1}
 100%{transform:scale(0.6);opacity:.4}
}

/* Orbs */
#glow-orbs{
 position:fixed;
 inset:0;z-index:1;opacity:0.55;
}

/* Particles */
#particles{position:fixed;inset:0;z-index:2;}

.wrap{
 position:relative;
 z-index:3;
 text-align:center;
 top:12vh;
 padding:20px;
}

/* Header (logo next to LUven text) */
.luven-header{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:18px;
 margin-bottom:40px;
 position:relative;
 z-index:10;
}

.big-title{
 font-size:64px;
 font-weight:700;
 text-transform:uppercase;
 animation:titleGlow 4s infinite ease-in-out;
}
@keyframes titleGlow{
 0%{text-shadow:0 0 8px #fff;}
 50%{text-shadow:0 0 20px #fff;}
 100%{text-shadow:0 0 8px #fff;}
}

/* Flame flicker */
.luven-logo{
 width:120px;
 height:auto;
}
.flame{
 animation:flameFlicker .12s infinite alternate ease-in-out;
 filter:drop-shadow(0 0 14px rgba(255,255,255,0.9));
}
@keyframes flameFlicker{
 0%{transform:translateY(0);}
 100%{transform:translateY(-2px);}
}

/* Text blocks */
.big-tag{font-size:28px;margin-top:10px;}
.big-desc{font-size:20px;max-width:600px;margin:auto;line-height:1.7;}

/* Form */
.notify{
 margin-top:30px;
 display:flex;justify-content:center;gap:10px;
}
.notify input{
 padding:14px 20px;font-size:18px;
 border-radius:30px;border:none;outline:none;
}
.notify button{
 padding:14px 26px;font-size:18px;
 border:none;border-radius:30px;
 background:#000;color:#ffc533;
 cursor:pointer;
}

/* Social */
.social{margin-top:40px;}
.x-btn{
 display:inline-block;padding:12px 20px;
 background:#000;border-radius:12px;
 color:#fff;font-size:26px;text-decoration:none;
 box-shadow:0 4px 14px rgba(0,0,0,0.5);
 transition:.2s;
}
.x-btn:hover{transform:translateY(-2px);}

/* Entrance animations */
.fade-in{animation:fadeIn 1.4s ease forwards;}
.rise-in{animation:riseIn 1.6s ease forwards;}
.rise-in2{animation:riseIn 2s ease forwards;}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes riseIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
