*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.skip-link { position: absolute; top: -100%; left: 1rem; padding: .75rem 1.25rem; background: var(--g1); color: #fff; border-radius: 0 0 .5rem .5rem; font-weight: 600; z-index: 100000; transition: top .2s; }
.skip-link:focus { top: 0; color: #fff; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body { font-family: var(--ff); background: var(--bg); color: var(--t1); line-height: 1.6; overflow-x: hidden; transition: background var(--r), color var(--r); }
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .015; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"); }
::selection { background: rgba(99, 102, 241, .3); color: var(--t1); }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin-bottom: 1rem; letter-spacing: -.02em; }
h1 { font-size: clamp(2.5rem, 5.5vw, 4.25rem); letter-spacing: -.03em; }
h2 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -.025em; }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.0625rem, 2vw, 1.375rem); }
p { margin-bottom: 1rem; color: var(--t2); line-height: 1.75; font-size: .96875rem; }
a { text-decoration: none; color: inherit; transition: color var(--r); }
a:hover { color: var(--pri-l); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.ctn { max-width: var(--mx); margin: 0 auto; padding: 0 2.5rem; }

.gt { background: var(--g1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gt2 { background: var(--g2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gt3 { background: var(--g3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gt4 { background: var(--g6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gt5 { background: var(--g5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.page-in { animation: pi .5s cubic-bezier(.25, .46, .45, .94); }
.page-exit { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
@keyframes pi { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.fi { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.25, .46, .45, .94), transform .7s cubic-bezier(.25, .46, .45, .94); }
.fi.vis { opacity: 1; transform: translateY(0); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(99, 102, 241, .3); } 50% { box-shadow: 0 0 20px rgba(99, 102, 241, .6), 0 0 40px rgba(99, 102, 241, .2); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-6px) rotate(1deg); } }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes scanline { 0% { transform: translateY(-100%); } 100% { transform: translateY(100vh); } }
@keyframes gridPulse { 0%, 100% { opacity: .03; } 50% { opacity: .08; } }
@keyframes alertFlash { 0% { opacity: 0; transform: translateX(-20px); } 10% { opacity: 1; transform: translateX(0); } 90% { opacity: 1; } 100% { opacity: .7; } }
@keyframes progressFill { from { width: 0; } }
@keyframes countUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ripple { 0% { transform: scale(1); opacity: .4; } 100% { transform: scale(3); opacity: 0; } }
@keyframes borderGlow { 0%, 100% { border-color: rgba(99, 102, 241, .2); } 50% { border-color: rgba(99, 102, 241, .6); } }
@keyframes nodePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99, 102, 241, .4); } 50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(99, 102, 241, 0); } }
@keyframes dashMove { to { stroke-dashoffset: -20; } }
@keyframes matrixRain { 0% { transform: translateY(-100%); opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
@keyframes glitch { 0%, 100% { transform: translate(0); } 20% { transform: translate(-2px, 2px); } 40% { transform: translate(2px, -2px); } 60% { transform: translate(-1px, -1px); } 80% { transform: translate(1px, 1px); } }
@keyframes typewriter { from { width: 0; } to { width: 100%; } }
@keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes rotateGlow { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }
@keyframes scaleBounce { 0% { transform: scale(0); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes drawLine { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } }
@keyframes hexFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: .06; } 50% { transform: translateY(-20px) rotate(3deg); opacity: .1; } }
@keyframes dataStream { 0% { transform: translateY(-100%); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(100vh); opacity: 0; } }
@keyframes borderRotate { 0% { --angle: 0deg; } 100% { --angle: 360deg; } }
@keyframes morphBlob { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 50% { border-radius: 50% 60% 30% 60% / 30% 60% 70% 40%; } 75% { border-radius: 60% 30% 60% 40% / 70% 40% 50% 60%; } }
@keyframes scanPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, .4); } 50% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); } }
@keyframes textGlow { 0%, 100% { text-shadow: 0 0 10px rgba(99, 102, 241, .5), 0 0 20px rgba(99, 102, 241, .3); } 50% { text-shadow: 0 0 20px rgba(99, 102, 241, .8), 0 0 40px rgba(99, 102, 241, .4), 0 0 60px rgba(99, 102, 241, .2); } }
@keyframes orbitSpin { from { transform: rotate(0deg) translateX(60px) rotate(0deg); } to { transform: rotate(360deg) translateX(60px) rotate(-360deg); } }
@keyframes waveFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 25% { transform: translateY(-8px) rotate(1deg); } 75% { transform: translateY(4px) rotate(-1deg); } }
@keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { transform: scale(1.05); } 70% { transform: scale(.9); } 100% { opacity: 1; transform: scale(1); } }
@keyframes flipIn { 0% { opacity: 0; transform: perspective(400px) rotateY(90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { opacity: 1; transform: perspective(400px) rotateY(0); } }
@keyframes swingIn { 0% { opacity: 0; transform: rotateX(-100deg); transform-origin: top; } 100% { opacity: 1; transform: rotateX(0); } }
@keyframes neonFlicker { 0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 7px var(--pri), 0 0 10px var(--pri), 0 0 21px var(--pri), 0 0 42px var(--sec); } 20%, 24%, 55% { text-shadow: none; } }
@keyframes rotateBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes aurora { 0% { background-position: 0% 50%; } 25% { background-position: 50% 100%; } 50% { background-position: 100% 50%; } 75% { background-position: 50% 0%; } 100% { background-position: 0% 50%; } }
@keyframes particleFloat { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(-100vh) translateX(20px); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.05); opacity: .8; } }
@keyframes slideReveal { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes charReveal { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes cyberLine { 0% { width: 0; opacity: 0; } 50% { opacity: 1; } 100% { width: 100%; opacity: .5; } }
@keyframes eyeBlink { 0%, 45%, 55%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
@keyframes irisExpand { 0% { transform: scale(.8); opacity: .5; } 100% { transform: scale(1); opacity: 1; } }
@keyframes radarSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pulseRing { 0% { transform: scale(.33); opacity: 1; } 80%, 100% { transform: scale(1); opacity: 0; } }
@keyframes floatBadge { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes shimmerBg { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } }

.stagger-1 { transition-delay: .1s; }
.stagger-2 { transition-delay: .2s; }
.stagger-3 { transition-delay: .3s; }
.stagger-4 { transition-delay: .4s; }
.stagger-5 { transition-delay: .5s; }
.stagger-6 { transition-delay: .6s; }
.stagger-7 { transition-delay: .7s; }
.stagger-8 { transition-delay: .8s; }
.stagger-9 { transition-delay: .9s; }
.stagger-10 { transition-delay: 1s; }

.text-glow { animation: textGlow 3s ease-in-out infinite; }
.hover-glow:hover { animation: pulseGlow 1.5s ease-in-out infinite; }
.float-anim { animation: float 4s ease-in-out infinite; }
.float-slow { animation: floatSlow 6s ease-in-out infinite; }
.spin-slow { animation: spin 8s linear infinite; }
.spin-reverse { animation: spinReverse 12s linear infinite; }
.orbit { animation: orbitSpin 6s linear infinite; }
.morph { animation: morphBlob 8s ease-in-out infinite; }
.scan-pulse { animation: scanPulse 2s ease-in-out infinite; }
.breathe { animation: breathe 4s ease-in-out infinite; }

.hero .hb { animation: fadeIn .6s ease .1s both, floatBadge 5s ease-in-out infinite; }

.hover-lift { transition: transform var(--r), box-shadow var(--r); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: var(--cyber-glow-lg); }
.hover-glow-border { transition: border-color var(--r), box-shadow var(--r); }
.hover-glow-border:hover { border-color: var(--pri); box-shadow: 0 0 30px rgba(99, 102, 241, .2); }

.gradient-animate { background-size: 200% 200%; animation: gradientShift 3s ease infinite; }
.neon-text { animation: neonFlicker 3s infinite alternate; }

@keyframes gradientBorder { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes tiltIn { from { opacity: 0; transform: perspective(600px) rotateX(10deg) translateY(30px); } to { opacity: 1; transform: perspective(600px) rotateX(0) translateY(0); } }
@keyframes revealUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes splitIn { 0% { clip-path: inset(0 50% 0 50%); opacity: 0; } 100% { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes riseGlow { 0% { opacity: 0; transform: translateY(40px); filter: blur(10px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes borderTrace { 0% { background-position: 0% 0%; } 25% { background-position: 100% 0%; } 50% { background-position: 100% 100%; } 75% { background-position: 0% 100%; } 100% { background-position: 0% 0%; } }
@keyframes holoShift { 0% { background-position: 0% 50%; filter: hue-rotate(0deg); } 50% { background-position: 100% 50%; filter: hue-rotate(30deg); } 100% { background-position: 0% 50%; filter: hue-rotate(0deg); } }
@keyframes particleRise { 0% { transform: translateY(0) scale(1); opacity: .6; } 100% { transform: translateY(-80px) scale(0); opacity: 0; } }
@keyframes cyberPulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInFromRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: scale(1); } }

.gsap-pop { opacity: 0; transform: scale(.8); }
.gsap-rotate { opacity: 0; transform: rotate(-5deg); }
.gsap-clip { clip-path: inset(100% 0 0 0); }
.gsap-clip.is-visible { clip-path: inset(0 0 0 0); }

.cyber-grid { position: relative; overflow: hidden; }
.cyber-grid::before { content: ''; position: absolute; inset: 0; background: linear-gradient(rgba(99,102,241,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,.03) 1px, transparent 1px); background-size: 40px 40px; animation: gridPulse 4s ease-in-out infinite; pointer-events: none; }

.neon-border { position: relative; }
.neon-border::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--pri), var(--sec), var(--acc), var(--pri)); background-size: 300% 300%; animation: gradientBorder 4s linear infinite; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.holo-card { position: relative; overflow: hidden; }
.holo-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 30%, rgba(99,102,241,.05) 50%, transparent 70%); background-size: 200% 200%; animation: holoShift 6s ease infinite; pointer-events: none; z-index: 0; }
.holo-card > * { position: relative; z-index: 1; }

.gradient-border { position: relative; background-clip: padding-box; }
.gradient-border::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--pri), var(--sec), var(--acc)); background-size: 300% 300%; animation: gradientBorder 4s linear infinite; z-index: -1; }

.hover-tilt { transition: transform var(--r), box-shadow var(--r); transform-style: preserve-3d; }
.hover-tilt:hover { transform: perspective(800px) rotateY(-3deg) rotateX(2deg); box-shadow: var(--cyber-glow-lg); }

.hover-glow-sm:hover { box-shadow: 0 0 15px rgba(99, 102, 241, .25); }
.hover-border-color { transition: border-color var(--r); }
.hover-border-color:hover { border-color: var(--pri); }

.text-shimmer { background: linear-gradient(90deg, var(--t1) 0%, var(--pri-l) 50%, var(--t1) 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmerBg 3s linear infinite; }
.text-shimmer-subtle { background: linear-gradient(90deg, var(--t2) 0%, var(--pri-l) 40%, var(--t2) 80%, var(--t2) 100%); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: shimmerBg 6s linear infinite; }

.bg-dots { background-image: radial-gradient(circle, var(--bd) 1px, transparent 1px); background-size: 24px 24px; }

.bg-gradient-mesh { background: radial-gradient(at 20% 20%, rgba(99,102,241,.08) 0%, transparent 50%), radial-gradient(at 80% 20%, rgba(6,182,212,.06) 0%, transparent 50%), radial-gradient(at 50% 80%, rgba(139,92,246,.05) 0%, transparent 50%); }

.scroll-indicator { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--pri), var(--sec), var(--acc)); z-index: 10000; transition: width .15s linear; box-shadow: 0 0 8px rgba(99, 102, 241, .4); }

.animate-rise { animation: riseGlow .8s ease forwards; }
.animate-tilt { animation: tiltIn .6s ease forwards; }
.animate-reveal { animation: revealUp .8s ease forwards; }
.animate-split { animation: splitIn .6s ease forwards; }
.animate-zoom { animation: zoomIn .5s ease forwards; }

.stagger-11 { transition-delay: 1.1s; }
.stagger-12 { transition-delay: 1.2s; }

@keyframes loaderPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: .7; } }
@keyframes loaderRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes loaderGlow { 0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,.3); } 50% { box-shadow: 0 0 40px rgba(99,102,241,.6), 0 0 60px rgba(99,102,241,.2); } }
.page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .4s cubic-bezier(.25, .46, .45, .94); }
.page-loader.active { opacity: 1; pointer-events: all; }
.loader-content { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.loader-logo { width: 64px; height: 64px; border-radius: 16px; animation: loaderPulse 1.5s ease-in-out infinite, loaderGlow 2s ease-in-out infinite; }
.loader-orbit { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
.loader-ring-outer { position: absolute; width: 80px; height: 80px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--pri); border-right-color: var(--sec); animation: loaderRing 1s linear infinite; }
.loader-ring-inner { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2px solid transparent; border-bottom-color: var(--acc); border-left-color: var(--pri); animation: loaderRing 1.5s linear infinite reverse; }
.loader-content span { font-weight: 800; font-size: .875rem; color: var(--pri-l); letter-spacing: .2em; text-transform: uppercase; animation: fadeIn .5s ease .3s both; }

.cursor-glow { position: fixed; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(99,102,241,.07) 0%, rgba(6,182,212,.03) 40%, transparent 70%); pointer-events: none; z-index: 0; transform: translate(-50%, -50%); transition: opacity .3s; will-change: transform; }
.cursor-glow.hidden { opacity: 0; }

.tilt-3d { transition: transform .15s ease, box-shadow .3s ease; transform-style: preserve-3d; }
.tilt-3d:hover { box-shadow: 0 20px 60px rgba(99,102,241,.12), 0 0 30px rgba(99,102,241,.06); }

@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }
.magnetic-btn { transition: transform .2s cubic-bezier(.25,.46,.45,.94); }

.hover-scale { transition: transform var(--r); }
.hover-scale:hover { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .fi { opacity: 1; transform: none; transition: none; }
  .stats-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto !important; }
  .scroll-indicator { transition: none; }
}