/* =========================================================
   CODE: NON
   Concept: the town square. Every office has the same characters doing
   the same jobs on repeat. We build the systems that do them instead.
   Palette: sky #7cc8ff, navy #0b1b4d, sun #ffc83d, cobalt #2340e6, tomato #d9352b, teal #0b8577
   Type: Pixelify Sans (headings, labels) + Figtree (reading text)
   ========================================================= */
:root{
  --u:4px;
  --cobalt:#2340e6; --navy:#0b1b4d; --sun:#ffc83d; --tomato:#d9352b; --teal:#0b8577;
  --bg:#eaf3ff; --panel:#ffffff; --ink:#0b1b4d; --muted:#465689; --line:#0b1b4d; --soft:#dbe8ff;
  --sky1:#7cc8ff; --sky2:#e9f7ff; --cloud:#ffffff; --orb:#ffc83d;
  --grass:#27a374; --grass2:#3bc793; --dirt:#8a5a3b; --dirt2:#744a2f;
  --drop:rgba(11,27,77,.28); --focus:#2340e6;
  --nav-h:68px;
}
:root[data-theme="night"]{
  --bg:#090e33; --panel:#131b52; --ink:#eef1ff; --muted:#a4b0e6; --line:#b9c4ff; --soft:#1b2570;
  --sky1:#070d44; --sky2:#2c40b0; --cloud:rgba(170,184,255,.26); --orb:#e9edff;
  --grass:#1b7a5b; --grass2:#25966f; --dirt:#4b3225; --dirt2:#3b271d;
  --drop:rgba(0,0,12,.55); --focus:#ffc83d;
}

*{box-sizing:border-box;margin:0;padding:0}
/* Pixel-notched border: four offset shadows leave the corners empty. Recomputed per element so --u and --line can be overridden locally. */
*{--notch:0 calc(var(--u)*-1) 0 0 var(--line),0 var(--u) 0 0 var(--line),calc(var(--u)*-1) 0 0 0 var(--line),var(--u) 0 0 0 var(--line)}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:'Pixelify Sans','Courier New',monospace;font-weight:700;line-height:1.08;letter-spacing:.005em;text-wrap:balance}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.ic{width:1em;height:1em;flex:none;display:block;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--sun);color:var(--navy);padding:10px 16px;font-weight:700}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}

/* ---------- pixel panel + button ---------- */
.px{background:var(--panel);color:var(--ink);box-shadow:var(--notch),calc(var(--u)*1.5) calc(var(--u)*1.5) 0 0 var(--drop)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Pixelify Sans',monospace;font-weight:600;font-size:19px;line-height:1;text-decoration:none;
  padding:15px 22px;background:var(--sun);color:#0b1b4d;border:0;cursor:pointer;
  box-shadow:var(--notch),6px 6px 0 var(--drop);
  transition:transform .12s steps(2);
}
.btn .ic{font-size:21px}
.btn:hover{transform:translate(-2px,-2px)}
.btn:active{transform:translate(3px,3px);box-shadow:var(--notch)}
.btn.alt{background:var(--panel);color:var(--ink)}
.btn.small{font-size:16px;padding:10px 14px;--u:3px}

.sec{padding:104px 0}
.sec-head{max-width:640px}
.sec-head h2{font-size:clamp(32px,5vw,52px)}
.sec-head h2::after{
  content:"";display:block;width:88px;height:8px;margin-top:16px;
  background:linear-gradient(90deg,var(--sun) 0 24px,transparent 24px 32px,var(--cobalt) 32px 56px,transparent 56px 64px,var(--tomato) 64px 88px);
}
.band-sun .sec-head h2::after{background:linear-gradient(90deg,#0b1b4d 0 24px,transparent 24px 32px,var(--cobalt) 32px 56px,transparent 56px 64px,var(--tomato) 64px 88px)}
.band-cobalt .sec-head h2::after{background:linear-gradient(90deg,var(--sun) 0 24px,transparent 24px 32px,#fff 32px 56px,transparent 56px 64px,var(--tomato) 64px 88px)}
.sec-head p{margin-top:18px;font-size:19px;color:var(--muted);max-width:56ch}

.band-dark{--ink:#eef1ff;--muted:#a9b6ec;--line:#b9c4ff;--panel:#141d5a;--soft:#1b2570;--drop:rgba(0,0,12,.5);--focus:#ffc83d;background:#0b1440;color:var(--ink)}
.band-sun{--ink:#0b1b4d;--muted:#4a3f0d;--line:#0b1b4d;--panel:#ffffff;--drop:rgba(11,27,77,.28);--focus:#0b1b4d;background:var(--sun);color:var(--ink)}
.band-cobalt{--ink:#ffffff;--muted:#dfe6ff;--line:#ffffff;--drop:rgba(0,0,40,.4);--focus:#ffc83d;background:var(--cobalt);color:var(--ink)}