/* ===========================================================
   AIPE WEBSITE
   Premium Version 2.0
   PART 1
   Reset + Variables + Global + Navbar + Hero
=========================================================== */

/* -------------------------
   GOOGLE FONT
-------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* -------------------------
   RESET
-------------------------- */

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

html{
scroll-behavior:smooth;
}

body{
    margin:0;
    padding:0;
    font-family:'Poppins',sans-serif;
    background:#050505;
    color:#fff;
    overflow-x:hidden;
    position:relative;
}


body::before{
    content:"";
    position:fixed;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(0,255,80,.15),transparent 35%),
    radial-gradient(circle at 80% 30%,rgba(0,255,100,.12),transparent 30%),
    radial-gradient(circle at 50% 80%,rgba(0,255,80,.08),transparent 45%),
    linear-gradient(#050505,#000);

    z-index:-4;
}


body::after{
    content:"";
    position:fixed;
    inset:0;

    background-image:

    linear-gradient(rgba(0,255,120,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(0,255,120,.05) 1px,transparent 1px);

    background-size:80px 80px;

    opacity:.25;

    animation:gridMove 40s linear infinite;

    z-index:-3;
}

@keyframes gridMove{

0%{
transform:translateY(0);
}

100%{
transform:translateY(80px);
}

}

.glow-bg{

position:fixed;

width:100%;

height:100%;

pointer-events:none;

overflow:hidden;

top:0;

left:0;

z-index:-2;

}

.orb{

position:absolute;

border-radius:50%;

filter:blur(130px);

animation:floatGlow 12s ease-in-out infinite;

}

.orb1{

width:450px;
height:450px;

background:#00ff66;

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

}

.orb2{

width:500px;
height:500px;

background:#00cc88;

bottom:-180px;
right:-120px;

animation-delay:3s;

}

.orb3{

width:350px;
height:350px;

background:#66ff00;

top:45%;
left:40%;

animation-delay:6s;

}

.orb4{

width:300px;
height:300px;

background:#00ffaa;

top:20%;
right:20%;

animation-delay:9s;

}

@keyframes floatGlow{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-70px);

}

}


#particles{
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
}

.particle{
    position:absolute;
    width:2px;
    height:2px;
    background:#4dff88;
    border-radius:50%;
    box-shadow:0 0 8px #00ff66;
    animation:particleFloat linear infinite;
}

@keyframes particleFloat{

0%{
    transform:translateY(110vh);
    opacity:0;
}

10%{
    opacity:1;
}

90%{
    opacity:1;
}

100%{
    transform:translateY(-10vh);
    opacity:0;
}

}


/* -------------------------
   SCROLLBAR
-------------------------- */

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#070707;
}

::-webkit-scrollbar-thumb{

background:#39ff14;
border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#54ff37;

}

/* -------------------------
   VARIABLES
-------------------------- */

:root{

--green:#39ff14;

--green2:#6cff4d;

--dark:#050505;

--dark2:#0d0d0d;

--card:#111111;

--text:#ffffff;

--grey:#bbbbbb;

--border:rgba(255,255,255,.08);

}

/* -------------------------
   LINKS
-------------------------- */

a{

text-decoration:none;

color:inherit;

}

/* -------------------------
   IMAGES
-------------------------- */

img{

display:block;

max-width:100%;

}

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

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:9999;

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

backdrop-filter:blur(18px);

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

border-bottom:1px solid rgba(57,255,20,.15);

transition:.35s;

}

header.scrolled{

background:rgba(5,5,5,.92);

box-shadow:

0 15px 40px rgba(0,0,0,.45),

0 0 35px rgba(57,255,20,.08);

}

nav{

max-width:1350px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

padding:20px 40px;

}

.logo{

display:flex;

align-items:center;

gap:14px;

font-size:24px;

font-weight:700;

}

.logo img{

width:54px;

}

nav ul{

display:flex;

list-style:none;

gap:40px;

}

nav ul li a{

position:relative;

font-weight:600;

transition:.3s;

}

nav ul li a:hover{

color:var(--green);

}

nav ul li a::after{

content:"";

position:absolute;

bottom:-8px;

left:0;

width:0;

height:2px;

background:var(--green);

transition:.35s;

box-shadow:0 0 10px var(--green);

}

nav ul li a:hover::after{

width:100%;

}

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

.hero{

min-height:100vh;

padding:150px 8% 80px;

display:flex;

align-items:center;

background:
linear-gradient(rgba(5,5,5,.35),rgba(5,5,5,.78)),
url("../assets/images/hero-bg.webp");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.hero-content{

max-width:1350px;

width:100%;

margin:auto;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:100px;

}

.hero-left{

z-index:2;

}

.hero-badge{

display:inline-block;

padding:10px 18px;

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

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

border-radius:50px;

color:var(--green);

margin-bottom:30px;

font-weight:600;

}

.hero h1{

font-size:96px;

line-height:1;

font-weight:700;

margin-bottom:20px;

}

.hero h1 span{

color:var(--green);

text-shadow:0 0 25px rgba(57,255,20,.6);

}

.hero h2{

font-size:40px;

font-weight:600;

margin-bottom:30px;

}

.hero p{

font-size:20px;

color:var(--grey);

max-width:620px;

margin-bottom:45px;

line-height:1.8;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:60px;

flex-wrap:wrap;

}

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:14px;

font-weight:700;

transition:.35s;

cursor:pointer;

}

.btn.primary{

background:var(--green);

color:#000;

box-shadow:

0 0 25px rgba(57,255,20,.35),

0 0 60px rgba(57,255,20,.12);

}

.btn.primary:hover{

transform:translateY(-6px);

box-shadow:

0 0 40px rgba(57,255,20,.55),

0 0 90px rgba(57,255,20,.22);

}

.btn.secondary{

border:2px solid rgba(57,255,20,.4);

color:var(--green);

}

.btn.secondary:hover{

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

transform:translateY(-6px);

}

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.stat-card{

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

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

padding:25px;

border-radius:18px;

min-width:170px;

backdrop-filter:blur(14px);

transition:.35s;

text-align:center;

}

.stat-card:hover{

transform:translateY(-8px);

border-color:var(--green);

box-shadow:0 0 35px rgba(57,255,20,.18);

}

.stat-card h3{

font-size:42px;

color:var(--green);

margin-bottom:10px;

}

.stat-card span{

color:var(--grey);

}

.hero-right{

display:flex;

justify-content:center;

align-items:flex-end;

position:relative;

min-height:700px;

}

.hero-right::before{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

background:radial-gradient(circle,

rgba(57,255,20,.45),

rgba(57,255,20,.08),

transparent);

filter:blur(50px);

bottom:80px;

animation:pulseGlow 5s infinite ease-in-out;

}

.hero-robot{

width:680px;

position:relative;

z-index:2;

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

filter:

drop-shadow(0 0 25px rgba(57,255,20,.6))

drop-shadow(0 0 80px rgba(57,255,20,.25));

}

@keyframes robotFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-18px);
}

100%{
transform:translateY(0);
}

}

@keyframes pulseGlow{

0%,100%{

transform:scale(1);

opacity:.5;

}

50%{

transform:scale(1.15);

opacity:.9;

}

}

/* ===========================================================
SECTION DEFAULTS
=========================================================== */

section{

padding:120px 8%;

position:relative;

}

.container{

max-width:1350px;

margin:auto;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:58px;

margin-bottom:18px;

font-weight:700;

}

.section-title span{

color:var(--green);

text-shadow:0 0 20px rgba(57,255,20,.45);

}

.section-title p{

max-width:760px;

margin:auto;

color:var(--grey);

font-size:20px;

line-height:1.8;

}

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

.about{

background:#080808;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:480px;

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

}

.about-text h3{

font-size:40px;

margin-bottom:25px;

}

.about-text p{

font-size:19px;

color:var(--grey);

margin-bottom:25px;

line-height:1.9;

}

/* ===========================================================
FEATURE CARDS
=========================================================== */

.features-grid {

margin-top:90px;

display:grid;

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

gap:35px;

}

.feature-card{

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

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

border-radius:22px;

padding:40px;

transition:.35s;

backdrop-filter:blur(18px);

}

.feature-card:hover{

transform:translateY(-10px);

border-color:rgba(57,255,20,.35);

box-shadow:

0 0 40px rgba(57,255,20,.12);

}

.feature-icon{

font-size:48px;

margin-bottom:25px;

}

.feature-card h4{

font-size:26px;

margin-bottom:18px;

}

.feature-card p{

color:var(--grey);

line-height:1.8;

}

/* ===========================================================
TOKENOMICS
=========================================================== */

.tokenomics{

background:#050505;

}

.token-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.token-card{

background:linear-gradient(

180deg,

rgba(255,255,255,.04),

rgba(255,255,255,.02)

);

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

border-radius:22px;

padding:35px;

text-align:center;

transition:.35s;

}

.token-card:hover{

transform:translateY(-8px);

box-shadow:

0 0 35px rgba(57,255,20,.18);

}

.token-card h3{

font-size:46px;

color:var(--green);

margin-bottom:12px;

}

.token-card h4{

font-size:24px;

margin-bottom:15px;

}

.token-card p{

color:var(--grey);

line-height:1.8;

}

/* ===========================================================
GLASS PANELS
=========================================================== */

.glass{

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

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

border-radius:24px;

backdrop-filter:blur(18px);

}

/* ===========================================================
HOVER TRANSITIONS
=========================================================== */

.card,

.feature-card,

.token-card,

.stat-card{

transition:

transform .35s,

box-shadow .35s,

border-color .35s;

}

.card:hover,

.feature-card:hover,

.token-card:hover,

.stat-card:hover{

transform:translateY(-10px);

}

/* ===========================================================
FADE BETWEEN SECTIONS
=========================================================== */

section::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:100%;

height:120px;

background:linear-gradient(

transparent,

rgba(5,5,5,.35),

#050505

);

pointer-events:none;

}

/* ===========================================================
ROADMAP
=========================================================== */

.roadmap{

background:#080808;

}

.roadmap-grid{

display:grid;

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

gap:40px;

margin-top:70px;

}

.roadmap-card{

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

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

border-radius:22px;

padding:40px;

transition:.35s;

position:relative;

overflow:hidden;

}

.roadmap-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:0 0 45px rgba(57,255,20,.18);

}

.roadmap-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:5px;

height:100%;

background:var(--green);

}

.roadmap-card h3{

font-size:30px;

margin-bottom:20px;

color:var(--green);

}

.roadmap-card ul{

list-style:none;

}

.roadmap-card li{

padding:12px 0;

color:var(--grey);

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

}

/* ===========================================================
HOW TO BUY
=========================================================== */

.buy{

background:#050505;

}

.buy-grid{

display:grid;

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

gap:30px;

margin-top:70px;

}

.buy-card{

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

padding:35px;

border-radius:22px;

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

transition:.35s;

text-align:center;

}

.buy-card:hover{

transform:translateY(-8px);

box-shadow:0 0 35px rgba(57,255,20,.16);

}

.buy-number{

width:70px;

height:70px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

background:var(--green);

color:#000;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

font-weight:700;

}

.buy-card h4{

font-size:24px;

margin-bottom:18px;

}

.buy-card p{

color:var(--grey);

line-height:1.8;

}

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

.faq{

background:#080808;

}

.faq-container{

max-width:950px;

margin:auto;

margin-top:70px;

}

.faq-item{

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

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

border-radius:18px;

padding:28px;

margin-bottom:25px;

transition:.35s;

cursor:pointer;

}

.faq-item:hover{

border-color:var(--green);

box-shadow:0 0 25px rgba(57,255,20,.15);

}

.faq-item h3{

font-size:24px;

margin-bottom:15px;

}

.faq-item p{

color:var(--grey);

line-height:1.8;

}

/* ===========================================================
COMMUNITY
=========================================================== */

.community{

background:#050505;

text-align:center;

}

.community-box{

max-width:850px;

margin:auto;

padding:70px;

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

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

border-radius:28px;

backdrop-filter:blur(20px);

}

.community-box h2{

font-size:58px;

margin-bottom:25px;

}

.community-box p{

font-size:20px;

color:var(--grey);

margin-bottom:45px;

}

.community-buttons{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

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

footer{

padding:80px 8%;

background:#030303;

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

}

.footer-content{

max-width:1300px;

margin:auto;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:30px;

}

.footer-logo{

display:flex;

align-items:center;

gap:15px;

font-size:24px;

font-weight:700;

}

.footer-logo img{

width:55px;

}

.footer-links{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.footer-links a{

transition:.3s;

}

.footer-links a:hover{

color:var(--green);

}

.footer-copy{

margin-top:40px;

text-align:center;

color:#888;

font-size:15px;

}

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

.reveal{

opacity:0;

transform:translateY(60px);

transition:1s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/* ===========================================================
PART 4
RESPONSIVE + FINAL POLISH
=========================================================== */

/* -------------------------
BUTTON SHINE
-------------------------- */

.btn{
position:relative;
overflow:hidden;
}

.btn::before{

content:"";

position:absolute;

top:0;

left:-130%;

width:70%;

height:100%;

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

transform:skewX(-25deg);

transition:1s;

}

.btn:hover::before{

left:150%;

}

/* -------------------------
CARD GLOW
-------------------------- */

.feature-card,
.token-card,
.roadmap-card,
.buy-card,
.faq-item,
.stat-card{

transition:
transform .35s,
box-shadow .35s,
border-color .35s;

}

.feature-card:hover,
.token-card:hover,
.roadmap-card:hover,
.buy-card:hover,
.faq-item:hover,
.stat-card:hover{

transform:translateY(-10px);

border-color:var(--green);

box-shadow:
0 20px 60px rgba(57,255,20,.12);

}

/* -------------------------
SECTION FADE
-------------------------- */

.about,
.tokenomics,
.roadmap,
.buy,
.faq,
.community{

position:relative;

}

.about::before,
.tokenomics::before,
.roadmap::before,
.buy::before,
.faq::before,
.community::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:1px;

background:linear-gradient(
90deg,
transparent,
rgba(57,255,20,.25),
transparent
);

}

/* -------------------------
LOGO HOVER
-------------------------- */

.logo img,
.footer-logo img{

transition:.35s;

}

.logo:hover img,
.footer-logo:hover img{

transform:rotate(-6deg) scale(1.08);

filter:drop-shadow(0 0 15px rgba(57,255,20,.5));

}

/* -------------------------
IMAGE OPTIMIZATION
-------------------------- */

.hero-robot{

user-select:none;
pointer-events:none;

}

/* -------------------------
RESPONSIVE
-------------------------- */

@media(max-width:1200px){

.hero-content{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

min-height:auto;

margin-bottom:60px;

}

.hero p{

margin:auto;

margin-bottom:45px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.about-grid{

grid-template-columns:1fr;

text-align:center;

}

.features{

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

}

.token-grid{

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

}

.roadmap-grid{

grid-template-columns:1fr;

}

.buy-grid{

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

}

}

@media(max-width:768px){

nav{

padding:20px;

}

nav ul{

display:none;

}

.hero{

padding:120px 25px 80px;

}

.hero h1{

font-size:58px;

}

.hero h2{

font-size:28px;

}

.hero p{

font-size:18px;

}

.hero-robot{

width:360px;

}

.features,
.token-grid,
.buy-grid{

grid-template-columns:1fr;

}

.community-box{

padding:45px 30px;

}

.community-box h2{

font-size:40px;

}

.section-title h2{

font-size:42px;

}

.about-image img{

width:320px;

}

}

@media(max-width:480px){

.hero h1{

font-size:44px;

}

.hero h2{

font-size:24px;

}

.btn{

width:100%;

}

.hero-buttons{

flex-direction:column;

}

.stat-card{

width:100%;

}

}

/* -------------------------
SELECTION
-------------------------- */

::selection{

background:var(--green);

color:#000;

}

/* -------------------------
SMOOTH TRANSITIONS
-------------------------- */

*{

transition:
background-color .25s,
border-color .25s;

}

/* ===========================================================
END OF AIPE CSS
=========================================================== */

/* Ripple Effect */

.btn{

position:relative;

overflow:hidden;

}

.ripple{

position:absolute;

border-radius:50%;

transform:scale(0);

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

animation:ripple .6s linear;

pointer-events:none;

}

@keyframes ripple{

to{

transform:scale(4);

opacity:0;

}

}

/* ==========================================
PART 2 JAVASCRIPT STYLES
========================================== */

.star{

position:fixed;

width:2px;

height:2px;

background:#39ff14;

border-radius:50%;

opacity:.15;

pointer-events:none;

animation:twinkle 4s infinite;

z-index:1;

}

@keyframes twinkle{

0%,100%{

opacity:.08;

transform:scale(1);

}

50%{

opacity:.7;

transform:scale(2);

}

}

.top-button{

position:fixed;

right:30px;

bottom:30px;

width:55px;

height:55px;

border:none;

border-radius:50%;

background:#39ff14;

color:#000;

font-size:22px;

font-weight:bold;

cursor:pointer;

opacity:0;

transform:translateY(30px);

transition:.35s;

z-index:9999;

box-shadow:0 0 30px rgba(57,255,20,.35);

}

.top-button.show{

opacity:1;

transform:translateY(0);

}

.top-button:hover{

transform:scale(1.1);

}

/* ==========================================
PART 3
========================================== */

.scroll-progress{

position:fixed;

top:0;

left:0;

height:4px;

width:0;

background:#39ff14;

z-index:10000;

box-shadow:0 0 15px rgba(57,255,20,.6);

}

nav a.active{

color:#39ff14;

}

body.loaded{

animation:fadeBody .8s ease;

}

@keyframes fadeBody{

from{

opacity:0;

}

to{

opacity:1;

}
}

/* ============================
   Scroll Reveal Animation
============================ */

.section-title,
.card,
.roadmap-card,
.token-card,
.buy-step,
.faq-item,
.hero-content,
.hero-image{

    opacity:0;
    transform:translateY(70px);
    transition:all .9s ease;

}

.show{

    opacity:1;
    transform:translateY(0);

}

/* Premium Animation */

.feature-card,
.token-card,
.roadmap-card,
.buy-card,
.faq-item{

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

}

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

.faq-question{

width:100%;

background:none;

border:none;

display:flex;

justify-content:space-between;

align-items:center;

padding:22px;

cursor:pointer;

color:#fff;

font-size:18px;

font-weight:600;

text-align:left;

}

.faq-answer{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

padding:0 22px;

}

.faq-answer p{

padding-bottom:20px;

color:#bdbdbd;

line-height:1.7;

}

.faq-item.active .faq-answer{

max-height:200px;

}

.faq-icon{

font-size:28px;

color:#39ff14;

transition:.3s;

}

.faq-item.active .faq-icon{

transform:rotate(45deg);

}