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

body {
background: #000;
color: white;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}

.noise {
position: fixed;
width: 100%;
height: 100%;
pointer-events: none;
opacity: 0.03;
background-image: url('https://grainy-gradients.vercel.app/noise.svg');
}

.hero {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
position: relative;
}

.logo {
font-family: 'Bungee', cursive;
font-size: clamp(3rem, 10vw, 8rem);
background: linear-gradient(90deg,#ff2bd6,#39ff14,#00eaff,#ff8800);
background-size: 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: glowShift 8s infinite linear;
filter: drop-shadow(0 0 10px #ff2bd6);
}

@keyframes glowShift {
0% {background-position: 0%;}
100% {background-position: 300%;}
}

.tagline {
font-size: 1.5rem;
margin-top: 20px;
color: #c86cff;
}

.subtag {
margin-top: 10px;
opacity: 0.7;
max-width: 500px;
}

.cta {
margin-top: 40px;
padding: 15px 40px;
border: 2px solid #39ff14;
color: #39ff14;
text-decoration: none;
border-radius: 100px;
transition: 0.3s;
box-shadow: 0 0 15px #39ff14;
}

.cta:hover {
background: #39ff14;
color: black;
}

.floating {
position: absolute;
font-size: 2rem;
opacity: 0.7;
animation: float 6s infinite ease-in-out;
}

.floating1 {
top: 20%;
left: 10%;
}

.floating2 {
top: 60%;
right: 12%;
}

.floating3 {
top: 25%;
right: 20%;
}

@keyframes float {
0%,100% {transform: translateY(0px);}
50% {transform: translateY(-20px);}
}

.moving-text {
overflow: hidden;
white-space: nowrap;
border-top: 1px solid #222;
border-bottom: 1px solid #222;
padding: 20px 0;
}

.moving-text div {
display: inline-block;
animation: scrollText 18s linear infinite;
font-size: 1.2rem;
color: #ff2bd6;
}

@keyframes scrollText {
0% {transform: translateX(100%);}
100% {transform: translateX(-100%);}
}

.products {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px;
padding: 100px 20px;
}

.product-card {
width: 320px;
background: rgba(255,255,255,0.03);
border: 1px solid #222;
border-radius: 30px;
padding: 25px;
backdrop-filter: blur(10px);
transition: 0.4s;
position: relative;
overflow: hidden;
}

.product-card:hover {
transform: translateY(-10px) rotate(-1deg);
box-shadow: 0 0 40px rgba(255,43,214,0.4);
}

.product-image {
height: 260px;
border-radius: 20px;
margin-bottom: 20px;
}

.neon-green {
background: radial-gradient(circle,#39ff14,#000);
}

.neon-pink {
background: radial-gradient(circle,#ff2bd6,#000);
}

.neon-blue {
background: radial-gradient(circle,#00eaff,#000);
}

.product-card h2 {
font-size: 2rem;
margin-bottom: 10px;
}

.product-card p {
opacity: 0.7;
line-height: 1.6;
}

.mystery-box{
margin-top: 20px;
padding: 10px;
border: 1px dashed #39ff14;
font-size: 0.8rem;
color: #39ff14;
}

.selector {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}

.selector button {
background: transparent;
color: white;
border: 1px solid #444;
padding: 8px 16px;
border-radius: 100px;
cursor: pointer;
transition: 0.3s;
}

.selector button:hover {
background: #39ff14;
color: black;
}

.price-row {
display: flex;
justify-content: space-between;
margin-top: 20px;
font-size: 0.9rem;
}

.buy-btn {
display: block;
margin-top: 20px;
text-align: center;
padding: 15px;
text-decoration: none;
color: white;
border: 1px solid white;
border-radius: 100px;
transition: 0.3s;
}

.buy-btn:hover {
background: white;
color: black;
}

.philosophy {
padding: 140px 20px;
text-align: center;
}

.philosophy h2 {
font-size: clamp(2rem,6vw,5rem);
margin-bottom: 20px;
}

.philosophy p {
opacity: 0.7;
font-size: 1.2rem;
}