/* ==========================================================================
   Forex Strategy Studio: shared styles for the redesigned pages

   Tokens, base, header, mobile menu, scroll reveal, the closing CTA and the
   footer. Every redesigned page loads this first, then its own stylesheet
   (landing.css, legal.css...).
   Breakpoints (mobile first): 768 tablet, 992 small laptop, 1200 desktop,
   1240 full header nav.
   Direction-sensitive spacing uses logical properties (margin-inline,
   inset-inline...) so an RTL (Arabic) version only needs dir="rtl" plus
   the few physical overrides marked "RTL:".
   ========================================================================== */

:root {
  --bg: #0A0906;
  --bg-alt: #0C0B08;
  --surface: #100F0B;
  --surface-hi: #17150F;

  --text: #F2EEE3;
  --text-2: #D9D4C7;
  --text-3: #C8C3B6;
  --text-4: #B8B2A4;
  --text-5: #A39E90;
  --text-6: #8A8578;

  /* The brand gold of the original site and the app's logo; the lighter
     champagne is the highlight (hover). */
  --gold: #B4A272;
  --gold-hi: #C9B684;
  --gold-rgb: 180, 162, 114;
  --line: rgba(180, 162, 114, 0.14);
  --line-strong: rgba(180, 162, 114, 0.2);

  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Montserrat, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --header-h: 72px;
  --container: 1200px;
  --pad: 20px;

}

@media (min-width: 768px) {
  :root { --pad: 40px; }
}

@media (min-width: 1440px) {
  :root { --pad: 80px; }
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote {
  margin: 0;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--gold-hi);
}

button {
  font-family: inherit;
}

img {
  max-width: 100%;
}

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--pad));
  margin-inline: auto;
  padding-inline: var(--pad);
}

.eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--gold);
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 21px;
  background: var(--gold);
  color: var(--bg);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.btn:hover {
  background: var(--gold-hi);
  color: var(--bg);
}

.btn--lg {
  height: 52px;
  padding: 0 28px;
  border-radius: 26px;
  font-size: 15px;
}

.store-badge img {
  display: block;
  height: 52px;
  width: auto;
}

.qr {
  display: block;
  width: 88px;
  height: 88px;
  padding: 5px;
  border-radius: 8px;
  background: #fff;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-6);
}

.breadcrumb a {
  color: var(--gold);
}

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid rgba(180, 162, 114, 0.12);
}

.site-header__inner {
  max-width: 1440px;
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: flex;
  flex-shrink: 0;
}

.brand img {
  display: block;
  height: 20px;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Phones: the compact one-line logo (the same letters, tighter spacing,
   from the <picture> source) with a compact "Get the app" beside the menu
   button. The logo takes the room left on the row (up to 240px, about
   34px tall); below 375px there is no button, so it gets a little more. */
@media (max-width: 767px) {
  .site-header__inner { gap: 10px; }

  .site-nav { gap: 6px; }

  .site-header .brand,
  .mobile-menu .brand {
    flex: 0 1 auto;
    min-width: 0;
  }

  .site-header .brand img,
  .mobile-menu .brand img {
    width: 240px;
    max-width: 100%;
    height: auto;
  }

  .site-nav .btn {
    height: 36px;
    padding: 0 14px;
    border-radius: 18px;
    font-size: 13px;
  }
}

@media (max-width: 374px) {
  .site-header .brand img,
  .mobile-menu .brand img { width: 250px; }

  .site-nav .btn { display: none; }
}

.nav-links {
  display: none;
  align-items: center;
  gap: 26px;
}

.nav-links a {
  font-size: 14px;
  color: var(--text-3);
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a.active,
.nav-links a[aria-current="page"] {
  color: var(--gold);
}

.nav-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 50%;
  cursor: pointer;
}

.nav-toggle__bar {
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--gold);
}

@media (min-width: 768px) {
  .brand img { height: 36px; }
  .site-nav { gap: 16px; }
}

@media (min-width: 1240px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
}

@media (min-width: 1440px) {
  .brand img { height: 40px; }
  .nav-links { gap: 30px; }
  .nav-links a { font-size: 15px; }
}

/* ---------- Mobile menu (toggled by scripts.js) ---------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad) 32px;
  overflow-y: auto;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.mobile-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease;
}

.mobile-menu__top {
  flex-shrink: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mobile-menu__close {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 50%;
  background: transparent;
  color: var(--gold);
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}

.mobile-menu__links {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
  border-top: 1px solid var(--line);
}

.mobile-menu__links a {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 19px;
  font-weight: 300;
  color: var(--text);
}

.mobile-menu__links a.active,
.mobile-menu__links a[aria-current="page"] {
  color: var(--gold);
}

.mobile-menu__cta {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  justify-content: center;
}

/* ---------- Scroll reveal (Chrome/Edge; elsewhere content is simply shown) ---------- */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes reveal {
  from { opacity: 0; transform: translateY(48px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Closing CTA ---------- */

.closing {
  position: relative;
  overflow: hidden;
  padding: 88px var(--pad) 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  text-align: center;
  border-top: 1px solid var(--line);
}

.closing__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
}

.closing__ring--inner {
  width: min(760px, 150vw);
  border: 1.5px solid rgba(var(--gold-rgb), 0.4);
  background: radial-gradient(closest-side, rgba(var(--gold-rgb), 0.12), transparent);
}

.closing__ring--outer {
  width: min(1100px, 215vw);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
}

.closing__title {
  position: relative;
  font-family: var(--serif);
  font-size: clamp(48px, 12vw, 76px);
  font-weight: 500;
  line-height: 1;
}

.closing__title em {
  font-style: italic;
  color: var(--gold);
  white-space: nowrap;
}

.closing__lead {
  position: relative;
  max-width: 540px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-4);
}

.closing__install {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.closing__install .qr {
  display: none;
  width: 112px;
  height: 112px;
  padding: 6px;
}

.closing__install .store-badge img {
  height: 64px;
}

@media (min-width: 768px) {
  .closing {
    padding: 96px var(--pad) 100px;
    gap: 34px;
  }

  .closing__lead {
    font-size: 17px;
  }
}

@media (min-width: 992px) {
  .closing__install .qr {
    display: block;
  }
}

/* ---------- Closing CTA, compact ---------- */

.closing--compact {
  padding-top: 72px;
  padding-bottom: 76px;
  gap: 22px;
}

.closing--compact .closing__ring--inner {
  width: min(620px, 150vw);
}

.closing--compact .closing__ring--outer {
  width: min(940px, 215vw);
}

.closing--compact .closing__title {
  font-size: clamp(44px, 11vw, 64px);
}

.closing--compact .closing__lead {
  max-width: 460px;
  font-size: 16px;
}

.closing--compact .closing__install .qr {
  width: 100px;
  height: 100px;
}

.closing--compact .closing__install .store-badge img {
  height: 60px;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--line);
}

.site-footer__inner {
  max-width: 1440px;
  margin-inline: auto;
  padding: 40px var(--pad) 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.site-footer .brand img {
  height: 28px;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--gold-rgb), 0.3);
  border-radius: 50%;
  color: var(--gold);
}

.site-footer__social a:hover {
  border-color: var(--gold);
}

.site-footer__social svg {
  width: 18px;
  height: 18px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}

.site-footer__col a {
  color: var(--text-3);
}

.site-footer__col a:hover {
  color: var(--gold);
}

.site-footer__heading {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(var(--gold-rgb), 0.7);
}

.footer-email__btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: 14px;
  cursor: pointer;
}

.footer-email__btn:hover {
  color: var(--gold);
}

/* "Show the email address" inside running text (js/scripts.js) */
.email-reveal {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.email-reveal:hover {
  color: var(--gold-hi);
}

.site-footer__disclaimer {
  max-width: 900px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-6);
}

.site-footer__copy {
  font-size: 12px;
  color: var(--text-6);
}

@media (min-width: 768px) {
  .site-footer .brand img { height: 32px; }

  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 992px) {
  .site-footer__cols {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .site-footer__col--pages {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 48px;
    align-content: start;
  }

  .site-footer__col--pages .site-footer__heading {
    grid-column: 1 / -1;
  }
}

/* ---------- Arabic (lang="ar", dir="rtl") ---------- */

/* Arabic text in IBM Plex Sans Arabic (loaded by Arabic pages); Latin
   runs such as prices and pair names keep the site fonts. */
:root:lang(ar) {
  --sans: "IBM Plex Sans Arabic", Montserrat, system-ui, sans-serif;
  --serif: "IBM Plex Sans Arabic", "Cormorant Garamond", Georgia, serif;
}

/* Letter-spacing breaks the joins between Arabic letters. */
:lang(ar) * {
  letter-spacing: normal !important;
}

/* Arabic has no italic; emphasis stays upright, in gold. */
:lang(ar) .closing__title em {
  font-style: normal;
}

/* ---------- Lightbox (js/scripts.js): screenshots full screen ---------- */

.hero__screen,
.how-step__img,
.how-preview__img,
.feature-show__img,
.feature-card__img,
.ft-phone,
.ft-wide,
[data-zoom] {
  cursor: zoom-in;
}

.how-step__img[data-no-zoom],
.how-preview__img[data-no-zoom],
img[data-no-zoom] {
  cursor: auto;
}

[data-zoom-group]:focus-visible,
img[role="button"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 12px;
}

html.has-lightbox {
  overflow: hidden;
  padding-inline-end: var(--lightbox-gap, 0);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px 24px;
  background: rgba(5, 4, 3, 0.94);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: default;
  transform: scale(0.97);
  transition: transform 0.2s ease;
}

.lightbox.is-open .lightbox__img {
  transform: none;
}

.lightbox__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 50%;
  background: rgba(10, 9, 6, 0.7);
  color: var(--gold);
  cursor: pointer;
}

.lightbox__close:hover,
.lightbox__close:focus-visible {
  border-color: var(--gold);
  color: var(--text);
}

.lightbox__close:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lightbox__close svg {
  width: 22px;
  height: 22px;
}

@media (min-width: 768px) {
  .lightbox {
    padding: 72px 72px 40px;
  }

  .lightbox__close {
    top: 20px;
    inset-inline-end: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lightbox__img {
    transition: none;
  }
}