@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');:root{--primary-color:#4f46e5;--primary-light:#e0e7ff;--text-dark:#1f2937;--text-muted:#6b7280;--bg-light:#f9fafb;--white:#ffffff;--sidebar-width:280px;--nav-height-mobile:60px;--transition-speed:0.3s}body{font-family:'Inter',sans-serif;color:var(--text-dark);background-color:var(--bg-light);overflow-x:hidden}a{text-decoration:none;transition:all var(--transition-speed) ease}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-0.025em}.ls-tighter{letter-spacing:-0.05em}.ls-wide{letter-spacing:0.05em}.x-small{font-size:0.75rem}.text-justify{text-align:justify}.sidebar{width:var(--sidebar-width);border-right:1px solid rgba(0,0,0,0.05);z-index:1020}.sidebar .nav-link{color:var(--text-muted);font-weight:500;border-radius:0.5rem;padding:0.75rem 1rem}.sidebar .nav-link:hover,.sidebar .nav-link.active{color:var(--primary-color);background-color:var(--primary-light)}.sidebar .nav-link.active{font-weight:600}.main-content{margin-left:0;padding-bottom:80px}@media (min-width:992px){.main-content{margin-left:var(--sidebar-width);padding-bottom:0}}.mobile-nav{height:70px;box-shadow:0 -1px 10px rgba(0,0,0,0.05);padding-bottom:env(safe-area-inset-bottom)}.mobile-nav .nav-link{color:#9ca3af;padding:0.5rem;transition:color 0.2s}.mobile-nav .nav-link.active,.mobile-nav .nav-link:hover{color:var(--primary-color)}.mobile-nav .nav-link.active i{transform:translateY(-2px);transition:transform 0.2s}@keyframes float{0%{transform:translateY(0px)}50%{transform:translateY(-10px)}100%{transform:translateY(0px)}}.animate-float-slow{animation:float 6s ease-in-out infinite}.animate-float-delayed{animation:float 5s ease-in-out infinite 1s}.hover-lift{transition:transform 0.2s,box-shadow 0.2s}.hover-lift:hover{transform:translateY(-3px);box-shadow:0 10px 20px rgba(0,0,0,0.1)!important}.hover-scale{transition:transform 0.3s ease}.hover-scale:hover{transform:scale(1.02)}.animate-fade-in{animation:fadeIn 1s ease-out forwards;opacity:0}.animate-fade-in-up{animation:fadeInUp 1s ease-out forwards;opacity:0;transform:translateY(20px)}@keyframes fadeIn{to{opacity:1}}@keyframes fadeInUp{to{opacity:1;transform:translateY(0)}}.grayscale-icons i{color:#9ca3af;transition:color 0.3s}.grayscale-icons i:hover{color:var(--text-dark)}.grayscale-icons i.fa-laravel:hover{color:#FF2D20}.grayscale-icons i.fa-php:hover{color:#777BB4}.grayscale-icons i.fa-wordpress:hover{color:#21759B}.grayscale-icons i.fa-js:hover{color:#F7DF1E}.grayscale-icons i.fa-android:hover{color:#3DDC84}.grayscale-icons i.fa-aws:hover{color:#FF9900}.project-card{transition:all 0.3s ease;border:1px solid rgba(0,0,0,0.05)}.project-card:hover{transform:translateY(-5px);box-shadow:0 15px 30px rgba(0,0,0,0.08)}.timeline{position:relative;padding-left:30px}.timeline::before{content:'';position:absolute;left:0;top:5px;bottom:0;width:2px;background:#e5e7eb}.timeline-item{position:relative;margin-bottom:2.5rem}.timeline-dot{position:absolute;left:-35px;top:0;width:12px;height:12px;border-radius:50%;background:var(--primary-color);border:2px solid white;box-shadow:0 0 0 3px var(--primary-light)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:#f1f1f1}::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#a8a8a8}