:root{color-scheme:light;--bg:#f6f7fb;--text:#0b1220;--muted:#3f4a60;--card:#fff;--card-elevated:rgba(255,255,255,0.92);--border:#e5e8ef;--accent:#2f6df6;--accent-soft:rgba(47,109,246,0.12);--shadow:0 26px 44px rgba(14,24,44,0.14);--radius-lg:20px;--dur-enter:700ms;--dur-stagger:110ms;--dur-hover:180ms;--ease-enter:cubic-bezier(0.22,1,0.36,1);--ease-hover:ease-out}
[data-theme="dark"]{color-scheme:dark;--bg:#0e1116;--text:#e8ecf3;--muted:#9ca7bc;--card:#151a22;--card-elevated:rgba(21,26,34,0.92);--border:#222733;--accent:#68a0ff;--accent-soft:rgba(104,160,255,0.18);--shadow:0 32px 50px rgba(2,5,12,0.55)}
*{box-sizing:border-box}
html{scroll-behavior:auto}
body{min-height:100vh;margin:0;background:var(--bg);color:var(--text);font-size:1rem;font-weight:400;transition:background var(--dur-enter)var(--ease-enter),color var(--dur-enter)var(--ease-enter)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:is(a,button):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button{font:inherit;color:inherit}
section{scroll-margin-top:clamp(5rem,10vw,7rem)}
.container{max-width:1080px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3rem)}
.site-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(18px);background:var(--card-elevated);border-bottom:1px solid var(--border);transition:background var(--dur-enter)var(--ease-enter),border-color var(--dur-enter)var(--ease-enter)}
.header-inner{display:flex;align-items:center;gap:1rem;padding-block:1.05rem}
.brand{display:inline-flex;align-items:center;gap:.75rem;font-weight:600}
.brand-text{letter-spacing:.01em}
.avatar{position:relative;aspect-ratio:1/1;border-radius:9999px;overflow:hidden;display:grid;place-items:center;background:var(--card);isolation:isolate;transition:opacity var(--dur-enter)var(--ease-enter),transform var(--dur-enter)var(--ease-enter)}
.avatar::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 2.5px var(--accent);pointer-events:none}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-fallback{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:700;letter-spacing:.12em;color:var(--accent);background:var(--accent-soft);opacity:0;transition:opacity var(--dur-enter)var(--ease-enter)}
.avatar.is-fallback .avatar-fallback{opacity:1}
.avatar--hero{width:clamp(152px,32vw,192px)}
.avatar--nav{width:2.1rem;min-width:2.1rem;opacity:0;transform:translateY(6px)}
body.is-ready .avatar--nav{opacity:1;transform:translateY(0)}
.site-nav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0}
.nav-link{position:relative;display:inline-flex;align-items:center;font-weight:500;padding-block:.35rem;transition:color var(--dur-hover)var(--ease-hover)}
.nav-link::after{content:"";position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(.18);transform-origin:left;opacity:0;transition:transform var(--dur-hover)var(--ease-hover),opacity var(--dur-hover)var(--ease-hover)}
.nav-link:hover,.nav-link:focus-visible{color:var(--accent)}
.nav-link:hover::after,.nav-link:focus-visible::after,.nav-link.is-active::after{transform:scaleX(1);opacity:1}
.nav-link.is-active{color:var(--accent)}
.nav-toggle{display:none;flex-direction:column;gap:.32rem;border:0;background:none;padding:.4rem;cursor:pointer}
.nav-toggle-bar{width:1.5rem;height:.14rem;border-radius:999px;background:var(--text);transition:transform var(--dur-hover)var(--ease-hover),opacity var(--dur-hover)var(--ease-hover)}
.theme-toggle{margin-left:auto;border:1px solid var(--border);background:var(--card);border-radius:999px;padding:.4rem .75rem;display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;transition:transform var(--dur-hover)var(--ease-hover),box-shadow var(--dur-hover)var(--ease-hover),border-color var(--dur-hover)var(--ease-hover)}
.theme-toggle:hover,.theme-toggle:focus-visible{transform:translateY(-1px);box-shadow:var(--shadow);border-color:var(--accent)}
.icon-sun,.icon-moon{width:1rem;height:1rem;position:relative;display:inline-block}
.icon-sun::before,.icon-moon::before{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:.95}
.icon-moon::after{content:"";position:absolute;top:0;right:0;width:60%;height:60%;border-radius:50%;background:var(--card)}
main{display:grid;gap:clamp(3.2rem,6vw,5rem)}
.hero{padding-block:clamp(4.6rem,8vw,6.2rem) clamp(2.6rem,6vw,4.6rem)}
.hero-content{display:grid;gap:clamp(2rem,6vw,4rem);align-items:center}
.hero h1{margin:0;font-size:clamp(2.9rem,6vw,3.8rem);line-height:1.05}
.hero-kicker{font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-size:.85rem;margin:0}
.hero-tagline{margin:0;font-size:clamp(1.35rem,3vw,1.8rem);color:var(--muted);font-weight:600}
.hero-lede{margin:0;color:var(--muted);max-width:62ch;font-size:clamp(1.05rem,2.4vw,1.25rem)}
.hero-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.85rem 1.6rem;border-radius:999px;border:1px solid transparent;background:var(--accent);color:#fff;font-weight:600;transition:transform var(--dur-hover)var(--ease-hover),box-shadow var(--dur-hover)var(--ease-hover);box-shadow:var(--shadow)}
.btn:hover,.btn:focus-visible{transform:translateY(-2px) scale(1.01);box-shadow:0 32px 56px rgba(47,109,246,.28)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text);box-shadow:none;transition:border-color var(--dur-hover)var(--ease-hover),color var(--dur-hover)var(--ease-hover)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--accent);color:var(--accent)}
.section-content{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.section-header h2{margin:0;font-size:clamp(2.1rem,3.6vw,2.6rem);position:relative}
.section-header h2::after{content:"";position:absolute;left:0;bottom:-.5rem;width:3rem;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;opacity:0;transition:transform 400ms var(--ease-enter),opacity 400ms var(--ease-enter)}
.section-header p,.section-body p{margin:0;color:var(--muted);max-width:65ch}
section.is-anchor-target .section-header h2::after{transform:scaleX(1);opacity:1}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem}
.skill{display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:999px;border:1px solid var(--border);background:var(--card);box-shadow:0 14px 30px rgba(15,23,42,.12);transition:transform var(--dur-hover)var(--ease-hover),box-shadow var(--dur-hover)var(--ease-hover),border-color var(--dur-hover)var(--ease-hover)}
.skill:hover,.skill:focus-within{transform:translateY(-4px);box-shadow:0 28px 48px rgba(15,23,42,.2);border-color:color-mix(in srgb,var(--skill-color) 40%,var(--border))}
.skill-icon{width:1.95rem;height:1.95rem;flex-shrink:0}
.projects-grid{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.featured{display:grid;gap:1.1rem}
.featured-heading{margin:0;font-size:1.4rem;color:var(--muted)}
.featured-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.project-card{display:grid;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--dur-hover)var(--ease-hover),box-shadow var(--dur-hover)var(--ease-hover),opacity var(--dur-enter)var(--ease-enter);opacity:0;transform:translateY(24px);transition-delay:var(--delay,0ms)}
.project-card:hover,.project-card:focus-within{transform:translateY(-6px);box-shadow:0 36px 62px rgba(12,18,32,.26)}
.projects-grid .project-card.reveal,[data-reveal-group].reveal .project-card,.project-card.reveal{opacity:1;transform:translateY(0)}
.project-media{position:relative;background:var(--card-elevated)}
.project-shimmer{position:absolute;inset:0;border-bottom:1px solid var(--border);background:linear-gradient(120deg,rgba(255,255,255,.08),rgba(47,109,246,.24),rgba(255,255,255,.08));background-size:200% 100%;animation:shimmer 2.8s linear infinite}
.project-preview{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--border);opacity:0;transition:opacity var(--dur-enter)var(--ease-enter)}
.project-media.ready .project-preview{opacity:1}
.project-media.ready .project-shimmer{opacity:0;pointer-events:none}
.project-fallback{display:grid;place-items:center;padding:2.3rem 1.5rem;border-bottom:1px solid var(--border);gap:.75rem;text-align:center}
.project-fallback.favicon{padding:2.5rem}
.favicon-wrap{width:120px;height:120px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(47,109,246,.08));display:grid;place-items:center;box-shadow:0 20px 38px rgba(15,23,42,.16)}
.favicon-wrap img{width:72px;height:72px;object-fit:contain}
.project-body{display:grid;gap:1rem;padding:1.8rem}
.featured-card .project-body{gap:1.15rem;padding:2rem}
.project-title{margin:0;font-size:1.25rem}
.featured-card .project-title{font-size:1.5rem}
.project-meta{margin:0;color:var(--muted);font-size:.92rem}
.featured-card .project-meta{font-size:1rem;margin-top:.35rem}
.project-description{margin:0;color:var(--muted)}
.project-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.project-tags span{padding:.3rem .65rem;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.75rem;letter-spacing:.02em}
.project-links{display:inline-flex;gap:1rem;flex-wrap:wrap}
.featured-links{display:flex;flex-wrap:wrap;gap:.75rem}
.project-loading{color:var(--muted);font-style:italic}
.projects-notice{margin:0;padding:1rem 1.2rem;border-radius:var(--radius-lg);background:var(--accent-soft);color:var(--accent);font-weight:600}
.projects-empty{margin:0;padding:1rem 1.2rem;border-radius:var(--radius-lg);background:var(--card);border:1px dashed var(--border);color:var(--muted);font-style:italic}
.text-link{display:inline-flex;align-items:center;gap:.3rem;color:var(--accent);font-weight:600;position:relative;transition:color var(--dur-hover)var(--ease-hover)}
.text-link::after{content:"→";font-size:.9em;transition:transform var(--dur-hover)var(--ease-hover)}
.text-link:hover::after,.text-link:focus-visible::after{transform:translateX(3px)}
.projects-fallback{margin:1.5rem 0 0;padding-left:1.2rem}
.contact-links{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.site-footer{border-top:1px solid var(--border);background:var(--card-elevated);padding-block:clamp(2rem,5vw,3rem);transition:background var(--dur-enter)var(--ease-enter),border-color var(--dur-enter)var(--ease-enter)}
.footer-inner{text-align:center;color:var(--muted)}
[data-reveal]{opacity:0;transform:translateY(32px);transition:opacity var(--dur-enter)var(--ease-enter),transform var(--dur-enter)var(--ease-enter)}
[data-reveal].reveal{opacity:1;transform:translateY(0)}
[data-reveal-group] [data-reveal-item]{opacity:0;transform:translateY(20px);transition:opacity var(--dur-enter)var(--ease-enter),transform var(--dur-enter)var(--ease-enter);transition-delay:calc(var(--dur-stagger)*var(--reveal-index,0))}
[data-reveal-group].reveal [data-reveal-item]{opacity:1;transform:translateY(0)}
.hero [data-animate]{opacity:0;transform:translateY(14px);transition:opacity var(--dur-enter)var(--ease-enter),transform var(--dur-enter)var(--ease-enter);transition-delay:var(--delay,0ms)}
body.is-ready .hero [data-animate]{opacity:1;transform:translateY(0)}
@keyframes shimmer{to{background-position:-200% 0}}
@media (min-width:880px){.hero-content{grid-template-columns:minmax(0,260px) minmax(0,1fr)}.featured-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.header-inner{flex-wrap:wrap}.nav-toggle{display:inline-flex}.site-nav{width:100%;display:none}.site-nav.open{display:block}.site-nav ul{flex-direction:column;align-items:flex-start;padding:1rem 0 0}.theme-toggle{order:3}.hero-content{text-align:center}.hero-copy{display:grid;justify-items:center}.hero-cta{justify-content:center}.avatar--nav{margin-left:auto;order:-1}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}[data-reveal],[data-reveal-item],.hero [data-animate]{transform:none!important}}