/* =========================================================
   GLOBAL STYLES
========================================================= */

:root{
    color-scheme:dark;
}

html{
    scroll-behavior:smooth;
}

body{

    background:#07111f;

    color:#ffffff;

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

    font-size:16px;

    line-height:1.75;

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

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

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-family:"Space Grotesk",sans-serif;

    font-weight:700;

    line-height:1.1;

    letter-spacing:-.03em;

    color:#fff;

}

h1{

    font-size:clamp(48px,6vw,72px);

}

h2{

    font-size:clamp(38px,5vw,58px);

}

h3{

    font-size:28px;

}

h4{

    font-size:22px;

}

p{

    margin:0;

    color:#9fb0c7;

    font-size:17px;

    line-height:1.85;

}

em{

    color:#39c4ff;

    font-style:normal;

}

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

a{

    color:inherit;

    text-decoration:none;

    transition:.3s ease;

}

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

img{

    display:block;

    max-width:100%;

    height:auto;

}

/* =========================================================
   LISTS
========================================================= */

ul,
ol{

    margin:0;

    padding:0;

    list-style:none;

}

/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading{

    max-width:820px;

    margin:0 auto 70px;

}

.section-heading.centered{

    text-align:center;

}

.section-heading p{

    margin-top:20px;

}

/* =========================================================
   EYEBROW
========================================================= */

.eyebrow{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

    color:#39c4ff;

    font-size:13px;

    font-weight:700;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.eyebrow.centered{

    justify-content:center;

}

.eyebrow span{

    width:48px;

    height:2px;

    background:#39c4ff;

}

/* =========================================================
   TEXT HELPERS
========================================================= */

.text-center{

    text-align:center;

}

.text-left{

    text-align:left;

}

.text-right{

    text-align:right;

}

/* =========================================================
   SPACING
========================================================= */

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-60{

    margin-bottom:60px;

}

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

@media(max-width:768px){

    h1{

        font-size:44px;

    }

    h2{

        font-size:34px;

    }

    p{

        font-size:16px;

    }

}

/* ==========================================================
   GLOBAL MOUSE GLOW
========================================================== */

body::before{

    content:"";

    position:fixed;

    left:0;
    top:0;

    width:100%;
    height:100%;

    pointer-events:none;

    z-index:-1;

    background:
        radial-gradient(
            420px circle
            at var(--mouse-x)
               var(--mouse-y),

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

            transparent 70%
        );

    transition:
        background .12s linear;

}
/* Form submission feedback */
.form-status{
    margin-bottom:18px;
    padding:14px 16px;
    border-radius:13px;
    font-size:14px;
    line-height:1.55;
}
.form-status-success{background:rgba(70,211,146,.10);border:1px solid rgba(70,211,146,.32);color:#bff5d9;}
.form-status-pending{background:rgba(255,193,77,.10);border:1px solid rgba(255,193,77,.30);color:#ffe0a3;}
.form-status-error{background:rgba(255,99,112,.10);border:1px solid rgba(255,99,112,.30);color:#ffc3c9;}

/* Spam-prevention field: visually hidden but available to automated form checks. */
.form-honeypot {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Accessible status messages returned after form submission. */
.form-status {
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
}

.form-status-success {
    background: rgba(57, 196, 255, .10);
    border-color: rgba(57, 196, 255, .35);
    color: #dff8ff;
}

.form-status-pending,
.form-status-error {
    background: rgba(255, 183, 77, .10);
    border-color: rgba(255, 183, 77, .35);
    color: #ffe9c2;
}