/* css/home.css — the home page's own skin (promoted from the first-draft alternate on 2026-10-09: centred headline,
   the platform on a CSS-drawn notebook with a haze around it; the ring/orbit skin it replaced is backed up in
   ../!Previous/home-orbit-20261009). Original header follows.
   css/home.css — the home page's own skin, loaded after css/site.css (the shared inner-page base:
   tokens, buttons, nav layout, reveals, marquee, footer) and before css/nav.css (the bar).
   Rebuilt 2026-09-23 as a white page: the boss asked for no dark background, no globe, and the
   pace of apple.com — one centred head and one device per band, bands alternating white and grey.
   Built here: the hero (ring of checks and industries + a deck of live product cards), the workspace
   shot, the module cards, the AI Reviewer card, the industries cards, the security ledger and the
   awards strip; the Graph Intelligence shell (.gx) is the block ported from the old css/index.css
   at the end of this file. The previous night page is ../!Previous/index-20260923-night.html. */

:root {
  --grey: #F5F5F7;                 /* the light band, apple.com's grey */
  --green: #178A5C;                /* confirmations: deep enough to hold on white */
  --r-l: 28px; --r-m: 20px; --r-s: 14px;
  --shadow-l: 0 40px 90px -36px rgba(7,34,89,.30), 0 2px 8px rgba(7,34,89,.05);
  --shadow-m: 0 24px 60px -30px rgba(7,34,89,.25), 0 1px 3px rgba(7,34,89,.05);
}
body.home { background: var(--white); color: var(--ink); }
.skip { position: fixed; left: 16px; top: -60px; z-index: 300; padding: 10px 14px; background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700; text-decoration: none; }
.skip:focus { top: 16px; }

/* ---------- type ladder: larger, tighter, ink on white ---------- */
body.home h1 { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.04; letter-spacing: -0.034em; }
body.home .sec-head h2 { margin-top: 12px; font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.032em; color: var(--ink); }
body.home .sec-head .lede { margin-top: 20px; max-width: 62ch; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: var(--sub); }
.pillar { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--blue); }

/* ---------- bands ---------- */
.sec { padding: clamp(84px, 9vw, 132px) 0; }
section.band { position: relative; background: var(--white); }
section.band--grey { background: var(--grey); }
.wrap-l { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.mlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--blue); text-decoration: none; }
.mlink .ar { display: inline-block; transition: transform .2s ease; }
a:hover .mlink .ar, .mlink:hover .ar { transform: translateX(4px); }
body.home .btn-row { margin-top: clamp(36px, 4vw, 52px); }
@media (max-width: 640px) { .sec { padding: 64px 0; } }

/* =========================================================
   Hero — the FIRST DRAFT (2026-09-23), rebuilt 2026-10-08 as index.html (promoted from the first-draft alternate on 2026-10-09) for the big boss and revised
   the same day: a white hero with the headline, sub and buttons centred (the kicker and the One Platform strap
   were removed), and the WIDTH platform below on a MacBook-style notebook, front-on, the way apple.com shows a
   product — images/hero-shot-white.svg on the screen, a thin black bezel with the camera dot, an aluminium deck
   with the front lip, a soft floor shadow. Pure CSS; every measure is in container units (cqw of the notebook's
   own width), so it scales as one object from 1180px down to a phone. js/home-v1.js lifts it in once the screen
   has decoded.
   ========================================================= */
header.hero.hero--home { position: relative; display: block; min-height: 0; overflow: hidden; background: var(--white); color: var(--ink);
  padding: clamp(116px, 13vw, 168px) 0 0; }   /* overflow hidden clips the mist; .mac-wrap keeps room under the device for its shadow */
.hero--home .hero-copy { position: relative; z-index: 1; }
/* ---------- the mist (2026-10-09, user: "smoke effect behind the laptop"; second cut after "i can't see the smoke"):
   a haze of pale WIDTH blue AROUND the notebook — above its lid and out past both sides — because the device itself is
   opaque and hides anything directly behind it. The layer sits inside .mac-wrap, sized from the notebook so it scales
   with it, 150% of its width, and the hero clips it. Four blurred clouds drift slowly on their own cycles; the blur is
   rasterised once (will-change) and only the transform animates. Reduced motion: still. ---------- */
.mist { position: absolute; left: 50%; top: -14%; width: 150%; height: 114%; transform: translateX(-50%); z-index: 0; pointer-events: none; }
.mist i { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(13,79,211,var(--a)) 0%, rgba(13,79,211,calc(var(--a) * .45)) 45%, rgba(13,79,211,0) 100%);
  filter: blur(46px); will-change: transform;
  animation: mist var(--d) ease-in-out infinite alternate; animation-delay: var(--dl); }
@keyframes mist { to { transform: translate(var(--dx), var(--dy)) scale(1.1); } }
.mist i:nth-child(1) { --l: -6%; --t: 24%; --w: 44%; --h: 58%; --a: .36; --dx: 6%;  --dy: -8%; --d: 19s; --dl: -6s; }    /* left of the device */
.mist i:nth-child(2) { --l: 62%; --t: 18%; --w: 44%; --h: 56%; --a: .32; --dx: -7%; --dy: -6%; --d: 23s; --dl: -14s; }   /* right of it */
.mist i:nth-child(3) { --l: 20%; --t: 5%;  --w: 60%; --h: 38%; --a: .28; --dx: 4%;  --dy: 9%;  --d: 17s; --dl: -3s; }    /* above the lid */
.mist i:nth-child(4) { --l: 8%;  --t: 34%; --w: 84%; --h: 62%; --a: .16; --dx: -3%; --dy: -5%; --d: 29s; --dl: -20s; }   /* the wide floor */
@media (max-width: 760px) { .mist { width: 134%; } .mist i { filter: blur(26px); } }
.hero--home .hero-copy { text-align: center; max-width: 1040px; margin: 0 auto; }   /* governs the sub-line and buttons only: the headline sizes itself (below) */
body.home h1 { font-size: clamp(34px, 3.5vw, 52px); line-height: 1.06; letter-spacing: -0.034em; }
@media (min-width: 1101px) {
  /* the two-line headline (2026-10-09). Its second line measures 16.56em, so at the 70px cap it is 1159px wide:
     the width of the notebook below it on big monitors. The h1 is as wide as that line and centred on itself,
     so the mask spans (overflow: hidden, for the wipe) can never clip it — a copy-column cap did, twice. */
  body.home .hero--home h1 { font-size: min(4.3vw, 70px); }
  .hero--home .hero-copy > h1 { width: max-content; max-width: none; position: relative; left: 50%; transform: translateX(-50%); }
  .hero--home h1.mask span { white-space: nowrap; }
}
.hero--home h1 { margin: 0 auto; max-width: none; color: var(--ink); }
.hero--home h1 b { font-weight: inherit; color: var(--blue); }
.hero--home h1 .nb { font-style: normal; white-space: nowrap; }   /* "Compliance &" stays together when the phone wraps the line: no lone ampersand */
.hero--home .hero-sub { margin: 26px auto 0; max-width: 58ch; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.5; color: var(--sub); }
.hero--home .hero-ctas { justify-content: center; margin-top: 34px; gap: 8px 22px; }
.hero--home .hero-link { color: var(--blue); }
.hero--home .hero-link .ar { display: inline-block; margin-left: 6px; transition: transform .18s ease; }
.hero--home .hero-link:hover .ar { transform: translateX(4px); }
/* the hero arrives in order: the headline lines wipe up, then the sub and the buttons, then the notebook */
.hero--home .hero-sub.rv { transition-delay: .45s; }
.hero--home .hero-ctas.rv { transition-delay: .65s; }

/* ---------- the notebook ---------- */
.mac-wrap { position: relative; z-index: 1; margin-top: clamp(44px, 5vw, 68px); padding-bottom: 48px; }
.mac { position: relative; z-index: 1; isolation: isolate; width: min(100%, 1180px); margin: 0 auto; container-type: inline-size;
  opacity: 0; transform: translateY(28px);
  transition: opacity 1s cubic-bezier(.16,.84,.28,1) .85s, transform 1.1s cubic-bezier(.16,.84,.28,1) .85s; }
.mac.is-in { opacity: 1; transform: none; }
/* the lid: a near-black frame, a touch lighter at the top where the light falls, with a hairline aluminium edge;
   the bezel is thin at the sides, deeper above the screen for the camera and below it for the hinge */
.mac-lid { position: relative; margin: 0 1.2cqw; padding: 2.1cqw 1.25cqw 1.9cqw; border-radius: 2cqw 2cqw 1cqw 1cqw;
  background: linear-gradient(180deg, #2A2E35 0%, #15181D 16%, #0E1014 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 0 1px 0 rgba(255,255,255,.14); }
.mac-lid::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 38%); }
.mac-cam { position: absolute; left: 50%; top: .82cqw; width: .5cqw; height: .5cqw; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3A4049, #0B0D11 65%); box-shadow: 0 0 0 .16cqw #1B1F25; }
/* the screen: the platform edge to edge, the glass's rounded corners, set a touch into the bezel */
.mac-screen { position: relative; aspect-ratio: 1421 / 890; overflow: hidden; border-radius: .9cqw; background: #F2F4F8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.5), inset 0 0 1.2cqw rgba(0,0,0,.16); }
.mac-screen img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* a faint sheen across the glass, so it reads as a screen rather than a flat picture */
.mac-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%); }
/* the deck: the aluminium front edge with its bright top line and the finger notch */
.mac-base { position: relative; height: 1.55cqw; border-radius: 0 0 1.4cqw 1.4cqw / 0 0 100% 100%;
  background: linear-gradient(180deg, #F3F4F6 0%, #D6D9DE 26%, #B5BAC2 76%, #9FA4AC 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 1.8cqw 2.6cqw -1.2cqw rgba(7,34,89,.30); }
.mac-lip { position: absolute; left: 50%; top: 0; width: 13cqw; height: .5cqw; transform: translateX(-50%);
  border-radius: 0 0 .6cqw .6cqw; background: linear-gradient(180deg, #8F949C, #C3C7CD); box-shadow: inset 0 -1px 0 rgba(255,255,255,.55); }
/* the floor: a soft shadow under the whole object */
.mac-shadow { position: absolute; left: 4cqw; right: 4cqw; bottom: -2.4cqw; height: 4.6cqw; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(7,34,89,.24), rgba(7,34,89,0) 72%); filter: blur(1cqw); }

@media (max-width: 640px) {
  header.hero.hero--home { padding-top: 104px; }
  body.home h1 { font-size: clamp(32px, 9vw, 40px); }
  .mac-wrap { margin-top: 36px; padding: 0 16px 28px; }   /* a wider notebook on a phone */
}
@media (prefers-reduced-motion: reduce) {
  .mist i { animation: none; }
  .mac { opacity: 1; transform: none; transition: none; }
  .hero--home .hero-sub.rv, .hero--home .hero-ctas.rv { transition-delay: 0s; }
}

/* =========================================================
   Trust — the client marks on white
   ========================================================= */
section.trust.trust--home { padding: clamp(56px, 6vw, 84px) 0 clamp(64px, 7vw, 96px); border: 0; }
.trust-h { margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.trust--home .marquee { margin-top: 30px; }
.trust--home .mq-set { gap: clamp(48px, 6vw, 96px); padding-right: clamp(48px, 6vw, 96px); }
/* the marks in their own colours, 10% larger (2026-10-08, was greyscale at .62 and 26–36px) */
.trust--home .mq-set img { height: clamp(29px, 2.86vw, 40px); width: auto; display: block; opacity: 1; }

/* =========================================================
   One Platform — the workspace shot and the figures
   ========================================================= */
.pshot { max-width: 1180px; margin: clamp(40px, 4.6vw, 64px) auto 0; overflow: hidden; border-radius: var(--r-m);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-l); }
.pshot img { display: block; width: 100%; height: auto; }

/* the platform film (2026-10-08) in the frame the workspace shot used: runs muted while the band is on screen and
   downloads only once the band is near (js "Platform film"); the top-right button turns the sound on and shows the
   native controls; a play mark covers the poster only when the film will not run on its own (reduced motion, or
   autoplay refused), so nothing flashes before the first frame. The frame's own dark floor shows for the instant before the first frame paints. */
.pfilm { position: relative; max-width: 1180px; margin: clamp(40px, 4.6vw, 64px) auto 0; overflow: hidden; border-radius: var(--r-m);
  aspect-ratio: 16 / 9; background: #0B1326; border: 1px solid var(--line); box-shadow: var(--shadow-l); }
.pfilm video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: #0B1326; }
.pfilm-play { position: absolute; inset: 0; z-index: 1; display: none; place-items: center; border: 0; padding: 0; cursor: pointer;
  background: rgba(4,16,43,.16); color: var(--blue); transition: background-color .25s ease; }
.pfilm-play:hover { background: rgba(4,16,43,.26); }
.pfilm-play i { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: rgba(255,255,255,.94);
  box-shadow: 0 18px 40px -16px rgba(7,34,89,.6); transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.pfilm-play:hover i { transform: scale(1.06); }
.pfilm-play svg { width: 28px; height: 28px; margin-left: 4px; fill: currentColor; }
.pfilm.needs-play .pfilm-play { display: grid; }     /* only once autoplay was refused, or under reduced motion: no flash before play starts */
.pfilm-snd { position: absolute; right: 16px; top: 16px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 12px;
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px; background: rgba(4,16,43,.5); color: #fff; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .25s ease, border-color .25s ease; }
.pfilm-snd:hover { background: rgba(13,79,211,.85); border-color: rgba(255,255,255,.7); }
.pfilm-snd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pfilm-snd svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pfilm-snd .on, .pfilm.has-sound .pfilm-snd .off { display: none; }
.pfilm.has-sound .pfilm-snd .on { display: inline; }
@media (max-width: 640px) {
  .pfilm-snd { right: 10px; top: 10px; min-height: 36px; padding: 0 12px 0 10px; font-size: 11px; }
  .pfilm-play i { width: 60px; height: 60px; }
  .pfilm-play svg { width: 22px; height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pfilm-play i, .pfilm-snd { transition: none; } }
.figs { list-style: none; margin: clamp(40px, 4.4vw, 60px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 22px clamp(40px, 6vw, 96px); }
.figs li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.figs strong { font-size: clamp(30px, 3vw, 44px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--blue); font-variant-numeric: tabular-nums; }   /* WIDTH blue since 2026-10-08 (was ink) */
.figs span { margin-top: 8px; font-size: 14px; color: var(--sub); }

/* =========================================================
   Core capabilities — six modules, one grid
   ========================================================= */
.mods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(40px, 4.4vw, 60px); }
.mod { position: relative; display: flex; flex-direction: column; padding: clamp(24px, 2.4vw, 32px); border-radius: var(--r-m);
  background: var(--grey); color: inherit; text-decoration: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background-color .35s ease; }
.mod:hover, .mod:focus-visible { background: #fff; transform: translateY(-4px); box-shadow: var(--shadow-m); }
.mod-ico { width: 30px; height: 30px; color: var(--blue); }
.mod-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mod-k { margin-top: 22px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.mod h3 { margin-top: 22px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.25; letter-spacing: -.02em; color: var(--ink); }
.mod p { flex: 1; margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--sub); }
.mod .mlink { margin-top: 18px; }
@media (max-width: 980px) { .mods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mods { grid-template-columns: minmax(0, 1fr); } }

/* =========================================================
   One Workflow — the AI Reviewer card and the human decision
   ========================================================= */
.reviewer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  margin-top: clamp(40px, 4.4vw, 60px); }
.rsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: st; }
.rstep { position: relative; padding: 20px 22px 20px 62px; border-radius: var(--r-s); transition: background-color .4s ease, box-shadow .4s ease; }
.rstep::before { counter-increment: st; content: counter(st, decimal-leading-zero); position: absolute; left: 24px; top: 23px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--blue); }
.rstep h3 { font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.rstep p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sub); }
.rstep.is-on { background: #fff; box-shadow: var(--shadow-m); }
.human { margin-top: 18px; padding: 22px 24px; border-radius: var(--r-s); border: 1px solid rgba(13,79,211,.22); background: rgba(255,255,255,.6); }
.human .htag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.human h3 { margin-top: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.02em; }
.human p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--sub); }
.rcase { overflow: hidden; border-radius: var(--r-m); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-l); font-size: 14px; }
.rcase-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #FAFBFD; border-bottom: 1px solid #EEF1F5; }
.rcase-h strong { display: block; font-size: 15px; letter-spacing: -.01em; }
.rcase-h small { display: block; margin-top: 2px; font-size: 12px; color: var(--sub); }
.rtags { display: flex; gap: 6px; flex: none; }
.rtag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: #E8EFFB; color: var(--blue);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.rtag.ghost { background: #fff; border: 1px solid var(--line); color: #667085; }
.rcase-b { display: grid; gap: 16px; padding: 18px 20px 20px; }
.rk { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #98A2B3; }
.rev { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rev li { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 10px;
  background: var(--grey); font-size: 13.5px; line-height: 1.4; opacity: 0; transform: translateX(-8px);
  transition: opacity .5s ease var(--d, 0ms), transform .5s ease var(--d, 0ms); }
.rcase.is-on .rev li { opacity: 1; transform: none; }
.rev svg { width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.rev em { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; white-space: nowrap; }
.rrules { display: flex; flex-wrap: wrap; gap: 6px; }
.rrules span { padding: 5px 9px; border-radius: 6px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 500; color: var(--ink);
  opacity: 0; transition: opacity .4s ease var(--d, 0ms); }
.rcase.is-on .rrules span { opacity: 1; }
.rrec { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; padding: 14px 16px; border-radius: 12px;
  border: 1px solid #D7E2F7; background: #F3F7FE; }
.rrec strong { font-size: 14px; letter-spacing: -.01em; }
.rrec small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--sub); }
.rconf { display: grid; gap: 5px; justify-items: end; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
.rconf b { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.rconf i { display: block; width: 96px; height: 6px; overflow: hidden; border-radius: 3px; background: #DCE5F5; }
.rconf i::after { content: ""; display: block; width: 0; height: 100%; border-radius: 3px; background: var(--blue); transition: width 1.1s cubic-bezier(.2,.7,.2,1) .9s; }
.rcase.is-on .rconf i::after { width: 91%; }
.rdecide { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.rbtns { display: inline-flex; gap: 8px; }
.rbtns span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line); background: #fff; color: var(--ink); transition: background-color .3s ease, color .3s ease, border-color .3s ease; }
.rbtns span.pri { background: var(--blue); border-color: var(--blue); color: #fff; }
.rcase.is-done .rbtns span.pri { background: var(--green); border-color: var(--green); }
.rdone { margin: 0; font-size: 12.5px; color: var(--sub); opacity: 0; transition: opacity .5s ease; }
.rcase.is-done .rdone { opacity: 1; }
.rdone b { color: var(--ink); }
.rrecord { display: flex; flex-wrap: wrap; gap: 6px; }
.rrecord span { padding: 4px 8px; border-radius: 6px; background: var(--grey); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #667085; }
@media (max-width: 900px) {
  .reviewer { grid-template-columns: minmax(0, 1fr); }
  .rstep { padding-left: 54px; } .rstep::before { left: 20px; }
}
@media (max-width: 480px) {
  .rrec { grid-template-columns: 1fr; } .rconf { justify-items: start; }
  .rcase-h { flex-wrap: wrap; }
}

/* =========================================================
   Industries, security, recognition
   ========================================================= */
.inds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(40px, 4.4vw, 60px); }
.ind { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-m); background: #fff; color: inherit;
  text-decoration: none; box-shadow: 0 1px 2px rgba(7,34,89,.06); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; }
.ind:hover, .ind:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-m); }
.ind-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--grey); }
/* the photo is taller than its box, so the parallax (js/home.js) can slide it a little as the card passes */
.ind-ph img { position: absolute; left: 0; top: -12%; display: block; width: 100%; height: 124%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.ind:hover .ind-ph img { transform: scale(1.04); }
.ind-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.ind h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.3; color: var(--ink); }
.ind p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--sub); }
.ind .mlink { margin-top: auto; padding-top: 12px; }
@media (max-width: 1000px) { .inds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .inds { grid-template-columns: minmax(0, 1fr); } .ind-ph { aspect-ratio: 16 / 9; } }

.sub-h { margin-top: clamp(64px, 7vw, 96px); text-align: center; }
.sub-h h3 { font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.025em; line-height: 1.2; }
.sub-h p { max-width: 60ch; margin: 12px auto 0; font-size: 16px; line-height: 1.55; color: var(--sub); }
.ledger { list-style: none; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ledger li { padding: 18px 16px; border-radius: var(--r-s); background: #fff; }
.ledger svg { width: 24px; height: 24px; fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ledger h4 { margin: 12px 0 0; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.ledger p { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--sub); }
@media (max-width: 1000px) { .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.awd-band { margin-top: clamp(56px, 6vw, 80px); }
.awd-label { margin: 0; text-align: center; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.awd-band .marquee { margin-top: 26px; }
.marquee--awd .mq-track { animation-duration: 40s; animation-direction: reverse; }
.mq-set.awd { gap: clamp(40px, 5vw, 80px); padding-right: clamp(40px, 5vw, 80px); }
.awd span { display: inline-flex; align-items: center; flex: none; }
.awd span img { display: block; height: clamp(44px, 4.4vw, 58px); width: auto; opacity: .9; transition: opacity .25s ease; }
.awd span:hover img { opacity: 1; }
.awd span img.abf { height: calc(clamp(44px, 4.4vw, 58px) * .7); }
.awd span img.light { filter: brightness(0); opacity: .72; }     /* silver artwork reads faint on white; show it as ink */
@media (max-width: 620px) { .awd span img { height: 40px; } .awd span img.abf { height: 28px; } }

/* =========================================================
   Final CTA — brand blue, the one saturated band on the page
   ========================================================= */
section.cta.cta--home { position: relative; overflow: hidden; margin: 0; padding: clamp(84px, 9vw, 128px) 0; color: #fff;
  background: linear-gradient(120deg, #0D4FD3 0%, #1A5FE6 55%, #2F6FEA 100%); }
section.cta.cta--home::before { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(40% 50% at 18% 20%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(36% 46% at 86% 82%, rgba(127,169,248,.38), transparent 60%); }
section.cta.cta--home::after { display: none; }
.cta--home .cta-in { position: relative; display: block; max-width: 860px; margin: 0 auto; padding: 0; text-align: center; }
.cta--home h2 { font-size: clamp(32px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -.032em; color: #fff; }
.cta--home .lede { max-width: 56ch; margin: 20px auto 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.55; color: rgba(255,255,255,.86); }
body.home section.cta.cta--home .cta-side { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; width: auto; margin: 34px 0 0; }
body.home section.cta.cta--home .cta-side .btn { width: auto; }
.cta--home .cta-strap { margin-top: 30px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.72); }

  /* ---------------- Graph Intelligence product shell (#graph) ----------------
     A white product panel on the white band (ported from css/index.css, 2026-09-23): the tab bar chooses the
     reading, the stage draws it on a dotted canvas, and the insight card names
     the finding. Below 900px the canvas gives way to the same cast as a list.
     Built by the graph module in js/home.js. */
  .gx { margin-top: clamp(40px, 4.4vw, 60px); background: #fff; color: #0F172A; overflow: hidden;
        border: 1px solid var(--line); border-radius: 21px;
        box-shadow: var(--shadow-l); }

  /* --- the tab bar --- */
  .gx-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px;
            padding: 8px 10px; background: #F8FAFC; border-bottom: 1px solid #EDF1F7; }
  .gx-tabs { display: flex; gap: 6px; min-width: 0; }
  .gx-tab { position: relative; display: flex; align-items: center; gap: 9px; min-width: 0;
            padding: 9px 14px 11px; border: 1px solid transparent; border-radius: 14px;
            background: none; cursor: pointer; text-align: left; font-family: inherit;
            transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; }
  .gx-tab[aria-selected="true"] { background: #fff; border-color: #E3E9F2; box-shadow: 0 6px 18px rgba(20,40,80,.10); }
  .gx-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
            height: 3px; border-radius: 3px 3px 0 0; background: #0D4FD3; }
  .gx-tab-ico, .gx-stage-ico, .gx-row-ico, .gx-insight-ico { display: grid; place-items: center; flex: none; }
  .gx-tab-ico { width: 28px; height: 28px; border-radius: 8px; }
  .gx-tab-ico svg { width: 16px; height: 16px; }
  .gx-chip-glyph { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  /* each lens keeps one ink, from the chip through to the stage heading */
  .t-identity    { background: #E8EFFB; color: #0D4FD3; }
  .t-transaction { background: #F3EDFE; color: #8B5CF6; }
  .t-crp         { background: #E9F7E8; color: #3A9631; }
  .gx-tab-copy { min-width: 0; }
  .gx-tab-copy small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .075em;
            text-transform: uppercase; color: #929DAE; }
  .gx-tab-copy strong { display: block; margin-top: 2px; font-size: 12px; font-weight: 700;
            letter-spacing: -.01em; color: #566174; white-space: nowrap; transition: color .25s ease; }
  .gx-tab[aria-selected="true"] .gx-tab-copy strong { color: #0F172A; }

  .gx-status { display: flex; align-items: center; gap: 8px; flex: none; }
  .gx-live, .gx-badge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px;
            border-radius: 999px; font-size: 8px; font-weight: 800; letter-spacing: .075em;
            text-transform: uppercase; white-space: nowrap; }
  .gx-live { background: #EEF4FF; border: 1px solid #CFE0FF; color: #164DB8; }
  .gx-live i { width: 6px; height: 6px; border-radius: 50%; background: #0D4FD3;
            box-shadow: 0 0 0 0 rgba(13,79,211,.42); animation: gxLive 2.4s ease-out infinite; }
  @keyframes gxLive { 70% { box-shadow: 0 0 0 7px rgba(13,79,211,0); } 100% { box-shadow: 0 0 0 0 rgba(13,79,211,0); } }
  .gx-badge { background: #fff; border: 1px solid #E1E6EE; color: #667085; }

  /* --- the stage --- */
  .gx-stage { padding: 14px 16px 16px; }
  .gx-stagebar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 1px 2px 10px; }
  .gx-stage-head { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .gx-stage-ico { width: 34px; height: 34px; border-radius: 11px; }
  .gx-stage-ico svg { width: 19px; height: 19px; }
  .gx-stage-head small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .1em;
            text-transform: uppercase; color: #929DAE; }
  .gx-stage-head strong { display: block; margin-top: 2px; font-size: 15px; font-weight: 700;
            letter-spacing: -.02em; color: #0F172A; }
  .gx-tools { display: inline-flex; align-items: center; flex: none; background: #fff;
            border: 1px solid #DBE2EB; border-radius: 9px; box-shadow: 0 3px 9px rgba(20,36,67,.04); }
  .gx-tools > span { display: grid; place-items: center; min-width: 34px; padding: 7px 8px;
            font-size: 11px; color: #687386; }
  .gx-tools > span + span { border-left: 1px solid #EDF1F6; }
  .gx-tool-fit svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

  .gx-canvas-wrap { position: relative; background: #FBFCFE; border: 1px solid #DFE5ED;
            border-radius: 20px; box-shadow: 0 13px 31px rgba(25,45,82,.08); overflow: hidden; }
  .gx-canvas { display: block; width: 100%; height: auto; }
  .gx-canvas text { font-family: 'Gotham','Helvetica Neue',Arial,sans-serif; }

  /* --- the network --- */
  /* the network fades up link by link once it is drawn. The lit state is a class,
     not the tail of a keyframe, so the cards still stand when animation is off. */
  .gx-node, .gx-edge { opacity: 0; transition: opacity .55s ease var(--d, 0ms); }
  .gx-stage.is-drawn .gx-node, .gx-stage.is-drawn .gx-edge { opacity: 1; }
  .gx-card { fill: #fff; stroke: #DFE4EB; stroke-width: 1; }
  .gx-node.is-focus .gx-card { fill: #0D4FD3; stroke: #0D4FD3; }
  .gx-ring { fill: rgba(255,59,77,.05); stroke: rgba(255,59,77,.2); stroke-width: 12; }
  .gx-tile { fill: #1F2328; }
  .gx-node.k-company .gx-tile { fill: #4CAF3F; }
  .gx-node.is-alert .gx-tile { fill: #FF3B4D; }
  .gx-node.is-focus .gx-tile { fill: none; stroke: #fff; stroke-width: 3; }
  .gx-glyph { fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .gx-node.is-alert .gx-glyph { stroke-width: 2.4; }   /* a bare stroke reads thin at this size */
  .gx-t { fill: #111827; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
  .gx-s { fill: #5F6671; font-size: 12px; }
  .gx-node.is-focus .gx-t, .gx-node.is-focus .gx-s { fill: #fff; }
  .gx-live-dot { fill: #fff; opacity: .9; animation: gxDot 2.6s ease-in-out infinite; }
  @keyframes gxDot { 50% { opacity: .35; } }

  .gx-link { fill: none; stroke-width: 2.2; stroke-dasharray: 8 8; stroke-linecap: round;
            animation: gxFlow 1.8s linear infinite; }
  @keyframes gxFlow { to { stroke-dashoffset: -32; } }
  .gx-lbl rect { fill: rgba(255,255,255,.96); stroke-width: 1.4; stroke-dasharray: 4 3; }
  .gx-lbl text { font-size: 12px; }
  .gx-edge.c-blue   .gx-link { stroke: #91A9CA; }
  .gx-edge.c-blue   .gx-lbl rect { stroke: #B7C5D9; }
  .gx-edge.c-blue   .gx-lbl text { fill: #64748B; }
  .gx-edge.c-pink   .gx-link { stroke: #FF58AD; }
  .gx-edge.c-pink   .gx-lbl rect { fill: #FFF6FB; stroke: #FF58AD; }
  .gx-edge.c-pink   .gx-lbl text { fill: #E64297; }
  .gx-edge.c-red    .gx-link { stroke: #FF3B4D; }
  .gx-edge.c-red    .gx-lbl rect { fill: #FFF5F5; stroke: #FF3B4D; }
  .gx-edge.c-red    .gx-lbl text { fill: #E72F40; }
  .gx-edge.c-green  .gx-link { stroke: #4CAF3F; }
  .gx-edge.c-green  .gx-lbl rect { fill: #F5FCF4; stroke: #4CAF3F; }
  .gx-edge.c-green  .gx-lbl text { fill: #358A2E; }
  .gx-edge.c-purple .gx-link { stroke: #8B5CF6; }
  .gx-edge.c-purple .gx-lbl rect { fill: #FAF6FF; stroke: #8B5CF6; }
  .gx-edge.c-purple .gx-lbl text { fill: #7C3FD1; }

  /* --- what the reading found --- */
  .gx-insight { position: absolute; right: 19px; bottom: 19px; width: min(348px, 42%);
            display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 15px;
            background: rgba(255,255,255,.95); border: 1px solid #FFC5CD; border-radius: 15px;
            box-shadow: 0 15px 30px rgba(58,15,24,.13); }
  .gx-insight.in { animation: gxInsight .55s cubic-bezier(.2,.7,.2,1) .55s both; }
  @keyframes gxInsight { from { opacity: 0; transform: translateY(12px); } }
  .gx-insight-ico { width: 40px; height: 40px; border-radius: 12px; background: #FFF0F2; color: #FF3B4D; }
  .gx-insight-ico svg { width: 20px; height: 20px; }
  .gx-insight-ico .gx-chip-glyph { stroke-width: 2.4; }
  .gx-insight small { display: block; margin-bottom: 3px; font-size: 8px; font-weight: 900;
            letter-spacing: .11em; text-transform: uppercase; color: #FF3B4D; }
  .gx-insight strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.015em; color: #0F172A; }
  .gx-insight p { margin: 4px 0 0; font-size: 11px; line-height: 1.5; color: #667085; }

  /* --- the narrow-screen reading --- */
  .gx-list { display: none; }
  @media (max-width: 900px) {
    .gx { margin-top: 40px; }
    .gx-canvas { display: none; }
    .gx-canvas-wrap { background: none; border: 0; border-radius: 0; box-shadow: none; margin-top: 12px; }
    .gx-insight { position: static; width: auto; }
    .gx-list { display: grid; gap: 10px; }
    .gx-row { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center;
            padding: 12px 14px; background: #fff; border: 1px solid #E6EBF2;
            border-left: 3px solid var(--ink, #CBD5E1); border-radius: 14px;
            opacity: 0; transition: opacity .45s ease var(--d, 0ms); }
    .gx-stage.is-drawn .gx-row { opacity: 1; }
    .gx-row-ico { width: 42px; height: 42px; border-radius: 11px; background: #1F2328; color: #fff; }
    .gx-row-ico svg { width: 22px; height: 22px; }
    .gx-row.k-company .gx-row-ico { background: #4CAF3F; }
    .gx-row.is-alert  .gx-row-ico { background: #FF3B4D; }
    .gx-row.is-alert  .gx-chip-glyph { stroke-width: 2.4; }
    .gx-row.is-alert  { border-left-color: #FF3B4D; }
    .gx-row.is-focus { background: #0D4FD3; border-color: #0D4FD3; }
    .gx-row.is-focus .gx-row-ico { background: rgba(255,255,255,.18); }
    .gx-row small { display: block; font-size: 8px; font-weight: 800; letter-spacing: .08em;
            text-transform: uppercase; color: var(--ink, #94A3B8); }
    .gx-row strong { display: block; margin: 3px 0 1px; font-size: 14px; font-weight: 700;
            letter-spacing: -.015em; color: #0F172A; }
    .gx-row span { font-size: 12px; color: #64748B; }
    .gx-row.is-focus small, .gx-row.is-focus strong, .gx-row.is-focus span { color: #fff; }
    /* the bar stacks, and the tabs scroll rather than squeeze */
    .gx-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .gx-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .gx-tabs::-webkit-scrollbar { display: none; }
    .gx-tab { flex: none; }
    .gx-status { justify-content: flex-start; }
  }
  @media (max-width: 560px) {
    .gx-stage { padding: 12px; }
    .gx-stagebar { padding-bottom: 8px; }
    .gx-tools { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gx-link { animation: none; }
    .gx-live i, .gx-live-dot { animation: none; }
    .gx-node, .gx-edge, .gx-row { transition: none; }
    .gx-insight.in { animation: none; }
  }


/* WIDTH footer WeChat card: reference-matched styling, 9 October 2026.
   Homepage stylesheet: css/home.css. Existing footer HTML and QR image retained. */

footer.site.paper .foot-wechat {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 254px;
  max-width: 100%;
  margin-top: 18px;
  padding: 10px;
  border: 1px solid var(--line, #e3e5e9);
  border-radius: 12px;
  background: #fff;
  color: var(--ink, #1c1a17);
  font-family: inherit;
  text-align: left;
}

footer.site.paper .foot-wechat > img {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  max-width: none;
  padding: 4px;
  border: 1px solid var(--line, #e3e5e9);
  border-radius: 8px;
  background: #fff;
  object-fit: contain;
}

footer.site.paper .foot-wechat > div {
  min-width: 0;
}

footer.site.paper .foot-wechat strong {
  display: block;
  margin: 0 0 2px;
  color: var(--ink, #1c1a17);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

footer.site.paper .foot-wechat span {
  display: block;
  color: var(--sub, #55565a);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: break-word;
}