/* ══════════════════════════════════════════════════════════════════════════
   NairaRate

   Three decisions carry this design, and everything else follows from them.

   1. The rate is the page. It is set enormous, in a real display face, and
      given room to breathe. Everything else is deliberately quiet so that one
      number lands. A page where the headline and the data are the same weight
      is a page nobody can read at a glance, and a glance is all most people
      give this.

   2. Warm black and gold, not blue grey. Blue grey with a blue accent is what
      every dashboard defaults to. Money in this part of the world is gold, and
      gold on near black reads as considered rather than generated.

   3. Figures are monospaced and tabular everywhere. Prices sit in a column and
      the decimal points line up, so two numbers can be compared by eye without
      reading either of them. That single detail is most of the difference
      between a finance tool that feels professional and one that does not.

   Phone first throughout. Most people checking a rate are standing up.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* warm near black, not the usual blue grey */
  --bg:      #0a0a0b;
  --raise:   #111113;
  --raise-2: #17171a;
  --hair:    #232327;
  --hair-2:  #2e2e34;

  --ink:     #f4f2ef;
  --ink-2:   #a3a09b;
  --ink-3:   #6c6a67;

  --gold:    #e8b04b;
  --gold-d:  #a97c26;
  --gold-t:  rgba(232, 176, 75, .09);

  --mint:    #4ade9b;
  --coral:   #ff7a6b;

  --r-s: 4px;
  --r-m: 10px;
  --r-l: 18px;

  --display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wrap: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* a barely there wash behind the top of the page, so the hero does not sit
     on flat black */
  background-image: radial-gradient(90rem 40rem at 50% -18rem, rgba(232, 176, 75, .07), transparent 70%);
  background-repeat: no-repeat;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
button, input { font-family: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* Every figure on the site. Tabular so columns of prices line up on the
   decimal point and can be compared without being read. */
.fig { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 740px; }

/* Small caps labels, used everywhere a field needs naming without shouting. */
.eyebrow {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── header ──────────────────────────────────────────────────────────────── */

.hd {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--hair);
  background: rgba(10, 10, 11, .82);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.hd-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 62px; }

.brand { display: flex; align-items: center; gap: 10px; }
.brand img { max-height: 30px; width: auto; }
.brand .mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, var(--gold), var(--gold-d));
  color: #1a1204;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.brand .bn {
  font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -.03em;
}

.hd-nav { display: flex; gap: 4px; }
.hd-nav a {
  position: relative;
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-2);
  border-radius: var(--r-s);
}
.hd-nav a:hover { color: var(--ink); }
.hd-nav a.on { color: var(--ink); }
.hd-nav a.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px; background: var(--gold);
}

/* ── hero ────────────────────────────────────────────────────────────────── */

.hero { padding: 34px 0 4px; }
.hero h1 {
  font-size: clamp(27px, 6.4vw, 46px);
  line-height: 1.08;
  max-width: 17ch;
  margin-bottom: 12px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero .lede {
  color: var(--ink-2);
  font-size: 15.5px;
  max-width: 54ch;
  margin: 0 0 16px;
}

.stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .01em;
  color: var(--ink-3);
  border: 1px solid var(--hair); border-radius: 999px;
  padding: 5px 13px;
}
.stamp .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
  box-shadow: 0 0 0 3px rgba(74, 222, 155, .13);
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe { 50% { opacity: .3; transform: scale(.85); } }
.stamp .warn { color: var(--gold); }

/* ── the headline figure ─────────────────────────────────────────────────── */

/* The one number people came for, given the room it deserves. Everything else
   on the page is sized against this. */
.lead-rate {
  margin: 24px 0 12px;
  border: 1px solid var(--hair);
  border-radius: var(--r-l);
  background:
    linear-gradient(180deg, rgba(232, 176, 75, .06), transparent 42%),
    var(--raise);
  padding: 22px 22px 20px;
  position: relative;
  overflow: hidden;
}
.lead-rate::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 176, 75, .5), transparent);
}
.lr-k { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.lr-v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 12vw, 68px);
  font-weight: 700; letter-spacing: -.045em; line-height: 1;
  color: var(--ink);
}
.lr-v small { font-size: .42em; font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.lr-s { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.lr-s b { color: var(--gold); font-weight: 600; }

/* the three supporting figures */
/* Stacked rows on a phone, label on one side and figure on the other. Three
   columns across 390px left about a hundred pixels each, which is not enough
   for a naira price and broke every one of them onto two lines. */
.stats {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r-m); overflow: hidden;
}
.stat {
  background: var(--raise); padding: 12px 15px; min-width: 0;
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 14px;
}
.stat .k { grid-row: 1; }
.stat .v {
  grid-row: 1; grid-column: 2; text-align: right;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 600; letter-spacing: -.03em;
  white-space: nowrap;
}
.stat .s { grid-row: 2; grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.stat.sell .v { color: var(--mint); }
.stat.gap  .v { color: var(--gold); }

/* ── section heads, numbered ─────────────────────────────────────────────── */

/* The number, the heading and the aside. On a phone the aside drops to its own
   line rather than fighting the heading for width, which was breaking the
   heading into one word per line. */
.sec-h {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 4px 12px;
  margin: 44px 0 16px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hair);
}
.sec-h .no {
  font-family: var(--mono); font-size: 11.5px; color: var(--gold-d);
  letter-spacing: .05em;
}
.sec-h h2 { font-size: 20px; min-width: 0; }
.sec-h > span:not(.no) {
  grid-column: 2;
  font-size: 12.5px; color: var(--ink-3); line-height: 1.5;
}

/* ── exchange board ──────────────────────────────────────────────────────── */

.board { display: grid; grid-template-columns: 1fr; gap: 10px; }

.ex {
  border: 1px solid var(--hair);
  border-radius: var(--r-m);
  background: var(--raise);
  overflow: hidden;
  transition: border-color .16s ease;
}
.ex:hover { border-color: var(--hair-2); }
.ex.is-best { border-color: rgba(232, 176, 75, .38); }

.ex-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 15px; }
.ex-h h3 { font-size: 16.5px; display: inline; margin-right: 9px; }
.tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--hair-2); border-radius: 3px; padding: 2px 6px;
}
.go {
  font-size: 12.5px; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hair-2); border-radius: var(--r-s);
  padding: 6px 12px; white-space: nowrap; transition: all .16s ease;
}
.go:hover { color: #1a1204; background: var(--gold); border-color: var(--gold); }

.ex-p { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.ex-p .p { padding: 12px 15px 13px; position: relative; }
.ex-p .p + .p { border-left: 1px solid var(--hair); }
.ex-p .p b {
  display: block; margin-top: 4px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 20px; font-weight: 600; letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.ex-p .p i {
  display: inline-block; margin-top: 6px; font-style: normal;
  font-family: var(--body); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: #12180f; background: var(--mint); border-radius: 3px; padding: 2px 6px;
}
.ex-p .p.best { background: rgba(74, 222, 155, .045); }

.ex-more { border-top: 1px solid var(--hair); }
.ex-more summary {
  padding: 10px 15px; font-size: 12.5px; color: var(--ink-3);
  cursor: pointer; list-style: none; user-select: none;
}
.ex-more summary::-webkit-details-marker { display: none; }
.ex-more summary::after { content: "  ↓"; font-family: var(--mono); }
.ex-more[open] summary::after { content: "  ↑"; }
.ex-more summary:hover { color: var(--ink-2); }
.offers { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 2px 15px 15px; }
.offers h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
             text-transform: uppercase; color: var(--ink-3); margin-bottom: 7px; }
.o { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
     padding: 6px 0; border-bottom: 1px solid var(--hair); font-size: 13px; }
.o:last-child { border-bottom: 0; }
.o-n { color: var(--ink-2); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-p { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.o-l { width: 100%; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* ── calculator ──────────────────────────────────────────────────────────── */

.calc { border: 1px solid var(--hair); border-radius: var(--r-l); background: var(--raise); padding: 16px; }
.calc.big { padding: 22px; }
.calc-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px;
             background: var(--bg); border: 1px solid var(--hair); border-radius: var(--r-m); margin-bottom: 18px; }
.calc-tabs button {
  background: none; border: 0; border-radius: var(--r-s);
  color: var(--ink-3); padding: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer;
  transition: all .16s ease;
}
.calc-tabs button:hover { color: var(--ink-2); }
.calc-tabs button.on { background: var(--raise-2); color: var(--ink); box-shadow: 0 1px 0 rgba(255,255,255,.05) inset; }

.calc-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; }
.calc-row label { display: block; }
.calc-row label > span { display: block; margin-bottom: 7px; }
.calc-row input {
  width: 100%;
  background: var(--bg); border: 1px solid var(--hair-2); color: var(--ink);
  border-radius: var(--r-m); padding: 13px 14px;
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 18px; font-weight: 600; letter-spacing: -.02em;
  transition: border-color .16s ease;
}
.calc-row input:focus { outline: none; border-color: var(--gold); }
.calc-row .eq { color: var(--ink-3); padding-bottom: 15px; font-family: var(--mono); }
.calc-n { font-size: 12.5px; color: var(--ink-3); margin: 14px 0 0; }
.calc-n b { color: var(--ink-2); font-weight: 500; }

.quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 16px; }
.quick button {
  background: none; border: 1px solid var(--hair-2); color: var(--ink-3);
  border-radius: 999px; padding: 6px 14px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; transition: all .16s ease;
}
.quick button:hover { border-color: var(--gold); color: var(--gold); }

/* ── table ───────────────────────────────────────────────────────────────── */

.tbl-w { overflow-x: auto; border: 1px solid var(--hair); border-radius: var(--r-m); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 480px; }
.tbl th {
  text-align: left; padding: 11px 15px; background: var(--raise-2);
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--hair); white-space: nowrap;
}
.tbl td { padding: 12px 15px; border-bottom: 1px solid var(--hair); background: var(--raise); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td.n { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tbl td.muted { color: var(--ink-3); }

/* ── exchange guide ──────────────────────────────────────────────────────── */

.ex-list { display: grid; grid-template-columns: 1fr; gap: 12px; }
.exc { border: 1px solid var(--hair); border-radius: var(--r-m); background: var(--raise); overflow: hidden; }
.exc-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
         padding: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hair); }
.exc-h h2 { font-size: 19px; margin-bottom: 5px; }
.exc-p { display: flex; gap: 22px; }
.exc-p > div span { display: block; margin-bottom: 3px; }
.exc-p b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 600; }
.exc-b { padding: 16px; }
.exc-b p { font-size: 14px; margin: 0 0 10px; padding-left: 22px; position: relative; color: var(--ink-2); }
.exc-b p::before { position: absolute; left: 0; top: 0; font-family: var(--mono); font-weight: 700; }
.exc-b .good::before { content: "+"; color: var(--mint); }
.exc-b .bad::before  { content: "−"; color: var(--coral); }
.exc-b .go { display: inline-block; margin-top: 4px; }

/* ── prose ───────────────────────────────────────────────────────────────── */

.prose { color: var(--ink-2); font-size: 15.5px; max-width: 68ch; }
.prose h2 { color: var(--ink); font-size: 18px; margin: 30px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose em { color: var(--ink); font-style: italic; }
.prose a { color: var(--gold); border-bottom: 1px solid rgba(232, 176, 75, .3); }
.prose a:hover { border-bottom-color: var(--gold); }
.prose ul, .prose ol { padding-left: 20px; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--gold-d); }

.pg-h { padding: 40px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 26px; }
.pg-h h1 { font-size: clamp(26px, 6vw, 38px); }
.upd { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--hair);
       font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); }
.empty h2 { color: var(--ink); font-size: 20px; margin-bottom: 8px; }

/* ── ads ─────────────────────────────────────────────────────────────────── */

/* Labelled, because an advert dressed as content is the fastest way to lose
   the account that pays for it. Labelled very quietly, because the label is
   for honesty, not for attention. */
.ad { margin: 26px 0; text-align: center; min-width: 0; overflow: hidden; }
.ad .ad-l {
  display: block; margin-bottom: 6px;
  font-family: var(--body); font-size: 8.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); opacity: .35;
}
.ad > * { max-width: 100%; }

/* ── footer ──────────────────────────────────────────────────────────────── */

.ft { border-top: 1px solid var(--hair); margin-top: 56px; padding: 40px 0 30px; }
.ft-top { display: grid; grid-template-columns: 1fr; gap: 30px; }
.ft-d { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; max-width: 40ch; line-height: 1.6; }
.ft-d a { color: var(--ink-2); border-bottom: 1px solid var(--hair-2); }
.ft-d a:hover { color: var(--gold); }
.ft h4 { font-family: var(--body); font-size: 10.5px; font-weight: 600; letter-spacing: .14em;
         text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; }
.ft ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.ft li a { font-size: 13.5px; color: var(--ink-2); }
.ft li a:hover { color: var(--gold); }
.ft-bot {
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  border-top: 1px solid var(--hair); margin-top: 34px; padding-top: 20px;
  font-size: 12px; color: var(--ink-3);
}

/* ── wider screens ───────────────────────────────────────────────────────── */

@media (min-width: 680px) {
  .hero { padding: 52px 0 4px; }
  .lead-rate { padding: 28px 30px 26px; }
  .board { grid-template-columns: 1fr 1fr; }
  .offers { grid-template-columns: 1fr 1fr; }
  .ft-top { grid-template-columns: 2fr 1fr 1fr; }
}

@media (min-width: 980px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 28px; }

  /* The headline rate and the three supporting figures sit side by side, with
     the rate given twice the room. Four equal boxes would say they matter
     equally, and they do not. */
  .headline { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; align-items: stretch; }
  /* centred in its own height, so the figure sits with the three beside it
     rather than floating at the top of an empty box */
  .headline .lead-rate {
    margin: 0; display: flex; flex-direction: column; justify-content: center;
  }
  .stat { padding: 16px 20px; }

  .ex-list { grid-template-columns: 1fr 1fr; }
  .sec-h h2 { font-size: 22px; }
}

/* =========================================================
   GtsPunjab — Advanced Professional Fintech UI
   Visual layer only: application/backend logic unchanged.
   ========================================================= */

:root{
  --gts-primary:#2563eb;
  --gts-primary-2:#4f7cff;
  --gts-primary-dark:#1746b8;
  --gts-primary-soft:#edf4ff;
  --gts-ink:#0f1f35;
  --gts-ink-2:#334863;
  --gts-muted:#708198;
  --gts-border:#dce5f0;
  --gts-border-2:#cbd8e8;
  --gts-bg:#f5f8fc;
  --gts-card:#ffffff;
  --gts-success:#0b9a6a;
  --gts-success-soft:#e9f8f2;
  --gts-warning:#c77913;
  --gts-shadow:0 12px 35px rgba(18,48,88,.075);
  --gts-shadow-hover:0 20px 48px rgba(18,48,88,.12);
  --gts-radius:18px;
  --gts-radius-sm:12px;
  --gts-font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gts-display:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gts-mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

html{
  background:var(--gts-bg);
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:
    radial-gradient(700px 320px at 12% -10%,rgba(37,99,235,.11),transparent 70%),
    radial-gradient(650px 300px at 88% 0%,rgba(79,124,255,.07),transparent 70%),
    var(--gts-bg);
  color:var(--gts-ink);
  font-family:var(--gts-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{
  font-family:var(--gts-display);
  color:var(--gts-ink);
  letter-spacing:-.035em;
}

a{
  color:var(--gts-primary);
  transition:color .18s ease,opacity .18s ease;
}
a:hover{color:var(--gts-primary-dark)}

/* ---------- Header ---------- */
header,.header,.hd{
  position:sticky!important;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.91)!important;
  border-bottom:1px solid rgba(203,216,232,.85)!important;
  box-shadow:0 4px 22px rgba(15,35,65,.045)!important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
}

.hd-in,.header-inner,header .container{
  min-height:66px;
}

.brand img{
  max-height:38px;
}

.brand .mark{
  background:linear-gradient(145deg,var(--gts-primary),var(--gts-primary-2))!important;
  box-shadow:0 8px 20px rgba(37,99,235,.22)!important;
}

.hd-nav a,.header nav a{
  border-radius:10px;
  font-weight:650;
}
.hd-nav a:hover,.header nav a:hover{
  background:var(--gts-primary-soft);
  color:var(--gts-primary)!important;
}
.hd-nav a.on,.header nav a.active{
  background:var(--gts-primary-soft);
  color:var(--gts-primary)!important;
}

/* ---------- Page structure ---------- */
.wrap,.container{
  position:relative;
}

.hero{
  position:relative;
  padding-top:62px!important;
  padding-bottom:30px!important;
}

.hero:before{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:3%;
  top:20px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(37,99,235,.09),transparent 68%);
  pointer-events:none;
}

.hero h1{
  max-width:17ch;
  font-size:clamp(34px,5.8vw,58px)!important;
  line-height:1.02!important;
  font-weight:800;
}

.hero h1 em{
  color:var(--gts-primary)!important;
}

.hero .lede{
  max-width:64ch;
  color:var(--gts-ink-2);
}

/* ---------- Premium cards ---------- */
.card,.box,.panel,.rate-card,.exchange-card,.calculator,.calc,
.lead-rate,.stat,.ex,.exc{
  background:rgba(255,255,255,.96)!important;
  border:1px solid var(--gts-border)!important;
  border-radius:var(--gts-radius)!important;
  box-shadow:var(--gts-shadow)!important;
}

.card:hover,.rate-card:hover,.exchange-card:hover,.ex:hover{
  border-color:#c6d5eb!important;
  box-shadow:var(--gts-shadow-hover)!important;
  transform:translateY(-2px);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

/* ---------- Live / status badges ---------- */
.stamp{
  border:1px solid var(--gts-border)!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 5px 16px rgba(18,48,88,.05)!important;
}
.stamp .dot{
  background:var(--gts-success)!important;
  box-shadow:0 0 0 4px rgba(11,154,106,.11)!important;
}

/* ---------- Main rate hero ---------- */
.lead-rate{
  padding:30px!important;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(37,99,235,.10),rgba(79,124,255,.035) 45%,#fff 78%)!important;
  box-shadow:0 18px 46px rgba(25,63,115,.10)!important;
}

.lead-rate:before{
  content:"";
  position:absolute;
  width:170px;
  height:170px;
  right:-50px;
  bottom:-75px;
  border-radius:50%;
  border:24px solid rgba(37,99,235,.045);
}

.lr-v{
  color:var(--gts-ink)!important;
  font-weight:850!important;
  letter-spacing:-.065em!important;
}
.lr-v small{color:var(--gts-muted)!important}
.lr-s b{color:var(--gts-primary)!important}

/* ---------- Stats ---------- */
.stats{
  gap:12px!important;
}
.stat{
  padding:18px 20px!important;
  box-shadow:0 8px 24px rgba(18,48,88,.055)!important;
}
.stat .v{
  font-family:var(--gts-mono)!important;
  font-weight:800!important;
}
.stat.sell{
  border-color:#bfe8d8!important;
  background:linear-gradient(135deg,#fff,#f5fcf9)!important;
}
.stat.sell .v{color:var(--gts-success)!important}
.stat.gap .v{color:var(--gts-warning)!important}

/* ---------- Section headings ---------- */
.sec-h{
  margin-top:54px!important;
  padding-bottom:14px!important;
  border-bottom:1px solid var(--gts-border)!important;
}
.sec-h .no{
  background:var(--gts-primary-soft)!important;
  color:var(--gts-primary)!important;
  border-radius:7px!important;
}

/* ---------- Exchange board ---------- */
.board{
  gap:16px!important;
}

.ex{
  overflow:hidden;
}

.ex.is-best{
  border-color:#b8caff!important;
  box-shadow:0 15px 38px rgba(37,99,235,.10)!important;
}

.ex-h{
  padding:17px 18px!important;
  background:linear-gradient(180deg,#fff,#fbfdff);
}

.ex-h h3{
  font-size:18px!important;
}

.ex-p .p{
  padding:17px 18px!important;
}

.ex-p .p.best{
  background:var(--gts-success-soft)!important;
}

.ex-p .p b{
  font-family:var(--gts-mono)!important;
  font-weight:800!important;
}

.ex-p .p i{
  background:var(--gts-success)!important;
  border-radius:6px!important;
}

.tag{
  background:var(--gts-primary-soft)!important;
  border-color:#d4e1ff!important;
  color:var(--gts-primary)!important;
}

/* ---------- Buttons ---------- */
button,.btn,.button,.go{
  border-radius:10px!important;
  font-weight:700!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease!important;
}

button:hover,.btn:hover,.button:hover,.go:hover{
  transform:translateY(-1px);
}

.go,.btn-primary,.button-primary{
  background:linear-gradient(135deg,var(--gts-primary),var(--gts-primary-2))!important;
  border-color:var(--gts-primary)!important;
  color:#fff!important;
  box-shadow:0 7px 17px rgba(37,99,235,.18);
}

.go:hover,.btn-primary:hover,.button-primary:hover{
  background:linear-gradient(135deg,var(--gts-primary-dark),var(--gts-primary))!important;
  box-shadow:0 10px 22px rgba(37,99,235,.23);
}

/* ---------- Calculator ---------- */
.calc,.calculator{
  padding:24px!important;
  background:
    linear-gradient(145deg,rgba(37,99,235,.045),transparent 45%),
    #fff!important;
}

.calc-tabs,.tabs{
  padding:5px!important;
  background:#f0f4fa!important;
  border:1px solid var(--gts-border)!important;
  border-radius:12px!important;
}

.calc-tabs button,.tabs button{
  border-radius:9px!important;
}

.calc-tabs button.on,.tabs .active{
  background:#fff!important;
  color:var(--gts-primary)!important;
  box-shadow:0 4px 13px rgba(18,48,88,.09)!important;
}

.calc-row input,.calculator input,
input[type="number"],input[type="text"]{
  background:#fbfdff!important;
  border:1px solid var(--gts-border-2)!important;
  color:var(--gts-ink)!important;
  border-radius:12px!important;
  min-height:48px;
  transition:border-color .18s ease,box-shadow .18s ease;
}

.calc-row input:focus,.calculator input:focus,
input[type="number"]:focus,input[type="text"]:focus{
  outline:none!important;
  border-color:var(--gts-primary)!important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10)!important;
}

.quick button{
  background:#fff!important;
  border:1px solid var(--gts-border-2)!important;
  color:var(--gts-ink-2)!important;
}
.quick button:hover{
  background:var(--gts-primary-soft)!important;
  border-color:#b8ccfa!important;
  color:var(--gts-primary)!important;
}

/* ---------- Tables ---------- */
.tbl-w,.table-wrap{
  border:1px solid var(--gts-border)!important;
  border-radius:14px!important;
  overflow:auto;
  box-shadow:var(--gts-shadow)!important;
}

.tbl,.table,table{
  border-collapse:separate!important;
  border-spacing:0!important;
}

.tbl th,.table th,table thead th{
  background:#f1f5fb!important;
  color:#687a91!important;
  border-bottom:1px solid var(--gts-border)!important;
  font-weight:750!important;
}

.tbl td,.table td,table td{
  background:#fff;
  border-bottom:1px solid #e8eef5!important;
}

.tbl tbody tr:hover td,.table tbody tr:hover td,table tbody tr:hover td{
  background:#f8fbff!important;
}

/* ---------- Prose pages ---------- */
.prose{
  color:var(--gts-ink-2);
}
.prose h2{
  color:var(--gts-ink);
}
.prose a{
  color:var(--gts-primary);
  border-bottom-color:#bfd0f5;
}

/* ---------- Ads: clearly separated ---------- */
.ad{
  margin:30px 0!important;
  min-height:40px;
}
.ad .ad-l{
  color:#94a3b8!important;
  font-size:8px!important;
  letter-spacing:.18em!important;
}

/* ---------- Footer ---------- */
footer,.footer,.ft{
  margin-top:72px!important;
  background:
    radial-gradient(600px 240px at 80% 0,rgba(59,130,246,.16),transparent 70%),
    #0d1d34!important;
  color:#c8d4e5!important;
  border-top:0!important;
}

.ft{
  padding-top:50px!important;
}

footer h4,.footer h4,.ft h4{
  color:#fff!important;
}

footer a,.footer a,.ft a{
  color:#c8d4e5!important;
}
footer a:hover,.footer a:hover,.ft a:hover{
  color:#fff!important;
}

.ft-bot{
  border-top-color:rgba(255,255,255,.12)!important;
}

/* ---------- Responsive polish ---------- */
@media (min-width:980px){
  .headline{
    gap:18px!important;
  }
  .hero h1{
    font-size:58px!important;
  }
}

@media (max-width:720px){
  .wrap,.container{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .hero{
    padding-top:42px!important;
  }

  .hero h1{
    font-size:36px!important;
  }

  .lead-rate{
    padding:22px!important;
    border-radius:15px!important;
  }

  .calc,.calculator{
    padding:17px!important;
  }

  .card,.box,.panel,.rate-card,.exchange-card,.calculator,.calc,
  .lead-rate,.stat,.ex,.exc{
    border-radius:14px!important;
  }

  .ex-h{
    padding:15px!important;
  }

  .ex-p .p{
    padding:14px!important;
  }

  .tbl-w,.table-wrap{
    border-radius:12px!important;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}


/* ===== Enhanced Button Shadows ===== */
button,
.btn,
.button,
.go,
.btn-primary,
.button-primary,
button.primary,
.primary {
  box-shadow:
    0 7px 16px rgba(37, 99, 235, .20),
    0 2px 4px rgba(15, 31, 53, .08) !important;
}

button:hover,
.btn:hover,
.button:hover,
.go:hover,
.btn-primary:hover,
.button-primary:hover,
button.primary:hover,
.primary:hover {
  box-shadow:
    0 12px 24px rgba(37, 99, 235, .28),
    0 4px 8px rgba(15, 31, 53, .10) !important;
}

button:active,
.btn:active,
.button:active,
.go:active,
.btn-primary:active,
.button-primary:active,
button.primary:active,
.primary:active {
  box-shadow:
    0 4px 10px rgba(37, 99, 235, .18) !important;
  transform: translateY(1px) !important;
}