@font-face{font-family:Space Grotesk;src:local("Space Grotesk")}
.font-display{font-family:Space Grotesk,sans-serif}
.ds-vars{all:initial}
:root{--site-nav-max:clamp(240px,90vw,900px);--page-max:clamp(320px,92vw,900px);--site-nav-pad:2rem;--mobile-nav-w:65vw;--mobile-nav-max:220px;--list-w:100%;--content-reduction:.98;--ul-expand:24px;--ul-pad-extra:2px}
.size-6{width:1.5rem;height:1.5rem}
.size-5{width:1.25rem;height:1.25rem}
.size-12{width:3rem;height:3rem}
.rounded-xl{border-radius:.75rem}
.aspect-video{aspect-ratio:16/9}
.brand-dev{--brand:#2b2bee}
.brand-it{--brand:#14f195}
.brand-hw{--brand:#ff6a00}
.brand-contact{--brand:#4F46E5}
.icon{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;font-size:28px}
.icon-wrap{width:3rem;height:3rem;border-radius:.5rem;display:flex;align-items:center;justify-content:center;background-color:#1a1a2e;color:var(--brand);border:1px solid var(--brand);filter:drop-shadow(0 0 6px var(--brand));transition:transform .2s ease,box-shadow .2s ease}
.icon-wrap:hover{transform:translateY(-2px)}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:.5rem;background-color:#1a1a2e;color:var(--brand);border:1px solid var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1rem;border-radius:.5rem;background-color:var(--brand);color:#fff;transition:opacity .2s ease}
.btn:hover{opacity:.9}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;height:3rem;padding:0 1rem;border-radius:.5rem;background-color:transparent;color:var(--brand);border:1px solid var(--brand);transition:background-color .2s ease}
.btn-outline:hover{background-color:rgba(255,255,255,.05)}
.card{background-color:#1a1a2e;border:1px solid #282839;border-radius:.75rem}
.accordion-toggle{cursor:pointer}
.accordion-content{display:none}
.accordion-content.open{display:block}
.mobile-overlay{position:fixed;inset:0;background-color:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s ease-in-out;z-index:50}
.mobile-overlay.open{opacity:1;pointer-events:auto}
.mobile-nav{position:fixed;top:0;right:0;height:100vh;width:var(--mobile-nav-w);max-width:var(--mobile-nav-max);background-color:#1a1a2e;border-left:1px solid #282839;transform:translateX(100%);transition:transform .3s ease-in-out,width .3s ease-in-out;will-change:transform,width;z-index:60;backface-visibility:hidden;overflow-y:auto}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav-content{padding:24px;padding-inline:8px;display:flex;flex-direction:column;gap:16px;align-items:center;width:calc(100% * var(--content-reduction));max-width:100%;box-sizing:border-box;transition:width .3s ease-in-out}
.mobile-close{align-self:flex-end;background:transparent;border:none;color:#fff;font-size:24px}
.mobile-nav ul{list-style:none;margin:0;padding:8px var(--ul-pad-extra);display:flex;flex-direction:column;gap:15px;box-sizing:border-box;width:100%;max-width:100%;margin-inline:auto;border:1px solid #282839;background-color:#141426;border-radius:12px;box-shadow:0 8px 18px rgba(0,0,0,.35);transition:width .3s ease-in-out,padding .3s ease-in-out,box-shadow .3s ease-in-out}
.mobile-nav a{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:8px;color:#fff;text-decoration:none;width:100%;box-sizing:border-box}
.mobile-nav a:hover{background-color:#282839}
.mobile-nav a:active{background-color:rgba(43,43,238,.12)}
.mobile-nav a[aria-current="page"]{background-color:#23233a}
.mobile-nav a.brand-dev[aria-current="page"],
.mobile-nav a.brand-it[aria-current="page"],
.mobile-nav a.brand-hw[aria-current="page"],
.mobile-nav a.brand-contact[aria-current="page"]{border-left:3px solid var(--brand)}
.mobile-nav a:focus-visible{outline:2px solid #2b2bee;outline-offset:2px}
.icon.brand-dev,.icon.brand-it,.icon.brand-hw,.icon.brand-contact{color:var(--brand)}
.site-nav{max-width:var(--site-nav-max);width:100%;padding-inline:var(--site-nav-pad)}

.max-w-6xl{max-width:var(--page-max)!important}
.max-w-5xl{max-width:min(var(--page-max),860px)!important}

@media (min-width:640px){
  :root{--mobile-nav-w:45vw;--mobile-nav-max:240px;--list-w:clamp(180px,100%,240px);--content-reduction:.95;--page-max:clamp(360px,92vw,900px)}
}
@media (min-width:1024px){
  :root{--mobile-nav-w:200px;--mobile-nav-max:200px;--list-w:200px;--content-reduction:1;--page-max:900px}
}
@media (max-width:480px){
  :root{--mobile-nav-w:60vw;--mobile-nav-max:200px;--list-w:100%;--content-reduction:.98;--page-max:clamp(300px,94vw,900px)}
}
