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

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

html{
    scroll-behavior:smooth;
    
}

body{
    font-family:'Inter',sans-serif;
    background:#ffffff;
    color:#111111;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

a{
    text-decoration:none;
    color:inherit;
}

button{
    border:none;
    background:none;
    font:inherit;
    cursor:pointer;
}

img{
    display:block;
    max-width:100%;
}

ul{
    list-style:none;
}


/* ===========================
   VARIABLES
=========================== */

:root{

    --bg:#ffffff;

    --surface:#fafafa;

    --surface-hover:#f4f4f4;

    --border:#e7e7e7;

    --text:#111111;

    --text-light:#666666;

    --primary:#000000;

    --radius:20px;

    --container:1240px;

    --transition:.3s cubic-bezier(.4,0,.2,1);

}


/* ===========================
   GLOBAL
=========================== */

body{
    background:var(--bg);
    color:var(--text);
}

.container{
    width:min(var(--container),calc(100% - 64px));
    margin:0 auto;
}

.section{

    padding:140px 0;

    scroll-margin-top:110px;

}

.section-header{
    margin-bottom:70px;
}

.section-header span{
    display:inline-block;
    margin-bottom:18px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.15em;
    color:#888;
    text-transform:uppercase;
}

.section-header h2{
    font-size:56px;
    line-height:1.1;
    font-weight:700;
    max-width:700px;
}


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

.background-grid{

    position:fixed;

    inset:0;

    z-index:-3;

    background-image:

        linear-gradient(#f4f4f4 1px,transparent 1px),

        linear-gradient(90deg,#f4f4f4 1px,transparent 1px);

    background-size:48px 48px;

    opacity:.45;

}

.background-grid::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to bottom,
        rgba(255,255,255,.15),
        rgba(255,255,255,.92));

}

.background-glow{

    position:fixed;

    width:650px;

    height:650px;

    border-radius:50%;

    filter:blur(120px);

    z-index:-2;

    opacity:.25;

}

.glow-1{

    top:-180px;

    right:-180px;

    background:#dadada;

}

.glow-2{

    bottom:-220px;

    left:-220px;

    background:#ececec;

}


/* ===========================
   NAVBAR
=========================== */

.navbar{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:100;

    backdrop-filter:blur(18px);

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

    border-bottom:1px solid rgba(0,0,0,.05);

}

.navbar-content{

    height:82px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:24px;

    font-weight:700;

    letter-spacing:-.03em;

}

.logo-text{

    font-family:"DM Serif Display", serif;

    font-size:24px;

    font-weight:400;

    letter-spacing:-0.03em;

}
.logo img{

    width:30px;

    height:30px;

    object-fit:contain;

    user-select:none;

}

.nav-links{

    display:flex;

    align-items:center;

    gap:42px;

}

.nav-links a{

    color:var(--text-light);

    font-size:15px;

    transition:var(--transition);

    position:relative;

}

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#111;

    transition:.3s;

}

.nav-links a:hover{

    color:#111;

}

.nav-links a:hover::after{

    width:100%;

}

.wallet-btn{

    padding:14px 26px;

    border-radius:999px;

    background:#F518B5;

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 10px 30px rgba(245,24,181,.18);

}

.wallet-btn:hover{

    transform:translateY(-2px);

    background:#E30FA7;

    box-shadow:0 16px 40px rgba(245,24,181,.28);

}


/* ===========================
   MOBILE MENU
=========================== */

.menu-toggle{

    display:none;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:5px;

    width:38px;

    height:38px;

}

.menu-toggle span{

    width:22px;

    height:2px;

    background:#111;

    border-radius:2px;

    transition:var(--transition);

}

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

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

}

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

    opacity:0;

}

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

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

}


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

.hero{

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    padding-top:82px;

}


.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 18px;

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

    border-radius:999px;

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

    font-size:14px;

    color:#666;

    margin-bottom:32px;

}

.hero h1{

    font-size:88px;

    line-height:.95;

    letter-spacing:-.05em;

    margin-bottom:28px;

    font-weight:800;

}

.hero p{

    max-width:700px;

    margin:0 auto;

    color:#666;

    font-size:22px;

    line-height:1.8;

}

.hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:55px;

}
.hero-content{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

.hero-left{

    text-align:left;

}

.hero-right{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-right img{

    width:100%;

    max-width:620px;

    user-select:none;

    pointer-events:none;

}
/* ===========================
   BUTTONS
=========================== */

.primary-btn,
.secondary-btn{

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

    height:58px;

    padding:0 34px;

    border-radius:999px;

    font-size:15px;
    font-weight:600;

    transition:var(--transition);

}

.primary-btn{

    color:#fff;

    background:#F518B5;

    box-shadow:
        0 10px 30px rgba(0,0,0,.08),
        0 1px 1px rgba(255,255,255,.2) inset;

}

.primary-btn:hover{

    background:#E30FA7;

    transform:translateY(-3px);

    box-shadow:
        0 22px 60px rgba(0,0,0,.16);

}

.secondary-btn{

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

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

    backdrop-filter:blur(12px);

}

.secondary-btn:hover{

    background:#fff;

    transform:translateY(-3px);

}


/* ===========================
   VOTE
=========================== */

.vote-card{

    padding:48px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

}

.vote-card-top{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:24px;

}

.vote-status{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:999px;

    background:rgba(10,143,78,.1);

    color:#0a8f4e;

    font-size:13px;

    font-weight:600;

}

.vote-ends{

    font-size:14px;

    color:#888;

}

.vote-description{

    font-size:17px;

    color:#666;

    line-height:1.8;

    max-width:720px;

    margin-bottom:36px;

}

.vote-results{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:24px;

}

.vote-result-label{

    display:flex;

    justify-content:space-between;

    font-size:15px;

    font-weight:600;

    margin-bottom:8px;

}

.vote-bar{

    height:10px;

    border-radius:999px;

    background:#f0f0f0;

    overflow:hidden;

}

.vote-bar-fill{

    height:100%;

    border-radius:999px;

}

.vote-bar-fill.for{

    background:#0a8f4e;

}

.vote-bar-fill.against{

    background:#d1274a;

}

.vote-preview-note{

    font-size:14px;

    color:#888;

    margin-bottom:28px;

}

.vote-buttons{

    display:flex;

    gap:16px;

}


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

.about-card{

    padding:60px;

    border-radius:30px;

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

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

    backdrop-filter:blur(18px);

    transition:var(--transition);

}

.about-card:hover{

    transform:translateY(-6px);

    box-shadow:0 40px 90px rgba(0,0,0,.05);

}

.about-card p{

    font-size:28px;

    line-height:1.8;

    color:#444;

    max-width:900px;

}


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

.footer{

    padding:70px 0;

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

}

.footer-content{

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:#888;

    font-size:15px;

}

.footer-links{

    display:flex;

    align-items:center;

    gap:22px;

}

.footer-links a{

    display:flex;

    color:#888;

    transition:var(--transition);

}

.footer-links a:hover{

    color:#111;

}



/* ===========================
   SCROLL ANIMATION
=========================== */

.section{

    opacity:0;

    transform:translateY(60px);

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.section.show{

    opacity:1;

    transform:none;

}


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

@media(max-width:1100px){

    .hero h1{

        font-size:64px;

    }

    .token-stats{

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

    }

}

@media(max-width:850px){

    .menu-toggle{

        display:flex;

    }

    .nav-links{

        position:absolute;

        top:82px;

        left:0;

        right:0;

        flex-direction:column;

        align-items:flex-start;

        gap:0;

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

        backdrop-filter:blur(18px);

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

        max-height:0;

        overflow:hidden;

        transition:max-height .35s ease;

    }

    .nav-links.open{

        max-height:300px;

    }

    .nav-links a{

        width:100%;

        padding:18px 32px;

    }

    .container{

        width:calc(100% - 36px);

    }

    .section{

        padding:90px 0;

    }

    .hero{

        text-align:left;

    }

    .hero h1{

        font-size:52px;

    }

    .hero p{

        font-size:18px;

        margin:0;

    }

    .hero-buttons{

        justify-content:flex-start;

        flex-direction:column;

    }

    .primary-btn,
    .secondary-btn{

        width:100%;

    }

    .section-header h2{

        font-size:40px;

    }

    .about-card{

        padding:34px;

    }

    .vote-card{

        padding:28px;

    }

    .vote-card-top{

        flex-wrap:wrap;

    }

    .vote-buttons{

        flex-direction:column;

    }

    .vote-buttons .primary-btn,
    .vote-buttons .secondary-btn{

        width:100%;

    }

    .about-card p{

        font-size:21px;

    }.hero-content{

    grid-template-columns:1fr;

    }

    .hero-right{

    margin-top:60px;

    }

    .hero-right img{

    width: 140%;

    max-width: 820px;

}
    

}

@media(max-width:560px){

    .hero h1{

        font-size:42px;

    }

    .wallet-btn{

        display:none;

    }

    .token-stats{

        grid-template-columns:1fr;

    }

}


.navbar.scrolled{

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

    backdrop-filter:blur(18px);

    box-shadow:0 8px 30px rgba(0,0,0,.04);

}
.token-stats{

    display:grid;

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

    gap:20px;

    margin-top:40px;

}

.stat{

    padding:26px 28px;

    border-radius:20px;

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

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

    backdrop-filter:blur(18px);

}

.stat-label{

    display:block;

    font-size:13px;

    color:#888;

    text-transform:uppercase;

    letter-spacing:.08em;

    margin-bottom:10px;

}

.stat-value{

    display:block;

    font-size:26px;

    font-weight:700;

    letter-spacing:-.02em;

}

.stat-change{

    display:inline-block;

    margin-top:6px;

    font-size:14px;

    font-weight:600;

}

.stat-change.up{

    color:#0a8f4e;

}

.stat-change.down{

    color:#d1274a;

}

.token-stats-caption{

    margin-top:18px;

    font-size:14px;

    color:#888;

}

.token-stats-caption a{

    color:#666;

    text-decoration:underline;

}

.grid{

    display:grid;

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

    gap:24px;

    margin-top:40px;

}

.card{

    padding:32px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(0,0,0,.06);

}

.card h3{

    font-size:20px;

    margin-bottom:12px;

    letter-spacing:-.02em;

}

.card p{

    font-size:15px;

    color:#666;

    line-height:1.7;

}

.tech{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    margin-top:40px;

}

.tech-right{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.tech-card{

    padding:32px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    transition:var(--transition);

}

.tech-card:hover{

    transform:translateY(-6px);

    box-shadow:0 30px 70px rgba(0,0,0,.06);

}

.tech-card h3{

    font-size:20px;

    margin-bottom:12px;

    letter-spacing:-.02em;

}

.tech-card p{

    font-size:15px;

    color:#666;

    line-height:1.7;

}