/* ===========================
   RESET
=========================== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    color:white;
    background:#000;
    overflow-x:hidden;
    min-height:100vh;

}

/* ===========================
BACKGROUND
=========================== */

.background{

    position:fixed;
    inset:0;

    background:url("assets/background.png") center center/cover no-repeat;

    transform:scale(1.08);

    animation:zoomBG 25s linear infinite alternate;

    z-index:-3;

}

.overlay{

    position:fixed;
    inset:0;

    background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.85));

    backdrop-filter:blur(2px);

    z-index:-2;

}

@keyframes zoomBG{

from{

transform:scale(1.08);

}

to{

transform:scale(1.18);

}

}

/* ===========================
FLOATING MONEY
=========================== */

.money span{

position:fixed;

font-size:38px;

opacity:.18;

animation:floatMoney linear infinite;

pointer-events:none;

}

.money span:nth-child(1){

left:10%;
animation-duration:14s;
animation-delay:0s;

}

.money span:nth-child(2){

left:28%;
animation-duration:20s;
animation-delay:2s;

}

.money span:nth-child(3){

left:50%;
animation-duration:16s;
animation-delay:1s;

}

.money span:nth-child(4){

left:72%;
animation-duration:19s;
animation-delay:5s;

}

.money span:nth-child(5){

left:90%;
animation-duration:15s;
animation-delay:3s;

}

@keyframes floatMoney{

0%{

top:110%;
transform:rotate(0deg);

}

100%{

top:-20%;
transform:rotate(360deg);

}

}

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

.hero{

padding-top:90px;

text-align:center;

padding-left:20px;
padding-right:20px;

}

.small-title{

color:#d7b96d;

font-weight:600;

letter-spacing:5px;

text-transform:uppercase;

margin-bottom:10px;

}

.hero h1{

font-family:"Cinzel",serif;

font-size:72px;

line-height:1;

font-weight:800;

background:linear-gradient(#ffffff,#bdbdbd);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

text-shadow:

0 0 35px rgba(255,255,255,.25);

}

.hero h2{

font-size:28px;

margin-top:12px;

letter-spacing:8px;

font-weight:500;

}

.tagline{

margin-top:20px;

opacity:.85;

letter-spacing:3px;

font-size:14px;

}

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

.logo{

margin-top:40px;

display:flex;

justify-content:center;

}

.logo img{

width:170px;

height:170px;

border-radius:50%;

border:4px solid rgba(255,255,255,.25);

box-shadow:

0 0 35px rgba(255,255,255,.18),
0 0 80px rgba(255,180,0,.18);

animation:pulse 4s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.05);

box-shadow:

0 0 45px rgba(255,255,255,.35),
0 0 90px rgba(255,180,0,.30);

}

}

/* ===========================
LINKS
=========================== */

.links{

max-width:760px;

margin:60px auto;

padding:0 20px;

display:flex;

flex-direction:column;

gap:22px;

}

.card{

display:flex;

align-items:center;

justify-content:space-between;

padding:24px;

border-radius:22px;

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

backdrop-filter:blur(18px);

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

text-decoration:none;

color:white;

transition:.35s;

}

.card:hover{

transform:translateY(-6px);

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

}

.icon{

font-size:36px;

margin-right:15px;

}

.text{

flex:1;

}

.text h3{

font-size:22px;

margin-bottom:5px;

}

.text p{

opacity:.7;

font-size:14px;

}

.arrow{

font-size:32px;

transition:.35s;

}

.card:hover .arrow{

transform:translateX(10px);

}

.funding:hover{

border-color:#2f80ff;

box-shadow:0 0 35px rgba(47,128,255,.35);

}

.vt:hover{

border-color:#ff8c00;

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

}

.discord:hover{

border-color:#7b5cff;

box-shadow:0 0 35px rgba(123,92,255,.35);

}

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

footer{

padding:60px 20px;

text-align:center;

opacity:.85;

}

footer div{

margin:10px;

}

footer p{

margin-top:25px;

font-style:italic;

}

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

@media(max-width:768px){

.hero h1{

font-size:48px;

}

.hero h2{

font-size:22px;

letter-spacing:4px;

}

.logo img{

width:130px;
height:130px;

}

.card{

padding:18px;

}

}