* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: linear-gradient(-45deg, #d4e4f0, #e8d4e8, #d4e8e4, #e8e4d4, #e4d4e0, #d4e0e8);
    background-size: 400% 400%;
    animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    25% { background-position: 50% 100%; }
    50% { background-position: 100% 50%; }
    75% { background-position: 50% 0%; }
    100% { background-position: 0% 50%; }
}

.nav-transparent { background-color: transparent; backdrop-filter: none; }
.nav-solid {
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 2px solid rgba(0, 113, 227, 0.2);
    box-shadow: 0 4px 20px rgba(0, 113, 227, 0.15);
}
.nav-link { font-weight: 500; font-size: 15px; padding: 8px 16px; border-radius: 8px; transition: all 0.3s ease; }
.nav-link:hover { background-color: rgba(0, 113, 227, 0.1); }
.transition-smooth { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.scroll-indicator { animation: bounce 2s infinite; }
html { scroll-padding-top: var(--nav-h, 80px); }
body { scroll-snap-type: y mandatory; }
section { scroll-snap-align: start; scroll-margin-top: var(--nav-h, 80px); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px);} to { opacity: 1; transform: translateY(0);} }
.fade-in-up { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }
.delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; } .delay-5 { animation-delay: 0.5s; } .delay-6 { animation-delay: 0.6s; }
.skill-bar { height: 8px; background-color: #e5e7eb; border-radius: 999px; overflow: hidden; position: relative; }
.skill-progress { height: 100%; background: linear-gradient(90deg, #0071E3, #0077ED); border-radius: 999px; transition: width 1s ease-out; }
.card-hover { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06); border: 1px solid rgba(255,255,255,0.8); cursor: pointer; }
.card-hover:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 30px 60px rgba(0,113,227,0.2), 0 15px 30px rgba(0,0,0,0.15), 0 0 40px rgba(0,113,227,0.1); }
.card-hover:active { transform: translateY(-6px) scale(1.01); }
.bg-white { box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06); border: 1px solid rgba(255,255,255,0.8); }
.mobile-menu { transform: translateX(100%); transition: transform 0.3s ease-in-out; }
.mobile-menu.active { transform: translateX(0); }
.timeline-item::before { content: ''; position: absolute; left: -18px; top: 0; bottom: -24px; width: 2px; background-color: #e5e7eb; }
.timeline-dot { width: 12px; height: 12px; background-color: #0071E3; border: 2px solid white; box-shadow: 0 0 0 4px #e5e7eb; }
.horizontal-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #e5e7eb transparent; }
.horizontal-scroll::-webkit-scrollbar { height: 6px; }
.horizontal-scroll::-webkit-scrollbar-track { background: transparent; }
.horizontal-scroll::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 20px; }
.carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; z-index: 10; }
.carousel-btn:hover { transform: translateY(-50%) scale(1.05); }
.pager-btn { background: rgba(255,255,255,0.9); border: 1px solid rgba(0,0,0,0.05); box-shadow: 0 6px 16px rgba(0,0,0,0.15); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease; }
.pager-btn:hover { transform: scale(1.05); }
.pager-edge-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.06); box-shadow: 0 8px 20px rgba(0,0,0,0.18); width: 44px; height: 44px; border-radius: 50%; display: none; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease; z-index: 5; }
.pager-edge-btn:hover { transform: translateY(-50%) scale(1.06); }
@media (min-width: 768px) { .pager-edge-btn { display: flex; } .pager-btn { display: none !important; } }
@media (min-width: 1024px) { .pager-edge-btn.left-edge { left: -3.5rem; } .pager-edge-btn.right-edge { right: -3.5rem; } }
@media (min-width: 1280px) { .pager-edge-btn.left-edge { left: -5rem; } .pager-edge-btn.right-edge { right: -5rem; } }
.pager-dots .pager-dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(0,0,0,0.2); transition: transform .2s ease, background .2s ease; }
.pager-dots .pager-dot.active { background: #0071E3; transform: scale(1.2); }
.nav-link.active { color: #0071E3; }
img[loading=\"lazy\"] { background-color: #f5f5f7; }
.back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 50px; height: 50px; background-color: rgba(0,0,0,0.7); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background-color: rgba(0,0,0,0.9); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.3); }
section.bg-gray-50 { background-color: rgba(249,250,251,0.5) !important; backdrop-filter: blur(10px); }
.hero-avatar { background: linear-gradient(135deg, #0071E3, #0088ff); box-shadow: 0 20px 60px rgba(0,113,227,0.5), 0 8px 16px rgba(0,0,0,0.2); transition: all 0.3s ease; }
.hero-avatar:hover { transform: scale(1.05); box-shadow: 0 25px 70px rgba(0,113,227,0.6), 0 10px 20px rgba(0,0,0,0.25); }
footer { background-color: rgba(255,255,255,0.8) !important; backdrop-filter: blur(10px); }
.company-logo-1 { background: linear-gradient(135deg, #0071E3, #00a1ff); box-shadow: 0 4px 16px rgba(0,113,227,0.3); }
.company-logo-2 { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 4px 16px rgba(239,68,68,0.3); }
.contact-icon { transition: all 0.3s ease; }
.contact-icon:hover { transform: scale(1.1); }
.section-title { color: #1a1a1a; font-weight: 700; letter-spacing: -1px; font-family: 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', sans-serif; position: relative; }
.modal-overlay { position: fixed; inset: 0; background-color: rgba(0,0,0,0.8); backdrop-filter: blur(8px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; padding: 2rem; }
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-content { background: white; border-radius: 16px; max-width: 900px; max-height: 90vh; overflow-y: auto; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 40px 80px rgba(0,0,0,0.3); position: relative; }
.modal-overlay.active .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s ease; z-index: 10; }
.modal-close:hover { background: rgba(0,0,0,0.2); transform: rotate(90deg); }
.skill-bar-vertical { width: 100%; height: 200px; display: flex; align-items: flex-end; justify-content: center; position: relative; }
.skill-column { width: 100%; border-radius: 8px 8px 0 0; transition: all 0.6s cubic-bezier(0.4,0,0.2,1); position: relative; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); }
.skill-column:hover { transform: translateY(-5px); box-shadow: 0 -8px 20px rgba(0,0,0,0.15); }
.skill-gradient-1 { background: linear-gradient(to top, #f093fb, #f5576c); }
.skill-gradient-2 { background: linear-gradient(to top, #4facfe, #00f2fe); }
.skill-gradient-3 { background: linear-gradient(to top, #43e97b, #38f9d7); }
.skill-gradient-4 { background: linear-gradient(to top, #fa709a, #fee140); }
.skill-gradient-5 { background: linear-gradient(to top, #30cfd0, #330867); }
.skill-gradient-6 { background: linear-gradient(to top, #a8edea, #fed6e3); }
.skill-gradient-7 { background: linear-gradient(to top, #ff9a9e, #fecfef); }
.skill-gradient-8 { background: linear-gradient(to top, #ffecd2, #fcb69f); }
.skill-gradient-9 { background: linear-gradient(to top, #ff6e7f, #bfe9ff); }
.skill-gradient-10 { background: linear-gradient(to top, #e0c3fc, #8ec5fc); }
.skill-gradient-11 { background: linear-gradient(to top, #fbc2eb, #a6c1ee); }
.skill-gradient-12 { background: linear-gradient(to top, #fdcbf1, #e6dee9); }
.code-portfolio-bg { background: linear-gradient(135deg, rgba(10,10,10,0.95) 0%, rgba(26,26,46,0.95) 50%, rgba(22,33,62,0.95) 100%); position: relative; overflow: hidden; border: 1px solid rgba(0,255,255,0.2); box-shadow: 0 0 40px rgba(0,255,255,0.15), inset 0 0 60px rgba(0,255,255,0.05); }
.code-rain-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.4; }
.code-portfolio-bg::before { content: ''; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; background: linear-gradient(45deg, transparent 0%, rgba(0,255,255,0.3) 25%, transparent 50%, rgba(255,0,255,0.3) 75%, transparent 100%); z-index: -1; border-radius: inherit; animation: borderGlow 4s linear infinite; opacity: 0.6; }
@keyframes borderGlow { 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.code-card { background: rgba(20,20,40,0.8); border: 1px solid rgba(0,255,255,0.2); backdrop-filter: blur(10px); transition: all 0.4s ease; }
.code-card:hover { border-color: rgba(0,255,255,0.6); box-shadow: 0 0 30px rgba(0,255,255,0.3), 0 0 60px rgba(255,0,255,0.2); transform: translateY(-5px); }
.code-title { color: #00ffff; text-shadow: 0 0 10px rgba(0,255,255,0.5); }
.photo-portfolio-bg { background: linear-gradient(to bottom, #fafafa 0%, #f5f5f5 100%); }
.photo-card { background: white; overflow: hidden; transition: all 0.5s cubic-bezier(0.4,0,0.2,1); }
.photo-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
.photo-card img { transition: transform 0.6s ease; }
.photo-card:hover img { transform: scale(1.08); }
.photo-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s ease; }
.photo-card:hover .photo-overlay { opacity: 1; }
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000; border-radius: 8px; }
.video-container video, .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.soft-skill-card { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; transition: all 0.3s ease; }
.soft-skill-card:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(102,126,234,0.4); }
.skill-stars .star { color: #fff; font-size: 14px; line-height: 1; }
.skill-stars .star.dim { opacity: 0.35; }