/* itstamim.com - flat editorial design, light + dark (system by default). Instrument Sans / Instrument Serif italic / JetBrains Mono. */
:root{--accent:#c6f432;--acc:198,244,50;--ink:#0e1411;--sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--serif:"Instrument Serif",Georgia,serif;--band:#0e1411;--disp:"Bebas Neue",Impact,"Arial Narrow",sans-serif;--ease:cubic-bezier(.22,1,.36,1);--max:1240px;
 --bg:#f5f5f0;--card:#fff;--card2:#f5f5f0;--line:#e6e7e1;--line2:#ecede7;--text:#0e1411;--muted:#5a615c;--soft:#3f4642;--chip:#eef0e9;--chipt:#3f4642;--shadow:0 30px 60px -30px rgba(14,20,17,.25);--sectag-bg:#0e1411;--sectag-fg:var(--accent);--hl:#0e1411;--active:#2f6b12;--btnd-bg:#0e1411;--btnd-fg:#f5f5f0;--input:#fafaf7;--inputline:#dadcd4;--hero:var(--band);color-scheme:light}
html[data-theme=dark]{color-scheme:dark;--bg:#0b0e0c;--card:#121713;--card2:#1a211c;--line:#232b26;--line2:#1e2621;--text:#f2f5f3;--muted:#9aa6a0;--soft:#c5cec9;--chip:#1c241f;--chipt:#c5cec9;--shadow:0 30px 60px -30px rgba(0,0,0,.65);--sectag-bg:var(--accent);--sectag-fg:#0e1411;--hl:var(--accent);--active:#9be24a;--btnd-bg:#f2f5f3;--btnd-fg:#0e1411;--input:#0d120f;--inputline:#2a342e;--hero:var(--band)}
@media(prefers-color-scheme:dark){html:not([data-theme]){--bg:#0b0e0c;--card:#121713;--card2:#1a211c;--line:#232b26;--line2:#1e2621;--text:#f2f5f3;--muted:#9aa6a0;--soft:#c5cec9;--chip:#1c241f;--chipt:#c5cec9;--sectag-bg:var(--accent);--sectag-fg:#0e1411;--hl:var(--accent);--active:#9be24a;--btnd-bg:#f2f5f3;--btnd-fg:#0e1411;--input:#0d120f;--inputline:#2a342e;--hero:var(--band)}}
*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;scrollbar-width:thin;scrollbar-color:rgba(var(--acc),.6) var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;transition:background .35s,color .35s}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(var(--acc),.55);border-radius:10px;border:2px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:var(--accent)}
::selection{background:var(--accent);color:var(--ink)}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}h1,h2,h3,p,ul{margin:0;padding:0}ul{list-style:none}button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}[hidden]{display:none!important}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--ink);padding:8px 14px;border-radius:10px;z-index:99}.skip:focus{left:8px}
.wrap{width:min(var(--max),calc(100% - 56px));margin:0 auto}
.mono{font:600 12px/1.4 var(--sans);letter-spacing:.08em}
/* ---------- header (always dark): hides on scroll down, returns on scroll up ---------- */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--band);color:#f5f5f0;transition:transform .5s var(--ease),box-shadow .3s}
.hdr.hide{transform:translateY(-110%)}.hdr.solid{box-shadow:0 14px 40px rgba(0,0,0,.35)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.wm{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.wm .a,.wm .b{font:400 1.45rem/1 var(--disp);letter-spacing:3px}.wm .a{color:var(--accent)}.wm .b{color:#f5f5f0}.wm.sm .a,.wm.sm .b{font-size:1.15rem}
.ldot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blink 2s ease-in-out infinite}
.menu{position:relative;display:flex;padding:5px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.04)}
.menu ul{display:flex;gap:2px;position:relative;z-index:1}
.menu a{display:block;padding:9px 17px;border-radius:999px;font-size:14px;font-weight:500;color:#c8d0cb;transition:color .25s}.menu a:hover,.menu a.on{color:#fff}
.slider{position:absolute;top:5px;left:0;width:0;height:0;border-radius:999px;background:rgba(255,255,255,.12);transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.hdr-r{display:flex;align-items:center;gap:12px}
.theme{position:relative;display:flex;padding:4px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.05)}
.theme button{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:28px;border:0;border-radius:999px;background:none;color:#9da8a1;cursor:pointer;transition:color .25s}
.theme button:hover{color:#fff}.theme button[aria-pressed=true]{color:#0e1411}
.thumb{position:absolute;top:4px;left:4px;width:30px;height:28px;border-radius:999px;background:var(--accent);transition:transform .4s var(--ease)}
html[data-pref=system] .thumb{transform:translateX(30px)}html[data-pref=dark] .thumb{transform:translateX(60px)}
.cta{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--accent);color:var(--ink);font-size:14px;font-weight:600;transition:transform .3s var(--ease),box-shadow .3s}
.cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px -8px rgba(var(--acc),.7)}.cta .ar{transition:transform .3s var(--ease)}.cta:hover .ar,.btn:hover .ar{transform:translateX(3px)}
.menu-theme{display:none}.burger{display:none;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:9px 16px;font:600 11.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;background:none;color:#f5f5f0;cursor:pointer}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 24px;border-radius:14px;border:1px solid transparent;font:600 16px/1 var(--sans);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s,background .25s,color .25s,border-color .25s}
.btn .ar{transition:transform .3s var(--ease)}.btn:hover{transform:translateY(-2px)}
.btn-p{background:var(--accent);color:var(--ink)}.btn-p:hover{box-shadow:0 16px 34px -12px rgba(var(--acc),.8)}
.btn-g{border-color:rgba(255,255,255,.22);color:#f5f5f0}.btn-g:hover{border-color:var(--accent);color:var(--accent)}
.btn-d{background:var(--btnd-bg);color:var(--btnd-fg)}.btn-k{background:var(--band);color:#f5f5f0;border-radius:12px}.btn.small{padding:12px 18px;font-size:14px;border-radius:12px}.btn.wide{width:100%}
/* ---------- hero (dark band, fills the screen) ---------- */
.hero{position:relative;overflow:hidden;background:var(--hero);color:#f5f5f0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding-top:76px}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px}
.shapes{position:absolute;inset:0;pointer-events:none;display:none}html[data-fx~=shapes] .shapes{display:block}
.jelly{position:absolute;background:linear-gradient(135deg,rgba(var(--acc),.2),rgba(var(--acc),.04));border:1px solid rgba(var(--acc),.22);animation:morph 18s ease-in-out infinite,floaty 24s ease-in-out infinite}
.j3{width:180px;height:180px;right:2%;bottom:22%;animation-delay:-11s}
.pill{position:absolute;display:block;height:28px;border-radius:999px;background:linear-gradient(90deg,rgba(var(--acc),.3),rgba(var(--acc),.04));border:1px solid rgba(var(--acc),.32);animation:floaty 16s ease-in-out infinite}
.p1{width:104px;left:44%;top:17%;rotate:-14deg}.p2{width:70px;left:5%;bottom:20%;rotate:16deg;animation-delay:-5s;background:linear-gradient(90deg,rgba(125,211,252,.26),rgba(125,211,252,.03));border-color:rgba(125,211,252,.3)}.p3{width:88px;right:12%;top:20%;rotate:10deg;animation-delay:-9s}
.hero-in{position:relative;z-index:2;flex:1;width:100%;max-width:var(--max);margin:0 auto;padding:36px 28px 130px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;background:rgba(var(--acc),.1);border:1px solid rgba(var(--acc),.3);font-size:13px;font-weight:500;color:#e4f7a8}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(var(--acc),.6);animation:ping 2s infinite}
.hero h1{font-weight:600;font-size:clamp(46px,6vw,84px);line-height:1;letter-spacing:-.04em}.hero h1 .ln{display:block;padding:.02em 0 .12em}
.kicker{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.hl{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--hl)}
.hero .hl{color:var(--accent);padding:0 .06em .1em;position:relative;display:inline-block}
.lead{max-width:520px;font-size:19px;line-height:1.65;color:#b5bfb9}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
/* company logo tiles: the full icon fills the tile, only the corners are rounded */
.co{display:inline-block;flex:none;overflow:hidden;background:#fff;line-height:0}.co img{width:100%;height:100%;object-fit:cover}
.co.sm{width:36px;height:36px;border-radius:10px}.co.md{width:44px;height:44px;border-radius:12px}.co.lg{width:58px;height:58px;border-radius:16px}
/* photo stage: the box sits behind, the head comes out of the top, the bottom stays flush */
.hero-photo{justify-self:center;width:100%;display:flex;justify-content:center}
.stage{position:relative;width:min(470px,100%,calc((100svh - 230px) / 1.38))}
.frame{position:absolute;left:0;right:0;bottom:0;top:19%;border-radius:36px;overflow:hidden;background:#172019;border:1px solid #2a372e}
.disc{position:absolute;left:50%;bottom:4%;width:92%;aspect-ratio:1;border-radius:50%;transform:translateX(-50%);background:var(--accent)}
.person{position:relative;z-index:3;display:block;width:94%;height:auto;margin:0 auto}
.fcard{position:absolute;z-index:4;display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:18px;background:#fff;color:#0e1411;box-shadow:0 24px 48px -16px rgba(0,0,0,.5)}
.fcard small{display:block;font-size:12px;color:#5a615c}.fcard b{font-size:15px;font-weight:600}
.fc1{left:-14%;bottom:12%}.fc2{right:-9%;top:31%;flex-direction:column;align-items:flex-start;gap:0}.fc2 b{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1}.fc2 small{margin-top:5px}
/* featured-in strip inside the hero */
.hero-feat{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02);padding-bottom:66px}
.hero-feat-in{max-width:var(--max);margin:0 auto;padding:0 28px;display:flex;align-items:center;gap:30px}
.feat-lbl{color:#8c9891;letter-spacing:.16em;white-space:nowrap}
.marquee{position:relative;overflow:hidden;flex:1;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;width:max-content}.marquee .set{display:flex;align-items:center;flex:none}.marquee:hover .track{animation-play-state:paused}
.mi{display:flex;align-items:center;justify-content:center;height:72px;padding:0 2.4rem;flex:none}
.mi img{height:30px;width:auto;max-width:170px;object-fit:contain;opacity:.88;transition:filter .45s,opacity .45s,transform .45s var(--ease);filter:grayscale(1) brightness(1.7) contrast(1.05)}
.mi.tone-invert img{filter:grayscale(1) invert(1) brightness(1.25)}.mi.tone-white img{filter:brightness(0) invert(1)}.mi.tone-original img{filter:none}
.mi:hover img,.mi:focus-visible img{filter:none;opacity:1;transform:scale(1.08)}
.mi span{font-weight:600;font-size:14px;color:#d9e0dc;white-space:nowrap;transition:color .3s}.mi:hover span{color:var(--accent)}
html[data-motion=off] .marquee .track,html:not([data-fx~=marquee]) .marquee .track{width:auto;flex-wrap:wrap;justify-content:center}
html[data-motion=off] .marquee .set.dup,html:not([data-fx~=marquee]) .marquee .set.dup{display:none}
html[data-motion=off] .marquee,html:not([data-fx~=marquee]) .marquee{-webkit-mask-image:none;mask-image:none}
html[data-motion=off] .marquee .set,html:not([data-fx~=marquee]) .marquee .set{flex-wrap:wrap;justify-content:center}
/* ---------- stats card overlapping the hero ---------- */
.stats{position:relative;z-index:5;margin-top:-64px}
.stats-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);transition:background .35s,border-color .35s}
.stat{padding:30px 32px;border-left:1px solid var(--line2)}.stat:first-child{border-left:0}
.stat b{display:block;font-size:40px;font-weight:700;letter-spacing:-.04em;line-height:1.1}.stat small{display:block;margin-top:4px;font-size:14px;color:var(--muted);line-height:1.45}
/* ---------- sections ---------- */
.sec{margin-top:clamp(96px,10vw,140px)}
.sectag{display:inline-flex;align-self:flex-start;font:600 12px/1 var(--sans);letter-spacing:.12em;padding:7px 11px;border-radius:8px;background:var(--sectag-bg);color:var(--sectag-fg)}
h2{font-weight:600;font-size:clamp(34px,4vw,54px);line-height:1.04;letter-spacing:-.035em;margin-top:18px}
.sec-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:38px}.sec-row h2{margin-top:18px}
.about{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:64px}
.about-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start}.about-copy h2{margin:0}.body{font-size:17px;line-height:1.75;color:var(--soft)}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chip{padding:8px 16px;border:1px solid var(--line);border-radius:99px;font-size:13px;color:var(--muted);background:var(--card)}.chip b{color:var(--text);margin-left:5px;font-weight:600}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-content:start}
.skill{padding:28px;background:var(--card);border:1px solid var(--line);border-radius:20px;transition:transform .35s var(--ease),border-color .3s,background .35s}.skill:hover{transform:translateY(-4px);border-color:rgba(var(--acc),.7)}
.num{display:inline-flex;align-items:center;justify-content:center;height:34px;min-width:44px;padding:0 10px;border-radius:10px;font:600 12px var(--sans);letter-spacing:.08em;background:var(--accent);color:var(--ink)}.num.n1{background:var(--band);color:var(--accent)}html[data-theme=dark] .num.n1{background:var(--card2);border:1px solid var(--line)}
.skill h3{margin:20px 0 14px;font-size:19px;font-weight:600}
.pills{display:flex;flex-wrap:wrap;gap:6px}.pills span{font-size:12.5px;padding:6px 11px;border-radius:8px;background:var(--chip);color:var(--chipt)}
/* experience */
.filter{display:flex;padding:5px;background:var(--card);border:1px solid var(--line);border-radius:14px;gap:2px}
.filter button{padding:10px 18px;border:0;border-radius:10px;background:transparent;color:var(--soft);font:600 14px var(--sans);cursor:pointer;transition:background .25s,color .25s}.filter b{opacity:.55;font-weight:600;margin-left:3px}
.filter .on{background:var(--btnd-bg);color:var(--btnd-fg)}
.exp-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:16px}
.feat{grid-column:1/-1;position:relative;overflow:hidden;background:var(--band);color:#f5f5f0;border-radius:24px;padding:38px;display:flex;flex-wrap:wrap;gap:28px 56px;align-items:flex-start}
.feat-orb{position:absolute;right:28px;top:28px;width:96px;height:96px;border-radius:50%;background:var(--accent);opacity:.12;animation:morph 18s ease-in-out infinite}
.feat-l{flex:1 1 300px;display:flex;flex-direction:column;gap:10px;position:relative}
.tags2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.live{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#c8d0cb}.live i,.active i{width:8px;height:8px;border-radius:99px;background:var(--accent);animation:blink 2s infinite}
.tagchip{font:600 11px/1 var(--sans);letter-spacing:.12em;padding:6px 10px;border-radius:7px;background:var(--chip);color:var(--chipt);text-transform:uppercase}.tagchip.lime{background:var(--accent);color:#0e1411}
.feat-name{display:flex;align-items:center;gap:16px;margin-top:6px}.feat-name h3{font-size:clamp(30px,3.4vw,40px);font-weight:600;letter-spacing:-.03em}
.feat-role{font-size:17px;color:#e4e9e6}.meta{display:flex;gap:18px;flex-wrap:wrap;color:#9da8a1;margin-top:6px}
.feat-r{flex:1 1 420px;font-size:17px;line-height:1.75;color:#c8d0cb;position:relative}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:26px;display:flex;flex-direction:column;gap:8px;transition:transform .35s var(--ease),border-color .3s,background .35s}.card:hover{transform:translateY(-4px);border-color:rgba(var(--acc),.7)}
.card-top{display:flex;justify-content:space-between;align-items:center}.active{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--active)}.active i{background:#5da51f}
.card-name{display:flex;align-items:center;gap:12px;margin-top:10px}.card-name h3{font-size:21px;font-weight:600}.card-role{font-size:15px;color:var(--soft)}
.card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line2);color:var(--muted)}
.past{grid-column:1/-1;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:12px 36px;transition:background .35s}
.past-h{display:flex;justify-content:space-between;padding:22px 0 14px;letter-spacing:.12em;color:var(--muted)}
.prow{display:flex;flex-wrap:wrap;gap:10px 40px;padding:26px 0;border-top:1px solid var(--line2)}
.pdate{flex:0 0 190px;color:var(--muted);line-height:1.75;font-size:13px}
.pmain{flex:1 1 480px;min-width:0}.pmain h3{font-size:20px;font-weight:600;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.at{color:var(--muted);font-weight:500}.at a:hover{color:var(--text)}
.pmain ul{margin:10px 0 0;padding-left:18px;list-style:disc;color:var(--soft);font-size:15px;line-height:1.75}.pmain p{margin-top:10px;color:var(--soft);font-size:15px;line-height:1.75}
.prow>.tagchip{align-self:flex-start}
/* education + certifications */
.edu.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:20px;align-items:start}
.panel{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:36px;transition:background .35s}.panel h2{font-size:36px;margin:18px 0 20px}
.edu-list li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line2);transition:padding .3s var(--ease)}.edu-list li:hover{padding-left:8px}
.edu-list b{display:block;font-size:16px;font-weight:600}.edu-list small{display:block;font-size:14px;color:var(--muted);margin-top:3px}.edu-list em{font-style:normal;color:var(--muted);font-size:13px}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:20px}.cert-grid.one{grid-template-columns:1fr}
.cert{padding:16px;border-radius:14px;background:var(--card2);transition:transform .3s var(--ease)}.cert:hover{transform:translateY(-3px)}.cert b{display:block;font-size:14px;font-weight:600;line-height:1.4}.cert small{display:block;font-size:13px;color:var(--muted);margin-top:6px}
/* awards (dark band) */
.band{position:relative;overflow:hidden;margin-top:clamp(96px,10vw,140px);background:var(--band);color:#f5f5f0}
.band-jelly{position:absolute;width:320px;height:320px;right:-80px;top:-60px;background:linear-gradient(135deg,rgba(var(--acc),.14),rgba(var(--acc),.02));border:1px solid rgba(var(--acc),.18);animation:morph 20s ease-in-out infinite}
.band-in{position:relative;padding:110px 0}.band .sectag{background:var(--accent);color:#0e1411}.band .hl{color:var(--accent)}
.aw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.aw{background:#172019;border:1px solid #243128;border-radius:22px;overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),border-color .3s}.aw:hover{transform:translateY(-5px);border-color:rgba(var(--acc),.5)}
.aw-img{position:relative}.aw-img button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden}.aw-img img{width:100%;height:240px;object-fit:cover;transition:transform .7s var(--ease)}.aw:hover .aw-img img{transform:scale(1.06)}
.yr{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:8px;background:var(--accent);color:#0e1411;font-size:12px;font-weight:700}.yr.static{position:static;display:inline-block;margin:20px 0 0 24px}
.aw-b{padding:24px;display:flex;flex-direction:column;gap:8px}.aw-b h3{font-size:21px;font-weight:600}.org{font-size:14px;color:#9da8a1}.rich{margin-top:6px;font-size:15px;line-height:1.65;color:#c8d0cb}
/* contact (lime block) */
.contact-card{background:var(--accent);color:#0e1411;border-radius:32px;padding:clamp(28px,5vw,64px);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:start;position:relative;overflow:hidden}
.contact-card:before{content:"";position:absolute;width:340px;height:340px;left:-100px;bottom:-140px;background:rgba(14,20,17,.06);animation:morph 22s ease-in-out infinite;pointer-events:none}
.c-l{display:flex;flex-direction:column;gap:22px;position:relative}.contact .sectag{background:var(--band);color:var(--accent)}.contact h2{font-size:clamp(40px,4.6vw,64px);line-height:1;letter-spacing:-.04em;margin:0}.contact .hl{color:#0e1411}
.c-l p{font-size:18px;line-height:1.65;color:#26301f;max-width:460px}
.c-rows{display:grid;gap:10px}.c-row{display:block;padding:16px 20px;border-radius:16px;background:rgba(14,20,17,.08);transition:transform .3s var(--ease),background .3s}a.c-row:hover{transform:translateX(6px);background:rgba(14,20,17,.14)}
.c-row small{display:block;font-size:12px;color:#3a4532}.c-row b{font-size:16px;font-weight:600}
.soc{display:flex;gap:10px;flex-wrap:wrap}.soc a{padding:12px 20px;border-radius:12px;background:var(--band);color:var(--accent);font-size:14px;font-weight:600;transition:transform .3s var(--ease)}.soc a:hover{transform:translateY(-3px)}
.c-form{background:#fff;color:#0e1411;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:16px;box-shadow:0 30px 60px -30px rgba(14,20,17,.4);position:relative}
.c-form h3{font-size:22px;font-weight:600;margin-bottom:4px}.c-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:600}.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.c-form input,.c-form textarea{padding:14px 15px;border:1px solid #dadcd4;border-radius:12px;background:#fafaf7;color:#0e1411;font:400 15px var(--sans);transition:border-color .25s,box-shadow .25s}
.c-form input:focus,.c-form textarea:focus{outline:0;border-color:#0e1411;box-shadow:0 0 0 4px rgba(14,20,17,.1)}.c-form textarea{resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}.tick{display:none}.c-form.sending .btn{opacity:.7;pointer-events:none}.c-form.done .tick{display:inline}.c-form.done .lbl{display:none}
.form-msg{font-size:14px;min-height:20px;color:#3f4642}.form-msg.err{color:#b42318}.form-msg.ok{color:#2f6b12;font-weight:600}.c-form.shake{animation:shake .4s}
/* footer + modals */
.foot{margin-top:clamp(40px,6vw,80px);background:var(--band);color:#c8d0cb}.foot-in{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:40px 0;font-size:14px}
.foot nav.foot-col{display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px}.foot nav a:hover{color:var(--accent)}
.modal{border:1px solid var(--line);color:var(--text);padding:34px;max-width:min(700px,92vw);max-height:86vh;overflow:auto;border-radius:24px;background:var(--card)}
.modal::backdrop{background:rgba(5,8,6,.72)}.modal h2{font-size:30px;margin:0 0 20px}
.modal.lb{padding:10px;max-width:92vw;background:transparent;border:0}.lb img{max-height:84vh;border-radius:16px;margin:auto}.modal[open]{animation:zoom .25s ease}
.close{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:var(--chip);color:var(--text);cursor:pointer;font-size:20px;line-height:1;z-index:2}.close:hover{background:var(--accent);color:var(--ink)}
/* ---------- keyframes + motion ---------- */
@keyframes blink{50%{opacity:.35}}@keyframes ping{70%{box-shadow:0 0 0 9px rgba(var(--acc),0)}100%{box-shadow:0 0 0 0 rgba(var(--acc),0)}}
@keyframes morph{0%,100%{border-radius:42% 58% 63% 37%/45% 40% 60% 55%}50%{border-radius:60% 40% 38% 62%/58% 62% 38% 42%}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:14px -20px}}
@keyframes marq{to{transform:translateX(calc(var(--shift,50%) * -1))}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes bob{50%{transform:translateY(-9px)}}@keyframes zoom{from{opacity:0;transform:scale(.95)}}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes jit{0%,95%,100%{transform:translate(0)}96%{transform:translate(-1px,0)}97%{transform:translate(2px,1px)}98%{transform:translate(-2px,-1px)}99%{transform:translate(1px,0)}}
@keyframes glT{0%,95%,100%{opacity:0;clip-path:inset(0 0 100% 0)}96%{opacity:.9;clip-path:inset(10% 0 65% 0);transform:translate(-3px,0)}97%{opacity:0}97.5%{opacity:.9;clip-path:inset(55% 0 15% 0);transform:translate(3px,0)}98%{opacity:0}98.5%{opacity:.7;clip-path:inset(30% 0 45% 0);transform:translate(-2px,0)}99%{opacity:0}}
@keyframes glB{0%,95%,100%{opacity:0;clip-path:inset(0 0 100% 0)}96%{opacity:.9;clip-path:inset(60% 0 10% 0);transform:translate(3px,0)}97%{opacity:0}97.5%{opacity:.9;clip-path:inset(15% 0 55% 0);transform:translate(-3px,0)}98%{opacity:0}98.5%{opacity:.7;clip-path:inset(45% 0 30% 0);transform:translate(2px,0)}99%{opacity:0}}
html[data-motion=on][data-fx~=glitch] .hero .hl.glitch{animation:jit 7s ease-in-out infinite}
html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:before,html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;padding:inherit;background:var(--hero);color:var(--accent);opacity:0;pointer-events:none}
html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:before{text-shadow:-2px 0 #ff2b6d;animation:glT 7s steps(1,end) infinite}
html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:after{text-shadow:2px 0 #00e5ff;animation:glB 7s steps(1,end) infinite}
html[data-motion=on][data-fx~=glitch] .hero .hl.glitch,html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:before,html[data-motion=on][data-fx~=glitch] .hero .hl.glitch:after{animation-delay:.35s}
html.js[data-motion=on] [data-in]{animation:rise .9s var(--ease) both}
html.js[data-motion=on] .hero-copy>[data-in]:nth-child(2){animation-delay:.08s}html.js[data-motion=on] .hero-copy>[data-in]:nth-child(3){animation-delay:.16s}html.js[data-motion=on] .hero-copy>[data-in]:nth-child(4){animation-delay:.24s}html.js[data-motion=on] .hero-photo[data-in]{animation-delay:.2s}
html[data-motion=on][data-fx~=float] .fcard{animation:bob 5.5s ease-in-out infinite}html[data-motion=on][data-fx~=float] .fc2{animation-delay:-2.7s}
html.js[data-motion=on][data-fx~=reveal] [data-reveal]{opacity:0;transform:translateY(32px);transition:opacity .8s ease,transform .8s var(--ease),background .35s,border-color .3s;transition-delay:calc(var(--i,0) * .07s)}
html.js[data-motion=on][data-fx~=reveal] [data-reveal].in{opacity:1;transform:none}
html.js[data-motion=on][data-fx~=marquee] .marquee .track{animation:marq var(--dur,40s) linear infinite}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}[data-reveal]{opacity:1!important;transform:none!important}.marquee .track{width:auto;flex-wrap:wrap;justify-content:center}.marquee .set.dup{display:none}}
/* ---------- responsive ---------- */
@media(max-width:1000px){.hero-in{grid-template-columns:1fr;padding-bottom:110px}.hero-photo{order:-1}.stage{width:min(380px,78%)}.fc1{left:-6%}.fc2{right:-5%}.hero-feat-in{flex-direction:column;align-items:flex-start;gap:6px}.marquee{width:100%}}
@media(max-width:900px){
 .burger{display:block}.menu{position:fixed;inset:0;z-index:-1;border:0;border-radius:0;background:var(--band);justify-content:center;align-items:center;opacity:0;pointer-events:none;transition:opacity .3s}.menu.open{opacity:1;pointer-events:auto}.slider{display:none}
 .menu{flex-direction:column;gap:6px}.menu ul{flex-direction:column;align-items:center;gap:6px}.menu a{font-size:30px;font-weight:600;padding:10px 24px}.cta{display:none}
}
@media(max-width:640px){.hdr-r .theme{display:none}.menu-theme{display:flex!important;margin-top:30px}.wrap{width:calc(100% - 36px)}.hdr-in{padding:12px 18px}.hero-in{padding:20px 18px 100px}.stage{width:min(320px,80%)}.fc1{left:-3%;bottom:8%}.fc2{right:-2%}.stat{border-left:0;border-top:1px solid var(--line2);padding:22px 24px}.stat:first-child{border-top:0}.panel{padding:26px}.past{padding:8px 22px}.pdate{flex-basis:100%}.feat{padding:28px}.wm .a,.wm .b{font-size:1.15rem;letter-spacing:2px}.j1,.j2,.j3,.p1,.p3{display:none}.hdr-r{gap:8px}.theme button{width:26px}.thumb{width:26px}html[data-pref=system] .thumb{transform:translateX(26px)}html[data-pref=dark] .thumb{transform:translateX(52px)}}

/* ---------- glass touches, initials, compact lists, footer, pop-in ---------- */
body:before,body:after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(120px);pointer-events:none}
body:before{width:520px;height:520px;left:-160px;top:18%;background:rgba(var(--acc),.10)}body:after{width:560px;height:560px;right:-200px;bottom:6%;background:rgba(125,211,252,.08)}
html[data-theme=dark] body:before{background:rgba(var(--acc),.07)}
.hdr{background:rgba(14,20,17,.72);background:color-mix(in srgb,var(--band) 74%,transparent);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.06)}
.stats-card,.card,.skill,.panel,.c-row{backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
html[data-theme=light] .stats-card,html[data-theme=light] .card,html[data-theme=light] .skill,html[data-theme=light] .panel,html[data-theme=light] .past{background:rgba(255,255,255,.72);border-color:rgba(14,20,17,.08)}
html[data-theme=dark] .stats-card,html[data-theme=dark] .card,html[data-theme=dark] .skill,html[data-theme=dark] .panel,html[data-theme=dark] .past{background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.08)}
.fcard{background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.5)}
.modal{backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.tagchip,.sectag,.mono,.num,.at,.pdate,.meta,.past-h,.card-foot{font-family:var(--sans);font-variant-numeric:tabular-nums}
.sectag{font-weight:600;letter-spacing:.14em}.tagchip{font-weight:600;letter-spacing:.1em}
.brand-logo{display:block;height:30px;width:auto}
.co.ini{display:inline-flex;align-items:center;justify-content:center;font-weight:700;background:var(--chip);color:var(--chipt);line-height:1}
.co.sm.ini{font-size:13px}.co.md.ini{font-size:15px}.co.lg.ini{font-size:20px}
.co.edu{background:#fff;border:1px solid var(--line)}.co.edu img{object-fit:contain;padding:5px}
/* hero: calm and minimal */
.hero-in{gap:clamp(28px,5vw,80px)}.hero-copy{gap:26px}
.hero h1{font-size:clamp(44px,5.6vw,78px)}
.shapes .j3{width:150px;height:150px;right:2%;bottom:24%;opacity:.7}.shapes .p3{width:84px;right:14%;top:22%;opacity:.8}
.fc1{left:-12%;bottom:14%}.fc2{right:-8%;top:30%}
.frame{background:rgba(255,255,255,.04);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}
/* skills: compact with expandable pills */
.pills .more-btn{padding:6px 11px;border-radius:8px;border:1px dashed var(--line);background:transparent;color:var(--muted);font:600 12.5px var(--sans);cursor:pointer;transition:border-color .25s,color .25s}.pills .more-btn:hover{border-color:var(--accent);color:var(--text)}
html.js .pills:not(.open) .more{display:none}.pills.open .more-btn{display:none}
.pills.open .more{animation:rise .5s var(--ease) both}
/* education + certificates */
.edu-list li{align-items:center;gap:14px}.edu-list li>div{flex:1;min-width:0}
.cert-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-bottom:6px}.cert-list.one{grid-template-columns:1fr}
.cert-list li{padding:12px 0;border-top:1px solid var(--line2);transition:padding .3s var(--ease)}.cert-list li:hover{padding-left:6px}
.cert-list b{display:block;font-size:14px;font-weight:600;line-height:1.35}.cert-list small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
/* footer */
.foot{margin-top:clamp(40px,6vw,80px);background:var(--band);color:#c8d0cb}
.foot-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px;padding:64px 0 44px}
.foot-brand p{margin-top:16px;max-width:320px;font-size:14px;line-height:1.7;color:#9da8a1}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:14px}.foot-col h4{margin:0 0 6px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#8c9891}
.foot-col a,.foot-col span{color:#d9e0dc;transition:color .25s,transform .25s var(--ease)}.foot-col a:hover{color:var(--accent);transform:translateX(3px)}
.foot-bot{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.08);font-size:13px;color:#8c9891}.foot-bot a:hover{color:var(--accent)}
.rc-note{font-size:11px;color:#6b746e;line-height:1.5}.rc-note a{text-decoration:underline}
/* pop-in on scroll, hero entrance, progress bar */
.pbar{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}.pbar i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
html.js[data-motion=on][data-fx~=popin] [data-pop]{opacity:0;transform:translateY(34px) scale(.93);filter:blur(7px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,1.1,.3,1),filter .8s ease;transition-delay:calc(var(--i,0) * .09s)}
html.js[data-motion=on][data-fx~=popin] [data-pop].in{opacity:1;transform:none;filter:none}
html.js[data-motion=on][data-fx~=popin] .stage{animation:stagePop 1.1s cubic-bezier(.2,1.1,.3,1) .15s both}
@keyframes stagePop{from{opacity:0;transform:translateY(40px) scale(.92);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
html.js[data-motion=on] .pills span{transition:transform .3s var(--ease),background .25s}html.js[data-motion=on] .pills span:hover{transform:translateY(-2px)}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em}.w>i{display:inline-block;font-style:inherit;transform:translateY(110%);transition:transform .8s var(--ease);transition-delay:calc(var(--k,0) * .05s)}
.in .w>i,.w.in>i{transform:none}
@media(max-width:1000px){.foot-top{grid-template-columns:1fr 1fr}.cert-list{grid-template-columns:1fr}}
@media(max-width:640px){.foot-top{grid-template-columns:1fr;padding-top:44px}}

/* ---------- v6: calmer hero graphics (box, circle, ring, dots), compact skills and certificates ---------- */
.frame-back{position:absolute;left:0;right:0;bottom:0;top:21%;border-radius:36px;border:1px solid rgba(var(--acc),.3);background:rgba(var(--acc),.05);transform:rotate(-5deg) translate(-12px,8px)}
.ring{position:absolute;left:50%;bottom:calc(4% - 14px);width:calc(92% + 28px);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);border:1px solid rgba(var(--acc),.38)}
.dotpat{position:absolute;right:18px;top:18px;width:84px;height:84px;border-radius:18px;background-image:radial-gradient(rgba(var(--acc),.55) 1.6px,transparent 1.6px);background-size:14px 14px}
.frame{overflow:hidden}
.feat-orb{display:none}
.skills-compact{display:grid;gap:0;border-left:2px solid rgba(var(--acc),.28);padding-left:30px;align-self:start}
.sk{padding:20px 0;border-top:1px solid var(--line2)}.sk:first-child{border-top:0;padding-top:4px}
.sk h3{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
.sk ul{display:flex;flex-wrap:wrap;gap:7px 20px}
.sk li{position:relative;padding-left:12px;font-size:13.5px;color:var(--muted);transition:color .25s,transform .25s var(--ease)}
.sk li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.sk li:hover{color:var(--text);transform:translateX(2px)}
.cert-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.cert-chips li{padding:7px 12px;border:1px solid var(--line);border-radius:99px;font-size:12.5px;line-height:1.3;color:var(--soft);transition:border-color .25s,color .25s,transform .25s var(--ease);cursor:default}
.cert-chips li:hover{border-color:var(--accent);color:var(--text);transform:translateY(-2px)}
.cert-chips li small{display:block;margin-top:2px;font-size:11px;color:var(--muted)}
.cert-chips li:has(small){border-radius:14px}
.cert-list li,.cert-list{backdrop-filter:none;-webkit-backdrop-filter:none}
.panel h2{font-size:clamp(28px,3vw,34px);margin-bottom:22px}
@media(max-width:1000px){.skills-compact{border-left:0;padding-left:0;border-top:2px solid rgba(var(--acc),.28);padding-top:26px}}

/* ---------- v7: minimal hero image, timeline, corner orb, hairline rings ---------- */
.frame{background:rgba(255,255,255,.035)}
.feat-orb{display:block;position:absolute;right:-70px;top:-70px;width:250px;height:250px;border-radius:50%;background:var(--accent);opacity:.11;animation:morph 22s ease-in-out infinite;pointer-events:none}
.feat-l,.feat-r{position:relative;z-index:1}.feat-r{max-width:560px}
.edu.two{align-items:stretch}
.past{position:relative}
.past .tl{position:absolute;left:calc(36px + 190px + 20px);top:70px;bottom:36px;width:2px;border-radius:2px;background:var(--line);pointer-events:none}.past .tl:after{content:'';position:absolute;inset:0;border-radius:2px;background:var(--accent);transform-origin:top;transform:scaleY(var(--line-p,0));box-shadow:0 0 12px rgba(var(--acc),.5)}
.prow{position:relative}
.prow:before{content:"";position:absolute;left:calc(190px + 20px - 5px);top:32px;width:11px;height:11px;border-radius:50%;background:var(--card);border:2px solid var(--line);transition:background .4s,border-color .4s,box-shadow .4s}
.prow.on:before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px rgba(var(--acc),.15)}
@media(max-width:900px){.past .tl,.prow:before{display:none}}
#about:before,#experience:before,#education:before{content:"";position:absolute;width:460px;height:460px;border-radius:50%;pointer-events:none;z-index:-1;background:repeating-radial-gradient(circle,transparent 0 30px,rgba(var(--acc),.12) 31px 32px);-webkit-mask-image:radial-gradient(circle,#000 10%,transparent 68%);mask-image:radial-gradient(circle,#000 10%,transparent 68%)}
#about:before{right:-170px;top:-150px}#experience:before{left:-190px;top:-170px}#education:before{right:-170px;top:-190px}
html[data-theme=light] #about:before,html[data-theme=light] #experience:before,html[data-theme=light] #education:before{background:repeating-radial-gradient(circle,transparent 0 30px,rgba(14,20,17,.09) 31px 32px)}
.stat b{font-size:clamp(34px,3.4vw,44px)}
.stats-card{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.stat{padding:28px 26px}

/* v9 */
.feat-orb{opacity:.2!important;width:300px!important;height:300px!important}
.feat-orb:before,.feat-orb:after{content:"";position:absolute;border-radius:50%;border:1px solid var(--accent);opacity:.5}.feat-orb:before{inset:-34px}.feat-orb:after{inset:-72px;opacity:.28}
.feat{overflow:hidden}
.clock{display:inline-flex;gap:6px;align-items:center;margin-left:10px;padding:6px 12px;border:1px solid var(--line);border-radius:99px;font-size:12px;opacity:.85}.clock b{font-weight:500;color:var(--accent)}
.edu.two .panel{display:flex;flex-direction:column}
.cert-extra{margin-top:auto;padding-top:22px}.cert-extra .mono{font-size:11px;opacity:.6;display:block;margin-bottom:10px}.cert-chips.alt li{border-style:dashed}
.pal{width:min(560px,92vw);padding:14px;top:14vh;margin-inline:auto}.pal input{width:100%;font:inherit;font-size:17px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:transparent;color:inherit}
.pal ul{list-style:none;margin:10px 0 0;padding:0;max-height:50vh;overflow:auto}.pal li{padding:12px 14px;border-radius:12px;cursor:pointer;display:flex;justify-content:space-between}.pal li.sel,.pal li:hover{background:rgba(var(--acc),.14)}.pal li small{opacity:.55}
.pal-hint{position:fixed;right:18px;bottom:18px;z-index:40;font-size:12px;padding:8px 12px;border-radius:99px;border:1px solid var(--line);background:var(--card);backdrop-filter:blur(14px);cursor:pointer;color:inherit}@media(max-width:900px){.pal-hint{display:none}}

/* v10: mobile polish */
html,body{max-width:100%;overflow-x:clip}img,video,svg{max-width:100%}
.totop{position:fixed;right:18px;bottom:18px;z-index:45;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#0b0e0c;box-shadow:0 8px 24px rgba(0,0,0,.28);opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .3s,transform .3s}
.totop.show{opacity:1;transform:none;pointer-events:auto}.totop:hover{transform:translateY(-3px)}
.pal-hint{right:auto;left:18px}
@media(max-width:900px){
 .hdr{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--band)!important}
 .menu{height:100vh;height:100dvh;width:100vw;z-index:-1;overflow-y:auto;padding:90px 24px 40px}
 .menu-theme{display:flex!important;margin-top:26px}
}
@media(max-width:640px){
 .fcard{padding:9px 12px!important;border-radius:14px!important;max-width:150px}
 .fc1{left:-2%!important;bottom:6%!important;gap:8px!important}.fc1 .tile,.fc1 .ic,.fc1 i{width:30px!important;height:30px!important;font-size:12px!important}
 .fc1 small,.fc1 .sm{font-size:9.5px!important}.fc1 b,.fc1 strong{font-size:12px!important;line-height:1.25}
 .fc2{right:-2%!important;top:auto!important;bottom:34%!important}.fc2 b{font-size:22px!important}.fc2 small,.fc2 span{font-size:10px!important}
 .foot-bot{flex-direction:column;justify-content:center;text-align:center;padding-bottom:84px}.foot-bot small{display:block;text-align:center;width:100%}
 .feat{padding:24px 20px}.hero-in{overflow:hidden}.clock{margin:6px 0 0}
}
html{overflow-x:hidden}body{overflow-x:hidden;position:relative}
.band,.hero,.contact,.sec{overflow-x:clip}.band-jelly{max-width:100vw}
@media(max-width:900px){#about:before,#experience:before,#education:before{display:none}}
@media(max-width:640px){
 .fcard{max-width:none!important}
 .fc1{left:2%!important;bottom:3%!important;padding:7px 12px 7px 8px!important;white-space:nowrap}.fc1 small{display:none!important}.fc1 b{font-size:12px!important}
 .fc1 .tile,.fc1 .co{width:26px!important;height:26px!important;border-radius:8px!important;flex:none}
 .fc2{right:1%!important;top:40%!important;bottom:auto!important;padding:8px 12px!important}.fc2 b{font-size:20px!important}.fc2 small{font-size:9px!important;max-width:90px}
}

/* about page */
.doc-page{background:var(--bg);color:var(--ink,inherit)}.doc{max-width:760px;padding:64px 0 90px;line-height:1.7}.doc h1{font-size:clamp(34px,6vw,56px);margin:18px 0}.doc h2{margin:44px 0 14px;font-size:26px}.doc h3{margin:22px 0 4px;font-size:18px}.doc-lead{font-size:19px}.facts{display:grid;grid-template-columns:130px 1fr;gap:8px 18px}.facts dt{opacity:.6}.facts dd{margin:0}.doc-list{padding-left:18px}.doc-list li{margin:8px 0}.doc a{color:var(--accent);text-decoration:underline}

.past .tl{display:none!important}.clock{display:none!important}
.edu.two .panel .cert-chips{margin-bottom:28px}.edu.two .panel>.btn[data-open]{margin-top:auto;align-self:stretch}

/* travelling dot that follows the scroll down the past-experience list */
.past .tl{display:block!important;width:13px;height:13px;left:calc(36px + 190px + 14px);top:calc(70px + (100% - 110px) * var(--line-p,0));bottom:auto;border-radius:50%;background:var(--accent);box-shadow:0 0 0 6px rgba(var(--acc),.18),0 0 18px rgba(var(--acc),.6);z-index:2;transition:top .15s linear}
.past .tl:after{display:none}
.prow.on:before{box-shadow:none}

/* no dots on the past-experience list; popup scrollbars sit inside the popup */
.past .tl,.prow:before{display:none!important}
.modal.scroll{padding:0;overflow:hidden}.modal .mb{margin:14px 6px 14px 0;padding:20px 28px 20px 34px;max-height:calc(86vh - 28px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(var(--acc),.55) transparent}
.modal .mb::-webkit-scrollbar{width:8px}.modal .mb::-webkit-scrollbar-track{background:transparent}.modal .mb::-webkit-scrollbar-thumb{background:rgba(var(--acc),.55);border:0;border-radius:8px}
.modal.scroll .close{right:18px;top:16px}
.flag{display:inline-block;vertical-align:-1px;margin-left:5px;border-radius:2px;box-shadow:0 0 0 1px rgba(128,128,128,.3)}
/* popups: lock the page behind, no scrollbar on image popups */
html:has(dialog[open]){overflow:hidden}
.modal.lb{overflow:hidden}.modal.lb img{display:block;max-width:100%;max-height:84vh;object-fit:contain}
.grecaptcha-badge{visibility:hidden!important}
/* phones: form fills the lime card; 16px fields stop the browser zooming in on focus */
input,textarea,select{font-size:16px}
.c-form input,.c-form textarea{font-size:16px}
@media(max-width:640px){
 .contact-card{padding:26px 12px 12px;gap:28px;border-radius:26px}
 .c-l{padding:0 8px}
 .c-form{padding:24px 18px;border-radius:20px}
 .two{grid-template-columns:1fr}
}

/* footer on phones: compact two-column layout */
@media(max-width:640px){
 .foot-top{grid-template-columns:1fr 1fr;gap:28px 20px;padding:40px 0 28px}
 .foot-brand{grid-column:1/-1}.foot-brand p{margin-top:12px;font-size:15px;max-width:none}
 .foot-top>.foot-col:last-child{grid-column:1/-1}
 .foot-col{gap:2px;font-size:15px}.foot-col h4{margin-bottom:8px}
 .foot-col a,.foot-col span{display:block;padding:6px 0;line-height:1.4;min-height:0}
 .foot-bot{padding:18px 0 90px;gap:6px}.foot-bot small{font-size:13px;line-height:1.6}
}
@media(max-width:640px){.foot nav.foot-col{gap:2px}}
@media(max-width:640px){.foot-bot{padding:16px 0 20px!important}.foot-top{padding-bottom:22px}}
.stage picture,.hero picture{display:contents}
.aw-img picture{display:contents}

/* smoothness: no blur filters on big or animated elements, GPU-only motion, skip painting off-screen sections */
.stats-card,.card,.skill,.panel,.c-row,.frame,.fcard,.sk{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html[data-theme=light] .stats-card,html[data-theme=light] .card,html[data-theme=light] .skill,html[data-theme=light] .panel,html[data-theme=light] .past{background:rgba(255,255,255,.92)}
.fcard{background:rgba(255,255,255,.94)}
.jelly,.band-jelly,.feat-orb,.contact-card:before{animation:none!important}
html.js[data-motion=on][data-fx~=popin] [data-pop]{filter:none;transform:translateY(26px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.9,.3,1);transition-delay:calc(var(--i,0) * .07s)}
html.js[data-motion=on][data-fx~=popin] [data-pop].in{transform:none}
@keyframes stagePop{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.marquee .track,.fcard,.stage,.totop,.hdr{will-change:transform}
#education,#awards,.foot{content-visibility:auto;contain-intrinsic-size:auto 640px}