@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700;800&display=swap');

:root {
    --space-black: #020617;
    --brand-cyan: #22d3ee;
    --brand-purple: #a855f7;
    --dark-surface: #0f172a;
}

body {
    background-color: var(--space-black);
    background-image: 
        radial-gradient(circle at 50% -20%, rgba(34, 211, 238, 0.1), transparent),
        radial-gradient(circle at 0% 100%, rgba(168, 85, 247, 0.05), transparent);
    color: #f1f5f9;
    overflow-x: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    z-index: -1;
}

.hero-gradient-text {
    background: linear-gradient(to right, #fff, #22d3ee, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Scrollbar and other styles from previous step... */