/* ===== Design tokens, reset, typography, shared primitives ===== */
:root{
  --bg:#000000; --card:rgba(56,77,72,.32); --line:#384D48;
  --muted:rgba(228,253,225,.55); --soft:rgba(228,253,225,.8); --cream:#E4FDE1;
  --acc:#FE9000; --blue:#1471C9; --slate:#384D48;
  --display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --text:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5rem;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--soft);font:400 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:-20% -10% auto;height:70vh;background:radial-gradient(50% 60% at 50% 0%,rgba(56,77,72,.65),transparent 70%);pointer-events:none;z-index:-1}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:4px}
[hidden]{display:none!important}

.w{max-width:70rem;margin:0 auto;padding:0 1.25rem;padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
h1,h2,h3{font-family:var(--display);color:var(--cream);line-height:1.05;letter-spacing:-.03em}
h2{font-weight:800;font-size:clamp(2rem,5vw,3.2rem);margin-bottom:2rem}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font:500 .95rem/1 var(--text);padding:.8rem 1.2rem;border-radius:999px;border:1px solid var(--cream);color:var(--cream);text-decoration:none;background:none;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.btn.fill{background:var(--acc);border-color:var(--acc);color:#000}
.btn.quiet{border-color:var(--line);color:var(--soft)}
.btn:hover{background:var(--cream);border-color:var(--cream);color:#000}
.btn.fill:hover{background:var(--cream)}
.btn svg{width:15px;height:15px;transition:transform .25s}
.btn:hover svg{transform:translateY(2px)}

/* tags (shared by projects and certificates) */
.tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.4rem}
.tags span,.tags .tg{font-size:.85rem;color:var(--cream);background:rgba(20,113,201,.28);border:1px solid rgba(20,113,201,.7);border-radius:999px;padding:.15rem .75rem}
.tg{text-decoration:none;transition:background .2s,border-color .2s}
.tg:hover{background:var(--blue)!important;border-color:var(--blue)!important}

/* scroll reveal */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s ease calc(var(--i,0)*90ms),transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*90ms)}
.js .rv.vis{opacity:1;transform:none}

/* language swap fade */
main{transition:opacity .14s}
main.swap{opacity:0}

.hint{color:var(--muted);margin:-1.2rem 0 1.6rem}