/* ==========================================================================
   Systemfy Infotech — corporate site
   ---------------------------------------------------------------------------
   Concept: "systems, drawn". A technical drawing given voltage. Full-bleed
   zones alternate ink / bone / cobalt so scrolling has rhythm; oversized
   outlined numerals mark each section; the registration particulars are set as
   an instrument readout rather than buried in a table, because those exact
   facts are what a store reviewer comes here to check.

   Palette is a blue/orange complementary pair — electric cobalt as the signal
   colour, ember for emphasis — over warm bone and near-black ink.

   No build step: this file is the entire design system.
   ========================================================================== */

@font-face{font-family:'Bricolage';src:url('fonts/bricolage-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Bricolage';src:url('fonts/bricolage-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument';src:url('fonts/instrument-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument';src:url('fonts/instrument-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument';src:url('fonts/instrument-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains';src:url('fonts/jetbrains-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains';src:url('fonts/jetbrains-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  color-scheme: light;

  --ink:      #0d1117;
  --ink-soft: #171d26;
  --bone:     #f5f2eb;
  --bone-lift:#fbf9f5;
  --cobalt:   #2f4bff;
  --cobalt-dk:#1e34cc;
  --ember:    #ff6b35;

  /* Set per-zone; every child reads these so zones recolour automatically. */
  --fg:       var(--ink);
  --fg-muted: #545b66;
  --rule:     rgba(13,17,23,.14);
  --rule-soft:rgba(13,17,23,.08);
  --accent:   var(--cobalt);

  --display:'Bricolage','Helvetica Neue',Helvetica,Arial,sans-serif;
  --sans:'Instrument','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --page: 78rem;
  --pad: 2rem;
}
@media (max-width:48rem){ :root{ --pad:1.25rem } }

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bone);
  color:var(--fg);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Grain, so the large flat colour fields have some tooth. */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ zones -- */

.zone{ position:relative; background:var(--bone); }
.zone--ink{
  --fg:var(--bone); --fg-muted:rgba(245,242,235,.62);
  --rule:rgba(245,242,235,.16); --rule-soft:rgba(245,242,235,.09);
  --accent:#8fa2ff;
  background:var(--ink); color:var(--fg);
}
.zone--cobalt{
  --fg:#fff; --fg-muted:rgba(255,255,255,.76);
  --rule:rgba(255,255,255,.26); --rule-soft:rgba(255,255,255,.14);
  --accent:#fff;
  background:var(--cobalt); color:var(--fg);
}

/* Technical grid, faint, only on light zones. */
.zone--grid::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    repeating-linear-gradient(to right, rgba(13,17,23,.045) 0 1px, transparent 1px 100%),
    repeating-linear-gradient(to bottom, rgba(13,17,23,.045) 0 1px, transparent 1px 100%);
  background-size:clamp(48px,7vw,90px) clamp(48px,7vw,90px);
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%);
}

.shell{position:relative;z-index:1;max-width:var(--page);margin-inline:auto;padding-inline:var(--pad)}

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

.masthead{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bone) 86%,transparent);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(13,17,23,.12);
}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;gap:2rem;min-height:4.75rem}

.wordmark{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.wordmark__text{font-family:var(--display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.wordmark__text span{color:var(--cobalt)}

.nav{display:flex;align-items:center;gap:1.6rem;font-size:.875rem;font-weight:500}
.nav a{
  position:relative;color:#3c434e;text-decoration:none;padding-block:.3rem;
  transition:color .18s ease;
}
.nav a::after{
  content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--cobalt);
  transition:right .24s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current='page']::after{right:0}
.nav a[aria-current='page']{color:var(--ink)}

@media (max-width:52rem){
  .masthead{position:static}
  .masthead__inner{flex-direction:column;align-items:flex-start;gap:.6rem;padding-block:1rem}
  .nav{flex-wrap:wrap;gap:1.1rem}
}

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

.hero{padding-block:clamp(3.5rem,9vw,7rem) clamp(3rem,6vw,5rem)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,.88fr);gap:clamp(2rem,4.5vw,3.75rem);align-items:start}
@media (max-width:64rem){.hero__grid{grid-template-columns:minmax(0,1fr)}}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);margin:0 0 1.6rem;
}
.eyebrow::before{content:'';width:7px;height:7px;background:var(--ember);border-radius:50%;flex:none}

h1{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.5rem,5.5vw,4.6rem);line-height:1;letter-spacing:-.035em;
  margin:0 0 1.6rem;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--cobalt)}

.lede{font-size:clamp(1.05rem,1.5vw,1.24rem);line-height:1.55;color:var(--fg-muted);max-width:46ch;margin:0}

/* The spec panel — registration data as an instrument readout. */
.spec{
  border:1px solid var(--ink);background:var(--bone-lift);
  box-shadow:10px 10px 0 var(--cobalt);
}
.spec__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem 1rem;border-bottom:1px solid var(--ink);background:var(--ink);color:var(--bone);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
}
.spec__head b{color:var(--ember);font-weight:500}
.spec__row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:.75rem;padding:.72rem 1rem;border-bottom:1px solid var(--rule-soft)}
.spec__row:last-child{border-bottom:0}
.spec__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:#6c7280;padding-top:.16rem}
.spec__v{font-size:.875rem;font-weight:500;line-height:1.45}
.spec__v.tabular{font-family:var(--mono);font-weight:400;font-size:.82rem}
@media (max-width:30rem){.spec__row{grid-template-columns:minmax(0,1fr);gap:.15rem}}

/* Capability strip closing the hero. Grid, not flex: four equal cells stay on
   one row instead of orphaning the last item onto a second line. */
.strip{
  margin-top:clamp(2.5rem,5vw,4.25rem);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.strip span{
  padding:1.05rem 1.25rem;
  font-family:var(--mono);font-size:.73rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted);
  border-right:1px solid var(--rule-soft);
}
.strip span:last-child{border-right:0}
.strip b{color:var(--ember);font-weight:500;margin-right:.5rem}
@media (max-width:64rem){
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip span:nth-child(2n){border-right:0}
  .strip span:nth-child(-n+2){border-bottom:1px solid var(--rule-soft)}
}
@media (max-width:34rem){
  .strip{grid-template-columns:minmax(0,1fr)}
  .strip span{border-right:0;border-bottom:1px solid var(--rule-soft)}
  .strip span:last-child{border-bottom:0}
}

/* Compact header for inner pages (no spec panel). */
.pagehead{padding-block:clamp(3.25rem,7vw,5.75rem)}
.pagehead h1{font-size:clamp(2.2rem,4.8vw,3.7rem);margin-bottom:1.3rem;max-width:20ch}
.pagehead .lede{max-width:54ch}

/* ----------------------------------------------------------------- section -- */

.section{padding-block:clamp(3.25rem,7vw,6rem)}

.section__head{position:relative;margin-bottom:clamp(2rem,4vw,3.25rem);padding-right:clamp(0rem,14vw,10rem)}
/* Right-aligned so the ghosted numeral frames the heading instead of sitting
   directly behind the label, which read as a collision rather than a layer. */
.section__num{
  font-family:var(--display);font-weight:700;font-size:clamp(4rem,11vw,9rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1.5px var(--rule);
  position:absolute;right:0;top:-.18em;z-index:0;pointer-events:none;user-select:none;
}
@media (max-width:52rem){
  .section__head{padding-right:0}
  .section__num{display:none}
}
.section__label{
  position:relative;z-index:1;
  font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9rem;
}
h2{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.85rem,4vw,3.1rem);line-height:1.02;letter-spacing:-.03em;
  margin:0;max-width:22ch;text-wrap:balance;
}

.measure{max-width:58ch;color:var(--fg-muted)}
.measure p{margin:0 0 1.1rem}
.measure p:last-child{margin-bottom:0}
.measure strong{color:var(--fg);font-weight:600}

a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{color:var(--ember)}
.zone--cobalt a:hover{color:var(--ink)}

/* ------------------------------------------------------------- capability -- */

.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;margin-top:clamp(2rem,4vw,3rem)}
@media (max-width:52rem){.cards{grid-template-columns:minmax(0,1fr)}}

.card{
  position:relative;padding:1.75rem 1.6rem 1.85rem;
  background:var(--bone-lift);border:1px solid var(--rule);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s ease,border-color .22s ease;
}
.zone--ink .card{background:var(--ink-soft)}
.card::before{
  content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--cobalt);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.card:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(13,17,23,.10);border-color:var(--rule)}
.card:hover::before{transform:scaleX(1)}
.card__no{
  display:block;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.12em;
  color:var(--ember);margin-bottom:1rem;
}
.card h3{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.015em;margin:0 0 .6rem;color:var(--fg)}
.card p{margin:0;font-size:.925rem;color:var(--fg-muted);line-height:1.58}

/* ---------------------------------------------------------------- product -- */

.product{
  margin-top:clamp(2rem,4vw,3rem);
  border:1px solid var(--rule);background:var(--bone-lift);
}
.zone--ink .product{background:var(--ink-soft)}
.product__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:1.15rem 1.75rem;background:var(--cobalt);color:#fff;
}
.product__name{font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.025em;margin:0}
.product__tag{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.5);padding:.3rem .65rem;white-space:nowrap;
}
.product__body{padding:1.75rem}
.product__body > p{margin:0;color:var(--fg-muted);max-width:62ch}

.linklist{
  list-style:none;margin:1.5rem 0 0;padding:1.35rem 0 0;border-top:1px solid var(--rule-soft);
  display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;font-family:var(--mono);font-size:.79rem;
}
.linklist a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.12rem;transition:border-color .2s ease}
.linklist a:hover{border-bottom-color:var(--ember)}

/* ---------------------------------------------------------------- records -- */

.records{width:100%;border-collapse:collapse;font-size:.94rem}
.records th,.records td{text-align:left;vertical-align:top;padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--rule-soft)}
.records th{
  font-family:var(--mono);font-weight:400;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-muted);width:15rem;white-space:nowrap;
}
.records td{color:var(--fg)}
.records .tabular{font-family:var(--mono);font-size:.86rem}
@media (max-width:44rem){
  .records th,.records td{display:block;width:auto;padding:.25rem 0;border-bottom:0}
  .records th{padding-top:1rem}
  .records tr{display:block;border-bottom:1px solid var(--rule-soft);padding-bottom:.8rem}
}

/* ------------------------------------------------------------------ prose -- */

.prose{max-width:70ch;color:var(--fg-muted)}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.75rem);margin:2.9rem 0 1rem;max-width:none;color:var(--fg)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin:1.9rem 0 .55rem;color:var(--fg)}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.1rem;padding-left:1.15rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--fg);font-weight:600}
/* The note tints the zone it sits in rather than hard-coding a light panel:
   a fixed bone background inherited the ink zone's light text and rendered
   invisible. Every zone keeps its own contrast. */
.prose .note{
  border-left:3px solid var(--ember);background:rgba(13,17,23,.045);
  padding:1rem 1.25rem;margin:1.75rem 0;font-size:.94rem;color:var(--fg);
}
.zone--ink .prose .note{background:rgba(245,242,235,.07)}
.zone--cobalt .prose .note{background:rgba(255,255,255,.14)}
.updated{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-muted);
  margin:0 0 2.25rem;padding-bottom:1.15rem;border-bottom:1px solid var(--rule-soft);
}

/* ----------------------------------------------------------------- footer -- */

.footer{padding-block:clamp(2.75rem,5vw,4rem)}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:2.5rem;align-items:start}
@media (max-width:52rem){.footer__grid{grid-template-columns:minmax(0,1fr);gap:1.75rem}}
.footer__mark{font-family:var(--display);font-weight:700;font-size:1.3rem;letter-spacing:-.02em;margin:0 0 .75rem}
.footer__mark span{color:var(--cobalt)}
.zone--ink .footer__mark span{color:#8fa2ff}
.footer__legal{font-size:.83rem;color:var(--fg-muted);line-height:1.7;margin:0;max-width:42ch}
.footer__nav{display:flex;flex-direction:column;gap:.5rem;font-size:.86rem}
.footer__nav a{color:var(--fg-muted);text-decoration:none}
.footer__nav a:hover{color:var(--accent)}

/* -------------------------------------------------------------- utilities -- */

.pad-top{margin-top:1.75rem}
.mono{font-family:var(--mono);font-size:.9em}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bone);padding:.75rem 1.25rem;z-index:100}
.skip:focus{left:1rem;top:1rem}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ----------------------------------------------------------------- motion -- */

.rise{animation:rise .72s cubic-bezier(.2,.7,.3,1) both}
.rise:nth-child(1){animation-delay:.04s}
.rise:nth-child(2){animation-delay:.12s}
.rise:nth-child(3){animation-delay:.2s}
.rise:nth-child(4){animation-delay:.28s}
@keyframes rise{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:none}}

/* Scroll-driven reveals, deliberately TRANSFORM-ONLY.
   An opacity fade here would leave everything below the fold at opacity 0 until
   it is scrolled into range — which is exactly what a full-page screenshot, a
   crawler, or a print stylesheet captures. On a site whose entire purpose is to
   be verifiably functional to a store reviewer, content must never depend on
   scrolling to become readable. Motion is a bonus; legibility is not. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .onscroll{animation:nudge linear both;animation-timeline:view();animation-range:entry 0% entry 42%}
  }
}
@keyframes nudge{from{transform:translateY(14px)}to{transform:none}}

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