body{

font-family:Arial, sans-serif;
background:#0b0e13;
color:white;
margin:0;

}

/* GRID BACKGROUND */

body::before{

content:"";

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background-image:

linear-gradient(rgba(180,255,0,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(180,255,0,0.06) 1px, transparent 1px);

background-size:60px 60px;

pointer-events:none;

}

/* ======================
   NAVIGATION
====================== */

.site-header{

background:#0b0e13;
border-bottom:1px solid rgba(255,255,255,0.1);

position:relative;
z-index:1500;

}

.nav-container{

display:flex;
justify-content:space-between;
align-items:center;

padding:20px 40px;

}



.main-nav a{

margin-left:20px;
text-decoration:none;
color:white;
font-size:16px;
padding:6px 0;

}

/* LOGO LINK */

.logo a{

color:white;

text-decoration:none;

font-weight:bold;

font-size:20px;

}

/* ======================
   HAMBURGER
====================== */

.hamburger{

display:none;
flex-direction:column;
cursor:pointer;

padding:10px;
z-index:3000;

}

.hamburger span{

width:26px;
height:3px;
background:white;
margin:4px 0;

}

/* ======================
   HERO
====================== */

.hero{

position:relative;
height:500px;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

#blockchain-canvas{

position:absolute;
top:0;
left:0;

width:100%;
height:100%;

pointer-events:none;

}

.hero-content{

position:relative;
z-index:2;
text-align:center;
max-width:700px;

}

.quantum-title{

font-size:60px;

background:linear-gradient(90deg,#ffe600,#9cff00,#00ffd5);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-button{

display:inline-block;
margin-top:30px;
padding:16px 36px;

background:linear-gradient(90deg,#ffe600,#9cff00);

color:black;
font-weight:bold;

border-radius:40px;
text-decoration:none;

box-shadow:0 0 20px rgba(200,255,0,0.6);

}

/* ======================
   FEATURED SLIDER
====================== */

.featured-slider{

padding:80px 40px;
text-align:center;

}

.slider{

display:flex;
gap:30px;
overflow-x:auto;

}

.slider-card{

min-width:260px;

background:rgba(20,20,25,0.85);

padding:30px;

border-radius:16px;

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

backdrop-filter:blur(12px);

transition:0.3s;

}

.slider-card:hover{

transform:scale(1.05);

box-shadow:0 0 25px rgba(200,255,0,0.4);

}

.slider-card h3{

color:#cfff2e;

}

.slider-price{

color:#ffe600;
font-size:20px;

}

/* ======================
   SEARCH FILTER
====================== */

.market-controls{

display:flex;
gap:20px;
justify-content:center;

margin:40px;
flex-wrap:wrap;

}

.market-controls input,
.market-controls select{

padding:10px 14px;

border-radius:8px;
border:none;

background:#1c1f26;
color:white;

}

/* ======================
   DOMAIN GRID
====================== */

.blockchain-list{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:30px;

padding:60px;

}

/* ======================
   DOMAIN CARD
====================== */

.domain-card{

background:rgba(20,20,25,0.85);

border-radius:18px;

padding:30px;

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

backdrop-filter:blur(14px);

box-shadow:0 0 20px rgba(0,0,0,0.6);

transition:0.3s;

}

.domain-card:hover{

transform:translateY(-6px);

box-shadow:
0 0 25px rgba(200,255,0,0.3);

}

.card-header{

display:flex;
justify-content:space-between;
align-items:center;

}

.card-footer{

display:flex;
justify-content:space-between;
align-items:center;

margin-top:20px;

}

/* ======================
   RARITY
====================== */

.rarity{

padding:4px 10px;
border-radius:10px;
font-size:12px;
font-weight:bold;

}

.legendary{background:#ffb300;color:black;}
.rare{background:#9cff00;color:black;}
.premium{background:#00ffd5;color:black;}

/* ======================
   SCORE
====================== */

.score-bar{

height:6px;
background:#222;
border-radius:5px;
margin:12px 0;

}

.score-fill{

height:100%;
background:linear-gradient(90deg,#ffe600,#9cff00);
border-radius:5px;

}

.price{

color:#ffe600;
font-size:22px;

}

.buy-btn{

padding:8px 18px;
background:#cfff2e;
color:black;
border-radius:20px;
text-decoration:none;
font-weight:bold;

}

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

.site-footer{
margin-top:80px;
padding:40px;
text-align:center;
background:#070b14;
border-top:1px solid rgba(255,255,255,0.08);
color:#9ca3af;
}

.footer-links{
margin-bottom:10px;
}

.footer-links a{
margin:0 15px;
text-decoration:none;
font-weight:500;
color:#9ca3af;
}

.footer-links a:hover{
color:#5ddcff;
}

.copyright{
font-size:14px;
color:#6b7280;
}


/* ======================
   MOBILE NAVIGATION
====================== */

@media(max-width:768px){

.nav-container{

position:relative;

}

/* MOBILE MENU PANEL */

.main-nav{

display:none;
flex-direction:column;
align-items:center;

position:absolute;

top:70px;
left:50%;
transform:translateX(-50%);

background:rgba(20,20,25,0.35);

padding:28px 40px;

border-radius:14px;

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

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

z-index:2000;

min-width:220px;

}




/* MOBILE LINKS */

.main-nav a{

margin:12px 0;

font-size:20px;

padding:10px 0;

display:block;

color:white;

text-decoration:none;

width:100%;

text-align:center;

}


/* OPEN MENU */

.main-nav.active{

display:flex;

}

/* SHOW HAMBURGER */

.hamburger{

display:flex;

}

}

/* ======================
   MODAL
====================== */

.modal{

display:none;

position:fixed;
top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.8);

justify-content:center;
align-items:center;

z-index:9999;

}

/* MODAL BOX */

.modal-content{

background:rgba(20,20,25,0.95);

padding:40px;

border-radius:16px;

width:90%;
max-width:420px;

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

backdrop-filter:blur(12px);

position:relative;

}

.modal-content h2{

margin-top:0;

}

#domain-name{

color:#cfff2e;
margin-bottom:20px;

}

/* CLOSE BUTTON */

.close-modal{

position:absolute;
right:20px;
top:15px;

font-size:28px;
cursor:pointer;

}

/* FORM */

.modal-content input,
.modal-content textarea{

width:100%;

padding:10px;
margin-bottom:12px;

border:none;

border-radius:6px;

background:#1c1f26;
color:white;

}

.modal-content textarea{

height:80px;

}

.modal-content button{

width:100%;

padding:12px;

border:none;

border-radius:8px;

background:linear-gradient(90deg,#ffe600,#9cff00);

font-weight:bold;

cursor:pointer;

}