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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;

    background: #07070b;

    color: white;

    min-height: 100vh;

    overflow-x: hidden;

}


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

.background {

    position: fixed;

    inset: 0;

    pointer-events: none;

    overflow: hidden;

    z-index: -1;

}


.grid {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 0%,
            transparent 70%
        );

}


.orb {

    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(120px);

    opacity: .14;

    animation:
        float 12s ease-in-out infinite;

}


.orb1 {

    top: -250px;
    left: -150px;

    background: #6c5ce7;

}


.orb2 {

    right: -200px;
    top: 500px;

    background: #168cff;

    animation-delay: -5s;

}


@keyframes float {

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

    50% {
        transform: translate(40px, 60px);
    }

}


/* =====================================
   NAVBAR
===================================== */

header {

    width: 100%;

    max-width: 1200px;

    margin: auto;

    height: 85px;

    padding: 0 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.navLogo {

    font-size: 24px;

    font-weight: 900;

    letter-spacing: -2px;

}


.navLogo span,
.footerLogo span {

    color: #8d7cff;

}


nav {

    display: flex;

    gap: 30px;

}


nav a {

    color: #777;

    text-decoration: none;

    font-size: 14px;

    transition: .2s;

}


nav a:hover {

    color: white;

}


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

main {

    max-width: 1100px;

    margin: auto;

    padding: 0 25px;

}


.hero {

    min-height: 650px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding-bottom: 70px;

}


.heroBadge {

    width: fit-content;

    padding: 8px 13px;

    border-radius: 50px;

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

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

    color: #888;

    font-size: 13px;

    margin-bottom: 28px;

    animation:
        fadeUp .8s ease both;

}


.statusDot {

    display: inline-block;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #35d07f;

    box-shadow:
        0 0 12px #35d07f;

    margin-right: 7px;

}


.hero h1 {

    font-size:
        clamp(
            58px,
            9vw,
            105px
        );

    line-height: .86;

    letter-spacing: -6px;

    font-weight: 900;

    animation:
        fadeUp .8s .1s ease both;

}


.hero h1 span {

    background:
        linear-gradient(
            120deg,
            #ffffff,
            #8274ff
        );

    -webkit-background-clip: text;

    color: transparent;

}


.heroText {

    max-width: 520px;

    margin-top: 32px;

    color: #85858e;

    font-size: 17px;

    line-height: 1.6;

    animation:
        fadeUp .8s .2s ease both;

}


.heroButtons {

    display: flex;

    gap: 12px;

    margin-top: 30px;

    animation:
        fadeUp .8s .3s ease both;

}


.primaryButton {

    text-decoration: none;

    padding: 14px 20px;

    border-radius: 12px;

    font-weight: 700;

    font-size: 14px;

    background: white;

    color: #0b0b0e;

    transition:
        transform .2s;

}


.primaryButton:hover {

    transform:
        translateY(-3px);

}


.primaryButton span {

    margin-left: 12px;

}


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

.projects,
.about {

    padding:
        100px 0;

}


.sectionHeader {

    display: flex;

    align-items: end;

    justify-content: space-between;

    margin-bottom: 40px;

}


.sectionNumber {

    color: #7568df;

    font-size: 12px;

    font-weight: 800;

}


.sectionHeader h2 {

    margin-top: 8px;

    font-size: 45px;

    letter-spacing: -2px;

}


.sectionHeader p {

    color: #555;

}


/* =====================================
   PROJECT CARDS
===================================== */

.projectGrid {

    display: grid;

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

    gap: 18px;

}


.projectCard {

    min-height: 440px;

    padding: 28px;

    border-radius: 25px;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.025)
        );

    text-decoration: none;

    color: white;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    overflow: hidden;

    position: relative;

    transition:
        transform .35s ease,
        border .35s ease;

}


.projectCard::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    border-radius: 50%;

    filter: blur(90px);

    opacity: .12;

    top: 50px;
    right: -100px;

    transition: .4s;

}


.neontrade::before {

    background: #7b6cff;

}


.agree::before {

    background: #20a464;

}


.projectCard:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(255,255,255,.2);

}


.projectCard:hover::before {

    opacity: .3;

    transform: scale(1.4);

}


.cardTop,
.cardBottom {

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.projectTag {

    font-size: 11px;

    letter-spacing: 1.5px;

    color: #777;

}


.arrow {

    font-size: 22px;

    color: #777;

}


.projectIcon {

    width: 75px;
    height: 75px;

    border-radius: 20px;

    display: flex;

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

    font-size: 32px;

    font-weight: 900;

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

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

}


.neontrade .projectIcon {

    color: #958aff;

}


.agree .projectIcon {

    color: #46d98d;

}


.cardContent h3 {

    font-size: 38px;

    letter-spacing: -2px;

    margin-bottom: 12px;

}


.cardContent p {

    max-width: 420px;

    color: #777;

    line-height: 1.6;

}


.cardBottom {

    padding-top: 20px;

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

    color: #999;

    font-size: 13px;

}


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

.aboutContent {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 70px;

    align-items: center;

}


.aboutContent h3 {

    font-size: 55px;

    line-height: 1;

    letter-spacing: -3px;

}


.aboutContent h3 span {

    color: #777;

}


.aboutContent p {

    color: #777;

    font-size: 18px;

    line-height: 1.8;

}


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

.stats {

    display: grid;

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

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

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

}


.stat {

    padding: 45px 20px;

    text-align: center;

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

}


.stat:last-child {

    border-right: none;

}


.stat strong {

    display: block;

    font-size: 42px;

    letter-spacing: -2px;

}


.stat span {

    color: #666;

    font-size: 13px;

}


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

footer {

    max-width: 1100px;

    margin: auto;

    padding: 60px 25px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color: #555;

}


.footerLogo {

    font-size: 20px;

    font-weight: 900;

}


footer p {

    font-size: 12px;

}


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

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(25px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


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

@media (max-width: 700px) {

    header {

        height: 70px;

    }


    nav {

        gap: 15px;

    }


    .hero {

        min-height: 600px;

    }


    .hero h1 {

        font-size: 62px;

        letter-spacing: -4px;

    }


    .heroText {

        font-size: 16px;

    }


    .projectGrid {

        grid-template-columns: 1fr;

    }


    .projectCard {

        min-height: 400px;

    }


    .sectionHeader {

        align-items: start;

        flex-direction: column;

        gap: 10px;

    }


    .aboutContent {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .aboutContent h3 {

        font-size: 42px;

    }


    .stats {

        grid-template-columns: 1fr;

    }


    .stat {

        border-right: none;

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

    }


    .stat:last-child {

        border-bottom: none;

    }


    footer {

        flex-direction: column;

        gap: 20px;

        text-align: center;

    }

}