:root {
    --globe-x: 85%;
    --globe-y: 50%;
    --globe-scale: 1.3;
    --globe-opacity: 0.5;
    --transition-speed: 1.4s;
}
body {
    background-color: #0f172a;
    color: #f8fafc;
    overflow-x: hidden;
}

/* Cyber Globe Background */
.globe-wrapper {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    perspective: 1000px;
}
.globe-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform:
      translate3d(var(--globe-x), var(--globe-y), 0)
      translate3d(-50%, -50%, 0)
      scale(var(--globe-scale));
    transition:
      transform var(--transition-speed) cubic-bezier(0.23, 1, 0.32, 1),
      opacity 0.5s ease;
    opacity: var(--globe-opacity);
}
.cyber-sphere {
    width: 45vw; height: 45vw;
    max-width: 600px; max-height: 600px;
    position: relative;
    transform-style: preserve-3d;
    animation: float 8s ease-in-out infinite;
}
.ring {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 50%;
}
.ring-1 {
    width: 100%; height: 100%;
    border-color: rgba(14, 165, 233, 0.5);
    animation: spin 30s linear infinite;
}
.ring-2 {
    width: 75%; height: 75%;
    border-style: dashed;
    animation: spin-reverse 35s linear infinite;
}
.ring-3 {
    width: 50%; height: 50%;
    border-color: rgba(245, 158, 11, 0.4);
    animation: spin 25s linear infinite;
}
.core {
    position: absolute;
    top: 50%; left: 50%;
    width: 25%; height: 25%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(14,165,233,0.8) 0%, rgba(15,23,42,0) 70%);
    filter: blur(35px);
}

.glass {
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.glass-strong {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.text-gradient {
    background: linear-gradient(135deg, #38bdf8, #0ea5e9);
    -webkit-background-clip: text;
    color: transparent;
}
.text-gold {
    background: linear-gradient(135deg, #fcd34d, #f59e0b);
    -webkit-background-clip: text;
    color: transparent;
}
.progress-bar {
    position: fixed; top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #0ea5e9, #f59e0b);
    width: 0%;
    z-index: 100;
}
.nav-dot.active {
    background-color: #0ea5e9;
    transform: scale(1.4);
    border-color: #0ea5e9;
}

.perspective { perspective: 1000px; }
.tilt-card {
    transform: rotateY(-10deg) rotateX(5deg);
    transition: transform 0.5s ease;
    transform-style: preserve-3d;
}
.tilt-card:hover { transform: rotateY(0deg) rotateX(0deg); }

@media (max-width: 768px) {
    .navbar-logo-block {
        flex-grow: 1;
        max-width: 60%;
    }
    .tilt-card { transform: none; }
    h1 { font-size: 2.2rem; }
}