/* ===================================================================
   Trade Portal — stylesheet
   Palette: charcoal #17191B + white + a confident blue accent #2498C5.
   Mobile-first; RTL by default (Arabic), mirrored for LTR (English).
   =================================================================== */

:root {
  --charcoal-900: #17191b;
  --charcoal-800: #202327;
  --charcoal-700: #2b2f34;
  --charcoal-600: #454a52;
  --charcoal-400: #6b7280;
  --charcoal-200: #e4e6e8;
  --white: #ffffff;
  --off-white: #f5f7f8;
  --blue: #2498c5;
  --blue-dark: #1c7ea3;
  --blue-light: #e8f4f9;
  --blue-glow: rgba(36, 152, 197, 0.35);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(23, 25, 27, 0.06), 0 1px 1px rgba(23, 25, 27, 0.04);
  --shadow-md: 0 8px 24px rgba(23, 25, 27, 0.1);

  --container-w: 1120px;
  --header-h: 68px;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Tahoma", "Noto Kufi Arabic", "Noto Sans Arabic", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--white);
  color: var(--charcoal-800);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--charcoal-900); line-height: 1.2; margin: 0 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.2rem, 6vw, 3.75rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; color: var(--charcoal-700); font-size: 1rem; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}

.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  background: var(--charcoal-900);
  color: var(--white);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  z-index: 200;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* Focus visibility */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 26px;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--blue-dark); }

.btn-secondary {
  background: transparent;
  color: var(--charcoal-900);
  border-color: var(--charcoal-200);
}
.btn-secondary:hover { border-color: var(--blue); background: var(--blue-light); }

.section-dark .btn-secondary,
.hero .btn-secondary,
.page-hero .btn-secondary {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.25);
}
.section-dark .btn-secondary:hover,
.hero .btn-secondary:hover,
.page-hero .btn-secondary:hover { border-color: var(--blue); background: rgba(36, 152, 197, 0.12); }

.btn-whatsapp {
  background: var(--blue);
  color: var(--white);
}
.btn-whatsapp:hover { background: var(--blue-dark); }

.btn-small { padding: 9px 16px; min-height: 40px; font-size: 0.88rem; }
.btn-large { padding: 17px 34px; min-height: 54px; font-size: 1.05rem; }

.icon-wa { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }

/* Header WhatsApp button — icon-only compact circle, all breakpoints */
.header-whatsapp {
  width: 40px;
  height: 40px;
  padding: 0;
  min-height: 0;
  gap: 0;
}
.header-whatsapp span:not(.sr-only) { display: none; }

/* ---------------- Header ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--charcoal-200);
  height: var(--header-h);
}

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark-logo {
  height: 34px;
  width: auto;
  flex-shrink: 0;
}
.wordmark-text {
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--charcoal-900);
  letter-spacing: -0.01em;
}
.wordmark-text strong { font-weight: 800; }

.nav-list-desktop {
  display: flex;
  gap: 18px;
  flex-wrap: nowrap;
}
.nav-list-desktop a {
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--charcoal-700);
  padding: 6px 1px;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.nav-list-desktop a:hover,
.nav-list-desktop a.is-active { color: var(--charcoal-900); border-color: var(--blue); }

.nav-list-mobile { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lang-switch {
  background: transparent;
  border: 1px solid var(--charcoal-200);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal-800);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.lang-switch:hover { border-color: var(--blue); background: var(--blue-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle-bar {
  width: 18px; height: 2px;
  background: var(--charcoal-900);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header content (logo lockup + lang switch/WhatsApp/menu button) is laid
   out with flex-shrink:0 on both sides so it never gets visually squeezed
   or wrapped on tablet/desktop. Below ~420px their combined natural width
   no longer fits an actual 320-360px phone viewport, which caused real
   horizontal page overflow and pushed the menu button off-screen — and,
   as a direct side effect of that same overflow, corrupted the Arabic
   mobile-menu label rendering once opened. Fixing the root cause (making
   the header row fit) resolves both. Nothing is hidden or removed here —
   only spacing and text-size are tightened, and only below 420px; the
   logo, brand name, language switch, WhatsApp button and menu button all
   stay fully visible and at full touch-target size. */
@media (max-width: 420px) {
  .header-inner { gap: 8px; padding-inline: 12px; }
  .wordmark { gap: 6px; }
  .wordmark-text { font-size: 0.98rem; }
  .header-actions { gap: 6px; }
  .lang-switch { padding: 6px 10px; font-size: 0.78rem; }
}

/* A handful of buttons carry longer approved copy (e.g. "Apply as a
   partner on WhatsApp", "Open WhatsApp with this message"). .btn defaults
   to white-space:nowrap so short labels never wrap awkwardly, but on very
   narrow phones that same nowrap forces the long ones past the viewport
   edge. Below 480px, let button text wrap instead of overflowing — this
   never affects short labels (they already fit on one line) and changes
   no copy, sizing, or design at any other breakpoint. */
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; max-width: 100%; }
}

@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--white);
    border-bottom: 1px solid var(--charcoal-200);
    box-shadow: var(--shadow-md);
    padding: 8px 20px 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-list-desktop { display: none; }
  .nav-list-mobile { display: flex; flex-direction: column; }
  .nav-mobile-link {
    display: block;
    padding: 13px 4px;
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--charcoal-800);
    border-bottom: 1px solid var(--charcoal-200);
  }
  .nav-mobile-link.is-active { color: var(--blue-dark); }
  .nav-mobile-whatsapp,
  .nav-mobile-register {
    width: 100%;
    margin-top: 14px;
  }
  .nav-toggle { display: flex; }
  .header-open-account { display: none; }
}

@media (min-width: 901px) {
  .nav-list-mobile { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav, .nav-toggle-bar { transition: none; }
}

/* ---------------- Sections ---------------- */
.section { padding: 64px 0; }
.section-alt { background: var(--off-white); }
.eyebrow {
  color: var(--blue-dark);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.7em;
}
.eyebrow-dark { color: var(--blue); }
.section-head { margin-bottom: 8px; }
.section-subtitle {
  max-width: 560px;
  color: var(--charcoal-400);
  font-size: 1.05rem;
  margin-bottom: 0;
}
.section-subtitle-dark { color: rgba(255, 255, 255, 0.65); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  padding: 56px 0 52px;
  background: var(--charcoal-900);
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  inset: -20% -10% auto auto;
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
[dir="rtl"] .hero-glow { inset: -20% auto auto -10%; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.hero-content { max-width: 620px; min-width: 0; }
.hero h1 { color: var(--white); }
.hero-subtitle {
  font-size: 1.14rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 520px;
  margin-bottom: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 28px;
}

/* ---------------- Regulatory badge (hero) ---------------- */
.regulatory-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(36, 152, 197, 0.12);
  border: 1px solid rgba(36, 152, 197, 0.4);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 10px var(--blue-glow);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.regulatory-badge:hover { border-color: var(--blue); background: rgba(36, 152, 197, 0.18); }
.regulatory-badge-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--blue); }
@media (prefers-reduced-motion: no-preference) {
  .regulatory-badge { animation: tp-badge-glow 3.2s ease-in-out infinite; }
}
@keyframes tp-badge-glow {
  0%, 100% { box-shadow: 0 0 6px var(--blue-glow); }
  50% { box-shadow: 0 0 16px var(--blue-glow); }
}

.hero-visual {
  display: flex;
  justify-content: center;
  opacity: 0.9;
  min-width: 0;
}
.hero-graphic { width: 100%; max-width: 420px; height: auto; }

/* Narrow phones: trim the graphic's vertical footprint (~30% shorter)
   so the headline and CTA keep the visual lead on short viewports. */
@media (max-width: 599px) {
  .hero-graphic { max-width: 240px; }
}
.hero-graphic-line { stroke-dasharray: 640; stroke-dashoffset: 640; animation: tp-draw 2.2s ease forwards; }
.hero-graphic-line--2 { animation-delay: 0.15s; }
.hero-graphic-line--3 { animation-delay: 0.3s; }
.hero-graphic-dot { animation: tp-float 4s ease-in-out infinite; transform-origin: center; }
.hero-graphic-dot--2 { animation-delay: 0.6s; }
.hero-graphic-dot--3 { animation-delay: 1.1s; }
.hero-graphic-dot--4 { animation-delay: 1.6s; }

@keyframes tp-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes tp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-graphic-line { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .hero-graphic-dot { animation: none; }
}

@media (min-width: 860px) {
  .hero { padding: 96px 0; }
  .hero-inner { grid-template-columns: 1.15fr 0.85fr; gap: 40px; }
  .hero-visual { opacity: 1; }
}

/* ---------------- Feature list (Services) ---------------- */
.feature-list {
  margin-top: 32px;
  border-top: 1px solid var(--charcoal-200);
}
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--charcoal-200);
}
.feature-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 12px;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature-text h3 { margin-bottom: 0.3em; }
.feature-text p { margin-bottom: 0; color: var(--charcoal-600); }

/* ---------------- Brokerage & Regulation (home) ---------------- */
.regulation-block { display: flex; align-items: flex-start; gap: 16px; max-width: 760px; }
.regulation-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 12px;
}
.regulation-icon svg { width: 22px; height: 22px; }
.regulation-content h2 { margin-bottom: 0.4em; }
.regulation-content p { margin-bottom: 14px; }
.regulation-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: var(--blue-dark);
  text-decoration: none;
}
.regulation-link:hover { text-decoration: underline; }
@media (max-width: 599px) {
  .regulation-block { flex-direction: column; }
}

@media (min-width: 720px) {
  .feature-row { align-items: center; gap: 24px; }
  .feature-text { display: flex; align-items: baseline; gap: 24px; }
  .feature-text h3 { flex: 0 0 260px; margin-bottom: 0; }
  .feature-text p { flex: 1; }
}

/* ---------------- Timeline (Getting started) ---------------- */
.timeline {
  margin-top: 36px;
  max-width: 640px;
  position: relative;
}
.timeline-step {
  display: flex;
  gap: 20px;
  position: relative;
  padding-bottom: 32px;
}
.timeline-step:last-child { padding-bottom: 0; }
.timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-inline-start: 19px;
  top: 42px;
  bottom: 0;
  width: 2px;
  background: var(--charcoal-200);
}
.timeline-number {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--charcoal-900);
  color: var(--white);
  font-weight: 800;
  font-size: 0.95rem;
  z-index: 1;
}
.timeline-text h3 { margin-bottom: 0.3em; }
.timeline-text p { margin-bottom: 0; color: var(--charcoal-600); }

/* ---------------- Costs ---------------- */
.costs-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.costs-intro .btn { margin-top: 20px; }
.costs-cta-text {
  color: var(--charcoal-600);
  margin-top: 8px;
}
.costs-list {
  display: grid;
  gap: 20px;
  margin: 0;
}
.costs-item {
  padding: 20px;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-md);
  background: var(--off-white);
}
.costs-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--white);
  border: 1px solid var(--charcoal-200);
  color: var(--blue-dark);
  border-radius: 10px;
  margin-bottom: 12px;
}
.costs-icon svg { width: 20px; height: 20px; }
.costs-item dt { font-weight: 700; color: var(--charcoal-900); margin-bottom: 4px; }
.costs-item dd { margin: 0; color: var(--charcoal-600); font-size: 0.95rem; }

/* ---------------- Callout box ---------------- */
.callout {
  margin: 32px 0;
  padding: 28px;
  background: var(--charcoal-900);
  color: var(--white);
  border-radius: var(--radius-lg);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.callout p { color: rgba(255, 255, 255, 0.75); }
.callout h3 { margin-bottom: 6px; }
.callout .btn-primary { flex-shrink: 0; }

@media (min-width: 860px) {
  .costs-inner { grid-template-columns: 0.85fr 1.15fr; align-items: start; }
  .costs-list { grid-template-columns: 1fr; }
}

/* ---------------- FAQ / Accordion ---------------- */
.accordion { margin-top: 32px; border-top: 1px solid var(--charcoal-200); }
.accordion-item { border-bottom: 1px solid var(--charcoal-200); }
.accordion-header { margin: 0; }
.accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: transparent;
  border: none;
  padding: 20px 4px;
  text-align: start;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--charcoal-900);
  cursor: pointer;
  min-height: 48px;
}
.accordion-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--charcoal-400);
  transition: transform 0.2s ease;
}
.accordion-trigger[aria-expanded="true"] .accordion-icon { transform: rotate(180deg); color: var(--blue-dark); }

.accordion-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.22s ease;
}
.accordion-panel p {
  color: var(--charcoal-600);
  padding-inline-end: 34px;
  margin: 0 0 20px;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-panel, .accordion-icon { transition: none; }
}

/* ---------------- Contact (dark closing section) ---------------- */
.section-dark {
  position: relative;
  background: var(--charcoal-900);
  overflow: hidden;
}
.section-dark h2 { color: var(--white); }
.contact-glow {
  position: absolute;
  inset: auto -10% -30% auto;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--blue-glow) 0%, transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}
[dir="rtl"] .contact-glow { inset: auto auto -30% -10%; }

.contact-inner { position: relative; z-index: 1; text-align: center; max-width: 640px; }
.contact-inner .section-subtitle { margin-inline: auto; margin-bottom: 28px; }
.contact-phone {
  margin-top: 20px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.75);
}
.contact-phone-number { font-weight: 700; color: var(--white); letter-spacing: 0.02em; unicode-bidi: isolate; }
.contact-email { font-size: 0.95rem; color: rgba(255, 255, 255, 0.65); }
.contact-email a { color: var(--blue); text-decoration: underline; }

/* ---------------- Footer ---------------- */
.site-footer {
  background: var(--charcoal-900);
  color: rgba(255, 255, 255, 0.72);
  padding: 40px 0 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner { display: flex; flex-direction: column; gap: 32px; }
.footer-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  padding-bottom: 8px;
}
@media (min-width: 720px) {
  .footer-top { grid-template-columns: 1.3fr 1fr 1fr; }
}
.footer-col-title {
  color: var(--white);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 14px;
}
.footer-nav-list { display: flex; flex-direction: column; gap: 10px; }
.footer-nav-list a { color: rgba(255, 255, 255, 0.68); text-decoration: none; font-size: 0.92rem; }
.footer-nav-list a:hover { color: var(--white); }
.footer-bottom { display: flex; flex-direction: column; gap: 22px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px; }

.footer-brand .wordmark { gap: 10px; }
.footer-brand .wordmark-text { color: var(--white); font-size: 1.1rem; }
.footer-brand p { color: rgba(255, 255, 255, 0.55); margin-top: 6px; margin-bottom: 0; }
.footer-not-broker {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 640px;
  margin: 0;
}
.footer-risk {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.06);
  border-inline-start: 3px solid var(--blue);
  border-radius: var(--radius-sm);
}
.footer-risk-title {
  font-weight: 700;
  color: var(--white);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.footer-risk p:last-child {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
}
.footer-rights {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 0;
}

/* ---------------- Utility ---------------- */
.ltr-inline { direction: ltr; unicode-bidi: isolate; display: inline-block; }
.page-eyebrow-dark { color: var(--blue); }

/* ---------------- Generic page hero (subpages) ---------------- */
.page-hero {
  position: relative;
  padding: 56px 0 48px;
  background: var(--charcoal-900);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.page-hero .hero-glow { inset: -30% -15% auto auto; width: 520px; height: 520px; }
[dir="rtl"] .page-hero .hero-glow { inset: -30% auto auto -15%; }
.page-hero-inner { position: relative; z-index: 1; max-width: 720px; }
.page-hero h1 { color: var(--white); }
.page-hero p { color: rgba(255, 255, 255, 0.7); font-size: 1.05rem; max-width: 600px; }
.page-hero .breadcrumb { font-size: 0.85rem; color: rgba(255, 255, 255, 0.5); margin-bottom: 14px; }
.page-hero .breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; }
.page-hero .breadcrumb a:hover { color: var(--white); }
.page-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

/* ---------------- Compact in-page section nav (trading.html, learn.html) ---------------- */
.section-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--charcoal-200);
}
.section-nav-list {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
@media (min-width: 640px) { .section-nav-list { gap: 28px; } }
.section-nav-list::-webkit-scrollbar { display: none; }
.section-nav-list a {
  flex-shrink: 0;
  padding: 13px 1px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal-700);
  text-decoration: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.section-nav-list a:hover { color: var(--charcoal-900); }
.section-nav-list a.is-active { color: var(--charcoal-900); border-color: var(--blue); }

/* Anchor targets must clear BOTH sticky bars (site header + this section
   nav) when jumped to, otherwise the heading lands hidden underneath them. */
main section[id] {
  scroll-margin-top: calc(var(--header-h) + 56px);
}

/* ---------------- Facts row (home hero) ---------------- */
.facts-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 32px;
  max-width: 620px;
}
@media (min-width: 640px) {
  .facts-row { grid-template-columns: repeat(2, 1fr); }
}
.fact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 600;
}
.fact-item .fact-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }

/* ---------------- Tooltip ---------------- */
.tooltip-wrap { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.tooltip-trigger {
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.tooltip-bubble {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-start: 0;
  z-index: 20;
  width: 260px;
  max-width: 70vw;
  background: var(--charcoal-900);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.tooltip-bubble.is-visible { display: block; }

/* ---------------- Tabs ---------------- */
.tabs-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 24px;
  border-bottom: 1px solid var(--charcoal-200);
}
.tab-button {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 4px;
  margin-inline-end: 20px;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--charcoal-400);
  cursor: pointer;
}
.tab-button.is-active { color: var(--charcoal-900); border-color: var(--blue); }
.tab-button:hover { color: var(--charcoal-900); }
.tab-panel p:last-child { margin-bottom: 0; }

/* ---------------- Comparison table ---------------- */
.compare-scroll { overflow-x: auto; margin-top: 32px; border: 1px solid var(--charcoal-200); border-radius: var(--radius-md); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 0.92rem; }
.compare-table th, .compare-table td {
  padding: 14px 16px;
  text-align: start;
  border-bottom: 1px solid var(--charcoal-200);
  white-space: nowrap;
}
.compare-table thead th {
  background: var(--off-white);
  color: var(--charcoal-900);
  font-weight: 700;
  position: sticky;
  top: 0;
}
.compare-table tbody th { font-weight: 600; color: var(--charcoal-700); background: var(--off-white); }
.compare-table tr:last-child td, .compare-table tr:last-child th { border-bottom: none; }

/* ---------------- Option cards (trading.html — two equal-weight accounts) ---------------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  margin-top: 32px;
}
@media (min-width: 640px) {
  .option-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
  }
}
.option-card {
  border: none;
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  background: #17191B;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.option-card.is-featured { border: none; box-shadow: var(--shadow-md); }
.option-card-title { font-size: 1.5rem; font-weight: 800; color: var(--white); }
.option-card-note {
  font-size: 0.85rem;
  color: #D6DCE1;
  margin: 0;
}
.option-card .btn { margin-top: auto; align-self: flex-start; }
.option-card-badge {
  align-self: flex-start;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8FE0FF;
  background: #1E3A4C;
  padding: 3px 10px;
  border-radius: 999px;
}
.option-card ul { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.option-card li { font-size: 0.88rem; color: #D6DCE1; padding-inline-start: 18px; position: relative; }
.option-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #63C9EF;
}

/* ---------------- Market / funding grids ---------------- */
.market-grid, .funding-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 32px; }
@media (min-width: 640px) { .market-grid, .funding-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) { .market-grid { grid-template-columns: repeat(3, 1fr); } }
.market-card, .funding-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  background: var(--white);
}
.market-card.is-featured { background: var(--charcoal-900); border-color: var(--charcoal-900); }
.market-card.is-featured h3, .market-card.is-featured .market-card-symbol { color: var(--white); }
.market-card.is-featured p { color: rgba(255, 255, 255, 0.7); }
.market-card-icon, .funding-card-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: var(--blue-light);
  color: var(--blue-dark);
  border-radius: 10px;
  margin-bottom: 14px;
}
.market-card.is-featured .market-card-icon { background: rgba(36, 152, 197, 0.18); color: var(--blue); }
.market-card-icon svg, .funding-card-icon svg { width: 22px; height: 22px; }
.market-card-symbol { font-weight: 700; color: var(--blue-dark); font-size: 0.85rem; margin-bottom: 6px; display: block; }
.market-card-leverage { color: var(--blue-dark); font-weight: 700; font-size: 0.82rem; margin-top: 8px; margin-bottom: 0; }
.funding-card-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 6px; }

/* ---------------- MT5 device mockup ---------------- */
.device-showcase { display: flex; justify-content: center; align-items: flex-end; gap: 18px; margin: 40px 0 12px; flex-wrap: wrap; }
.device-frame {
  background: var(--charcoal-800);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow-md);
}
.device-frame.is-desktop { width: min(560px, 90vw); }
.device-frame.is-mobile { width: 130px; border-radius: 22px; padding: 8px; }
.device-screen {
  background: linear-gradient(160deg, #1c2c36 0%, #101317 100%);
  border-radius: 6px;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
}
.device-frame.is-mobile .device-screen { aspect-ratio: 9 / 18; border-radius: 14px; }
.device-screen svg { width: 100%; height: 100%; display: block; }

/* ---------------- Learn / educational cards ---------------- */
.learn-categories { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.learn-category-pill {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--charcoal-200);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--charcoal-700);
  background: var(--white);
}
.learn-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
@media (min-width: 640px) { .learn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .learn-grid { grid-template-columns: repeat(3, 1fr); } }
.learn-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 22px 20px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learn-card-category { font-size: 0.76rem; font-weight: 700; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.03em; }
.learn-card h3 { font-size: 1.02rem; }
.learn-card p { font-size: 0.9rem; color: var(--charcoal-600); margin-bottom: 0; }
.learn-card-note { font-size: 0.78rem; color: var(--charcoal-400); margin-top: auto; }
.learn-card .accordion-item { border-bottom: none; margin-top: auto; padding-top: 4px; }
.learn-card .accordion-trigger {
  width: auto;
  min-height: unset;
  padding: 4px 0;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--blue-dark);
  justify-content: flex-start;
  gap: 6px;
}
.learn-card .accordion-icon { width: 16px; height: 16px; }
.learn-card .accordion-panel p { padding-inline-end: 0; font-size: 0.88rem; margin: 12px 0; }
.guide-example {
  background: var(--off-white);
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin: 0 0 14px;
}
.guide-example-label { font-size: 0.74rem; font-weight: 700; color: var(--blue-dark); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 6px; }
.guide-example p { margin: 0; font-size: 0.88rem; color: var(--charcoal-700); }
.guide-takeaways-label { font-weight: 700; color: var(--charcoal-900); font-size: 0.86rem; margin: 0 0 8px; }
.guide-takeaways { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 0.88rem; color: var(--charcoal-600); }

/* ---------------- Partner cards ---------------- */
.partner-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 32px; }
@media (min-width: 780px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }
.partner-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: var(--white);
}
.partner-card h3 { margin-bottom: 10px; }
.partner-card ul { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.partner-card li { font-size: 0.9rem; color: var(--charcoal-600); padding-inline-start: 18px; position: relative; }
.partner-card li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

/* ---------------- Calculators (tools.html) ---------------- */
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
@media (min-width: 860px) { .calc-grid { grid-template-columns: repeat(2, 1fr); } }
.calc-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: var(--off-white);
}
.calc-card h3 { margin-bottom: 6px; }
.calc-card-note { font-size: 0.85rem; color: var(--charcoal-400); margin-bottom: 20px; }
.field-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field-row label { font-size: 0.88rem; font-weight: 700; color: var(--charcoal-800); }
.field-row input, .field-row select, .field-row textarea {
  padding: 12px 14px;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  font-family: inherit;
  background: var(--white);
  color: var(--charcoal-900);
  min-height: 46px;
}
.field-row input:focus, .field-row select:focus, .field-row textarea:focus {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
  border-color: var(--blue);
}
.field-row textarea { min-height: 110px; resize: vertical; }
.calc-result {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--blue-light);
  border-radius: var(--radius-sm);
  font-weight: 700;
  color: var(--blue-dark);
}
.calc-error {
  margin-top: 12px;
  padding: 12px 14px;
  background: #fdecec;
  border-radius: var(--radius-sm);
  color: #a12a2a;
  font-size: 0.88rem;
}

/* ---------------- Contact form ---------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 32px; }
.contact-grid > * { min-width: 0; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.contact-method-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--white);
  margin-bottom: 16px;
}
.contact-method-card h3 { margin-bottom: 6px; font-size: 1rem; }
.contact-method-card p { margin-bottom: 10px; font-size: 0.9rem; color: var(--charcoal-600); }
.contact-form-card {
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  background: var(--off-white);
}
.contact-form-note { font-size: 0.82rem; color: var(--charcoal-400); margin-top: 14px; }
#contact-form button[type="submit"] { width: 100%; white-space: normal; text-align: center; }
.inquiry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
@media (max-width: 379px) { .inquiry-grid { grid-template-columns: 1fr; } }
@media (min-width: 640px) { .inquiry-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.inquiry-pill {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--charcoal-200);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--charcoal-700);
  text-align: center;
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.inquiry-pill:hover { border-color: var(--blue); }
.inquiry-pill.is-selected {
  background: var(--blue-light);
  border-color: var(--blue);
  color: var(--blue-dark);
  font-weight: 700;
}

/* ---------------- Legal pages ---------------- */
.legal-content { max-width: 760px; margin-top: 8px; }
.legal-content h2 { margin-top: 2em; font-size: 1.25rem; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content p, .legal-content li { color: var(--charcoal-600); }
.legal-content ul { padding-inline-start: 20px; list-style: disc; margin-bottom: 1em; }
.legal-updated { font-size: 0.85rem; color: var(--charcoal-400); margin-bottom: 32px; }

/* ---------------- 404 page ---------------- */
.error-page {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 20px;
}
.error-code { font-size: clamp(3rem, 10vw, 5rem); font-weight: 800; color: var(--blue); margin-bottom: 0.2em; }
.error-page p { max-width: 480px; }
.error-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 20px; }

/* ---------------- LTR (English) tweaks ---------------- */
[dir="ltr"] body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }

/* ---------------- Social links (footer / contact) ---------------- */
.js-social-links {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}
.js-social-links:empty,
.js-social-links[hidden] { display: none; }
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.15s, color 0.15s;
}
.social-link:hover { background: var(--blue); color: var(--white); }
.social-link svg { width: 17px; height: 17px; }
.contact-page .social-link {
  background: var(--charcoal-100, #f2f3f4);
  color: var(--charcoal-600);
}
.contact-page .social-link:hover { background: var(--blue); color: var(--white); }

/* ---------------- Pending CTA (e.g. account-opening guide link
   before a public URL is confirmed) ---------------- */
.btn.is-pending {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* This CTA's label is longer than other buttons' — let it wrap instead
   of forcing single-line width (.btn default) and overflowing narrow
   viewports. */
.js-account-guide-link {
  white-space: normal;
  text-align: center;
  line-height: 1.3;
}