/* =======================================================
   ANCHOR WEBSITE
   Version 2.0
   Developed by Velix Studios
   ======================================================= */

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

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    background:#05070d;

    color:#ffffff;

    font-family:
    Inter,
    sans-serif;

    overflow-x:hidden;

}

/* =======================================================
   ROOT
   ======================================================= */

:root{

    --bg:#05070d;

    --bg2:#0b1220;

    --card:rgba(255,255,255,.05);

    --card-hover:rgba(255,255,255,.07);

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

    --text:#ffffff;

    --text2:#b8c4d9;

    --blue:#2563eb;

    --blue-light:#4c8dff;

    --blue-soft:#71a9ff;

    --success:#4ade80;

    --danger:#ef4444;

    --radius:24px;

    --transition:.35s ease;

}

/* =======================================================
   GENERAL
   ======================================================= */

body{

    background:var(--bg);

    color:var(--text);

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

button{

    font:inherit;

}

section{

    position:relative;

}

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

.background{

    position:fixed;

    inset:0;

    background:

    radial-gradient(
        circle at top,
        rgba(37,99,235,.18),
        transparent 45%
    ),

    radial-gradient(
        circle at bottom,
        rgba(0,132,255,.12),
        transparent 40%
    ),

    var(--bg);

    z-index:-20;

}

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

.grid{

    position:fixed;

    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:48px 48px;

    z-index:-19;

}

/* =======================================================
   BLOBS
   ======================================================= */

.blob{

    position:fixed;

    border-radius:50%;

    filter:blur(140px);

    opacity:.24;

    pointer-events:none;

    animation:blobFloat 18s ease-in-out infinite;

    z-index:-18;

}

.blob1{

    width:720px;

    height:720px;

    background:#2563eb;

    left:-260px;

    top:-260px;

}

.blob2{

    width:640px;

    height:640px;

    background:#0084ff;

    right:-220px;

    bottom:-240px;

    animation-delay:6s;

}

.blob3{

    width:520px;

    height:520px;

    background:#4c8dff;

    left:42%;

    top:38%;

    animation-delay:12s;

}

@keyframes blobFloat{

    0%{

        transform:translate(0,0);

    }

    25%{

        transform:translate(90px,-70px);

    }

    50%{

        transform:translate(-70px,80px);

    }

    75%{

        transform:translate(80px,60px);

    }

    100%{

        transform:translate(0,0);

    }

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:var(--bg);

}

::-webkit-scrollbar-thumb{

    background:var(--blue);

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--blue-light);

}

/* =======================================================
   HEADER
   ======================================================= */

header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 7%;

    background:rgba(5,7,13,.55);

    backdrop-filter:blur(24px);

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

    z-index:9999;

    transition:.35s;

}

header.scrolled{

    height:74px;

    background:rgba(5,7,13,.82);

    box-shadow:

        0 10px 40px rgba(0,0,0,.35);

}

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

.logo{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    color:white;

    transition:.3s;

}

.logo img{

    width:48px;

    transition:.35s;

}

.logo span{

    font-size:24px;

    font-weight:800;

    letter-spacing:1px;

}

.logo:hover{

    transform:translateY(-2px);

}

.logo:hover img{

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

    filter:

        drop-shadow(0 0 18px #4c8dff);

}

/* =======================================================
   NAVIGATION
   ======================================================= */

nav{

    display:flex;

    align-items:center;

    gap:36px;

}

nav a{

    position:relative;

    color:var(--text2);

    font-weight:600;

    transition:.3s;

}

nav a:hover{

    color:white;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    border-radius:999px;

    background:var(--blue-light);

    transition:.3s;

}

nav a:hover::after{

    width:100%;

}

/* =======================================================
   HEADER ACTIONS
   ======================================================= */

.headerActions{

    display:flex;

    align-items:center;

    gap:14px;

}

/* =======================================================
   LOGIN BUTTON
   ======================================================= */

#loginButton{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 22px;

    border-radius:999px;

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

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

    color:white;

    cursor:pointer;

    transition:.3s;

    font-weight:700;

}

#loginButton svg{

    width:18px;

    height:18px;

}

#loginButton:hover{

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

    border-color:#4c8dff;

    transform:translateY(-2px);

    box-shadow:

        0 0 30px rgba(76,141,255,.25);

}

/* =======================================================
   MOBILE BUTTON
   ======================================================= */

.menuButton{

    display:none;

    width:54px;

    height:54px;

    border:none;

    border-radius:16px;

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

    color:white;

    cursor:pointer;

    transition:.3s;

}

.menuButton:hover{

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

}

/* =======================================================
   MOBILE NAV
   ======================================================= */

.mobileNav{

    position:fixed;

    top:82px;

    left:0;

    width:100%;

    display:none;

    flex-direction:column;

    gap:20px;

    padding:30px;

    background:rgba(5,7,13,.98);

    backdrop-filter:blur(30px);

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

    z-index:9998;

}

.mobileNav.active{

    display:flex;

}

.mobileNav a{

    color:white;

    font-size:18px;

}

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

.hero{

    min-height:100vh;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:90px;

    padding:150px 7% 120px;

    position:relative;

}

.heroLeft{

    position:relative;

    z-index:2;

}

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

.heroTop{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 18px;

    border-radius:999px;

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

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

    color:var(--blue-soft);

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.heroTop svg{

    width:16px;

    height:16px;

}

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

.hero h1{

    font-size:74px;

    line-height:1.02;

    margin-bottom:28px;

    font-weight:900;

}

.hero h1 span{

    color:var(--blue-light);

    text-shadow:

        0 0 35px rgba(76,141,255,.35);

}

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

.hero p{

    color:var(--text2);

    font-size:20px;

    line-height:1.9;

    max-width:680px;

}

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

.heroButtons{

    display:flex;

    gap:18px;

    margin-top:45px;

}

.heroButtons a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-width:185px;

    height:58px;

    border-radius:999px;

    font-weight:700;

    transition:.35s;

}

.primary{

    background:

        linear-gradient(

            135deg,

            #2563eb,

            #60a5fa

        );

    color:white;

    box-shadow:

        0 20px 50px rgba(37,99,235,.30);

}

.primary:hover{

    transform:

        translateY(-5px)

        scale(1.03);

    box-shadow:

        0 25px 70px rgba(37,99,235,.55);

}

.secondary{

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

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

    color:white;

}

.secondary:hover{

    border-color:var(--blue-light);

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

    transform:translateY(-5px);

}

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

.heroStats{

    display:flex;

    gap:60px;

    margin-top:60px;

}

.heroStat{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.heroStat h2{

    font-size:40px;

    color:var(--blue-soft);

}

.heroStat span{

    color:var(--text2);

    font-size:15px;

}

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

.heroRight{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

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

.hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    right:-150px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(76,141,255,.10),

            transparent 70%

        );

    filter:blur(80px);

    pointer-events:none;

}

/* ===================================================== */
/* GLASS CARD */
/* ===================================================== */

.glassCard{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:28px;

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

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

    backdrop-filter:blur(30px);

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

}

.glassCard::before{

    content:"";

    position:absolute;

    inset:-2px;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.18),
        transparent 35%,
        transparent 65%,
        rgba(76,141,255,.20)
    );

    opacity:.6;

    pointer-events:none;

}

.glassCard h3{

    font-size:30px;

    margin-bottom:25px;

}

.glassCard p{

    padding:15px 0;

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

}

/* ===================================================== */
/* SECTION TITLE */
/* ===================================================== */

.sectionTitle{

    text-align:center;

    margin-bottom:80px;

}

.sectionTitle span{

    color:var(--blue2);

    letter-spacing:2px;

    font-weight:700;

}

.sectionTitle h2{

    margin-top:15px;

    font-size:54px;

}

.sectionTitle p{

    margin:25px auto 0;

    color:var(--text2);

    max-width:700px;

    line-height:1.8;

}

/* ===================================================== */
/* SERVICES */
/* ===================================================== */

#services{

    padding:150px 8%;

}

.servicesGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));

    gap:35px;

}

.serviceCard{

    position:relative;

    overflow:hidden;

    padding:40px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.serviceCard::before{

    content:"";

    position:absolute;

    inset:-150%;

    background:
        radial-gradient(circle,#4c8dff55 0%,transparent 60%);

    opacity:0;

    transition:.45s;

}

.serviceCard:hover::before{

    opacity:1;

}

.serviceCard:hover{

    transform:translateY(-12px);

    border-color:#4c8dff;

    box-shadow:
        0 20px 60px rgba(37,99,235,.25);

}

.serviceIcon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(76,141,255,.12);

    margin-bottom:25px;

}

.serviceIcon svg{

    width:34px;

    height:34px;

    color:#6ba8ff;

    transition:.4s;

}

.serviceCard:hover .serviceIcon svg{

    transform:scale(1.2) rotate(8deg);

}

.serviceCard h3{

    font-size:28px;

    margin-bottom:18px;

}

.serviceCard p{

    color:var(--text2);

    line-height:1.8;

}

/* ===================================================== */
/* PORTFOLIO */
/* ===================================================== */

#portfolio{

    padding:160px 8%;

}

.portfolioGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

    gap:35px;

}

.projectCard{

    position:relative;

    overflow:hidden;

    border-radius:28px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s;

}

.projectCard:hover{

    transform:translateY(-12px);

    border-color:var(--blue);

    box-shadow:0 30px 80px rgba(37,99,235,.25);

}

.projectCard img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.6s;

}

.projectCard:hover img{

    transform:scale(1.08);

}

.projectContent{

    padding:30px;

}

.projectContent span{

    color:var(--blue2);

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

.projectContent h3{

    margin:15px 0;

    font-size:30px;

}

.projectContent p{

    color:var(--text2);

    line-height:1.8;

}

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

#about{

    padding:160px 8%;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

.aboutLeft span{

    color:var(--blue2);

    font-weight:700;

    letter-spacing:2px;

}

.aboutLeft h2{

    font-size:54px;

    margin:20px 0;

    line-height:1.15;

}

.aboutLeft p{

    color:var(--text2);

    line-height:1.9;

    margin-bottom:20px;

}

.aboutRight{

    display:grid;

    gap:30px;

}

.aboutCard{

    padding:35px;

    border-radius:24px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

}

.aboutCard:hover{

    transform:translateY(-8px);

    border-color:var(--blue);

}

.aboutCard h3{

    margin-bottom:15px;

    font-size:26px;

}

.aboutCard p{

    color:var(--text2);

    line-height:1.8;

}

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

#features{

    padding:150px 8%;

}

.featureGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

.feature{

    padding:35px;

    border-radius:22px;

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

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

    transition:.35s;

}

.feature:hover{

    transform:translateY(-8px);

    border-color:var(--blue);

    box-shadow:0 20px 60px rgba(37,99,235,.2);

}

.feature h3{

    margin-bottom:18px;

    font-size:24px;

}

.feature p{

    color:var(--text2);

    line-height:1.8;

}

/* ===================================================== */
/* TIMELINE */
/* ===================================================== */

#timeline{

    padding:160px 8%;

}

.timeline{

    display:grid;

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

    gap:35px;

}

.timelineItem{

    position:relative;

    padding:45px;

    border-radius:28px;

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

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

}

.timelineItem span{

    display:inline-flex;

    width:54px;

    height:54px;

    border-radius:50%;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    font-weight:700;

    margin-bottom:25px;

}

.timelineItem h3{

    font-size:28px;

    margin-bottom:15px;

}

.timelineItem p{

    color:var(--text2);

    line-height:1.8;

}

/* ===================================================== */
/* TECH STACK */
/* ===================================================== */

#stack{

    padding:150px 8%;

}

.stackGrid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

    gap:20px;

}

.stackGrid div{

    padding:22px;

    text-align:center;

    border-radius:18px;

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

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

    transition:.3s;

    font-weight:600;

}

.stackGrid div:hover{

    transform:translateY(-6px);

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

    border-color:var(--blue);

}

/* ===================================================== */
/* CONTACT */
/* ===================================================== */

#contact{

    padding:170px 8%;

}

.contactWrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:45px;

    align-items:start;

}

.contactLeft{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.contactMethod{

    padding:35px;

    border-radius:26px;

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

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

    backdrop-filter:blur(18px);

    transition:.35s;

    cursor:pointer;

}

.contactMethod:hover{

    transform:translateY(-8px);

    border-color:var(--blue);

}

.contactMethod.active{

    border:2px solid var(--blue);

    box-shadow:0 20px 60px rgba(37,99,235,.25);

}

.contactMethod svg{

    width:42px;

    height:42px;

    color:var(--blue2);

    margin-bottom:20px;

}

.contactMethod h3{

    font-size:28px;

    margin-bottom:15px;

}

.contactMethod p{

    color:var(--text2);

    line-height:1.8;

    margin-bottom:25px;

}

.contactMethod button{

    width:100%;

    background:none;

    border:none;

    color:white;

    font-weight:700;

}

.contactRight{

    padding:45px;

    border-radius:28px;

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

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

    backdrop-filter:blur(22px);

}

#emailForm{

    display:none;

    flex-direction:column;

    gap:24px;

}

#discordPanel{

    display:block;

}

.inputGroup{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.inputGroup label{

    font-weight:600;

}

.inputGroup input,
.inputGroup select,
.inputGroup textarea{

    width:100%;

    padding:16px 18px;

    border-radius:16px;

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

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

    color:white;

    font-size:15px;

    transition:.25s;

}

.inputGroup textarea{

    resize:vertical;

    min-height:180px;

}

.inputGroup input:focus,
.inputGroup select:focus,
.inputGroup textarea:focus{

    outline:none;

    border-color:var(--blue);

    box-shadow:0 0 0 4px rgba(76,141,255,.12);

}

#oauthButton,
#emailForm button{

    padding:18px;

    border:none;

    border-radius:18px;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.3s;

}

#oauthButton:hover,
#emailForm button:hover{

    transform:translateY(-4px);

}

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

#faq{

    padding:150px 8%;

}

.faqWrapper{

    max-width:950px;

    margin:auto;

}

.faqItem{

    margin-bottom:18px;

    border-radius:18px;

    overflow:hidden;

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

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

}

.faqItem button{

    width:100%;

    background:none;

    border:none;

    color:white;

    cursor:pointer;

    padding:24px 30px;

    text-align:left;

    font-size:18px;

    font-weight:600;

}

.faqItem div{

    display:none;

    padding:0 30px 25px;

    color:var(--text2);

    line-height:1.8;

}

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

#cta{

    padding:160px 8%;

    text-align:center;

}

#cta h2{

    font-size:60px;

    margin-bottom:20px;

}

#cta p{

    color:var(--text2);

    max-width:700px;

    margin:0 auto 40px;

    line-height:1.8;

}

#cta a{

    display:inline-block;

    padding:20px 42px;

    border-radius:999px;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:white;

    text-decoration:none;

    font-weight:700;

    transition:.35s;

}

#cta a:hover{

    transform:translateY(-5px);

}

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

footer{

    margin-top:180px;

    padding:80px 8% 35px;

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

    background:linear-gradient(
        180deg,
        rgba(255,255,255,.015),
        rgba(255,255,255,.03)
    );

}

.footerTop{

    display:grid;

    grid-template-columns:1.3fr 2fr;

    gap:90px;

    align-items:flex-start;

}

.footerBrand img{

    width:72px;

    margin-bottom:22px;

    transition:.35s;

    cursor:pointer;
}

.footerBrand img:hover{

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

    filter:

        drop-shadow(0 0 18px rgba(90,150,255,.45));

}

.footerBrand h2{

    font-size:34px;

    margin-bottom:18px;

}

.footerBrand p{

    color:var(--text2);

    line-height:1.8;

    max-width:420px;

    margin-bottom:30px;

}

.footerDiscord{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:14px 26px;

    border-radius:14px;

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

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

    transition:.35s;

}

.footerDiscord:hover{

    background:rgba(79,140,255,.12);

    border-color:#4f8cff;

    transform:translateY(-4px);

}

.footerLinks{

    display:grid;

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

    gap:60px;

}

.footerColumn{

    display:flex;

    flex-direction:column;

}

.footerColumn h3{

    margin-bottom:22px;

    font-size:18px;

}

.footerColumn a{

    color:var(--text2);

    margin-bottom:15px;

    transition:.3s;

}

.footerColumn a:hover{

    color:white;

    padding-left:8px;

}

.footerColumn span{

    margin-left:8px;

    padding:3px 8px;

    border-radius:999px;

    font-size:11px;

    background:rgba(79,140,255,.12);

    color:#82b5ff;

}

.footerBottom{

    margin-top:70px;

    padding-top:28px;

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

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footerBottom span{

    color:var(--text2);

}

.footerBottomLinks{

    display:flex;

    gap:26px;

}

.footerBottomLinks a{

    color:var(--text2);

    transition:.3s;

}

.footerBottomLinks a:hover{

    color:white;

}

/* ===================================================== */
/* SCROLL TO TOP */
/* ===================================================== */

#scrollTop{

    position:fixed;

    bottom:30px;

    right:30px;

    width:56px;

    height:56px;

    border:none;

    border-radius:50%;

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:white;

    font-size:20px;

    cursor:pointer;

    display:none;

    box-shadow:0 15px 40px rgba(37,99,235,.35);

    transition:.3s;

}

#scrollTop:hover{

    transform:translateY(-5px) scale(1.05);

}

/* ===================================================== */
/* LOADER */
/* ===================================================== */

#loader{

    position:fixed;

    inset:0;

    background:#05070d;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999999;

    transition:.8s;

}

.loader-logo{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

}

.loader-logo img{

    width:420px;

    display:block;

    filter:drop-shadow(0 0 45px rgba(76,141,255,.35));

    will-change:transform;

}

.loader-logo h1{

    margin-top:28px;

    font-size:58px;

    font-weight:800;

    letter-spacing:2px;

    text-align:center;

}

.loader-logo span{

    font-size:20px;

    color:var(--text2);

    margin-top:12px;

    letter-spacing:.5px;

}

.loader-hidden{

    opacity:0;

    visibility:hidden;

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#05070d;

}

::-webkit-scrollbar-thumb{

    background:#2563eb;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#4c8dff;

}

/* ===================================================== */
/* SCROLL PROGRESS BAR */
/* ===================================================== */

#progressBar{

    position:fixed;

    top:0;

    left:0;

    height:3px;

    width:0%;

    background:linear-gradient(90deg,#2563eb,#60a5fa);

    z-index:9999999;

}

/* ===================================================== */
/* REVEAL ANIMATION */
/* ===================================================== */

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.reveal.show{

    opacity:1;

    transform:translateY(0);

}

/* ===================================================== */
/* HOVER GLOW */
/* ===================================================== */

.glow{

    position:relative;

}

.glow::after{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    opacity:0;

    transition:.4s;

    background:

    radial-gradient(

        circle,

        rgba(76,141,255,.35),

        transparent 70%

    );

}

.glow:hover::after{

    opacity:1;

}

/* ===================================================== */
/* FLOATING ANIMATION */
/* ===================================================== */

.float{

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

}

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

    100%{

        transform:translateY(0);

    }

}

/* ===================================================== */
/* FADE IN */
/* ===================================================== */

.fadeIn{

    animation:fadeIn 1.2s forwards;

}

@keyframes fadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

/* ===================================================== */
/* SCALE IN */
/* ===================================================== */

.scaleIn{

    animation:scaleIn .8s forwards;

}

@keyframes scaleIn{

    from{

        opacity:0;

        transform:scale(.85);

    }

    to{

        opacity:1;

        transform:scale(1);

    }

}

/* ===================================================== */
/* BUTTON RIPPLE EFFECT */
/* ===================================================== */

.ripple{

    overflow:hidden;

    position:relative;

}

.ripple span{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

    animation:ripple .6s linear;

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

}

@keyframes ripple{

    to{

        transform:scale(4);

        opacity:0;

    }

}

/* ===================================================== */
/* UTILITIES */
/* ===================================================== */

.hidden{

    display:none !important;

}

.center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.text-center{

    text-align:center;

}

.mt-50{

    margin-top:50px;

}

.mb-50{

    margin-bottom:50px;

}

/* ===================================================== */
/* MOBILE NAVIGATION */
/* ===================================================== */

.menuButton{

    display:none;

    width:52px;

    height:52px;

    border-radius:16px;

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

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

    backdrop-filter:blur(18px);

    cursor:pointer;

    transition:.3s;

}

.menuButton:hover{

    border-color:var(--blue);

}

.mobileNav{

    position:fixed;

    top:82px;

    left:0;

    width:100%;

    background:rgba(5,7,13,.98);

    backdrop-filter:blur(30px);

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

    padding:30px;

    display:none;

    flex-direction:column;

    gap:20px;

    z-index:9998;

}

.mobileNav.active{

    display:flex;

    animation:mobileMenu .35s ease;

}

.mobileNav a{

    color:white;

    text-decoration:none;

    font-size:18px;

    padding:14px 0;

}

@keyframes mobileMenu{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:1400px){

.hero{

    gap:50px;

}

.hero h1{

    font-size:60px;

}

.sectionTitle h2{

    font-size:48px;

}

}

@media(max-width:1200px){

.hero{

        grid-template-columns:1fr;
        gap:80px;

        text-align:center;

    }

    .heroLeft{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .heroButtons{

        justify-content:center;

    }

    .heroStats{

        justify-content:center;

    }

    #stormNetwork{

        width:700px;

        height:700px;

    }

.contactWrapper{

    grid-template-columns:1fr;

}

#about{

    grid-template-columns:1fr;

}

.timeline{

    grid-template-columns:1fr;

}

footer{

    grid-template-columns:1fr;

    text-align:center;

}

.footerLinks{

    align-items:center;

}

.footerSupport{

    align-items:center;

}

}

@media(max-width:992px){

nav{

    display:none;

}

.contactButton{

    display:none;

}

.menuButton{

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero h1{

    font-size:52px;

}

.sectionTitle h2{

    font-size:42px;

}

.servicesGrid{

    grid-template-columns:1fr;

}

.portfolioGrid{

    grid-template-columns:1fr;

}

.featureGrid{

    grid-template-columns:1fr;

}

.stackGrid{

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

}

#stormNetwork{

        width:560px;

        height:560px;

    }

    .networkNode{

        width:170px;

        min-height:120px;

        padding:18px;

    }

    .networkNode h3{

        font-size:20px;

    }

    .networkNode p{

        font-size:15px;

    }

    #stormCore{

        width:150px;

        height:150px;

    }

    #stormCore img{

        width:65px;

    }

    #stormCore h2{

    margin:10px 0 8px;

    font-size:20px;

    line-height:1.05;

    font-weight:800;

    text-align:center;

}

    #stormCore span{

    width:100px;

    font-size:12px;

    line-height:1.35;

    text-align:center;

    color:#b8c4d9;

}

}

@media(max-width:768px){

header{

    padding:0 25px;

}

.hero{

    padding:140px 25px 100px;

}

#services,
#portfolio,
#about,
#features,
#timeline,
#stack,
#contact,
#faq,
#cta{

    padding:110px 25px;

}

.hero h1{

    font-size:42px;

}

.hero p{

    font-size:17px;

}

.heroButtons{

    flex-direction:column;

    width:100%;

}

.heroButtons a{

    width:100%;

    text-align:center;

}

.heroStats{

    flex-direction:column;

    gap:25px;

}

.sectionTitle h2{

    font-size:36px;

}

.contactRight{

    padding:25px;

}

.glassCard{

    padding:30px;

}

}

@media(max-width:576px){

.logo span{

    display:none;

}

.hero h1{

    font-size:34px;

}

.heroTop{

    font-size:12px;

}

.sectionTitle h2{

    font-size:30px;

}

.projectCard img{

    height:190px;

}

.stackGrid{

    grid-template-columns:1fr;

}

.timelineItem{

    padding:30px;

}

.aboutCard{

    padding:28px;

}

.feature{

    padding:28px;

}

.serviceCard{

    padding:28px;

}

.contactMethod{

    padding:28px;

}

#scrollTop{

    width:50px;

    height:50px;

}

.hero{

        padding-top:120px;

    }

    h1{

        font-size:54px;

        line-height:1;

    }

    #stormNetwork{

        width:420px;

        height:420px;

    }

    .networkNode{

        width:140px;

        min-height:100px;

        padding:15px;

        border-radius:18px;

    }

    .nodeIcon{

        width:46px;

        height:46px;

        margin-bottom:12px;

    }

    .nodeIcon svg{

        width:22px;

        height:22px;

    }

    .networkNode h3{

        font-size:17px;

    }

    .networkNode p{

        font-size:13px;

        line-height:1.5;

    }

    #stormCore{

        width:120px;

        height:120px;

    }

    #stormCore img{

        width:50px;

    }

    #stormCore h2{

        font-size:15px;

    }

    #stormCore span{

        display:none;

    }

}

/* ===================================================== */
/* REDUCED MOTION */
/* ===================================================== */

@media (prefers-reduced-motion: reduce){

*{

    animation:none !important;

    transition:none !important;

    scroll-behavior:auto !important;

}

}

/* ===================================================== */
/* TOAST NOTIFICATIONS */
/* ===================================================== */

#toastContainer{

    position:fixed;

    top:100px;

    right:30px;

    display:flex;

    flex-direction:column;

    gap:15px;

    z-index:999999;

}

.toast{

    min-width:340px;

    padding:18px 22px;

    border-radius:18px;

    background:rgba(12,16,28,.92);

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

    backdrop-filter:blur(18px);

    display:flex;

    align-items:center;

    gap:15px;

    animation:toastIn .35s ease;

}

.toast.success{

    border-left:4px solid #4ade80;

}

.toast.error{

    border-left:4px solid #ef4444;

}

.toast.info{

    border-left:4px solid #60a5fa;

}

.toast svg{

    width:22px;

    height:22px;

}

.toastTitle{

    font-weight:700;

    margin-bottom:4px;

}

.toastText{

    color:var(--text2);

    font-size:14px;

}

@keyframes toastIn{

    from{

        opacity:0;

        transform:translateX(40px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/* ===================================================== */
/* MODAL */
/* ===================================================== */

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    z-index:999999;

}

.modal.active{

    display:flex;

}

.modalContent{

    width:min(700px,90vw);

    max-height:80vh;

    overflow:auto;

    padding:40px;

    border-radius:28px;

    background:#0b1220;

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

}

.modalContent h2{

    margin-bottom:20px;

}

.modalContent p{

    color:var(--text2);

    line-height:1.8;

}

/* ===================================================== */
/* COOKIE BANNER */
/* ===================================================== */

.cookieBanner{

    position:fixed;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    width:min(950px,95vw);

    padding:22px 30px;

    border-radius:22px;

    background:rgba(12,16,28,.95);

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

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    z-index:999998;

}

.cookieBanner p{

    color:var(--text2);

    line-height:1.7;

}

.cookieButtons{

    display:flex;

    gap:15px;

}

.cookieButtons button{

    padding:14px 22px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:600;

}

.cookieAccept{

    background:linear-gradient(135deg,#2563eb,#60a5fa);

    color:white;

}

.cookieDecline{

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

    color:white;

}

/* ===================================================== */
/* DISCORD USER CARD */
/* ===================================================== */

.discordUser{

    display:flex;

    align-items:center;

    gap:20px;

    padding:25px;

    margin-bottom:30px;

    border-radius:20px;

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

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

}

.discordAvatar{

    width:72px;

    height:72px;

    border-radius:50%;

    object-fit:cover;

}

.discordInfo h3{

    margin-bottom:8px;

}

.discordInfo span{

    color:var(--text2);

}

.statusBadge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:10px;

    padding:8px 14px;

    border-radius:999px;

    background:rgba(34,197,94,.15);

    color:#4ade80;

    font-size:13px;

    font-weight:700;

}

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

.supportCard{

    margin-top:30px;

    padding:25px;

    border-radius:20px;

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

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

}

.supportCard h4{

    margin-bottom:18px;

}

.supportRow{

    display:flex;

    justify-content:space-between;

    padding:12px 0;

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

}

.supportRow:last-child{

    border:none;

}

/* ===================================================== */
/* SMALL ANIMATIONS */
/* ===================================================== */

.rotate{

    animation:rotate 16s linear infinite;

}

@keyframes rotate{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

.pulse{

    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(76,141,255,.45);

    }

    70%{

        box-shadow:0 0 0 20px transparent;

    }

    100%{

        box-shadow:0 0 0 0 transparent;

    }

}

.blurBackground{

    backdrop-filter:blur(25px);

}

.glass{

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

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

}

/* =======================================================
   STORM NETWORK V4
======================================================= */

#stormNetwork{

    position:relative;

    width:920px;
    height:920px;

    margin:auto;

}

/* ========================= */

#networkSVG{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:visible;

    pointer-events:none;

    z-index:2;

}

/* ========================= */

#stormCore{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    width:185px;
    height:185px;

    border-radius:50%;

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

    text-align:center;

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

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

    backdrop-filter:blur(22px);

    z-index:30;

    transition:.3s;

}

#stormCore:hover{

    transform:translate(-50%,-50%) scale(1.03);

    box-shadow:

        0 0 55px rgba(76,141,255,.25);

}

#stormCore img{

    width:80px;

    margin-bottom:12px;

}

#stormCore h2{

    margin:10px 0 6px;

    font-size:18px;

    line-height:1.2;

    text-align:center;

}

#stormCore span{

    width:110px;

    text-align:center;

    line-height:1.35;

    color:#b8c4d9;

}

/* ========================= */

.networkNode{

    position:absolute;

    width:215px;

    min-height:145px;

    padding:24px;

    border-radius:22px;

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

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

    backdrop-filter:blur(18px);

    transition:

        box-shadow .3s,

        border-color .3s,

        transform .3s;

    z-index:5;

}

.networkNode:hover{

    transform:translate(-50%,-50%) translateY(-8px) scale(1.02);

    border-color:#4c8dff;

    box-shadow:

        0 0 35px rgba(76,141,255,.18),

        0 18px 40px rgba(0,0,0,.35);

}

.nodeIcon{

    width:56px;
    height:56px;

    border-radius:18px;

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

    margin-bottom:18px;

    background:rgba(76,141,255,.10);

}

.nodeIcon svg{

    width:30px;
    height:30px;

    color:#79aaff;

}

.networkNode h3{

    font-size:22px;

    margin-bottom:10px;

}

.networkNode p{

    color:#b8c4d9;

    line-height:1.7;

}

.comingSoon{

    display:inline-block;

    margin-top:14px;

    padding:8px 16px;

    border-radius:999px;

    background:rgba(76,141,255,.10);

    color:#79aaff;

    font-size:13px;

    font-weight:700;

}

/* ========================= */
/* PERFECT POSITIONS */
/* ========================= */

.networkNode{

    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

}

.networkLine{

    stroke:#2d65d8;

    stroke-width:2;

    stroke-linecap:round;

    fill:none;

    opacity:.45;

    stroke-dasharray:28 140;

    animation:networkFlow 3s linear infinite;

    filter:drop-shadow(0 0 8px rgba(70,130,255,.35));

}

.networkBase{

    stroke:#2c4f93;

    stroke-width:2;

    opacity:.55;

    fill:none;

    stroke-linecap:round;

}

.networkGlow{

    stroke:#6ea8ff;

    stroke-width:3;

    fill:none;

    stroke-linecap:round;

    stroke-dasharray:26 320;

    animation:networkGlowMove 3s linear infinite;

    filter:drop-shadow(0 0 8px rgba(110,168,255,.8));

}

@keyframes networkGlowMove{

    from{

        stroke-dashoffset:346;

    }

    to{

        stroke-dashoffset:0;

    }

}

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

@media(max-width:1100px){

    .footerTop{

        grid-template-columns:1fr;

        gap:60px;

    }

    .footerLinks{

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

    }

}

@media(max-width:800px){

    .footerLinks{

        grid-template-columns:1fr;

        gap:40px;

    }

    .footerBottom{

        flex-direction:column;

        gap:20px;

        text-align:center;

    }

    .footerBottomLinks{

        justify-content:center;

        flex-wrap:wrap;

    }

}

@media(max-width:600px){

    footer{

        padding:60px 30px;

    }

    .footerBrand{

        text-align:center;

    }

    .footerBrand img{

        margin:auto;

        margin-bottom:20px;

        transition:.35s;

        cursor:pointer;

    }

    .footerBrand img:hover{

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

    filter:

        drop-shadow(0 0 18px rgba(90,150,255,.45));

}

    .footerBrand p{

        margin:auto;

        margin-bottom:30px;

    }

    .footerDiscord{

        justify-content:center;

    }

    .footerColumn{

        text-align:center;

    }

}

/* ===================================================== */
/* LEGAL PAGES */
/* ===================================================== */

.legalHero{

    padding:180px 8% 80px;

    text-align:center;

}

.legalBadge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(79,140,255,.12);

    color:#7eb4ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:22px;

}

.legalHero h1{

    font-size:64px;

    margin-bottom:22px;

}

.legalHero p{

    max-width:760px;

    margin:auto;

    color:var(--text2);

    line-height:1.8;

}

.legalContainer{

    width:min(1200px,92%);

    margin:auto;

    padding-bottom:120px;

}

.legalGrid{

    display:grid;

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

    gap:30px;

    margin-bottom:70px;

}

.legalCard{

    padding:35px;

    border-radius:26px;

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

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

    backdrop-filter:blur(16px);

}

.legalIcon{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:18px;

    background:rgba(79,140,255,.12);

    margin-bottom:22px;

}

.legalSection{

    margin-bottom:35px;

    padding:35px;

    border-radius:24px;

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

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

}

.legalSection h2{

    margin-bottom:20px;

}

.legalSection p{

    color:var(--text2);

    line-height:1.9;

    margin-bottom:16px;

}

.legalLastUpdated{

    margin-top:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    color:var(--text2);

    opacity:.8;

}

/* ===================================================== */
/* COOKIE SYSTEM */
/* ===================================================== */

#cookieBanner{

    position:fixed;

    left:50%;

    bottom:30px;

    transform:translateX(-50%);

    width:min(560px,92vw);

    padding:24px;

    border-radius:24px;

    background:rgba(12,16,28,.92);

    backdrop-filter:blur(18px);

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

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

    z-index:99999;

    display:none;

}

#cookieBanner.active{

    display:block;

    animation:cookieIn .45s cubic-bezier(.2,.9,.2,1);

}

.cookieHeader{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.cookieIcon{

    width:58px;

    height:58px;

    border-radius:18px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(79,140,255,.12);

    font-size:28px;

    flex-shrink:0;

}

.cookieHeader h3{

    margin-bottom:8px;

}

.cookieHeader p{

    color:var(--text2);

    line-height:1.7;

}

.cookieActions{

    display:flex;

    justify-content:flex-end;

    gap:14px;

    margin-top:25px;

}

.cookieActions button{

    padding:13px 22px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

#cookieDecline{

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

    color:white;

}

#cookieAccept{

    background:#4f8cff;

    color:white;

}

.cookieActions button:hover{

    transform:translateY(-3px);

}

.cookieLinks{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:20px;

}

.cookieLinks a{

    color:var(--text2);

    font-size:14px;

    transition:.3s;

}

.cookieLinks a:hover{

    color:white;

}

#cookieSettings{

    position:fixed;

    right:30px;

    bottom:100px;

    width:58px;

    height:58px;

    border-radius:18px;

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

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

    backdrop-filter:blur(18px);

    font-size:26px;

    cursor:pointer;

    display:none;

    z-index:99998;

    transition:.3s;

}

#cookieSettings.show{

    display:flex;

    align-items:center;

    justify-content:center;

}

#cookieSettings:hover{

    transform:translateY(-4px) scale(1.06);

    background:rgba(79,140,255,.12);

}

#cookieModal{

    position:fixed;

    inset:0;

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

    display:none;

    align-items:center;

    justify-content:center;

    z-index:999999;

}

#cookieModal.show{

    display:flex;

}

.cookieModalCard{

    width:min(560px,92vw);

    padding:35px;

    border-radius:24px;

    background:#0d1322;

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

}

.cookieModalCard h2{

    margin-bottom:12px;

}

.cookieModalCard>p{

    color:var(--text2);

    margin-bottom:28px;

}

.cookieOption{

    display:flex;

    justify-content:space-between;

    gap:20px;

    padding:18px 0;

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

}

.cookieOption span{

    display:block;

    margin-top:6px;

    color:var(--text2);

    font-size:14px;

}

.cookieModalButtons{

    margin-top:30px;

    display:flex;

    justify-content:flex-end;

}

.cookieModalButtons button{

    padding:12px 22px;

    border:none;

    border-radius:14px;

    background:#4f8cff;

    color:white;

    cursor:pointer;

}

@keyframes cookieIn{

    from{

        opacity:0;

        transform:translate(-50%,40px);

    }

    to{

        opacity:1;

        transform:translate(-50%,0);

    }

}

@media(max-width:700px){

    #cookieBanner{

        bottom:20px;

        padding:20px;

    }

    .cookieHeader{

        flex-direction:column;

    }

    .cookieActions{

        flex-direction:column;

    }

    .cookieActions button{

        width:100%;

    }

}