*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;margin:0}

:root{
--bg:#FFFFFF;--section-bg:#F5F5F5;--text:#000000;
--muted:#555555;--border:#E5E5E5;--accent:#2563EB;--accent-hover:#1d4ed8;
--nav-bg:rgba(255,255,255,0.8);--hero-top:128px;
}
.dark{
--bg:#000000;--section-bg:#111111;--text:#FFFFFF;
--muted:#A3A3A3;--border:#262626;--accent:#2563EB;--accent-hover:#1d4ed8;
--nav-bg:rgba(0,0,0,0.7);
}

body{background:var(--bg);color:var(--text);transition:color 0.3s,background-color 0.3s,border-color 0.3s}

.container{max-width:1280px;margin:0 auto;padding:0 24px}
@media(min-width:1024px){.container{padding:0 40px}:root{--hero-top:160px}}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* Navbar */
nav{position:fixed;top:0;left:0;width:100%;height:64px;z-index:50;
background:var(--nav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);transition:color 0.3s,background-color 0.3s,border-color 0.3s}
nav .container{display:flex;align-items:center;justify-content:space-between;height:100%}
.logo{font-size:22px;font-weight:900;letter-spacing:-0.03em;cursor:pointer}
.logo span{color:#2563EB}
.nav-center{display:flex;gap:32px;list-style:none}
.nav-center a{font-size:14px;color:var(--muted);transition:color 0.2s;cursor:pointer}
.nav-center a:hover{color:var(--text)}
.nav-center a.active{color:var(--text);font-weight:600}
.nav-right{display:flex;align-items:center;gap:12px}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;
padding:8px;border:1px solid var(--border);border-radius:9999px;background:transparent;cursor:pointer;
color:var(--text);transition:color 0.3s,background-color 0.3s,border-color 0.3s}
.theme-toggle:hover{border-color:var(--text)}
.theme-toggle svg{width:16px;height:16px;display:block}
.cv-btn{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--text);padding:8px 16px;
font-size:14px;font-weight:600;background:transparent;color:var(--text);cursor:pointer;
transition:background 0.2s,color 0.2s,border-color 0.2s;font-family:'Inter',sans-serif}
.cv-btn:hover{background:var(--text);color:var(--bg)}
.cv-btn svg{width:16px;height:16px;display:block}
@media(max-width:639px){.cv-btn{display:none}}
.hamburger{display:none;align-items:center;justify-content:center;padding:8px;border:none;
background:transparent;cursor:pointer;color:var(--text)}
.hamburger svg{width:24px;height:24px;display:block}
@media(max-width:767px){.nav-center{display:none}.hamburger{display:flex}}
@media(min-width:768px){.hamburger{display:none}}

/* Mobile dropdown */
.mobile-dropdown{position:fixed;top:64px;left:0;width:100%;background:var(--nav-bg);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--border);transform:translateY(-120%);opacity:0;
transition:transform 0.3s ease,opacity 0.3s ease;z-index:49}
.mobile-dropdown.open{transform:translateY(0);opacity:1}
.mobile-dropdown .inner{padding:16px 24px 24px}
.mobile-dropdown a{display:block;padding:12px 0;font-size:16px;font-weight:600;color:var(--text);
border-bottom:1px solid var(--border);cursor:pointer}
.mobile-dropdown a:last-child{border-bottom:none}
.mobile-dropdown a.cv-btn-mobile{display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;margin-top:16px;border:2px solid var(--text);padding:12px 20px;
font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;background:transparent;
color:var(--text);cursor:pointer;transition:background 0.2s,color 0.2s;font-family:'Inter',sans-serif}
.mobile-dropdown a.cv-btn-mobile svg{width:20px;height:20px;flex:0 0 20px;display:block}
.mobile-dropdown a.cv-btn-mobile:hover{background:var(--text);color:var(--bg)}
@media(min-width:768px){.mobile-dropdown{display:none}}

/* Hero */
#home{position:relative;padding-top:var(--hero-top);border-bottom:1px solid var(--border);
transition:color 0.3s,background-color 0.3s,border-color 0.3s}
.section-label{font-size:12px;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);margin-bottom:24px}
.hero-grid{display:grid;gap:48px;padding-bottom:0}
@media(min-width:640px){.hero-grid{grid-template-columns:1fr 1fr;align-items:start}}
@media(min-width:1024px){.hero-grid{grid-template-columns:8fr 4fr;align-items:start}}
.hero-left h1{font-size:56px;font-weight:900;line-height:0.95;letter-spacing:-0.02em;color:var(--text)}
.hero-left h1 .dot{display:inline-block;width:12px;height:12px;background:#2563EB;border-radius:50%;margin-left:8px;vertical-align:super;box-shadow:0 0 0 0 rgba(37,99,235,.4);animation:ping 2s infinite}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.4)}50%{box-shadow:0 0 0 12px rgba(37,99,235,0)}}
.hero-left p{margin-top:32px;font-size:16px;color:var(--muted);max-width:560px;line-height:1.6}
.hero-left p strong{color:var(--text);font-weight:700}
.hero-btns{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap}
.btn-fill{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-weight:600;
background:#2563EB;color:#fff;border:none;cursor:pointer;transition:background 0.2s;font-family:'Inter',sans-serif;font-size:16px}
.btn-fill:hover{background:#1d4ed8}
.btn-fill svg{width:16px;height:16px;display:block}
.btn-outline{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-weight:600;
border:2px solid var(--text);background:transparent;color:var(--text);cursor:pointer;
transition:background 0.2s,color 0.2s;font-family:'Inter',sans-serif;font-size:16px}
.btn-outline:hover{background:var(--text);color:var(--bg)}
.hero-right{position:relative;max-width:320px;justify-self:center}
@media(min-width:1024px){.hero-right{max-width:none;justify-self:auto}}
.photo-container{aspect-ratio:4/5;overflow:hidden;background:var(--section-bg);transition:background-color 0.3s;position:relative}
.photo-container.loading{background:var(--section-bg)}
.photo-container.loading::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/40px no-repeat;opacity:0.5}
.dark .photo-container.loading::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E")}
.photo-container.loading::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.05) 50%,transparent 100%);background-size:200% 100%;animation:ss-shimmer 1.5s ease-in-out infinite}
.dark .photo-container.loading::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.08) 50%,transparent 100%)}
.photo-container.loading img{opacity:0}
.photo-container img{width:100%;height:100%;object-fit:cover}
.badge{position:absolute;bottom:16px;left:16px;background:var(--bg);padding:6px 12px;font-size:11px;
font-family:monospace;text-transform:uppercase;letter-spacing:0.1em;color:var(--text);
transition:color 0.3s,background-color 0.3s;display:flex;align-items:center;gap:6px}
.badge .dot{width:8px;height:8px;border-radius:50%;background:#2563EB;display:inline-block;box-shadow:0 0 0 0 rgba(37,99,235,.4);animation:ping 2s infinite}
@media(max-width:639px){.hero-left{order:2}.hero-right{order:1}}
@media(min-width:768px){.hero-left h1{font-size:80px}.hero-left p{font-size:18px}}
@media(min-width:1024px){.hero-left h1{font-size:120px}}

/* Services strip */
.services-strip{margin-top:80px; margin-bottom: 20px; border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(2,1fr);
transition:border-color 0.3s}
@media(min-width:1024px){.services-strip{grid-template-columns:repeat(4,1fr)}}
.service-card{position:relative;overflow:hidden;background:var(--section-bg);padding:32px 24px;
min-height:110px;display:flex;align-items:flex-end;cursor:default;
transition:background-color 0.3s;border-right:1px solid var(--border)}
.service-card:nth-child(even){border-right:none}
@media(min-width:1024px){.service-card{border-right:1px solid var(--border)}.service-card:last-child{border-right:none}}
.service-card .num{position:absolute;top:8px;right:16px;font-size:64px;font-family:monospace;font-weight:900;
line-height:1;color:#E5E5E5;user-select:none;transition:color 0.3s}
.dark .service-card .num{color:#262626}
.service-card .label{position:relative;font-weight:700;font-size:16px;color:var(--text);z-index:1}
.service-card:hover{background:var(--bg)}
.service-card:hover .num{color:rgba(37,99,235,0.15)}
@media(min-width:1024px){.service-card .label{font-size:18px}}

/* About */
#about{padding:80px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){#about{padding:128px 0}}
.about-grid{display:grid;gap:48px}
@media(min-width:1024px){.about-grid{grid-template-columns:4fr 8fr}}
.about-left h2{font-size:36px;font-weight:900;line-height:1.05;letter-spacing:-0.02em;color:var(--text)}
.about-right p{font-size:18px;line-height:1.75;color:var(--muted)}
.about-right p strong{color:var(--text)}
.about-right p .accent{color:#2563EB;font-weight:700}
@media(min-width:1024px){.about-left h2{font-size:48px}.about-right p{font-size:20px}}

/* Stats */
.stats-section{background:var(--section-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
padding:64px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){.stats-section{padding:96px 0}}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{border-left:2px solid var(--text);padding-left:24px}
.stat-number{font-size:48px;font-weight:900;line-height:1;color:var(--text)}
.stat-number .suffix{color:#2563EB}
.stat-label{margin-top:12px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.1em}
@media(min-width:1024px){.stat-number{font-size:72px}}

/* Projects */
#projects{padding:80px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){#projects{padding:128px 0}}
.projects-header{display:flex;flex-direction:column;gap:16px}
@media(min-width:1024px){.projects-header{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.projects-header-left h2{font-size:36px;font-weight:900;line-height:0.95;color:var(--text)}
.projects-header-right p{color:var(--muted);max-width:448px;font-size:14px;line-height:1.6}
@media(min-width:1024px){.projects-header-left h2{font-size:64px}}
.projects-grid{display:grid;gap:24px;margin-top:56px}
@media(min-width:640px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.projects-grid{grid-template-columns:repeat(3,1fr)}}
.project-card{border:1px solid var(--border);background:var(--bg);padding:28px;cursor:pointer;
transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s}
.project-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.1)}
.project-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px}
.project-index{font-family:monospace;font-size:14px;color:#2563EB}
.project-arrow{width:20px;height:20px;color:var(--muted);transition:color 0.3s,transform 0.3s;display:block}
.project-card:hover .project-arrow{color:#2563EB;transform:rotate(45deg)}
.project-category{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px}
.project-name{font-size:24px;font-weight:900;line-height:1.2;color:var(--text);margin-bottom:12px}
.project-desc{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:24px}
.project-link{font-size:14px;font-weight:600;color:var(--text);border-bottom:2px solid var(--text);
padding-bottom:2px;display:inline-block;transition:color 0.2s,border-color 0.2s}
.project-card:hover .project-link{color:#2563EB;border-bottom-color:#2563EB}

/* Skills */
#skills{background:var(--section-bg);border-top:1px solid var(--border);border-bottom:1px solid var(--border);
padding:80px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){#skills{padding:128px 0}}
.skills-header h2{font-size:36px;font-weight:900;line-height:0.95;color:var(--text);margin-bottom:56px}
@media(min-width:1024px){.skills-header h2{font-size:64px}}
.skills-grid{display:grid;gap:40px}
@media(min-width:640px){.skills-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.skills-grid{grid-template-columns:repeat(4,1fr)}}
.skill-cat-header{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--border);margin-bottom:20px}
.skill-cat-header .slash{font-family:monospace;font-size:12px;color:#2563EB}
.skill-cat-header .cat-name{font-size:18px;font-weight:700;color:var(--text)}
.skill-pills{display:flex;flex-wrap:wrap;gap:8px}
.skill-pill{padding:6px 12px;font-size:14px;border:1px solid var(--border);background:var(--bg);
color:var(--text);transition:border-color 0.2s,color 0.2s,background-color 0.3s; cursor:default;}
.skill-pill:hover{border-color:#2563EB;color:#2563EB}

/* Contact */
#contact{padding:80px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){#contact{padding:128px 0}}
.contact-grid{display:grid;gap:64px}
@media(min-width:1024px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-left h2{font-size:48px;font-weight:900;line-height:0.95;color:var(--text)}
.contact-left h2 .highlight{color:#2563EB}
.contact-left .sub{margin-top:24px;font-size:18px;color:var(--muted);max-width:448px;line-height:1.6}
@media(min-width:1024px){.contact-left h2{font-size:72px}}
.social-row{display:flex;gap:12px;margin-top:40px}
.social-link{display:flex;align-items:center;justify-content:center;width:48px;height:48px;
border:2px solid var(--text);color:var(--text);transition:background 0.2s,color 0.2s,border-color 0.2s}
.social-link:hover{background:#2563EB;color:#fff;border-color:#2563EB}
.social-link svg{width:24px;height:24px;display:block}
.email-block{margin-top:40px}
.email-label{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:4px}
.email-link{font-size:18px;font-weight:600;color:var(--text);transition:color 0.2s}
.email-link:hover{color:#2563EB}

/* Form */
.form-group{margin-bottom:24px}
.form-group label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px}
.form-group input,.form-group textarea{width:100%;background:transparent;border:none;
border-bottom:2px solid var(--border);padding:12px 0;font-size:16px;color:var(--text);
outline:none;transition:border-color 0.2s;font-family:'Inter',sans-serif}
.form-group input:focus,.form-group textarea:focus{border-bottom-color:#2563EB}
.form-group textarea{resize:none}
.submit-btn{display:inline-flex;align-items:center;gap:8px;padding:16px 32px;font-weight:700;
background:var(--text);color:var(--bg);border:none;cursor:pointer;font-family:'Inter',sans-serif;
font-size:16px;transition:background 0.2s,color 0.2s}
.submit-btn:hover{background:#2563EB;color:#fff}
.submit-btn svg{width:16px;height:16px;display:block}

/* Footer */
footer{border-top:1px solid var(--border);padding:32px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
footer .footer-inner{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
@media(min-width:640px){footer .footer-inner{flex-direction:row;justify-content:space-between;text-align:left}}
footer .copy{font-size:14px;color:var(--muted)}
footer .footer-links{display:flex;gap:16px;align-items:center}
footer .footer-links a{color:var(--muted);transition:color 0.2s;display:flex}
footer .footer-links a:hover{color:var(--text)}
footer .footer-links svg{width:16px;height:16px;display:block}

/* ============== Project Detail Page ============== */

.project-detail-header{padding-top:112px;padding-bottom:64px;border-bottom:1px solid var(--border);background:var(--bg);transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){.project-detail-header{padding-top:144px;padding-bottom:80px}}

.back-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);margin-bottom:40px;transition:color 0.2s}
.back-link:hover{color:var(--text)}
.back-link svg{transition:transform 0.2s}
.back-link:hover svg{transform:translateX(-4px)}

.project-detail-grid{display:grid;gap:48px;align-items:start}
@media(min-width:1024px){.project-detail-grid{grid-template-columns:8fr 4fr}}

.project-detail-left .cat-label{font-size:12px;text-transform:uppercase;letter-spacing:0.2em;color:var(--muted);margin-bottom:24px}
.project-detail-left h1{font-size:48px;font-weight:900;line-height:0.95;letter-spacing:-0.02em;color:var(--text)}
@media(min-width:640px){.project-detail-left h1{font-size:72px}}
@media(min-width:1024px){.project-detail-left h1{font-size:96px}}

.type-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--border);background:var(--section-bg);margin-top:20px}
.type-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.type-badge .type-text{font-size:11px;font-family:monospace;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}

.project-desc-text{margin-top:32px;color:var(--muted);font-size:16px;line-height:1.75;max-width:672px}
@media(min-width:1024px){.project-desc-text{font-size:18px}}

.project-detail-right{padding-top:0}
@media(min-width:1024px){.project-detail-right{padding-top:80px}}
.project-actions{display:flex;flex-direction:column;gap:16px}

.action-btn{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;font-size:14px;font-weight:600;text-decoration:none;transition:all 0.2s;cursor:pointer;font-family:'Inter',sans-serif;border:none}
.action-btn.primary{background:var(--accent);color:#fff}
.action-btn.primary:hover{background:var(--accent-hover)}
.action-btn.primary svg{transition:transform 0.2s}
.action-btn.primary:hover svg{transform:translate(2px,-2px)}
.action-btn.secondary{border:2px solid var(--text);background:transparent;color:var(--text)}
.action-btn.secondary:hover{background:var(--text);color:var(--bg)}
.action-btn.disabled{background:var(--section-bg);border:1px solid var(--border);color:#A3A3A3;cursor:not-allowed}
.action-btn.disabled:hover{background:var(--section-bg);color:#A3A3A3}
.action-btn.disabled.secondary{border:1px solid var(--border)}
.action-btn .na-text{font-size:11px;font-family:monospace}

.ss-count-block{padding-top:16px;border-top:1px solid var(--border);margin-top:8px}
.ss-count-block .ss-label{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:4px}
.ss-count-block .ss-num{font-size:24px;font-weight:900;color:var(--text)}
.ss-count-block .ss-num .plus{color:var(--accent)}

/* Screenshots */
.screenshots-section{padding:80px 0;background:var(--bg);transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){.screenshots-section{padding:128px 0}}
.ss-header{margin-bottom:56px}
@media(min-width:1024px){.ss-header{display:flex;justify-content:space-between;align-items:flex-end}}
.ss-header-left h2{font-size:36px;font-weight:900;line-height:0.95;color:var(--text)}
@media(min-width:1024px){.ss-header-left h2{font-size:64px}}
.ss-header-right{font-size:14px;color:var(--muted);max-width:320px;margin-top:16px}
@media(min-width:1024px){.ss-header-right{margin-top:0}}
.ss-grid{display:grid;gap:40px}
@media(min-width:640px){.ss-grid{grid-template-columns:repeat(2,1fr)}}
.ss-item .ss-label-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ss-item .ss-label-row .ss-slash{font-family:monospace;font-size:11px;color:var(--accent)}
.ss-item .ss-label-row .ss-label{font-size:11px;text-transform:uppercase;letter-spacing:0.15em;color:var(--muted)}
.ss-item .ss-img-wrap{width:100%;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--border);background:var(--section-bg);cursor:pointer;position:relative;transition:border-color 0.2s}
.ss-item .ss-img-wrap:hover{border-color:var(--accent)}
.ss-item .ss-img-wrap img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 0.3s}
.ss-item .ss-img-wrap:hover img{transform:scale(1.03)}
.ss-item .ss-img-wrap .zoom-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity 0.3s;background:rgba(0,0,0,0.3);color:#fff}
.ss-item .ss-img-wrap:hover .zoom-icon{opacity:1}
.ss-item .ss-img-wrap .zoom-icon svg{width:32px;height:32px;display:block}
.ss-item .ss-img-wrap.loading{background:var(--section-bg)}
.ss-item .ss-img-wrap.loading::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A3A3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") center/36px no-repeat;opacity:0.5}
.dark .ss-item .ss-img-wrap.loading::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E")}
.ss-item .ss-img-wrap.loading::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(0,0,0,0.05) 50%,transparent 100%);background-size:200% 100%;animation:ss-shimmer 1.5s ease-in-out infinite}
.dark .ss-item .ss-img-wrap.loading::after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,0.08) 50%,transparent 100%)}
@keyframes ss-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.ss-item .ss-img-wrap.loading img{opacity:0}
.ss-placeholder{aspect-ratio:16/9;background:var(--section-bg);border:1px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ss-placeholder svg{width:32px;height:32px;color:#D4D4D4}
.dark .ss-placeholder svg{color:#404040}
.ss-placeholder .ph-label{font-size:13px;font-family:monospace;color:#A3A3A3}
.dark .ss-placeholder .ph-label{color:#525252}

/* More Projects */
.more-projects-section{background:var(--section-bg);border-top:1px solid var(--border);padding:80px 0;transition:color 0.3s,background-color 0.3s,border-color 0.3s}
@media(min-width:1024px){.more-projects-section{padding:128px 0}}
.more-header{display:flex;flex-direction:column;gap:16px;margin-bottom:56px}
@media(min-width:1024px){.more-header{flex-direction:row;justify-content:space-between;align-items:flex-end}}
.more-header-left h2{font-size:36px;font-weight:900;line-height:0.95;color:var(--text)}
@media(min-width:1024px){.more-header-left h2{font-size:48px}}
.more-header-right .view-all{font-size:14px;font-weight:600;color:var(--text);border-bottom:2px solid var(--text);padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:color 0.2s,border-color 0.2s}
.more-header-right .view-all:hover{color:var(--accent);border-bottom-color:var(--accent)}
.more-grid{display:grid;gap:24px}
@media(min-width:640px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.more-grid{grid-template-columns:repeat(3,1fr)}}
.more-card{border:1px solid var(--border);background:var(--bg);padding:28px;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform 0.3s,box-shadow 0.3s}
.more-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(0,0,0,0.08)}
.more-card .mc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}
.more-card .mc-top .mc-type{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
.more-card .mc-top .mc-arrow{width:20px;height:20px;color:#A3A3A3;transition:color 0.3s,transform 0.3s;display:block}
.more-card:hover .mc-arrow{color:var(--accent);transform:rotate(45deg)}
.more-card .mc-cat{font-size:11px;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted);margin-bottom:8px}
.more-card .mc-name{font-size:20px;font-weight:900;line-height:1.2;color:var(--text);margin-bottom:12px}
.more-card .mc-desc{font-size:14px;line-height:1.6;color:var(--muted);margin-bottom:20px}
.more-card .mc-link{font-size:14px;font-weight:600;color:var(--text);border-bottom:2px solid var(--text);padding-bottom:2px;display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:color 0.2s,border-color 0.2s;align-self:flex-start}
.more-card:hover .mc-link{color:var(--accent);border-bottom-color:var(--accent)}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;visibility:hidden;transition:opacity 0.3s,visibility 0.3s}
.modal-overlay.open{opacity:1;visibility:hidden}
.modal-overlay.open{opacity:1;visibility:visible}
.modal-card{background:var(--bg);border:1px solid var(--border);padding:48px 40px 40px;
max-width:400px;width:90%;text-align:center;transform:scale(0.95) translateY(8px);
transition:transform 0.3s ease;box-shadow:0 24px 48px rgba(0,0,0,0.15)}
.modal-overlay.open .modal-card{transform:scale(1) translateY(0)}
.modal-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;
border-radius:50%;background:rgba(37,99,235,0.1);color:#2563EB;margin:0 auto 24px}
.modal-icon svg{width:28px;height:28px;display:block}
.modal-title{font-size:22px;font-weight:900;color:var(--text);margin-bottom:12px}
.modal-text{font-size:15px;line-height:1.6;color:var(--muted);margin-bottom:32px}
.modal-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 32px;font-weight:700;
background:var(--text);color:var(--bg);border:none;cursor:pointer;font-family:'Inter',sans-serif;
font-size:15px;transition:background 0.2s,color 0.2s}
.modal-btn:hover{background:#2563EB;color:#fff}

/* Lightbox */
.lightbox-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,0.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
opacity:0;visibility:hidden;transition:opacity 0.4s cubic-bezier(0.4,0,0.2,1),visibility 0.4s}
.lightbox-overlay.open{opacity:1;visibility:visible}
.lightbox-overlay.open .lightbox-img-wrap{transform:scale(1);opacity:1}

.lightbox-top-bar{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;
justify-content:space-between;padding:0 20px;z-index:10;
background:linear-gradient(180deg,rgba(0,0,0,0.5) 0%,transparent 100%)}
.lightbox-counter{color:rgba(255,255,255,0.7);font-size:13px;font-family:monospace;
letter-spacing:0.05em;padding:0 4px}
.lightbox-counter .current{color:#fff;font-weight:700}
.lightbox-close{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,0.1);border:none;color:#fff;cursor:pointer;border-radius:50%;
transition:all 0.25s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lightbox-close:hover{background:rgba(255,255,255,0.25);transform:rotate(90deg)}
.lightbox-close svg{width:18px;height:18px;display:block}

.lightbox-img-wrap{position:relative;max-width:90vw;max-height:82vh;overflow:hidden;
display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;
transform:scale(0.96);opacity:0;transition:transform 0.4s cubic-bezier(0.4,0,0.2,1),opacity 0.4s}
.lightbox-img-wrap img{display:block;max-width:90vw;max-height:82vh;object-fit:contain;
transition:transform 0.25s cubic-bezier(0.25,0.46,0.45,0.94);cursor:grab;will-change:transform}
.lightbox-img-wrap img.dragging{cursor:grabbing;transition:none}
.lightbox-img-wrap img.loading{opacity:0}
.lightbox-img-wrap .lightbox-spinner{position:absolute;inset:0;display:flex;align-items:center;
justify-content:center;pointer-events:none}
.lightbox-img-wrap .lightbox-spinner::after{content:'';width:32px;height:32px;border:2px solid rgba(255,255,255,0.15);
border-top-color:#fff;border-radius:50%;animation:lb-spin 0.7s linear infinite}
@keyframes lb-spin{to{transform:rotate(360deg)}}

.lightbox-bottom-bar{position:absolute;bottom:0;left:0;right:0;height:72px;display:flex;align-items:center;
justify-content:center;gap:14px;z-index:10;opacity:0;visibility:hidden;
transition:opacity 0.4s,visibility 0.4s;
background:linear-gradient(0deg,rgba(0,0,0,0.5) 0%,transparent 100%)}
.lightbox-overlay.open .lightbox-bottom-bar{opacity:1;visibility:visible}
.lightbox-bottom-bar.hidden{opacity:0;visibility:hidden}
.lightbox-btn{width:40px;height:40px;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,0.1);border:none;color:#fff;cursor:pointer;border-radius:50%;
transition:all 0.2s ease;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
font-size:18px;font-weight:400;font-family:inherit}
.lightbox-btn:hover{background:rgba(255,255,255,0.25)}
.lightbox-btn:active{transform:scale(0.92)}
.lightbox-btn.zoom-reset{width:auto;padding:0 12px;gap:4px;font-size:13px;font-family:monospace;
border-radius:9999px}
.lightbox-zoom-divider{width:1px;height:20px;background:rgba(255,255,255,0.15)}
.lightbox-zoom-label{font-size:13px;font-family:monospace;color:rgba(255,255,255,0.6);
min-width:44px;text-align:center}

.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;
display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.08);
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.08);
color:#fff;cursor:pointer;border-radius:50%;transition:all 0.25s ease;z-index:10;
opacity:0;visibility:hidden}
.lightbox-overlay.open .lightbox-nav{opacity:1;visibility:visible}
.lightbox-nav:hover{background:rgba(255,255,255,0.2)}
.lightbox-nav:active{transform:translateY(-50%) scale(0.92)}
.lightbox-nav.prev{left:20px}
.lightbox-nav.next{right:20px}
.lightbox-nav svg{width:20px;height:20px;display:block}
.lightbox-nav.hidden{opacity:0;visibility:hidden}

.lightbox-dots{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);
display:flex;gap:6px;z-index:10;opacity:0;visibility:hidden;transition:opacity 0.4s,visibility 0.4s}
.lightbox-overlay.open .lightbox-dots{opacity:1;visibility:visible}
.lightbox-dots.hidden{opacity:0;visibility:hidden}
.lightbox-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,0.25);
border:none;cursor:pointer;padding:0;transition:all 0.3s ease}
.lightbox-dot.active{background:#fff;transform:scale(1.3);width:20px;border-radius:3px}
.lightbox-dot:hover{background:rgba(255,255,255,0.5)}

/* Page preloader */
.page-loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity 0.4s ease,visibility 0.4s ease}
.page-loader.hidden{opacity:0;visibility:hidden;pointer-events:none}
.loader{position:relative;width:75px;height:100px}
.loader__bar{position:absolute;bottom:0;width:10px;height:50%;background:rgb(0,0,0);transform-origin:center bottom;box-shadow:1px 1px 0 rgba(0,0,0,0.2)}
.dark .loader__bar{background:rgb(255,255,255);box-shadow:1px 1px 0 rgba(255,255,255,0.2)}
.loader__bar:nth-child(1){left:0px;transform:scale(1,0.2);animation:barUp1 4s infinite}
.loader__bar:nth-child(2){left:15px;transform:scale(1,0.4);animation:barUp2 4s infinite}
.loader__bar:nth-child(3){left:30px;transform:scale(1,0.6);animation:barUp3 4s infinite}
.loader__bar:nth-child(4){left:45px;transform:scale(1,0.8);animation:barUp4 4s infinite}
.loader__bar:nth-child(5){left:60px;transform:scale(1,1);animation:barUp5 4s infinite}
.loader__ball{position:absolute;bottom:10px;left:0;width:10px;height:10px;background:rgb(44,143,255);border-radius:50%;animation:ball624 4s infinite}
@keyframes ball624{0%{transform:translate(0,0)}5%{transform:translate(8px,-14px)}10%{transform:translate(15px,-10px)}17%{transform:translate(23px,-24px)}20%{transform:translate(30px,-20px)}27%{transform:translate(38px,-34px)}30%{transform:translate(45px,-30px)}37%{transform:translate(53px,-44px)}40%{transform:translate(60px,-40px)}50%{transform:translate(60px,0)}57%{transform:translate(53px,-14px)}60%{transform:translate(45px,-10px)}67%{transform:translate(37px,-24px)}70%{transform:translate(30px,-20px)}77%{transform:translate(22px,-34px)}80%{transform:translate(15px,-30px)}87%{transform:translate(7px,-44px)}90%{transform:translate(0,-40px)}100%{transform:translate(0,0)}}
@keyframes barUp1{0%{transform:scale(1,0.2)}40%{transform:scale(1,0.2)}50%{transform:scale(1,1)}90%{transform:scale(1,1)}100%{transform:scale(1,0.2)}}
@keyframes barUp2{0%{transform:scale(1,0.4)}40%{transform:scale(1,0.4)}50%{transform:scale(1,0.8)}90%{transform:scale(1,0.8)}100%{transform:scale(1,0.4)}}
@keyframes barUp3{0%{transform:scale(1,0.6)}100%{transform:scale(1,0.6)}}
@keyframes barUp4{0%{transform:scale(1,0.8)}40%{transform:scale(1,0.8)}50%{transform:scale(1,0.4)}90%{transform:scale(1,0.4)}100%{transform:scale(1,0.8)}}
@keyframes barUp5{0%{transform:scale(1,1)}40%{transform:scale(1,1)}50%{transform:scale(1,0.2)}90%{transform:scale(1,0.2)}100%{transform:scale(1,1)}}

/* Utilities */
@media(min-width:1024px){.desktop-only{display:block}}
.hidden{display:none}