/* ============================================================
 * Globapay — Exploded Stack section
 * Pure CSS/HTML 3D-styled stack with 7 glass slabs.
 * All slabs share an identical geometry; only translateZ differs.
 * ============================================================ */

.gp-exp {
  position: relative;
  background: var(--bg);
  padding: 6rem 1.5rem 4rem;
  overflow: hidden;
}

.gp-exp__intro {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.gp-exp__eyebrow {
  display: inline-block;
  font-family: var(--font-eyebrow);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-700);
  margin-bottom: 0.75rem;
}
.gp-exp__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  letter-spacing: -0.03em;
  color: var(--ink-dark);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}
.gp-exp__sub {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink-body);
  line-height: 1.6;
  margin: 0;
  max-width: 540px;
  margin-inline: auto;
}

/* ─────────── Stage ─────────── */
.gp-exp__stage {
  position: relative;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  height: 880px;
  perspective: 2400px;
  perspective-origin: 50% 45%;
}

/* When embedded inside the scroll story scene: fill the parent, not 880x880. */
.gp-exp__stage--in-scene {
  position: absolute;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  margin: 0;
  perspective: 2200px;
  perspective-origin: 50% 50%;
}

/* Whole stack is rotated as a rigid body so all slabs share orientation. */
.gp-exp__stack {
  position: absolute;
  left: 0;
  top: 0;
  right: 260px;
  bottom: 0;
  transform-style: preserve-3d;
  transform: rotateX(48deg) rotateZ(-4deg);
  transform-origin: 50% 45%;
}

/* Slabs share identical W/H/radius. Only translateZ differs. */
.gp-exp__slab {
  --slab-w: 500px;
  --slab-h: 110px;
  --slab-r: 22px;
  --z: 0px;

  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--slab-w);
  height: var(--slab-h);
  margin-left: calc(var(--slab-w) / -2);
  margin-top: calc(var(--slab-h) / -2);
  transform-style: preserve-3d;
  transform: translateZ(var(--z));
}

/* Top face = the visible card surface */
.gp-exp__top {
  position: absolute;
  inset: 0;
  border-radius: var(--slab-r);
  background: var(--slab-bg, linear-gradient(135deg, #fff, #f0f0f0));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
/* Subtle glossy highlight on the top */
.gp-exp__top::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.08) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
}

/* Edge / thickness — drawn as a faux 3D bottom rim (hidden; structural for preserve-3d compat) */
.gp-exp__edge {
  display: none;
}

/* Soft drop shadow ellipse below each slab */
.gp-exp__shadow {
  position: absolute;
  left: -8%;
  right: -8%;
  top: 100%;
  height: 60px;
  margin-top: 22px;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 30%,
    rgba(15, 32, 24, 0.18) 0%,
    rgba(15, 32, 24, 0.08) 40%,
    rgba(15, 32, 24, 0) 70%
  );
  filter: blur(4px);
  pointer-events: none;
  transform: translateZ(-2px);
}

/* ─────────── Slab content (icons row) ─────────── */
.gp-exp__row {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}
.gp-exp__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--slab-fg, #fff);
  text-align: center;
  padding: 0 8px;
}
/* Vertical dividers between cells */
.gp-exp__cell + .gp-exp__cell::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 30%,
    rgba(255, 255, 255, 0.35) 70%,
    transparent 100%
  );
}
.gp-exp__cell svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
  color: var(--slab-fg, #fff);
  opacity: 0.95;
}
.gp-exp__cell-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  line-height: 1.18;
  color: var(--slab-fg, #fff);
  opacity: 0.95;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* ─────────── Per-slab colors — corporate muted palette ─────────── */
.gp-exp__slab--dashboard {
  --slab-w: 520px;
  --slab-h: 220px;
  --slab-r: 22px;
  --slab-bg: linear-gradient(160deg, #FFFFFF 0%, #FAFAFA 60%, #F3F4F6 100%);
  --slab-edge: #D1D5DB;
  --slab-fg: var(--ink-dark);
}
/* Give the dashboard slab a visible border so it doesn't blend into the white page */
.gp-exp__slab--dashboard .gp-exp__top {
  border: 1px solid #E5E7EB;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.gp-exp__slab--processing {
  --slab-bg: linear-gradient(160deg, #E0F2FE 0%, #7DD3FC 55%, #38BDF8 100%);
  --slab-edge: #0EA5E9;
  --slab-fg: #0C4A6E;
}
.gp-exp__slab--orchestration {
  --slab-bg: linear-gradient(160deg, #C7D2FE 0%, #818CF8 55%, #6366F1 100%);
  --slab-edge: #4F46E5;
  --slab-fg: #FFFFFF;
}
.gp-exp__slab--settlement {
  --slab-bg: linear-gradient(160deg, #A5B4FC 0%, #6366F1 55%, #4F46E5 100%);
  --slab-edge: #3730A3;
  --slab-fg: #FFFFFF;
}
.gp-exp__slab--trust {
  --slab-bg: linear-gradient(160deg, #93A5CF 0%, #5B6CA8 55%, #475B94 100%);
  --slab-edge: #364278;
  --slab-fg: #FFFFFF;
}
.gp-exp__slab--ai-ops {
  --slab-bg: linear-gradient(160deg, #6B7A99 0%, #4A5568 55%, #374151 100%);
  --slab-edge: #1F2937;
  --slab-fg: #E5E7EB;
}
.gp-exp__slab--treasury {
  --slab-bg: linear-gradient(160deg, #374151 0%, #1F2937 55%, #111827 100%);
  --slab-edge: #030712;
  --slab-fg: #D1D5DB;
}

.gp-exp__slab--dashboard     { --z:  365px; }
.gp-exp__slab--processing    { --z:  135px; }
.gp-exp__slab--orchestration { --z:    0px; }
.gp-exp__slab--settlement    { --z: -135px; }
.gp-exp__slab--trust         { --z: -270px; }
.gp-exp__slab--ai-ops        { --z: -405px; }
.gp-exp__slab--treasury      { --z: -540px; }

/* ─────────── Dashboard top layer content ─────────── */
.gp-exp__dash {
  position: absolute;
  inset: 18px 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
.gp-exp__dash-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gp-exp__dash-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-exp__dash-brand-img {
  display: block;
  height: 26px;
  width: auto;
  object-fit: contain;
}
.gp-exp__dash-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #B5E97E, #5AA619 70%);
  position: relative;
}
.gp-exp__dash-brand-mark::after {
  content: '';
  position: absolute;
  width: 7px; height: 7px;
  background: var(--ink-dark);
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.gp-exp__dash-chips {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gp-exp__dash-usd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border: 1px solid rgba(26, 48, 32, 0.08);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-dark);
  box-shadow: 0 1px 2px rgba(15, 32, 24, 0.04);
}
.gp-exp__dash-bell {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(26, 48, 32, 0.08);
  display: grid;
  place-items: center;
  position: relative;
}
.gp-exp__dash-bell::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #D14545;
  top: 2px; right: 2px;
}
.gp-exp__dash-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: end;
}
.gp-exp__dash-label {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.gp-exp__dash-big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  letter-spacing: -0.04em;
  color: var(--ink-dark);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gp-exp__dash-delta {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--green-600);
  margin-top: 4px;
}
.gp-exp__dash-delta-vs { color: var(--ink-muted); font-weight: 500; }
.gp-exp__dash-chart {
  position: relative;
  height: 70px;
}
.gp-exp__dash-chart svg { width: 100%; height: 100%; display: block; }
.gp-exp__dash-chart-pct {
  position: absolute;
  top: -4px;
  right: 0;
  background: var(--green-50);
  color: var(--green-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  border-radius: 999px;
  padding: 3px 8px;
}
.gp-exp__dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.gp-exp__dash-stat {
  background: #fff;
  border: 1px solid rgba(26, 48, 32, 0.06);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 2px rgba(15, 32, 24, 0.03);
}
.gp-exp__dash-stat-l { display: flex; flex-direction: column; }
.gp-exp__dash-stat-cap {
  font-size: 9px;
  color: var(--ink-muted);
  line-height: 1.1;
}
.gp-exp__dash-stat-val {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-dark);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gp-exp__dash-stat-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--green-50);
  border: 1px solid var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.gp-exp__dash-stat-icon svg { width: 13px; height: 13px; }

/* ─────────── Callouts on the right ─────────── */
.gp-exp__callouts {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 260px;
  pointer-events: none;
}
.gp-exp__callout {
  position: absolute;
  left: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateY(-50%);
}
.gp-exp__callout-dots {
  flex-shrink: 0;
  width: 64px;
  height: 2px;
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0.18) 1px, transparent 1px);
  background-size: 7px 2px;
  background-repeat: repeat-x;
  background-position: left center;
}
.gp-exp__callout-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1.5px solid #D1D5DB;
  color: #111827;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.gp-exp__callout-text {
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.gp-exp__callout-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.gp-exp__callout--1 { top: 18%; }
.gp-exp__callout--2 { top: 30%; }
.gp-exp__callout--3 { top: 42%; }
.gp-exp__callout--4 { top: 54%; }
.gp-exp__callout--5 { top: 66%; }
.gp-exp__callout--6 { top: 78%; }
.gp-exp__callout--7 { top: 90%; }

/* ─────────── Responsive ─────────── */
@media (max-width: 880px) {
  .gp-exp__stage {
    height: 720px;
    transform: scale(0.78);
    transform-origin: top center;
  }
}
@media (max-width: 600px) {
  .gp-exp__stage {
    transform: scale(0.55);
    height: 600px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gp-exp__callout { opacity: 1; transform: translateY(-50%); }
}

/* ─────────── Desktop Slab Scaling (Option B) ─────────── */
@media (min-width: 1300px) {
  .gp-exp__slab {
    --slab-w: 570px;
    --slab-h: 125px;
  }
  .gp-exp__slab--dashboard {
    --slab-w: 590px;
    --slab-h: 250px;
  }
}