/* ================================================================
   BEST DEAL FOREX — Theme layer (2026-10-28)
   A fresher, more professional finish applied on top of global.css and the page-local
   styles: cobalt hero gradient, floating trust card, rounder cards with soft depth,
   pill buttons, clearer section headings and a deeper footer.

   Loaded LAST (after global.css and each page's own <style>), so it only restyles — it
   adds no layout of its own beyond the floating trust card. To roll the whole look back,
   remove the <link> to this file; nothing else depends on it.
   ================================================================ */

:root {
  --cobalt-1: #0A2A66;
  --cobalt-2: #0B4DA2;
  --cobalt-3: #1272D6;
  --theme-radius: 18px;
  --theme-shadow: 0 1px 2px rgba(10,31,68,.05), 0 10px 28px rgba(10,31,68,.08);
  --theme-shadow-hover: 0 4px 10px rgba(10,31,68,.06), 0 22px 48px rgba(10,31,68,.14);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── Hero panels: one cobalt gradient on the home hero and every inner-page hero ───── */
.hero,
.page-hero {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(18,114,214,.55), transparent 60%),
    linear-gradient(150deg, var(--cobalt-1) 0%, var(--cobalt-2) 62%, var(--cobalt-3) 100%);
}
.hero { padding-bottom: 92px; }          /* room for the floating trust card to overlap */
.page-hero { padding: 64px 0 56px; }

/* Home hero headline: the sub-line reads as a tagline, not a second headline. */
.hero-title .line2 {
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.82); margin-top: 16px; line-height: 1.5;
}
.hero-sub { color: rgba(255,255,255,.78); }

/* ── Floating trust card (the strip that sits under the hero) ──────────────────────── */
.trust-strip {
  background: transparent; border-bottom: 0;
  padding: 0; margin-top: -42px; position: relative; z-index: 6;
}
.trust-strip-inner {
  background: #fff; border-radius: var(--theme-radius);
  box-shadow: var(--theme-shadow-hover);
  padding: 20px 30px; gap: 14px 38px;
}
.trust-item { font-size: .84rem; }
.trust-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--blue-pale); color: var(--blue);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
/* On pages where the strip follows a short hero it should not collide with the heading. */
.page-hero + .trust-strip { margin-top: -30px; }
@media (max-width: 700px) {
  .trust-strip-inner { padding: 16px 18px; gap: 12px 22px; justify-content: flex-start; }
  .hero { padding-bottom: 76px; }
}

/* ── Section headings: centred rhythm, clearer hierarchy ───────────────────────────── */
.section-label {
  background: var(--blue-pale); color: var(--blue);
  padding: 5px 13px; border-radius: 999px; letter-spacing: .1em;
}
.section-label::before { display: none; }
.section-title {
  font-size: clamp(1.7rem, 3.2vw, 2.55rem);
  letter-spacing: -.02em; line-height: 1.15;
}
.section-subtitle { font-size: 1rem; max-width: 600px; }

/* ── Cards: one radius, one shadow language ────────────────────────────────────────── */
.service-card,
.testi-card,
.why-feature,
.fc-card,
.fc-step,
.sm-box.sm-item,
.rates-card,
.contact-card {
  border-radius: var(--theme-radius);
}
.service-card,
.testi-card,
.fc-card,
.fc-step,
.rates-card {
  border: 1px solid rgba(10,31,68,.07);
  box-shadow: var(--theme-shadow);
}
.service-card:hover,
.testi-card:hover,
.fc-step:hover {
  transform: translateY(-6px);
  box-shadow: var(--theme-shadow-hover);
}
.service-card .service-img { height: 176px; }
.service-link { font-weight: 700; }
.bc-card { border-radius: 20px; }

/* ── Buttons: pill shape, firmer weight ────────────────────────────────────────────── */
.btn-primary,
.btn-gold-lg,
.btn-hero-primary,
.btn-cta-primary,
.btn-quote-small,
.fc-btn,
.btn-submit {
  border-radius: 999px;
}
.btn-hero-secondary,
.btn-cta-secondary,
.btn-outline-dark {
  border-radius: 999px;
}
.btn-primary, .btn-gold-lg, .btn-hero-primary, .btn-cta-primary { font-weight: 800; }

/* ── Hero rate card ────────────────────────────────────────────────────────────────── */
.hero-rate-card {
  border-radius: 20px;
  box-shadow: 0 30px 70px rgba(4,18,48,.45);
}

/* ── Call-to-action band ───────────────────────────────────────────────────────────── */
.cta-section {
  background:
    radial-gradient(700px 320px at 12% 0%, rgba(18,114,214,.6), transparent 60%),
    linear-gradient(135deg, var(--cobalt-1) 0%, var(--cobalt-2) 100%);
}

/* ── Footer: deeper navy, clearer columns ──────────────────────────────────────────── */
footer { background: #071A3F; }
.footer-col-title {
  text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; color: #fff;
  padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-col ul li a { color: rgba(255,255,255,.62); }
.footer-col ul li a:hover { color: var(--gold-light); padding-left: 2px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }

/* ── Focus visibility everywhere ───────────────────────────────────────────────────── */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid var(--blue-light); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .service-card:hover, .testi-card:hover, .fc-step:hover { transform: none; }
}