/* ==========================================================================
   ZypLabs — James Patrick Ampo
   One page. No external requests: no webfonts, no CDN, no analytics.

   The ground colour is #0e141b on purpose: it is the exact background of the
   mascot reference sheet, so the mascot crops sit on the page with no visible
   box, border or seam. Change --ground and you must re-crop the mascots.
   ========================================================================== */

:root{
  --ground:      #0e141b;
  --ground-2:    #121a23;
  --ground-3:    #16202b;
  --rule:        #223040;
  --rule-soft:   #1a2634;

  --ink:         #eef4fb;
  --ink-2:       #b8c6d6;
  --ink-3:       #7d8fa3;

  --accent:      #ffb703;
  --accent-dim:  #8a6300;
  --live:        #3ddc97;

  --wrap:        68rem;
  --gut:         clamp(1.15rem, 4vw, 3rem);
  --sect:        clamp(3.5rem, 9vw, 7rem);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --r: 10px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1rem, .96rem + .18vw, 1.0625rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

.skip{
  position:absolute; left:-9999px;
  background:var(--accent); color:#101010;
  padding:.6rem 1rem; border-radius:0 0 var(--r) 0; font-weight:600; z-index:20;
}
.skip:focus{ left:0; top:0; }

/* ── shell ───────────────────────────────────────────────────────────── */
.top{
  max-width:var(--wrap); margin:0 auto;
  padding:1.5rem var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  border-bottom:1px solid var(--rule-soft);
}
.mark{
  font-family:var(--mono); font-size:.82rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.top-mail{ font-family:var(--mono); font-size:.78rem; color:var(--ink-3); }
.top-mail:hover{ color:var(--accent); }

main{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }

/* ── hero ────────────────────────────────────────────────────────────── */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  align-items:center;
  padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,7vw,5rem);
}
@media (min-width:56rem){
  .hero{ grid-template-columns:minmax(0,1.55fr) minmax(0,.95fr); }
}

.eyebrow{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 1.1rem;
}

.hero h1{
  margin:0 0 1.25rem;
  font-size:clamp(2rem, 1.25rem + 3.6vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:700;
  text-wrap:balance;
}
.hero h1::after{
  content:"";
  display:block;
  width:3.25rem; height:3px;
  margin-top:1.5rem;
  background:var(--accent);
  border-radius:2px;
}

.lede{
  margin:0 0 2rem;
  max-width:34rem;
  color:var(--ink-2);
  font-size:clamp(1rem, .95rem + .3vw, 1.15rem);
}

.cta-row{ margin:0; display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }

.btn{
  display:inline-block;
  background:var(--accent); color:#101010;
  font-weight:650; font-size:.95rem;
  padding:.78rem 1.4rem; border-radius:var(--r);
  transition:transform .16s var(--ease), filter .16s var(--ease);
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); filter:brightness(1.08); }

.btn-ghost{
  display:inline-block;
  color:var(--ink-2); font-size:.95rem; font-weight:550;
  padding:.78rem 1.15rem; border-radius:var(--r);
  border:1px solid var(--rule);
  transition:border-color .16s var(--ease), color .16s var(--ease);
}
.btn-ghost:hover{ text-decoration:none; color:var(--ink); border-color:var(--ink-3); }

/* mascot art — no frame, it sits directly on the ground colour */
.hero-art{ position:relative; display:flex; justify-content:center; align-items:flex-end; }
.mascot-hero{
  width:clamp(9rem, 24vw, 14rem);
  height:auto;
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-7px); }
}

/* ── bands ───────────────────────────────────────────────────────────── */
.band{
  padding:var(--sect) 0;
  border-top:1px solid var(--rule-soft);
  scroll-margin-top:1.5rem;
}
.band-last{ padding-bottom:clamp(3rem,7vw,5rem); }

.band h2{
  margin:0 0 1.6rem;
  font-size:clamp(1.3rem, 1.1rem + .95vw, 1.85rem);
  letter-spacing:-.018em;
  font-weight:680;
  display:flex; align-items:baseline; gap:.75rem;
}
.num{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  color:var(--accent-dim); letter-spacing:.1em;
}
.band-sub{ margin:-.7rem 0 2.2rem; color:var(--ink-3); max-width:38rem; }

/* ── capabilities ────────────────────────────────────────────────────── */
.grid-2{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft);
  border-radius:var(--r);
  overflow:hidden;
}
@media (min-width:44rem){
  .grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
.cap{
  background:var(--ground);
  padding:clamp(1.15rem,3vw,1.7rem);
  display:flex; gap:1.1rem; align-items:flex-start;
  transition:background-color .2s var(--ease);
}
.cap:hover{ background:var(--ground-2); }
.cap img{
  /* height-based: these are character poses, so matching character height
     reads consistently. Width-based sizing made tall poses look oversized. */
  height:clamp(3.4rem, 8vw, 4.5rem);
  width:auto; flex:0 0 auto;
  margin-top:.15rem;
}
.cap h3{
  margin:.1rem 0 .45rem;
  font-size:1.02rem; font-weight:640; letter-spacing:-.01em;
}
.cap p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.58; }

/* ── the system ──────────────────────────────────────────────────────── */
.sys-head{ max-width:44rem; }
.sys h3{
  margin:0 0 .6rem;
  font-size:clamp(1.15rem,1rem + .7vw,1.5rem);
  letter-spacing:-.015em; font-weight:660;
}
.sys-sub{ margin:0 0 1.8rem; color:var(--ink-2); }

.figures{
  margin:0 0 2.4rem;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft); border-radius:var(--r); overflow:hidden;
}
@media (min-width:40rem){ .figures{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.figures > div{ background:var(--ground); padding:1rem 1.1rem; }
.figures dt{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:.3rem;
}
.figures dd{
  margin:0; font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem);
  font-weight:700; letter-spacing:-.02em; color:var(--ink);
}
.figures dd span{
  display:block; font-size:.66rem; font-weight:500; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); margin-top:.15rem;
}

/* flow diagram */
.flow{
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:clamp(1.1rem,3vw,1.9rem);
  background:var(--ground-2);
}
.flow-row{ display:flex; justify-content:center; }
.flow-stack{ flex-wrap:wrap; gap:.5rem; }

.node{
  border:1px solid var(--rule);
  background:var(--ground);
  border-radius:7px;
  padding:.6rem .85rem;
  display:flex; align-items:center; gap:.6rem;
  font-size:.86rem;
  min-width:0;
}
.node b{
  font-family:var(--mono); font-size:.78rem; font-weight:600;
  color:var(--accent); flex:0 0 auto;
}
.node span{ color:var(--ink-2); }
.node i{
  font-family:var(--mono); font-style:normal; font-size:.68rem;
  color:var(--ink-3); margin-left:auto; padding-left:.7rem; flex:0 0 auto;
}
.node-src{ border-color:var(--accent-dim); }
.node-src b{ color:var(--ink); }
.node-hub{
  border-color:var(--accent);
  background:linear-gradient(0deg, rgba(255,183,3,.07), rgba(255,183,3,.07));
  width:100%; justify-content:center;
}
.node-out{ justify-content:center; text-align:center; }
.node-out b{
  font-family:var(--sans); font-size:.8rem; font-weight:550;
  color:var(--ink-2); letter-spacing:.01em;
}

.link{
  width:1px; height:1.35rem;
  background:var(--rule);
  margin:.35rem auto;
}

.flow-fan{
  display:grid; grid-template-columns:minmax(0,1fr); gap:.5rem;
}
@media (min-width:40rem){
  .flow-fan{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem 1.5rem; }
}
.fan-col{ display:grid; gap:.5rem; }

.sys-note{
  margin:1.6rem 0 0;
  color:var(--ink-3); font-size:.9rem;
  padding-left:1rem; border-left:2px solid var(--rule);
  max-width:44rem;
}

/* ── process ─────────────────────────────────────────────────────────── */
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft); border-radius:var(--r); overflow:hidden;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:48rem){ .steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.steps li{
  background:var(--ground);
  padding:clamp(1.15rem,3vw,1.7rem);
  transition:background-color .2s var(--ease);
}
.steps li:hover{ background:var(--ground-2); }
.steps img{ width:3.4rem; height:auto; margin-bottom:.9rem; }
.steps h3{ margin:0 0 .4rem; font-size:.98rem; font-weight:640; }
.steps p{ margin:0; color:var(--ink-2); font-size:.9rem; line-height:1.56; }

/* ── rates ───────────────────────────────────────────────────────────── */
.rates{
  display:grid; gap:1px;
  background:var(--rule-soft);
  border:1px solid var(--rule-soft); border-radius:var(--r); overflow:hidden;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:44rem){ .rates{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.rate{
  background:var(--ground);
  padding:clamp(1.15rem,3vw,1.7rem);
  transition:background-color .2s var(--ease);
}
.rate:hover{ background:var(--ground-2); }
.rate h3{ margin:0 0 .5rem; font-size:1rem; font-weight:640; letter-spacing:-.01em; }
.price{
  margin:0 0 .8rem;
  font-family:var(--mono); font-size:1.18rem; font-weight:600;
  color:var(--accent); letter-spacing:-.01em;
}
.rate-body{ margin:0 0 1rem; color:var(--ink-2); font-size:.92rem; line-height:1.58; }
.rate-meta{
  margin:0; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3);
}

.nda{
  margin:2rem 0 0;
  color:var(--ink-3); font-size:.88rem;
  padding-left:1rem; border-left:2px solid var(--rule);
  max-width:46rem;
}

/* ── contact ─────────────────────────────────────────────────────────── */
.contact-grid{
  display:grid; gap:clamp(1.5rem,4vw,3rem); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:52rem){
  .contact-grid{ grid-template-columns:minmax(0,1.4fr) minmax(0,.75fr); }
}
.contact-art{ display:flex; justify-content:center; }
.mascot-cta{
  width:clamp(7rem,17vw,10.5rem); height:auto;
  animation:breathe 6.5s ease-in-out infinite;
}

.links{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.links li{ font-size:.98rem; }
.links a{ font-family:var(--mono); font-size:.88rem; }
.links .plain{ font-family:var(--mono); font-size:.88rem; color:var(--ink-2); }

/* ── footer ──────────────────────────────────────────────────────────── */
.foot{
  max-width:var(--wrap); margin:0 auto;
  padding:1.6rem var(--gut) 2.4rem;
  border-top:1px solid var(--rule-soft);
  display:flex; flex-wrap:wrap; gap:.5rem 1.5rem;
  justify-content:space-between;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-3);
  letter-spacing:.04em;
}
.foot-note{ color:var(--rule); }

/* ── motion & print ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media print{
  :root{ --ground:#fff; --ground-2:#fff; --ink:#000; --ink-2:#333; --ink-3:#555; --rule:#bbb; --rule-soft:#ddd; --accent:#000; --accent-dim:#555; }
  body{ background:#fff; color:#000; }
  .skip,.hero-art,.contact-art,.top-mail{ display:none; }
  .band{ break-inside:avoid; border-top:1px solid #ddd; padding:1.2rem 0; }
  .flow{ border:1px solid #bbb; }
  .node{ border:1px solid #bbb; }
  a{ color:#000; text-decoration:underline; }
}