/* ══════════════════════════════════════════════════════════════
   THEME · BIGTECH-STYLE HOMEPAGE FOR SGFX
   Recreates the Bigtech ICO template look (dark navy→cyan gradient
   bands with straight edges, choose cards, timeline roadmap,
   glass testimonials, FAQ accordion, contact + newsletter) in the
   SGFX brand system. Self-contained, namespaced `bt-`, reuses the
   tokens + .section-header + buttons from styles.css.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* --teal-deep / --teal-bright now live in styles.css alongside the rest of
     the brand tokens, so every page gets them, not just this one. */
  /* Formerly a violet accent; the brand gradient is now navy → cyan only, so
     these resolve to the cyan end / navy anchor and every gradient that paired
     with them flips to the navy-cyan identity. */
  --bt-violet: #00FFF2;
  --bt-violet-deep: #061B3F;
  --bt-band-shadow: 0 30px 80px -30px rgba(3, 9, 25, .55);
}

/* DESIGN.md specifies a single typeface (Poppins) carrying the whole
   hierarchy by weight, so numerals use tabular figures rather than a
   second family. */

/* ── shared layout ─────────────────────────────────────────── */
.bt-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.bt-section { padding: 110px 0; position: relative; }
.bt-section .section-header { margin-bottom: 60px; }

/* ── dark gradient band + glows ────────────────────────────── */
.bt-band {
  position: relative;
  background:
    radial-gradient(120% 90% at 12% 12%, rgba(0, 194, 181, .34), transparent 55%),
    radial-gradient(120% 110% at 88% 92%, rgba(0, 255, 242, .22), transparent 55%),
    linear-gradient(158deg, #030F25 0%, #061B3F 52%, #0D2856 100%);
  isolation: isolate;
  overflow: hidden;
}
.bt-band .bt-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; opacity: .5;
}
.bt-band .bt-orb.a { width: 380px; height: 380px; left: -90px; top: 8%;  background: radial-gradient(circle, rgba(0, 255, 242, .5), transparent 70%); }
.bt-band .bt-orb.b { width: 460px; height: 460px; right: -120px; bottom: -60px; background: radial-gradient(circle, rgba(0, 255, 242, .32), transparent 70%); }

/* Bands meet neighbouring sections at straight horizontal edges (the wave
   dividers were removed). */

/* ══ ABOUT ═════════════════════════════════════════════════ */
.bt-about { background: var(--surface); }
.bt-about-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.bt-about-visual { position: relative; }
.bt-about-visual img {
  width: 100%; border-radius: 20px; display: block;
  box-shadow: 0 40px 90px -40px rgba(6, 27, 63, .45);
}
.bt-about-visual::before {
  content: ""; position: absolute; inset: auto -22px -22px auto; width: 62%; height: 62%;
  border-radius: 20px; z-index: -1;
  background: linear-gradient(135deg, var(--teal-bright), var(--bt-violet));
  opacity: .16;
}
.bt-badge-float {
  position: absolute; left: -24px; bottom: 28px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 18px; display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 50px -18px rgba(6, 27, 63, .35);
}
.bt-badge-float i, .bt-badge-float svg { width: 26px; height: 26px; color: var(--teal-deep); }
.bt-badge-float strong { display: block; font-size: 15px; color: var(--ink); font-weight: 700; }
.bt-badge-float span { font-size: 12.5px; color: var(--muted); }

.bt-about .section-header { margin-bottom: 22px; text-align: left; }
.bt-about-lede { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 22px; }
.bt-check { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 13px; }
.bt-check li { display: flex; align-items: flex-start; gap: 12px; font-size: 15.5px; color: var(--ink); font-weight: 500; }
.bt-check li i, .bt-check li svg { width: 20px; height: 20px; color: var(--teal-deep); flex-shrink: 0; margin-top: 2px; }

/* ══ TRUST (headline left, lede right, five pillars below) ══ */
/* Focal statement + orbit: a locked brand statement beside the five pillars
   as circular nodes staggered along a gentle arc, over a faint orbit ring. */
.bt-trust { background: var(--surface); padding: 96px 0 104px; overflow: hidden; }
.bt-trust-orbit {
  display: grid; grid-template-columns: 0.86fr 1.14fr; gap: 44px 80px; align-items: center;
}
.bt-trust-focal { position: sticky; top: calc(var(--topbar-h) + 118px); }
.bt-trust-eyebrow {
  display: block; margin-bottom: 18px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--teal-deep);
}
.bt-trust-focal h2 {
  margin: 0 0 22px; font-size: clamp(2.1rem, 3.5vw, 3.1rem); font-weight: 800;
  color: var(--ink); letter-spacing: -.035em; line-height: 1.04; text-wrap: balance;
}
.bt-trust-focal > p {
  margin: 0 0 28px; font-size: 16.5px; line-height: 1.7;
  color: var(--muted); max-width: 42ch; text-wrap: pretty;
}
.bt-trust-badge {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px;
  padding: 18px 20px; border-radius: 14px;
  background: rgba(0, 194, 181, .08); border: 1px solid rgba(0, 133, 123, .20);
}
.bt-trust-badge i, .bt-trust-badge svg { width: 26px; height: 26px; color: var(--teal-deep); flex-shrink: 0; margin-top: 1px; }
.bt-trust-badge strong { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 3px; letter-spacing: -.01em; }
.bt-trust-badge span { font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.bt-trust-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: var(--teal-deep); text-decoration: none;
}
.bt-trust-cta i, .bt-trust-cta svg { width: 17px; height: 17px; transition: transform .3s; }
.bt-trust-cta:hover i, .bt-trust-cta:hover svg { transform: translateX(4px); }

.bt-trust-pillars {
  position: relative; list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 30px;
}
/* faint orbit ring the nodes drift along */
.bt-trust-pillars::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 540px; height: 540px; right: -140px; top: 50%; transform: translateY(-50%);
  border-radius: 50%; border: 1px solid rgba(0, 194, 181, .16);
  background: radial-gradient(circle, rgba(0, 194, 181, .05), transparent 62%);
}
.bt-orbit-item {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  max-width: 470px; margin-left: var(--stagger, 0);
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
/* gentle bow: indents grow to the middle node, then ease back out */
.bt-orbit-item:nth-child(2), .bt-orbit-item:nth-child(4) { --stagger: 9%; }
.bt-orbit-item:nth-child(3) { --stagger: 15%; }
.bt-orbit-item:hover { transform: translateX(7px); }
.bt-orbit-ic {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); flex-shrink: 0;
  box-shadow: 0 14px 30px -18px rgba(6, 27, 63, .4);
  transition: background .4s ease, border-color .4s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
}
.bt-orbit-ic i, .bt-orbit-ic svg { width: 23px; height: 23px; color: var(--teal-deep); transition: color .4s ease; }
.bt-orbit-item:hover .bt-orbit-ic { background: var(--teal-deep); border-color: var(--teal-deep); transform: scale(1.07); }
.bt-orbit-item:hover .bt-orbit-ic i, .bt-orbit-item:hover .bt-orbit-ic svg { color: #fff; }
.bt-orbit-item h3 { margin: 7px 0 7px; font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.bt-orbit-item p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .bt-orbit-item, .bt-orbit-ic, .bt-trust-cta i, .bt-trust-cta svg { transition: none; }
}

/* ══ PAYMENT METHODS (dark band, copy left, 2x2 marks right) ══ */
.bt-pay {
  position: relative; isolation: isolate; overflow: hidden;
  /* straight edges, so no extra clearance for wave dividers is needed */
  padding: 92px 0 96px; margin-top: 30px;
  background:
    radial-gradient(110% 90% at 8% 10%, rgba(0, 194, 181, .18), transparent 58%),
    linear-gradient(150deg, #030F25 0%, #061B3F 55%, #0D2856 100%);
}
.bt-pay-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.bt-pay-eyebrow {
  display: block; margin-bottom: 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan);
}
.bt-pay-copy h2 {
  margin: 0 0 18px; font-size: clamp(1.9rem, 3.4vw, 2.85rem); font-weight: 800;
  color: #fff; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance;
}
.bt-pay-copy p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--on-dark-mut); max-width: 46ch; text-wrap: pretty; }
.bt-pay-secure {
  display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 30px;
  font-size: 13.5px; line-height: 1.5; color: var(--on-dark-mut); max-width: 40ch;
}
.bt-pay-secure i, .bt-pay-secure svg { width: 17px; height: 17px; color: var(--cyan); flex-shrink: 0; margin-top: 1px; }

/* Payment methods as an infinite looping marquee of logo chips. The track holds
   two identical sets and slides -50%, so the loop is seamless. */
.bt-pay-copy--center { text-align: center; max-width: 860px; margin: 0 auto; }
.bt-pay-copy--center p { max-width: 52ch; margin-left: auto; margin-right: auto; }
/* keep the headline on a single line once there's room for it */
@media (min-width: 800px) { .bt-pay-copy--center h2 { white-space: nowrap; } }
.bt-pay-secure--center { display: flex; justify-content: center; text-align: left; margin: 0 auto 6px; max-width: 48ch; }

.bt-pay-marquee {
  position: relative; margin: 44px 0 30px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.bt-pay-track { display: flex; width: max-content; animation: bt-pay-scroll 32s linear infinite; }
.bt-pay-marquee:hover .bt-pay-track { animation-play-state: paused; }
.bt-pay-chip {
  flex: none; display: inline-flex; align-items: center; gap: 13px; margin-right: 18px;
  padding: 17px 28px; border-radius: 14px; white-space: nowrap;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px);
}
.bt-pay-chip span { font-size: 15px; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.bt-pay-mark { display: grid; place-items: center; }
.bt-pay-mark svg { height: 26px; width: auto; max-width: 46px; display: block; }
.bt-pay-mark.is-line svg { color: var(--cyan); height: 24px; }
@keyframes bt-pay-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .bt-pay-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 14px; }
}
.bt-pay-note {
  margin: 40px auto 0; text-align: center; font-size: 13px; line-height: 1.65;
  color: rgba(255, 255, 255, .55); max-width: 58ch;
}

/* ══ MARKETS · bento grid of asset classes ═════════════════ */
.mk-markets { background: var(--surface-2); padding: 96px 0 104px; }
.mk-head { text-align: center; margin: 0 auto 52px; max-width: 640px; }
.mk-head h2 {
  margin: 0 0 12px; font-size: clamp(2rem, 3.4vw, 2.85rem); font-weight: 800;
  color: var(--ink); letter-spacing: -.03em; line-height: 1.1; text-wrap: balance;
}
.mk-head p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }

/* 4-col bento. Two wide tiles (Forex, Stocks) each span two columns; the rest
   auto-place, giving row 1 = wide·small·small and row 2 = small·wide·small. */
.mk-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 296px;
  gap: 20px;
}
.mk-tile {
  position: relative; isolation: isolate; overflow: hidden;
  grid-column: span 1;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: 34px 34px 32px; border-radius: 16px; text-decoration: none;
  /* Same navy + teal/cyan gradient as every dark section band (.bt-band). */
  background:
    radial-gradient(120% 90% at 12% 12%, rgba(0, 194, 181, .30), transparent 55%),
    radial-gradient(120% 110% at 88% 92%, rgba(0, 255, 242, .20), transparent 55%),
    linear-gradient(158deg, #030F25 0%, #061B3F 52%, #0D2856 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  box-shadow: 0 22px 50px -34px rgba(3, 9, 25, .6);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, border-color .5s;
}
.mk-tile.is-wide { grid-column: span 2; }
.mk-tile:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 255, 242, .30);
  box-shadow: 0 36px 70px -34px rgba(3, 9, 25, .7);
}

.mk-tile h3 {
  margin: 0 0 14px; font-size: clamp(1.55rem, 2.3vw, 2.3rem); font-weight: 600;
  color: #fff; letter-spacing: -.02em; line-height: 1.04; text-wrap: balance;
}
.mk-tile > p {
  margin: 0; font-size: 15.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .82); max-width: 44ch;
}
.mk-cta {
  position: relative; z-index: 1; align-self: flex-start;
  margin-top: 20px; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--cyan); font-size: 12px; font-weight: 500;
  transition: background .3s, border-color .3s;
}
.mk-cta svg { width: 13px; height: 13px; transition: transform .3s; }
.mk-tile:hover .mk-cta { background: rgba(0, 255, 242, .12); border-color: rgba(0, 255, 242, .38); }
.mk-tile:hover .mk-cta svg { transform: translateX(4px); }

/* faint watermark glyph, lower-right, sitting behind the copy */
.mk-ic {
  position: absolute; right: 26px; bottom: 26px; z-index: -1;
  width: 88px; height: 88px; border-radius: 18px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08);
}
.mk-ic svg { width: 42px; height: 42px; color: rgba(255, 255, 255, .22); }

.mk-note { margin: 34px auto 0; text-align: center; font-size: 12.5px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .mk-tile, .mk-cta svg { transition: none; }
}
@media (max-width: 900px) {
  .mk-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 248px; }
  .mk-tile.is-wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .mk-markets { padding: 68px 0 76px; }
  .mk-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .mk-tile, .mk-tile.is-wide { grid-column: span 1; min-height: 208px; }
  .mk-ic { width: 72px; height: 72px; }
  .mk-ic svg { width: 34px; height: 34px; }
}

/* ══ MARKETS (real imagery, captions sit below the image) ══ */
.bt-markets { background: var(--surface-2); }
.bt-markets-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.bt-market {
  display: block; text-decoration: none; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid var(--line);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s, border-color .35s;
}
.bt-market:hover { transform: translateY(-6px); border-color: rgba(0, 133, 123, .45); box-shadow: 0 26px 60px -34px rgba(6, 27, 63, .5); }
.bt-market-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); }
.bt-market-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.bt-market:hover .bt-market-img img { transform: scale(1.05); }
.bt-market-body { padding: 20px 22px 22px; }
.bt-market-name { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.bt-market-name i, .bt-market-name svg { width: 19px; height: 19px; color: var(--teal-deep); }
.bt-market-meta { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }

/* ══ CHOOSE (on dark band) ═════════════════════════════════ */
.bt-choose { padding-top: 150px; padding-bottom: 150px; }
.bt-choose-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
}
.bt-choose-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 18px; padding: 34px 26px; backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s, background .35s;
}
.bt-choose-card:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 255, 242, .38);
  background: rgba(255, 255, 255, .06);
}
.bt-choose-icon {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(0, 194, 181, .22), rgba(0, 255, 242, .28));
  border: 1px solid rgba(0, 255, 242, .25);
}
.bt-choose-icon i, .bt-choose-icon svg { width: 30px; height: 30px; color: #fff; }
.bt-choose-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 10px; line-height: 1.25; }
.bt-choose-card p { font-size: 14.5px; line-height: 1.65; color: var(--on-dark-mut); margin: 0; }

/* ══ COUNTER STATS ═════════════════════════════════════════ */
.bt-counter { background: var(--surface); padding: 96px 0; }
.bt-counter-inner {
  background: linear-gradient(150deg, #030F25, #0D2856);
  border-radius: 24px; padding: 54px 40px; position: relative; overflow: hidden;
  box-shadow: var(--bt-band-shadow);
}
.bt-counter-inner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(100% 120% at 0% 0%, rgba(0, 194, 181, .3), transparent 55%),
              radial-gradient(90% 120% at 100% 100%, rgba(0, 255, 242, .30), transparent 55%);
}
/* embedded economic-calendar widget (replaces the stat counters) */
.bt-cal-head { position: relative; text-align: center; margin-bottom: 26px; }
.bt-cal-eyebrow {
  display: block; margin-bottom: 10px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
}
.bt-cal-head h2 {
  margin: 0; font-size: clamp(1.5rem, 2.6vw, 2.05rem); font-weight: 800;
  color: #fff; letter-spacing: -.025em; line-height: 1.1; text-wrap: balance;
}
.bt-cal-widget {
  position: relative; border-radius: 14px; overflow: hidden;
  background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .08);
}

/* full-width variant: the calendar becomes its own edge-to-edge dark band */
.bt-counter.bt-calfull {
  position: relative; isolation: isolate; overflow: hidden; padding: 84px 0; margin: 20px 0;
  background:
    radial-gradient(80% 120% at 0% 0%, rgba(0, 194, 181, .22), transparent 55%),
    radial-gradient(80% 120% at 100% 100%, rgba(0, 255, 242, .18), transparent 55%),
    linear-gradient(150deg, #030F25 0%, #061B3F 55%, #0D2856 100%);
}
.bt-calfull .bt-cal-head { margin-bottom: 30px; }
.bt-calfull .bt-cal-widget {
  width: 100%; max-width: 1720px; margin: 0 auto;
  padding: 0; background: transparent; border: 0; border-radius: 0;
  padding-inline: clamp(16px, 4vw, 56px);
}
.bt-calfull .bt-stats-note { margin-top: 24px; }
.bt-stats {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.bt-stat { text-align: center; padding: 8px 12px; position: relative; }
.bt-stat + .bt-stat::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
  background: rgba(255, 255, 255, .1);
}
.bt-stat-ic { width: 34px; height: 34px; color: var(--cyan); margin: 0 auto 12px; }
.bt-stat-num {
  font-size: clamp(1.9rem, 3.2vw, 2.7rem); font-weight: 800; color: #fff;
  letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums;
}
.bt-stat-num .accent { color: var(--cyan); }
.bt-stat-lbl { margin-top: 10px; font-size: 13.5px; color: var(--on-dark-mut); font-weight: 500; }
.bt-stats-note { position: relative; margin: 32px 0 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .6); }

/* ══ ROADMAP / JOURNEY ═════════════════════════════════════ */
.bt-road { background: var(--surface-2); }

.bt-road-flow {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 26px;
}
/* The rail is drawn per item rather than once across the container, so each
   segment carries that step's colour and stays locked to its own dot no
   matter how the grid box is offset. Label (16px) + margin (16px) + half the
   16px dot puts the centre at 40px inside every item. */
.bt-road-item::before {
  content: ""; position: absolute; z-index: 0;
  top: 40px; transform: translateY(-1px);
  left: 0; right: -26px; height: 2px;
  background: var(--bt-c); opacity: .3;
}
.bt-road-item:last-child::before { right: 0; }

/* Each step carries its own colour; everything below reads from --bt-c. */
.bt-road-item { position: relative; padding-right: 16px; --bt-c: var(--teal-bright); --bt-c-soft: rgba(0, 194, 181, .18); }
.bt-road-item:nth-child(2) { --bt-c: var(--cyan); --bt-c-soft: rgba(0, 255, 242, .24); }
.bt-road-item:nth-child(3) { --bt-c: var(--bt-violet); --bt-c-soft: rgba(0, 255, 242, .18); }
.bt-road-item:nth-child(4) { --bt-c: var(--navy); --bt-c-soft: rgba(6, 27, 63, .12); }

/* label, above the rail */
.bt-road-stage {
  display: block; height: 16px; line-height: 16px; margin-bottom: 16px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
  color: var(--bt-c);
}
/* Pure cyan is a signal colour, not a text colour: on this near-white panel it
   fails AA, so the cyan step's label borrows the readable deep teal. */
.bt-road-item:nth-child(2) .bt-road-stage { color: var(--teal-deep); }

/* marker on the rail, centred over the connector below it */
.bt-road-dot {
  display: block; position: relative; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bt-c); box-shadow: 0 0 0 7px var(--bt-c-soft);
}

/* connector line, with the copy hanging off it */
.bt-road-body {
  margin-left: 7px;              /* centres the 2px rule under the 16px dot */
  padding: 24px 0 6px 24px;
  border-left: 2px solid var(--bt-c);
}
.bt-road-body h4 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 0 0 12px; letter-spacing: -.01em; }
.bt-road-body p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin: 0; }

/* ══ TESTIMONIALS (on dark band) ═══════════════════════════ */
.bt-quotes-wrap { padding-top: 150px; padding-bottom: 150px; }
.bt-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; max-width: 980px; margin: 0 auto; }
.bt-quote {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 20px; padding: 34px 32px; backdrop-filter: blur(8px);
}
.bt-quote-stars { display: flex; gap: 4px; margin-bottom: 18px; }
.bt-quote-stars i, .bt-quote-stars svg { width: 18px; height: 18px; color: #FFC542; fill: #FFC542; }
.bt-quote blockquote { margin: 0 0 22px; font-size: 17px; line-height: 1.65; color: var(--on-dark); font-weight: 500; }
.bt-quote figcaption { display: flex; align-items: center; gap: 13px; }
.bt-quote-av { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--teal-deep), var(--bt-violet)); }
.bt-quote-av i, .bt-quote-av svg { width: 22px; height: 22px; color: #fff; }
.bt-quote figcaption strong { display: block; color: #fff; font-size: 14.5px; }
.bt-quote figcaption em { font-style: normal; color: var(--on-dark-mut); font-size: 12.5px; }

/* ══ CLIENT REVIEWS (real Trustpilot reviews, own carousel) ═ */
.bt-reviews-wrap { position: relative; }
/* Horizontal carousel: native scroll-snap so touch + keyboard work without
   a library; the arrows just nudge scrollLeft. */
.bt-reviews {
  display: flex; gap: 22px;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* proximity, not mandatory: mandatory forces a non-zero rest offset that
     pushed the third card past the edge. */
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 4px 2px 10px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.bt-reviews::-webkit-scrollbar { display: none; }
.bt-review {
  margin: 0;                               /* <figure> ships a 40px UA margin — kill it */
  /* exactly three across on desktop (gap 22px); 4th and 5th are a scroll away */
  flex: 0 0 calc((100% - 44px) / 3); scroll-snap-align: start;
  align-self: start;                       /* don't stretch to the tallest card */
  display: flex; flex-direction: column; gap: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px; padding: 22px 22px; backdrop-filter: blur(6px);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), border-color .35s;
}
@media (max-width: 900px) { .bt-review { flex-basis: calc((100% - 22px) / 2); } }   /* two across */
@media (max-width: 600px) { .bt-review { flex-basis: 85%; } }                        /* one + peek */
.bt-review:hover { transform: translateY(-5px); border-color: rgba(0, 255, 242, .3); }
.bt-review-stars { display: flex; gap: 3px; }
.bt-review-stars i, .bt-review-stars svg { width: 17px; height: 17px; color: #00B67A; fill: #00B67A; }
.bt-review-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; line-height: 1.35; }
.bt-review-text {
  margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .72);
  /* keep every card compact and uniform, however long the source review */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  line-clamp: 4; overflow: hidden;
}
.bt-review-by {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13px;
}
.bt-review-by strong { color: #fff; font-weight: 600; }
.bt-review-by time { color: rgba(255, 255, 255, .5); }
.bt-rev-nav { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.bt-rev-btn {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; cursor: pointer; padding: 0;
  transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.bt-rev-btn:hover:not(:disabled) { background: rgba(0, 255, 242, .12); border-color: var(--cyan); color: var(--cyan); }
.bt-rev-btn:disabled { opacity: .3; cursor: default; }
.bt-rev-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.bt-rev-btn svg { width: 19px; height: 19px; }
@media (prefers-reduced-motion: reduce) { .bt-reviews { scroll-behavior: auto; } }

/* ══ TRUSTPILOT (official TrustBox widgets) ════════════════ */
/* Trustpilot renders these in its own iframe, so we only own the
   spacing around them; never restyle the widget internals. */
.bt-tp-score { margin: 0 auto 26px; max-width: 420px; }
.bt-tp-carousel { margin: 0 auto; max-width: 1100px; }
.bt-tp-score .trustpilot-widget,
.bt-tp-carousel .trustpilot-widget { width: 100%; }
.bt-tp-note {
  margin: 22px auto 0; max-width: 62ch; text-align: center;
  font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .55);
}
.bt-tp-note a { color: var(--cyan); font-weight: 600; }

/* ══ REVIEW PLATFORM STRIP ═════════════════════════════════ */
.bt-platforms { background: var(--surface); padding: 56px 0 64px; }
.bt-platforms-label {
  text-align: center; margin: 0 0 26px;
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.bt-platforms-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 14px 18px;
}
.bt-platform {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: 12px;
  background: #fff; border: 1px solid var(--line);
  color: var(--ink); font-size: 14.5px; font-weight: 600;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .3s, box-shadow .3s;
}
.bt-platform:hover {
  transform: translateY(-3px); opacity: 1;
  border-color: rgba(0, 133, 123, .4);
  box-shadow: 0 18px 40px -30px rgba(6, 27, 63, .5);
}
/* each mark keeps its own brand colour via --mark */
.bt-platform svg { width: 20px; height: 20px; color: var(--mark, var(--navy)); flex-shrink: 0; }

/* On-band variant: the strip lives inside the dark reviews section. The chips
   stay solid white so each brand logo renders in its true colours. */
/* room between the "Find our reviews on" strip and the review cards below */
.bt-platforms--onband { background: none; padding: 0; margin-bottom: 34px; }
.bt-platforms--onband .bt-platforms-label { color: var(--on-dark-mut); }
.bt-platforms--onband .bt-platform {
  background: #fff; border-color: transparent;
  padding: 12px 20px; min-height: 52px;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .55);
}
.bt-platforms--onband .bt-platform:hover {
  border-color: transparent;
  box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .6);
}

/* ── brand logo lockups (recognizable inline recreations) ──── */
.pl-logo { display: inline-flex; align-items: center; gap: 8px; line-height: 1; }
.pl-logo svg { width: 22px; height: 22px; }
.pl-logo b { font-weight: 800; letter-spacing: -.01em; }

.pl-trustpilot b { font-size: 18px; color: #191919; }

.pl-google { gap: 6px; }
.pl-goog { font-size: 19px; letter-spacing: -.5px; }
.pl-goog i { font-style: normal; }
.pl-google em { font-style: normal; font-size: 13px; font-weight: 600; color: #5F6368; }
.pl-gstars { font-size: 11px; letter-spacing: 1px; color: #FBBC05; }

.pl-wikifx { gap: 8px; }
.pl-wfx-badge { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: #1A1D24; }
.pl-wfx-badge svg { width: 18px; height: 18px; }
.pl-wikifx b { font-size: 18px; color: #1A1D24; }
.pl-wfx-x { color: #1A1D24; }

@media (max-width: 560px) {
  .bt-platforms--onband .bt-platform { padding: 10px 16px; min-height: 46px; }
  .pl-trustpilot b, .pl-goog, .pl-wikifx b { font-size: 16px; }
}

/* ══ FAQ ═══════════════════════════════════════════════════ */
.bt-faq { background: linear-gradient(180deg, #F4F2FB 0%, #F7F9FC 100%); }
.bt-faq-list { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; }
.bt-faq-item { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .3s, border-color .3s; }
.bt-faq-item.is-open { border-color: rgba(0, 133, 123, .4); box-shadow: 0 20px 50px -30px rgba(6, 27, 63, .3); }
.bt-faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 22px 26px; font-size: 16.5px; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; font-family: inherit;
}
.bt-faq-q .bt-faq-sign { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--navy-50); transition: background .3s, transform .3s; }
.bt-faq-q .bt-faq-sign i { width: 16px; height: 16px; color: var(--navy); transition: transform .3s; }
.bt-faq-item.is-open .bt-faq-sign { background: var(--teal-deep); }
.bt-faq-item.is-open .bt-faq-sign i { color: #fff; transform: rotate(180deg); }
.bt-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.bt-faq-item.is-open .bt-faq-a { grid-template-rows: 1fr; }
.bt-faq-a-inner { overflow: hidden; }
.bt-faq-a p { margin: 0; padding: 0 26px 24px; font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ══ CONTACT (on dark band) ════════════════════════════════ */
.bt-contact { padding-top: 140px; padding-bottom: 140px; }
.bt-contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: stretch; }
.bt-contact-info h2 { font-size: clamp(1.9rem, 3vw, 2.4rem); font-weight: 800; color: #fff; letter-spacing: -.02em; margin: 0 0 14px; }
.bt-contact-info > p { font-size: 16px; line-height: 1.7; color: var(--on-dark-mut); margin: 0 0 30px; max-width: 420px; }
.bt-contact-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.bt-contact-row:last-child { border-bottom: 1px solid rgba(255, 255, 255, .08); }
.bt-contact-row .bt-c-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, rgba(0, 194, 181, .2), rgba(0, 255, 242, .26)); border: 1px solid rgba(0, 255, 242, .2); }
.bt-contact-row .bt-c-ic i, .bt-contact-row .bt-c-ic svg { width: 22px; height: 22px; color: #fff; }
.bt-contact-row em { font-style: normal; display: block; font-size: 12.5px; color: var(--on-dark-mut); margin-bottom: 3px; }
.bt-contact-row strong { font-size: 15.5px; color: #fff; font-weight: 600; }

.bt-form { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); border-radius: 20px; padding: 36px; backdrop-filter: blur(8px); }
.bt-form h3 { font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 22px; }
.bt-form label { display: block; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .82); margin-bottom: 7px; }
.bt-form-field { margin-bottom: 18px; }
.bt-form input, .bt-form textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px; font-family: inherit; font-size: 15px;
  color: #fff; background: rgba(3, 9, 25, .4); border: 1px solid rgba(255, 255, 255, .12);
  transition: border-color .25s, background .25s;
}
.bt-form input::placeholder, .bt-form textarea::placeholder { color: rgba(255, 255, 255, .62); }
.bt-form input:focus, .bt-form textarea:focus { outline: none; border-color: var(--cyan); background: rgba(3, 9, 25, .6); }
.bt-form textarea { resize: vertical; min-height: 110px; }
.bt-form .btn-cyan { width: 100%; justify-content: center; margin-top: 4px; }

/* ══ NEWSLETTER (on dark band) ═════════════════════════════ */
.bt-news { padding: 40px 0 96px; }
.bt-news-inner {
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 24px;
  box-shadow: 0 30px 70px -44px rgba(3, 9, 25, .7);
  padding: 44px 48px; display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap;
}
/* the card is always white (it sits on the dark contact band in both themes),
   so use fixed light-scheme colours, not theme-aware tokens that would flip. */
.bt-news-inner h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); font-weight: 800; color: #061B3F; letter-spacing: -.02em; margin: 0 0 8px; }
.bt-news-inner p { margin: 0; font-size: 15px; color: #637381; }
.bt-news-form { display: flex; gap: 12px; flex: 1; min-width: 320px; max-width: 520px; }
.bt-news-form input {
  flex: 1; padding: 15px 18px; border-radius: 12px; font-family: inherit; font-size: 15px; color: #111928;
  background: #F3F4F6; border: 1px solid #E5E7EB;
}
.bt-news-form input::placeholder { color: #9CA3AF; }
.bt-news-form input:focus { outline: none; border-color: var(--cyan); background: #fff; }
/* navy subscribe button (overrides the cyan default for this card only) */
.bt-news-form .btn-cyan { white-space: nowrap; background: #061B3F; color: #fff; border-color: #061B3F; box-shadow: 0 10px 26px -12px rgba(6, 27, 63, .6); }
.bt-news-form .btn-cyan:hover { background: #0B2652; border-color: #0B2652; }

/* ══ RISK STRIP ════════════════════════════════════════════ */
.bt-risk { background: var(--navy-dark); padding: 26px 0; }
.bt-risk p { max-width: 1000px; margin: 0 auto; padding: 0 24px; font-size: 12.5px; line-height: 1.6; color: var(--on-dark-mut); text-align: center; }
.bt-risk strong { color: var(--on-dark); }

/* ══ RESPONSIVE ════════════════════════════════════════════ */
@media (max-width: 992px) {
  .bt-pay-grid { grid-template-columns: 1fr; gap: 36px; }
  /* stack the focal panel above the pillars; flatten the orbit stagger */
  .bt-trust-orbit { grid-template-columns: 1fr; gap: 44px; align-items: start; }
  .bt-trust-focal { position: static; }
  .bt-orbit-item:nth-child(n) { --stagger: 0; max-width: 560px; }
  .bt-trust-pillars::before { display: none; }
  .bt-markets-grid { grid-template-columns: repeat(2, 1fr); }
  .bt-about-grid { grid-template-columns: 1fr; gap: 40px; }
  .bt-about-visual { order: -1; }
  .bt-choose-grid { grid-template-columns: repeat(2, 1fr); }
  .bt-stats { grid-template-columns: repeat(2, 1fr); gap: 34px 20px; }
  .bt-stat + .bt-stat::before { display: none; }
  .bt-road-flow { grid-template-columns: repeat(2, 1fr); gap: 40px 26px; }
  /* Once the steps wrap onto multiple rows the horizontal rail no longer
     describes a sequence, so the vertical connectors carry it alone. */
  .bt-road-item::before { display: none; }
  .bt-quotes { grid-template-columns: 1fr; }
  .bt-contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .bt-pay { padding: 64px 0 70px; }
  .bt-pay-chip { padding: 14px 20px; }
  .bt-pay-mark svg { height: 22px; }
  .bt-trust { padding: 64px 0 70px; }
  .bt-section { padding: 80px 0; }
  .bt-choose, .bt-quotes-wrap, .bt-contact { padding-top: 110px; padding-bottom: 110px; }
  .bt-choose-grid { grid-template-columns: 1fr; }
  .bt-markets-grid { grid-template-columns: 1fr; }
  .bt-stats { grid-template-columns: 1fr; }
  .bt-road-flow { grid-template-columns: 1fr; }
  .bt-counter-inner { padding: 40px 24px; }
  .bt-news-inner, .bt-form { padding: 30px 24px; }
  .bt-news-form { flex-direction: column; min-width: 0; }
}


/* ── Light variant of the payment section ──────────────────────────
   Used so #funding alternates against the dark bands around it.
   Chips stay as dark pills so the payment marks remain legible. */
.bt-pay--light { background: var(--surface); }
.bt-pay--light .bt-pay-eyebrow { color: var(--teal-deep); }
.bt-pay--light .bt-pay-copy h2 { color: var(--ink); }
.bt-pay--light .bt-pay-copy p { color: var(--muted); }
.bt-pay--light .bt-pay-secure { color: var(--muted); }
.bt-pay--light .bt-pay-secure i,
.bt-pay--light .bt-pay-secure svg { color: var(--teal-deep); }
.bt-pay--light .bt-pay-note { color: var(--muted); }
.bt-pay--light .bt-pay-chip {
  background: #0C2140;
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: none;
}

/* ── Static 2×2 payment grid (replaces the infinite marquee) ──────── */
.bt-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.bt-pay-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  min-height: 132px; padding: 30px 20px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.bt-pay-card .bt-pay-mark svg { height: 30px; }
.bt-pay-card-label { font-size: 15px; font-weight: 600; color: #fff; }
.bt-pay-grid .bt-pay-note { text-align: left; margin: 24px 0 0; max-width: 48ch; }
/* dark cards on the light section so the payment marks stay legible */
.bt-pay--light .bt-pay-card { background: #0C2140; border-color: rgba(255, 255, 255, .12); }
@media (max-width: 560px) {
  .bt-pay-methods { gap: 14px; }
  .bt-pay-card { min-height: 112px; padding: 24px 14px; }
}