* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', sans-serif; }
        .fa-icon { width: 1em; height: 1em; display: inline-block; overflow: visible; vertical-align: -0.125em; fill: currentColor; flex-shrink: 0; }
        body { background: linear-gradient(135deg, #0B1120 0%, #1a202c 100%); color: #ffffff; overflow-x: hidden; transition: all 0.3s ease; }
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #1a202c; }
        ::-webkit-scrollbar-thumb { background: linear-gradient(45deg, #FF6B35, #FF8B35); border-radius: 10px; }
        .glass { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
        .gradient-text { background: linear-gradient(45deg, #FF6B35, #FF8B35, #FF6B9D); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
        @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } }
        .floating { animation: float 6s ease-in-out infinite; }
        .magnetic-btn { transition: all 0.3s ease; cursor: pointer; }
        .magnetic-btn:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 25px rgba(255, 107, 53, 0.25); }
        .particles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
        .skill-container { margin-bottom: 1.5rem; }
        .skill-header { display: flex; justify-content: space-between; margin-bottom: 0.5rem; }
        .skill-name { font-weight: 600; color: white; }
        .skill-percentage { color: #FF6B35; font-weight: 600; }
        .skill-bar { height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; }
        .skill-progress { height: 100%; background: linear-gradient(90deg, #FF6B35, #FF8B35); border-radius: 4px; width: 0; transition: width 1.5s ease-in-out; }
        .timeline-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 2rem 0; }
        .timeline-container::before { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 2px; height: 100%; background: linear-gradient(to bottom, #FF6B35, #FF8B35); }
        .timeline-item { position: relative; margin-bottom: 3rem; width: 100%; }
        .timeline-item:nth-child(odd) .timeline-content { margin-left: auto; margin-right: 2rem; text-align: left; padding-right: 1.5rem; padding-left: 1.5rem; }
        .timeline-item:nth-child(even) .timeline-content { margin-left: 2rem; margin-right: auto; text-align: left; padding-left: 1.5rem; padding-right: 1.5rem; }
        .timeline-content { position: relative; width: 45%; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 1rem; transition: all 0.3s ease; }
        .timeline-content:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2); }
        .timeline-icon { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #FF6B35, #FF8B35); color: white; font-size: 1.25rem; }
        .timeline-item:nth-child(odd) .timeline-icon { right: -25px; }
        .timeline-item:nth-child(even) .timeline-icon { left: -25px; }
        .timeline-period { display: inline-block; background: rgba(255, 107, 53, 0.2); color: #FF6B35; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 600; margin-bottom: 0.5rem; }
        .project-tag { display: inline-block; background: rgba(255, 107, 53, 0.15); color: #FF8B35; padding: 0.25rem 0.75rem; border-radius: 50px; font-size: 0.75rem; font-weight: 500; margin-right: 0.5rem; margin-bottom: 0.5rem; }
        .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(10px); z-index: 1000; display: none; overflow-y: auto; padding: 2rem; }
        .modal-content { background: linear-gradient(135deg, #0B1120 0%, #1a202c 100%); max-width: 900px; margin: 0 auto; border-radius: 1.5rem; padding: 2rem; border: 1px solid rgba(255, 255, 255, 0.15); position: relative; }
        .modal-close { position: absolute; top: 1rem; right: 1rem; background: rgba(255, 107, 53, 0.2); border: none; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.25rem; }
        .mobile-nav-panel { max-height: 0; opacity: 0; transform: translateY(-8px); overflow: hidden; transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.25s ease; }
        .mobile-nav-panel.open { max-height: 520px; opacity: 1; transform: translateY(0); }
        .mobile-nav-toggle .bar { display: block; width: 20px; height: 2px; margin: 4px 0; border-radius: 999px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
        .mobile-nav-toggle.open .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
        .mobile-nav-toggle.open .bar:nth-child(2) { opacity: 0; }
        .mobile-nav-toggle.open .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
        body.portfolio-loading > :not(#loader) { visibility: hidden; }
        #loader { --loader-progress: 0; --loader-percent: 0%; --plug-shift: 0px; --plug-shift-neg: 0px; --cable-shift: 0px; --cable-shift-neg: 0px; background: radial-gradient(circle at 50% 28%, #ffffff 0%, #f8fafc 42%, #eef2f7 100%); opacity: 1; }
        #loader.loader-online { background: radial-gradient(circle at 50% 28%, #ffffff 0%, #f8fafc 42%, #eef2f7 100%); }
        .portfolio-loader-shell { width: min(94vw, 900px); text-align: center; color: #1f2937; }
        .portfolio-loader-stage { position: relative; width: 100%; height: 330px; margin-bottom: 1.75rem; overflow: visible; }
        .portfolio-loader-stage::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: 24px; height: 12px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); filter: blur(3px); }
        .portfolio-loader-glow { position: absolute; left: 50%; top: 54%; width: 82px; height: 82px; border-radius: 999px; transform: translate(-50%, -50%) scale(0.7); background: rgba(249, 115, 22, 0.22); opacity: 0; transition: opacity 260ms ease, transform 260ms ease; z-index: 6; }
        .loader-online .portfolio-loader-glow { opacity: 1; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 44px rgba(249, 115, 22, 0.58); }
        .loader-ground { position: absolute; left: 8%; right: 8%; bottom: 35px; height: 4px; border-radius: 999px; background: #e5ebf1; }
        .stone-marker { position: absolute; left: 12%; bottom: 35px; width: 110px; height: 188px; opacity: 0.78; z-index: 1; }
        .stone-marker::before { content: ''; position: absolute; left: 36px; top: 22px; width: 38px; height: 78px; border-radius: 24px 24px 16px 16px; background: linear-gradient(180deg, #e6ebf1, #cfd8e3); box-shadow: inset -10px 0 16px rgba(148, 163, 184, 0.16); }
        .stone-marker::after { content: ''; position: absolute; left: 12px; top: 96px; width: 86px; height: 42px; border-radius: 22px; background: linear-gradient(180deg, #e9edf3, #cfd8e3); box-shadow: inset -12px -8px 14px rgba(148, 163, 184, 0.18); }
        .stone-base { position: absolute; left: 32px; top: 134px; width: 48px; height: 48px; background: #d9e1ea; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
        .cave-entrance { position: absolute; right: 9%; bottom: 35px; width: 160px; height: 220px; border-radius: 86px 86px 16px 16px; background: linear-gradient(135deg, #edf1f6, #cfd8e3); box-shadow: inset -14px 8px 18px rgba(148, 163, 184, 0.16); z-index: 1; }
        .cave-entrance::before { content: ''; position: absolute; left: 45px; bottom: 0; width: 78px; height: 156px; border-radius: 48px 48px 10px 10px; background: linear-gradient(180deg, #8da0ae, #60717e); }
        .loader-bush { position: absolute; bottom: 35px; width: 86px; height: 44px; background: #1fb34a; border-radius: 36px 36px 6px 6px; z-index: 2; }
        .loader-bush::before, .loader-bush::after { content: ''; position: absolute; bottom: 12px; width: 38px; height: 38px; border-radius: 50%; background: #20ad46; }
        .loader-bush::before { left: 8px; }
        .loader-bush::after { right: 8px; }
        .loader-bush.left { left: 6%; }
        .loader-bush.mid { left: 30%; width: 48px; height: 28px; transform: scale(0.75); }
        .loader-bush.right { right: 3%; }
        .loader-rock { position: absolute; bottom: 33px; width: 28px; height: 16px; border-radius: 50% 50% 40% 40%; background: #d7dee8; z-index: 2; }
        .loader-rock.left { left: 11%; }
        .loader-rock.right { right: 13%; }
        .portfolio-loader-character { position: absolute; left: 50%; top: 42px; width: 170px; height: 244px; transform: translateX(-50%); z-index: 5; }
        .cave-hair { position: absolute; left: 34px; top: 0; width: 94px; height: 64px; background: #4b2507; border-radius: 50% 50% 42% 42%; clip-path: polygon(0 23%, 11% 5%, 24% 13%, 36% 0, 49% 11%, 64% 2%, 76% 16%, 91% 10%, 100% 28%, 86% 73%, 72% 50%, 61% 81%, 49% 52%, 35% 84%, 24% 51%, 10% 79%); }
        .cave-head { position: absolute; left: 49px; top: 28px; width: 74px; height: 76px; border-radius: 44% 48% 52% 46%; background: #ffb07a; }
        .cave-head::after { content: ''; position: absolute; left: 18px; top: 38px; width: 44px; height: 31px; border-radius: 0 0 24px 24px; background: #4b2507; }
        .cave-face { position: absolute; left: 66px; top: 55px; width: 42px; height: 22px; color: #38210f; font-size: 22px; letter-spacing: 8px; z-index: 2; }
        .cave-body { position: absolute; left: 42px; top: 104px; width: 76px; height: 98px; background: #f6a21a; border-radius: 20px 20px 18px 18px; clip-path: polygon(10% 0, 100% 0, 86% 100%, 64% 80%, 42% 100%, 25% 80%, 8% 100%, 18% 36%); }
        .cave-body::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 24px 18px, rgba(154, 90, 8, 0.34) 0 5px, transparent 6px), radial-gradient(circle at 55px 38px, rgba(154, 90, 8, 0.34) 0 4px, transparent 5px), radial-gradient(circle at 34px 66px, rgba(154, 90, 8, 0.34) 0 5px, transparent 6px); }
        .cave-arm { position: absolute; top: 126px; width: 72px; height: 16px; border-radius: 999px; background: #ffb07a; transform-origin: center; z-index: 4; }
        .cave-arm.left { left: -4px; transform: rotate(-12deg); }
        .cave-arm.right { right: -5px; transform: rotate(13deg); }
        .cave-leg { position: absolute; top: 196px; width: 18px; height: 44px; border-radius: 999px; background: #ffb07a; }
        .cave-leg.left { left: 54px; transform: rotate(8deg); }
        .cave-leg.right { right: 56px; transform: rotate(-8deg); }
        .power-cable { position: absolute; top: 184px; width: 42%; height: 8px; border-top: 7px solid #24313a; border-radius: 50%; background: transparent; z-index: 3; }
        .power-cable.left { left: 8%; transform-origin: right; transform: translateX(var(--cable-shift)) rotate(-15deg); }
        .power-cable.right { right: 8%; transform-origin: left; transform: translateX(var(--cable-shift-neg)) rotate(14deg); }
        .power-plug { position: absolute; top: 170px; width: 64px; height: 39px; border-radius: 8px 16px 16px 8px; background: linear-gradient(135deg, #25323c, #111b23); box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16); transition: transform 180ms ease-out; will-change: transform; z-index: 7; }
        .power-plug.left { left: calc(50% - 138px); transform: translateX(var(--plug-shift)); }
        .power-plug.right { right: calc(50% - 138px); transform: translateX(var(--plug-shift-neg)); border-radius: 16px 8px 8px 16px; }
        .power-plug::before, .power-plug::after { content: ''; position: absolute; top: 10px; width: 8px; height: 18px; border-radius: 4px; background: #fbbf24; }
        .power-plug.left::before { right: -8px; }
        .power-plug.left::after { right: -21px; }
        .power-plug.right::before { left: -8px; }
        .power-plug.right::after { left: -21px; }
        .spark-burst { position: absolute; left: 50%; top: 190px; width: 84px; height: 84px; transform: translate(-50%, -50%) scale(0.6); opacity: 0; pointer-events: none; z-index: 8; }
        .spark-burst span { position: absolute; left: 50%; top: 50%; width: 4px; height: 30px; border-radius: 999px; background: #f59e0b; transform-origin: 50% 100%; }
        .spark-burst span:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
        .spark-burst span:nth-child(2) { transform: translate(-50%, -100%) rotate(45deg); }
        .spark-burst span:nth-child(3) { transform: translate(-50%, -100%) rotate(90deg); }
        .spark-burst span:nth-child(4) { transform: translate(-50%, -100%) rotate(135deg); }
        .spark-burst span:nth-child(5) { transform: translate(-50%, -100%) rotate(180deg); }
        .spark-burst span:nth-child(6) { transform: translate(-50%, -100%) rotate(225deg); }
        .spark-burst span:nth-child(7) { transform: translate(-50%, -100%) rotate(270deg); }
        .spark-burst span:nth-child(8) { transform: translate(-50%, -100%) rotate(315deg); }
        .loader-online .spark-burst { animation: sparkPop 580ms ease-out forwards; }
        @keyframes sparkPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); } 35% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(14deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25) rotate(28deg); } }
        .loader-title { color: #1f2937; font-size: clamp(1.9rem, 4vw, 2.65rem); font-weight: 800; line-height: 1.1; margin-bottom: 1rem; }
        .loader-subtitle { color: #6b7280; font-size: clamp(1rem, 2.2vw, 1.35rem); margin-bottom: 2rem; }
        .loader-progress-track { height: 16px; width: min(420px, 72vw); margin: 0 auto 0.9rem; border-radius: 999px; background: #e5e9ef; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08); }
        .loader-progress-fill { height: 100%; width: var(--loader-percent); border-radius: inherit; background: linear-gradient(90deg, #18b84c, #20c85a); transition: width 180ms ease-out; }
        .loader-percent { color: #6b7280; font-size: 1.35rem; font-weight: 600; }
        .loader-steps { display: none; }
        .loader-step { min-width: 180px; }
        .loader-step::before { content: '•'; color: rgba(255,255,255,0.35); display: inline-block; width: 1.25rem; }
        .loader-step.done { color: #E5E7EB; }
        .loader-step.done::before { content: '✓'; color: #FF8B35; }
        .blog-article-content { line-height: 1.8; }
        .blog-article-content > div { max-width: 100% !important; margin: 0 !important; padding: 0 !important; }
        .blog-article-content p { margin: 0 0 1rem !important; line-height: 1.8 !important; }
        .blog-article-content h1, .blog-article-content h2, .blog-article-content h3, .blog-article-content h4, .blog-article-content h5, .blog-article-content h6 { margin: 1.45rem 0 0.75rem !important; line-height: 1.28 !important; }
        .blog-article-content h1:first-child, .blog-article-content h2:first-child, .blog-article-content h3:first-child { margin-top: 0 !important; }
        .blog-article-content ul, .blog-article-content ol { margin: 0 0 1.15rem 1.25rem !important; padding-left: 1rem !important; line-height: 1.8 !important; }
        .blog-article-content li { margin-bottom: 0.5rem !important; }
        .blog-article-content blockquote { margin: 1.25rem 0 !important; line-height: 1.75 !important; }
        .blog-article-content img { display: block; max-width: 100%; height: auto; object-fit: cover; border-radius: 0.75rem; margin: 1.25rem 0; }
        @media (max-width: 768px) {
            .timeline-container::before { left: 30px; }
            .timeline-item:nth-child(odd) .timeline-content, .timeline-item:nth-child(even) .timeline-content { width: calc(100% - 80px); margin-left: 80px; text-align: left; }
            .timeline-item:nth-child(odd) .timeline-icon, .timeline-item:nth-child(even) .timeline-icon { left: -55px; right: auto; }
            .portfolio-loader-stage { height: 230px; transform: scale(0.88); transform-origin: center; }
        }