*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-family:'Outfit',sans-serif}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#3B82F6;border-radius:3px}
.dark ::-webkit-scrollbar-thumb{background:#60A5FA}
img{max-width:100%;height:auto}

.glass{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.text-gradient{background:linear-gradient(135deg,#3B82F6,#8B5CF6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-gradient-accent{background:linear-gradient(135deg,#10B981,#3B82F6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

.animate-on-scroll{opacity:0;transform:translateY(30px);transition:all 0.7s cubic-bezier(0.22,1,0.36,1)}
.animate-on-scroll.visible{opacity:1;transform:translateY(0)}
.animate-delay-1{transition-delay:0.1s}
.animate-delay-2{transition-delay:0.2s}
.animate-delay-3{transition-delay:0.3s}
.animate-delay-4{transition-delay:0.4s}
.animate-delay-5{transition-delay:0.5s}

.gradient-bg{background:linear-gradient(-45deg,#3B82F6,#8B5CF6,#10B981,#3B82F6);background-size:400% 400%;animation:gradient 12s ease infinite}
.float-animation{animation:float 4s ease-in-out infinite}

.card-hover{transition:all 0.35s cubic-bezier(0.22,1,0.36,1)}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 40px -12px rgba(0,0,0,0.12)}
.dark .card-hover:hover{box-shadow:0 20px 40px -12px rgba(0,0,0,0.4)}

.btn-ripple{position:relative;overflow:hidden}
.btn-ripple::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:rgba(255,255,255,0.25);border-radius:50%;transform:translate(-50%,-50%);transition:width 0.5s,height 0.5s,opacity 0.5s;opacity:0}
.btn-ripple:active::after{width:300px;height:300px;opacity:1;transition:0s}

.typing-text{overflow:hidden;white-space:nowrap;border-right:3px solid #3B82F6;animation:typing 3s steps(30) 0.5s forwards,blink 0.8s step-end infinite;width:0}
.dark .typing-text{border-right-color:#60A5FA}

.hero-particle{position:absolute;border-radius:50%;pointer-events:none;opacity:0.12}

.mobile-menu{transform:translateX(100%);transition:transform 0.35s cubic-bezier(0.22,1,0.36,1)}
.mobile-menu.open{transform:translateX(0)}

.modal-overlay{opacity:0;pointer-events:none;transition:opacity 0.3s ease}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-content{transform:scale(0.95);transition:transform 0.3s ease}
.modal-overlay.active .modal-content{transform:scale(1)}

.skill-card{position:relative;border-radius:1rem;padding:1.5rem;transition:all 0.4s cubic-bezier(0.22,1,0.36,1)}
.skill-card:hover{transform:translateY(-4px)}
.skill-card .skill-icon{width:3rem;height:3rem;border-radius:0.75rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:0.75rem;transition:transform 0.3s ease}
.skill-card:hover .skill-icon{transform:scale(1.1)}
.skill-tag{display:inline-flex;align-items:center;gap:0.375rem;padding:0.375rem 0.75rem;border-radius:0.5rem;font-size:0.75rem;font-weight:500;transition:all 0.25s ease}
.skill-tag:hover{transform:translateY(-2px)}

.logo-marquee{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.logo-track{display:flex;gap:3rem;animation:marquee 30s linear infinite;width:max-content}
.logo-track:hover{animation-play-state:paused}
.logo-item{display:flex;align-items:center;justify-content:center;min-width:160px;height:64px;padding:0 1.5rem;border-radius:1rem;flex-shrink:0;transition:all 0.3s ease;opacity:0.5;filter:grayscale(1)}
.logo-item:hover{opacity:1;filter:grayscale(0);transform:scale(1.05)}
.dark .logo-item{opacity:0.4}
.dark .logo-item:hover{opacity:1}

.blog-content h2{font-family:'Outfit',sans-serif;font-size:1.5rem;font-weight:700;margin-top:2.5rem;margin-bottom:1rem;color:inherit}
.blog-content h3{font-family:'Outfit',sans-serif;font-size:1.25rem;font-weight:600;margin-top:2rem;margin-bottom:0.75rem;color:inherit}
.blog-content p{margin-bottom:1.25rem;line-height:1.8;color:inherit}
.blog-content ul,.blog-content ol{margin-bottom:1.25rem;padding-left:1.5rem}
.blog-content li{margin-bottom:0.5rem;line-height:1.7}
.blog-content blockquote{border-left:4px solid #3B82F6;padding:1rem 1.5rem;margin:1.5rem 0;border-radius:0 12px 12px 0}
.blog-content a{color:#3B82F6;text-decoration:underline;text-underline-offset:2px}
.dark .blog-content a{color:#60A5FA}
.blog-content strong{font-weight:600}
.blog-content img{border-radius:1rem;margin:1.5rem 0;width:100%}

.code-block{position:relative;background:#0F172A;border-radius:0.75rem;margin:1.5rem 0;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.code-block-header{display:flex;justify-content:space-between;align-items:center;padding:0.625rem 1rem;background:rgba(255,255,255,0.04);border-bottom:1px solid rgba(255,255,255,0.08)}
.code-block pre{padding:1rem 1.25rem;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:0.8125rem;line-height:1.75;color:#E2E8F0;margin:0}
.code-block .copy-btn{padding:0.25rem 0.625rem;border-radius:0.375rem;font-size:0.6875rem;background:rgba(255,255,255,0.08);color:#94A3B8;border:none;cursor:pointer;transition:all 0.2s;font-family:'DM Sans',sans-serif}
.code-block .copy-btn:hover{background:rgba(255,255,255,0.15);color:#E2E8F0}

.toc-link{transition:all 0.2s ease}
.toc-link.active{color:#3B82F6;border-left-color:#3B82F6;font-weight:500}
.dark .toc-link.active{color:#60A5FA;border-left-color:#60A5FA}

#reading-progress{transition:width 0.1s linear}

input:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(59,130,246,0.25)}
.dark input:focus,.dark textarea:focus{box-shadow:0 0 0 3px rgba(96,165,250,0.25)}

.share-btn{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:0.75rem;font-size:0.8125rem;font-weight:500;transition:all 0.25s ease;border:1px solid transparent}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}

@media(max-width:640px){
  .typing-text{font-size:1rem}
  .hero-stats{gap:1.5rem}
  .hero-stats>div{text-align:center}
  .skill-card{padding:1.25rem}
  .blog-content h2{font-size:1.25rem}
  .blog-content h3{font-size:1.1rem}
  .code-block pre{font-size:0.75rem;padding:0.75rem}
  .share-btn{padding:0.4rem 0.75rem;font-size:0.75rem}
  .share-btn span{display:none}
}