:root {
  --bg: #f4f3ee;
  --surface: #ffffff;
  --surface-2: #ebe9e2;
  --text: #101010;
  --muted: #686868;
  --line: rgba(16, 16, 16, 0.12);
  --line-strong: rgba(16, 16, 16, 0.24);
  --dark: #0a0a0a;
  --dark-text: #f5f4ef;
  --dark-muted: #a9a9a9;
  --accent: #78d6ff;
  --accent-2: #4bb9ef;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.08);
  --container: 1180px;
  --nav-h: 76px;
}
html[data-theme="dark"] { --bg:#0f1011; --surface:#17191a; --surface-2:#202325; --text:#f1f2f0; --muted:#a9acae; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.24); --shadow:0 24px 70px rgba(0,0,0,.35); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
body.menu-open { overflow:hidden; }
::selection { background:var(--accent); color:#081015; }
a { color:inherit; text-decoration:none; }
button { font:inherit; -webkit-tap-highlight-color:transparent; }
.container { width:min(calc(100% - 48px),var(--container)); margin-inline:auto; }
.section { padding:120px 0; position:relative; }
.section-light { background:var(--surface); }
.section-dark { background:var(--dark); color:var(--dark-text); }
.site-header { position:fixed; inset:0 0 auto; z-index:1000; border-bottom:1px solid transparent; transition:background .3s ease,backdrop-filter .3s ease,border-color .3s ease; }
.site-header.scrolled { background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(18px); border-bottom-color:var(--line); }
.nav-wrap { height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:11px; font-size:14px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; background:var(--text); color:var(--bg); border-radius:10px; font-size:11px; }
.desktop-nav { display:flex; gap:24px; align-items:center; }
.desktop-nav a { font-size:12px; color:var(--muted); transition:color .2s ease; position:relative; }
.desktop-nav a::after { content:""; position:absolute; left:0; bottom:-7px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
.desktop-nav a:hover,.desktop-nav a.active { color:var(--text); }
.desktop-nav a:hover::after,.desktop-nav a.active::after { transform:scaleX(1); transform-origin:left; }
.nav-actions { display:flex; align-items:center; gap:8px; }
.theme-toggle,.menu-toggle { width:38px; height:38px; border:1px solid var(--line); background:transparent; color:var(--text); border-radius:12px; cursor:pointer; display:grid; place-items:center; transition:.25s ease; }
.theme-toggle:hover,.menu-toggle:hover { transform:translateY(-2px); border-color:var(--line-strong); }
.theme-icon { font-size:16px; line-height:1; }
.menu-toggle { display:none; position:relative; }
.menu-toggle span { width:16px; height:1px; background:currentColor; transition:.25s ease; }
.menu-toggle span+span { margin-top:-5px; }
.menu-toggle.open span:first-child { transform:translateY(3px) rotate(45deg); }
.menu-toggle.open span:last-child { transform:translateY(-3px) rotate(-45deg); }
.mobile-nav { display:none; }
.hero { min-height:100vh; display:grid; place-items:center; padding-top:calc(var(--nav-h) + 60px); overflow:hidden; }
.hero::before { content:""; position:absolute; width:550px; height:550px; right:-180px; top:4%; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 70%); filter:blur(10px); pointer-events:none; }
.hero-grid { display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:clamp(50px,8vw,120px); }
.eyebrow,.kicker { font-size:11px; letter-spacing:.18em; font-weight:800; text-transform:uppercase; }
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--muted); }
.eyebrow span { width:30px; height:1px; background:currentColor; }
.hero h1 { margin:0; font-size:clamp(70px,11vw,154px); line-height:.83; letter-spacing:-.065em; font-weight:800; }
.hero h1 em,h2 em { font-style:normal; color:transparent; -webkit-text-stroke:1.2px currentColor; }
.hero-role { margin:36px 0 10px; font-size:17px; font-weight:600; max-width:750px; }
.hero-role span { color:var(--accent-2); padding-inline:4px; }
.hero-text { color:var(--muted); max-width:560px; font-size:15px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:16px; border-radius:999px; padding:13px 20px; font-size:12px; font-weight:800; letter-spacing:.03em; border:1px solid var(--line-strong); transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease; }
.btn span { font-size:16px; line-height:1; }
.btn-primary { background:var(--text); color:var(--bg); border-color:var(--text); box-shadow:0 14px 32px rgba(0,0,0,.12); }
.btn-primary:hover { box-shadow:0 18px 38px rgba(0,0,0,.18); }
.btn-secondary { color:var(--text); background:transparent; }
.btn-secondary:hover { background:var(--surface-2); }
.hero-meta { display:flex; gap:12px; margin-top:30px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.11em; flex-wrap:wrap; }
.hero-visual { justify-self:end; width:min(440px,100%); }
.visual-frame { position:relative; aspect-ratio:.83; border:1px solid var(--line-strong); background:linear-gradient(155deg,var(--surface-2),var(--surface)); border-radius:24px; overflow:hidden; box-shadow:var(--shadow); transform-style:preserve-3d; transition:transform .25s ease; }
.visual-frame::before { content:""; position:absolute; inset:22px; border:1px solid var(--line); border-radius:18px; }
.noise { position:absolute; inset:0; opacity:.11; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); pointer-events:none; mix-blend-mode:multiply; }
.orbit { position:absolute; border:1px solid color-mix(in srgb,var(--text) 24%,transparent); border-radius:50%; }
.orbit-a { width:300px;height:300px;right:-100px;top:-60px; }
.orbit-b { width:380px;height:180px;transform:rotate(-35deg);right:-100px;bottom:80px; }
.portrait-placeholder { position:absolute; inset:48px; border-radius:16px; background:linear-gradient(150deg,#161719,#35393d); color:#f1f1ef; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.portrait-placeholder::after { content:""; position:absolute; width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 40% 30%,var(--accent),transparent 65%);top:12%;right:-12%;opacity:.28;filter:blur(4px); }
.portrait-initials { position:relative;z-index:1;font-size:clamp(64px,8vw,106px);font-weight:800;letter-spacing:-.08em; }
.portrait-caption { position:absolute;left:20px;bottom:18px;z-index:2;font-size:9px;letter-spacing:.18em;line-height:1.7; }
.portrait-caption small { color:rgba(255,255,255,.55);font-size:inherit; }
.visual-label { position:absolute;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase; }
.label-top { left:30px;top:30px; }.label-bottom { right:30px;bottom:30px; }
.scroll-cue { position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:12px;align-items:center;color:var(--muted);font-size:10px;letter-spacing:.16em; }
.scroll-cue span { font-size:14px;animation:float 1.5s ease-in-out infinite; }
@keyframes float { 50% { transform:translateY(5px); } }
.two-col,.contact-wrap { display:grid;grid-template-columns:180px 1fr;gap:60px; }
.section-index { font-size:11px;font-weight:800;line-height:1.3;letter-spacing:.18em;color:var(--muted);text-transform:uppercase; }
.section-index span { color:var(--text); }
.kicker { margin:0 0 14px;color:var(--muted); }
h2 { margin:0;font-size:clamp(42px,6vw,78px);line-height:.95;letter-spacing:-.055em; }
.section-content>p:not(.kicker) { max-width:720px;color:var(--muted);font-size:16px; }
.stat-grid { margin-top:40px;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line); }
.stat-card { padding:22px 16px;min-height:105px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px; }
.stat-card:last-child { border-right:0; }.stat-card strong{font-size:19px;letter-spacing:-.02em}.stat-card span{color:var(--muted);font-size:11px}
.section-heading { display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:70px; }
.section-side-note { max-width:360px;margin:0;font-size:13px;color:var(--muted); }
.section-heading-dark .kicker,.section-heading-dark .section-side-note { color:var(--dark-muted); }
.timeline { position:relative;padding-left:190px; }.timeline::before{content:"";position:absolute;left:174px;top:16px;bottom:16px;width:1px;background:var(--line);}
.timeline-item { position:relative;display:grid;grid-template-columns:155px 1fr;gap:30px;margin-bottom:54px; }.timeline-item:last-child{margin-bottom:0}
.timeline-dot { position:absolute;left:169px;top:12px;width:10px;height:10px;border-radius:50%;background:var(--text);box-shadow:0 0 0 7px var(--surface);z-index:1; }
.timeline-year { padding-top:2px;font-size:11px;letter-spacing:.11em;color:var(--muted);font-weight:800; }
.timeline-card { border:1px solid var(--line);padding:30px;border-radius:var(--radius);background:var(--bg);transition:transform .25s ease,box-shadow .25s ease; }
.timeline-card:hover { transform:translateY(-4px);box-shadow:var(--shadow); }
.tag { display:inline-block;font-size:10px;letter-spacing:.14em;font-weight:800;padding:5px 8px;border:1px solid var(--line);border-radius:999px;color:var(--muted); }
.timeline-card h3 { margin:16px 0 4px;font-size:24px;letter-spacing:-.03em; }.timeline-role{margin:0;color:var(--muted)}
.pill-row { display:flex;flex-wrap:wrap;gap:8px;margin-top:18px; }.pill-row span,.tag-cloud span{padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:11px}
.experience-list,.org-list { border-top:1px solid rgba(255,255,255,.16); }.experience-item{border-bottom:1px solid rgba(255,255,255,.16)}
.experience-trigger,.org-trigger{width:100%;border:0;background:none;color:inherit;text-align:left;padding:26px 0;display:grid;grid-template-columns:70px 1fr 40px;align-items:center;gap:20px;cursor:pointer;}
.experience-no{font-size:11px;color:var(--dark-muted);letter-spacing:.14em}.experience-main strong,.org-main strong{font-size:clamp(18px,2.2vw,27px);letter-spacing:-.035em;display:block}.experience-main small,.org-main small{display:block;color:var(--dark-muted);font-size:11px;margin-top:6px}
.experience-arrow{width:34px;height:34px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:transform .25s ease,background .25s ease,color .25s ease}
.accordion-item.open .experience-arrow,.accordion-item.open .org-trigger>span:last-child{transform:rotate(45deg)}
.experience-details,.org-details{max-height:0;overflow:hidden;transition:max-height .4s ease,padding-bottom .4s ease;padding:0 0 0 90px}.accordion-item.open .experience-details,.accordion-item.open .org-details{max-height:520px;padding-bottom:28px}
.experience-details ul{margin:0;padding-left:18px;color:var(--dark-muted);font-size:14px}.experience-details li+li{margin-top:7px}
.org-list{border-top-color:var(--line)}.org-item{border-bottom:1px solid var(--line)}.org-trigger{grid-template-columns:54px 1fr 40px;padding:24px 0}.org-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--surface-2);font-size:11px;font-weight:800}.org-main small{color:var(--muted)}.org-details{padding-left:74px}.org-details p{color:var(--muted);margin:0;max-width:820px}
.skills-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.skills-block{background:var(--surface);min-height:235px;padding:32px}.skills-block h3{margin:0 0 20px;font-size:14px;text-transform:uppercase;letter-spacing:.12em}.tag-cloud{display:flex;flex-wrap:wrap;gap:9px}.language-row{display:flex;align-items:center;justify-content:space-between;gap:18px;border-bottom:1px solid var(--line);padding:14px 0;font-size:14px}.language-row:first-of-type{border-top:1px solid var(--line)}.language-row b{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}.certification-card{display:flex;flex-direction:column;justify-content:center}.certification-card strong{font-size:28px;letter-spacing:-.03em}.certification-card span{margin-top:6px;color:var(--muted);font-size:11px}
.work-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}.filter-btn{border:1px solid rgba(255,255,255,.18);color:var(--dark-muted);background:transparent;padding:9px 13px;border-radius:999px;cursor:pointer;font-size:11px;transition:.2s ease}.filter-btn:hover,.filter-btn.active{color:var(--dark);background:var(--dark-text);border-color:var(--dark-text)}
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.work-card{border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);overflow:hidden;background:#111314;transition:transform .25s ease,border-color .25s ease}.work-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.28)}.work-card.hidden{display:none}
.work-visual{aspect-ratio:16/10;display:grid;place-items:center;border-bottom:1px solid rgba(255,255,255,.12);overflow:hidden;position:relative}.work-visual::before,.work-visual::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.18)}.work-visual::before{width:240px;height:240px;transform:translate(-30px,-35px)}.work-visual::after{width:130px;height:130px;transform:translate(120px,45px)}.work-visual span{position:relative;z-index:1;font-size:36px;font-weight:800;letter-spacing:-.06em;color:rgba(255,255,255,.9)}
.visual-photo{background:radial-gradient(circle at 30% 30%,#8ddcff33,transparent 30%),linear-gradient(130deg,#181a1b,#32373a)}.visual-social{background:radial-gradient(circle at 65% 35%,#78d6ff28,transparent 28%),linear-gradient(145deg,#131415,#252a2c)}.visual-design{background:radial-gradient(circle at 30% 70%,#ffffff22,transparent 28%),linear-gradient(140deg,#1e2021,#343738)}.visual-digital{background:radial-gradient(circle at 70% 25%,#78d6ff30,transparent 24%),linear-gradient(140deg,#101112,#282d2f)}
.work-info{padding:24px}.work-info small{color:var(--dark-muted);letter-spacing:.13em;font-size:9px;font-weight:800}.work-info h3{font-size:24px;margin:8px 0 6px;letter-spacing:-.03em}.work-info p{margin:0;color:var(--dark-muted);font-size:13px}.works-note{margin:18px 0 0;color:#7f8385;font-size:11px}
.contact-section{padding-top:150px;padding-bottom:150px}.contact-wrap h2{max-width:850px}.contact-copy{color:var(--muted);max-width:630px;margin:28px 0 34px;font-size:15px}.contact-actions{display:flex;flex-wrap:wrap;gap:28px;align-items:center}.contact-email{font-size:clamp(18px,2.6vw,28px);font-weight:800;letter-spacing:-.03em;border-bottom:1px solid var(--line-strong);padding-bottom:8px}.contact-email span{color:var(--accent-2)}.social-links{display:flex;gap:18px;font-size:12px;color:var(--muted)}.social-links a:hover{color:var(--text)}
.footer{background:var(--text);color:var(--bg);padding:30px 0}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:30px;font-size:11px}.footer-inner strong{font-size:12px;display:block;letter-spacing:.08em}.footer-inner span{color:color-mix(in srgb,var(--bg) 58%,transparent);margin-left:10px}.footer-inner div:last-child{opacity:.7}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:translateY(0)}.delay-1{transition-delay:.08s}.delay-2{transition-delay:.16s}.delay-3{transition-delay:.24s}
.back-top{position:fixed;right:20px;bottom:20px;width:42px;height:42px;border:1px solid var(--line);border-radius:50%;background:var(--surface);color:var(--text);cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px);transition:.25s ease;box-shadow:0 10px 30px rgba(0,0,0,.1);z-index:900}.back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
.cursor-dot,.cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:3000;transform:translate(-50%,-50%)}.cursor-dot{width:6px;height:6px;border-radius:50%;background:var(--text)}.cursor-ring{width:30px;height:30px;border:1px solid var(--text);border-radius:50%;opacity:.45;transition:width .2s ease,height .2s ease,opacity .2s ease}.cursor-ring.hover{width:48px;height:48px;opacity:.25}
@media(max-width:950px){.desktop-nav{display:none}.menu-toggle{display:grid}.mobile-nav{padding:12px 24px 22px;border-top:1px solid var(--line);background:var(--bg)}.mobile-nav.open{display:grid}.mobile-nav a{padding:13px 0;font-size:14px;border-bottom:1px solid var(--line);color:var(--muted)}.hero-grid{grid-template-columns:1fr;gap:60px}.hero-visual{justify-self:start;width:min(460px,100%)}.two-col,.contact-wrap{grid-template-columns:1fr;gap:35px}.timeline{padding-left:0}.timeline::before,.timeline-dot{display:none}.timeline-item{grid-template-columns:1fr;gap:10px;margin-bottom:26px}}
@media(max-width:700px){:root{--container:100%}.container{width:min(calc(100% - 32px),var(--container))}.section{padding:86px 0}.hero{min-height:auto;padding-top:135px;padding-bottom:100px}.hero::before{width:350px;height:350px;right:-190px}.hero h1{font-size:clamp(62px,19vw,100px)}.hero-role{font-size:15px}.visual-frame{aspect-ratio:1/1.08}.portrait-placeholder{inset:34px}.stat-grid{grid-template-columns:repeat(2,1fr)}.stat-card:nth-child(2){border-right:0}.stat-card:nth-child(-n+2){border-bottom:1px solid var(--line)}.section-heading{flex-direction:column;align-items:flex-start;margin-bottom:45px}.skills-layout,.work-grid{grid-template-columns:1fr}.skills-block{min-height:auto}.experience-trigger,.org-trigger{grid-template-columns:42px 1fr 34px;gap:12px}.experience-details,.org-details{padding-left:54px}.experience-main strong,.org-main strong{font-size:17px}.experience-main small,.org-main small{font-size:10px}.work-info h3{font-size:21px}.footer-inner{flex-direction:column;align-items:flex-start}.footer-inner span{display:block;margin:4px 0 0}.cursor-dot,.cursor-ring{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}