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

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

html {
    scroll-behavior: smooth;
    overflow-x: clip;
}


body {
    margin: 0;
    padding: 0;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 82% 8%,
            rgba(123, 92, 255, 0.07),
            transparent 28rem
        ),
        #fbfcfb;

    color: #121722;

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

    overflow-x: hidden;
}

main {
    display: flex;
    flex-direction: column;
}

.hero { order: 1; }
.services-section { order: 2; }
.about-section { order: 3; }
.process-section { order: 4; }
.case-section { order: 5; }

h1,
h2,
h3,
h4,
h5,
h6,
h1 *,
h2 *,
h3 *,
h4 *,
h5 *,
h6 * {
    font-family: "Manrope", sans-serif;
}

p,
a,
nav,
button,
input,
textarea,
select,
label,
small,
strong,
span,
li {
    font-family: "Inter", sans-serif;
}

body::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 8% 28%, rgba(114, 230, 208, .08), transparent 25rem),
        radial-gradient(circle at 93% 48%, rgba(123, 92, 255, .07), transparent 30rem),
        linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
    pointer-events: none;
    content: "";
}

a {
    color: inherit;
    text-decoration: none;
    transition: color .25s ease, opacity .25s ease, transform .25s ease;
}

button,
input,
textarea {
    font: inherit;
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* ========================================
   GLOBAL INTERACTION
======================================== */

body.is-loading {
    overflow: hidden;
    animation: body-loader-failsafe-unlock 0s linear 3.05s forwards;
}

.page-loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(123,92,255,.13), transparent 24rem),
        linear-gradient(145deg, #07101a, #0d1520);
    color: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity .55s ease, visibility .55s ease;
    animation: loader-failsafe-hide .55s ease 2.5s forwards;
}

.page-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes loader-failsafe-hide {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

@keyframes body-loader-failsafe-unlock {
    to {
        overflow-x: hidden;
        overflow-y: visible;
    }
}

.page-loader-mark {
    position: relative;
    width: 74px;
    height: 61px;
    margin-bottom: 17px;
    font-family: "Inter", sans-serif;
    font-size: 2.8rem;
    font-weight: 400;
}

.page-loader-mark span { position: absolute; }
.page-loader-mark span:first-child { left: 5px; color: #72e6d0; animation: loader-mark-left .9s ease both; }
.page-loader-mark span:last-child { right: 5px; color: #8b6cff; animation: loader-mark-right .9s ease both; }
.page-loader-name { font-family: "Inter", sans-serif; font-size: 1rem; letter-spacing: .08em; }
.page-loader-line { width: 124px; height: 2px; margin-top: 19px; overflow: hidden; border-radius: 3px; background: rgba(255,255,255,.08); }
.page-loader-line i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #72e6d0, #7b5cff); transform-origin: left; animation: loader-line 1.05s cubic-bezier(.2,.8,.2,1) both; }

.cursor-glow {
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(114,230,208,.11), rgba(123,92,255,.045) 42%, transparent 70%);
    filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(calc(var(--cursor-x, -200px) - 50%), calc(var(--cursor-y, -200px) - 50%), 0);
    transition: opacity .3s ease;
    will-change: transform;
}

.cursor-glow.is-visible { opacity: 1; }

a:active,
button:active,
.hero-button:active,
.cta-button:active {
    transform: translateY(1px) scale(.975);
}

@keyframes loader-mark-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes loader-mark-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes loader-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (hover: none), (pointer: coarse) {
    .cursor-glow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .page-loader-mark span,
    .page-loader-line i { animation: none; }
    .page-loader { transition: none; animation-duration: 0s; }
    body.is-loading { animation-delay: 2.5s; }
}