@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--background:222 47% 11%;--foreground:210 40% 98%;--primary:188 100% 50%;--secondary:274 69% 60%;--muted:222 47% 20%;--muted-foreground:215 20% 65%;--border:215 20% 25%}
html{scroll-behavior:smooth}
body{font-family:"DM Sans",sans-serif;overflow-x:clip}
h1,h2,h3,h4,h5,h6{font-family:"Outfit",sans-serif;text-wrap:balance}
.border-border{border-color:hsl(var(--border))}
.bg-background{background-color:hsl(var(--background))}
.text-foreground{color:hsl(var(--foreground))}
.text-muted-foreground{color:hsl(var(--muted-foreground))}
.bg-muted{background-color:hsl(var(--muted))}
.text-primary{color:hsl(var(--primary))}
.text-secondary{color:hsl(var(--secondary))}
.text-accent{color:hsl(180 100% 50%)}
.glass{background:rgba(255,255,255,.03);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08)}
.glass-strong{background:rgba(255,255,255,.05);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12)}
.glass-profile{background:rgba(255,255,255,.02);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.15);box-shadow:inset 0 0 20px rgba(255,255,255,.05)}
.neon-glow{box-shadow:0 0 20px rgba(0,217,255,.3),0 0 40px rgba(0,217,255,.1)}
.neon-cyan-glow{box-shadow:0 0 25px rgba(0,217,255,.4),0 0 50px rgba(0,217,255,.2), inset 0 0 15px rgba(0,217,255,.2)}
.text-gradient{background:linear-gradient(135deg,hsl(188 100% 50%) 0%,hsl(274 69% 60%) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.animated-gradient{background:linear-gradient(135deg,hsl(222 47% 11%) 0%,hsl(222 47% 13%) 25%,hsl(222 47% 11%) 50%,hsl(222 47% 13%) 75%,hsl(222 47% 11%) 100%);background-size:400% 400%;animation:gradientShift 15s ease infinite}
.particle-bg{position:relative;overflow:hidden}
.particle-bg::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(0,217,255,.05) 1px,transparent 1px);background-size:50px 50px;animation:particleFloat 20s linear infinite}
.animate-floating{animation:floating 6s ease-in-out infinite}
.hover-glow-effect:hover{animation:hoverGlow 2s ease-in-out infinite alternate,hoverScale .3s ease-out forwards}
.site-header-scrolled{background:rgba(17,24,39,.75);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.22)}
.scroll-dot{animation:scrollDot 1.5s infinite}
.prose-content p{margin-bottom:1rem;line-height:1.8}
#mobile-menu .menu li a,nav .menu li a{display:block}
nav .menu,#mobile-menu .menu{list-style:none;padding-left:0;margin:0}
.current-menu-item>a,.current_page_item>a{color:hsl(var(--primary))!important;background:rgba(0,217,255,.08)}
@keyframes gradientShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes particleFloat{0%{transform:translate(0,0)}100%{transform:translate(50px,50px)}}
@keyframes floating{0%{transform:translateY(0)}50%{transform:translateY(-15px)}100%{transform:translateY(0)}}
@keyframes hoverGlow{0%{box-shadow:0 0 25px rgba(0,217,255,.4),0 0 50px rgba(0,217,255,.2), inset 0 0 15px rgba(0,217,255,.2)}100%{box-shadow:0 0 40px rgba(0,217,255,.6),0 0 80px rgba(0,217,255,.4), inset 0 0 25px rgba(0,217,255,.4)}}
@keyframes hoverScale{0%{transform:scale(1)}100%{transform:scale(1.02)}}
@keyframes scrollDot{0%{transform:translateY(0)}50%{transform:translateY(12px)}100%{transform:translateY(0)}}
.delay-1000{animation-delay:1s}
@media(max-width:767px){.menu li a{padding:.75rem 1rem;border-radius:.75rem;color:hsl(var(--muted-foreground))}.menu li a:hover{background:rgba(255,255,255,.05);color:hsl(var(--foreground))}}