/* ============================================================
   Sibos 2026 landing page
   Layered on top of loamist-brand.css + lc-check.css.

   Hero: the trade-network animation is the backdrop, the
   documents-in / checked-data-out motif sits in front of it, and
   everything is one centred column so nothing collides at any
   width. Sized mobile-first with clamp() throughout.
   ============================================================ */

.sibos-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100dvh - 68px);
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 72px) 20px;
  text-align: center;
}

.sibos-canvas,
.sibos-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sibos-canvas {
  z-index: -2;
  opacity: 0.75; /* 25% more transparent than full strength */
}

/* Keeps the centre calm enough to read type over, and lets the map
   breathe at the edges. Uses the theme background so it works in dark. */
.sibos-veil {
  z-index: -1;
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, var(--bg, #faf9f7) 0%, rgba(250, 249, 247, 0) 72%),
    linear-gradient(to bottom, var(--bg, #faf9f7) 0%, rgba(250, 249, 247, 0) 22%, rgba(250, 249, 247, 0) 78%, var(--bg, #faf9f7) 100%);
}

[data-theme="dark"] .sibos-veil {
  background:
    radial-gradient(ellipse 62% 58% at 50% 46%, var(--bg) 0%, transparent 72%),
    linear-gradient(to bottom, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}

.sibos-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sibos-kicker {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(10px, 1.5vw, 13px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold, #AD7F00);
  font-weight: 500;
  margin: 0;
}

.sibos-title {
  font-family: 'Funnel Display', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(46px, 12vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: clamp(8px, 1.4vw, 14px) 0 0;
  text-wrap: balance;
}

.sibos-city {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: clamp(14px, 2.2vw, 24px) 0 0;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(26px, 4vw, 38px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold, #AD7F00);
}

.sibos-city-dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--gold, #AD7F00);
  box-shadow: 0 0 0 9px rgba(173, 127, 0, 0.15);
  flex: 0 0 auto;
}

/* ---- documents in, Loamist, checked data out ---------------------- */
.sibos-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.8vw, 22px);
  margin: clamp(30px, 5vw, 58px) 0 0;
  width: 100%;
}

.sibos-docs {
  position: relative;
  width: clamp(56px, 10.6vw, 128px);
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
}

.sibos-docs > span,
.sibos-doc {
  position: absolute;
  inset: 0;
  border: 1.5px dashed #d9d2c6;
  border-radius: 10px;
  background: var(--card, #fff);
}

.sibos-docs > span:nth-child(1) { transform: rotate(-7deg); background: var(--bg-2, #f3f1ec); }
.sibos-docs > span:nth-child(2) { transform: rotate(3.5deg); }

.sibos-doc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(5px, 1vw, 10px);
  padding: 0 clamp(12px, 1.8vw, 20px);
}

.sibos-doc i {
  display: block;
  height: clamp(5px, 0.8vw, 8px);
  border-radius: 3px;
  background: #e3ddd2;
}

.sibos-doc i:nth-child(1) { width: 70%; }
.sibos-doc i:nth-child(2) { width: 88%; }
.sibos-doc i:nth-child(3) { width: 52%; }
.sibos-doc i:nth-child(4) { width: 80%; }

.sibos-arrow { flex: 0 0 auto; line-height: 0; }

.sibos-arrow svg {
  width: clamp(12px, 2.3vw, 24px);
  height: clamp(12px, 2.3vw, 24px);
  color: var(--gold, #AD7F00);
}

.sibos-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.sibos-core-tile {
  display: grid;
  place-items: center;
  width: clamp(48px, 8.5vw, 98px);
  height: clamp(48px, 8.5vw, 98px);
  border-radius: clamp(16px, 2.1vw, 24px);
  background: var(--gold, #AD7F00);
  box-shadow: 0 12px 30px rgba(173, 127, 0, 0.3);
}

.sibos-core-tile svg {
  width: clamp(21px, 3.7vw, 42px);
  height: clamp(21px, 3.7vw, 42px);
  color: #fff;
}

.sibos-core span {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(9px, 1.4vw, 13px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary, #5b554c);
}

.sibos-fields {
  width: clamp(112px, 23.5vw, 278px);
  flex: 0 0 auto;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e7e2da);
  border-radius: 12px;
  padding: clamp(12px, 1.6vw, 19px);
  box-shadow: 0 12px 32px rgba(28, 25, 23, 0.09);
}

.sibos-fields-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: clamp(9px, 1.4vw, 13px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary, #5b554c);
  margin-bottom: clamp(9px, 1.4vw, 16px);
}

.sibos-fields-head span,
.sibos-fields-head b { white-space: nowrap; }
.sibos-fields-head b { color: var(--green, #2e7d32); }

.sibos-field {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: clamp(8px, 1.2vw, 12px);
}

.sibos-field svg {
  width: clamp(12px, 1.6vw, 17px);
  height: clamp(12px, 1.6vw, 17px);
  color: var(--green, #2e7d32);
  flex: 0 0 auto;
}

.sibos-field span {
  display: block;
  height: clamp(5px, 0.8vw, 8px);
  flex: 1;
  border-radius: 3px;
  background: #eceae4;
}

/* ---- when / cta --------------------------------------------------- */
.sibos-when {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: clamp(26px, 4vw, 46px) 0 0;
  font-size: clamp(14px, 1.7vw, 19px);
  font-weight: 600;
}

.sibos-when svg {
  width: clamp(15px, 1.6vw, 18px);
  height: clamp(15px, 1.6vw, 18px);
  color: var(--gold, #AD7F00);
  flex: 0 0 auto;
}

.sibos-cta { margin-top: clamp(18px, 2.4vw, 26px); }
.sibos-cta svg { width: 16px; height: 16px; }

.sibos-note {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  font-size: clamp(12.5px, 1.3vw, 14px);
  color: var(--text-secondary, #5b554c);
}

/* Phones: give the hero room to breathe instead of forcing full height,
   and let the flow sit a little tighter. */
@media (max-width: 560px) {
  .sibos-hero {
    min-height: 0;
    padding: 40px 18px 48px;
  }
  .sibos-flow { gap: 6px; }
}

/* Sticky header would otherwise cover the form heading on jump. */
#request { scroll-margin-top: 88px; }

/* The form and success sections sit BELOW a hero on this page rather than at
   the top of the viewport, so drop the full-height rule they inherit from
   lc-check.css. Loaded after lc-check.css, so this wins on source order. */
.lc-upload-section,
.lc-success-section {
  min-height: 0;
  padding-block: clamp(32px, 5vw, 64px);
}