/* GVAI-Gate — the marketing site.
   ------------------------------------------------------------------------
   Layout concept: an instrument panel read top to bottom. The page is a
   sequence — the claim, the proof, the mechanism, the artefact — so the
   numbered section indices encode something true rather than decorating.
   Full-bleed instruments alternate with a 65ch prose column over a fixed
   grid-and-scanline field.

   Every token below is lifted from the product's own globals.css, not
   invented here, so the site and the thing it sells read as one system.

   Committed to a single dark world on purpose: the product is an
   instrument read in a dark room, and a light variant would be a different
   argument. Hence no prefers-color-scheme block — every colour is stated. */

:root {
  color-scheme: dark;

  /* Ground — blue-black rather than pure black; pure black kills the bloom. */
  --void: #04080d;
  --panel: #0a1017;
  --inset: #020609;
  --raised: #0e1720;

  /* Hairlines are cyan-tinted so every edge reads as one system. */
  --line: rgba(90, 200, 235, 0.13);
  --line-strong: rgba(90, 200, 235, 0.28);

  --ink: #cfe6f0;
  --ink-dim: #7fa0b2;
  --ink-faint: #65859c;

  /* Arc cyan. Chrome only — never a status. */
  --arc: #4de4ff;
  --arc-hot: #7df0ff;
  --arc-deep: #0b3c4c;
  --glow: rgba(77, 228, 255, 0.35);

  /* Semantics, deliberately off the accent hue so a green can never be
     mistaken for decoration. Each also carries a border and a fill, so it
     reads without relying on hue alone. */
  --pass: #2fe08a;
  --fail: #ff5470;
  --warn: #ffa726;

  --radius: 3px;
  --display: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 56px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* --- window furniture ----------------------------------------------------
   Fixed and inert. The grid and the bloom belong to the instrument, not to
   the content scrolling through it. */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse 120% 80% at 50% 0%, #000 10%, transparent 75%);
}

.scanlines {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.45;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 4px);
}

/* A single slow sweep, the one ambient motion on the page. */
.sweep {
  position: fixed;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(77, 228, 255, 0.045) 55%, transparent);
  animation: sweep 14s linear infinite;
}

@keyframes sweep {
  0% { transform: translateY(-200px); }
  100% { transform: translateY(100vh); }
}

/* Everything the eye reads sits above the furniture. */
.shell { position: relative; z-index: 2; }

/* --- type ---------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(34px, 6.2vw, 62px); }
h2 { font-size: clamp(26px, 3.8vw, 40px); }
h3 { font-size: clamp(17px, 2vw, 21px); letter-spacing: 0; }

p { margin: 0; }

.prose { max-width: 64ch; }
.prose + .prose { margin-top: 18px; }

.lede {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.62;
  color: var(--ink-dim);
}

.dim { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.arc { color: var(--arc); }

/* The tracked micro-label is the site's connective tissue — it is how an
   instrument names its own readouts. */
.micro {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

strong { color: var(--ink); font-weight: 600; }
em { color: var(--arc); font-style: normal; }

/* --- layout -------------------------------------------------------------- */

.wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

section { padding-block: clamp(64px, 9vw, 112px); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* Section head: index, title, rule. The index is a real position in a
   sequence, which is the only reason it is there. */
.head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.head .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--arc);
  padding: 3px 8px;
  border: 1px solid var(--line-strong);
  background: rgba(77, 228, 255, 0.05);
  flex: none;
}

.head .label { flex: 1; min-width: 0; }

/* --- nav ----------------------------------------------------------------- */

.nav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 40;
  background: rgba(4, 8, 13, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.nav-in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 12px var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }

.wordmark {
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.wordmark span { color: var(--arc); margin: 0 0.04em; }

.nav-links { margin-left: auto; display: flex; gap: 22px; align-items: center; }

.nav-links a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color 0.18s;
}

.nav-links a:hover { color: var(--arc); }

@media (max-width: 740px) { .nav-links { display: none; } }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 20px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.btn:hover { border-color: var(--arc); color: var(--arc-hot); background: rgba(77, 228, 255, 0.06); }

.btn.primary {
  border-color: var(--arc);
  color: #02181f;
  background: linear-gradient(140deg, var(--arc-hot), #1ec5e6 60%, var(--arc));
  font-weight: 600;
  box-shadow: 0 0 28px -10px var(--glow);
}

.btn.primary:hover { color: #02181f; filter: brightness(1.12); }

.btn:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--arc);
  outline-offset: 3px;
}

/* --- panels -------------------------------------------------------------- */

.panel {
  position: relative;
  background: linear-gradient(170deg, var(--panel), var(--inset));
  border: 1px solid var(--line);
  padding: clamp(18px, 3vw, 28px);
}

/* Corner brackets: the framing that reads as something under examination.
   They draw in when the section arrives, but the panel and its contents are
   fully visible before and without them. */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1px solid var(--arc);
  opacity: 0.5;
  transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.panel.lit::before, .panel.lit::after { width: 26px; height: 26px; }

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

.hero { padding-block: clamp(48px, 8vw, 92px) clamp(40px, 6vw, 72px); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { order: -1; }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line-strong);
  padding: 5px 12px;
  margin-bottom: 22px;
  background: rgba(77, 228, 255, 0.04);
}

.dot {
  width: 5px;
  height: 5px;
  background: var(--pass);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--pass);
  animation: pulse 2.4s ease-in-out infinite;
  flex: none;
}

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

h1 .gate-word {
  color: var(--arc);
  text-shadow: 0 0 34px var(--glow);
}

.hero-sub { margin-top: 22px; max-width: 56ch; }

.hero-cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.hero-mark { display: grid; place-items: center; }

/* Telemetry strip — real figures from the repository, not invented ones. */
.telemetry {
  margin-top: clamp(32px, 5vw, 52px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line);
  background: linear-gradient(170deg, var(--panel), var(--inset));
}

.tel {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.tel:last-child { border-right: 0; }

@media (max-width: 620px) {
  .tel { border-right: 0; border-bottom: 1px solid var(--line); }
  .tel:last-child { border-bottom: 0; }
}

.tel .v {
  font-family: var(--display);
  font-size: clamp(22px, 3vw, 29px);
  font-weight: 700;
  color: var(--arc);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.tel .k { margin-top: 5px; }

/* --- verdict stamps ------------------------------------------------------ */

.stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 5px 11px;
  border: 1px solid currentColor;
  flex: none;
}

.stamp.ok { color: var(--pass); background: rgba(47, 224, 138, 0.09); }
.stamp.no { color: var(--fail); background: rgba(255, 84, 112, 0.1); }


.punch {
  margin-top: 26px;
  border-left: 2px solid var(--arc);
  padding: 4px 0 4px 20px;
  font-family: var(--display);
  font-size: clamp(17px, 2.4vw, 23px);
  line-height: 1.38;
  color: var(--ink);
  max-width: 62ch;
}


/* --- the run record ------------------------------------------------------
   The same run, read two ways, laid out as the document it would be. An
   executive reads exhibits, not toys: the argument has to survive being
   printed and passed across a table, so nothing here moves or responds. */

.record { border: 1px solid var(--line-strong); background: var(--inset); margin-top: 30px; }

.record-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--panel);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  flex-wrap: wrap;
}

.record-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 760px) { .record-body { grid-template-columns: minmax(0, 1fr); } }

.column { padding: 20px; min-width: 0; }

.column + .column { border-left: 1px solid var(--line-strong); }

@media (max-width: 760px) {
  .column + .column { border-left: 0; border-top: 1px solid var(--line-strong); }
}

/* The gated column is the one the page is arguing for, so it carries the
   only fill. The scored column stays flat and unremarkable, which is the
   point being made about it. */
.column.gated { background: rgba(77, 228, 255, 0.035); }

.column .kind { display: block; margin-bottom: 3px; }
.column .basis { font-size: 12.5px; color: var(--ink-faint); margin-bottom: 16px; }

.metric {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.metric span:first-child { color: var(--ink-dim); min-width: 0; }

.metric .fig {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  flex: none;
}

.metric.breach span:first-child { color: var(--ink); }
.metric.breach .fig { color: var(--fail); font-weight: 500; }

.total {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: baseline;
  padding-top: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--line-strong);
}

.total .fig {
  font-family: var(--display);
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.record-foot {
  padding: 15px 18px;
  border-top: 1px solid var(--line-strong);
  background: var(--panel);
  font-size: 13.5px;
  color: var(--ink-dim);
}

/* --- generic grids ------------------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.step .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--arc);
  display: block;
  margin-bottom: 12px;
}

.step h3 { margin-bottom: 9px; }

.step p { font-size: 14px; color: var(--ink-dim); }

/* --- table --------------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 580px; }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 400;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--inset);
  white-space: nowrap;
}

td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }

tr:last-child td { border-bottom: 0; }

td.yes { color: var(--ink); }
td.no { color: var(--ink-faint); }

.pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid currentColor;
  white-space: nowrap;
}

.pill.ok { color: var(--pass); background: rgba(47, 224, 138, 0.08); }
.pill.part { color: var(--warn); background: rgba(255, 167, 38, 0.08); }
.pill.none { color: var(--ink-faint); background: rgba(101, 133, 156, 0.08); }

/* --- diagram ------------------------------------------------------------- */

.diagram { overflow-x: auto; }
.diagram svg { display: block; min-width: 620px; width: 100%; height: auto; }

/* The strokes draw themselves in once, then stay. Starting state is the
   finished drawing — the animation only runs when it is observed. */
.draw { stroke-dasharray: var(--len); stroke-dashoffset: 0; }
.diagram.go .draw { animation: draw 1.1s cubic-bezier(0.3, 0.7, 0.2, 1) both; }

@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }

/* --- certificate --------------------------------------------------------- */

.cert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 30px); }

@media (max-width: 860px) { .cert { grid-template-columns: minmax(0, 1fr); } }

.doc {
  background: var(--inset);
  border: 1px solid var(--line-strong);
  padding: clamp(18px, 3vw, 26px);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.85;
  min-width: 0;
}

.doc .row { display: flex; gap: 12px; justify-content: space-between; border-bottom: 1px dashed var(--line); padding-block: 5px; }
.doc .row span:first-child { color: var(--ink-faint); white-space: nowrap; }
.doc .row span:last-child { color: var(--ink); text-align: right; word-break: break-all; }

.sig {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-strong);
  color: var(--arc);
  word-break: break-all;
  font-size: 11px;
  line-height: 1.7;
}

.excl { margin: 14px 0 0; padding: 0; list-style: none; }

.excl li {
  padding: 9px 0 9px 24px;
  border-bottom: 1px solid var(--line);
  position: relative;
  font-size: 13.5px;
  color: var(--ink-dim);
}

.excl li::before {
  content: "\00d7";
  position: absolute;
  left: 4px;
  top: 8px;
  color: var(--fail);
  font-family: var(--mono);
}

.excl li:last-child { border-bottom: 0; }

.excl li.first { color: var(--ink); }

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

.foot { border-top: 1px solid var(--line); padding-block: 44px; }

.foot-in { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }

.cta-band {
  border: 1px solid var(--line-strong);
  background: linear-gradient(140deg, rgba(11, 60, 76, 0.5), var(--inset));
  padding: clamp(26px, 5vw, 48px);
  text-align: center;
}

.cta-band h2 { margin-bottom: 14px; }

.cta-band .btns { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* --- the comparison ------------------------------------------------------
   Two columns, one of them ours. The emphasis is structural rather than
   loud: our column gets the panel fill and a cyan rule, theirs stays flat,
   so the eye lands without anything needing to shout. */

td.theirs { color: var(--ink-faint); }

td.ours {
  color: var(--ink);
  background: rgba(77, 228, 255, 0.045);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}

th.ours {
  color: var(--arc);
  background: rgba(77, 228, 255, 0.07);
  border-left: 1px solid var(--line-strong);
  border-right: 1px solid var(--line-strong);
}

tr:last-child td.ours { border-bottom: 1px solid var(--line-strong); }

td.q { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
       text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

/* --- the moment ----------------------------------------------------------
   A quiet list of the occasions on which the question actually gets asked.
   Specific occasions beat an abstract warning. */

.moment { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px;
          background: var(--line); border: 1px solid var(--line); margin-top: 26px; }

.moment div { background: var(--void); padding: 18px 20px; min-width: 0; }

.moment .when { font-family: var(--display); font-size: 15px; font-weight: 600;
                color: var(--ink); margin-bottom: 7px; }

.moment .what { font-size: 13px; color: var(--ink-dim); line-height: 1.5; }

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

.addr { font-family: var(--mono); font-size: 14px; color: var(--arc);
        user-select: all; word-break: break-all; }


/* --- commercial ----------------------------------------------------------
   Three lines of business, read left to right in the order a buyer meets
   them: the platform they subscribe to, the certificate they pay per
   issuance, the people who do the work with them. The middle one carries
   the accent because it is the unit of value everything else serves. */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 14px; margin-top: 30px; }

.plan { display: flex; flex-direction: column; min-width: 0; }

.plan.lead { border-color: var(--line-strong); background: linear-gradient(170deg, rgba(11, 60, 76, 0.42), var(--inset)); }

.plan .kind { color: var(--arc); }

.plan h3 { margin: 12px 0 6px; }

.plan .basis {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.plan ul { margin: 0; padding: 0; list-style: none; flex: 1; }

.plan li {
  position: relative;
  padding: 7px 0 7px 20px;
  font-size: 13.5px;
  color: var(--ink-dim);
  line-height: 1.5;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 14px;
  width: 7px;
  height: 1px;
  background: var(--arc);
}

.plan .ask { margin-top: 20px; }


/* --- contact -------------------------------------------------------------
   WhatsApp is the channel, but the button stays in the site's own colour.
   The glyph carries the recognition; borrowing the brand green would break
   the rule the whole palette rests on — cyan is chrome, and a saturated
   green here would read as a status. */

#contactpoint { flex-direction: column; align-items: center; gap: 0; }

.wa-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }

.btn .wa-glyph { width: 15px; height: 15px; flex: none; }

.wa-number {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--arc);
  user-select: all;
  white-space: nowrap;
}

.wa-hint { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }


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

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