/* ============================================================
   Pivax — Mod 2 site styles · v3.0 (2026-04-30)
   - Atmospheric backgrounds (no longer pure black)
   - Stronger cards with gradient depth + glow
   - Scroll-reveal + parallax + stat counters
   - Inline module abbreviation legend
   - Stat callouts with large numbers
   - Mini SVG icons for layers
   ============================================================ */

:root {
  /* Ink palette — slightly cooler than #0A0A0A so mid-tones can breathe */
  --ink:        #0B0C0F;
  --ink-2:      #101218;
  --ink-soft:   #14161D;
  --ink-card:   #16181F;
  --ink-card-2: #1B1E27;
  --ink-line:   #25282F;
  --ink-line-2: #353841;
  --ink-line-3: #4A4D58;

  /* Light tones */
  --paper:      #FAFAFA;
  --cream:      #F2EEE3;

  /* Gold */
  --gold:       #D4AF37;
  --gold-warm:  #C89A2C;
  --gold-mute:  #8A7A3E;
  --gold-soft:  rgba(212,175,55,0.10);
  --gold-glow:  rgba(212,175,55,0.18);

  /* Text */
  --text:       #E4E2DA;
  --text-mute:  #9A968D;
  --text-low:   #5F5C55;
  --graphite:   #B6B3AA;

  /* Status */
  --ok:         #7FD388;
  --no:         #E27373;
  --info:       #6EAFE8;

  /* Layout */
  --container: 1200px;
  --gutter: 48px;
  --gutter-mobile: 22px;
  --header-height: 72px;

  /* Easing */
  --ease-std: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emp: cubic-bezier(0.16, 0.84, 0.29, 1);
  --ease-out-back: cubic-bezier(0.34, 1.36, 0.64, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: "ss01","cv11";
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* zh-Hant pages get Noto Sans TC fallback */
body.zh-hant {
  font-family: "Inter", "Noto Sans TC", -apple-system, BlinkMacSystemFont, system-ui, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* ─── Atmospheric body background ─── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 55% at 50% -10%, rgba(212,175,55,0.07) 0%, transparent 55%),
    radial-gradient(ellipse 60% 45% at 110% 30%, rgba(110,175,232,0.035) 0%, transparent 65%),
    radial-gradient(ellipse 70% 50% at -5% 75%, rgba(212,175,55,0.025) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(255,255,255,0.02) 0%, transparent 60%);
}

/* Subtle grid mesh — fixed background, very faint */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(212,175,55,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 0%, transparent 75%);
  opacity: 0.6;
}

/* Make sure all content sits above the atmospheric layers */
header.site,
main,
footer.site { position: relative; z-index: 2; }

::selection { background: var(--gold); color: var(--ink); }

a { color: inherit; text-decoration: none; transition: color .2s var(--ease-std); }
a:hover { color: var(--paper); }

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ===================== LAYOUT ===================== */
.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 760px) {
  .wrap { padding: 0 var(--gutter-mobile); }
}

/* ===================== HEADER ===================== */
header.site {
  position: sticky;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(11, 12, 15, 0.72);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}
header.site.is-scrolled {
  background: rgba(11, 12, 15, 0.92);
  border-bottom: 1px solid var(--ink-line);
  box-shadow: 0 1px 0 rgba(255,255,255,0.02), 0 8px 28px rgba(0,0,0,0.4);
}
header.site .row {
  height: var(--header-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
header.site .brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--paper); font-weight: 600; letter-spacing: -0.01em; font-size: 18px;
}
header.site .brand img { height: 28px; width: auto; display: block; }

header.site nav.primary {
  display: flex; gap: 32px;
  font-size: 14px; font-weight: 500;
  color: var(--text-mute);
}
header.site nav.primary a { position: relative; padding: 4px 0; }
header.site nav.primary a:hover { color: var(--paper); }
header.site nav.primary a.is-active { color: var(--paper); }
header.site nav.primary a.is-active::after {
  content: "";
  position: absolute; left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(212,175,55,0.6);
}

header.site .ctas { display: flex; gap: 10px; align-items: center; }

@media (max-width: 920px) {
  header.site nav.primary { display: none; }
}

/* pill / button */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 99px;
  font-size: 13px; font-weight: 500;
  border: 1px solid var(--ink-line);
  color: var(--text-mute);
  transition: all .25s var(--ease-std);
}
.pill:hover { border-color: var(--gold-mute); color: var(--paper); transform: translateY(-1px); }
.pill.primary {
  background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 600;
}
.pill.primary:hover {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
  box-shadow: 0 6px 20px rgba(212,175,55,0.3);
}

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 99px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  border: 1px solid transparent; cursor: pointer;
  transition: all .25s var(--ease-std);
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.btn .arrow { display: inline-block; transition: transform .25s var(--ease-std); }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary { background: var(--paper); color: var(--ink); }
.btn-primary:hover {
  background: var(--gold); transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(212,175,55,0.32);
}

.btn-ghost {
  border-color: var(--ink-line-2); color: var(--paper);
  background: rgba(255,255,255,0.02);
}
.btn-ghost:hover {
  border-color: var(--gold-mute); transform: translateY(-2px);
  background: var(--gold-soft);
}

/* Shimmer effect on primary button */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.4) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s ease;
}
.btn-primary:hover::after { transform: translateX(100%); }

/* ===================== TYPOGRAPHY ===================== */
h1, h2, h3, h4 { color: var(--paper); margin: 0; }
.display {
  font-weight: 700; font-size: clamp(48px, 7.5vw, 96px);
  line-height: 1.02; letter-spacing: -0.04em;
}
h1 { font-weight: 700; font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: -0.03em; }
h2 { font-weight: 600; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -0.025em; }
h3 { font-weight: 600; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; letter-spacing: -0.015em; }

.kicker {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-mute);
}
.kicker.gold { color: var(--gold); }
.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--text);
  line-height: 1.65;
  max-width: 64ch;
}
.gold-text { color: var(--gold); }
.text-mute { color: var(--text-mute); }
.text-low { color: var(--text-low); }
.center { text-align: center; }

/* ===================== SECTIONS ===================== */
section.block {
  padding: clamp(72px, 10vw, 140px) 0;
  border-top: 1px solid var(--ink-line);
  position: relative;
}
section.block:first-of-type { border-top: 0; }
section.block::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(255,255,255,0.012) 0%, transparent 50%);
}
section.block > * { position: relative; }

.section-head { margin-bottom: clamp(40px, 6vw, 72px); max-width: 760px; }
.section-head .kicker { margin-bottom: 16px; display: inline-block; }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--text); font-size: 17px; line-height: 1.65; max-width: 60ch; }

/* Subtle axis tick decorator before section heads */
.section-head::before {
  content: "";
  display: block;
  width: 24px; height: 1px;
  background: var(--gold);
  margin-bottom: 20px;
  opacity: 0.7;
}

/* ===================== HERO ===================== */
.hero {
  padding: clamp(120px, 16vh, 200px) 0 clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
  border-top: 0;
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(212,175,55,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(11,12,15,0.8) 0%, transparent 70%);
  z-index: 0;
}
.hero .corner-tag {
  position: absolute; top: 32px; left: var(--gutter);
  display: flex; align-items: center; gap: 12px;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.18em; color: var(--text-low); text-transform: uppercase;
  z-index: 2;
}
.hero .corner-tag::before {
  content: ""; width: 10px; height: 10px; background: var(--gold); display: block;
  box-shadow: 0 0 14px rgba(212,175,55,0.7);
}
.hero .axis-tick {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 40px;
  background: linear-gradient(180deg, var(--gold) 0%, transparent 100%);
  opacity: 0.85;
  z-index: 2;
}
.hero-circuits {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.85;
}
.hero-circuits svg { width: 100%; height: 100%; }
.hero-circuits polyline { stroke-dasharray: 6 4; animation: circuitFlow 8s linear infinite; }
@keyframes circuitFlow {
  to { stroke-dashoffset: -100; }
}
.hero-content {
  position: relative; z-index: 2; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hero-mark {
  width: clamp(72px, 10vw, 120px); height: auto; margin-bottom: 36px; display: block;
  animation: heroFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px rgba(212,175,55,0.25));
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero h1 { animation: fadeUp .8s .12s var(--ease-emp) both; max-width: 18ch; }
.hero h1 em {
  font-style: normal; color: var(--gold);
  background: linear-gradient(90deg, #C89A2C 0%, #D4AF37 50%, #E8C658 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero .lede { animation: fadeUp .8s .24s var(--ease-emp) both; margin: 28px auto 0; text-align: center; }
.hero .ctas {
  margin-top: 48px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center;
  animation: fadeUp .8s .36s var(--ease-emp) both;
}
.hero .badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px; border-radius: 99px;
  border: 1px solid var(--ink-line-2);
  background: rgba(212,175,55,0.04);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 32px;
  animation: fadeUp .6s .04s var(--ease-emp) both;
}
.hero .badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,0.5);
  animation: pulse 2.4s ease-in-out infinite;
}
.hero .tagline-frame {
  margin-top: 56px; padding: 18px 32px;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 500; letter-spacing: -0.01em;
  color: var(--text);
  animation: fadeUp .8s .48s var(--ease-emp) both;
  background: linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.06) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: fadeUp .8s .48s var(--ease-emp) both, taglineSweep 8s linear infinite;
}
@keyframes taglineSweep {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===================== STAT CALLOUTS ===================== */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(212,175,55,0.04) 0%, rgba(212,175,55,0) 100%);
  overflow: hidden;
  margin-top: 48px;
}
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr; } }

.stat {
  padding: 32px 28px;
  border-right: 1px solid var(--ink-line);
  position: relative;
  text-align: left;
}
.stat:last-child { border-right: 0; }
@media (max-width: 760px) {
  .stat { border-right: 0; border-bottom: 1px solid var(--ink-line); }
  .stat:last-child { border-bottom: 0; }
}

.stat .stat-num {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.stat .stat-num .unit {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
}
.stat .stat-num .prefix {
  font-size: 0.42em;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0;
}
.stat .stat-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold-mute);
  margin-bottom: 10px;
}
.stat .stat-desc {
  color: var(--text-mute);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.stat::before {
  content: "";
  position: absolute; left: 28px; top: 0;
  width: 24px; height: 2px;
  background: var(--gold);
  opacity: 0.7;
}

/* ===================== ABBREVIATION LEGEND ===================== */
.abbr-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border: 1px solid var(--ink-line);
  border-radius: 10px;
  margin: 24px 0 32px;
  background: linear-gradient(180deg, rgba(255,255,255,0.012) 0%, transparent 100%);
  overflow: hidden;
}
.abbr-legend .item {
  padding: 14px 18px;
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  display: flex; flex-direction: column; gap: 4px;
}
.abbr-legend .item:last-child { border-right: 0; }
.abbr-legend .item .code {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold);
}
.abbr-legend .item .full {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}
.abbr-legend .item .zh {
  font-size: 12px;
  color: var(--text-mute);
}

/* ===================== CARD GRID ===================== */
.grid { display: grid; gap: 24px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 920px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

.card {
  background: linear-gradient(180deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 12px;
  padding: 32px;
  transition: border-color .25s var(--ease-std), transform .25s var(--ease-std), box-shadow .25s var(--ease-std), background .25s var(--ease-std);
  position: relative;
  overflow: hidden;
}
.card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--ink-line-3) 50%, transparent 100%);
  opacity: 0.6;
}
.card:hover {
  border-color: var(--gold-mute);
  transform: translateY(-3px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55), 0 0 0 1px rgba(212,175,55,0.08);
}
.card .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em; color: var(--gold-mute);
  text-transform: uppercase; margin-bottom: 16px;
  display: block;
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--text); font-size: 15px; line-height: 1.65; margin: 0; }
.card.feature { padding: 36px 32px; }
.card.feature .gold-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--gold);
  margin-bottom: 28px;
  box-shadow: 0 0 16px rgba(212,175,55,0.6), 0 0 0 4px rgba(212,175,55,0.08);
}

/* Card with animated gold sweep on hover */
.card.feature::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 60% at 0% 0%, rgba(212,175,55,0.05) 0%, transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease-std);
  pointer-events: none;
}
.card.feature:hover::after { opacity: 1; }

/* module mini-card (used on product page) */
.module {
  background: linear-gradient(180deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 8px;
  padding: 20px;
  transition: border-color .25s var(--ease-std), transform .25s var(--ease-std), box-shadow .25s var(--ease-std);
  position: relative;
  overflow: hidden;
}
.module:hover {
  border-color: var(--gold-mute);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.module .code {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em;
  color: var(--gold); display: inline-block; margin-bottom: 8px;
  padding: 3px 8px;
  background: rgba(212,175,55,0.10);
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.18);
}
.module .title { color: var(--paper); font-weight: 600; margin-bottom: 6px; font-size: 15px; }
.module .desc { color: var(--text-mute); font-size: 13px; line-height: 1.55; margin: 0; }
.module .icon-glyph {
  position: absolute; top: 18px; right: 18px;
  width: 24px; height: 24px;
  opacity: 0.5;
  transition: opacity .25s var(--ease-std), transform .25s var(--ease-std);
}
.module:hover .icon-glyph { opacity: 1; transform: scale(1.05); }

/* pricing card */
.price-card {
  background: linear-gradient(180deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 12px;
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 20px;
  position: relative;
  transition: all .25s var(--ease-std);
}
.price-card:hover {
  border-color: var(--gold-mute);
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.price-card.featured {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, var(--ink-card) 80%);
  box-shadow: 0 0 0 1px var(--gold-glow);
}
.price-card.featured::before {
  content: "RECOMMENDED";
  position: absolute; top: -12px; right: 24px;
  background: var(--gold); color: var(--ink);
  padding: 4px 12px; border-radius: 4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; letter-spacing: 0.18em; font-weight: 600;
}
.price-card .tier {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em;
  color: var(--gold); text-transform: uppercase;
}
.price-card .price { color: var(--paper); font-size: 38px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; }
.price-card .price small { font-size: 14px; font-weight: 400; color: var(--text-mute); margin-left: 4px; }
.price-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.price-card ul li {
  color: var(--text); font-size: 14px; line-height: 1.55;
  padding-left: 22px; position: relative;
}
.price-card ul li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 6px rgba(212,175,55,0.4);
}
.price-card .note { color: var(--text-low); font-size: 12px; line-height: 1.5; }

/* timeline (14-day) */
.timeline { display: flex; flex-direction: column; gap: 0; border-left: 1px solid var(--ink-line-2); padding-left: 32px; margin-left: 8px; }
.timeline .step { padding: 24px 0; border-bottom: 1px dashed var(--ink-line); position: relative; }
.timeline .step:last-child { border-bottom: 0; }
.timeline .step::before {
  content: ""; position: absolute; left: -38px; top: 32px;
  width: 8px; height: 8px; background: var(--gold); border-radius: 50%;
  box-shadow: 0 0 0 4px var(--ink), 0 0 12px rgba(212,175,55,0.4);
}
.timeline .step .day {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; color: var(--gold-mute); text-transform: uppercase;
  margin-bottom: 6px; display: block;
}
.timeline .step .title { color: var(--paper); font-weight: 600; font-size: 17px; margin-bottom: 4px; }
.timeline .step .desc { color: var(--text-mute); font-size: 14px; line-height: 1.6; }

/* table */
.table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  background: var(--ink-card);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
}
.table th, .table td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--ink-line);
  vertical-align: top;
}
.table th {
  color: var(--gold-mute); font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  background: rgba(212,175,55,0.04);
}
.table td { color: var(--text); }
.table tr { transition: background .2s ease; }
.table tbody tr:hover { background: rgba(212,175,55,0.03); }
.table td.muted { color: var(--text-mute); }
.table td .code {
  font-family: "JetBrains Mono", monospace; font-size: 12px;
  color: var(--gold);
  padding: 3px 8px;
  background: rgba(212,175,55,0.10);
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.18);
}

/* trust band */
.trust { padding: 60px 0; border-top: 1px solid var(--ink-line); border-bottom: 1px solid var(--ink-line); position: relative; z-index: 2; }
.trust .label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-low); margin-bottom: 24px; text-align: center; }
.trust .row { display: flex; flex-wrap: wrap; gap: 48px; justify-content: center; align-items: center; color: var(--text-mute); font-weight: 600; font-size: 17px; letter-spacing: 0.02em; opacity: 0.7; transition: opacity .3s ease; }
.trust .row:hover { opacity: 1; }
.trust .row span { transition: color .2s ease; }
.trust .row span:hover { color: var(--gold); }

/* CTA banner */
.cta-banner {
  border: 1px solid var(--ink-line-2); border-radius: 14px;
  padding: 56px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(212,175,55,0.08) 0%, transparent 70%),
    linear-gradient(180deg, rgba(212,175,55,0.04) 0%, var(--ink-card) 100%);
  position: relative;
  overflow: hidden;
}
.cta-banner::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 300px;
  background: radial-gradient(ellipse 50% 100% at 100% 50%, var(--gold-glow) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0.5;
}
.cta-banner h2 { margin: 0 0 6px; }
.cta-banner p { margin: 0; color: var(--text); }
.cta-banner .ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===================== FORM ===================== */
form.contact { display: grid; gap: 18px; max-width: 640px; }
form.contact label { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-mute); font-family: "JetBrains Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; }
form.contact input, form.contact select, form.contact textarea {
  background: var(--ink-card); border: 1px solid var(--ink-line);
  color: var(--text); border-radius: 8px;
  padding: 14px 16px; font-size: 15px; font-family: inherit;
  transition: border-color .2s var(--ease-std);
  letter-spacing: -0.005em;
}
form.contact input:focus, form.contact select:focus, form.contact textarea:focus {
  outline: none; border-color: var(--gold-mute);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.12);
}
form.contact textarea { min-height: 140px; resize: vertical; }
form.contact .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 600px) { form.contact .row { grid-template-columns: 1fr; } }
form.contact button { align-self: flex-start; }

/* ===================== FOOTER ===================== */
footer.site {
  border-top: 1px solid var(--ink-line);
  padding: 80px 0 40px;
  margin-top: 80px;
  position: relative;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.3) 100%);
}
footer.site .top {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 760px) { footer.site .top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.site .top { grid-template-columns: 1fr; } }
footer.site .col h4 { color: var(--text-mute); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; font-weight: 500; }
footer.site .col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site .col ul a { color: var(--text); font-size: 14px; }
footer.site .col ul a:hover { color: var(--gold); }
footer.site .brand-block { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
footer.site .brand-block p { color: var(--text-mute); font-size: 14px; line-height: 1.6; margin: 0; }
footer.site .brand-block img { height: 32px; width: auto; display: block; }
footer.site .bottom {
  border-top: 1px solid var(--ink-line); padding-top: 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 12px; color: var(--text-low); font-family: "JetBrains Mono", monospace; letter-spacing: 0.08em;
}
footer.site .bottom .gold-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
  vertical-align: middle; margin: 0 8px;
  box-shadow: 0 0 8px rgba(212,175,55,0.4);
}

.gold-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 10px rgba(212,175,55,0.45);
}

.divider { height: 1px; background: var(--ink-line); margin: 48px 0; }
.eyebrow { color: var(--gold); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }

/* ===================== BEFORE/AFTER TRANSFORMATION ===================== */
.transform-section { padding: clamp(72px, 10vw, 140px) 0; border-top: 1px solid var(--ink-line); }

.toggle-bar {
  display: inline-flex;
  background: var(--ink-card);
  border: 1px solid var(--ink-line-2);
  border-radius: 99px;
  padding: 4px;
  gap: 4px;
  margin: 32px 0 48px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  position: relative;
  z-index: 3;
}
.toggle-bar button {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text-mute);
  padding: 11px 22px;
  border-radius: 99px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  transition: all .25s var(--ease-std);
  position: relative;
  z-index: 1;
}
.toggle-bar button:hover { color: var(--paper); }
.toggle-bar button.is-active {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.stack-canvas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  border: 1px solid var(--ink-line-2);
  border-radius: 12px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(212,175,55,0.025) 0%, transparent 65%),
    var(--ink-2);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.stack-canvas .state {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--ease-emp), transform .45s var(--ease-emp);
  transform: scale(0.985);
}
.stack-canvas[data-current="before"] .state-before,
.stack-canvas[data-current="after"]  .state-after {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

/* ----- BEFORE state: scattered competitor tiles ----- */
.state-before .chaos-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.state-before .chaos-svg path { animation: chaosPulse 4s ease-in-out infinite; }
@keyframes chaosPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}
.state-before .tile {
  position: absolute;
  background: linear-gradient(180deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 11px; line-height: 1.4;
  color: var(--text-mute);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  animation: tileFloat 6s ease-in-out infinite;
}
.state-before .tile:nth-child(odd) { animation-delay: -2s; }
.state-before .tile:nth-child(even) { animation-delay: -4s; }
@keyframes tileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.state-before .tile .tool { color: var(--paper); font-weight: 600; display: block; font-size: 13px; }
.state-before .tile .cat { color: var(--text-low); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
.state-before .caption {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--no); font-size: 13px;
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
  opacity: 0.85;
}

/* ----- AFTER state: 20 Pivax modules in axis-symmetric grid ----- */
.state-after .after-grid {
  position: absolute;
  inset: 50px clamp(40px, 6%, 80px) 70px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.state-after .row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr));
  gap: 10px;
  justify-content: center;
  position: relative;
}
.state-after .row[data-cols="4"] { max-width: 80%; margin: 0 auto; }
.state-after .row .layer-tag {
  position: absolute; left: -12px; top: 50%; transform: translate(-100%, -50%);
  font-family: "JetBrains Mono", monospace; font-size: 9px;
  color: var(--gold-mute); letter-spacing: 0.18em; text-transform: uppercase;
  white-space: nowrap;
}
@media (max-width: 760px) { .state-after .row .layer-tag { display: none; } }

.state-after .mod-tile {
  background: linear-gradient(180deg, var(--ink-card-2) 0%, var(--ink-card) 100%);
  border: 1px solid var(--ink-line-2);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; overflow: hidden;
  cursor: help;
  transition: transform .25s var(--ease-std), border-color .25s var(--ease-std), background .25s var(--ease-std), box-shadow .25s var(--ease-std);
  position: relative;
}
.state-after .mod-tile:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: rgba(212,175,55,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4), 0 0 0 1px rgba(212,175,55,0.2);
  z-index: 5;
}
.state-after .mod-tile:hover .name { color: var(--paper); }
.state-after .mod-tile .code { color: var(--gold); font-weight: 600; letter-spacing: 0.08em; font-size: 10px; }
.state-after .mod-tile .name { color: var(--text); font-size: 11px; letter-spacing: 0; font-family: "Inter", sans-serif; font-weight: 500; }
.state-after .mod-tile.layer-1 { border-color: rgba(212,175,55,0.32); background: linear-gradient(180deg, rgba(212,175,55,0.05) 0%, var(--ink-card) 100%); }
.state-after .mod-tile.layer-2 { border-color: var(--ink-line-2); }
.state-after .mod-tile.layer-3 { border-color: var(--ink-line-2); background: linear-gradient(180deg, rgba(212,175,55,0.04) 0%, var(--ink-card) 100%); }
.state-after .mod-tile.enterprise { border-color: var(--ink-line-2); opacity: 0.78; }

.state-after .caption {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  color: var(--gold); font-size: 13px;
  font-family: "JetBrains Mono", monospace; letter-spacing: 0.16em; text-transform: uppercase;
  text-align: center;
}
.state-after .axis-tick {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 12px; background: var(--gold);
}

/* Tooltip on module tiles (data-tooltip set by JS) */
.mod-tile[data-tooltip] { position: relative; }
.mod-tile[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1F2128; color: var(--paper);
  padding: 8px 12px; border-radius: 6px;
  border: 1px solid var(--ink-line-2);
  font-family: "Inter", sans-serif;
  font-size: 12px; white-space: nowrap;
  pointer-events: none; opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.mod-tile[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 760px) {
  .stack-canvas { aspect-ratio: 4 / 5; max-height: 720px; }
  .state-before .tile { font-size: 10px; padding: 7px 10px; }
  .state-before .tile .tool { font-size: 11px; }
  .state-after .mod-tile .name { font-size: 10px; }
  .state-after .after-grid { inset: 28px 8px 60px; gap: 8px; }
}

/* ===================== LAYER ICONS ===================== */
.layer-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 8px;
}
.layer-icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--ink-line-2);
  background: linear-gradient(180deg, rgba(212,175,55,0.08) 0%, var(--ink-card) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.layer-icon svg { width: 22px; height: 22px; color: var(--gold); }
.layer-icon::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 10px;
  background: radial-gradient(ellipse at center, rgba(212,175,55,0.25) 0%, transparent 70%);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.layer-icon:hover::after { opacity: 1; }

/* ===================== SCROLL REVEAL ===================== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 0.84, 0.29, 1),
    transform 0.85s cubic-bezier(0.16, 0.84, 0.29, 1);
  will-change: opacity, transform;
}
.reveal.is-revealed {
  opacity: 1;
  transform: none;
}
/* Stagger inside grids */
.grid.reveal.is-revealed > * {
  animation: fadeUp .7s cubic-bezier(0.16, 0.84, 0.29, 1) backwards;
}
.grid.reveal.is-revealed > *:nth-child(1) { animation-delay: 0.06s; }
.grid.reveal.is-revealed > *:nth-child(2) { animation-delay: 0.16s; }
.grid.reveal.is-revealed > *:nth-child(3) { animation-delay: 0.26s; }
.grid.reveal.is-revealed > *:nth-child(4) { animation-delay: 0.36s; }
.grid.reveal.is-revealed > *:nth-child(5) { animation-delay: 0.46s; }
.grid.reveal.is-revealed > *:nth-child(6) { animation-delay: 0.56s; }

/* ===================== ANIMATIONS ===================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ===================== PARALLAX HOOKS ===================== */
[data-parallax] { will-change: transform; }

/* ===================== PROBLEM/SOLUTION ROW (custom block on home) ===================== */
.versus {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 24px;
}
@media (max-width: 760px) {
  .versus { grid-template-columns: 1fr; }
  .versus-arrow { display: none !important; }
}
.versus .col {
  background: var(--ink-card);
  border: 1px solid var(--ink-line-2);
  border-radius: 12px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 10px;
  transition: all .25s var(--ease-std);
}
.versus .col.before { background: linear-gradient(180deg, rgba(226,115,115,0.04) 0%, var(--ink-card) 100%); border-color: var(--ink-line-2); }
.versus .col.after { border-color: var(--gold-mute); background: linear-gradient(180deg, rgba(212,175,55,0.06) 0%, var(--ink-card) 100%); }
.versus .col .num {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--text-low); text-transform: uppercase;
}
.versus .col.after .num { color: var(--gold); }
.versus .col h3 { font-size: 18px; line-height: 1.3; }
.versus .col.before h3 { color: var(--text-mute); text-decoration: line-through; text-decoration-color: var(--text-low); }
.versus .col p { color: var(--text); font-size: 14px; line-height: 1.6; margin: 0; }

.versus-arrow {
  display: flex; align-items: center; justify-content: center;
  color: var(--gold); font-family: "JetBrains Mono", monospace; font-size: 12px;
  position: relative;
}
.versus-arrow::before {
  content: "";
  width: 100%; height: 1px;
  background: linear-gradient(90deg, var(--ink-line) 0%, var(--gold) 50%, var(--ink-line) 100%);
  position: absolute; top: 50%; left: 0;
}
.versus-arrow::after {
  content: "→";
  background: var(--ink); padding: 0 12px; position: relative; z-index: 1;
  font-size: 16px;
}

/* ===================== PRINT ===================== */
@media print {
  body { background: white; color: black; }
  body::before, body::after { display: none; }
  header.site, footer.site, .ctas, .hero-circuits { display: none; }
}