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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#07111d;

    color:#fff;

    overflow-x:hidden;

    line-height:1.6;

}

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

:root{

    --primary:#4F8BFF;

    --secondary:#7B5CFF;

    --cyan:#35D7FF;

    --green:#23D18B;

    --yellow:#FFD54A;

    --dark:#081018;

    --card:#101B2C;

    --card2:#15263D;

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

    --text:#F3F5F7;

    --muted:#8FA3B8;

    --shadow:0 20px 60px rgba(0,0,0,.35);

    --radius:24px;

}

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

.background{

    position:fixed;

    inset:0;

    z-index:-5;

    overflow:hidden;

    background:

    radial-gradient(circle at top,#173B76 0%,#081018 55%,#050A12 100%);

}

.blur{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.28;

}

.blur-one{

    top:-220px;

    left:-220px;

    background:#3D7DFF;

}

.blur-two{

    bottom:-260px;

    right:-260px;

    background:#7B5CFF;

}

.grid{

    position:absolute;

    inset:0;

    background-image:

    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:55px 55px;

    mask-image:linear-gradient(to bottom,rgba(0,0,0,1),transparent);

}

.particles{

    position:absolute;

    inset:0;

    pointer-events:none;

}

/* =====================================================
   CONTAINER
===================================================== */

.container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding:0 22px;

}

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

.navbar{

    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:1000;

    backdrop-filter:blur(25px);

    background:rgba(8,17,29,.65);

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

}

.navbar .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:82px;

}

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:white;

}

.logo img{

    width:58px;

}

.logo span{

    font-size:24px;

    font-weight:800;

    letter-spacing:.5px;

}

.menu{

    display:flex;

    gap:34px;

    list-style:none;

}

.menu a{

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.menu a:hover{

    color:var(--cyan);

}

.nav-btn{

    padding:15px 34px;

    border-radius:100px;

    text-decoration:none;

    color:white;

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    font-weight:700;

    transition:.35s;

    box-shadow:0 15px 45px rgba(79,139,255,.35);

}

.nav-btn:hover{

    transform:translateY(-3px);

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

.hero{

    position:relative;

    padding-top:170px;

    padding-bottom:120px;

}

.hero .container{

    position:relative;

    z-index:5;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:10px 22px;

    border-radius:100px;

    background:rgba(79,139,255,.15);

    border:1px solid rgba(79,139,255,.35);

    color:#8FD8FF;

    font-weight:700;

    margin-bottom:28px;

}

.hero-badge i{

    color:#FFD84A;

}

.hero h1{

    font-size:74px;

    font-weight:900;

    line-height:1.05;

    max-width:760px;

    margin-bottom:28px;

}

.hero h1 span{

    background:linear-gradient(90deg,#56C6FF,#7B5CFF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero p{

    max-width:700px;

    color:var(--muted);

    font-size:20px;

    margin-bottom:45px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    margin-bottom:60px;

}

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:18px;

    text-decoration:none;

    color:white;

    font-weight:700;

    background:linear-gradient(90deg,#3E8BFF,#745BFF);

    transition:.35s;

    box-shadow:0 25px 45px rgba(61,139,255,.35);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:0 30px 70px rgba(61,139,255,.55);

}

.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    border-radius:18px;

    text-decoration:none;

    color:white;

    font-weight:700;

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

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

    backdrop-filter:blur(20px);

    transition:.35s;

}

.btn-secondary:hover{

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

    transform:translateY(-5px);

}

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

.hero-stats{

    display:grid;

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

    gap:24px;

    margin-bottom:60px;

}

.hero-stats div{

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

    backdrop-filter:blur(25px);

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

    border-radius:22px;

    padding:30px;

    transition:.35s;

}

.hero-stats div:hover{

    transform:translateY(-8px);

    border-color:rgba(80,160,255,.45);

    box-shadow:0 20px 60px rgba(50,120,255,.18);

}

.hero-stats h2{

    font-size:42px;

    color:white;

    margin-bottom:8px;

}

.hero-stats span{

    color:var(--muted);

    font-size:15px;

}

/* =====================================================
   GENERATOR CARD
===================================================== */

.generator-card{

    background:linear-gradient(180deg,#142238,#101A2A);

    border-radius:28px;

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

    box-shadow:var(--shadow);

    overflow:hidden;

}

.generator-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:30px;

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

}

.generator-left{

    display:flex;

    align-items:center;

    gap:18px;

}

.generator-left img{

    width:70px;

}

.generator-left h3{

    font-size:28px;

    margin-bottom:5px;

}

.generator-left span{

    color:var(--muted);

}

.generator-status{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:#6EF0A2;

}

.status-dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:#29F17C;

    box-shadow:0 0 18px #29F17C;

    animation:pulse 1.5s infinite;

}

@keyframes pulse{

0%{

transform:scale(.8);

opacity:.6;

}

50%{

transform:scale(1.2);

opacity:1;

}

100%{

transform:scale(.8);

opacity:.6;

}

}
/* =====================================================
   GENERATOR BODY
===================================================== */

.generator-body{

    padding:35px;

}

.input-group-premium{

    margin-bottom:30px;

}

.input-group-premium label{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:14px;

    color:#DCE7F5;

    font-weight:700;

    font-size:15px;

}

.input-group-premium label i{

    color:var(--primary);

}

.input-group-premium input[type=text]{

    width:100%;

    height:64px;

    border:none;

    outline:none;

    border-radius:18px;

    background:#18273D;

    color:#fff;

    padding:0 22px;

    font-size:17px;

    transition:.35s;

    border:1px solid transparent;

}

.input-group-premium input[type=text]:focus{

    border-color:#4F8BFF;

    box-shadow:0 0 0 5px rgba(79,139,255,.15);

}

.input-group-premium input::placeholder{

    color:#7E93A9;

}

/* =====================================================
   TOKEN SELECTOR
===================================================== */

.token-selector{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:22px;

}

.token-selector button{

    width:58px;

    height:58px;

    border:none;

    cursor:pointer;

    border-radius:18px;

    background:#1B2E47;

    color:white;

    font-size:18px;

    transition:.35s;

}

.token-selector button:hover{

    background:var(--primary);

    transform:scale(1.05);

}

.token-value{

    text-align:center;

}

.token-value h2{

    font-size:48px;

    font-weight:800;

    color:white;

}

.token-value span{

    color:var(--muted);

    font-size:15px;

}

/* =====================================================
   RANGE
===================================================== */

#range{

    width:100%;

    appearance:none;

    height:8px;

    border-radius:100px;

    background:#22334B;

    cursor:pointer;

}

#range::-webkit-slider-thumb{

    appearance:none;

    width:24px;

    height:24px;

    border-radius:50%;

    background:#56C6FF;

    box-shadow:0 0 20px rgba(86,198,255,.6);

}

#range::-moz-range-thumb{

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:#56C6FF;

}

/* =====================================================
   PLATFORM GRID
===================================================== */

.platform-grid{

    display:grid;

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

    gap:16px;

}

.platform{

    height:86px;

    border-radius:18px;

    background:#17263A;

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

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.35s;

}

.platform i{

    font-size:28px;

    margin-bottom:8px;

    color:#6FCFFF;

}

.platform span{

    font-size:14px;

    font-weight:600;

}

.platform:hover{

    transform:translateY(-5px);

    border-color:#4F8BFF;

    box-shadow:0 15px 35px rgba(79,139,255,.2);

}

.platform.active{

    background:linear-gradient(180deg,#2356A8,#1A3359);

    border-color:#61A7FF;

}

/* =====================================================
   SECURITY
===================================================== */

.generator-security{

    display:grid;

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

    gap:16px;

    margin:32px 0;

}

.generator-security div{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px;

    border-radius:16px;

    background:#18273D;

    font-size:14px;

    color:#C9D5E2;

}

.generator-security i{

    color:#4F8BFF;

}

/* =====================================================
   GENERATE BUTTON
===================================================== */

.generate-btn{

    width:100%;

    height:68px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:19px;

    font-weight:800;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:14px;

    background:linear-gradient(90deg,#4F8BFF,#755BFF);

    box-shadow:0 20px 45px rgba(79,139,255,.35);

    transition:.35s;

}

.generate-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 25px 60px rgba(79,139,255,.5);

}

/* =====================================================
   PROGRESS
===================================================== */

.generator-progress{

    margin-top:30px;

}

.progress-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:10px;

    color:#AFC2D7;

}

.progress-bar{

    width:100%;

    height:12px;

    border-radius:100px;

    overflow:hidden;

    background:#1A2A42;

}

.progress-fill{

    width:0%;

    height:100%;

    border-radius:100px;

    background:linear-gradient(90deg,#4F8BFF,#6FE6FF);

    transition:.4s;

}
/* =====================================================
   SIDEBAR
===================================================== */

.sidebar{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.sidebar-card{

    background:linear-gradient(180deg,#132238,#0F1929);

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

    border-radius:24px;

    padding:28px;

    box-shadow:var(--shadow);

    transition:.35s;

}

.sidebar-card:hover{

    transform:translateY(-6px);

    border-color:rgba(79,139,255,.35);

}

.sidebar-card h3{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:22px;

    margin-bottom:26px;

}

.sidebar-card h3 i{

    color:#55BFFF;

}

/* =====================================================
   STATUS
===================================================== */

.status-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

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

}

.status-item:last-child{

    border-bottom:none;

}

.status-item span{

    color:var(--muted);

}

.status-item strong{

    color:white;

}

.online{

    color:#30F39C !important;

}

/* =====================================================
   RECENT ACTIVITY
===================================================== */

#recentActivity{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.activity-item{

    display:flex;

    align-items:center;

    gap:14px;

    padding:14px;

    background:#18273C;

    border-radius:16px;

}

.activity-avatar{

    width:46px;

    height:46px;

    border-radius:50%;

    background:linear-gradient(135deg,#4F8BFF,#6EE6FF);

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

}

.activity-info{

    flex:1;

}

.activity-info h4{

    font-size:15px;

    margin-bottom:4px;

}

.activity-info span{

    color:var(--muted);

    font-size:13px;

}

/* =====================================================
   RATING
===================================================== */

.rating-box{

    text-align:center;

}

.rating-box h1{

    font-size:72px;

    font-weight:900;

    background:linear-gradient(90deg,#56C6FF,#7B5CFF);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.rating-box p{

    color:var(--muted);

    margin-top:10px;

}

/* =====================================================
   SECTION TITLES
===================================================== */

.section-title{

    text-align:center;

    margin-bottom:80px;

}

.section-badge{

    display:inline-block;

    padding:10px 20px;

    border-radius:100px;

    background:rgba(79,139,255,.14);

    color:#79D8FF;

    font-size:13px;

    font-weight:700;

    margin-bottom:20px;

}

.section-title h2{

    font-size:54px;

    margin-bottom:20px;

}

.section-title p{

    max-width:700px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

}

/* =====================================================
   FEATURES
===================================================== */

.features-section{

    padding:120px 0;

}

.features-grid{

    display:grid;

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

    gap:28px;

}

.feature-card{

    padding:38px;

    border-radius:26px;

    background:linear-gradient(180deg,#132238,#0E1928);

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

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.feature-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
        rgba(79,139,255,.15),
        transparent 60%);

    opacity:0;

    transition:.35s;

}

.feature-card:hover::before{

    opacity:1;

}

.feature-card:hover{

    transform:translateY(-10px);

    border-color:#4F8BFF;

    box-shadow:0 25px 60px rgba(79,139,255,.22);

}

.feature-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    background:linear-gradient(135deg,#4F8BFF,#6EE6FF);

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

}

.feature-icon i{

    font-size:30px;

    color:white;

}

.feature-card h3{

    font-size:26px;

    margin-bottom:16px;

}

.feature-card p{

    color:var(--muted);

    line-height:1.8;

}

/* =====================================================
   HOW IT WORKS
===================================================== */

.steps-section{

    padding:120px 0;

}

.steps-grid{

    display:grid;

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

    gap:30px;

}

.step-card{

    position:relative;

    padding:45px;

    border-radius:26px;

    background:linear-gradient(180deg,#132238,#0E1928);

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

    transition:.35s;

    overflow:hidden;

}

.step-card:hover{

    transform:translateY(-10px);

    border-color:#4F8BFF;

    box-shadow:0 25px 60px rgba(79,139,255,.2);

}

.step-number{

    width:74px;

    height:74px;

    border-radius:50%;

    background:linear-gradient(135deg,#4F8BFF,#6EE6FF);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    font-weight:800;

    margin-bottom:30px;

}

.step-card h3{

    font-size:28px;

    margin-bottom:16px;

}

.step-card p{

    color:var(--muted);

    line-height:1.8;

}

/* =====================================================
   TECHNOLOGY
===================================================== */

.technology-section{

    padding:130px 0;

}

.technology-list{

    list-style:none;

    margin-top:35px;

}

.technology-list li{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

    font-size:18px;

}

.technology-list i{

    color:#42D89A;

}

/* =====================================================
   TERMINAL
===================================================== */

.terminal-box{

    border-radius:24px;

    overflow:hidden;

    background:#0D1625;

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

    box-shadow:var(--shadow);

}

.terminal-header{

    display:flex;

    gap:10px;

    padding:18px 22px;

    background:#152339;

}

.terminal-header span{

    width:14px;

    height:14px;

    border-radius:50%;

}

.terminal-header span:nth-child(1){

    background:#FF5F57;

}

.terminal-header span:nth-child(2){

    background:#FFBD2F;

}

.terminal-header span:nth-child(3){

    background:#28CA42;

}

.terminal-body{

    padding:35px;

    font-family:monospace;

    font-size:17px;

    line-height:2;

    color:#B9D8FF;

}

.success{

    color:#35E28F;

}

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

.faq-section{

    padding:130px 0;

}

.faq-wrapper{

    max-width:900px;

    margin:auto;

}

.faq-item{

    margin-bottom:22px;

    border-radius:22px;

    overflow:hidden;

    background:#122136;

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

}

.faq-question{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:28px;

    cursor:pointer;

}

.faq-question h3{

    font-size:22px;

}

.faq-question i{

    transition:.3s;

}

.faq-answer{

    padding:0 28px 28px;

    color:var(--muted);

    line-height:1.8;

}

/* =====================================================
   CTA
===================================================== */

.cta-section{

    padding:140px 0;

}

.cta-box{

    text-align:center;

    padding:90px;

    border-radius:32px;

    background:linear-gradient(135deg,#265FBE,#6B56FF);

    box-shadow:0 30px 80px rgba(70,120,255,.4);

}

.cta-box h2{

    font-size:62px;

    margin:25px 0;

}

.cta-box p{

    max-width:700px;

    margin:auto;

    font-size:20px;

    opacity:.9;

}

.cta-button{

    display:inline-flex;

    align-items:center;

    gap:14px;

    margin-top:45px;

    padding:22px 55px;

    background:white;

    color:#1E3E73;

    border-radius:18px;

    text-decoration:none;

    font-weight:800;

    transition:.35s;

}

.cta-button:hover{

    transform:translateY(-6px);

}

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

.footer{

    padding:70px 0 35px;

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

}

.footer-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.footer-logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.footer-logo img{

    width:56px;

}

.footer-links{

    display:flex;

    gap:35px;

}

.footer-links a{

    color:#AFC2D7;

    text-decoration:none;

    transition:.3s;

}

.footer-links a:hover{

    color:white;

}

.footer-divider{

    height:1px;

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

    margin-bottom:30px;

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer-bottom p{

    color:#7F93AA;

}

.footer-social{

    display:flex;

    gap:18px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#152339;

    color:white;

    transition:.35s;

}

.footer-social a:hover{

    background:#4F8BFF;

}

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

@media(max-width:1100px){

.hero h1{

font-size:56px;

}

.hero-stats,
.features-grid,
.steps-grid{

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

}

}

@media(max-width:768px){

.menu{

display:none;

}

.hero{

padding-top:130px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats,
.features-grid,
.steps-grid,
.generator-security{

grid-template-columns:1fr;

}

.footer-top,
.footer-bottom{

flex-direction:column;

gap:25px;

text-align:center;

}

.cta-box{

padding:50px 30px;

}

.cta-box h2{

font-size:42px;

}

}
/* =====================================================
   PREMIUM ANIMATIONS
===================================================== */

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

@keyframes glow{

0%{

box-shadow:0 0 10px rgba(79,139,255,.2);

}

50%{

box-shadow:0 0 45px rgba(79,139,255,.55);

}

100%{

box-shadow:0 0 10px rgba(79,139,255,.2);

}

}

@keyframes shine{

0%{

transform:translateX(-120%);

}

100%{

transform:translateX(220%);

}

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@keyframes rotateSlow{

from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}

}

@keyframes pulseBorder{

0%{

border-color:rgba(79,139,255,.15);

}

50%{

border-color:rgba(79,139,255,.55);

}

100%{

border-color:rgba(79,139,255,.15);

}

}

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

.hero::before{

content:"";

position:absolute;

width:900px;

height:900px;

background:radial-gradient(circle,
rgba(79,139,255,.28),
transparent 70%);

left:-300px;

top:-250px;

filter:blur(90px);

pointer-events:none;

}

.hero::after{

content:"";

position:absolute;

width:800px;

height:800px;

background:radial-gradient(circle,
rgba(123,92,255,.22),
transparent 70%);

right:-300px;

bottom:-250px;

filter:blur(90px);

pointer-events:none;

}

/* =====================================================
   CARD EFFECTS
===================================================== */

.generator-card,
.sidebar-card,
.feature-card,
.step-card,
.terminal-box{

animation:fadeUp .8s ease forwards;

}

.generator-card{

animation-delay:.15s;

}

.sidebar-card:nth-child(1){

animation-delay:.25s;

}

.sidebar-card:nth-child(2){

animation-delay:.35s;

}

.sidebar-card:nth-child(3){

animation-delay:.45s;

}

.feature-card{

opacity:0;

animation:fadeUp .8s ease forwards;

}

.feature-card:nth-child(1){

animation-delay:.1s;

}

.feature-card:nth-child(2){

animation-delay:.2s;

}

.feature-card:nth-child(3){

animation-delay:.3s;

}

.feature-card:nth-child(4){

animation-delay:.4s;

}

.feature-card:nth-child(5){

animation-delay:.5s;

}

.feature-card:nth-child(6){

animation-delay:.6s;

}

/* =====================================================
   FLOATING ICONS
===================================================== */

.feature-icon{

animation:float 4s ease-in-out infinite;

}

.step-number{

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

}

.rating-box h1{

animation:glow 3s infinite;

}

.status-dot{

animation:pulse 1.3s infinite;

}

/* =====================================================
   BUTTON SHINE
===================================================== */

.generate-btn,
.btn-primary,
.cta-button{

position:relative;

overflow:hidden;

}

.generate-btn::before,
.btn-primary::before,
.cta-button::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80px;

height:100%;

background:linear-gradient(

90deg,

transparent,

rgba(255,255,255,.5),

transparent

);

transform:skewX(-25deg);

}

.generate-btn:hover::before,
.btn-primary:hover::before,
.cta-button:hover::before{

animation:shine .8s;

}

/* =====================================================
   HOVER SCALE
===================================================== */

.feature-card:hover,

.step-card:hover,

.sidebar-card:hover,

.hero-stats div:hover{

transform:translateY(-10px) scale(1.02);

}

/* =====================================================
   TERMINAL
===================================================== */

.terminal-box{

animation:glow 6s infinite;

}

.terminal-body p{

animation:fadeUp .5s ease forwards;

}

/* =====================================================
   SCROLLBAR
===================================================== */

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#081018;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(

180deg,

#4F8BFF,

#7B5CFF

);

border-radius:100px;

}

::-webkit-scrollbar-thumb:hover{

background:#6FAEFF;

}

/* =====================================================
   SELECTION
===================================================== */

::selection{

background:#4F8BFF;

color:white;

}

/* =====================================================
   INPUT FOCUS
===================================================== */

input:focus{

outline:none;

}

/* =====================================================
   TERMINAL CURSOR
===================================================== */

.success::after{

content:"_";

margin-left:3px;

animation:blink .8s infinite;

}

@keyframes blink{

50%{

opacity:0;

}

}

/* =====================================================
   PAGE LOAD
===================================================== */

body{

animation:fadeUp .6s;

}
.toast-message{

position:fixed;

right:30px;

bottom:30px;

background:#15263D;

padding:18px 26px;

border-radius:18px;

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

display:flex;

align-items:center;

gap:12px;

color:white;

font-weight:700;

opacity:0;

transform:translateY(30px);

transition:.35s;

z-index:99999;

box-shadow:0 20px 60px rgba(0,0,0,.35);

}

.toast-message i{

color:#23D18B;

}

.toast-message.show{

opacity:1;

transform:translateY(0);

}

.terminal-body p{

opacity:0;

transform:translateX(-15px);

transition:.35s;

}
.activity-item{

animation:slideActivity .45s ease;

}

@keyframes slideActivity{

0%{

opacity:0;

transform:translateY(25px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.activity-avatar{

box-shadow:0 0 25px rgba(79,139,255,.35);

}

.activity-user{

font-weight:700;

}

.activity-bottom{

margin-top:4px;

}
.toast-message{

position:fixed;

right:30px;

bottom:30px;

display:flex;

align-items:center;

gap:12px;

padding:18px 24px;

background:#15263D;

border-radius:18px;

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

box-shadow:0 20px 60px rgba(0,0,0,.35);

opacity:0;

transform:translateY(30px);

transition:.35s;

z-index:999999;

}

.toast-message.show{

opacity:1;

transform:translateY(0);

}

.toast-message i{

color:#23D18B;

font-size:22px;

}

.toast-message span{

font-weight:700;

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

faqItems.forEach(item=>{

const question=item.querySelector(".faq-question");

if(!question) return;

question.addEventListener("click",()=>{

faqItems.forEach(x=>{

if(x!==item){

x.classList.remove("active");

}

});

item.classList.toggle("active");

});

});

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

window.addEventListener("scroll",()=>{

if(!navbar) return;

if(window.scrollY>40){

navbar.classList.add("navbar-scrolled");

}else{

navbar.classList.remove("navbar-scrolled");

}

});

/*=====================================================
    SCROLL REVEAL
=====================================================*/

const revealElements=document.querySelectorAll(

".feature-card,.step-card,.sidebar-card,.faq-item,.generator-card"

);

const revealObserver=new IntersectionObserver(entries=>{

entries.forEach(entry=>{

if(entry.isIntersecting){

entry.target.classList.add("visible");

}

});

},{

threshold:.15

});

revealElements.forEach(el=>{

revealObserver.observe(el);

});

/*=====================================================
    3D CARD EFFECT
=====================================================*/

document.querySelectorAll(

".feature-card,.generator-card,.sidebar-card"

).forEach(card=>{

card.addEventListener("mousemove",e=>{

const rect=card.getBoundingClientRect();

const x=e.clientX-rect.left;

const y=e.clientY-rect.top;

const rotateX=((y/rect.height)-0.5)*-10;

const rotateY=((x/rect.width)-0.5)*10;

card.style.transform=

`perspective(1000px)
 rotateX(${rotateX}deg)
 rotateY(${rotateY}deg)
 translateY(-8px)`;

});

card.addEventListener("mouseleave",()=>{

card.style.transform=

"perspective(1000px) rotateX(0deg) rotateY(0deg)";

});

});

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

document.querySelectorAll(".hero-stats h2").forEach(counter=>{

const text=counter.innerText;

const value=parseInt(text.replace(/\D/g,""));

const suffix=text.replace(/[0-9]/g,"");

let current=0;

const speed=Math.max(1,Math.floor(value/100));

const observer=new IntersectionObserver(entries=>{

entries.forEach(entry=>{

if(entry.isIntersecting){

const timer=setInterval(()=>{

current+=speed;

if(current>=value){

current=value;

clearInterval(timer);

}

counter.innerHTML=current.toLocaleString()+suffix;

},20);

observer.disconnect();

}

});

});

observer.observe(counter);

});

/*=====================================================
    RANDOM LATENCY
=====================================================*/

const latency=document.querySelectorAll(".status-item strong");

if(latency.length>2){

setInterval(()=>{

latency[2].innerHTML=random(12,28)+" ms";

},2500);

}

/*=====================================================
    END
=====================================================*/

});
/*==========================
SUCCESS POPUP
==========================*/

.success-popup{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

background:rgba(0,0,0,.65);

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

z-index:999999;

animation:fadePopup .3s ease;

}

.success-box{

width:420px;
max-width:90%;

background:#132238;

border-radius:24px;

padding:40px;

text-align:center;

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

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

animation:popupScale .35s ease;

}

.success-icon{

width:90px;
height:90px;

margin:auto;
margin-bottom:25px;

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

border-radius:50%;

background:#23D18B;

font-size:40px;

color:white;

box-shadow:0 0 35px rgba(35,209,139,.45);

}

.success-box h2{

font-size:32px;

margin-bottom:15px;

}

.success-box p{

color:#9DB2C8;

margin-bottom:30px;

}

.success-box button{

width:100%;

height:58px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:18px;

font-weight:700;

color:white;

background:linear-gradient(90deg,#4F8BFF,#7B5CFF);

transition:.3s;

}

.success-box button:hover{

transform:translateY(-3px);

}

@keyframes popupScale{

from{

transform:scale(.85);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

@keyframes fadePopup{

from{

opacity:0;

}

to{

opacity:1;

}

}
/*==========================
 LOADER CIRCLE
==========================*/

.loader-circle{

position:relative;

width:120px;
height:120px;

margin:0 auto 30px;

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

}

.loader-svg{

position:absolute;

width:120px;
height:120px;

transform:rotate(-90deg);

overflow:visible;

}

.circle-bg{

fill:none;

stroke:rgba(255,0,0,.15);

stroke-width:8;

}

.circle-progress{

fill:none;

stroke:#ff2b2b;

stroke-width:8;

stroke-linecap:round;

stroke-dasharray:314;

stroke-dashoffset:314;

filter:drop-shadow(0 0 12px rgba(255,43,43,.8));

animation:circleLoad 1.4s ease forwards;

}

.loader-x{

position:absolute;

width:120px;
height:120px;

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

font-size:55px;

font-weight:900;

color:#ff2b2b;

text-shadow:
0 0 12px rgba(255,43,43,.8),
0 0 30px rgba(255,43,43,.5);

opacity:0;

transform:scale(.3);

animation:showX .35s ease forwards;

animation-delay:1.4s;

}

@keyframes circleLoad{

0%{

stroke-dashoffset:314;

}

100%{

stroke-dashoffset:0;

}

}

@keyframes showX{

0%{

opacity:0;

transform:scale(.3);

}

70%{

opacity:1;

transform:scale(1.15);

}

100%{

opacity:1;

transform:scale(1);

}

}

@keyframes showX{

from{

opacity:0;
transform:scale(.5);

}

to{

opacity:1;
transform:scale(1);

}

}