:root { --color-tech-green: #00FF9D; --color-cyan: #00E5FF; --color-deep-blue: #0B132B; --color-industrial-green: #00FF66; --color-alert-orange: #FF6B00; --color-geek-purple: #8B5CF6; --color-dark-bg: #0A0D14; --color-white: #FFFFFF; --color-light-gray: #F8F9FA; --color-gray: #6B7280; --font-heading: 'Montserrat', 'Inter', sans-serif; --font-body: 'Inter', 'Montserrat', sans-serif; --transition-base: 0.3s ease; --transition-smooth: 0.3s cubic-bezier(0.25, 1, 0.5, 1); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-white); background: var(--color-dark-bg); overflow-x: clip; } a { text-decoration: none; color: inherit; } button { border: none; cursor: pointer; font-family: inherit; } img { max-width: 100%; display: block; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--color-dark-bg); } ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); } /* Selection */ ::selection { background: rgba(0,229,255,0.3); color: #fff; } /* Screen reader only */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Animation base classes — progressive enhancement */ /* Content visible by default; JS hides then animates in */ .fade-in { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s ease; } /* JS sets .animate-ready on to enable animation */ .animate-ready .fade-in { opacity: 0; transform: translateY(30px); } .animate-ready .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-left { opacity: 1; transform: translateX(0); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-ready .slide-left { opacity: 0; transform: translateX(-40px); } .animate-ready .slide-left.visible { opacity: 1; transform: translateX(0); } .scale-in { opacity: 1; transform: scale(1); transition: opacity 0.5s ease, transform 0.5s ease; } .animate-ready .scale-in { opacity: 0; transform: scale(0.9); } .animate-ready .scale-in.visible { opacity: 1; transform: scale(1); } /* Stagger delay for child elements */ .stagger-1 { transition-delay: 0.1s; } .stagger-2 { transition-delay: 0.2s; } .stagger-3 { transition-delay: 0.3s; } .stagger-4 { transition-delay: 0.4s; } .stagger-5 { transition-delay: 0.5s; } .stagger-6 { transition-delay: 0.6s; } /* Container */ .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; } @media (max-width: 1024px) { .container { padding: 0 24px; } } @media (max-width: 768px) { .container { padding: 0 16px; } } /* Breadcrumb */ ol.breadcrumb, .breadcrumb { padding: 100px 0 20px; font-size: 14px; color: var(--color-gray); list-style: none; display: flex; gap: 8px; align-items: center; } ol.breadcrumb li+li::before, .breadcrumb li+li::before { content: '›'; margin-right: 8px; color: var(--color-gray); } .breadcrumb a { color: var(--color-cyan); } .breadcrumb a:hover { text-decoration: underline; }