@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;
}

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
}

/* Radial progress bars */
.radial-progress {
    --value: 0;
    --size: 8rem;
    --thickness: 8px;
    --primary: var(--orange-500);
    --secondary: #374151;
    
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: 
        radial-gradient(closest-side, #1f2937 85%, transparent 86% 100%),
        conic-gradient(var(--primary) calc(var(--value)*1%), var(--secondary) 0);
}

.radial-progress::before {
    content: attr(data-value) '%';
    font-weight: bold;
    font-size: 1.5rem;
}

/* Progress bars */
.progress-bar {
    transition: width 1.5s ease-out;
}

/* Highlight cards animation */
.highlight-card {
    opacity: 0;
    transform: translateY(20px);
}

/* ThreeJS background */
#threejs-bg {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

/* Video container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Tooltip styling */
#network-tooltip {
    pointer-events: none;
    transition: opacity 0.3s;
    z-index: 100;
}

/* Scroll animations */
[data-scroll] {
    opacity: 0;
    will-change: transform, opacity;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .radial-progress {
        --size: