:root{

--bg:#0a0a0b;
--bg-soft:#111113;
--bg-card:#131315;
--line:#232326;
--line-soft:#2d2d31;

--white:#f5f5f6;
--gray-100:#d4d4d8;
--gray-300:#a1a1a8;
--gray-500:#6f6f76;
--gray-700:#3f3f43;

--font-display:'Barlow Condensed', Arial, sans-serif;
--font-body:'Inter', Arial, sans-serif;
--font-mono:'JetBrains Mono', monospace;

}


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:var(--font-body);

}


html{

scroll-behavior:smooth;

}


body{

background:var(--bg);
color:var(--white);
overflow-x:hidden;

}


::selection{

background:var(--white);
color:var(--bg);

}


a{

text-decoration:none;
color:inherit;

}


/* DECORATIVE STREAKS */

.streaks{

position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:1;

}


.streak{

position:absolute;
width:640px;
height:640px;
opacity:.10;

background:repeating-linear-gradient(
115deg,
var(--white) 0 5px,
transparent 5px 30px
);

}


.streak-tl{

top:-320px;
left:-320px;

-webkit-mask-image:radial-gradient(circle at top left, black 0%, transparent 62%);
mask-image:radial-gradient(circle at top left, black 0%, transparent 62%);

}


.streak-br{

bottom:-320px;
right:-320px;

-webkit-mask-image:radial-gradient(circle at bottom right, black 0%, transparent 62%);
mask-image:radial-gradient(circle at bottom right, black 0%, transparent 62%);

}


/* CORNER BRACKETS */

.bracket{

position:relative;

}


.corner{

position:absolute;
width:16px;
height:16px;
pointer-events:none;

}


.corner.tl{

top:-1px;
left:-1px;
border-top:2px solid var(--gray-100);
border-left:2px solid var(--gray-100);

}


.corner.tr{

top:-1px;
right:-1px;
border-top:2px solid var(--gray-100);
border-right:2px solid var(--gray-100);

}


.corner.bl{

bottom:-1px;
left:-1px;
border-bottom:2px solid var(--gray-100);
border-left:2px solid var(--gray-100);

}


.corner.br{

bottom:-1px;
right:-1px;
border-bottom:2px solid var(--gray-100);
border-right:2px solid var(--gray-100);

}


/* NAVBAR */

header{

height:84px;
display:flex;
align-items:center;
justify-content:space-between;
position:fixed;
top:0;
left:0;
width:100%;
z-index:20;
padding:0 60px;

background:rgba(10,10,11,.7);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);

}


.logo{

display:flex;
align-items:center;
color:var(--white);

}


.logo-img{

height:34px;
width:auto;
display:block;
object-fit:contain;

}


.logo-img.small{

height:26px;
margin-bottom:10px;

}


nav{

display:flex;
gap:36px;
position:absolute;
left:50%;
transform:translateX(-50%);

}


nav a{

color:var(--gray-300);
font-size:14px;
font-family:var(--font-mono);
letter-spacing:.5px;
text-transform:uppercase;
transition:.25s;

}


nav a:hover{

color:var(--white);

}


.header-actions{

display:flex;
align-items:center;
gap:14px;

}


#menu-toggle{

display:none;
flex-direction:column;
justify-content:center;
gap:5px;

width:36px;
height:36px;

background:transparent;
border:1px solid var(--line-soft);
cursor:pointer;

clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

}


#menu-toggle span{

display:block;
width:16px;
height:1.5px;
background:var(--gray-100);
margin:0 auto;
transition:.25s;

}


#menu-toggle.open span:nth-child(1){

transform:translateY(6.5px) rotate(45deg);

}


#menu-toggle.open span:nth-child(2){

opacity:0;

}


#menu-toggle.open span:nth-child(3){

transform:translateY(-6.5px) rotate(-45deg);

}


.discord-btn{

display:flex;
align-items:center;
gap:8px;
color:var(--gray-100);
border:1px solid var(--line-soft);
padding:9px 16px;
font-family:var(--font-mono);
font-size:13px;
letter-spacing:.5px;
text-transform:uppercase;
transition:.25s;

clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);

}


.discord-btn:hover{

color:var(--bg);
background:var(--white);
border-color:var(--white);

}


#language{

background:transparent;
border:1px solid var(--line-soft);
color:var(--gray-100);
font-family:var(--font-mono);
font-size:13px;
letter-spacing:1px;
padding:9px 14px;
cursor:pointer;
transition:.25s;

clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

}


#language:hover{

border-color:var(--white);
color:var(--white);

}


/* HERO */

.hero{

min-height:100vh;

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

text-align:center;
position:relative;
z-index:2;

padding-top:84px;

}


.hero-content{

max-width:760px;
padding:0 24px;

}


.tag{

color:var(--gray-300);
letter-spacing:4px;
font-size:12px;
font-family:var(--font-mono);

}


h1{

font-family:var(--font-display);
font-weight:800;
font-size:96px;
line-height:.95;
letter-spacing:1px;
text-transform:uppercase;
margin:22px 0 24px;

}


h1 span{

display:block;

background:linear-gradient(
90deg,
var(--white),
var(--gray-500)
);

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

}


.hero-desc{

color:var(--gray-300);
font-size:17px;
line-height:1.7;
max-width:520px;
margin:0 auto;

}


.buttons{

margin-top:44px;

display:flex;
align-items:center;
justify-content:center;
gap:16px;
flex-wrap:wrap;

}


.primary{

display:inline-flex;
align-items:center;
gap:10px;

background:var(--white);
color:var(--bg);

border:none;

padding:15px 34px;

font-family:var(--font-mono);
font-weight:700;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;

cursor:pointer;
transition:.25s;

clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);

}


.primary:hover{

background:var(--gray-100);
transform:translateY(-2px);

}


.primary.large{

padding:18px 40px;
font-size:14px;

}


.secondary{

display:inline-flex;
align-items:center;
gap:10px;

background:transparent;
color:var(--gray-100);

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

padding:15px 30px;

font-family:var(--font-mono);
font-weight:600;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;

cursor:pointer;
transition:.25s;

clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);

}


.secondary:hover{

border-color:var(--white);
color:var(--white);

}


.scroll-cue{

margin-top:70px;
width:1px;
height:50px;
background:var(--line-soft);
position:relative;
overflow:hidden;

}


.scroll-cue span{

position:absolute;
top:-50px;
left:0;
width:100%;
height:50%;
background:var(--white);
animation:scrollcue 2.2s ease-in-out infinite;

}


@keyframes scrollcue{

0%{top:-50%;}
100%{top:100%;}

}


/* SECTIONS */

section{

padding:130px 15%;
position:relative;
z-index:2;

}


.section-head{

margin-bottom:56px;

}


.eyebrow{

display:block;
font-family:var(--font-mono);
font-size:13px;
letter-spacing:2px;
color:var(--gray-500);
margin-bottom:14px;

}


section h2{

font-family:var(--font-display);
font-weight:700;
font-size:44px;
letter-spacing:.5px;
text-transform:uppercase;

}


section p{

color:var(--gray-300);
font-size:17px;
line-height:1.8;

}


/* ABOUT */

.about-grid{

display:grid;
grid-template-columns:1.3fr 1fr;
gap:70px;
align-items:start;

}


.about-text p{

margin-bottom:20px;

}


.about-text p:last-child{

margin-bottom:0;

}


.about-panel{

border:1px solid var(--line);
background:var(--bg-card);
padding:34px;

}


.stat-list{

list-style:none;
display:flex;
flex-direction:column;
gap:22px;

}


.stat-list li{

display:flex;
justify-content:space-between;
align-items:baseline;
border-bottom:1px solid var(--line);
padding-bottom:18px;

}


.stat-list li:last-child{

border-bottom:none;
padding-bottom:0;

}


.stat-label{

font-family:var(--font-mono);
font-size:12px;
letter-spacing:1.5px;
color:var(--gray-500);

}


.stat-value{

font-family:var(--font-display);
font-size:19px;
font-weight:600;
letter-spacing:.3px;
text-align:right;

}


/* CARDS */

.cards{

display:grid;
grid-template-columns:repeat(3, 1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);

}


.card{

background:var(--bg-card);
padding:38px 34px 42px;
transition:.3s;

}


.card:hover{

background:var(--bg-soft);

}


.card-top{

display:flex;
justify-content:space-between;
align-items:center;
padding-bottom:22px;
margin-bottom:26px;
border-bottom:1px solid var(--line);

}


.card-index{

font-family:var(--font-mono);
font-size:13px;
color:var(--gray-500);

}


.card-kicker{

font-family:var(--font-mono);
font-size:11px;
letter-spacing:1.5px;
color:var(--gray-500);

}


.card-icon{

color:var(--white);
margin-bottom:22px;

}


.card h3{

font-family:var(--font-display);
font-weight:700;
font-size:26px;
text-transform:uppercase;
letter-spacing:.5px;
margin-bottom:12px;

}


.card p{

font-size:15px;
line-height:1.7;

}


/* STORE */

.store-panel{

border:1px solid var(--line);
background:var(--bg-card);
padding:50px 40px;

display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
flex-wrap:wrap;

}


.badge{

font-family:var(--font-mono);
font-size:12px;
letter-spacing:1.5px;
color:var(--gray-300);
border:1px solid var(--line-soft);
padding:9px 16px;

clip-path:polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);

}


/* COMMUNITY */

.community-panel{

border:1px solid var(--line);
background:var(--bg-card);
padding:60px;

display:flex;
align-items:center;
justify-content:space-between;
gap:40px;
flex-wrap:wrap;

}


.community-text h2{

margin:10px 0 14px;

}


.community-text p{

max-width:440px;

}


/* FOOTER */

footer{

border-top:1px solid var(--line);
padding:60px 15% 30px;
position:relative;
z-index:2;

}


.footer-inner{

display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:30px;
margin-bottom:40px;

}


.footer-brand p{

color:var(--gray-500);
font-size:14px;
margin-top:10px;

}


.footer-links{

display:flex;
gap:28px;
flex-wrap:wrap;

}


.footer-links a{

color:var(--gray-300);
font-family:var(--font-mono);
font-size:13px;
letter-spacing:.5px;
text-transform:uppercase;
transition:.25s;

}


.footer-links a:hover{

color:var(--white);

}


.footer-bottom{

text-align:center;
color:var(--gray-700);
font-size:13px;
font-family:var(--font-mono);

}


/* REVEAL */

.reveal{

opacity:0;
transform:translateY(24px);
transition:opacity .7s ease, transform .7s ease;

}


.reveal.visible{

opacity:1;
transform:translateY(0);

}


/* RESPONSIVE */

@media (max-width:1080px){

#menu-toggle{

display:flex;

}

nav{

position:fixed;
top:84px;
left:0;
width:100%;

flex-direction:column;
align-items:flex-start;
gap:0;

background:rgba(10,10,11,.97);
backdrop-filter:blur(14px);
border-bottom:1px solid var(--line);

max-height:0;
overflow:hidden;
transition:max-height .3s ease;

}

nav.open{

max-height:340px;

}

nav a{

width:100%;
padding:18px 24px;
border-bottom:1px solid var(--line);
font-size:15px;

}

header{

padding:0 24px;

}

}


@media (max-width:900px){

h1{

font-size:64px;

}

section{

padding:90px 8%;

}

.about-grid{

grid-template-columns:1fr;

}

.cards{

grid-template-columns:1fr;

}

.community-panel{

flex-direction:column;
align-items:flex-start;
padding:40px;

}

.store-panel{

flex-direction:column;
align-items:flex-start;

}

}


@media (max-width:520px){

h1{

font-size:46px;

}

.hero-desc{

font-size:15px;

}

.buttons{

flex-direction:column;
width:100%;

}

.primary, .secondary{

width:100%;
justify-content:center;

}

}


@media (prefers-reduced-motion: reduce){

*{

animation:none !important;
transition:none !important;

}

}