:root {
    --primary-blue: #60a5fa;   /* Soft Sky Blue */
    --dark-blue: #3b5998;      /* Softer Navy Blue */
    --light-blue: #e0f2fe;     /* Pale Blue */
    --accent-blue: #4f8edc;    /* Muted Blue Accent */
    --gradient-start: #60a5fa; /* Gradient Start */
    --gradient-end: #3b5998;   /* Gradient End */
}

body {
    background: #0a0a0a;
    background-attachment: fixed;
    overflow-x: hidden;
    position: relative;
}

.particle {
    position: absolute;
    background: radial-gradient(circle, rgba(79, 142, 220, 0.8) 0%, rgba(79, 142, 220, 0.2) 50%, transparent 100%);
    border-radius: 50%;
    animation: float-particle 20s infinite linear;
}

.particle:nth-child(odd) {
    background: radial-gradient(circle, rgba(96, 165, 250, 0.6) 0%, rgba(96, 165, 250, 0.1) 50%, transparent 100%);
}

.particle:nth-child(3n) {
    background: radial-gradient(circle, rgba(152, 191, 252, 0.7) 0%, rgba(152, 191, 252, 0.15) 50%, transparent 100%);
}

.hero-gradient {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    position: relative;
}

.btn-primary:not([disabled]) {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary:not([disabled]):hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px rgba(79, 142, 220, 0.4);
}

.section-dot {
    background: rgba(255, 255, 255, 0.3);
    border: 2px solid rgba(79, 142, 220, 0.5);
}

.section-dot.active {
    background: var(--primary-blue);
    border-color: var(--primary-blue);
    box-shadow: 0 0 20px rgba(79, 142, 220, 0.6);
}

.section-dot:hover {
    background: rgba(79, 142, 220, 0.7);
}

.origin-badge {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    color: white;
    font-weight: 500;
}

.footer-section h4::after {
    background: var(--primary-blue);
}

.social-link:hover {
    color: var(--primary-blue);
}

.scroll-to-top {
    background: var(--primary-blue);
}
