@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url('/fonts/vazirmatn/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Vazirmatn, ui-sans-serif, system-ui, sans-serif;
  background: #f7f7f9;
  color: #1b2436;
}

a {
  color: #194b9b;
  text-decoration: none;
}

a:hover {
  color: #123a7a;
}

img,
svg {
  display: block;
}

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: -40px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background: #194b9b;
  color: #fff;
}

.skip-link:focus {
  top: 12px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffffee;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #eceef2;
}

.site-header__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 14px clamp(16px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}

.brand:hover {
  color: inherit;
}

.brand__name {
  font-size: 19px;
  font-weight: 800;
  color: #1b2436;
  letter-spacing: 0.3px;
}

.brand--on-dark .brand__name {
  color: #fff;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  overflow-x: auto;
  max-width: 100%;
  padding-bottom: 2px;
}

.site-nav a {
  color: #3c4459;
  font-size: 14.5px;
  font-weight: 500;
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  border: 1px solid transparent;
}

.btn--ghost {
  border-color: #d8dce4;
  color: #1b2436;
}

.btn--primary {
  padding-inline: 20px;
  background: #194b9b;
  color: #fff;
  font-weight: 700;
}

.btn--primary:hover {
  color: #fff;
  background: #123a7a;
}

.btn--lg {
  padding: 14px 30px;
  border-radius: 12px;
  font-size: 16px;
}

.btn--on-brand {
  display: inline-block;
  padding: 14px 34px;
  border-radius: 12px;
  background: #fff;
  color: #194b9b;
  font-size: 16px;
  font-weight: 700;
}

.btn--on-brand:hover {
  color: #123a7a;
}

.hero {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 7vw, 88px) clamp(16px, 4vw, 32px) clamp(30px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* The squares behind the hero, in the same grey the cards are bordered with.
   The ruling is the container's own background, so a line is drawn once
   between two squares instead of once per square; a square under the cursor
   is then outlined on all four sides rather than on the two it owns. The mask
   thins the whole thing out on the way down, so the section ends on nothing
   rather than on a line. */
.hero__grid {
  --hero-cell: 44px;

  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--hero-columns, 12), 1fr);
  grid-auto-rows: var(--hero-cell);
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), #eceef2 calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), #eceef2 calc(100% - 1px));
  background-size: calc(100% / var(--hero-columns, 12)) 100%, 100% var(--hero-cell);
  /* The cursor is followed by hand, so the grid takes no part in hit testing
     and never comes between the visitor and the words on top of it. */
  pointer-events: none;
  mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 96%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 96%);
}

.hero__grid span {
  /* Slow on the way out: a square the cursor crossed keeps its colour for a
     second and a half, so a pass over the hero leaves a trail behind it. */
  transition:
    background-color 1.5s ease-out,
    box-shadow 1.5s ease-out;
}

.hero__grid span.is-lit {
  background-color: #194b9b1c;
  box-shadow: inset 0 0 0 1px #194b9b59;
  transition-duration: 0.08s;
}

.hero__copy,
.hero__panel-wrap {
  position: relative;
}

.hero__copy {
  min-width: 280px;
}

.eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: #194b9b14;
  color: #194b9b;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hero h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  line-height: 1.28;
  font-weight: 800;
  margin: 0 0 20px;
  color: #111729;
}

.hero__lead {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.9;
  color: #5b6478;
  max-width: 520px;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero__highlights {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 13.5px;
  color: #5b6478;
}

.hero__panel-wrap {
  position: relative;
  min-width: 280px;
}

.hero__glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 20%, #194b9b22, transparent 60%),
    radial-gradient(circle at 80% 80%, #a71c2818, transparent 55%);
  border-radius: 32px;
}

/* ── The swap box ─────────────────────────────────────────────────────────
   Lifted from the portal's own swap form, class for class, so the box a
   visitor prices a trade in on the way in is the box they place it in once
   they are through the door. The portal writes these in oklch through
   Tailwind; they are spelled out here because this site carries no build
   step, and they must be read against assets/styles/trade.css when either
   side moves. */

.swap-box {
  position: relative;
  width: 100%;
  max-width: 32.5rem;
  margin-inline: auto;
}

.swap-box button {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

.swap-box [hidden] {
  display: none;
}

@keyframes trade-rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes trade-swap-down {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(14px) scale(0.975);
    opacity: 0.55;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes trade-swap-up {
  0% {
    transform: translateY(0) scale(1);
  }

  45% {
    transform: translateY(-14px) scale(0.975);
    opacity: 0.55;
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes trade-swap-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(180deg);
  }
}

.trade-swap-root {
  position: relative;
}

.trade-pay-panel,
.trade-receive-panel {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  padding: 1rem 1.125rem 1.125rem;
}

.trade-pay-panel {
  background: linear-gradient(
    135deg,
    oklch(0.42 0.17 280 / 0.16) 0%,
    oklch(0.55 0.14 258 / 0.07) 48%,
    white 100%
  );
  /* A defined edge rather than a hint of one: the panel is the object the
     eye lands on first, and a ring at a tenth of an alpha reads as a smudge. */
  box-shadow: inset 0 0 0 1.5px oklch(0.45 0.15 270 / 0.28);
}

.trade-receive-panel {
  padding: 1.125rem 1.125rem 1rem;
  background: linear-gradient(
    135deg,
    oklch(0.62 0.15 190 / 0.18) 0%,
    oklch(0.68 0.12 165 / 0.07) 48%,
    white 100%
  );
  box-shadow: inset 0 0 0 1.5px oklch(0.55 0.13 190 / 0.3);
}

.trade-pay-panel::before,
.trade-receive-panel::before {
  content: '';
  position: absolute;
  width: 11.25rem;
  height: 11.25rem;
  border-radius: 9999px;
  pointer-events: none;
}

.trade-pay-panel::before {
  top: -4.375rem;
  inset-inline-start: -2.5rem;
  background: radial-gradient(circle, oklch(0.55 0.2 285 / 0.22) 0%, transparent 70%);
}

.trade-receive-panel::before {
  bottom: -4.375rem;
  inset-inline-end: -2.5rem;
  background: radial-gradient(circle, oklch(0.7 0.16 185 / 0.24) 0%, transparent 70%);
}

.trade-panel--swap-a.trade-pay-panel,
.trade-panel--swap-b.trade-pay-panel {
  animation: trade-swap-down 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trade-panel--swap-a.trade-receive-panel,
.trade-panel--swap-b.trade-receive-panel {
  animation: trade-swap-up 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.trade-panel-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.trade-panel-label {
  font-size: 0.75rem;
  font-weight: 700;
}

.trade-pay-panel .trade-panel-label {
  color: oklch(0.4 0.16 280);
}

.trade-receive-panel .trade-panel-label {
  color: oklch(0.44 0.12 190);
}

.trade-panel-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.71875rem;
  color: oklch(0.55 0.015 265);
}

.trade-panel-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.trade-currency-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: none;
  border-radius: 0.75rem;
  padding: 0.5625rem 0.75rem;
  box-shadow: 0 1px 3px oklch(0.25 0.04 265 / 0.12);
  flex-shrink: 0;
  transition:
    box-shadow 0.18s ease,
    transform 0.16s ease;
}

.trade-currency-btn:hover {
  box-shadow: 0 4px 12px oklch(0.25 0.04 265 / 0.16);
  transform: translateY(-1px);
}

.swap-chevron {
  flex: none;
  opacity: 0.5;
}

.trade-currency-flag {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border-radius: 50%;
  object-fit: contain;
}

.currency-flag--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.94 0.006 265);
  color: oklch(0.45 0.015 265);
  font-size: 0.625rem;
  font-weight: 700;
}

.trade-currency-name {
  font-size: 0.8125rem;
  font-weight: 700;
}

.trade-amount-input,
.trade-receive-value {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  text-align: left;
  direction: ltr;
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  color: oklch(0.2 0.015 265);
  padding: 0;
}

.trade-amount-input::placeholder {
  color: oklch(0.75 0.01 265);
}

.trade-receive-value--empty {
  color: oklch(0.75 0.01 265);
}

.trade-swap-mid {
  display: flex;
  justify-content: center;
  margin: -1rem 0;
  position: relative;
  z-index: 5;
}

.trade-swap-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border-radius: 9999px;
  border: 3px solid oklch(0.978 0.004 265);
  background: linear-gradient(135deg, oklch(0.42 0.18 285), oklch(0.52 0.15 220));
  color: white;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.2s ease;
}

.trade-swap-btn:hover {
  transform: rotate(180deg);
  background: linear-gradient(135deg, oklch(0.5 0.2 285), oklch(0.62 0.17 200));
}

.trade-swap-btn--spin {
  animation: trade-swap-spin 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Oversized, tilted flag sitting behind a panel's content. Decorative only:
   the panels already clip overflow, and content above it is positioned. */
.currency-watermark {
  position: absolute;
  z-index: 0;
  inset-inline-start: -2.25rem;
  top: 50%;
  width: 10.5rem;
  height: 10.5rem;
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.13;
  transform: translateY(-50%) rotate(-14deg);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.currency-watermark--end {
  inset-inline-start: auto;
  inset-inline-end: -2.25rem;
  transform: translateY(-50%) rotate(12deg);
}

.trade-pay-panel:hover .currency-watermark,
.trade-receive-panel:hover .currency-watermark {
  opacity: 0.18;
}

.trade-rate-card {
  background: white;
  border-radius: 0.875rem;
  padding: 0.875rem 1.125rem;
  margin-top: 0.875rem;
}

.trade-rate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78125rem;
}

.trade-rate-label {
  color: oklch(0.55 0.015 265);
}

.trade-rate-value {
  font-weight: 700;
  text-align: end;
}

.trade-cta {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5625rem;
  border: none;
  padding: 0.875rem 0;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  background: oklch(0.93 0.006 265);
  color: oklch(0.6 0.015 265);
  transition:
    background 0.2s ease,
    transform 0.16s ease;
}

.trade-cta:hover {
  color: oklch(0.6 0.015 265);
}

/* Ready is the only state that looks pressable — until then the box is a
   quote, and the button says what is missing rather than inviting a click. */
.trade-cta--ready {
  background: oklch(0.68 0.18 25);
  color: white;
  box-shadow: 0 6px 18px oklch(0.68 0.18 25 / 0.28);
}

.trade-cta--ready:hover {
  transform: translateY(-1px);
  background: oklch(0.6 0.18 25);
  color: white;
}

.trade-rates-hint {
  text-align: center;
  font-size: 0.6875rem;
  line-height: 1.9;
  color: oklch(0.6 0.015 265);
  margin: 0.625rem 0 0;
}

/* ── The currency picker ──────────────────────────────────────────────────
   A rate board of its own: somebody opening it is usually deciding *which*
   currency, and they decide on the numbers. */

.trade-selector-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: oklch(0.2 0.02 265 / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.trade-selector-card {
  display: flex;
  flex-direction: column;
  width: min(28rem, 100%);
  max-height: min(80vh, 32rem);
  background: white;
  border: 1px solid oklch(0.94 0.006 265);
  border-radius: 0.875rem;
  padding: 0.5rem;
  box-shadow: 0 12px 40px oklch(0.2 0.03 265 / 0.18);
  animation: trade-rise-in 0.2s ease both;
}

.trade-selector-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid oklch(0.965 0.005 265);
  margin-bottom: 0.25rem;
}

.trade-selector-title {
  font-size: 0.6875rem;
  font-weight: 600;
  color: oklch(0.55 0.015 265);
}

.trade-selector-unit {
  font-size: 0.625rem;
  font-weight: 600;
  color: oklch(0.62 0.015 265);
}

/* Outside the scrolling list on purpose: hunting for the lira should never
   mean losing the field you were typing in. */
.selector-search {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  margin: 0 0.25rem 0.375rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.625rem;
  background: oklch(0.965 0.005 265);
}

.selector-search__icon {
  flex: none;
  opacity: 0.45;
}

.selector-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.78125rem;
  color: oklch(0.24 0.015 265);
}

.selector-search__input::-webkit-search-cancel-button {
  appearance: none;
}

.selector-scroll {
  position: relative;
  display: flex;
  min-height: 0;
}

.selector-list {
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
  margin-top: 0.25rem;
}

/* A row half-hidden under a fade is what tells somebody to keep going. Both
   the fade and the arrow are drawn only while there is something below. */
.selector-scroll::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2.5rem;
  pointer-events: none;
  background: linear-gradient(to top, white 20%, transparent);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.selector-scroll:has(.selector-more:not([hidden]))::after {
  opacity: 1;
}

.selector-more {
  position: absolute;
  /* Above the fade, not under it: a cue you cannot see is not a cue. */
  z-index: 1;
  bottom: 0.375rem;
  inset-inline-start: 50%;
  transform: translateX(50%);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  pointer-events: none;
  background: white;
  color: oklch(0.4 0.15 265);
  box-shadow: 0 2px 8px oklch(0.2 0.03 265 / 0.22);
  animation: selector-more-nudge 1.6s ease-in-out infinite;
}

@keyframes selector-more-nudge {
  0%,
  100% {
    transform: translateX(50%) translateY(0);
  }

  50% {
    transform: translateX(50%) translateY(0.1875rem);
  }
}

/* One grid, used by the head and by every row, so the columns are the same
   columns: the labels are said once at the top instead of on each line. */
.selector-columns,
.trade-selector-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 5.25rem 5.25rem;
  gap: 0.75rem;
  align-items: center;
}

.selector-columns {
  padding: 0.25rem 0.625rem 0.4375rem;
  margin: 0 0.125rem;
  border-bottom: 1px solid oklch(0.96 0.005 265);
  font-size: 0.625rem;
  font-weight: 700;
  color: oklch(0.62 0.015 265);
}

.selector-columns span:not(:first-child) {
  text-align: end;
}

/* The first column carries two things — the mark and the name — so it is a
   cell of its own rather than two tracks that would drift apart. */
.selector-cell {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  min-width: 0;
}

.selector-name {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  flex: 1;
  min-width: 0;
}

/* One line each, whatever the name: a name that wraps turns a table into a
   paragraph. */
.selector-name .trade-currency-name,
.selector-code {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-code {
  font-size: 0.65625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: oklch(0.58 0.015 265);
}

.selector-rate {
  font-size: 0.71875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: oklch(0.34 0.015 265);
  text-align: end;
}

.selector-rate--none {
  font-weight: 500;
  color: oklch(0.72 0.015 265);
}

.trade-selector-row .selector-rate:nth-of-type(2) {
  color: oklch(0.4 0.14 265);
}

.trade-selector-row {
  width: 100%;
  border: none;
  background: transparent;
  padding: 0.5625rem 0.625rem;
  border-radius: 0.625rem;
  text-align: start;
  transition:
    background-color 0.14s ease,
    box-shadow 0.14s ease,
    color 0.14s ease;
}

/* A row somebody is about to pick should look picked-able: the whole line
   lifts into the brand colour rather than shading a shade greyer. */
.trade-selector-row:hover,
.trade-selector-row:focus-visible {
  background: oklch(0.4 0.15 265 / 0.07);
  box-shadow: inset 0 0 0 1.5px oklch(0.4 0.15 265 / 0.22);
  outline: none;
}

.trade-selector-row:hover .trade-currency-name,
.trade-selector-row:focus-visible .trade-currency-name {
  color: oklch(0.28 0.09 265);
}

.trade-selector-row:hover .selector-code,
.trade-selector-row:focus-visible .selector-code {
  color: oklch(0.48 0.08 265);
}

.trade-selector-note {
  margin: 0.5rem 0.25rem 0;
  padding-top: 0.5rem;
  border-top: 1px solid oklch(0.96 0.005 265);
  font-size: 0.625rem;
  line-height: 1.8;
  color: oklch(0.62 0.015 265);
}

@media (prefers-reduced-motion: reduce) {
  .currency-watermark,
  .selector-more,
  .trade-selector-card,
  .trade-panel--swap-a,
  .trade-panel--swap-b,
  .trade-swap-btn--spin {
    animation: none;
    transition: none;
  }
}

.code-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #194b9b10;
  color: #194b9b;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

/* The flag artwork is already masked to a circle; the hairline keeps the pale
   flags — the dirham, the lira's white field — off a white card. */
.currency-mark {
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  border: 1px solid #1b24361a;
}

.section {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 60px) clamp(16px, 4vw, 32px);
}

.section--narrow {
  max-width: 840px;
}

.section__intro {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 44px;
}

.section__intro h2,
.cta-banner h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  margin: 0 0 12px;
  color: #111729;
}

.section__intro p {
  font-size: 15px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

.currency-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.currency-card,
.feature-card {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
}

.currency-card {
  padding: 20px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* The currency's own flag, blown up and faded into the corner of its card.
   It is decoration under the numbers, so the content layers sit above it. */
.currency-card__ghost {
  position: absolute;
  inset-inline-start: -46px;
  bottom: -52px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  opacity: 0.09;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.currency-card__head,
.currency-card__labels,
.currency-card__prices {
  position: relative;
}

.currency-card:hover {
  transform: translateY(-3px);
  border-color: #194b9b33;
  box-shadow: 0 12px 26px -18px #111d3459;
}

.currency-card:hover .currency-card__ghost {
  opacity: 0.16;
  transform: scale(1.06);
}

.currency-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.currency-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.currency-card__name > div > div:first-child {
  font-size: 14.5px;
  font-weight: 700;
  color: #1b2436;
}

.currency-card__pair {
  font-size: 11.5px;
  color: #8791a3;
}

.currency-card .code-mark {
  width: 38px;
  height: 38px;
  font-size: 12.5px;
}

.currency-card .currency-mark {
  width: 38px;
  height: 38px;
}

.currency-card__labels,
.currency-card__prices {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.currency-card__labels {
  font-size: 13px;
  color: #8791a3;
  margin-bottom: 4px;
}

.currency-card__prices span {
  font-size: 15px;
  font-weight: 700;
  color: #1b2436;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.feature-card {
  padding: 26px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

/* A single brand wash behind the mark: the section stays flat, but the cards
   are not bare white rectangles. */
.feature-card::before {
  content: '';
  position: absolute;
  inset-inline-start: -54px;
  top: -66px;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: radial-gradient(circle, #194b9b16, #194b9b00 70%);
  pointer-events: none;
}

.feature-card__icon,
.feature-card__title,
.feature-card p {
  position: relative;
}

.feature-card:hover {
  transform: translateY(-3px);
  border-color: #194b9b33;
  box-shadow: 0 12px 26px -18px #111d3459;
}

.feature-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, #194b9b1f, #194b9b08);
  box-shadow: inset 0 0 0 1px #194b9b1a;
  color: #194b9b;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: transform 0.18s ease;
}

.feature-card:hover .feature-card__icon {
  transform: scale(1.05);
}

.feature-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.feature-card h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #1b2436;
  margin: 0;
}

.feature-card p {
  font-size: 14px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

.badge {
  font-size: 11px;
  font-weight: 700;
  color: #a71c28;
  background: #a71c2812;
  padding: 2px 8px;
  border-radius: 999px;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}

.step-card {
  position: relative;
  padding-top: 8px;
}

/* Each card starts a beat after the one before it. */
.step-card:nth-child(2) {
  --reveal-delay: 0.09s;
}

.step-card:nth-child(3) {
  --reveal-delay: 0.18s;
}

.step-card:nth-child(4) {
  --reveal-delay: 0.27s;
}

.step-card__n {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #194b9b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 18px;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.step-card:hover .step-card__n {
  transform: scale(1.06);
  box-shadow: 0 10px 20px -12px #194b9bcc;
}

/* The reveal: the script arms the group, so the cards are only ever hidden
   while there is something running that will bring them back. The played-out
   state is left to the plain rules above — `backwards` fills the wait before
   each card's turn and then lets go, so hovering still moves the badge. */
[data-reveal].is-armed:not(.is-revealed) > * {
  opacity: 0;
}

[data-reveal].is-armed:not(.is-revealed) .step-card__n {
  transform: scale(0.78);
}

[data-reveal].is-revealed > * {
  animation: reveal-rise 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) var(--reveal-delay, 0s) backwards;
}

[data-reveal].is-revealed .step-card__n {
  animation: reveal-pop 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) var(--reveal-delay, 0s) backwards;
}

@keyframes reveal-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
}

@keyframes reveal-pop {
  from {
    transform: scale(0.78);
  }
}

.step-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: #1b2436;
  margin: 0 0 8px;
}

.step-card p {
  font-size: 13.5px;
  color: #5b6478;
  line-height: 1.8;
  margin: 0;
}

/* The standing pages — the terms, the privacy policy, the contact page. One
   column of reading width, with the clauses addressable one by one. */
.doc {
  padding-top: clamp(30px, 5vw, 56px);
}

.doc__head {
  margin-bottom: 30px;
}

.doc h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.5rem);
  font-weight: 800;
  color: #111729;
  margin: 0 0 14px;
  line-height: 1.35;
}

.doc__lead {
  font-size: 15.5px;
  line-height: 2;
  color: #5b6478;
  margin: 0;
}

.doc__updated {
  font-size: 13px;
  color: #8791a3;
  margin: 14px 0 0;
}

.doc__toc {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 34px;
}

.doc__toc-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #1b2436;
  margin-bottom: 12px;
}

.doc__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px 24px;
}

.doc__toc a {
  font-size: 13.5px;
  color: #5b6478;
  line-height: 1.8;
}

.doc__toc a:hover {
  color: #194b9b;
}

.doc__section {
  /* The anchor lands below the header rather than under it. */
  scroll-margin-top: 90px;
  margin-bottom: 30px;
}

.doc__section h2,
.doc__heading {
  font-size: 17px;
  font-weight: 700;
  color: #1b2436;
  margin: 0 0 12px;
  line-height: 1.7;
}

.doc__heading {
  margin-top: 8px;
}

.doc__section p {
  font-size: 14.5px;
  line-height: 2.1;
  color: #5b6478;
  margin: 0 0 12px;
}

.doc__section ul {
  margin: 0;
  padding-inline-start: 20px;
}

.doc__section li {
  font-size: 14.5px;
  line-height: 2.1;
  color: #5b6478;
  margin-bottom: 8px;
}

/* The one block on these pages a visitor is meant to stop at: what we will
   never ask them for. */
.doc__section--warn {
  background: #a71c2809;
  border: 1px solid #a71c281f;
  border-radius: 16px;
  padding: 22px 24px;
}

.doc__section--warn h2 {
  color: #a71c28;
}

.doc__footnote {
  font-size: 13.5px;
  line-height: 2;
  color: #8791a3;
  border-top: 1px solid #eceef2;
  padding-top: 20px;
  margin: 34px 0 0;
}

.channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.channel-card {
  display: flex;
  flex-direction: column;
}

.channel-card__action {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: #194b9b;
  position: relative;
}

.channel-card__action span {
  transition: transform 0.18s ease;
}

.channel-card:hover .channel-card__action span {
  transform: translateX(-4px);
}

.trust-band {
  background: #111d34;
  margin: clamp(30px, 5vw, 60px) 0;
}

.trust-band__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 28px;
}

.trust-band__title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}

.trust-band__desc {
  font-size: 13.5px;
  color: #a7b0c4;
  line-height: 1.8;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-list details {
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 14px;
  padding: 18px 20px;
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 700;
  color: #1b2436;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary span {
  color: #8791a3;
  font-size: 20px;
  line-height: 1;
}

.faq-list p {
  font-size: 14px;
  color: #5b6478;
  line-height: 1.9;
  margin: 14px 0 0;
}

.cta-wrap {
  max-width: 1240px;
  margin: 0 auto clamp(30px, 5vw, 60px);
  padding: 0 clamp(16px, 4vw, 32px);
}

.cta-banner {
  background: linear-gradient(120deg, #194b9b, #12356f);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 56px);
  text-align: center;
}

.cta-banner h2 {
  color: #fff;
  margin-bottom: 14px;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.cta-banner p {
  font-size: 15px;
  color: #c9d5ec;
  margin: 0 0 26px;
}

.site-footer {
  background: #0d1729;
}

.site-footer__grid {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 60px) clamp(16px, 4vw, 32px) 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 32px;
}

.site-footer__about {
  font-size: 13.5px;
  color: #8b96ad;
  line-height: 1.9;
  max-width: 280px;
  margin: 14px 0 0;
}

.site-footer__heading {
  font-size: 13.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 14px;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  color: #8b96ad;
}

.site-footer__links a {
  color: #8b96ad;
}

.site-footer__copy {
  border-top: 1px solid #1c2a44;
  padding: 18px clamp(16px, 4vw, 32px);
  text-align: center;
  font-size: 12.5px;
  color: #5f6a80;
}

@media (prefers-reduced-motion: reduce) {
  .channel-card__action span,
  .hero__grid span,
  .currency-card,
  .currency-card__ghost,
  .feature-card,
  .feature-card__icon,
  .step-card__n {
    transition: none;
  }
}