/* ===========================================================
   RSCollectiblesDE
   Premium Neon Theme
   =========================================================== */

:root{

--bg:#06070d;
--bg2:#10131c;
--card:rgba(255,255,255,.05);
--border:rgba(255,255,255,.08);

--white:#ffffff;
--text:#c9d2e3;

--purple:#8f4bff;
--purple2:#b26dff;

--shadow:0 0 40px rgba(143,75,255,.35);

--radius:22px;

--transition:.35s ease;

}

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

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;
font-size:15px;
background:var(--bg);
color:white;
overflow-x:hidden;
line-height:1.5;
zoom:0.85;
}

/* ========================= */

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at 20% 20%,
rgba(143,75,255,.15),
transparent 35%),

radial-gradient(circle at 80% 10%,
rgba(143,75,255,.08),
transparent 30%),

radial-gradient(circle at 50% 90%,
rgba(0,150,255,.08),
transparent 35%);

z-index:-2;

}

.background{

position:fixed;

inset:0;

overflow:hidden;

pointer-events:none;

z-index:-1;

}

.background span{

position:absolute;

width:500px;

height:500px;

border-radius:50%;

filter:blur(140px);

background:#8f4bff22;

animation:float 18s linear infinite;

}

.background span:nth-child(1){

left:-150px;
top:-150px;

}

.background span:nth-child(2){

right:-120px;
top:20%;

animation-duration:22s;

}

.background span:nth-child(3){

bottom:-200px;
left:30%;

animation-duration:30s;

}

.background span:nth-child(4){

right:15%;
bottom:-150px;

animation-duration:25s;

}

@keyframes float{

0%{

transform:translateY(0) rotate(0deg);

}

50%{

transform:translateY(-60px) rotate(180deg);

}

100%{

transform:translateY(0) rotate(360deg);

}

}

/* ========================= */

#progressBar{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:

linear-gradient(90deg,
var(--purple),
#ffffff);

box-shadow:0 0 15px var(--purple);

z-index:9999;

}

/* ========================= */

.cursorGlow{

position:fixed;

width:220px;

height:220px;

border-radius:50%;

background:rgba(143,75,255,.18);

filter:blur(80px);

pointer-events:none;

transform:translate(-50%,-50%);

z-index:1;

}

/* ========================= */

header{

position:fixed;

top:20px;

left:50%;

transform:translate(-50%, 0);

width:min(1250px,94%);

display:flex;

align-items:center;

justify-content:space-between;

padding:15px 30px;

background:rgba(15,17,25,.65);

backdrop-filter:blur(18px);

border:1px solid var(--border);

border-radius:18px;

z-index:1000;

transition:transform .35s ease, background .35s ease, opacity .35s ease;

}

header.headerHidden{

transform:translate(-50%, -140%);
	opacity:0;

pointer-events:none;

}

.logo img{

height:70px;

filter:

drop-shadow(0 0 20px rgba(143,75,255,.4));

transition:.4s;

}

.logo img:hover{

transform:scale(1.06);

}

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

position:relative;

}

nav a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0;

height:2px;

background:var(--purple);

transition:.3s;

}

nav a:hover{

color:var(--purple2);

}

nav a:hover::after{

width:100%;

}

/* ========================= */

.whatnotButton{

padding:14px 28px;

border-radius:50px;

background:

linear-gradient(135deg,
var(--purple),
#6b28ff);

text-decoration:none;

color:white;

font-weight:700;

box-shadow:

0 0 30px rgba(143,75,255,.45);

transition:.3s;

}

.whatnotButton:hover{

transform:translateY(-4px);

box-shadow:

0 0 50px rgba(143,75,255,.7);

}

/* ========================= */

.hero{

min-height:100vh;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:52px;

padding:135px 8% 90px;

}

.heroLeft h1{

font-family:'Orbitron',sans-serif;

font-size:58px;

line-height:1.08;

margin:16px 0;

font-weight:900;

}

.heroLeft span{

color:var(--purple2);

text-shadow:0 0 20px rgba(143,75,255,.6);

}

.heroLeft p{

max-width:620px;

font-size:18px;

color:var(--text);

margin-bottom:32px;

}

.liveBadge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:rgba(143,75,255,.12);

border:1px solid rgba(143,75,255,.35);

font-weight:700;

color:#fff;

}

.heroButtons{

display:flex;

gap:20px;

flex-wrap:wrap;

}

.primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:50px;

background:linear-gradient(135deg,var(--purple),#6d2cff);

color:white;

text-decoration:none;

font-weight:700;

box-shadow:var(--shadow);

transition:.35s;

}

.primary:hover{

transform:translateY(-5px);

}

.secondary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 34px;

border-radius:50px;

border:1px solid rgba(255,255,255,.15);

background:rgba(255,255,255,.04);

backdrop-filter:blur(12px);

color:white;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.secondary:hover{

border-color:var(--purple);

}

/* ===========================================================
   SECTION TITLES
=========================================================== */

section{

padding:120px 8%;

position:relative;

}

.sectionTitle{

text-align:center;

margin-bottom:70px;

}

.sectionTitle span{

color:var(--purple2);

font-weight:700;

letter-spacing:2px;

text-transform:uppercase;

font-size:.9rem;

}

.sectionTitle h2{

margin-top:15px;

font-size:42px;

font-family:'Orbitron',sans-serif;

}

/* ===========================================================
   STATS
=========================================================== */

.stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

margin-top:-40px;

}

.stats .card{

background:var(--card);

border:1px solid var(--border);

backdrop-filter:blur(18px);

border-radius:var(--radius);

padding:34px;

text-align:center;

transition:.4s;

overflow:hidden;

position:relative;

}

.stats .card::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(120deg,
transparent,
rgba(255,255,255,.05),
transparent);

transform:translateX(-120%);

transition:1s;

}

.stats .card:hover::before{

transform:translateX(120%);

}

.stats .card:hover{

transform:translateY(-10px);

border-color:var(--purple);

box-shadow:0 0 40px rgba(143,75,255,.25);

}

.counter{

font-size:48px;

font-family:'Orbitron',sans-serif;

color:var(--purple2);

margin-bottom:8px;

}

/* ===========================================================
   ABOUT
=========================================================== */

#about{

text-align:center;

max-width:1100px;

margin:auto;

}

#about h2{

font-size:44px;

margin-bottom:24px;

font-family:'Orbitron',sans-serif;

}

#about span{

color:var(--purple2);

}

#about p{

font-size:18px;

color:var(--text);

line-height:1.8;

}

/* ===========================================================
   BREAK GRID
=========================================================== */

.breakGrid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.breakCard{

background:var(--card);

border:1px solid rgba(255,255,255,.08);

border-radius:28px;

padding:34px;

position:relative;

overflow:hidden;

cursor:pointer;

transition:.4s;

transform-style:preserve-3d;

}

.breakCard::before{

content:"";

position:absolute;

width:300px;

height:300px;

background:radial-gradient(circle,
rgba(143,75,255,.35),
transparent);

top:-180px;

right:-180px;

transition:.4s;

}

.breakCard:hover{

transform:

rotateX(8deg)

rotateY(-8deg)

translateY(-10px);

border-color:var(--purple);

box-shadow:0 0 60px rgba(143,75,255,.25);

}

.breakCard:hover::before{

transform:scale(1.3);

}

.breakCard h3{

font-size:28px;

margin-bottom:15px;

font-family:'Orbitron',sans-serif;

}

.breakCard p{

color:var(--text);

}

/* ===========================================================
   HITS
=========================================================== */

.hitsGrid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.hitCard{

position:relative;

overflow:hidden;

padding:16px;

display:flex;
	flex-direction:column;
	gap:14px;

border-radius:24px;

background:

linear-gradient(180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03));

border:1px solid rgba(255,255,255,.08);

transition:.4s;

min-height:100%;

}

.hitImage{

width:100%;
	aspect-ratio:5 / 6;
	border-radius:10px;
	overflow:hidden;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.12);
	box-shadow:0 5px 12px rgba(0,0,0,.22);
}

.hitImage img{

width:100%;
	height:100%;
	object-fit:cover;
	display:block;
	transition:.45s ease;
}

.hitCard:hover .hitImage img{

transform:scale(1.04);
}

.hitCard:hover{

transform:translateY(-10px) scale(1.01);

box-shadow:0 0 55px rgba(143,75,255,.38);

}

.shine{

position:absolute;
	top:-120%;

left:-60%;

width:110px;

height:320%;

background:
linear-gradient(90deg,
transparent,
rgba(255,255,255,.42),
transparent);

transform:rotate(24deg);
	filter:blur(1px);

transition:1.15s ease;

}

.hitCard:hover .shine{

left:140%;

}

.rarity{
	display:inline-block;
	align-self:flex-start;

padding:8px 18px;

border-radius:999px;

font-size:.8rem;

font-weight:700;

margin-bottom:2px;

}

.hitChangeLabel{

margin-top:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:12px 18px;
	border-radius:999px;
	background:rgba(143,75,255,.14);
	border:1px solid rgba(143,75,255,.35);
	font-size:.9rem;
	font-weight:700;
	cursor:pointer;
	transition:.3s;
}

.hitChangeLabel:hover{

background:rgba(143,75,255,.22);
}

.hitChangeLabel input{
	display:none;
}

.gold{

background:#FFD70022;

color:#FFD700;

}

.purple{

background:#8f4bff22;

color:#bb91ff;

}

.blue{

background:#00bfff22;

color:#8ddcff;

}

.silver{

background:#d9e2f322;

color:#dfe7f4;

}

.green{

background:#26d07c22;

color:#74f0b2;

}

.red{

background:#ff5a6b22;

color:#ff8c98;

}

.orange{

background:#ff9f4022;

color:#ffc77c;

}

.hitCard[data-rarity="gold"]{

border-color:rgba(255,215,0,.55);
	box-shadow:0 0 0 1px rgba(255,215,0,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="purple"]{

border-color:rgba(167,100,255,.55);
	box-shadow:0 0 0 1px rgba(167,100,255,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="blue"]{

border-color:rgba(110,210,255,.55);
	box-shadow:0 0 0 1px rgba(110,210,255,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="silver"]{

border-color:rgba(212,220,232,.55);
	box-shadow:0 0 0 1px rgba(212,220,232,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="green"]{

border-color:rgba(50,227,154,.55);
	box-shadow:0 0 0 1px rgba(50,227,154,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="red"]{

border-color:rgba(255,92,123,.55);
	box-shadow:0 0 0 1px rgba(255,92,123,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="orange"]{

border-color:rgba(255,165,66,.55);
	box-shadow:0 0 0 1px rgba(255,165,66,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="gold"]{

border-color:rgba(255,215,0,.55);
	box-shadow:0 0 0 1px rgba(255,215,0,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="purple"]{

border-color:rgba(167,100,255,.55);
	box-shadow:0 0 0 1px rgba(167,100,255,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard[data-rarity="blue"]{

border-color:rgba(110,210,255,.55);
	box-shadow:0 0 0 1px rgba(110,210,255,.22), 0 16px 45px rgba(0,0,0,.34);

}

.hitCard h3{

font-size:16px;
	margin:0;
	line-height:1.2;
	font-family:'Orbitron',sans-serif;

}

.hitDescription{
	display:block;
	width:100%;
	padding:10px 12px;
	color:var(--text);
	line-height:1.55;
	font-size:13px;
	margin-top:0;
	border-radius:12px;
	background:
		linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
	border:1px solid rgba(255,255,255,.10);
	backdrop-filter:blur(6px);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

/* ===========================================================
   FEATURES
=========================================================== */

.featureGrid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:35px;

}

.feature{

padding:32px;

border-radius:24px;

background:var(--card);

border:1px solid var(--border);

transition:.35s;

}

.feature:hover{

transform:translateY(-10px);

border-color:var(--purple);

box-shadow:0 0 40px rgba(143,75,255,.25);

}

.icon{

font-size:42px;

margin-bottom:18px;

}

.feature h3{

font-size:22px;

margin-bottom:12px;

}

.feature p{

color:var(--text);

line-height:1.8;

}

/* ===========================================================
   LIVE SECTION
=========================================================== */

.liveSection{

position:relative;

overflow:hidden;

text-align:center;

padding:110px 8%;

}

.liveGlow{

position:absolute;

width:700px;

height:700px;

left:50%;

top:50%;

transform:translate(-50%,-50%);

background:radial-gradient(circle,
rgba(143,75,255,.20),
transparent 70%);

filter:blur(60px);

animation:liveGlow 6s ease-in-out infinite;

pointer-events:none;

}

@keyframes liveGlow{

0%,100%{

transform:translate(-50%,-50%) scale(1);

}

50%{

transform:translate(-50%,-50%) scale(1.15);

}

}

.liveContent{

position:relative;

z-index:2;

max-width:900px;

margin:auto;

}

.liveContent h2{

font-family:'Orbitron',sans-serif;

font-size:46px;

margin:20px 0;

}

.liveContent p{

font-size:18px;

color:var(--text);

margin-bottom:32px;

}

.livePulse{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 24px;

border-radius:999px;

background:rgba(255,0,0,.12);

border:1px solid rgba(255,0,0,.35);

font-weight:700;

animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%,100%{

box-shadow:0 0 0 rgba(255,0,0,0);

}

50%{

box-shadow:0 0 30px rgba(255,0,0,.45);

}

}

/* ===========================================================
   FAQ
=========================================================== */

.faqContainer{

max-width:950px;

margin:auto;

display:flex;

flex-direction:column;

gap:22px;

}

.faqItem{

background:var(--card);

border:1px solid var(--border);

border-radius:20px;

overflow:hidden;

transition:.35s;

}

.faqItem:hover{

border-color:var(--purple);

box-shadow:0 0 30px rgba(143,75,255,.20);

}

.faqItem button{

width:100%;

padding:20px 24px;

background:none;

border:none;

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

text-align:left;

display:flex;

justify-content:space-between;

align-items:center;

}

.answer{

max-height:0;

overflow:hidden;

padding:0 30px;

color:var(--text);

transition:.45s;

line-height:1.8;

}

.faqItem.active .answer{

padding:0 30px 30px;

max-height:300px;

}

/* ===========================================================
   CONTACT
=========================================================== */

form{

max-width:850px;

margin:auto;

display:flex;

flex-direction:column;

gap:25px;

}

input,
textarea{

width:100%;

padding:20px;

background:rgba(255,255,255,.05);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

color:white;

font-size:16px;

transition:.3s;

font-family:inherit;

}

input:focus,
textarea:focus{

outline:none;

border-color:var(--purple);

box-shadow:0 0 25px rgba(143,75,255,.35);

}

textarea{

resize:vertical;

min-height:180px;

}

form button{

padding:20px;

border:none;

border-radius:18px;

cursor:pointer;

font-size:18px;

font-weight:700;

color:white;

background:linear-gradient(135deg,var(--purple),#6d2cff);

transition:.35s;

box-shadow:0 0 35px rgba(143,75,255,.35);

}

form button:hover{

transform:translateY(-5px);

box-shadow:0 0 55px rgba(143,75,255,.55);

}

/* ===========================================================
   FOOTER
=========================================================== */

footer{

margin-top:120px;

padding:70px 8%;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

background:rgba(255,255,255,.02);

}

.footerLogo img{

height:90px;

margin-bottom:15px;

filter:drop-shadow(0 0 25px rgba(143,75,255,.35));

}

.footerLogo h2{

font-family:'Orbitron',sans-serif;

margin-bottom:35px;

}

.footerLinks{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:30px;

margin-bottom:30px;

}

.footerLinks a{

color:var(--text);

text-decoration:none;

transition:.3s;

}

.footerLinks a:hover{

color:var(--purple2);

}

footer p{

color:#888;

}

/* ===========================================================
   SCROLL BUTTON
=========================================================== */

#scrollTop{

position:fixed;

right:30px;

bottom:30px;

width:60px;

height:60px;

border:none;

border-radius:50%;

cursor:pointer;

background:linear-gradient(135deg,var(--purple),#6d2cff);

color:white;

font-size:24px;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 0 30px rgba(143,75,255,.35);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

#scrollTop.show{

opacity:1;

visibility:visible;

}

#scrollTop:hover{

transform:translateY(-6px) scale(1.08);

box-shadow:0 0 50px rgba(143,75,255,.55);

}

/* ===========================================================
   SCROLL ANIMATIONEN
=========================================================== */

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s cubic-bezier(.2,.8,.2,1);

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

.fadeLeft{

opacity:0;

transform:translateX(-80px);

transition:1s;

}

.fadeLeft.active{

opacity:1;

transform:none;

}

.fadeRight{

opacity:0;

transform:translateX(80px);

transition:1s;

}

.fadeRight.active{

opacity:1;

transform:none;

}

/* ===========================================================
   GLASS HOVER
=========================================================== */

.breakCard,
.hitCard,
.feature,
.stats .card{

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

}

.breakCard:hover,
.hitCard:hover,
.feature:hover{

background:rgba(255,255,255,.08);

}

/* ===========================================================
   SELECTION
=========================================================== */

::selection{

background:var(--purple);

color:white;

}

/* ===========================================================
   SCROLLBAR
=========================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090b12;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--purple),#5d2bff);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:#b26dff;

}

/* ===========================================================
   RESPONSIVE
=========================================================== */

@media(max-width:1200px){

.hero{

grid-template-columns:1fr;

text-align:center;

gap:60px;

}

.heroLeft{

display:flex;

flex-direction:column;

align-items:center;

}

.heroRight img{

max-width:380px;

width:100%;

}

.breakGrid{

grid-template-columns:1fr 1fr;

}

.featureGrid{

grid-template-columns:1fr 1fr;

}

.stats{

grid-template-columns:1fr;

}

}

@media(max-width:900px){

header{

padding:15px;

flex-direction:column;

gap:18px;

}

nav{

flex-wrap:wrap;

justify-content:center;

gap:18px;

}

.hero{

padding-top:240px;

}

.heroLeft h1{

font-size:54px;

}

.sectionTitle h2{

font-size:38px;

}

.liveContent h2{

font-size:42px;

}

.breakGrid{

grid-template-columns:1fr;

}

.featureGrid{

grid-template-columns:1fr;

}

.footerLinks{

flex-direction:column;

gap:16px;

}

}

@media(max-width:650px){

.logo img{

height:55px;

}

.heroLeft h1{

font-size:42px;

}

.heroLeft p{

font-size:17px;

}

.primary,
.secondary{

width:100%;

}

.heroButtons{

width:100%;

flex-direction:column;

}

.liveContent h2{

font-size:34px;

}

.sectionTitle h2{

font-size:30px;

}

.counter{

font-size:42px;

}

#scrollTop{

width:50px;

height:50px;

right:20px;

bottom:20px;

}

}

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

.heroRight img{

width:100%;

max-width:500px;

animation:floatingLogo 6s ease-in-out infinite;

filter:

drop-shadow(0 0 40px rgba(143,75,255,.35));

}

@keyframes floatingLogo{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

/* ===========================================================
   BUTTON RIPPLE
=========================================================== */

.primary,
.secondary,
.whatnotButton{

position:relative;

overflow:hidden;

}

.primary::after,
.secondary::after,
.whatnotButton::after{

content:"";

position:absolute;

width:0;

height:0;

background:rgba(255,255,255,.18);

border-radius:50%;

left:50%;

top:50%;

transform:translate(-50%,-50%);

transition:.55s;

}

.primary:hover::after,
.secondary:hover::after,
.whatnotButton:hover::after{

width:320px;

height:320px;

}

.modal{

position:fixed;

inset:0;

background:rgba(0,0,0,.75);

display:none;

justify-content:center;

align-items:center;

z-index:99999;

backdrop-filter:blur(8px);

}

.modal.show{

display:flex;

}

.modalContent{

width:min(900px,90%);

max-height:85vh;

overflow:auto;

padding:40px;

border-radius:25px;

background:#10131c;

border:1px solid rgba(255,255,255,.1);

box-shadow:0 0 40px rgba(143,75,255,.35);

}

.modalContent h2{

margin-bottom:25px;

font-family:'Orbitron',sans-serif;

color:#b26dff;

}

.modalContent p{

margin-bottom:18px;

line-height:1.8;

color:#d6d6d6;

}

.closeModal{

float:right;

font-size:34px;

cursor:pointer;

transition:.3s;

}

.closeModal:hover{

color:#b26dff;

}

/* ===========================================================
   END
=========================================================== */