/* ============================================================
   Global Exchange — Abyssal terminal theme
   Palette & type scale from the Auros-style design tokens
   ============================================================ */

:root {
  /* Colors */
  --color-liquid-abyss: #012624;
  --color-liquid-deep: #011d1c;
  --color-liquid-kelp: #003734;
  --color-liquid-mist: #edfffe;
  --color-platinum: #ffffff;
  --color-silver-mist: #bbc7c6;
  --color-ash: #f2f2f2;
  --color-slate-deep: #707777;
  --color-lavender-phosphor: #fde9ff;
  --gradient-bioluminescent: linear-gradient(90deg, rgb(0, 130, 124) 0%, rgb(203, 255, 252) 100%);
  --gradient-aurora: linear-gradient(90deg, rgb(203, 255, 252) 0%, rgb(237, 255, 254) 26.25%, rgb(255, 253, 250) 47.57%, rgb(250, 209, 255) 88.96%);

  /* Typography */
  --font-main: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --page-max-width: 1440px;
  --content-width: 1160px;

  /* Radius */
  --radius-cards: 16px;
  --radius-buttons: 6px;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-silver-mist);
  background: var(--color-liquid-abyss);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

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

/* ---------- Typography ---------- */
h1, h2, h3 { font-weight: 500; color: var(--color-platinum); }

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-silver-mist);
  margin-bottom: 20px;
}

.section-title {
  font-size: clamp(34px, 4.2vw, 61px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 24px;
}

.section-sub {
  font-size: 20px;
  line-height: 1.4;
  max-width: 600px;
  margin-bottom: 48px;
  color: var(--color-silver-mist);
}

.grad-text {
  background: var(--gradient-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-buttons);
  font-family: var(--font-main);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 22px;
  cursor: pointer;
  border: none;
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-gradient {
  background: var(--gradient-aurora);
  color: #062220;
}
.btn-gradient:hover { opacity: .92; }

.btn-ghost {
  background: transparent;
  color: var(--color-platinum);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.06); }

.btn-lg { padding: 17px 28px; }

/* 3D button — real depth: a soft-edged body layer under a convex face.
   Layers (bottom → top): ::after = thickness slab, ::before = gradient
   face, then the button's own content. */
.btn-3d {
  position: relative;
  background: transparent;
  font-weight: 700;
  font-size: 15.4px;
  transition: transform .16s ease, box-shadow .16s ease, opacity .18s ease;
  box-shadow:
    0 5px 10px rgba(0, 0, 0, 0.14),
    0 10px 20px rgba(0, 0, 0, 0.10);
}
.btn-3d > * { position: relative; z-index: 3; }

/* convex face: light falls from above, lower edge curves away */
.btn-3d::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: var(--gradient-aurora);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1.5px 3px rgba(1, 38, 36, 0.12);
}

/* the button's "thickness" — a darker slab peeking out below the face */
.btn-3d::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fa39e 0%, #c6a9cc 100%);
  transform: translateY(2.5px);
  filter: blur(0.5px);
  transition: transform .16s ease;
}

.btn-3d:hover {
  transform: translateY(-0.5px);
  opacity: 1;
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.15),
    0 11px 22px rgba(0, 0, 0, 0.11);
}
.btn-3d:hover::after { transform: translateY(3px); }

.btn-3d:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 5px rgba(0, 0, 0, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.08);
}
.btn-3d:active::after { transform: translateY(0.5px); }

.hero-verify {
  margin-top: 28px;
  color: #0d2b57;
  perspective: 300px;
}
.hero-verify svg {
  animation: spinY 3.6s linear infinite;
  transform-style: preserve-3d;
}
@keyframes spinY {
  to { transform: rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-verify svg { animation: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.site-header.scrolled {
  background: rgba(1, 29, 28, 0.86);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-inner {
  max-width: var(--page-max-width);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-text {
  font-size: 33px;
  font-weight: 650;
  color: var(--color-platinum);
  letter-spacing: -0.01em;
}
.logo-text em {
  font-style: normal;
  font-weight: 400;
  background: linear-gradient(90deg, #cbfffc 0%, #edfffe 35%, #fad1ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-silver-mist);
  transition: color .18s ease;
}
.main-nav a:hover { color: var(--color-platinum); }

.header-actions { display: flex; align-items: center; gap: 20px; }

.lang-switch { position: relative; }

.lang-current {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-buttons);
  padding: 9px 12px;
  font-family: var(--font-main);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--color-platinum);
  cursor: pointer;
  transition: background-color .18s ease;
}
.lang-current:hover { background: rgba(255, 255, 255, 0.06); }
.lang-current svg { transition: transform .2s ease; }
.lang-switch.open .lang-current svg { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  list-style: none;
  background: rgba(1, 29, 28, 0.97);
  backdrop-filter: blur(12px);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 16px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.lang-switch.open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 9px 12px;
  font-family: var(--font-main);
  font-size: 13px;
  text-align: left;
  color: var(--color-silver-mist);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.lang-menu button:hover { background: rgba(255, 255, 255, 0.07); color: var(--color-platinum); }
.lang-menu button.active { color: var(--color-platinum); }
.lang-menu button.active .lang-code { color: #cbfffc; }

.lang-code {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--color-slate-deep);
}

.burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.burger span {
  display: block;
  height: 1.5px;
  width: 22px;
  margin: 0 auto;
  background: var(--color-platinum);
  transition: transform .25s ease, opacity .25s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 160px 0 80px;
  overflow: hidden;
}

#sphereCanvas {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-58%);
  width: min(66vw, 900px);
  height: min(66vw, 900px);
  opacity: 1;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 2; }

.hero-title {
  font-size: clamp(42px, 6.6vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 32px;
  max-width: 14em;
}

.hero-sub {
  font-size: 20px;
  line-height: 1.4;
  max-width: 560px;
  margin-bottom: 40px;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }

.hero-note {
  font-size: 13px;
  color: var(--color-slate-deep);
  max-width: 520px;
}

/* Stats */
.stats-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 96px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.stat-num {
  font-size: clamp(36px, 3.4vw, 52px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-lavender-phosphor);
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-liquid-mist);
}

/* ---------- Drifting background glows ----------
   Two soft light blobs slowly floating across the whole page:
   one bright teal, one dimmer lavender. Fixed to the viewport,
   blended with `screen` so they read as light over any section. */
.bg-glow {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 1;
  will-change: transform;
}

.bg-glow-1 {
  width: 62vmax;
  height: 62vmax;
  margin: -31vmax 0 0 -31vmax;
  background: radial-gradient(closest-side,
    rgba(46, 196, 182, 0.34) 0%,
    rgba(0, 130, 124, 0.17) 40%,
    rgba(1, 38, 36, 0) 70%);
  animation: glowDrift1 48s ease-in-out infinite alternate;
}

.bg-glow-2 {
  width: 48vmax;
  height: 48vmax;
  margin: -24vmax 0 0 -24vmax;
  background: radial-gradient(closest-side,
    rgba(250, 209, 255, 0.16) 0%,
    rgba(250, 209, 255, 0.07) 45%,
    rgba(1, 38, 36, 0) 70%);
  animation: glowDrift2 36s ease-in-out infinite alternate;
}

@keyframes glowDrift1 {
  0%   { transform: translate(18vw, 78vh) scale(1); }
  25%  { transform: translate(68vw, 62vh) scale(1.12); }
  50%  { transform: translate(84vw, 24vh) scale(0.94); }
  75%  { transform: translate(46vw, 10vh) scale(1.08); }
  100% { transform: translate(12vw, 32vh) scale(1); }
}

@keyframes glowDrift2 {
  0%   { transform: translate(85vw, 14vh) scale(1); }
  30%  { transform: translate(54vw, 36vh) scale(1.14); }
  55%  { transform: translate(20vw, 18vh) scale(0.9); }
  80%  { transform: translate(32vw, 72vh) scale(1.1); }
  100% { transform: translate(76vw, 86vh) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-glow { animation: none; }
}

/* ---------- Bioluminescent glow ---------- */
.hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 1100px;
  height: 900px;
  transform: translateX(-70%);
  background: radial-gradient(closest-side,
    rgba(46, 196, 182, 0.30) 0%,
    rgba(0, 130, 124, 0.16) 38%,
    rgba(1, 38, 36, 0) 72%);
  pointer-events: none;
}

/* ---------- Sections ---------- */
.section { padding: 120px 0; }

.section-deep {
  background: var(--color-liquid-deep);
}

/* ---------- About ---------- */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-bottom: 80px;
}
.about-text p + p { margin-top: 20px; }
.about-text { font-size: 18px; line-height: 1.55; }

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  background: var(--color-liquid-kelp);
  border-radius: var(--radius-cards);
  padding: 36px;
}

.pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-buttons);
  background: rgba(3, 81, 75, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-liquid-mist);
  margin-bottom: 24px;
}

.pillar h3, .adv h3 {
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 12px;
}
.pillar p, .adv p { font-size: 16px; color: var(--color-silver-mist); }

/* ---------- Cards: 3D tilt, sheen & glow ---------- */
.pillars, .adv-grid, .steps, .dir-cards, .geo-grid { perspective: 1100px; }

.pillar, .adv, .step, .dir-col, .geo-city {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 30px rgba(0, 0, 0, 0.25);
  transition: transform .18s ease-out, box-shadow .4s ease;
}

/* subtle top-left light + base tone per card family */
.pillar, .adv {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
    var(--color-liquid-kelp);
}
.dir-cards .dir-col {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 42%),
    var(--color-liquid-kelp);
}
.steps .step {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%),
    var(--color-liquid-abyss);
}
.geo-grid .geo-city:not(.geo-more) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 42%),
    var(--color-liquid-kelp);
}

.pillar::before, .adv::before, .step::before, .dir-col::before, .geo-city::before {
  /* cursor-following sheen */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(203, 255, 252, 0.13), rgba(203, 255, 252, 0) 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.pillar:hover::before, .adv:hover::before, .step:hover::before,
.dir-col:hover::before, .geo-city:hover::before { opacity: 1; }

.pillar:hover, .adv:hover, .step:hover, .dir-col:hover, .geo-city:hover {
  box-shadow:
    inset 0 0 0 1px rgba(203, 255, 252, 0.18),
    0 24px 60px rgba(0, 0, 0, 0.4),
    0 0 46px rgba(64, 214, 200, 0.14);
}

/* content lifts on its own layer while the card tilts */
.pillar .pillar-icon, .pillar h3, .pillar p,
.adv h3, .adv p,
.step .step-num, .step h3, .step p,
.dir-col .dir-col-label, .dir-col .asset-list,
.geo-city > span {
  transition: transform .4s ease;
}
.pillar:hover .pillar-icon { transform: translateZ(48px) scale(1.06); }
.pillar:hover h3, .adv:hover h3, .step:hover h3 { transform: translateZ(32px); }
.pillar:hover p, .adv:hover p, .step:hover p { transform: translateZ(18px); }
.step:hover .step-num { transform: translateZ(26px); }
.dir-col:hover .dir-col-label { transform: translateZ(26px); }
.dir-col:hover .asset-list { transform: translateZ(14px); }
.geo-city:hover > span { transform: translateZ(16px); }

.pillar .pillar-icon {
  background: linear-gradient(135deg, rgba(0, 130, 124, 0.6), rgba(3, 81, 75, 0.35));
  box-shadow:
    inset 0 0 0 1px rgba(203, 255, 252, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
  .pillar, .adv, .step, .dir-col, .geo-city,
  .pillar::before, .adv::before, .step::before, .dir-col::before, .geo-city::before,
  .pillar .pillar-icon, .pillar h3, .pillar p,
  .adv h3, .adv p, .step .step-num, .step h3, .step p,
  .dir-col .dir-col-label, .dir-col .asset-list, .geo-city > span { transition: none; }
  .pillar:hover .pillar-icon, .pillar:hover h3, .pillar:hover p,
  .adv:hover h3, .adv:hover p, .step:hover .step-num, .step:hover h3, .step:hover p,
  .dir-col:hover .dir-col-label, .dir-col:hover .asset-list, .geo-city:hover > span { transform: none; }
}

/* ---------- Process ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.step {
  border-radius: var(--radius-cards);
  padding: 36px 28px;
  background: var(--color-liquid-abyss);
}

.step-num {
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--color-lavender-phosphor);
  margin-bottom: 48px;
}

.step h3 {
  font-size: 20px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.step p { font-size: 15px; }

/* ---------- Advantages ---------- */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* ---------- Directions ---------- */
.dir-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: start;
}

.dir-notes li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: var(--color-liquid-mist);
}
.dir-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-bioluminescent);
}

.dir-cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.dir-col { padding: 28px; }

.dir-col-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-silver-mist);
  margin-bottom: 20px;
}

.asset-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-size: 15px;
  color: var(--color-liquid-mist);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.asset-list li:last-child { border-bottom: none; }

.asset-tick {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--color-lavender-phosphor);
  background: rgba(253, 233, 255, 0.08);
  border-radius: var(--radius-buttons);
  padding: 4px 8px;
  min-width: 52px;
  text-align: center;
}

.dir-swap { color: var(--color-silver-mist); }

/* ---------- Geography ---------- */
/* Panel: gradient card with a luminous "planet" bloom and a
   dotted Europe map on the right, text and CTA on the left. */
.geo-panel {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(120% 160% at 10% 112%, rgba(237, 255, 254, 0.14) 0%, rgba(237, 255, 254, 0) 46%),
    linear-gradient(112deg, #01221f 0%, #06423d 46%, #0d5f57 76%, #147065 100%);
  padding: 110px 72px;
  min-height: 560px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.geo-panel-text {
  position: relative;
  z-index: 2;
  max-width: 470px;
}
.geo-panel-text .section-sub { margin-bottom: 40px; }

/* Half-lit planet image: anchored so its lit rim curves across the
   middle of the panel; the rest bleeds beyond the edges and is
   cropped by the panel's overflow. */
.geo-panel-map {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}
.geo-panel-map img {
  position: absolute;
  top: 50%;
  left: 47%;
  transform: translateY(-50%);
  height: 155%;
  width: auto;
  max-width: none;
}

.geo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.geo-city {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--color-liquid-kelp);
  border-radius: var(--radius-cards);
  padding: 22px 24px;
  font-size: 16px;
  color: var(--color-liquid-mist);
}

.geo-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient-bioluminescent);
  flex-shrink: 0;
}

.geo-more {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--color-slate-deep);
  justify-content: center;
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 12px; }

.faq-item {
  background: var(--color-liquid-abyss);
  border-radius: var(--radius-cards);
  overflow: hidden;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  padding: 24px 28px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-platinum);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-icon {
  position: relative;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.faq-icon::before, .faq-icon::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 0;
  width: 14px;
  height: 1.5px;
  background: var(--color-liquid-mist);
  transition: transform .25s ease;
}
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: rotate(0); }

.faq-item p {
  padding: 0 28px 24px;
  max-width: 640px;
  color: var(--color-silver-mist);
}

/* ---------- Contacts / CTA ---------- */
.cta-panel {
  position: relative;
  overflow: hidden;
  background: var(--color-liquid-deep);
  border-radius: var(--radius-cards);
  padding: 96px 64px;
  text-align: center;
}
.cta-panel::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -55%;
  width: 900px;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side,
    rgba(46, 196, 182, 0.22) 0%,
    rgba(0, 130, 124, 0.10) 42%,
    rgba(1, 29, 28, 0) 72%);
  pointer-events: none;
}
.cta-panel > * { position: relative; }
.cta-panel .section-sub { margin-left: auto; margin-right: auto; }

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 56px;
}
.cta-actions .btn { text-transform: none; letter-spacing: 0.02em; font-size: 15px; }

.cta-meta {
  display: flex;
  justify-content: center;
  gap: 80px;
  flex-wrap: wrap;
}

.cta-meta-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-slate-deep);
  margin-bottom: 8px;
}
.cta-meta-value { color: var(--color-liquid-mist); font-size: 15px; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-liquid-deep);
  padding: 96px 0 48px;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
}

.footer-brand p {
  margin-top: 16px;
  max-width: 340px;
  font-size: 14px;
}

.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.footer-nav a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-silver-mist);
  transition: color .18s ease;
}
.footer-nav a:hover { color: var(--color-platinum); }

.footer-note {
  grid-column: 1 / -1;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
  color: var(--color-slate-deep);
}
.footer-note p { max-width: 720px; }
.footer-copy { margin-top: 16px; }

/* ---------- Decorative SVG animations ---------- */
.deco { display: block; width: 100%; height: auto; }

/* shared: pulsing halo stroke */
.halo {
  animation: haloPulse 3.4s ease-in-out infinite;
}
@keyframes haloPulse {
  0%, 100% { opacity: .25; }
  50% { opacity: .9; }
}

/* shared: glowing travelling dots */
.pulse-dot {
  filter: drop-shadow(0 0 6px rgba(203, 255, 252, 0.9));
}
.pulse-dot-pink {
  filter: drop-shadow(0 0 6px rgba(250, 209, 255, 0.9));
}

/* Exchange flow (process section) */
.flow-wrap {
  max-width: 960px;
  margin: 0 auto 64px;
}
.ticks {
  animation: tickFlow 1.6s linear infinite;
}
@keyframes tickFlow {
  to { stroke-dashoffset: -18; }
}

/* Deal node instrument (about section) */
.orbit-wrap {
  max-width: 400px;
  margin-top: 56px;
}
.deal-svg text {
  font-family: var(--font-main);
  font-weight: 500;
}

/* depth: soft shadows + glow under the core and party badges */
.deal-svg .core-3d {
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 16px rgba(64, 214, 200, 0.3));
}
.deal-svg .badge-3d,
.flow-svg .badge-3d {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

.tick-ring, .tick-ring-2, .arc-a, .arc-b, .sweep {
  transform-origin: 210px 210px;
  animation: dealSpin linear infinite;
}
.tick-ring   { animation-duration: 120s; }
.tick-ring-2 { animation-duration: 90s; animation-direction: reverse; }
.arc-a       { animation-duration: 22s; }
.arc-b       { animation-duration: 30s; animation-direction: reverse; }
.sweep       { animation-duration: 8s; }
@keyframes dealSpin {
  to { transform: rotate(360deg); }
}

.ripple {
  fill: none;
  stroke: rgba(203, 255, 252, 0.5);
  stroke-width: 1;
  animation: rippleOut 5s ease-out infinite;
}
.ripple-2 { animation-delay: 2.5s; }
@keyframes rippleOut {
  0%   { r: 48; opacity: .7; }
  60%  { r: 96; opacity: 0; }
  100% { r: 96; opacity: 0; }
}

.check {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  filter: drop-shadow(0 0 5px rgba(203, 255, 252, 0.7));
  animation: checkDraw 6s ease-in-out infinite;
}
@keyframes checkDraw {
  0%   { stroke-dashoffset: 36; opacity: 1; }
  22%  { stroke-dashoffset: 0; }
  72%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 0; }
  83%  { stroke-dashoffset: 36; opacity: 0; }
  100% { stroke-dashoffset: 36; opacity: 1; }
}

/* City constellation (geography section) */
.geo-net-wrap { margin-bottom: 48px; }
.node .ring {
  fill: none;
  stroke: rgba(203, 255, 252, 0.6);
  stroke-width: 1;
  animation: ringExpand 3.6s ease-out infinite;
  animation-delay: var(--d, 0s);
}
@keyframes ringExpand {
  0% { r: 3; opacity: .8; }
  70% { r: 15; opacity: 0; }
  100% { r: 15; opacity: 0; }
}

/* Directions swap arrow shimmer */
.dir-swap svg {
  animation: swapNudge 3s ease-in-out infinite;
}
@keyframes swapNudge {
  0%, 100% { transform: translateX(0); opacity: .7; }
  50% { transform: translateX(4px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .deco *, .dir-swap svg { animation: none !important; }
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .burger { display: flex; }

  .main-nav.open {
    display: flex;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--color-liquid-deep);
    padding: 16px 24px 24px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
  }
  .main-nav.open a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }

  .header-actions .btn { display: none; }

  .geo-panel { padding: 72px 40px; min-height: 480px; }
  .geo-panel-map img { left: 52%; height: 135%; }

  .about-grid, .dir-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars, .adv-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .geo-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-row { grid-template-columns: repeat(2, 1fr); }

  #sphereCanvas { opacity: .35; right: -30%; }
}

@media (max-width: 640px) {
  .section { padding: 80px 0; }
  .hero { padding-top: 120px; }

  /* compact header: smaller logo, tighter language button */
  .header-inner { gap: 12px; }
  .logo { gap: 8px; }
  .logo-mark svg { width: 40px; height: 40px; }
  .logo-text { font-size: 22px; }
  .lang-current { padding: 7px 10px; }

  .pillars, .adv-grid, .steps { grid-template-columns: 1fr; }
  .geo-grid { grid-template-columns: 1fr 1fr; }

  .dir-cards { grid-template-columns: 1fr; }
  .dir-swap { transform: rotate(90deg); justify-self: center; }

  .geo-panel { padding: 56px 24px; min-height: 380px; }
  .geo-panel-map img { left: 58%; height: 115%; opacity: .85; }

  .cta-panel { padding: 64px 24px; }
  .cta-meta { gap: 32px; }

  .footer-inner { grid-template-columns: 1fr; }

  .hero-cta .btn { width: 100%; }
}

@media (max-width: 520px) {
  /* phones: mark + "Global" only, keep all six language buttons */
  .logo-text em { display: none; }
}