/* ============================================================
   Homepage — six movements.
   Statement → Research → Proven solutions → Products → Credibility → Contact.
   The page runs cream throughout except one inversion at Products; that
   single transition is what makes the technology read in a different register.
   ============================================================ */

/* ---------- shared movement head ---------- */
.mv{padding-block:clamp(4rem,8vw,7rem)}
.mv-head{max-width:56ch}
.mv-head h2{margin-top:.9rem;font-size:clamp(2rem,4.4vw,3.3rem);max-width:19ch}
.mv-head .lead{margin-top:1.1rem;max-width:50ch}
.mv-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1.6rem;font-family:var(--s);
  font-size:.95rem;font-weight:600;color:var(--accent-text)}
.mv-more .a{transition:transform .25s}
.mv-more:hover .a{transform:translateX(5px)}

/* ---------- 2 · research ----------
   Four figures, one per sector. Counting up is the point: the size of the
   number is the argument, and watching it climb makes the size register. */
.res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);margin-top:clamp(2.2rem,4.5vw,3.4rem)}
@media(max-width:900px){.res-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.res-grid{grid-template-columns:1fr}}
.res{background:var(--cream);padding:clamp(1.5rem,3vw,2.3rem) clamp(1.1rem,2.2vw,1.6rem);
  display:flex;flex-direction:column;gap:.7rem;text-decoration:none;transition:background .25s}
a.res:hover{background:var(--paper)}
.res-sector{font-family:var(--s);font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.res-num{font-family:var(--d);font-weight:460;font-size:clamp(2.6rem,5.6vw,4rem);line-height:.92;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.res-num.neg{color:var(--c-neg,#C2611F)}
.res-num .u{font-size:.46em;color:var(--soft)}
.res-say{font-family:var(--s);font-size:.88rem;color:var(--soft);line-height:1.5;flex:1}
.res-src{font-family:var(--s);font-size:.72rem;color:var(--faint)}
a.res .res-src{color:var(--accent-text);font-weight:600}

/* ---------- 3 · proven solutions ----------
   Wide editorial bands, not cards. Each carries a named customer. */
.pv{border-top:1px solid var(--line);padding-block:clamp(2.6rem,5.5vw,4.2rem);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center;
  text-decoration:none;transition:padding-left .35s ease}
.pv:last-of-type{border-bottom:1px solid var(--line)}
a.pv:hover{padding-left:.6rem}
@media(max-width:860px){.pv{grid-template-columns:1fr;gap:1.4rem}}
.pv-customer{font-family:var(--s);font-size:.7rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--accent-text)}
.pv h3{margin-top:.8rem;font-family:var(--d);font-weight:480;font-size:clamp(1.7rem,3.6vw,2.6rem);
  line-height:1.06;max-width:18ch;color:var(--ink)}
.pv-say{margin-top:1rem;font-size:1.02rem;color:var(--soft);line-height:1.65;max-width:44ch}
.pv-go{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.3rem;font-family:var(--s);
  font-size:.92rem;font-weight:600;color:var(--accent-text)}
.pv-go .a{transition:transform .25s}
a.pv:hover .pv-go .a{transform:translateX(5px)}
/* the outcome figures sit opposite the copy, on their own rule */
.pv-figs{display:flex;flex-wrap:wrap;gap:1.6rem 2.8rem;padding-left:clamp(0rem,2vw,2rem);
  border-left:1px solid var(--line)}
@media(max-width:860px){.pv-figs{padding-left:0;border-left:0;padding-top:1.2rem;border-top:1px solid var(--line)}}
.pv-fig b{display:block;font-family:var(--d);font-weight:500;font-size:clamp(1.7rem,3.2vw,2.4rem);
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.pv-fig span{display:block;margin-top:.4rem;font-family:var(--s);font-size:.8rem;color:var(--soft);
  line-height:1.45;max-width:18ch}
.pv-pending{font-family:var(--s);font-size:.86rem;color:var(--faint);line-height:1.6;max-width:30ch;font-style:italic}

/* ---------- 4 · products · the one inversion ----------
   A full-bleed dark stage that redefines the tokens rather than overriding
   each component, so everything inside picks up the new surface for free. */
.stage-dark{
  --cream:#0A0B0A; --paper:#141714; --ink:#F2F4F1; --soft:#A6ADA6; --faint:#6E756E;
  --line:#242824; --accent-text:#22A876;
  background:var(--cream);color:var(--ink);
  padding-block:clamp(4.5rem,9vw,7.5rem);
  border-block:1px solid #242824}
.stage-dark h2,.stage-dark h3{color:var(--ink)}
.stage-dark .eyebrow{color:#22A876}

/* the hero screenshot, at the scale it deserves */
.shot{margin-top:clamp(2rem,4.5vw,3.4rem);border-radius:var(--r-md);overflow:hidden;
  border:1px solid #2A2F2A;background:#0F120F;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9)}
.shot img{width:100%;height:auto;display:block}
.shot-cap{padding:.9rem 1.2rem;border-top:1px solid #2A2F2A;font-family:var(--s);
  font-size:.82rem;color:var(--soft)}
.shot-cap b{color:var(--ink);font-weight:600}

/* the six products as one composed stack, not six cards */
.stack-dia{margin-top:clamp(2.5rem,5vw,4rem);display:flex;flex-direction:column;gap:.7rem}
.sd-row{display:grid;gap:.7rem}
.sd-row.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.sd-row.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.sd-row.four{grid-template-columns:1fr}}
.sd-tier{font-family:var(--s);font-size:.66rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.2rem}
.sd-cell{display:block;padding:1.05rem 1.2rem;border-radius:14px;border:1px solid #262B26;
  background:#131713;text-decoration:none;transition:border-color .25s,background .25s,transform .25s}
.sd-cell:hover{border-color:currentColor;background:#171C17;transform:translateY(-2px)}
.sd-name{display:inline-flex;align-items:baseline;gap:.12em;font-family:var(--s);font-size:1rem;
  font-weight:700;letter-spacing:-.01em}
.sd-name i{font-family:var(--d);font-style:italic;font-weight:520;font-size:1.32em;line-height:1}
.sd-what{display:block;margin-top:.4rem;font-family:var(--s);font-size:.83rem;color:var(--soft);
  line-height:1.5}
/* the base tier spans full width — it is what everything above stands on */
.sd-cell.base{background:linear-gradient(180deg,#141B18 0%,#101512 100%);border-color:#2C3630}
.sd-cell.govern{background:linear-gradient(180deg,#131A16 0%,#0F1512 100%);border-color:#2A342E}
.sd-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:clamp(2rem,4vw,2.8rem);
  font-family:var(--s);font-size:.95rem;font-weight:600;color:#22A876}
.sd-link .a{transition:transform .25s}
.sd-link:hover .a{transform:translateX(5px)}

/* ---------- 5 · enterprise credibility ----------
   A typographic band. Deliberately not an icon grid. */
.cred{padding-block:clamp(3.5rem,7vw,6rem)}
.cred h2{max-width:16ch}
.cred-list{list-style:none;display:flex;flex-wrap:wrap;gap:.7rem .8rem;
  margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.cred-list li{font-family:var(--s);font-size:clamp(.95rem,1.5vw,1.12rem);font-weight:500;
  color:var(--soft);padding:.55rem 1.1rem;border:1px solid var(--line);border-radius:100px}
.cred-list li b{color:var(--ink);font-weight:700}