/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.75;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background .3s,color .3s}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{line-height:1.3;font-weight:800;letter-spacing:-.01em}
:root[lang=en] h1,:root[lang=en] h2,:root[lang=en] h3,:root[lang=en] h4{letter-spacing:-.02em;line-height:1.2}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
::selection{background:var(--brand);color:var(--brand-ink)}
.wrap{width:min(1200px,100% - 40px);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-70px;background:var(--brand);color:var(--brand-ink);padding:10px 18px;border-radius:10px;z-index:200;font-weight:700}
.skip:focus{top:12px}

/* ===== Brand scrollbar (page + inner scrollers) ===== */
*{scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--scroll-track);border-radius:99px}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--green-300),var(--scroll-thumb));border-radius:99px;border:3px solid var(--scroll-track)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--amber-400),var(--amber-500))}
::-webkit-scrollbar-corner{background:transparent}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
