/* SPDX-License-Identifier: LicenseRef-VINCIS-ARR
 *
 * VINCIS GPT — marketing foundation.
 *
 * The part of the approved home design that every public page stands on:
 * the palette and both theme ladders, the stage system, headings, the
 * eyebrow and lede, buttons, cards, the hero shell, the topic strip and the
 * one marketing nav. The (public) layout loads it once; the Knowledge Center
 * builds on it and the homepage adds its own sections in world-class.css.
 *
 * Nothing here is derived from the tenant theme, and the accent quarantine
 * at the end keeps a configured brand colour from leaking into this surface.
 */

.decision-home {
  --bg: #07080b;
  --bg-2: #0b0d12;
  --bg-3: #101319;
  --deep: #040508;
  --paper: #f4f5f7;
  --card-l: #ffffff;

  --t-hi: #f2f4f8;
  --t-md: #b4bbc8;
  --t-lo: #7c8496;
  --l-hi: #0b0d12;
  --l-md: #3d4453;
  --l-lo: #6b7284;

  --line-d: rgba(255, 255, 255, 0.085);
  --line-d2: rgba(255, 255, 255, 0.14);
  --line-l: rgba(11, 13, 18, 0.1);

  --live: #5fcfa8;
  --sig: #e5b26a;
  --warn: #d9705e;

  --sans:
    var(--font-geist-sans), "PingFang SC", "Noto Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:
    var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;

  /* theme-aware surfaces: s1 = primary stage, s0 = deep variant, s2 = alt stage */
  /* dark: one family, three tones — never a flat black wall */
  --s1-bg: #0a0c12;
  --s1-fg: #f2f4f8;
  --s1-fg2: #7e8698;
  --s1-fg3: #b4bbc8;
  --s1-line: rgba(255, 255, 255, 0.075);
  --s1-line2: rgba(255, 255, 255, 0.26);
  --s1-card: rgba(255, 255, 255, 0.032);
  --s1-cardline: rgba(255, 255, 255, 0.075);
  --s1-ink: #ffffff;
  --s1-dim: rgba(242, 244, 248, 0.46);
  --s0-bg: #06070b;
  --s2-bg: #0e1118;
  --s2-fg: #f2f4f8;
  --s2-fg2: #828a9c;
  --s2-fg3: #b8bfcb;
  --s2-line: rgba(255, 255, 255, 0.085);
  --s2-line2: rgba(255, 255, 255, 0.26);
  --s2-card: rgba(255, 255, 255, 0.05);
  --s2-cardline: rgba(255, 255, 255, 0.095);
  --s2-ink: #ffffff;
  --page-bg: #07080b;
  --seam: rgba(255, 255, 255, 0.05);
  --gridline: rgba(255, 255, 255, 0.024);
  --sig-strong: #f0ce9a;
  --good-fg: #6fd9b4;
  --sig-fg: #e5b26a;
  --warn-fg: #e08877;
  --glow: rgba(176, 198, 244, 0.13);

  --pad: clamp(20px, 5vw, 60px);
  --ease: cubic-bezier(0.22, 0.85, 0.26, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* The design places several layers at z-index -1 (the hero hairline, the
     console glow). Inside a container that paints its own background those
     would fall behind it and vanish, so this element owns the stacking
     context they are measured against. */
  isolation: isolate;
}
html:not(.dark) .decision-home {
  /* light: silver & white, pale green only as a note */
  --s1-bg: #ffffff;
  --s1-fg: #0b0f14;
  --s1-fg2: #616b76;
  --s1-fg3: #333b44;
  --s1-line: rgba(14, 22, 32, 0.1);
  --s1-line2: rgba(14, 22, 32, 0.26);
  --s1-card: #ffffff;
  --s1-cardline: rgba(14, 22, 32, 0.085);
  --s1-ink: #0e1319;
  --s1-dim: rgba(11, 15, 20, 0.4);
  --s0-bg: #f5f7f9;
  --s2-bg: #edf0f2;
  --s2-fg: #0b0f14;
  --s2-fg2: #616b76;
  --s2-fg3: #333b44;
  --s2-line: rgba(14, 22, 32, 0.11);
  --s2-line2: rgba(14, 22, 32, 0.26);
  --s2-card: #ffffff;
  --s2-cardline: rgba(14, 22, 32, 0.09);
  --s2-ink: #0e1319;
  --page-bg: #ffffff;
  --seam: rgba(14, 22, 32, 0.07);
  --gridline: rgba(14, 22, 32, 0.038);
  --sig-strong: #8a5b12;
  --good-fg: #1e7d60;
  --sig-fg: #8a5b12;
  --warn-fg: #a8412c;
  --live: #2e9b7b;
  --warn: #c0553f;
  --glow: rgba(150, 175, 190, 0.2);
}
.decision-home *,
.decision-home *::before,
.decision-home *::after {
  box-sizing: border-box;
}
.decision-home {
  margin: 0;
  background: var(--page-bg);
  color: var(--s1-fg);
  transition: background 0.5s var(--ease);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.decision-home ::selection {
  background: rgba(255, 255, 255, 0.92);
  color: #07080b;
}
.decision-home a {
  color: inherit;
  text-decoration: none;
}
.decision-home :focus-visible {
  outline: 1.5px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
  border-radius: 3px;
}
/* ================= stage system ================= */
.decision-home .stage {
  --sbg: var(--s1-bg);
  --fg: var(--s1-fg);
  --fg2: var(--s1-fg2);
  --fg3: var(--s1-fg3);
  --line: var(--s1-line);
  --line2: var(--s1-line2);
  --card: var(--s1-card);
  --card-line: var(--s1-cardline);
  --ink: var(--s1-ink);
  position: relative;
  background: var(--sbg);
  color: var(--fg);
  border-top: 1px solid var(--seam);
  padding: clamp(100px, 13vw, 190px) var(--pad);
}
.decision-home .stage.is-light {
  --sbg: var(--s2-bg);
  --fg: var(--s2-fg);
  --fg2: var(--s2-fg2);
  --fg3: var(--s2-fg3);
  --line: var(--s2-line);
  --line2: var(--s2-line2);
  --card: var(--s2-card);
  --card-line: var(--s2-cardline);
  --ink: var(--s2-ink);
}
.decision-home .stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 78px 78px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(
    ellipse 86% 68% at 50% 42%,
    #000 12%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse 86% 68% at 50% 42%,
    #000 12%,
    transparent 80%
  );
}
.decision-home .stage > .wrap {
  position: relative;
  z-index: 1;
}
.decision-home .wrap {
  max-width: 1180px;
  margin: 0 auto;
}
.decision-home .eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 450;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--fg2);
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.decision-home .eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
  flex: none;
}
.decision-home .eyebrow.center {
  justify-content: center;
}
.decision-home h1,
.decision-home h2,
.decision-home h3 {
  margin: 0;
  font-weight: 600;
  text-wrap: balance;
}
.decision-home h1 {
  font-size: clamp(2.9rem, 7.8vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
.decision-home h2 {
  font-size: clamp(2rem, 4.7vw, 3.7rem);
  line-height: 1.12;
  letter-spacing: -0.032em;
}
.decision-home h3 {
  font-size: 1.1rem;
  line-height: 1.45;
  letter-spacing: -0.015em;
  font-weight: 600;
}
/* Latin sets wider than CJK at the same size — pull it back a notch */
.decision-home .lede {
  margin: 28px 0 0;
  font-size: clamp(1.02rem, 1.55vw, 1.22rem);
  line-height: 1.62;
  color: var(--fg2);
  max-width: 600px;
  font-weight: 400;
}
.decision-home .lede.center {
  margin-inline: auto;
  text-align: center;
  max-width: 640px;
}
@media (max-width: 600px) {
  .decision-home .hero .lede {
    font-size: 0.98rem;
    line-height: 1.7;
  }
}
.decision-home.public-nav-host {
  position: relative;
  z-index: 80;
  height: 0;
  overflow: visible;
}
.decision-home .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0;
  background: #fff;
  color: #07080b;
  border: 1px solid transparent;
  transition:
    transform 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out),
    background 0.3s,
    color 0.3s,
    border-color 0.3s;
  white-space: nowrap;
}
.decision-home .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 34px -14px rgba(255, 255, 255, 0.55);
}
.decision-home .stage .btn {
  background: var(--ink);
  color: var(--sbg);
}
.decision-home .btn .arw {
  transition: transform 0.4s var(--ease-out);
  opacity: 0.6;
}
.decision-home .btn:hover .arw {
  transform: translateX(3px);
}
/* ================= hero ================= */
.decision-home .hero {
  --fg: var(--t-hi);
  --fg2: var(--t-lo);
  --fg3: var(--t-md);
  --line: rgba(255, 255, 255, 0.09);
  position: relative;
  padding: clamp(132px, 17vh, 190px) var(--pad) clamp(60px, 8vh, 100px);
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.decision-home .hero .bloom {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: -360px;
  translate: -50% 0;
  width: min(1600px, 170vw);
  height: 1180px;
  background: radial-gradient(
    46% 44% at 50% 50%,
    rgba(184, 205, 248, 0.2),
    rgba(160, 186, 240, 0.07) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.decision-home .hero .gridbg {
  position: absolute;
  z-index: -2;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 78px 78px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(
    ellipse 76% 52% at 50% 26%,
    #000 20%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse 76% 52% at 50% 26%,
    #000 20%,
    transparent 76%
  );
  pointer-events: none;
}
.decision-home .hero .horizon {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.16),
    transparent
  );
}
.decision-home .hero-copy {
  position: relative;
  text-align: center;
  max-width: 1000px;
  margin: 0 auto;
}
.decision-home .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.decision-home .np {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: 0;
  background: var(--nfg);
  opacity: 0.5;
  transition: width 0.12s linear;
}
.decision-home .strip {
  border-top: 1px solid var(--s1-line);
  border-bottom: 1px solid var(--s1-line);
  background: var(--s0-bg);
  padding: 26px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 12%,
    #000 88%,
    transparent
  );
}
.decision-home .track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: slide 46s linear infinite;
}
.decision-home .strip:hover .track {
  animation-play-state: paused;
}
.decision-home .card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 18px;
  padding: clamp(22px, 2.4vw, 30px);
}
.decision-home .stage.is-light .card {
  box-shadow:
    0 1px 2px rgba(11, 13, 18, 0.04),
    0 24px 48px -34px rgba(11, 13, 18, 0.3);
}
@media (prefers-reduced-motion: reduce) {
  .decision-home * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
html:not(.dark) .decision-home {
  background: var(--page-bg);
}
/* --- hero --- */
html:not(.dark) .decision-home .hero {
  --fg: #0b0f14;
  --fg2: #616b76;
  --fg3: #333b44;
  --line: rgba(14, 22, 32, 0.11);
  background: #f8fafb;
}
html:not(.dark) .decision-home .hero .bloom {
  background: radial-gradient(
    46% 44% at 50% 50%,
    rgba(198, 210, 221, 0.42),
    rgba(216, 225, 233, 0.16) 40%,
    transparent 70%
  );
}
html:not(.dark) .decision-home .hero .gridbg {
  background-image:
    linear-gradient(rgba(14, 22, 32, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 22, 32, 0.05) 1px, transparent 1px);
}
html:not(.dark) .decision-home .hero .horizon {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(14, 22, 32, 0.16),
    transparent
  );
}
html:not(.dark) .decision-home .btn {
  background: #0e1319;
  color: #ffffff;
}
html:not(.dark) .decision-home .btn:hover {
  background: #1b222b;
  box-shadow: 0 12px 30px -14px rgba(15, 31, 25, 0.55);
}
/* --- product console --- */

.decision-home {
  --brand-50: 0 0% 97%;
  --brand-100: 0 0% 93%;
  --brand-200: 0 0% 86%;
  --brand-300: 0 0% 74%;
  --brand-400: 0 0% 60%;
  --brand-500: 0 0% 42%;
  --brand-600: 0 0% 18%;
  --brand-700: 0 0% 14%;
  --brand-800: 0 0% 10%;
  --brand-900: 0 0% 7%;
  --brand-950: 0 0% 4%;
  --brand-light: 0 0% 14%;
  --brand-dark: 0 0% 92%;
  --on-brand-600: 0 0% 100%;
  --primary: 0 0% 14%;
  --primary-foreground: 0 0% 98%;
  --accent: 0 0% 14%;
  --accent-foreground: 0 0% 98%;
  --ring: 0 0% 45%;
}

html.dark .decision-home {
  --brand-50: 0 0% 11%;
  --brand-100: 0 0% 14%;
  --brand-200: 0 0% 19%;
  --brand-300: 0 0% 30%;
  --brand-400: 0 0% 46%;
  --brand-500: 0 0% 66%;
  --brand-600: 0 0% 92%;
  --brand-700: 0 0% 95%;
  --brand-800: 0 0% 97%;
  --brand-900: 0 0% 98%;
  --brand-950: 0 0% 99%;
  --brand-light: 0 0% 92%;
  --brand-dark: 0 0% 92%;
  --on-brand-600: 0 0% 8%;
  --primary: 0 0% 92%;
  --primary-foreground: 0 0% 8%;
  --accent: 0 0% 92%;
  --accent-foreground: 0 0% 8%;
  --ring: 0 0% 58%;
}

/* ================================================================
     OBSERVE — the two proof cards replay like a terminal:
     lines print one by one, the verdict badge stamps at the end,
     the card border takes the verdict colour; hover runs a
     verification beam across the code.  --lines / --verdict are
     set inline per card.
     ================================================================ */
@keyframes slide {
  to {
    transform: translateX(-50%);
  }
}