/* Bielov Software Limited — company site
   Label/value schedules carry the page. Values that are identifiers — addresses,
   register references, bundle IDs — are set in mono; prose stays in the body face.
   Statutory identity lives in the footer, where a company's imprint belongs. */

:root{
  --paper:#FBFAF8;
  --ground:#F2F0EC;
  --surface:#FFFFFF;
  --ink:#141A1F;
  --slate:#5A6771;
  --rule:#E2E0DB;
  --rule-strong:#CFCCC5;
  --marine:#1F4E5F;
  --marine-soft:rgba(31,78,95,.08);

  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Spike's own typeface. Scoped to Spike's wordmark — the product speaks in its
     own voice, the company describes it in ours. */
  --spike:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --measure:54rem;
  --gutter:1.5rem;
  --content:calc(54rem - 3rem);
  --label-col:13.5rem;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#10151A;
    --ground:#0B0F13;
    --surface:#161C22;
    --ink:#E9EBED;
    --slate:#98A4AD;
    --rule:#242E37;
    --rule-strong:#33404B;
    --marine:#79B9C9;
    --marine-soft:rgba(121,185,201,.12);
  }
}

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

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit;}

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

.skip{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--marine);
  color:var(--paper);
  padding:.75rem 1rem;
  font-family:var(--mono);
  font-size:.8125rem;
  z-index:10;
}
.skip:focus{left:0;}

/* ---------- masthead ---------- */

.masthead{
  padding-inline:var(--gutter);
  border-bottom:1px solid var(--rule);
}

.masthead-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  max-width:var(--content);
  margin-inline:auto;
  padding-block:1.75rem;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:.625rem;
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.005em;
  text-decoration:none;
}

.wordmark-mark{
  width:.875rem;
  height:.875rem;
  border-radius:3px;
  background:var(--marine);
  flex:none;
}

.masthead-nav{
  display:flex;
  gap:1.5rem;
  font-family:var(--mono);
  font-size:.8125rem;
  letter-spacing:.02em;
}

.masthead-nav a{
  color:var(--slate);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:color .15s ease,border-color .15s ease;
}

.masthead-nav a:hover{color:var(--ink);border-bottom-color:var(--marine);}

/* ---------- shared shell ---------- */

main{
  max-width:var(--measure);
  margin:0 auto;
  padding:0 var(--gutter);
}

.hero{padding-block:clamp(3rem,7vw,4.5rem) 0;}

.capabilities,.products,.contact{padding-block:clamp(2.5rem,5vw,3.5rem) 0;}

.contact{padding-bottom:clamp(2.5rem,5vw,3.5rem);}

.section-label{
  margin:0 0 0;
  padding-bottom:.875rem;
  border-bottom:2px solid var(--ink);
  font-family:var(--mono);
  font-weight:500;
  font-size:.75rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
}

/* ---------- hero ---------- */

.eyebrow{
  margin:0 0 1.5rem;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--marine);
}

.hero-name{
  margin:0 0 1.75rem;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.4rem,7.5vw,4.75rem);
  line-height:.96;
  letter-spacing:-.02em;
  text-transform:uppercase;
}

.lede{
  margin:0;
  max-width:46ch;
  font-size:clamp(1.0625rem,1.6vw,1.1875rem);
  color:var(--slate);
}

.ref{
  font-family:var(--mono);
  font-size:.9375rem;
  letter-spacing:.005em;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}

.address{font-style:normal;line-height:1.7;}

.note{
  color:var(--slate);
  font-size:.9375rem;
}

.verify-arrow{font-size:.875em;line-height:1;}

.section-note{
  margin:1.5rem 0 0;
  font-size:.875rem;
  color:var(--slate);
}

/* ---------- capabilities ---------- */
/* Mono is reserved for identifiers you can go and check — addresses, register
   references, bundle IDs. These values are prose, so they stay in the body face. */

.spec-list{margin:0;}

.spec-list > div{
  display:grid;
  grid-template-columns:var(--label-col) 1fr;
  gap:0 2rem;
  padding-block:1.375rem;
  border-bottom:1px solid var(--rule);
  animation:rise .55s cubic-bezier(.2,.7,.3,1) both;
  animation-delay:calc(var(--i,0) * 45ms);
}

.spec-list dt{
  font-size:.9375rem;
  color:var(--slate);
}

.spec-list dd{
  margin:0;
  padding-left:2rem;
  border-left:1px solid var(--rule);
  line-height:1.55;
}

/* ---------- products ---------- */

.product{
  margin-top:2rem;
  padding:1.75rem;
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:6px;
}

.product-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}

.product-identity{
  display:flex;
  align-items:center;
  gap:.875rem;
}

.product-logo{
  width:2.5rem;
  height:2.5rem;
  flex:none;
}

.product-name{
  margin:0;
  font-family:var(--spike);
  font-weight:700;
  font-size:1.75rem;
  letter-spacing:-.025em;
}

.product-status{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin:0;
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
}

.dot{
  width:.5rem;
  height:.5rem;
  border-radius:50%;
  background:var(--marine);
  box-shadow:0 0 0 3px var(--marine-soft);
}

.product-line{
  margin:.5rem 0 1rem;
  font-size:1.0625rem;
  color:var(--ink);
}

.product-body{
  margin:0 0 1.5rem;
  max-width:62ch;
  color:var(--slate);
}

.product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem 2.5rem;
  margin:0 0 1.5rem;
  padding-top:1.25rem;
  border-top:1px solid var(--rule);
}

.product-meta dt{
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:.25rem;
}

.product-meta dd{margin:0;}

.product-links{
  display:flex;
  flex-wrap:wrap;
  gap:.625rem;
  margin:0;
  padding:0;
  list-style:none;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.375rem;
  padding:.5625rem 1rem;
  border:1px solid var(--rule-strong);
  border-radius:4px;
  background:var(--paper);
  color:var(--ink);
  font-weight:600;
  font-size:.9375rem;
  text-decoration:none;
  transition:border-color .15s ease,transform .15s ease;
}

.btn:hover{border-color:var(--marine);transform:translateY(-1px);}

.btn-primary{
  background:var(--marine);
  border-color:var(--marine);
  color:var(--paper);
}

@media (prefers-color-scheme:dark){
  .btn-primary{color:#0B0F13;}
}

.btn-primary:hover{border-color:var(--marine);}

/* ---------- contact ---------- */

.contact-list{margin:0;}

.contact-list > div{
  display:grid;
  grid-template-columns:var(--label-col) 1fr;
  gap:0 2rem;
  padding-block:1.375rem;
  border-bottom:1px solid var(--rule);
}

.contact-list dt{
  font-size:.9375rem;
  color:var(--slate);
}

.contact-list dd{
  margin:0;
  padding-left:2rem;
  border-left:1px solid var(--rule);
}

.contact-list .note{display:block;margin-top:.25rem;font-size:.875rem;}

.link{
  color:var(--marine);
  text-decoration:none;
  border-bottom:1px solid var(--marine-soft);
  transition:border-color .15s ease;
}

.link:hover{border-bottom-color:var(--marine);}

.link .verify-arrow{margin-left:.2rem;}

/* ---------- colophon ---------- */

.colophon{
  margin-top:clamp(2rem,4vw,3rem);
  padding:2.5rem var(--gutter) 3rem;
  background:var(--ground);
  border-top:1px solid var(--rule);
}

.details{
  max-width:var(--content);
  margin:0 auto 2rem;
}

.details-heading{
  margin:0 0 1.25rem;
  font-family:var(--mono);
  font-weight:500;
  font-size:.6875rem;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--slate);
}

.details-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));
  gap:1.25rem 2rem;
  margin:0;
}

.details-grid dt{
  margin-bottom:.25rem;
  font-size:.75rem;
  color:var(--slate);
}

.details-grid dd{margin:0;}

.details .ref{font-size:.8125rem;line-height:1.6;}

.details-link{
  display:inline-block;
  margin-left:.375rem;
  font-family:var(--mono);
  font-size:.6875rem;
  letter-spacing:.04em;
  color:var(--marine);
  text-decoration:none;
  border-bottom:1px solid var(--marine-soft);
  white-space:nowrap;
}

.details-link:hover{border-bottom-color:var(--marine);}

.details-note{
  margin:1.5rem 0 0;
  font-size:.75rem;
  color:var(--slate);
}

.colophon-foot{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  justify-content:space-between;
  align-items:center;
  max-width:var(--content);
  margin:0 auto;
  padding-top:1.5rem;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:.75rem;
  letter-spacing:.04em;
  color:var(--slate);
}

.colophon-foot p{margin:0;}

/* ---------- responsive ---------- */

@media (max-width:44rem){
  body{font-size:16px;}

  .masthead-nav{gap:1rem;}

  .spec-list > div,
  .contact-list > div{
    grid-template-columns:1fr;
    gap:.5rem;
    padding-block:1.125rem;
  }

  .spec-list dd,
  .contact-list dd{
    padding-left:0;
    border-left:0;
  }

  .spec-list dt,
  .contact-list dt{
    font-family:var(--mono);
    font-size:.6875rem;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .verify{margin-left:0;margin-top:.5rem;}

  .product{padding:1.25rem;}
}

@keyframes rise{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .btn:hover{transform:none;}
}