:root{--bg:#EEF2F6;--card:#fff;--ink:#14213D;--mute:#5B6B82;--acc:#D9441B;--line:#CBD5E1;--on:#fff}
[data-theme=dark]{--bg:#0B1220;--card:#121B2E;--ink:#E6ECF5;--mute:#93A3BA;--acc:#FF7A4D;--line:#22304A;--on:#0B1220}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{font:16px/1.7 Manrope,system-ui,sans-serif;color:var(--ink);background:var(--bg);display:grid;grid-template-columns:300px 1fr;min-height:100vh;transition:background .3s,color .3s}
a{color:inherit}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

#side{position:sticky;top:0;height:100vh;padding:44px 32px;display:flex;flex-direction:column;gap:28px;border-right:1px solid var(--line)}
.name{font-size:1.9rem;line-height:1.15;font-weight:800}
.role{color:var(--mute);margin-top:6px}
nav{display:flex;flex-direction:column;gap:2px}
nav a{text-decoration:none;padding:5px 0 5px 14px;border-left:2px solid var(--line);color:var(--mute);transition:.2s}
nav a:hover,nav a.on{color:var(--ink);border-color:var(--acc)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:16px}
.theme{font:inherit;font-weight:600;color:var(--ink);background:none;border:1px solid var(--line);border-radius:99px;padding:7px 16px;cursor:pointer;width:max-content}
.theme:hover{border-color:var(--acc)}
.links{display:flex;gap:16px;font-size:.92rem}
.links a{color:var(--mute);text-underline-offset:3px}.links a:hover{color:var(--acc)}

main{padding:0 7vw 40px;max-width:980px;width:100%}
.hero{position:relative;min-height:88vh;display:flex;flex-direction:column;justify-content:center;gap:18px;isolation:isolate}
.hero-bg{position:absolute;inset:0 -7vw 0 -7vw;z-index:-1;
background:radial-gradient(55% 55% at 85% 12%,color-mix(in srgb,var(--acc) 24%,transparent),transparent 70%),
radial-gradient(45% 50% at 5% 95%,color-mix(in srgb,var(--ink) 12%,transparent),transparent 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ccircle cx='2' cy='2' r='1.3' fill='%238899AA' fill-opacity='.55'/%3E%3C/svg%3E");
-webkit-mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent);mask-image:radial-gradient(70% 70% at 70% 30%,#000,transparent)}
.hi{color:var(--mute);font-weight:500}
.hero h2{font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.08;font-weight:800;letter-spacing:-.03em;max-width:15ch}
#tw{color:var(--acc)}
.cur{display:inline-block;width:.07em;height:.9em;margin-left:.08em;background:var(--acc);vertical-align:-.05em;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.lead{max-width:52ch;color:var(--mute);font-size:1.1rem}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;color:var(--ink);padding:11px 24px;border:1px solid var(--line);border-radius:99px;background:none;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--acc);border-color:var(--acc);color:var(--on)}
.btn.primary:hover{filter:brightness(1.1)}

section{padding:72px 0 8px;max-width:760px}
.sec{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-bottom:20px;display:flex;align-items:center;gap:16px}
.sec::after{content:"";flex:1;height:1px;background:var(--line)}
section p+p{margin-top:14px}
h3{font-size:1.05rem;font-weight:600}
.skills{display:grid;grid-template-columns:repeat(2,1fr);gap:26px 32px}
.skills h3{margin-bottom:10px}
.tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.tags li{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 13px;font-size:.88rem}

.timeline{list-style:none;padding:0 0 0 26px;border-left:2px solid var(--line)}
.timeline li{position:relative;padding-bottom:30px}
.timeline li::before{content:"";position:absolute;left:-33px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--bg);border:2px solid var(--acc)}
.timeline time{color:var(--acc);font-weight:600;font-size:.9rem}
.org{color:var(--mute);font-size:.95rem}
.timeline li p:last-child{margin-top:6px}

.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s}
.card:hover{border-color:var(--acc)}
.card.wide{grid-column:1/-1;border-left:4px solid var(--acc)}
.card p{color:var(--mute)}
.pl{display:flex;gap:18px;margin-top:auto;font-weight:600;font-size:.92rem}
.pl a{color:var(--acc);text-underline-offset:3px}

form{display:grid;gap:16px;margin-top:22px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:grid;gap:6px;font-weight:600;font-size:.92rem}
input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:10px;padding:11px 14px;width:100%}
input:focus,textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 25%,transparent)}
form .btn{width:max-content}
.bot{position:absolute;left:-9999px}
#status{min-height:1.5em;font-weight:500}
#status.ok{color:#1a8f4d}#status.err{color:#d6336c}
footer{margin-top:64px;padding-top:20px;border-top:1px solid var(--line);color:var(--mute);font-size:.9rem}

.menu-btn{display:none}
@media(max-width:860px){
body{display:block}
.menu-btn{display:flex;flex-direction:column;gap:5px;position:fixed;top:14px;right:14px;z-index:20;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer}
.menu-btn i{width:20px;height:2px;background:var(--ink)}
#side{position:fixed;inset:0 auto 0 0;width:min(300px,85vw);height:100%;z-index:10;background:var(--bg);transform:translateX(-100%);transition:transform .3s}
#side.open{transform:none}
main{padding:0 22px 32px}
.hero-bg{inset:0 -22px}
.hero h2{max-width:none}
.skills,.grid,.row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}