/* ==========================================================================
   VISHAB OTC — Landing page styles
   Plain, hand-authored CSS. No build step, no framework — edit directly.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Silka';
  src: url('/assets/fonts/silka-regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silka';
  src: url('/assets/fonts/silka-medium-webfont.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Silka';
  src: url('/assets/fonts/silka-semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --bg: #04070f;
  --bg-deep: #030509;
  --fg: #f5f7fb;
  --card: #0c1424;
  --card-border: rgba(255, 255, 255, 0.08);

  --primary: #5681f6;       /* accent blue used for glows / rings / beam */
  --primary-glow: #7fb3ff;
  --cyan: #00cbff;          /* interactive accent (hover states, links) */
  --cyan-400: #22d3ee;
  --cyan-200: #a5f3fc;
  --emerald: #34d399;
  --indigo: #6366f1;

  --navy: #001c33;          /* light-navbar text */
  --btn-navy: #000212;      /* dark pill button fill */

  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;

  --border: rgba(255, 255, 255, 0.1);
  --border-soft: rgba(255, 255, 255, 0.06);

  --radius-lg: 1.5rem;
  --radius-xl: 1.75rem;
  --shadow-glow: 0 0 40px -8px var(--primary);

  --font-display: 'Silka', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --container: 1280px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.divider {
  max-width: var(--container);
  margin: 64px auto;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--primary), transparent);
  opacity: 0.6;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.pulse-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--primary);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes float-badge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
@keyframes beam-spin { to { transform: rotate(360deg); } }

.btn-beam {
  position: relative;
  display: inline-flex;
  align-items: center;
  border: none;
  border-radius: 999px;
  padding: 1px;
  overflow: hidden;
  background: var(--btn-navy);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.btn-beam:hover { box-shadow: 0 0 14px -6px var(--primary); transform: translateY(-1px); }
.btn-beam:active { transform: translateY(0); }
.btn-beam::before {
  content: '';
  position: absolute;
  inset: -150%;
  background: conic-gradient(from 0deg, transparent 0deg 280deg, var(--primary) 320deg, var(--cyan) 350deg, transparent 360deg);
  animation: beam-spin 4.2s linear infinite;
  z-index: 0;
}
.btn-beam span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--btn-navy);
  color: #fff;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 14px 32px;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.btn-beam:hover span { background: #0a0f24; }
.btn-beam--pill span { padding: 10px 20px; font-size: 0.875rem; }
.btn-beam--block { display: flex; width: 100%; }
.btn-beam--block span { flex: 1; justify-content: center; }
.navbar__signup span { background: #192042; }
.navbar__signup:hover span { background: #22294f; }

.btn-white {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 14px 32px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}
.btn-white:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.7); }

.btn-submit {
  border: none;
  border-radius: 0.75rem;
  background: linear-gradient(120deg, var(--primary-glow), var(--primary));
  color: #fff;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 14px 0;
  width: 100%;
  box-shadow: 0 0 20px -10px var(--primary);
  transition: filter 0.2s ease;
}
.btn-submit:hover { filter: brightness(1.1); }
.btn-submit.is-submitted { cursor: default; }

/* The navbar is sticky (see .navbar below) — without this, jumping to any
   #anchor lands the target's top edge flush with the viewport top, which
   the sticky nav then sits directly over, hiding its eyebrow/heading. */
#rails, #networks, #flow, #governance-anchor, #security, #request {
  scroll-margin-top: 80px;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  background: #fff;
  color: var(--navy);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
.navbar.is-scrolled {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.navbar__inner {
  max-width: 1360px;
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.navbar__brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar__logo-img {
  display: block;
  height: 36px;
  width: auto;
}

.navbar__nav { display: none; align-items: center; gap: 24px; flex-shrink: 0; }
.navbar__nav a {
  font-size: 1rem;
  font-weight: 500;
  color: #001545 !important;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.navbar__nav a:hover { color: #5681f6 !important; }

.navbar__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar__login {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #001545;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.navbar__login:hover { color: #547EF0; }

/* Language switcher */
.lang { position: relative; display: none; }
.lang__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  border-radius: 0.5rem;
  padding: 6px 10px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #001545;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lang__btn:hover { border-color: rgba(84, 126, 240, 0.5); color: #547EF0; }
.lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 10;
  width: 160px;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 6px 0;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}
.lang__menu button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  padding: 8px 12px;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: #001545;
  transition: color 0.2s ease;
}
.lang__menu button:hover { color: #547EF0; }
.lang__menu button.is-active { color: #547EF0; }

/* Pre-existing edge case, unrelated to today's label changes: the full
   row (logo + 4 nav links + lang + Log in + signup pill) needs ~1171px
   of real content width, all as flex-shrink:0 siblings — at exactly
   1024px, where this used to switch on, .navbar__actions got pushed
   ~150px past the right edge. This one breakpoint is shared by both
   /index.html (English) and /es/index.html (Spanish, via the same
   stylesheet) — the Spanish labels are longer and need ~1347px, so the
   threshold is set for that, not the (lower) English requirement. */
@media (min-width: 1360px) { .navbar__nav { display: flex; } }
@media (min-width: 640px) { .lang { display: block; } .navbar__login { display: flex; } }

/* Below 640px the nav links, language switcher and "Log in" are already
   hidden. The signup pill duplicates the hero's own CTA one scroll away,
   so drop it here too and center the logo instead of shrinking things
   to fit two items. */
@media (max-width: 639.98px) {
  .navbar__inner { padding: 0 16px; justify-content: center; }
  .navbar__logo-img { height: 40px; }
  .navbar__actions { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  overflow: clip;
  padding: 80px 24px 96px;
}
.hero__glow { position: absolute; border-radius: 999px; filter: blur(140px); pointer-events: none; }
.hero__glow--a { top: -160px; left: 25%; width: 520px; height: 520px; background: rgba(86, 129, 246, 0.2); }
.hero__glow--b { top: -96px; right: 0; width: 420px; height: 420px; background: rgba(99, 102, 241, 0.25); }
.hero__grid {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1200px;
  pointer-events: none;
  background-image: linear-gradient(rgba(86, 129, 246, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(86, 129, 246, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 48px;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--slate-300);
}

.hero__title {
  margin-top: 32px;
  /* Each line is forced to one row (white-space: nowrap below) so it never
     breaks mid-phrase, which means below the 640px tier (where a fixed
     44px/48px is safe) the size has to shrink fluidly with viewport width
     or the longer line ("Crypto & Fiat Settlement") clips silently against
     .hero's overflow:clip instead of wrapping. */
  font-size: clamp(20px, 6.5vw, 38px);
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero__title span { display: block; white-space: nowrap; }

.hero__text {
  margin-top: 28px;
  max-width: 36rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate-300);
}

.hero__actions { margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Mobile stacks the globe above the headline (it's the more eye-catching
   element, and reads better as an opener than trailing below the CTAs) —
   order is reset back to source order once the two columns sit side by
   side at the 1024px breakpoint below. */
.hero__globe { position: relative; pointer-events: none; order: -1; margin-bottom: 8px; }
.globe-wrap {
  position: relative;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 660px;
}
.globe-glow {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(86, 129, 246, 0.2);
  filter: blur(130px);
}
.globe-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  contain: layout paint size;
  mask-image: radial-gradient(circle at 50% 45%, black 42%, transparent 68%), linear-gradient(to bottom, black 45%, transparent 82%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}
.globe-badge {
  position: absolute;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #f5fbff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0), 0 0 12px rgba(0, 0, 0, 0);
  animation: float-badge 6s ease-in-out infinite;
}

@media (min-width: 1024px) {
  .hero { padding-top: 112px; overflow: visible; }
  .hero__inner { grid-template-columns: repeat(12, 1fr); overflow: visible; }
  .hero__content { grid-column: span 7; position: relative; z-index: 10; }
  .hero__title { font-size: 48px; }
  /* position:static so .globe-wrap's absolute positioning below escapes up to
     .hero__inner instead of this column (which would otherwise become its
     positioning context just by having position:relative). */
  .hero__globe { grid-column: span 5; position: static; order: 0; }
  /* Anchored to .hero__inner (a real box) instead of this column — this column
     collapses to 0 height (its only child is absolutely positioned), so anchoring
     to it directly makes the globe's position drift with how much the hero
     paragraph wraps at different viewport widths. */
  .globe-wrap { position: absolute; top: -100px; right: -8%; width: 680px; max-width: none; transform: translateX(0%); }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hero__title { font-size: 44px; }
}
@media (max-width: 1023.98px) {
  .hero { padding: 56px 24px 72px; }
  /* Bleed slightly past the section's own side padding so the globe reads
     a little larger without needing a wider hero__content column. */
  .hero__globe { width: calc(100% + 32px); margin: 0 -16px 0; }
  .hero__title { line-height: 1.45; }
  .hero__actions { justify-content: center; gap: 28px; }
}

/* ==========================================================================
   Stats bar
   ========================================================================== */
.stats { border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: rgba(3, 5, 9, 0.4); }
.stats__inner { max-width: var(--container); margin: 0 auto; display: grid; grid-template-columns: 1fr; }
.stats__item { position: relative; padding: 48px 16px; transition: background-color 0.25s ease; }
.stats__item:hover { background: rgba(255, 255, 255, 0.03); }
.stats__item + .stats__item { border-top: 1px solid var(--border-soft); }
.stats__accent {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 16px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--primary), var(--cyan));
  transform-origin: left;
  transform: scaleX(1);
  transition: width 0.25s ease;
}
.stats__item:hover .stats__accent { width: 44px; }
.stats__value { display: flex; align-items: center; gap: 10px; font-size: 1.375rem; font-weight: 500; }
.stats__dot { flex-shrink: 0; }
/* "Licensed PSAD Register N-0089" is the longest stat and wraps awkwardly
   at phone widths — swap in the shorter label there. */
.stats__value-short { display: none; }
@media (max-width: 639.98px) {
  .stats__value-full { display: none; }
  .stats__value-short { display: inline; }
}
.stats__label { margin-top: 14px; font-size: 0.88rem; line-height: 1.6; color: var(--slate-300); }

@media (min-width: 640px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .stats__item { padding: 48px 32px; border-top: none !important; }
  .stats__item:nth-child(2n) { border-left: 1px solid var(--border-soft); }
}
@media (min-width: 1024px) {
  .stats__inner { grid-template-columns: repeat(4, 1fr); }
  .stats__item { border-left: 1px solid var(--border-soft); }
  .stats__item:first-child { border-left: none; }
}

/* ==========================================================================
   Section header + cards
   ========================================================================== */
.section { position: relative; max-width: var(--container); margin: 0 auto; padding: 64px 24px; overflow: hidden; }
.section--bleed { overflow: visible; }
.section__glow {
  position: absolute;
  inset: 25% 0 auto 0;
  height: 620px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(86, 129, 246, 0.18), transparent 70%);
  filter: blur(140px);
}
.section__glow--right { inset: 20% 0 auto auto; }
.section__head { position: relative; max-width: 42rem; }
/* line-height: 1 previously caused the dot misalignment bug — if Silka's own
   natural line-box (ascent+descent) is taller than 1x font-size, forcing
   line-height:1 clips/offsets it asymmetrically, shifting where the glyphs
   sit within the box. A generous explicit px line-height instead guarantees
   positive, symmetric half-leading (spec-mandated split top/bottom), so the
   text's visual center reliably lands on the box's geometric center — which
   is what flex align-items: center on the dot actually aligns to. */
.section__eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--primary); line-height: 16px; }
.section__eyebrow--center { text-align: center; }
.section__eyebrow--dot { display: flex; align-items: center; gap: 8px; }
.section__eyebrow--dot.section__eyebrow--center { justify-content: center; }
.section__title { margin-top: 16px; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.01em; line-height: 1.35; }
@media (min-width: 640px) { .section__title { font-size: 2.25rem; } }
.section__title--center { text-align: center; max-width: none; }
.section__subtitle { margin-top: 12px; font-size: 1rem; line-height: 1.7; color: var(--slate-300); }
.section__subtitle--center { text-align: center; }
.section__head--center { max-width: 42rem; margin: 0 auto; text-align: center; }
#networks .section__head { max-width: none; text-align: center; margin: 0 auto; }

.network-cta { margin-top: 110px; max-width: 42rem; margin-left: auto; margin-right: auto; text-align: center; }
.network-cta__text { font-size: 1.125rem; line-height: 1.6; color: #fff; }
.network-cta__btn { margin-top: 24px; }
.network-cta__tagline { margin-top: 32px; font-size: 0.8125rem; line-height: 1.9; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate-400); }

/* ==========================================================================
   Network marquee — two logo streams converging on a spinning ring emblem
   ========================================================================== */
.network-marquee {
  position: relative;
  margin-top: 110px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 128px;
}
.network-marquee__viewport { position: relative; height: 100%; overflow: hidden; }
.network-marquee__viewport--left::before,
.network-marquee__viewport--right::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.network-marquee__viewport--left::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.network-marquee__viewport--right::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.network-marquee__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
}
/* left stream flows rightward, toward the center emblem */
.network-marquee__track--in { animation: network-marquee-scroll 74s linear infinite reverse; right: 0; }
/* right stream flows leftward, toward the center emblem */
.network-marquee__track--out { animation: network-marquee-scroll 74s linear infinite; }
@keyframes network-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.network-marquee__scrim {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 220px;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 110px 100% at center, var(--bg) 0%, rgba(4, 7, 15, 0.6) 55%, transparent 78%);
}

.network-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 0 28px;
  border-radius: 1rem;
  border: 1px solid transparent;
  background: transparent;
  white-space: nowrap;
  opacity: 0.4;
  transition: opacity 0.25s ease;
}
.network-chip:hover { opacity: 0.95; }
.network-chip img { height: 24px; width: auto; max-width: 150px; object-fit: contain; }

.chain-emblem {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 280px;
  height: 400px;
  pointer-events: none;
}
.chain-emblem__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  /* Matches the chain's own 280x400 aspect ratio instead of the old
     450x500 (much rounder/wider), so the halo actually hugs the chain's
     elongated silhouette rather than reading as a generic vertical
     vignette behind it. */
  width: 320px;
  height: 440px;
  border-radius: 50%;
  opacity: 0.8;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(14, 165, 233, 0.2) 40%, transparent 72%);
  filter: blur(42px);
}
@media (prefers-reduced-motion: reduce) {
  .network-marquee__track { animation-duration: 120s; }
}
@media (max-width: 767.98px) {
  /* Both margins were sized to clear the chain emblem's tall vertical
     bleed (400px, absolutely positioned over the marquee row) — with the
     emblem hidden below, that reserved space is just dead air above and
     below the logo rows. */
  .network-marquee { margin-top: 56px; grid-template-columns: 1fr; height: auto; gap: 20px; }
  .network-cta { margin-top: 56px; }
  .network-marquee__viewport { height: 60px; }
  .chain-emblem { display: none; }
  /* Each viewport only fades its outward-facing edge (the other was meant
     to disappear into the center scrim next to the chain emblem). Stacked
     on mobile there's no scrim, so the inward edges need their own fade
     too or logos cut off hard mid-glyph. */
  .network-marquee__viewport--left::after,
  .network-marquee__viewport--right::before {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 60px;
    z-index: 2;
    pointer-events: none;
  }
  .network-marquee__viewport--left::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
  .network-marquee__viewport--right::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
  /* :hover never fires on touch, so the 0.4 resting opacity meant for
     desktop (full brightness only on mouseover) left logos permanently
     washed out on mobile. */
  .network-chip { opacity: 0.7; }
}

/* Cards carousel — breaks out to full viewport width for visual contrast with the contained sections above/below */
.cards-carousel {
  position: relative;
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0 24px;
}
@media (min-width: 1024px) { .cards-carousel { padding: 0 48px; } }
.cards-carousel__viewport { position: relative; flex: 1; overflow: hidden; }
.cards-carousel__viewport::before,
.cards-carousel__viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 48px;
  pointer-events: none;
  z-index: 2;
}
.cards-carousel__viewport::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.cards-carousel__viewport::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.cards-carousel__nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: #ffffff;
  color: #547EF0;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.cards-carousel__nav:hover { border-color: #547EF0; box-shadow: 0 0 8px -4px rgba(84, 126, 240, 0.45); }
.cards-carousel__nav:disabled { opacity: 0.35; cursor: default; }
.cards-carousel__nav:disabled:hover { border-color: var(--card-border); box-shadow: none; }

.cards-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.cards-carousel__dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--card-border);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.cards-carousel__dot--active { width: 20px; background: var(--primary); }

.cards {
  position: relative;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px;
  margin: -4px;
}
.cards::-webkit-scrollbar { display: none; }

.card {
  position: relative;
  overflow: hidden;
  border-radius: 1.5rem;
  border: 1px solid var(--card-border);
  background: rgba(255, 255, 255, 0.03);
  padding: 32px;
  /* A vw-based width ignores how much room the two 40px nav buttons take
     out of the carousel row, so on narrow phones the card ended up wider
     than the scroll viewport actually left for it — only part of the
     card was ever on-screen, with the rest scrolled off and its text
     clipped by .card's own overflow:hidden. 100% of the (already
     viewport-constrained) track means exactly one full card per screen,
     matching perView() === 1 in the carousel JS below. */
  flex: 0 0 100%;
  scroll-snap-align: start;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
@media (min-width: 768px) { .card { flex-basis: calc((100% - 40px) / 3); } }
/* Below 768px the card is full-width (see flex-basis:100% above), but the
   carousel's own side padding, nav buttons and gaps were all sized for
   desktop and ate a third of the screen before the card even started —
   combined with the card's own 32px padding, the text column ended up
   uncomfortably narrow. Trim all three so the card actually uses the
   width it's now entitled to. */
@media (max-width: 767.98px) {
  /* Move the prev/next buttons below the dots instead of flanking (or
     overlaying) the card — .cards-carousel is dissolved with
     display:contents so its own children (the buttons + viewport) join
     the section's grid directly, alongside .cards-carousel__dots, and
     get freely reordered via grid-template-areas regardless of DOM
     order. Keyed off :has(.cards-carousel) rather than an id, so it
     still matches even if a cached copy of the page HTML predates a
     future id/markup change here — only the CSS/JS need to be fresh. */
  .section--bleed:has(.cards-carousel) { display: grid; grid-template-columns: 1fr 1fr; row-gap: 20px; grid-template-areas: "head head" "viewport viewport" "dots dots" "navprev navnext"; }
  .section--bleed:has(.cards-carousel) > .section__head { grid-area: head; }
  .section--bleed:has(.cards-carousel) .cards-carousel { display: contents; }
  .section--bleed:has(.cards-carousel) .cards-carousel__viewport { grid-area: viewport; }
  .section--bleed:has(.cards-carousel) .cards-carousel__dots { grid-area: dots; margin-top: 0; }
  .cards-carousel__nav { position: static; }
  .cards-carousel__nav--prev { grid-area: navprev; justify-self: end; margin-right: 8px; }
  .cards-carousel__nav--next { grid-area: navnext; justify-self: start; margin-left: 8px; }
  /* Nav buttons no longer need to hug the card's edges (they're their own
     row below now), so the carousel can go back to a normal section-width
     side margin instead of the 8px it needed to make room for them. */
  .cards-carousel { padding: 0 24px; }
  .card { padding: 22px; }
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(86, 129, 246, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
@property --card-beam-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes card-beam-spin { to { --card-beam-angle: 360deg; } }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--card-beam-angle), transparent 0deg 260deg, var(--cyan) 300deg, var(--primary) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.card:hover {
  border-color: rgba(86, 129, 246, 0.4);
  box-shadow: 0 0 40px -14px rgba(86, 129, 246, 0.4);
}
.card:hover::before { opacity: 1; }
.card:hover::after { opacity: 1; animation: card-beam-spin 3s linear infinite; }
.card__num { position: relative; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.2em; color: rgba(86, 129, 246, 0.8); }
.card__title { position: relative; margin-top: 20px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; display: flex; align-items: center; gap: 8px; }
.card__body { position: relative; margin-top: 12px; font-size: 0.875rem; line-height: 1.7; color: var(--slate-300); }

/* ==========================================================================
   Flow (6-step tabs + inspector)
   ========================================================================== */
/* align-items: start (not center) — the tabs column's height changes as each
   step's description expands/collapses on hover, and centering would make the
   inspector card visibly shift up/down every time that height changed. */
.flow { position: relative; margin-top: 56px; display: grid; gap: 40px; align-items: start; }
.flow__tabs { position: relative; }
.flow__rail { position: absolute; z-index: 0; top: 8px; bottom: 8px; left: 16px; width: 1px; background: rgba(255, 255, 255, 0.1); }
.flow__rail-progress {
  position: absolute;
  z-index: 0;
  left: 16px;
  width: 1px;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  transition: top 0.4s ease, height 0.4s ease;
}

.flow__tab {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 20px;
  border-radius: 1rem;
  padding: 16px 16px 16px 0;
  text-align: left;
  background: none;
  border: none;
  color: inherit;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.flow__tab:hover { opacity: 1; }
.flow__tab.is-active { opacity: 1; }

.flow__step-num {
  position: relative;
  z-index: 1;
  margin-top: 2px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(0, 21, 69, 0.12);
  background: #ffffff;
  font-size: 11px;
  font-weight: 500;
  color: #5681f6;
  transition: all 0.3s ease;
}
.flow__tab.is-active .flow__step-num {
  border-color: var(--primary);
  background: #ffffff;
  color: var(--primary);
  box-shadow: 0 0 22px -2px var(--primary);
}

.flow__step-title { display: block; font-size: 1rem; font-weight: 500; color: var(--slate-400); }
.flow__tab.is-active .flow__step-title { color: #fff; }
@media (min-width: 640px) { .flow__step-title { font-size: 1.125rem; } }
/* grid-template-rows 0fr -> 1fr (not max-height) so the expand/collapse
   duration always matches the real content height — a fixed max-height
   guess either overshoots (long dead tail after content is fully shown)
   or undershoots, both of which read as an abrupt, uneven motion. */
.flow__step-desc {
  display: grid;
  grid-template-rows: 0fr;
  max-width: 28rem;
  opacity: 0;
  transition: grid-template-rows 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease, margin-top 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.flow__step-desc-inner {
  overflow: hidden;
  min-height: 0;
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--slate-400);
}
.flow__tab.is-active .flow__step-desc { margin-top: 6px; grid-template-rows: 1fr; opacity: 1; }

.flow__inspector {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: rgba(3, 9, 30, 0.9);
  backdrop-filter: blur(30px);
  box-shadow: 0 25px 50px -12px rgba(86, 129, 246, 0.15);
}
.flow__inspector::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--card-beam-angle), transparent 0deg 260deg, var(--cyan) 300deg, var(--primary) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: card-beam-spin 7s linear infinite;
  pointer-events: none;
}
.flow__inspector-header { background: #fff; padding: 28px 32px 24px; }
.flow__inspector-head { display: flex; align-items: center; justify-content: space-between; }
.flow__inspector-step {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--primary);
}
.flow__inspector-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--emerald); }
.flow__inspector-title { margin-top: 20px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; color: var(--navy); }
.flow__inspector-detail { margin-top: 8px; font-size: 0.875rem; line-height: 1.7; color: rgba(0, 28, 51, 0.65); }
.flow__inspector-body { padding: 24px 32px 32px; }
.flow__inspector-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.flow__inspector-badge {
  border-radius: 999px;
  border: 1px solid rgba(86, 129, 246, 0.4);
  background: #ffffff;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #03091c;
}
.flow__inspector-params { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
.flow__inspector-param {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.03);
  padding: 12px 16px;
}
.flow__inspector-param dt { font-size: 0.75rem; letter-spacing: 0.02em; color: var(--slate-400); }
.flow__inspector-param dd { margin: 0; font-size: 0.75rem; color: var(--primary); }

@media (min-width: 1024px) { .flow { grid-template-columns: repeat(12, 1fr); } .flow__tabs { grid-column: span 6; } .flow__inspector-wrap { grid-column: span 6; } }

/* ==========================================================================
   Security grid
   ========================================================================== */
.security-grid { position: relative; margin-top: 48px; display: grid; gap: 20px; }
@media (min-width: 1024px) { .security-grid { grid-template-columns: repeat(2, 1fr); } }
.security-card { border-radius: 1.5rem; border: 1px solid var(--card-border); background: rgba(255, 255, 255, 0.03); padding: 32px; transition: border-color 0.2s ease; }
.security-card h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.4; }
.security-card ul { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.security-card li { display: block; }
/* Dot lives in its own flex row with just the title (generous explicit
   line-height for the same symmetric-half-leading reason as the eyebrow dot
   above), instead of being flex-centered against the whole li — which
   includes the body text and was centering against the wrong box. */
.security-card__title-row { display: flex; align-items: center; gap: 16px; line-height: 20px; }
.security-card__dot { flex-shrink: 0; width: 6px; height: 6px; border-radius: 999px; }
.security-card li strong { font-size: 0.875rem; font-weight: 500; }
.security-card__body { margin-top: 4px; display: block; padding-left: 22px; font-size: 0.875rem; line-height: 1.7; color: var(--slate-400); }

/* Blue = technical security team, emerald = independent compliance authority —
   the color split itself echoes the section's "strict segregation" message. */
.security-card--blue:hover { border-color: rgba(86, 129, 246, 0.4); }
.security-card--blue .security-card__dot { background: var(--primary); box-shadow: 0 0 10px var(--primary); }
.security-card--white:hover { border-color: rgba(255, 255, 255, 0.4); }
.security-card--white .security-card__dot { background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); }

/* Faint technical grid behind the section — echoes the hero's grid at much
   lower intensity, for the "IT infrastructure" half of the section's theme. */
.section__grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(86, 129, 246, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(86, 129, 246, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
}
.section__glow--white { background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1), transparent 70%); }

/* ==========================================================================
   Request form
   ========================================================================== */
.request { position: relative; padding: 64px 24px 96px; overflow: hidden; }
/* Finery Markets' actual "side lighting" technique: two large, rotated,
   heavily-blurred solid ellipses pinned to opposite corners — not a
   radial-gradient. Recolored to our blue/emerald pairing. */
.request__decor {
  position: absolute;
  width: 660px;
  height: 400px;
  border-radius: 100%;
  filter: blur(100px);
  opacity: 0.5;
  transform: rotate(16deg);
  pointer-events: none;
}
.request__decor--left { left: 0; top: 0; background: var(--primary); }
.request__decor--right { right: 0; bottom: 0; background: var(--primary); }
.request__card {
  position: relative;
  max-width: 64rem;
  margin: 40px auto 0;
  border-radius: 60px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(15px);
  padding: 32px;
}
@media (min-width: 640px) { .request__card { padding: 40px 48px; } }
@media (max-width: 639.98px) {
  .request { padding: 56px 16px 72px; }
  .request__card { padding: 22px; border-radius: 32px; }
  /* Both blobs are sized (660x400, 100px blur) for a section wide enough
     that each one's saturated core actually lands inside the visible
     area — on a ~360-400px-wide screen almost all of that width is
     outside the viewport, so only the very faint, heavily-blurred tail
     of each shows. Scaled down and less blurred, so the color is still
     concentrated enough to read as intentional side lighting here. */
  .request__decor { width: 420px; height: 300px; filter: blur(65px); opacity: 0.6; }
  /* top:0/bottom:0 pins each blob to the section's own extremities, which
     on desktop happen to sit close to the card either way — but on mobile
     the heading stack pushes the card ~300px down, and the card itself
     runs long (every field stacks), so both blobs land nowhere near it:
     one behind the heading, one deep in the bottom padding. Nudge them
     down/up toward the card's actual top/bottom edge instead. left/right
     stay at 0 (from the base rule) — flush against the section's own
     edges, same as desktop. */
  .request__decor--left { top: 180px; }
  .request__decor--right { bottom: 50px; }
}
.request__heading {
  background: linear-gradient(120deg, #ffffff, #94a3b8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.request__subheading { color: var(--slate-400); font-weight: 400; }
.request__label { text-align: center; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; color: var(--slate-400); }

.request__form { margin-top: 32px; display: grid; grid-template-columns: 1fr; gap: 35px; }
/* Honeypot: kept in the layout and focusable-looking to bots that check
   for display:none/visibility:hidden, but moved off-screen for real
   users — most spam bots fill every field they can find, humans never
   see or touch this one, so a filled value flags the submission as spam. */
.field--website { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (min-width: 640px) {
  /* 6-column base grid: row 1 is two halves (Name / Entity), row 2 is
     three thirds (Email / Contact / Entity Type) — matches the reference. */
  .request__form { grid-template-columns: repeat(6, 1fr); gap: 35px 20px; }
  .field--half { grid-column: span 3; }
  .field--third { grid-column: span 2; }
}
.field--full { grid-column: 1 / -1; }
.field input, .field select, .field textarea {
  width: 100%;
  height: 52px;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.08);
  padding: 0 16px;
  font-size: 0.875rem;
  color: var(--fg);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { background: rgba(255, 255, 255, 0.1); }
.field input::placeholder, .field textarea::placeholder { color: rgba(255, 255, 255, 0.52); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.field textarea {
  height: auto;
  min-height: 110px;
  padding: 14px 16px;
  resize: vertical;
  line-height: 1.6;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.field select:invalid { color: rgba(255, 255, 255, 0.52); }
.field select option { background: #ffffff; color: var(--navy); }
.field select option[value=""] { color: var(--slate-500); }

.request__submit {
  display: block;
  width: 50%;
  margin: 0 auto;
  border: none;
  border-radius: 0.75rem;
  background: #ffffff;
  color: var(--navy);
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 14px 0;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.request__submit:hover { box-shadow: 0 8px 12px -3px rgba(0, 0, 0, 0.2); background: rgba(255, 255, 255, 0.7); }
.request__submit.is-submitted { cursor: default; }
@media (max-width: 639.98px) { .request__submit { width: 100%; } }

.request__notice { margin-top: 24px; text-align: center; font-size: 11px; line-height: 1.7; color: var(--slate-400); }
.request__notice a { color: var(--slate-300); text-decoration: underline; text-underline-offset: 2px; }
.request__notice a:hover { color: var(--primary); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { border-top: 1px solid #e2e8f0; background: #fff; color: #0f172a; }
.footer a { color: #475569; transition: color 0.2s ease; }
.footer a:hover { color: #0f172a; }

.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 64px 24px 48px;
  display: grid;
  gap: 40px;
}
@media (min-width: 768px) { .footer__inner { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; } }
@media (max-width: 767.98px) {
  .footer__inner { text-align: center; }
  .footer__col--brand { margin: 0 auto; }
}
.footer__col--brand { max-width: 22rem; }
.footer__logo-img { display: block; height: 38px; width: auto; }
@media (max-width: 767.98px) { .footer__logo-img { margin: 0 auto; } }
.footer__about { margin-top: 16px; font-size: 0.875rem; line-height: 1.8; color: #64748b; }
.footer__heading { font-size: 13px; font-weight: 500; letter-spacing: 0.2em; color: #0f172a; }
.footer__list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 500; color: #475569; }
.footer__list a:hover { color: #0f172a; }

.footer__divider {
  margin: 0 auto;
  background: linear-gradient(to right, transparent, #001545, transparent);
  opacity: 0.5;
}

.footer__certs-bar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 40px 0;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}
.footer__certs-label {
  margin-bottom: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #64748b;
}
.footer__certs-viewport { max-width: var(--container); margin: 0 auto; }
.footer__certs-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 36px 56px;
}
.footer__cert-logo {
  display: block;
  height: 42px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.footer__cert-logo:hover { filter: grayscale(0); opacity: 1; }

.footer__bottom-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
@media (min-width: 768px) { .footer__bottom-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 40px; } }
.footer__copy { font-size: 12px; color: var(--slate-400); }
.footer__closing { font-size: 12px; color: var(--slate-400); }