* { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: #050505; color: #fff; font-family: 'Geist', sans-serif; overflow-x: hidden; }
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: #050505; }
    ::-webkit-scrollbar-thumb { background: #262626; border-radius: 3px; }
    ::-webkit-scrollbar-thumb:hover { background: #404040; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
      to { opacity: 1; transform: translateY(0); filter: blur(0); }
    }
    .fade-up { opacity: 0; animation: fadeUp .8s cubic-bezier(.16,1,.3,1) forwards; }
    .delay-100 { animation-delay: .1s; } .delay-200 { animation-delay: .2s; }
    .delay-300 { animation-delay: .3s; } .delay-400 { animation-delay: .4s; }
    .delay-500 { animation-delay: .5s; } .delay-600 { animation-delay: .6s; }

    .text-gradient { background: linear-gradient(to bottom, #fff, rgba(255,255,255,.6)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .logo-gradient { background: linear-gradient(to top right, #06b6d4, #67e8f9); }
    .stat-number { background: linear-gradient(to top right, #06b6d4, #67e8f9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .grid-bg { background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 4rem 4rem; mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 80%); }
    .card-highlight { background-image: radial-gradient(circle at top right, rgba(255,255,255,.04), transparent 50%); }
    
    .glow-btn { box-shadow: 0 0 18px rgba(6,182,212,.4); transition: all .3s ease; }
    .glow-btn:hover { box-shadow: 0 0 32px rgba(6,182,212,.6); transform: translateY(-1px); }
    
    .project-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
    .project-card:hover { border-color: rgba(6,182,212,.35); transform: translateY(-4px); }
    .project-card:hover .card-arrow { color: #22d3ee; transform: translateX(-3px); }
    [dir="ltr"] .project-card:hover .card-arrow { transform: translateX(3px); }
    
    .card-arrow { transition: transform .3s ease, color .3s ease; }
    [dir="ltr"] .card-arrow { transform: scaleX(-1); }

    .social-link { transition: all .3s ease; }
    .social-link:hover { border-color: rgba(6,182,212,.35); background: rgba(6,182,212,.05); }
    .social-link:hover .social-icon { color: #22d3ee; }
    .social-icon { transition: color .3s ease; }

    .pulse-dot { box-shadow: 0 0 12px rgba(6,182,212,.55); }
    @keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } }
    .ping-anim { animation: ping 1.5s cubic-bezier(0,0,.2,1) infinite; }
    @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
    .float-anim { animation: float 6s ease-in-out infinite; }

    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .marquee-track { animation: marquee 35s linear infinite; }
    .marquee-track:hover { animation-play-state: paused; }

    .public-badge { background: rgba(34,197,94,.1); color: #4ade80; border: 1px solid rgba(34,197,94,.2); }
    .private-badge { background: rgba(234,179,8,.1); color: #facc15; border: 1px solid rgba(234,179,8,.2); }
    
    .nav-link { transition: color .2s ease; }
    .nav-link:hover { color: #fff; }

    .timeline-line { position: absolute; right: 23px; top: 0; bottom: 0; width: 1px; background: linear-gradient(to bottom, rgba(6,182,212,.4), rgba(255,255,255,.05) 80%, transparent); }
    [dir="ltr"] .timeline-line { right: auto; left: 23px; }
    
    .exp-card { transition: all .4s cubic-bezier(.16,1,.3,1); }
    .exp-card:hover { border-color: rgba(6,182,212,.25); background: rgba(10,10,10,.8); }
    .exp-card:hover .exp-title { color: #22d3ee; }
    .exp-title { transition: color .3s ease; }

    @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
    .skeleton { background: linear-gradient(90deg, rgba(255,255,255,.03) 25%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(100px); transition: transform .4s cubic-bezier(.16,1,.3,1); z-index: 100; }
    .toast.show { transform: translateX(-50%) translateY(0); }