html {
    scroll-behavior: smooth;
    max-width: 100vw;
    overflow-x: hidden;
}

body {
    font-family: 'Space Grotesk', sans-serif;
    max-width: 100vw;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 8px;
    border: 2px solid #1a1a1a;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

h1,
h2,
h3,
h4 {
    font-family: Rajdhani, sans-serif
}

.hero-heading {
    font-family: Orbitron, sans-serif
}

.stats-box p {
    font-family: 'Share Tech Mono', monospace
}

.glass-bg {
    background: linear-gradient(135deg, rgb(255 255 255 / .05) 0, rgb(255 255 255 / .02) 100%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow: 0 4px 30px rgb(0 0 0 / .5);
    border: 1px solid rgb(255 255 255 / .2)
}

::selection {
    background: #fff;
    color: #000
}

.bg-white ::selection {
    background: #000;
    color: #fff
}

.glass-bg ::selection {
    background: rgb(255 255 255 / .2);
    color: #fff
}

header ::selection {
    background: #fff;
    color: #000
}

@keyframes fade-in {
    0% {
        opacity: 0;
        transform: translateY(20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.animate-fade-in {
    animation: 1s ease-out forwards fade-in
}

.clipped {
    clip-path: polygon(12px 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%, 0% 12px);
}

.hero-grid {
    background-image:
        radial-gradient(60rem 30rem at 20% 10%, rgba(59, 130, 246, .20) 0%, transparent 60%),
        radial-gradient(60rem 40rem at 80% 30%, rgba(147, 197, 253, .16) 0%, transparent 65%),
        linear-gradient(to bottom right, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
    position: relative;
}

.hero-grid::before {

    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to right, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0/48px 48px,
        linear-gradient(to bottom, rgba(255, 255, 255, .06) 1px, transparent 1px) 0 0/48px 48px;
    mask-image: radial-gradient(ellipse at 50% 50%, black 55%, transparent 75%);
    opacity: .25;
    animation: grid-shift 30s linear infinite;
}

@keyframes grid-shift {
    0% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-48px)
    }
}

.glow-ring {
    background: conic-gradient(from 180deg, rgba(59, 130, 246, .8), rgba(147, 197, 253, .8), rgba(59, 130, 246, .8));
    filter: blur(24px);
    opacity: .25;
}

.hero-divider {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

@keyframes float-yslow {
    from {
        transform: translateY(0)
    }

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

    to {
        transform: translateY(0)
    }
}

@keyframes shine {
    to {
        background-position: 200% 0
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease
}

.reveal.in {
    opacity: 1;
    transform: translateY(0)
}

.reveal[data-delay="100"] {
    transition-delay: .1s
}

.reveal[data-delay="200"] {
    transition-delay: .2s
}

.reveal[data-delay="300"] {
    transition-delay: .3s
}

.reveal[data-delay="400"] {
    transition-delay: .4s
}

.hover-float {
    transition: transform .25s ease, box-shadow .25s ease
}

.hover-float:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 24px rgb(0 0 0 / .35)
}

.pulse-dot {
    position: relative
}

.pulse-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 9999px;
    border: 2px solid rgb(255 255 255 / .35);
    opacity: .4;
    animation: float-yslow 2.6s ease-in-out infinite
}

.progress-bar {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    z-index: 60;
    background: linear-gradient(90deg, #fff, rgba(255, 255, 255, .5));
    box-shadow: 0 0 12px #fff
}

.btn-shine {
    background-image: linear-gradient(120deg, #fff 0%, #ddd 20%, #fff 40%);
    background-size: 200% 100%;
    animation: shine 3s linear infinite
}


.tilt {
    will-change: transform;
    transform-style: preserve-3d;
}

.tilt>* {
    transform: translateZ(40px);
}



:root {
    --bg: #050507;
    --muted: #9ca3af
}

html,
body {
    scroll-behavior: smooth
}

body {
    font-family: "Space Grotesk", system-ui, Segoe UI, Arial, sans-serif;
    background: radial-gradient(1200px 800px at 20% -10%, #1f2937 0%, transparent 60%), radial-gradient(900px 600px at 120% 20%, #0ea5e9 0%, transparent 55%), linear-gradient(180deg, #000 0%, #050507 60%, #000 100%);
    background-attachment: fixed
}

.brand {
    font-family: "Orbitron", sans-serif
}

.mono {
    font-family: "Share Tech Mono", monospace
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    border-radius: 1rem;
    padding: 0.95rem 1.35rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, opacity .2s ease, background .2s ease
}

.btn:active {
    transform: translateY(1px) scale(.98)
}

.btn-primary {
    color: #000;
    background: #fff;
    box-shadow: 0 10px 30px rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(0, 0, 0, .06)
}

.btn-primary .icon {
    transition: transform .25s ease
}

.btn-primary:hover .icon {
    transform: translateX(3px)
}

.btn-outline {
    color: #ffffffc6;
    border: 1px solid rgba(255, 255, 255, .35);
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25)
}

.btn-outline:hover {
    border-color: #ffffffa9;
    background: rgba(255, 255, 255, .06)
}

.btn-bounce {
    transform: translateY(0)
}

.btn-bounce:hover {
    transform: translateY(-2px) scale(1.02)
}

.shine {
    background: linear-gradient(110deg, rgba(255, 255, 255, .0) 0%, rgba(255, 255, 255, .4) 30%, rgba(255, 255, 255, 0) 60%) no-repeat;
    background-size: 220% 220%;
    animation: shine 3.5s linear infinite
}

@keyframes shine {
    0% {
        background-position: -120% 0
    }

    100% {
        background-position: 220% 0
    }
}

.glass {
    background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03));
    border: 1px solid rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px)
}

.tag {
    border: 1px solid rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .07)
}

.card {
    border: 1px solid rgba(255, 255, 255, .12)
}

.hover-float {
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease
}

.hover-float:hover {
    transform: translateY(-6px)
}

.section {
    scroll-margin-top: 96px
}

.img-soft {
    filter: saturate(1.05) contrast(1.02)
}

.hero-bg {
    background-image: url('/BG.png');
    background-size: cover;
    background-position: center;
    opacity: .2;
    mix-blend: screen;
}

.divider {
    mask-image: linear-gradient(to top, black 30%, transparent 85%)
}

.nav-link {
    position: relative
}

.nav-link:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width .25s ease
}

.nav-link:hover:after,
.nav-link[aria-current="page"]:after {
    width: 100%
}

.scale-card {
    transform: translateZ(0) scale(1);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1)
}

.group:hover .scale-card {
    transform: translateZ(0) scale(1.05)
}

.tilt {
    perspective: 1000px;
}

.tilt-inner {
    transform-style: preserve-3d;
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease, filter .25s ease;
    will-change: transform;
}

.tilt:hover .tilt-inner {
    filter: saturate(1.05) contrast(1.02);
}