@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

:root{
    --bg:#090909;
    --surface:rgba(255,255,255,.05);
    --surface2:rgba(255,255,255,.08);
    --border:rgba(255,255,255,.08);
    --text:#ffffff;
    --muted:#b8b8b8;
    --orange:#ff9b4d;
    --orange2:#ff6b2d;
    --orange3:#ffb15c;
    --red:#ff4d3d;
    --shadow:0 20px 60px rgba(0,0,0,.45);
    --radius:26px;
}

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow-x:hidden;
    min-height:100vh;
    position:relative;
}

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-20;
    background:
    radial-gradient(circle at 20% 20%,rgba(255,140,70,.12),transparent 30%),
    radial-gradient(circle at 80% 75%,rgba(255,70,40,.12),transparent 30%),
    linear-gradient(180deg,#0a0909,#090909 60%);
}

.gradient{
    position:absolute;
    width:650px;
    height:650px;
    border-radius:50%;
    filter:blur(140px);
    opacity:.5;
    animation:float 18s ease-in-out infinite alternate;
}

.gradient-one{
    left:-180px;
    top:-180px;
    background:#ff8d42;
}

.gradient-two{
    right:-250px;
    bottom:-200px;
    background:#ff4c29;
    animation-delay:6s;
}

.gradient-three{
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    background:#ff7a35;
    opacity:.18;
    animation-delay:12s;
}

@keyframes float{
    0%{
        transform:translate(0,0) scale(1);
    }
    100%{
        transform:translate(70px,-40px) scale(1.2);
    }
}

.grid{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
        rgba(255,140,60,.14) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255,140,60,.14) 1px,
        transparent 1px
    );

    background-size:64px 64px;

    mask-image:
    radial-gradient(
        circle at center,
        black 25%,
        transparent 80%
    );

    opacity:.8;

    animation:gridMove 18s linear infinite;
}


@keyframes gridMove{

    from{
        background-position:0 0;
    }

    to{
        background-position:70px 70px;
    }

}

.noise{
    position:absolute;
    inset:0;
    opacity:.03;
    background-image:url("https://grainy-gradients.vercel.app/noise.svg");
    animation:noise 1s steps(2) infinite;
}

@keyframes noise{
    from{
        transform:translate(0,0);
    }
    to{
        transform:translate(-25px,-25px);
    }
}

.particles{
    position:absolute;
    inset:0;
    overflow:hidden;
}

.particles::before,
.particles::after{
    content:"";
    position:absolute;
    inset:-100%;
    background-image:
    radial-gradient(circle,#ff9944 1px,transparent 2px);
    background-size:140px 140px;
    opacity:.18;
    animation:particles 40s linear infinite;
}

.particles::after{
    animation-duration:60s;
    opacity:.08;
}

@keyframes particles{
    from{
        transform:translateY(0);
    }
    to{
        transform:translateY(-600px);
    }
}

header{
    width:100%;
    display:flex;
    justify-content:center;
    padding:28px;
}

.navbar{
    width:min(1100px,92%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);
    box-shadow:var(--shadow);
}

.logo{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    font-size:22px;
    font-weight:800;
    line-height:1;
}

.logo::before{
    content:"";
    position:absolute;
    width:70px;
    height:70px;
    background:radial-gradient(circle,rgba(255,140,60,.25),transparent 70%);
    filter:blur(18px);
    z-index:-1;
}

.logo img{
    width:40px;
    display:block;
    flex-shrink:0;
    filter:drop-shadow(0 0 15px rgba(255,150,60,.5));
    animation:logoFloat 4s ease-in-out infinite;
}

@keyframes logoFloat{
    50%{
        transform:translateY(-5px);
    }
}

.nav-links{
    position:relative;
    display:flex;
    gap:10px;
    padding:6px;
    background:rgba(255,255,255,.03);
    border-radius:999px;
}

.nav-item{
    position:relative;
    padding:14px 28px;
    border:none;
    border-radius:999px;
    background:transparent;
    color:#d5d5d5;
    cursor:pointer;
    transition:.35s;
    font-size:15px;
    font-weight:600;
    z-index:2;
}

.nav-item:hover{
    color:white;
    transform:translateY(-2px);
}

.nav-item.active{
    color:white;
}

.nav-slider{
    position:absolute;
    left:6px;
    top:6px;
    width:120px;
    height:46px;
    border-radius:999px;
    background:linear-gradient(135deg,var(--orange3),var(--orange2));
    box-shadow:
    0 0 35px rgba(255,120,40,.5),
    inset 0 1px rgba(255,255,255,.25);
    transition:.45s cubic-bezier(.22,1,.36,1);
}

main{
    width:min(1200px,92%);
    margin:auto;
}

.hero{
    min-height:calc(100vh - 120px);
    padding:80px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-logo img{
    width:125px;
    margin-bottom:25px;
    filter:
    drop-shadow(0 0 35px rgba(255,145,60,.6));
    animation:logoFloat 5s ease-in-out infinite;
}

.badge{
    padding:10px 18px;
    border-radius:999px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    color:#ffb67c;
    font-size:14px;
    margin-bottom:28px;
}

.hero h1{
    font-size:clamp(4rem,8vw,6.5rem);
    line-height:.95;
    font-weight:900;
    letter-spacing:-4px;
    max-width:900px;
}

.hero h1 span{
    background:linear-gradient(90deg,#ffb05d,#ff6b2d,#ffb05d);
    background-size:250%;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:gradient 5s linear infinite;
}

@keyframes gradient{
    to{
        background-position:250%;
    }
}

.hero p{
    margin-top:30px;
    max-width:700px;
    font-size:20px;
    color:var(--muted);
    line-height:1.8;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-top:45px;
}

.hero button{
    padding:18px 34px;
    border-radius:999px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
}

.primary-button{
    border:none;
    color:white;
    background:linear-gradient(135deg,var(--orange3),var(--orange2));
    box-shadow:0 15px 35px rgba(255,120,40,.35);
}

.primary-button:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 20px 50px rgba(255,120,40,.5);
}

.secondary-button{
    color:white;
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(15px);
}

.secondary-button:hover{
    background:rgba(255,255,255,.08);
    transform:translateY(-4px);
}

.features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin:70px 0 120px;
}

.feature-card{
    padding:40px;
    border-radius:var(--radius);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(18px);
    transition:.4s;
    position:relative;
    overflow:hidden;
}

.feature-card::before{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    background:radial-gradient(circle,rgba(255,140,60,.3),transparent 70%);
    right:-80px;
    top:-80px;
    transition:.4s;
}

.feature-card:hover{
    transform:translateY(-12px);
    border-color:rgba(255,145,70,.25);
    box-shadow:0 25px 50px rgba(0,0,0,.35);
}

.feature-card:hover::before{
    transform:scale(1.4);
}

.feature-icon{
    width:64px;
    height:64px;
    border-radius:18px;
    display:grid;
    place-items:center;
    font-size:28px;
    margin-bottom:25px;
    background:linear-gradient(135deg,var(--orange3),var(--orange2));
    box-shadow:0 0 30px rgba(255,140,60,.35);
}

.feature-card h3{
    font-size:24px;
    margin-bottom:15px;
}

.feature-card p{
    color:var(--muted);
    line-height:1.8;
}

@media(max-width:900px){

    .navbar{
        flex-direction:column;
        gap:20px;
        border-radius:30px;
    }

    .nav-links{
        width:100%;
        justify-content:center;
        flex-wrap:wrap;
    }

    .features{
        grid-template-columns:1fr;
    }

    .hero-buttons{
        flex-direction:column;
        width:100%;
    }

    .hero button{
        width:100%;
    }

    

}

.ember{
    position:absolute;
    width:4px;
    height:4px;
    background:#ff9b4d;
    border-radius:50%;
    box-shadow:
    0 0 15px #ff9b4d,
    0 0 30px #ff6b2d;
    animation:emberFloat linear infinite;
}

@keyframes emberFloat{
    0%{
        transform:translateY(0) scale(1);
        opacity:0;
    }

    20%{
        opacity:1;
    }

    100%{
        transform:
        translateY(-600px)
        translateX(80px)
        scale(.3);
        opacity:0;
    }
}

.hidden{
    opacity:0;
    transform:translateY(40px);
    filter:blur(10px);
    transition:
    1s cubic-bezier(.22,1,.36,1);
}

.show{
    opacity:1;
    transform:none;
    filter:none;
}

.cursor-glow{
    position:fixed;
    width:300px;
    height:300px;
    border-radius:50%;
    pointer-events:none;
    background:
    radial-gradient(
        circle,
        rgba(255,140,60,.12),
        transparent 70%
    );
    transform:translate(-50%,-50%);
    z-index:-1;
}

button{
    overflow:hidden;
    position:relative;
}

.ripple{
    position:absolute;
    width:20px;
    height:20px;
    border-radius:50%;
    background:rgba(255,255,255,.35);
    transform:translate(-50%,-50%);
    animation:ripple .6s linear;
}

@keyframes ripple{
    from{
        transform:
        translate(-50%,-50%)
        scale(1);
        opacity:1;
    }

    to{
        transform:
        translate(-50%,-50%)
        scale(15);
        opacity:0;
    }
}


.logo span{
background:linear-gradient(90deg,#ff9a44,#ff4d6d,#9d4dff,#45caff,#67ff8d,#ffd93d,#ff9a44);
background-size:300%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
animation:rainbow 8s linear infinite;
}




@media (max-width:900px){
header{padding:18px;}
.navbar{width:100%;border-radius:24px;flex-direction:column;gap:18px;padding:18px;}
.logo{font-size:24px;}
.nav-links{width:100%;justify-content:center;flex-wrap:wrap;gap:8px;}
.nav-item{padding:12px 18px;font-size:14px;}
.nav-slider{display:none;}
.hero{min-height:auto;padding:60px 0;}
.hero-logo img{width:90px;}
.hero h1{font-size:clamp(2.6rem,10vw,4rem);letter-spacing:-2px;}
.hero p{font-size:17px;line-height:1.6;margin-top:20px;}
.hero-buttons{flex-direction:column;width:100%;gap:16px;}
.hero button{width:100%;}
.features{grid-template-columns:1fr;gap:22px;margin-top:60px;}
.feature-card{padding:28px;}
}

@media (max-width:480px){
.hero h1{font-size:2.3rem;}
.badge{font-size:12px;}
.hero p{font-size:15px;}
.feature-card{padding:24px;}
}