body {
    background-color: #000000;
    color: #dee5ff;
    font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    color: #ffffff;
}

[data-animate] {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
    transition-delay: var(--animate-delay, 0s);
    will-change: transform, opacity;
}

[data-animate="fade-left"] {
    transform: translate3d(-40px, 0, 0);
}

[data-animate="fade-right"] {
    transform: translate3d(40px, 0, 0);
}

[data-animate="fade-up"] {
    transform: translate3d(0, 40px, 0);
}

[data-animate="scale-in"] {
    transform: scale(0.92);
}

[data-animate].in-view {
    opacity: 1;
    transform: none;
}

.dot-grid {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
    background-size: 30px 30px;
    z-index: -1;
    pointer-events: none;
}

.scroll-circle {
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -2;
    opacity: 0.25;
    transition: transform 0.1s ease-out;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    pointer-events: none;
}

.glass-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
}

.dropdown-panel {
    background: linear-gradient(135deg, rgba(15, 25, 48, 0.97), rgba(6, 14, 32, 0.97));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6);
}

.dropdown-panel p {
    color: #dee5ff;
}

.lazy-section {
    content-visibility: auto;
    contain-intrinsic-size: 600px;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.text-on-surface-variant {
    color: #a3aac4;
}

.text-soft-blue {
    color: #85adff;
}

.gradient-text {
    background-image: linear-gradient(90deg, #85adff, #69daff);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
}

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}