:root {
    --bg: #080a0d;
    --text: #f5f7fa;
    --muted: #969da8;
    --accent: #0ea5a4;
    --accent-light: #35e0dc;
}


/* RESET */

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


html,
body {
    width: 100%;
}


html {
    scroll-behavior: smooth;
}


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

    background: var(--bg);

    color: var(--text);
}


/* PROJECT SECTIONS */

.project-section {
    position: relative;

    width: 100%;
    min-height: 100vh;

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

    padding: 80px 24px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(14, 165, 164, 0.09),
            transparent 38%
        ),
        var(--bg);
}


/* SUBTLE SEPARATOR */

.project-section + .project-section {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}


/* GLOW */

.glow {
    position: absolute;

    width: 500px;
    height: 500px;

    left: 50%;
    top: 50%;

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

    border-radius: 50%;

    background: rgba(14, 165, 164, 0.055);

    filter: blur(100px);

    pointer-events: none;
}


/* CONTENT */

.content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 850px;

    text-align: center;
}


/* HEADLINES */

h1,
h2 {
    font-size: clamp(52px, 7vw, 86px);

    line-height: 0.98;

    letter-spacing: -0.065em;

    font-weight: 800;
}


h1 span,
h2 span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            100deg,
            #ffffff 10%,
            var(--accent-light) 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    color: transparent;
}


/* DESCRIPTION */

p {
    max-width: 650px;

    margin: 30px auto 0;

    color: var(--muted);

    font-size: 17px;

    line-height: 1.75;

    letter-spacing: -0.01em;
}


p strong {
    color: #dce1e6;

    font-weight: 600;
}


/* CTA BUTTON */

.cta {
    display: inline-flex;

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

    gap: 13px;

    margin-top: 38px;

    padding: 15px 23px;

    border-radius: 11px;

    background: var(--accent);

    color: white;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 12px 40px rgba(14, 165, 164, 0.2);

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.cta span {
    font-size: 18px;

    transition: transform 0.2s ease;
}


.cta:hover {
    transform: translateY(-2px);

    background: #11b6b4;

    box-shadow:
        0 16px 50px rgba(14, 165, 164, 0.3);
}


.cta:hover span {
    transform: translateX(3px);
}


/* SCROLL DOWN */

.scroll-down {
    position: absolute;

    left: 50%;
    bottom: 32px;

    transform: translateX(-50%);

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

    gap: 8px;

    color: var(--muted);

    text-decoration: none;

    z-index: 5;

    transition: color 0.2s ease;
}


.scroll-label {
    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}


.scroll-arrow {
    display: flex;

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

    width: 34px;
    height: 34px;

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

    border-radius: 50%;

    font-size: 17px;

    color: var(--accent-light);

    animation: scrollBounce 2s ease-in-out infinite;

    transition:
        border-color 0.2s ease,
        background 0.2s ease;
}


.scroll-down:hover {
    color: var(--text);
}


.scroll-down:hover .scroll-arrow {
    border-color: var(--accent);

    background: rgba(14, 165, 164, 0.08);
}


/* SCROLL ARROW ANIMATION */

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(6px);
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .project-section {
        min-height: 100svh;

        padding: 60px 20px;
    }


    h1,
    h2 {
        font-size: clamp(44px, 13vw, 60px);
    }


    p {
        margin-top: 24px;

        font-size: 14px;

        line-height: 1.7;
    }


    .cta {
        width: 100%;
        max-width: 310px;

        margin-top: 30px;
    }


    .glow {
        width: 350px;
        height: 350px;
    }


    .scroll-down {
        bottom: 22px;
    }


    .scroll-label {
        font-size: 10px;
    }


    .scroll-arrow {
        width: 32px;
        height: 32px;
    }
}