/* TheSYS - Shared Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #0b1326;
    color: #dae2fd;
}

h1, h2, h3, .font-headline {
    font-family: 'Space Grotesk', sans-serif;
}

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

/* Glass morphism panel */
.glass-panel {
    background: rgba(49, 57, 77, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Primary amber gradient */
.primary-gradient {
    background: linear-gradient(135deg, #ffe2ab 0%, #ffbf00 100%);
}

/* Tertiary cyan gradient */
.cyan-gradient {
    background: linear-gradient(135deg, #b4efff 0%, #04dcff 100%);
}

/* Amber glow on hover */
.amber-glow:hover {
    box-shadow: 0 0 20px rgba(255, 191, 0, 0.35);
}

/* Cyan glow on hover */
.cyan-glow:hover {
    box-shadow: 0 0 20px rgba(4, 220, 255, 0.3);
}

/* Step-down recessed card */
.step-down {
    background-color: #060e20;
}

/* Signal line left border */
.signal-line {
    border-left: 2px solid #ffbf00;
}

/* Smooth cubic-bezier transitions */
.bezier-transition {
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Dot grid background */
.dot-grid {
    background-image: radial-gradient(circle at 2px 2px, rgba(255, 191, 0, 0.05) 1px, transparent 0);
    background-size: 40px 40px;
}

/* Dot grid cyan variant */
.dot-grid-cyan {
    background-image: radial-gradient(rgba(4, 220, 255, 0.06) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* Mobile nav overlay */
.mobile-nav {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.mobile-nav.open {
    transform: translateX(0);
}

/* Scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0b1326;
}
::-webkit-scrollbar-thumb {
    background: #504532;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #ffbf00;
}

/* Active nav link */
.nav-link.active {
    color: #ffbf00;
    border-bottom: 2px solid #ffbf00;
    padding-bottom: 4px;
}