@font-face{font-family:Onest;font-weight:400;font-display:swap;src:url(assets/fonts/onest-400.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:500;font-display:swap;src:url(assets/fonts/onest-500.woff2) format("woff2")}
@font-face{font-family:Onest;font-weight:700;font-display:swap;src:url(assets/fonts/onest-700.woff2) format("woff2")}

:root{
  --bg:#f7fbfc; --card:#ffffff; --soft:#eaf3f5; --ink:#0b2a33; --mute:#58727a; --line:#0b2a331f;
  --btn:#0b2a33; --btn-ink:#f7fbfc; --accent:#0a6f8a; --accent2:#095169; --shadow:0 20px 50px -25px #0b2a3355;
  color-scheme:light;
}
.dark{
  --bg:#0a0a0a; --card:#121212; --soft:#171717; --ink:#ececec; --mute:#a1a1aa; --line:#ffffff1a;
  --btn:#f2f2f2; --btn-ink:#0a0a0a; --accent:#4cc3d9; --accent2:#7ee0ee; --shadow:0 20px 50px -25px #000;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font:400 16px/1.65 Onest,system-ui,sans-serif;-webkit-font-smoothing:antialiased;transition:background .4s,color .4s;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;display:block;height:auto}
svg{width:20px;height:20px;fill:currentColor;flex:none}
svg.stroke,.btn svg,.theme svg,.chip svg,.i-sun,.i-moon{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chip svg{fill:none}
h1,h2,h3,h4,h5{line-height:1.1;letter-spacing:-.03em}
.wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

/* blur-in reveal */
.rv{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .8s ease,transform .8s ease,filter .8s ease;transition-delay:var(--rd,0s)}
.rv.in{opacity:1;transform:none;filter:none}

/* nav */
.nav-wrap{position:fixed;z-index:50;top:14px;left:0;right:0;display:flex;justify-content:center;padding-inline:14px;pointer-events:none}
.nav{pointer-events:auto;width:100%;max-width:1000px;display:flex;align-items:center;gap:14px;padding:9px 12px 9px 26px;border-radius:999px;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow)}
.brand{font-weight:700;font-size:19px;letter-spacing:-.02em;text-decoration:none}
.brand span{color:var(--accent)}
.nav nav{display:flex;gap:4px;margin-left:auto}
.nav nav a{padding:8px 16px;border-radius:999px;text-decoration:none;color:var(--mute);font-size:14.5px;font-weight:500;transition:.25s}
.nav nav a:hover{color:var(--ink)}
.nav nav a.on{color:var(--ink);background:var(--soft);font-weight:700}
.theme{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:.25s}
.theme:hover{background:var(--soft);transform:rotate(18deg)}
.i-moon{display:none}.i-sun{display:block}
.dark .i-sun{display:none}.dark .i-moon{display:block}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center;min-height:100svh;padding-top:104px;padding-bottom:40px}
.status{display:inline-flex;align-items:center;gap:10px;padding:6px 15px;border:1px solid var(--line);border-radius:999px;color:var(--mute);font-size:14px;margin-bottom:22px;background:var(--card)}
.ping{position:relative;width:8px;height:8px;border-radius:50%;background:#22c55e}
.ping::after{content:"";position:absolute;inset:0;border-radius:50%;background:#22c55e;animation:ping 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{75%,to{transform:scale(2.6);opacity:0}}
h1{font-size:clamp(36px,4.3vw,62px);font-weight:700;line-height:1.06}
.soft{background:linear-gradient(90deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.typed{margin-top:10px;font-size:clamp(20px,2.2vw,30px);font-weight:700;letter-spacing:-.02em;min-height:1.4em}
.cursor{margin-left:2px;font-weight:300;color:var(--mute);animation:blink 1s infinite}
@keyframes blink{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
.intro{margin-top:14px;max-width:58ch;color:var(--mute);font-size:clamp(16px,1.5vw,18px);font-weight:500}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 30px;border-radius:8px;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;transition:all .3s ease-out}
.btn svg{width:19px;height:19px}
.btn.solid{background:var(--btn);color:var(--btn-ink);border:2px solid var(--btn)}
.btn.line{background:color-mix(in srgb,var(--bg) 60%,transparent);border:2px solid var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-6px) scale(1.02);box-shadow:var(--shadow)}
.btn.line:hover{border-color:var(--ink)}
.btn:hover svg{transform:translateX(3px)}
.btn svg{transition:transform .3s}
.connect{margin-top:30px;padding-top:20px;border-top:1px solid var(--line)}
.label{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.socials{display:flex;gap:12px;margin-top:14px}
.socials a{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:8px;transition:.3s}
.socials a:hover{background:var(--btn);color:var(--btn-ink);border-color:var(--btn);transform:translateY(-4px)}

.hero-art{position:relative;display:grid;place-items:center;margin-top:20px}
.aura{position:absolute;width:100%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,var(--accent),transparent 70%);opacity:.35;filter:blur(40px);transform:scale(1.05)}
.avatar{position:relative;width:min(100%,min(400px,56vh));aspect-ratio:1;padding:8px;border-radius:50%;background:var(--bg);border:1px solid var(--line);box-shadow:var(--shadow);cursor:pointer}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:filter .8s}
.avatar:hover img{filter:saturate(1.3) hue-rotate(-16deg) brightness(1.06)}
.aura{transition:filter .8s,opacity .8s}
.hero-art:hover .aura{filter:blur(40px) hue-rotate(150deg);opacity:.5}
.avatar{transition:box-shadow .8s,border-color .8s}
.avatar:hover{border-color:#ff9a5c;box-shadow:0 0 0 6px #ff9a5c33,var(--shadow)}
.floating{animation:float 4.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.chips{position:absolute;left:-4%;bottom:-6%;display:flex;flex-direction:column;gap:12px;z-index:2}
.chip{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow);font-size:14px;font-weight:700;white-space:nowrap;animation:float 4.5s ease-in-out infinite,chipin .7s both;animation-delay:var(--d),calc(1.2s + var(--d))}
.chip i{display:grid;place-items:center;width:36px;height:36px;border-radius:8px;background:var(--btn);color:var(--btn-ink)}
.chip i svg{width:18px;height:18px}
.chip span{display:flex;flex-direction:column;line-height:1.25}
.chip small{font-size:12px;font-weight:500;color:var(--mute)}
@keyframes chipin{from{opacity:0;transform:translateY(24px)}}

/* sections */
.sec{padding-block:clamp(70px,10vw,120px);border-top:1px solid var(--line)}
.head{margin-bottom:clamp(36px,6vw,70px)}
.head h3{font-size:clamp(36px,5.6vw,68px);font-weight:700;margin-top:12px}
h4{font-size:22px;font-weight:700}

.about{display:grid;grid-template-columns:.85fr 1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.about-photo{border-radius:12px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.about-photo img{width:100%;aspect-ratio:1;object-fit:cover;transition:filter .8s,transform .7s}
.about-photo:hover img{filter:saturate(1.3) hue-rotate(-16deg) brightness(1.06);transform:scale(1.04)}
.about h4{font-size:19px;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.about-text h4~h4{margin-top:30px}
.about p{color:var(--mute);font-weight:500}
.about dl div{padding:12px 0;border-bottom:1px solid var(--line)}
.about dt{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mute)}
.about dd{font-weight:700;margin-top:2px;font-size:15px}
.about dd a{text-decoration:none;border-bottom:1px solid var(--accent)}

.ticker{overflow:hidden;border-block:1px solid var(--line);padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-track{display:flex;gap:56px;width:max-content;animation:slide 34s linear infinite}
.ticker span{font-size:clamp(28px,5vw,56px);font-weight:700;letter-spacing:-.03em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.4px var(--mute)}
.ticker span.rl{-webkit-text-stroke:0;color:var(--accent);opacity:.85}
@keyframes slide{to{transform:translateX(-50%)}}

.exp-list{display:flex;flex-direction:column}
.exp{display:grid;grid-template-columns:1fr 3fr;gap:12px 32px;padding:32px;margin-inline:-32px;border-radius:12px;border:1px solid transparent;transition:all .5s}
.exp time{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--mute);padding-top:8px}
.exp h5{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin:8px 0 10px;font-weight:700}
.exp p{color:var(--mute);max-width:70ch;font-weight:500}
.exp-list:hover .exp.in{opacity:.4;filter:blur(2px)}
.exp-list .exp.in:hover{opacity:1;filter:none;background:var(--soft);border-color:var(--line);box-shadow:var(--shadow)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px!important}
.tags i{font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:6px;background:var(--soft);color:var(--ink)}
.photos{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:56px}
.photos figure{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.photos img{width:100%;height:100%;min-height:260px;object-fit:cover;transition:transform .8s}
.photos figure:hover img{transform:scale(1.05)}
.photos figcaption{position:absolute;left:14px;bottom:14px;padding:6px 15px;border-radius:999px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);font-size:13px;font-weight:700}

.stack{display:flex;flex-direction:column;gap:56px}
.cat{display:grid;grid-template-columns:1fr 2fr;gap:24px 56px;align-items:start}
.cat p{color:var(--mute);font-weight:500;margin-top:6px;font-size:14.5px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px}
.tile{display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px 10px;border-radius:10px;border:1px solid var(--line);background:color-mix(in srgb,var(--soft) 55%,transparent);font-size:13.5px;font-weight:700;text-align:center;transition:all .3s}
.tile b{display:grid;place-items:center;width:46px;height:46px;border-radius:8px;background:var(--btn);color:var(--btn-ink);font-size:15px;letter-spacing:-.02em}
.tile:hover{transform:translateY(-8px);border-color:var(--accent);background:var(--soft)}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--card);cursor:pointer;position:relative;transition:border-color .5s,box-shadow .5s,transform .5s}
.card:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-6px)}
.shot{position:relative;overflow:hidden;aspect-ratio:16/10;border-bottom:1px solid var(--line);background:var(--soft)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s}
.card:hover .shot img{transform:scale(1.06)}
.shot-tags{position:absolute;top:14px;right:14px;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;opacity:0;transform:translateY(-10px);transition:.5s}
.card:hover .shot-tags,.card:focus-visible .shot-tags{opacity:1;transform:none}
.shot-tags i{font-style:normal;font-size:11px;font-weight:700;padding:4px 11px;border-radius:999px;background:#061014d9;color:#fff;backdrop-filter:blur(6px)}
.no{position:absolute;right:14px;bottom:12px;font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(6px)}
.card-body{padding:24px;display:flex;flex-direction:column;gap:10px;flex:1}
.card-body p{color:var(--mute);font-weight:500;font-size:14.5px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.more{margin-top:auto;padding-top:8px;font-size:13px;font-weight:700;color:var(--accent)}
.more::after{content:" \2192";transition:margin .3s}
.card:hover .more::after{margin-left:6px}
.glare::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(-45deg,transparent 60%,#ffffff40 70%,transparent 100%);background-size:250% 250%;background-position:-100% -100%;background-repeat:no-repeat;transition:background-position .65s ease}
.glare:hover::before{background-position:100% 100%}

.sub{font-size:clamp(26px,3.6vw,40px);margin:clamp(60px,8vw,100px) 0 28px}
.awards{list-style:none;padding:0;display:grid;gap:16px}
.awards li{display:flex;gap:22px;align-items:flex-start;padding:26px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:.4s}
.awards li:hover{border-color:var(--accent);transform:translateY(-4px)}
.awards b{flex:none;display:grid;place-items:center;width:62px;height:62px;border-radius:10px;background:var(--btn);color:var(--btn-ink);font-size:19px}
.awards p{color:var(--mute);margin-top:6px;font-weight:500}

.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,60px);align-items:start}
.pitch .big{font-size:clamp(26px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.pitch p+p{margin-top:16px;color:var(--mute);font-weight:500}
.links-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lk{display:flex;align-items:center;gap:14px;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--card);text-decoration:none;transition:.3s}
.lk i{display:grid;place-items:center;width:44px;height:44px;border-radius:8px;background:var(--soft);flex:none}
.lk b{display:block;font-size:15px}
.lk span{font-size:13px;color:var(--mute);font-weight:500;word-break:break-all}
.lk:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
footer{padding-block:50px 60px;text-align:center;color:var(--mute);font-size:14px;font-weight:500}
.blade{display:block;height:2px;margin:0 auto 22px;width:min(420px,70%);background:linear-gradient(90deg,transparent,var(--accent),transparent)}

/* modal */
dialog{border:0;padding:0;background:transparent;max-width:min(960px,94vw);width:100%;color:var(--ink);margin:auto}
dialog::backdrop{background:#02080cb3;backdrop-filter:blur(6px)}
.m-box{position:relative;max-height:90vh;overflow:auto;border-radius:14px;border:1px solid var(--line);background:var(--bg);padding:clamp(20px,4vw,40px);animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(24px) scale(.97)}}
.m-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:24px;cursor:pointer;z-index:3}
.m-box h3{font-size:clamp(28px,4vw,42px);margin:6px 0 8px;padding-right:44px}
.m-box .sub-meta{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.m-box .lead{color:var(--mute);font-weight:500;max-width:68ch}
.m-gallery{display:grid;gap:12px;margin:22px 0}
.m-gallery.two{grid-template-columns:1fr 1fr}
.m-gallery img{border-radius:8px;border:1px solid var(--line);width:100%}
.m-phones{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 22px}
.m-phones img{border-radius:10px;border:1px solid var(--line);width:100%}
.m-stats{display:flex;flex-wrap:wrap;gap:20px 44px;margin:20px 0;padding-block:18px;border-block:1px solid var(--line)}
.m-stats b{display:block;font-size:30px;color:var(--accent);line-height:1.1}
.m-stats span{font-size:13px;color:var(--mute);font-weight:500}
.m-box ul{padding-left:20px;display:grid;gap:8px;color:var(--mute);font-weight:500;max-width:72ch}
.m-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.m-links a{padding:10px 18px;border:1px solid var(--line);border-radius:8px;text-decoration:none;font-weight:700;font-size:14px;transition:.25s}
.m-links a:hover{background:var(--btn);color:var(--btn-ink);border-color:var(--btn)}
.m-note{margin-top:18px;padding-left:12px;border-left:3px solid #d9b44a;font-size:13.5px;color:var(--mute);font-weight:500}

@media(max-width:960px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:110px}
  .hero-art{order:-1;margin-bottom:60px}
  .avatar{width:min(78%,340px)}
  .chips{left:0;bottom:-40px;transform:scale(.86);transform-origin:left bottom}
  .about,.cat,.contact{grid-template-columns:1fr}
  .about-photo{max-width:340px}
  .cards{grid-template-columns:1fr;gap:20px}
  .exp{grid-template-columns:1fr;padding:22px;margin-inline:-22px}
  .photos{grid-template-columns:1fr}
  .nav nav{display:none}
  .theme{margin-left:auto}
}
@media(max-width:560px){
  .links-grid{grid-template-columns:1fr}
  .m-gallery.two{grid-template-columns:1fr}
  .m-phones{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none;filter:none}
}

/* loader */
html.loading,html.loading body{overflow:hidden}
#loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;color:#ececec;pointer-events:all}
.ld-half{position:absolute;left:0;right:0;height:50.2%;background:#0a0a0a;transition:transform .9s cubic-bezier(.76,0,.24,1)}
.ld-half::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 100%,#4cc3d91f,transparent 60%)}
.ld-top{top:0}.ld-top::after{transform:scaleY(-1)}
.ld-bot{bottom:0}
.ld-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px;transition:opacity .35s,transform .35s}
.ld-mark{width:84px;height:84px;fill:#4cc3d900;stroke:#4cc3d9;stroke-width:.9;stroke-linejoin:round;stroke-dasharray:90;stroke-dashoffset:90;animation:draw 1.1s .15s ease forwards,fillin .6s 1.1s ease forwards;filter:drop-shadow(0 0 12px #4cc3d966)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill:#4cc3d9;stroke-width:0}}
.ld-name{display:flex;gap:.05em;font-weight:700;font-size:clamp(30px,6vw,52px);letter-spacing:-.02em}
.ld-name span{display:inline-block;opacity:0;transform:translateY(60%);filter:blur(6px);animation:letter .6s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.5s + var(--i) * .05s)}
.ld-name span.sp{width:.35em}
@keyframes letter{to{opacity:1;transform:none;filter:none}}
.ld-sub{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#a1a1aa;opacity:0;animation:letter .6s 1.1s forwards}
.ld-sub i{width:5px;height:5px;border-radius:50%;background:#4cc3d9;animation:blink 1s infinite}
.ld-bar{width:min(320px,70vw);height:2px;background:#ffffff1f;border-radius:2px;overflow:hidden}
.ld-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#4cc3d9,#fff);transform-origin:left;transform:scaleX(0)}
.ld-count{font-size:13px;color:#a1a1aa;font-weight:500;font-variant-numeric:tabular-nums}
.ld-count b{font-size:15px;color:#ececec}
.ld-slash{position:absolute;z-index:3;left:-5%;top:50%;width:110%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#fff 30%,#7ee0ee 70%,transparent);box-shadow:0 0 18px 3px #7ee0eeaa,0 0 60px 10px #4cc3d955;transform:scaleX(0);transform-origin:left;opacity:0}
#loader.go .ld-center{opacity:0;transform:scale(.96)}
#loader.go .ld-slash{opacity:1;animation:slash .35s .25s cubic-bezier(.7,0,.2,1) forwards,slashout .3s .75s forwards}
@keyframes slash{to{transform:scaleX(1)}}
@keyframes slashout{to{opacity:0}}
#loader.go .ld-top{transform:translateY(-101%);transition-delay:.6s}
#loader.go .ld-bot{transform:translateY(101%);transition-delay:.6s}
#loader.done{display:none}
@media(prefers-reduced-motion:reduce){
  .ld-mark,.ld-name span,.ld-sub{animation:none!important;opacity:1;transform:none;filter:none;fill:#4cc3d9;stroke-dashoffset:0}
}

/* certificates */
.awards li{align-items:center}
.awards li>div{flex:1;min-width:0}
.cert-note{font-size:13px;color:var(--accent)!important;font-weight:700}
.cert{position:relative;flex:none;width:190px;padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--soft);cursor:pointer;transition:.3s}
.cert img{width:100%;height:auto;aspect-ratio:1.4;object-fit:cover;transition:transform .6s}
.cert span{position:absolute;inset:auto 0 0 0;padding:6px;font:700 12px/1 Onest,system-ui,sans-serif;color:#fff;background:linear-gradient(transparent,#000c);text-align:center;opacity:0;transition:.3s}
.cert:hover{border-color:var(--accent);transform:translateY(-3px)}
.cert:hover img{transform:scale(1.06)}
.cert:hover span,.cert:focus-visible span{opacity:1}
.m-cert img{width:100%;border-radius:8px;border:1px solid var(--line)}
@media(max-width:700px){.awards li{flex-wrap:wrap}.cert{width:100%}.cert span{opacity:1}}

.exp-points{padding-left:18px;display:grid;gap:8px;color:var(--mute);font-weight:500;max-width:74ch}
.exp-points b{color:var(--ink)}

/* recognition from projects */
.recog{display:grid;grid-template-columns:1.9fr 1fr;gap:18px;margin-top:8px;align-items:stretch}
.recog-item{position:relative;display:block;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;text-align:left;color:var(--ink);font:inherit;transition:.4s}
.recog-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.recog-item:nth-child(2) img{object-position:top}
.recog-item span{position:absolute;left:14px;bottom:14px;right:14px;padding:10px 16px;border-radius:8px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);font-size:13.5px;font-weight:500;color:var(--mute)}
.recog-item b{display:block;color:var(--ink);font-size:15px}
.recog-item:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.recog-item:hover img{transform:scale(1.04)}
.recog .recog-item:nth-child(2){max-height:520px}
@media(max-width:760px){.recog{grid-template-columns:1fr}.recog .recog-item:nth-child(2){max-height:480px}}

.event-info{max-width:78ch;margin-bottom:30px}
.event-info>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:10px}
.event-info b{font-size:20px}
.event-info span{font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.event-info p{color:var(--mute);font-weight:500}
.photos{margin-top:0!important}

.tile .ico{display:block;width:48px;height:48px;background:var(--c,var(--ink));-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;transition:transform .4s}
.tile:hover .ico{transform:scale(1.12) rotate(-4deg)}
.tile{gap:14px;padding:26px 10px}

.impact{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.imp{padding:28px;border:1px solid var(--line);border-radius:12px;background:var(--card);transition:.4s}
.imp b{display:block;font-size:clamp(30px,3.6vw,44px);letter-spacing:-.03em;line-height:1.05;background:linear-gradient(90deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.imp span{display:block;margin-top:10px;color:var(--mute);font-weight:500;font-size:14.5px}
.imp:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:var(--shadow)}
footer a{border-bottom:1px solid var(--accent);text-decoration:none}
.about-text h4~h4{margin-top:26px}
@media(max-width:900px){.impact{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.impact{grid-template-columns:1fr}}

.lk .ico-m{display:block;width:22px;height:22px;background:var(--c,var(--ink));-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.pitch .actions{gap:12px}

.pitch .actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pitch .actions .btn{padding:15px 12px;white-space:nowrap}
@media(max-width:560px){.pitch .actions{grid-template-columns:1fr}}

.socials .ico-m{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}

/* highlight chips: float with `translate`, react with `transform` so the two never fight */
@keyframes chipfloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes chipblur{from{opacity:0;filter:blur(8px)}}
.hero-art .chip{position:relative;overflow:hidden;cursor:default;
  animation:chipblur .8s both,chipfloat 4.2s ease-in-out infinite;
  animation-delay:calc(1.2s + var(--d)),calc(2s + var(--d));
  transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s,background .4s}
.hero-art .chip::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffff2e 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s ease}
.hero-art .chip:hover{transform:translateX(12px) scale(1.04);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--bg));box-shadow:0 22px 44px -20px var(--accent);animation-play-state:running,paused}
.hero-art .chip:hover::after{transform:translateX(120%)}
.chip i{transition:transform .45s cubic-bezier(.2,.8,.2,1),background .3s,color .3s}
.chip:hover i{background:var(--accent);color:#04161a;transform:rotate(-12deg) scale(1.14)}
@media(max-width:960px){.hero-art .chip:hover{transform:scale(1.03)}}

/* the chips drift together with the portrait: same keyframes, same duration, same start */
@keyframes groupfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.hero-art .chips{animation:groupfloat 4.5s ease-in-out infinite}
.hero-art .chip{animation:chipblur .8s both;animation-delay:calc(1.2s + var(--d))}
.hero-art .chip:hover{animation-play-state:running}

/* smaller tech tiles */
.stack{gap:34px}
.cat{gap:16px 48px}
.tiles{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.tile{padding:16px 8px;gap:10px;font-size:12.5px}
.tile .ico{width:34px;height:34px}

/* the gradient used to stretch over the whole card width, so short numbers only showed its white end */
.imp b{display:inline-block;background-image:linear-gradient(100deg,var(--ink) 0%,var(--accent2) 55%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}

/* first 60% plain, the last 40% fades into the accent */
.imp b{background-image:linear-gradient(90deg,var(--ink) 60%,var(--accent) 100%)}

/* impact numbers: plain, with the unit in the accent and a short bar above, same on every card */
.imp b{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink);padding-bottom:0}
.imp b em{font-style:normal;color:var(--accent)}
.imp::before{content:"";display:block;width:28px;height:3px;margin-bottom:20px;background:var(--accent);transition:width .45s cubic-bezier(.2,.8,.2,1)}
.imp:hover::before{width:64px}

/* gradient back: first 60% plain, last 40% fading into the accent, scaled to each number's own width */
.imp b{display:inline-block;background-image:linear-gradient(90deg,var(--ink) 60%,var(--accent) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.imp b em{color:transparent}

/* no bar above the cards; one smooth gradient across each number, same as the hero name */
.imp::before{display:none}
.imp b{background-image:linear-gradient(90deg,var(--ink),var(--accent2));padding-bottom:.08em}

/* content gallery: equal cards, cropped to the top of each screenshot, full size on click */
.works{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.work{display:flex;flex-direction:column;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card);cursor:pointer;text-align:left;color:var(--ink);font:inherit;transition:.35s}
.wimg{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--soft)}
.wimg img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s}
.wcap{display:block;padding:12px 14px;font-size:12.5px;color:var(--mute);font-weight:500;border-top:1px solid var(--line)}
.wcap b{display:block;font-size:14px;color:var(--ink)}
.work:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:var(--shadow)}
.work:hover img{transform:scale(1.05)}
.works-note{margin-top:14px;font-size:13px;color:var(--mute);font-weight:500}
@media(max-width:1000px){.works{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.works{grid-template-columns:repeat(2,1fr)}}

/* image pop-up: fit the whole picture on screen, no scrolling and no zoomed-in crop */
dialog.is-cert{width:fit-content;max-width:96vw}
.is-cert .m-box{padding:14px;overflow:visible;max-height:none}
.is-cert .m-cert{display:grid;place-items:center}
.is-cert .m-cert img{width:auto;height:auto;max-width:calc(96vw - 28px);max-height:calc(100vh - 80px);object-fit:contain}
.is-cert .m-close{top:-14px;right:-14px}

/* soft, thin scrollbars everywhere (page and pop-ups) */
*{scrollbar-width:thin;scrollbar-color:#ffffff33 transparent}
.dark *{scrollbar-color:#ffffff33 transparent}
:root:not(.dark) *{scrollbar-color:#0b2a3340 transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ffffff2e;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#ffffff55}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
:root:not(.dark) ::-webkit-scrollbar-thumb{background:#0b2a3333}

/* image pop-up: no scrollbars at all. The picture is scaled to fit, and the close button sits inside the frame
   (it used to hang outside the dialog, which is what made the browser add scrollbars) */
dialog.is-cert{overflow:visible}
.is-cert .m-box{overflow:hidden}
.is-cert .m-close{top:22px;right:22px;background:#000a;backdrop-filter:blur(6px)}

/* in-page links land with the section heading just under the nav (the sections already have their own top padding) */
html{scroll-padding-top:0}
.sec{scroll-margin-top:0}
@media(max-width:700px){.sec{padding-top:96px}}

/* logos that keep their own colours are shown as images instead of a one-colour mask */
.tile .ico.img{-webkit-mask:none;mask:none;background:var(--i) center/contain no-repeat;border-radius:50%}

/* katana slashes behind the portrait instead of a glow: drawn in once the page opens, then a glint runs along the blade */
.aura{display:none}
.slash{position:absolute;inset:-14%;width:128%;height:128%;z-index:0;overflow:visible;pointer-events:none;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 76%);mask-image:radial-gradient(circle at 50% 50%,#000 52%,transparent 76%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.slash path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke .6s}
.slash .s1{stroke:var(--accent);stroke-width:2.4}
.slash .s2{stroke:var(--accent);stroke-width:1.3;opacity:.55}
.slash .s3{stroke:var(--accent);stroke-width:1.3;opacity:.35}
.slash .glint{stroke:#fff;stroke-width:3;stroke-dasharray:.07 1;stroke-dashoffset:1.07;opacity:0}
.hero-art .avatar{z-index:1}
.hero-art.in .slash path:not(.glint){animation:cut .9s cubic-bezier(.7,0,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .16s)}
.hero-art.in .slash .glint{animation:glint 7s ease-in-out 2.2s infinite}
@keyframes cut{to{stroke-dashoffset:0}}
@keyframes glint{0%{stroke-dashoffset:1.07;opacity:0}6%{opacity:.9}28%{stroke-dashoffset:-.07;opacity:.9}32%,100%{stroke-dashoffset:-.07;opacity:0}}
.hero-art:hover .slash{transform:translate(10px,-10px)}
.hero-art:hover .slash .s1,.hero-art:hover .slash .s2,.hero-art:hover .slash .s3{stroke:#ff9a5c}
@media(prefers-reduced-motion:reduce){.slash path:not(.glint){stroke-dashoffset:0}.slash .glint{display:none}}

/* hero background: drifting colour fields + a fading dot grid + film grain, instead of a single glow */
.hero{position:relative}
.hero-bg{position:absolute;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;z-index:-1;overflow:hidden;pointer-events:none;
  --b1:#0e7490;--b2:#3b4fd8;--b3:#ff7a4d;--dot:#ffffff22;--bo:1}
:root:not(.dark) .hero-bg{--b1:#38bdf8;--b2:#818cf8;--b3:#fdba74;--dot:#0b2a3322;--bo:.35}
.blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:calc(var(--bo) * var(--o));
  translate:calc(var(--px,0) * var(--mx)) calc(var(--py,0) * var(--my))}
.b1{--o:.55;--mx:34px;--my:24px;width:640px;height:640px;right:2%;top:12%;background:var(--b1);animation:driftA 22s ease-in-out infinite alternate}
.b2{--o:.40;--mx:-26px;--my:18px;width:480px;height:480px;right:18%;top:-8%;background:var(--b2);animation:driftB 27s ease-in-out infinite alternate}
.b3{--o:.22;--mx:20px;--my:-16px;width:340px;height:340px;right:-4%;bottom:2%;background:var(--b3);animation:driftC 19s ease-in-out infinite alternate}
@keyframes driftA{to{transform:translate(-70px,50px) scale(1.12)}}
@keyframes driftB{to{transform:translate(60px,70px) scale(.9)}}
@keyframes driftC{to{transform:translate(-50px,-60px) scale(1.2)}}
.dots{position:absolute;inset:0;background-image:radial-gradient(circle,var(--dot) 1.1px,transparent 1.4px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 55% 70% at 72% 50%,#000 10%,transparent 78%);mask-image:radial-gradient(ellipse 55% 70% at 72% 50%,#000 10%,transparent 78%)}
.grain{position:absolute;inset:-50%;opacity:.09;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.slash{display:none}
@media(prefers-reduced-motion:reduce){.blob{animation:none}}
@media(max-width:960px){.b1{width:420px;height:420px;right:-10%;top:4%}.b2{width:320px;height:320px}.b3{display:none}}

/* balance: calmer on the right, a matching soft field on the left behind the text, grid across the whole hero */
.b1{--o:.42}
.b2{--o:.26}
.b3{--o:.14}
.b4{--o:.34;--mx:-22px;--my:16px;width:560px;height:560px;left:-6%;bottom:-14%;background:var(--b1);animation:driftB 24s ease-in-out infinite alternate}
.b5{--o:.2;--mx:18px;--my:-12px;width:380px;height:380px;left:14%;top:6%;background:var(--b2);animation:driftC 21s ease-in-out infinite alternate}
.dots{-webkit-mask-image:radial-gradient(ellipse 80% 75% at 50% 52%,#000 5%,transparent 80%);mask-image:radial-gradient(ellipse 80% 75% at 50% 52%,#000 5%,transparent 80%)}
@media(max-width:960px){.b4{width:380px;height:380px;left:-20%}.b5{display:none}}

/* hero legibility on top of the colour fields: a soft dark scrim behind the text, brighter secondary text, solid-ish icon boxes */
.hero-copy{position:relative}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-48px -72px -40px -64px;pointer-events:none;
  background:radial-gradient(ellipse 78% 72% at 42% 50%,color-mix(in srgb,var(--bg) 82%,transparent) 0%,color-mix(in srgb,var(--bg) 58%,transparent) 48%,transparent 78%)}
.dark .hero .intro{color:#d3d9dd}
.hero .connect .label{color:var(--ink);opacity:.8}
.hero .connect{border-top-color:#ffffff2e}
.hero .socials a{background:color-mix(in srgb,var(--bg) 78%,transparent);border-color:#ffffff33;backdrop-filter:blur(6px)}
.hero .btn.line{background:color-mix(in srgb,var(--bg) 78%,transparent);border-color:#ffffff33}
.b4{--o:.24}
.b5{--o:.12}
.dots{-webkit-mask-image:radial-gradient(ellipse 62% 78% at 66% 52%,#000 8%,transparent 78%);mask-image:radial-gradient(ellipse 62% 78% at 66% 52%,#000 8%,transparent 78%)}
:root:not(.dark) .hero-copy::before{display:none}

/* no dark panel behind the text (it showed a visible edge); legibility comes from brighter text, a soft shadow and the dimmer left field */
.hero-copy::before{display:none}
.dark .hero .intro,.dark .hero .typed,.dark .hero h1{text-shadow:0 1px 14px #000a,0 0 2px #0006}
.hero .connect .label{text-shadow:0 1px 10px #000a}
.b4{--o:.2}
.b5{--o:.1}

/* the name uses gradient-clipped text, a text-shadow would show through it and turn it grey */
.dark .hero h1{text-shadow:none}

/* gradient-clipped text must never get a shadow: the shadow paints over the clipped gradient and turns it grey */
.hero h1,.hero h1 .soft,.dark .hero h1,.dark .hero h1 .soft{text-shadow:none!important}

/* a little calmer behind the portrait */
.b1{--o:.31}
.b2{--o:.18}
.b3{--o:.10}
.hero-bg{--dot:#ffffff16}
:root:not(.dark) .hero-bg{--dot:#0b2a3318}

/* ===== loader v2: boot log, a number that fills up, the name decoding itself, then a katana slash splits the page open ===== */
html.loading,html.loading body{overflow:hidden}
#loader{position:fixed;inset:0;z-index:100;display:block;background:#0a0a0a;color:#ececec;pointer-events:all;font-family:Onest,system-ui,sans-serif;--p:0%}
#loader.go{background:transparent;transition:background 0s .6s}
#loader.done{display:none}
.ld-a,.ld-b{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 55% at 50% 50%,#4cc3d91c,transparent 70%),
  radial-gradient(circle,#ffffff14 1px,transparent 1.4px) 0 0/28px 28px,#0a0a0a;
  transition:transform .95s cubic-bezier(.76,0,.24,1) .6s}
.ld-a{clip-path:polygon(0 0,100.3% 0,0 100.3%)}
.ld-b{clip-path:polygon(100% -.3%,100% 100%,-.3% 100%)}
#loader.go .ld-a{transform:translate(-104%,-104%)}
#loader.go .ld-b{transform:translate(104%,104%)}
.ld-ui{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(18px,3vw,36px);transition:opacity .4s,transform .4s}
#loader.go .ld-ui{opacity:0;transform:scale(.97)}
.ld-top{display:flex;justify-content:space-between;align-items:center;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.18em;color:#8b969c}
.ld-brand{display:inline-flex;align-items:center;gap:12px}
.ld-mark{width:22px;height:22px;fill:#4cc3d9;filter:drop-shadow(0 0 8px #4cc3d988)}
.ld-mid{display:grid;place-items:center;align-content:center;gap:10px;text-align:center}
.ld-big{position:relative;font-weight:700;font-size:clamp(130px,27vw,380px);line-height:.82;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ld-big .o{display:block;color:transparent;-webkit-text-stroke:1.4px #ffffff30}
.ld-big .f{position:absolute;inset:0;display:block;background:linear-gradient(180deg,#b6f3fb 0%,#4cc3d9 55%,#0e7490 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  clip-path:inset(calc(100% - var(--p)) 0 0 0);filter:drop-shadow(0 0 24px #4cc3d955)}
.ld-name{display:flex;gap:.06em;font-weight:700;font-size:clamp(24px,4.6vw,54px);letter-spacing:.1em;line-height:1;min-height:1em;margin-top:clamp(6px,1.6vh,18px)}
.ld-name span{display:inline-block;min-width:.55em;color:#6f7d85;transition:color .25s}
.ld-name span.ok{color:#f1f5f7}
.ld-sub{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#8b969c}
.ld-sub i{width:5px;height:5px;border-radius:50%;background:#4cc3d9;animation:blink 1s infinite}
.ld-log{justify-self:start;font:500 12.5px/1.8 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:#8b969c;min-height:5.4em}
.ld-line{opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.ld-line.on{opacity:1;transform:none}
.ld-line em{font-style:normal;color:#4cc3d9}
.ld-slash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0}
.ld-slash line{fill:none;stroke:url(#none);stroke:#e9fdff;stroke-width:3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px #7ee0ee) drop-shadow(0 0 22px #4cc3d9)}
#loader.go .ld-slash{opacity:1;animation:ldfade .5s .85s forwards}
#loader.go .ld-slash line{animation:ldcut .5s .12s cubic-bezier(.7,0,.2,1) forwards}
@keyframes ldcut{to{stroke-dashoffset:0}}
@keyframes ldfade{to{opacity:0}}
@media(max-width:700px){.ld-log{font-size:11px}.ld-top span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.ld-a,.ld-b{transition-duration:.2s}.ld-line{opacity:1;transform:none}}

/* ===== loader v3: his portrait comes alive as the page loads, then flies to its place in the hero ===== */
#loader{background:transparent;--pn:0}
#loader.go{background:transparent}
.ld-bg{position:absolute;inset:0;background:radial-gradient(ellipse 55% 50% at 50% 46%,#0e3a47 0%,#0a0a0a 68%);transition:opacity .9s ease .1s}
#loader.go .ld-bg{opacity:0}
.ld-stage{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.ld-orb{position:relative;width:clamp(170px,22vw,230px);aspect-ratio:1;display:grid;place-items:center}
.ld-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible;transition:opacity .35s}
.ld-ring circle{fill:none}
.ld-ring .trk{stroke:#ffffff1c;stroke-width:1.5}
.ld-ring .bar{stroke:#5ad3e8;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--pn));filter:drop-shadow(0 0 6px #4cc3d9) drop-shadow(0 0 16px #4cc3d977)}
.ld-face{position:relative;width:86%;height:86%;border-radius:50%;object-fit:cover;background:#095169;z-index:2;
  filter:grayscale(calc(1 - var(--pn))) brightness(calc(.5 + .5 * var(--pn))) saturate(calc(.6 + .4 * var(--pn)))}
.ld-name{display:flex;gap:.02em;margin-top:clamp(26px,5vh,44px);font-weight:700;font-size:clamp(18px,2.6vw,30px);letter-spacing:.34em;line-height:1;padding-left:.34em;transition:opacity .35s}
.ld-name span{display:inline-block;opacity:0;transform:translateY(60%);filter:blur(6px);animation:ldletter .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.35s + var(--i) * .06s)}
@keyframes ldletter{to{opacity:1;transform:none;filter:none}}
.ld-sub{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:700;color:#8b969c;opacity:0;animation:ldletter .7s 1.1s forwards;transition:opacity .35s}
.ld-sub i{width:5px;height:5px;border-radius:50%;background:#4cc3d9;animation:blink 1s infinite}
.ld-pct{margin-top:26px;font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.2em;color:#8b969c;transition:opacity .35s}
.ld-pct b{font-weight:500;color:#ececec}
#loader.go .ld-ring,#loader.go .ld-name,#loader.go .ld-sub,#loader.go .ld-pct{opacity:0;animation:none}
@media(prefers-reduced-motion:reduce){.ld-name span,.ld-sub{animation:none;opacity:1;transform:none;filter:none}}

/* during the loader's landing the real hero picture waits, and its float is paused, so the hand-over is pixel for pixel */
.fly .hero .avatar img{opacity:0}
.fly .hero .avatar.floating{animation:none}

/* the loader's colours follow the portrait: grey at 0%, teal at 100% */
.ld-bg{background:radial-gradient(ellipse 55% 50% at 50% 46%,color-mix(in srgb,#0e3a47 calc(var(--pn) * 100%),#1d1f21) 0%,#0a0a0a 68%)}
.ld-ring .bar{color:color-mix(in srgb,#5ad3e8 calc(var(--pn) * 100%),#9aa0a4);stroke:currentColor;filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px color-mix(in srgb,currentColor 45%,transparent))}
.ld-sub i{background:color-mix(in srgb,#4cc3d9 calc(var(--pn) * 100%),#6b7075)}

/* download CV: choose the ATS or the friendly version */
.cvmenu{position:relative;display:inline-block}
.pitch .actions .cvmenu{display:block}
.cvmenu .btn{width:100%}
.cv-toggle .chev{width:16px;height:16px;transition:transform .3s}
.cvmenu.open .cv-toggle .chev{transform:rotate(180deg)}
.cvmenu.open .cv-toggle{border-color:var(--accent)}
.cv-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;min-width:300px;padding:6px;border:1px solid var(--line);border-radius:12px;
  background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top left;pointer-events:none;visibility:hidden;transition:opacity .2s,transform .25s,visibility 0s .25s}
.cvmenu.open .cv-pop{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s,transform .25s}
.cv-pop a{display:block;padding:12px 14px;border-radius:8px;text-decoration:none;transition:background .2s}
.cv-pop a:hover,.cv-pop a:focus-visible{background:var(--soft)}
.cv-pop b{display:block;font-size:14.5px}
.cv-pop span{display:block;margin-top:2px;font-size:12.5px;color:var(--mute);font-weight:500;line-height:1.4}
.pitch .cv-pop{min-width:100%;left:auto;right:0;transform-origin:top right}
@media(max-width:560px){.cv-pop{min-width:min(300px,calc(100vw - 40px))}.pitch .cv-pop{min-width:100%}}

/* the CV toggle is a <button>, which does not inherit the page font or line height the way the <a> buttons do */
.cv-toggle{font-family:inherit;font-size:15px;font-weight:700;line-height:1.65;box-sizing:border-box}
.cvmenu{display:flex}
.cvmenu .btn{flex:1}
.hero .actions>.btn,.hero .actions>.cvmenu{width:min(240px,100%)}
.hero .actions{align-items:stretch}

/* the contact row: an earlier, more specific rule had turned the CV wrapper back into a block, so its button did not stretch to the row height */
.pitch .actions .cvmenu{display:flex}
.pitch .actions .cvmenu .btn{height:100%}
.btn{min-height:58px;box-sizing:border-box}
.pitch .actions{align-items:stretch}

/* the three highlight cards wait out of the way while the portrait flies in, then slide in beside it one by one */
@keyframes chipland{from{opacity:0;translate:-56px 0;filter:blur(8px)}}
.hero-art .chip{animation:chipland .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d) * 1.4)}
.await-land .hero-art .chip{opacity:0;animation:none}
.hero-art .chip:hover{animation-play-state:running}

/* light theme: same layered hero background as the dark one (it was far too faint), and borders/shadows that were written for dark only */
:root:not(.dark) .hero-bg{--b1:#2bb3d8;--b2:#7c8cf5;--b3:#ffb27a;--dot:#0b2a3330;--bo:.62}
:root:not(.dark) .grain{opacity:.14;mix-blend-mode:multiply}
:root:not(.dark) .hero .connect{border-top-color:var(--line)}
:root:not(.dark) .hero .connect .label{text-shadow:none;opacity:.7}
:root:not(.dark) .hero .socials a,
:root:not(.dark) .hero .btn.line{background:color-mix(in srgb,#fff 70%,transparent);border-color:#0b2a3333;backdrop-filter:blur(6px)}
:root:not(.dark) .hero .btn.line:hover,
:root:not(.dark) .hero .socials a:hover{border-color:var(--accent)}
:root:not(.dark) .hero .intro{color:#3d5560}
:root:not(.dark) .hero .intro,:root:not(.dark) .hero .typed{text-shadow:none}
:root:not(.dark) .hero .chip{background:color-mix(in srgb,#fff 78%,transparent);border-color:#0b2a3326}

/* light theme: make the colour fields as clearly visible as in the dark theme */
:root:not(.dark) .hero-bg{--b1:#0ea5e9;--b2:#6366f1;--b3:#fb923c;--dot:#0b2a3352;--bo:2.4}
:root:not(.dark) .blob{filter:blur(80px)}

/* light theme, second pass: one teal family (like his portrait) with a warm sand touch, instead of blue + purple + orange */
:root:not(.dark) .hero-bg{--b1:#0e8fa3;--b2:#5fe0c9;--b3:#f9d9aa;--dot:#0b2a3340;--bo:2.1}
:root:not(.dark) .blob{filter:blur(85px)}
:root:not(.dark) .b2{--o:.30}
:root:not(.dark) .b5{--o:.16}
/* both themes: let the background melt into the page below instead of ending on a hard line */
.hero-bg{-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)}

/* light theme, third pass: cool cyan to soft blue (the mint made it read as moss green) */
:root:not(.dark) .hero-bg{--b1:#22b5e8;--b2:#8fb6ff;--b3:#fbd8ae;--dot:#0b2a3340;--bo:2}

/* light theme text: solid, darker, no gradient on the name (the dark theme keeps its gradient) */
:root:not(.dark){--mute:#455e68}
:root:not(.dark) .hero h1 .soft{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--ink)}
:root:not(.dark) .hero .intro{color:#16313b;font-weight:500}
:root:not(.dark) .hero .typed{color:#0b2a33}
:root:not(.dark) .hero .connect .label{color:#2b4a56;opacity:1}
:root:not(.dark) .hero .chip small{color:#3a545e}

/* light theme = a mirror of the dark one: plain black where dark has plain white, and the name gradient mirrored (black to teal) */
:root:not(.dark){--ink:#0a0a0a;--mute:#4a5055;--btn:#0a0a0a;--btn-ink:#fafafa}
:root:not(.dark) .hero h1{color:#0a0a0a}
:root:not(.dark) .hero h1 .soft{background-image:linear-gradient(90deg,#0a0a0a 0%,#0b7a96 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not(.dark) .hero .typed{color:#0a0a0a}
:root:not(.dark) .hero .intro{color:#26292c;font-weight:500}
:root:not(.dark) .hero .connect .label{color:#0a0a0a;opacity:.7}
:root:not(.dark) .hero .chip small{color:#44494e}

/* while the theme is switching, every colour change fades, so nothing snaps (icons drawn with masks had no transition at all) */
.theme-anim,.theme-anim *,.theme-anim *::before,.theme-anim *::after{
  transition:background-color .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease,fill .45s ease,stroke .45s ease,opacity .45s ease!important}

/* dark theme: back to the brighter colour fields from before they were toned down */
.dark .b1{--o:.46}
.dark .b2{--o:.30}
.dark .b3{--o:.16}
.dark .b4{--o:.26}
.dark .b5{--o:.14}
.dark .hero-bg{--dot:#ffffff22}

/* the colour fields now run further down, past the buttons, and melt away over a longer stretch */
.hero-bg{bottom:-26vh;-webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.b3{bottom:16%}
.b4{bottom:2%}
@media(max-width:960px){.hero-bg{bottom:-14vh}}

/* the background stops exactly at the bottom edge of the hero; the colour is pushed lower inside it so the area under the buttons is not empty */
.hero-bg{bottom:0;-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
.b1{top:20%}
.b3{bottom:4%}
.b4{bottom:-10%}
.dark .b4{--o:.32}
@media(max-width:960px){.hero-bg{bottom:0}}
.hero-bg{-webkit-mask-image:linear-gradient(to bottom,#000 95%,transparent 100%);mask-image:linear-gradient(to bottom,#000 95%,transparent 100%)}
.b4{bottom:-4%}

/* fill the hero all the way to its bottom edge: no fade-out mask, plus a wash of the main colour along the floor of the hero */
.hero-bg{-webkit-mask-image:none;mask-image:none}
.hero-bg::before{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--b1) calc(var(--bo) * 34%),transparent) 0%,color-mix(in srgb,var(--b1) calc(var(--bo) * 14%),transparent) 55%,transparent 100%)}
.b4{bottom:-14%;width:760px;height:460px;border-radius:50%}

/* a little less bright overall (about 20%), both themes */
.dark .hero-bg{--bo:.8}
:root:not(.dark) .hero-bg{--bo:1.6}

/* footer: colour gathers at the far left and far right edges and fades toward the middle */
footer{position:relative;padding-block:110px 90px}
footer::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;width:100vw;margin-left:-50vw;pointer-events:none;
  --fl:rgba(14,116,144,.55);--fr:rgba(59,79,216,.42);
  background:
    radial-gradient(ellipse 34% 105% at 0% 100%,var(--fl) 0%,transparent 72%),
    radial-gradient(ellipse 34% 105% at 100% 100%,var(--fr) 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 55%);mask-image:linear-gradient(to bottom,transparent 0%,#000 55%)}
:root:not(.dark) footer::before{--fl:rgba(34,181,232,.5);--fr:rgba(143,182,255,.55)}
@media(max-width:700px){footer{padding-block:90px 70px}footer::before{background:radial-gradient(ellipse 60% 100% at 0% 100%,var(--fl) 0%,transparent 72%),radial-gradient(ellipse 60% 100% at 100% 100%,var(--fr) 0%,transparent 72%)}}

/* the Contact section is the page's footer: the edge colour now covers it and the small footer under it as one block,
   strongest at the far left and far right, fading toward the middle and upward */
footer::before{display:none}
#contacts{position:relative}
#contacts::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:0;bottom:-260px;pointer-events:none;
  --fl:rgba(14,116,144,.6);--fr:rgba(59,79,216,.46);
  background:
    radial-gradient(ellipse 30% 78% at 0% 100%,var(--fl) 0%,transparent 72%),
    radial-gradient(ellipse 30% 78% at 100% 100%,var(--fr) 0%,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%)}
:root:not(.dark) #contacts::before{--fl:rgba(34,181,232,.5);--fr:rgba(143,182,255,.55)}
@media(max-width:700px){#contacts::before{bottom:-220px;background:radial-gradient(ellipse 55% 70% at 0% 100%,var(--fl) 0%,transparent 72%),radial-gradient(ellipse 55% 70% at 100% 100%,var(--fr) 0%,transparent 72%)}}

/* contact + footer: tighter gap, and a much broader, stronger edge glow like the reference (a wide haze that is densest at the far left and right) */
#contacts{padding-bottom:36px}
footer{padding-block:44px 64px}
#contacts::before{bottom:-170px;
  --fl:rgba(14,116,144,.85);--fr:rgba(59,79,216,.72);
  background:
    radial-gradient(ellipse 62% 100% at 0% 100%,var(--fl) 0%,color-mix(in srgb,var(--fl) 45%,transparent) 38%,transparent 82%),
    radial-gradient(ellipse 62% 100% at 100% 100%,var(--fr) 0%,color-mix(in srgb,var(--fr) 45%,transparent) 38%,transparent 82%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 38%);mask-image:linear-gradient(to bottom,transparent 0%,#000 38%)}
:root:not(.dark) #contacts::before{--fl:rgba(34,181,232,.7);--fr:rgba(143,182,255,.75)}
@media(max-width:700px){#contacts::before{bottom:-150px}}
#contacts{padding-bottom:12px}
footer{padding-block:34px 60px}

/* footer glow, rebuilt from the reference: not two bright blobs but a soft, muted haze along the whole left and right edges,
   darker toward the top and strongest near the floor, fading smoothly to the dark middle */
#contacts::before{
  --fl:rgba(16,128,160,.46);--fr:rgba(70,92,230,.38);
  background:
    linear-gradient(90deg,var(--fl) 0%,color-mix(in srgb,var(--fl) 62%,transparent) 6%,color-mix(in srgb,var(--fl) 30%,transparent) 15%,color-mix(in srgb,var(--fl) 10%,transparent) 24%,transparent 33%),
    linear-gradient(270deg,var(--fr) 0%,color-mix(in srgb,var(--fr) 62%,transparent) 6%,color-mix(in srgb,var(--fr) 30%,transparent) 15%,color-mix(in srgb,var(--fr) 10%,transparent) 24%,transparent 33%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 35%,#000 78%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.35) 35%,#000 78%)}
:root:not(.dark) #contacts::before{--fl:rgba(34,181,232,.4);--fr:rgba(143,182,255,.46)}

/* one scrollbar only: the body must not be its own scroll container (html already clips sideways overflow),
   and the footer glow must not hang below the page */
body{overflow-x:visible}
#contacts::before{bottom:-132px}
@media(max-width:700px){#contacts::before{bottom:-120px}}

/* footer glow, third pass: in the reference the whole width is tinted, right through the middle, and the edges are just a notch stronger.
   So: a full-width wash that deepens toward the floor, plus wide edge fields (out to the middle) on top of it */
#contacts::before{
  --fc:rgba(28,84,138,.36);--fl:rgba(18,150,180,.5);--fr:rgba(86,104,244,.46);
  background:
    linear-gradient(90deg,var(--fl) 0%,color-mix(in srgb,var(--fl) 55%,transparent) 14%,color-mix(in srgb,var(--fl) 22%,transparent) 32%,transparent 56%),
    linear-gradient(270deg,var(--fr) 0%,color-mix(in srgb,var(--fr) 55%,transparent) 14%,color-mix(in srgb,var(--fr) 22%,transparent) 32%,transparent 56%),
    linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--fc) 55%,transparent) 55%,var(--fc) 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 30%,#000 70%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.5) 30%,#000 70%)}
:root:not(.dark) #contacts::before{--fc:rgba(110,190,240,.38);--fl:rgba(34,181,232,.42);--fr:rgba(143,182,255,.5)}

/* footer glow: dimmer, a much darker (faded) middle, and it now runs to the very bottom of the page with no dark strip under it.
   main clips its own overflow, so letting the glow run long cannot create a second scrollbar */
main{overflow:clip}
#contacts::before{
  bottom:-320px;
  --fc:rgba(28,84,138,.14);--fl:rgba(18,150,180,.38);--fr:rgba(86,104,244,.34);
  background:
    linear-gradient(90deg,var(--fl) 0%,color-mix(in srgb,var(--fl) 52%,transparent) 12%,color-mix(in srgb,var(--fl) 18%,transparent) 28%,transparent 48%),
    linear-gradient(270deg,var(--fr) 0%,color-mix(in srgb,var(--fr) 52%,transparent) 12%,color-mix(in srgb,var(--fr) 18%,transparent) 28%,transparent 48%),
    linear-gradient(to bottom,transparent 0%,color-mix(in srgb,var(--fc) 50%,transparent) 55%,var(--fc) 100%)}
:root:not(.dark) #contacts::before{--fc:rgba(110,190,240,.2);--fl:rgba(34,181,232,.34);--fr:rgba(143,182,255,.42)}
@media(max-width:700px){#contacts::before{bottom:-280px}}

/* light theme footer: mirror of the dark one, so colour sits at the two edges and the middle fades back to the page white instead of a blue wash across everything */
:root:not(.dark) #contacts::before{--fc:rgba(120,195,240,.07);--fl:rgba(34,181,232,.36);--fr:rgba(143,182,255,.44)}

/* navbar: wider (full content width like the reference), taller, lower, with the links centred between the brand and the theme button */
.nav-wrap{top:26px}
.nav{max-width:1280px;padding:16px 22px 16px 36px;gap:18px}
.brand{font-size:21px}
.nav nav{margin:0 auto;gap:6px}
.nav nav a{padding:10px 18px;font-size:15.5px}
.theme{width:46px;height:46px}
.hero{padding-top:136px}
@media(max-width:960px){.nav-wrap{top:16px}.nav{padding:12px 14px 12px 22px}.hero{padding-top:112px}.theme{margin-left:auto}}

/* navbar sized from the reference's real numbers (measured on ryhar.my.id at 1440px wide): 1024 wide, 66 tall, 24 from the top */
.nav-wrap{top:24px}
.nav{max-width:1024px;padding:10px 10px 10px 30px;gap:14px}
.brand{font-size:19px}
.nav nav{gap:4px}
.nav nav a{padding:9px 16px;font-size:15px}
.theme{width:44px;height:44px}
.hero{padding-top:118px}
@media(max-width:960px){.nav-wrap{top:16px}.nav{padding:8px 10px 8px 20px}.hero{padding-top:104px}.theme{margin-left:auto}}

.cv-grp{display:block;padding:8px 14px 4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.cv-pop .cv-grp:not(:first-child){margin-top:4px;border-top:1px solid var(--line);padding-top:12px}
.cv-pop{min-width:320px}

/* phones and tablets: the three highlight cards sit under the portrait instead of on top of it */
@media(max-width:960px){
  .hero-art{display:flex;flex-direction:column;align-items:center;margin-bottom:28px}
  .chips{position:relative;left:auto;bottom:auto;transform:none;width:min(100%,400px);margin-top:22px}
  .chip{white-space:normal}
}

/* CV menu: can open upward, and is more compact so the four options fit in a short window */
.cvmenu.up .cv-pop{top:auto;bottom:calc(100% + 8px);transform-origin:bottom left;transform:translateY(6px) scale(.98)}
.cvmenu.up.open .cv-pop{transform:none}
.pitch .cvmenu.up .cv-pop{transform-origin:bottom right}
.cv-pop a{padding:9px 14px}
.cv-pop .cv-grp{padding:6px 14px 2px}
.cv-pop .cv-grp:not(:first-child){padding-top:10px}
.cv-pop a span{font-size:12px}
.cv-pop{max-height:calc(100vh - 24px);overflow:auto}








/* the cursor is his katana: silver blade with the same teal-wrapped handle as the one on his back; the blade glows cyan over anything clickable */
@media (pointer:fine){
  html,body{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 26 26'%3E%3Cg transform='translate%282 2%29 rotate%2845%29'%3E%3Cpath d='M0 0 L3 -1.9 L19 -1.9 L19 1.9 L3 1.9 Z' fill='%23e9eef2' stroke='%230a0a0a' stroke-width='.9' stroke-linejoin='round'/%3E%3Cline x1='4' y1='0' x2='18' y2='0' stroke='%239fb4c0' stroke-width='.7'/%3E%3Crect x='19' y='-3.8' width='1.9' height='7.6' rx='.95' fill='%23171717' stroke='%234cc3d9' stroke-width='.55'/%3E%3Crect x='20.9' y='-2' width='7.2' height='4' rx='.9' fill='%2314232d' stroke='%230a0a0a' stroke-width='.5'/%3E%3Cpath d='M22.2 -1.9 L23.8 0 L22.2 1.9 M24.8 -1.9 L26.4 0 L24.8 1.9' fill='none' stroke='%233aa0bd' stroke-width='.65'/%3E%3Ccircle cx='28.7' cy='0' r='1.4' fill='%23171717' stroke='%234cc3d9' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") 3 3,auto}
  a,button,[role="button"],summary,label,.card,.cert,.recog-item,.work,.avatar,.tile,.theme,.cv-toggle,.m-close{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 26 26'%3E%3Cg transform='translate%282 2%29 rotate%2845%29'%3E%3Cpath d='M0 0 L3 -1.9 L19 -1.9 L19 1.9 L3 1.9 Z' fill='%23bff3fb' stroke='%230a0a0a' stroke-width='.9' stroke-linejoin='round'/%3E%3Cline x1='4' y1='0' x2='18' y2='0' stroke='%234cc3d9' stroke-width='.7'/%3E%3Crect x='19' y='-3.8' width='1.9' height='7.6' rx='.95' fill='%23171717' stroke='%234cc3d9' stroke-width='.55'/%3E%3Crect x='20.9' y='-2' width='7.2' height='4' rx='.9' fill='%2314232d' stroke='%230a0a0a' stroke-width='.5'/%3E%3Cpath d='M22.2 -1.9 L23.8 0 L22.2 1.9 M24.8 -1.9 L26.4 0 L24.8 1.9' fill='none' stroke='%233aa0bd' stroke-width='.65'/%3E%3Ccircle cx='28.7' cy='0' r='1.4' fill='%23171717' stroke='%234cc3d9' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E") 3 3,pointer!important}
}