/* =====================================================
   CYBERPUNK COMMAND CENTER
   GLOBAL STYLES
===================================================== */

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

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);

    background:var(--bg-color);

    color:var(--text-color);

    overflow-x:hidden;

    min-height:100vh;

    line-height:1.6;

    position:relative;

}

/* ==========================
   TYPOGRAPHY
========================== */

h1,
h2,
h3,
.logo{

    font-family:var(--font-title);

    letter-spacing:2px;

}

h1{

    font-size:var(--fs-hero);

    line-height:1.05;

    text-transform:uppercase;

}

h2{

    font-size:var(--fs-h2);

}

h3{

    font-size:var(--fs-h3);

}

p{

    color:var(--text-muted);

}

/* ==========================
   LINKS
========================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--cyan);

}

/* ==========================
   IMAGES
========================== */

img{

    max-width:100%;

    display:block;

}

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

button{

    cursor:pointer;

    border:none;

    outline:none;

    font-family:var(--font-title);

    font-size:1rem;

    letter-spacing:1px;

    transition:var(--transition);

}

/* Primary */

.primary{

    background:transparent;

    color:var(--cyan);

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

    padding:14px 36px;

    border-radius:var(--radius-sm);

    box-shadow:var(--glow-cyan);

}

.primary:hover{

    background:var(--cyan);

    color:#000;

    transform:translateY(-3px);

    box-shadow:

        0 0 20px var(--cyan),

        0 0 50px var(--cyan);

}

/* Secondary */

.secondary{

    background:transparent;

    color:white;

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

    padding:14px 36px;

    border-radius:var(--radius-sm);

}

.secondary:hover{

    border-color:var(--purple);

    color:var(--purple);

    box-shadow:var(--glow-purple);

}

/* ==========================
   SECTIONS
========================== */

section{

    width:min(1200px,92%);

    margin:auto;

    padding:var(--space-xl) 0;

}

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

.text-center{

    text-align:center;

}

.hidden{

    display:none;

}

.glow{

    box-shadow:var(--glow-cyan);

}

.blur{

    backdrop-filter:var(--glass-blur);

}

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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#020407;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

        var(--cyan),

        var(--purple)

    );

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--pink);

}

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

::selection{

    background:var(--cyan);

    color:#000;

}

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

#backgroundGlow{

    position:fixed;

    inset:0;

    z-index:var(--z-background);

    pointer-events:none;

    background:

        radial-gradient(circle at 20% 20%,
        rgba(0,247,255,.08),
        transparent 35%),

        radial-gradient(circle at 80% 40%,
        rgba(157,77,255,.08),
        transparent 35%),

        radial-gradient(circle at 50% 90%,
        rgba(255,60,172,.05),
        transparent 45%);

}