/* ==========================================================================
   Synesis Markets — Design Tokens
   ========================================================================== */
:root,
:root[data-theme="dark"]{
  /* Dark surfaces — true black, gold-accented */
  --bg-void: #0A0A0A;
  --bg-surface: #121212;
  --bg-elevated: #1A1A1A;
  --bg-elevated-2: #222222;

  /* "Light section" surfaces — in dark mode these resolve to dark tones
     too (a slightly different near-black shade from the "dark section"
     surfaces, for a subtle section rhythm, not a stark light/dark jump).
     Only in light mode (override below) do these become actually light. */
  --bg-light: var(--bg-surface);
  --bg-light-2: var(--bg-elevated);
  --bg-light-elevated: var(--bg-elevated);

  /* Borders */
  --hairline: rgba(255,255,255,0.08);
  --hairline-strong: rgba(255,255,255,0.16);
  --hairline-on-light: rgba(255,255,255,0.08);
  --hairline-on-light-strong: rgba(255,255,255,0.16);

  /* Text — dark sections */
  --text-primary: #F5F3EC;
  --text-secondary: #A8A29B;
  --text-tertiary: #6B665F;

  /* Text — "light sections", dark-mode values (see note above) */
  --text-on-light: #F5F3EC;
  --text-on-light-2: #A8A29B;
  --text-on-light-3: #6B665F;

  /* Accents — gold/yellow brand color */
  --accent-brand: #E9B824;
  --accent-brand-bright: #F8E05A;
  --accent-brand-deep: #D39A10;
  --accent-buy: #2FBF8F;
  --accent-sell: #E8555F;

  --shadow-card: 0 12px 32px rgba(0,0,0,0.45);
  --shadow-float: 0 40px 80px -24px rgba(0,0,0,0.55);
  --shadow-float-light: 0 30px 70px -20px rgba(21,24,29,0.14);
}

/* ==========================================================================
   Light mode override — "White & Black" theme toggle
   Overrides the same token names, so every rule already written with
   var(--bg-void) etc. re-themes automatically. Set via JS: the <html>
   element gets data-theme="light" or "dark" (persisted in localStorage,
   see main.js). No content or markup differs between modes — only colors.
   ========================================================================== */
:root[data-theme="light"]{
  --bg-void: #FFFFFF;
  --bg-surface: #F4F1E8;
  --bg-elevated: #EFEBDF;
  --bg-elevated-2: #E7E2D3;

  /* Alternating sections: .section--dark = pure white (--bg-void),
     .section--light = warm off-white (--bg-light). Cards sit on top in
     pure white (--bg-light-elevated) so they stand out from either. */
  --bg-light: #F4F1E8;
  --bg-light-2: #FAF8F2;
  --bg-light-elevated: #FFFFFF;

  --hairline: rgba(0,0,0,0.10);
  --hairline-strong: rgba(0,0,0,0.18);
  --hairline-on-light: rgba(15,25,24,0.10);
  --hairline-on-light-strong: rgba(15,25,24,0.18);

  --text-primary: #16150F;
  --text-secondary: #55524A;
  --text-tertiary: #85817A;

  --text-on-light: #101E1C;
  --text-on-light-2: #52625F;
  --text-on-light-3: #85938F;

  --accent-brand: #B38609;
  --accent-brand-bright: #E9B824;
  --accent-brand-deep: #8A6806;
  --accent-buy: #1E9E6E;
  --accent-sell: #D8353F;

  --shadow-card: 0 12px 32px rgba(0,0,0,0.10);
  --shadow-float: 0 30px 60px -20px rgba(0,0,0,0.14);
  --shadow-float-light: 0 30px 70px -20px rgba(21,24,29,0.10);
}

/* Light mode keeps the same section depth as dark mode: soft gold glows on
   the white sections (lower opacity than dark mode, so they read as a warm
   tint rather than muddy), while .section--light uses the off-white token. */
[data-theme="light"] .section--dark{
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(233,184,36,0.10), transparent 60%),
    radial-gradient(760px 460px at 92% 8%, rgba(233,184,36,0.06), transparent 58%),
    var(--bg-void);
}
[data-theme="light"] .hero{
  background:
    radial-gradient(1100px 620px at 18% -12%, rgba(233,184,36,0.16), transparent 58%),
    radial-gradient(900px 560px at 88% 4%, rgba(233,184,36,0.10), transparent 55%),
    radial-gradient(700px 500px at 50% 115%, rgba(233,184,36,0.08), transparent 60%),
    var(--bg-void);
}
[data-theme="light"] .hero::before{ opacity: 0.5; }

:root{
  /* Type */
  --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  --ease: cubic-bezier(.16,.8,.24,1);
  --header-h: 72px;
  --header-h-scrolled: 60px;
  --ticker-h: 34px;
}

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

/* ==========================================================================
   Reset / base
   ========================================================================== */
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bg-void);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 0.5em; color: var(--text-primary); }
p{ margin: 0 0 1em; color: var(--text-secondary); }
button{ font-family: inherit; cursor: pointer; }
:focus-visible{ outline: 2px solid var(--accent-brand-bright); outline-offset: 2px; }

.screen-reader-text{ position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
.skip-link{ left: -999px; top: 0; z-index: 10000; position: absolute; background: var(--accent-brand); color: #14100A; padding: 10px 16px; }
.skip-link:focus{ left: 8px; top: 8px; }

.wrap{ max-width: 1240px; margin: 0 auto; padding: 0 24px; position: relative; }
.wrap--narrow{ max-width: 800px; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-brand);
  margin-bottom: 12px;
}
.eyebrow::before{ content:""; width: 16px; height: 1px; background: var(--accent-brand); display: inline-block; }
.section--light .eyebrow{ color: var(--accent-brand-deep); }
.section--light .eyebrow::before{ background: var(--accent-brand-deep); }

.section{ padding: 110px 0; position: relative; }
.section__head{ max-width: 640px; margin-bottom: 52px; }
.section__head h2{ font-size: clamp(28px, 3.4vw, 42px); }
.section__lede{ font-size: 17px; }

/* Dark / light section theming ------------------------------------------ */
.section--dark{
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(233,184,36,0.10), transparent 60%),
    radial-gradient(760px 460px at 92% 8%, rgba(233,184,36,0.06), transparent 58%),
    var(--bg-void);
}
.section--light{
  background: var(--bg-light);
  color: var(--text-on-light);
}
.section--light h2, .section--light h3, .section--light h4{ color: var(--text-on-light); }
.section--light p{ color: var(--text-on-light-2); }
.section--light .section__lede{ color: var(--text-on-light-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
  white-space: nowrap;
}
.btn::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 45%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s var(--ease);
  z-index: 1;
  pointer-events: none;
}
.btn:hover::after{ transform: translateX(120%); }
.btn > *{ position: relative; z-index: 2; }
.btn:hover{ transform: translateY(-2px); }

.btn--brand{ background: linear-gradient(180deg, var(--accent-brand-bright), var(--accent-brand)); color: #1A1400; box-shadow: 0 10px 24px -8px rgba(233,184,36,0.55); }
.btn--brand:hover{ box-shadow: 0 16px 32px -10px rgba(233,184,36,0.7); }
.btn--ghost{ border-color: var(--hairline-strong); color: var(--text-primary); background: rgba(255,255,255,0.03); backdrop-filter: blur(6px); }
.btn--ghost:hover{ border-color: var(--accent-brand); }
.btn--ghost-light{ border-color: rgba(26,20,0,0.35); color: #1A1400; background: transparent; }
.btn--ghost-light:hover{ background: rgba(26,20,0,0.08); }
.btn--outline{ border-color: var(--hairline-strong); color: var(--text-primary); background: var(--bg-elevated); }
.btn--outline:hover{ border-color: var(--accent-brand); }
.section--light .btn--outline{ background: var(--bg-light-elevated); border-color: var(--hairline-on-light-strong); color: var(--text-on-light); }
.section--light .btn--outline:hover{ border-color: var(--accent-brand-deep); }
.btn--sm{ padding: 9px 18px; font-size: 14px; }
.btn--lg{ padding: 17px 34px; font-size: 16px; }
.btn--block{ width: 100%; }

.link-quiet{ font-size: 14px; color: var(--text-secondary); padding: 8px 4px; transition: color .2s ease; }
.link-quiet:hover{ color: var(--text-primary); }

/* ==========================================================================
   Ticker (signature element) — live prices via TradingView widget
   ========================================================================== */
.ticker{
  background: var(--bg-void);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
  position: relative;
  min-height: var(--ticker-h);
}
/* TradingView's widget renders its own iframe at a fixed height; this
   keeps the surrounding strip visually consistent with the rest of the
   dark header even while the widget loads. */
.ticker .tradingview-widget-container{ line-height: 0; }

/* Transparent link over a TradingView widget (noemon_tv_link()): the widget is
   an iframe, so this is what sends a click on any symbol to the login page. */
.tradingview-widget-container{ position: relative; }
.tv-link{ position: absolute; inset: 0; z-index: 2; cursor: pointer; }
.tv-link:focus-visible{ outline: 2px solid var(--accent-brand); outline-offset: -2px; }

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: color-mix(in srgb, var(--bg-void) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--hairline);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled{ background: color-mix(in srgb, var(--bg-void) 92%, transparent); box-shadow: 0 12px 30px -18px rgba(0,0,0,0.25); }
.site-header__inner{
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--header-h);
  transition: height .3s ease;
}
.site-header.is-scrolled .site-header__inner{ height: var(--header-h-scrolled); }
.brand{ display: inline-flex; align-items: center; color: var(--text-primary); }
.brand__logo{ height: 40px; width: auto; }
.brand--footer .brand__logo{ height: 44px; }
.brand__logo--dark{ display: block; }
.brand__logo--light{ display: none; }
[data-theme="light"] .brand__logo--dark{ display: none; }
[data-theme="light"] .brand__logo--light{ display: block; }

.site-nav{ flex: 1; }
.nav-menu{ display: flex; align-items: center; gap: 30px; }
.nav-menu a{ font-size: 14.5px; color: var(--text-secondary); position: relative; padding: 6px 0; transition: color .2s ease; }
.nav-menu a::after{ content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background: var(--accent-brand); transition: right .25s var(--ease); }
.nav-menu a:hover{ color: var(--text-primary); }
.nav-menu a:hover::after{ right: 0; }
.nav-menu li{ position: relative; }
.nav-menu ul{ display: none; }

.site-header__actions{ display: flex; align-items: center; gap: 14px; }

/* GTranslate widget: its own CSS defines --color-cold-gray-200 (a very
   light gray) for borders/text, which is nearly invisible once the site
   is on the light theme. Remap it to a properly visible tone, and back it
   up with direct overrides on the widget's common class names in case the
   plugin doesn't route every element through that variable. */
[data-theme="light"]{ --color-cold-gray-200: var(--hairline-strong); }
[data-theme="light"] .gtranslate_wrapper,
[data-theme="light"] .gtranslate_wrapper *{
  color: var(--text-on-light) !important;
  border-color: var(--hairline-on-light-strong) !important;
}
[data-theme="light"] .gtranslate_wrapper svg{ color: var(--text-on-light-2) !important; }

.theme-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-strong);
  color: var(--text-secondary); flex-shrink: 0;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.theme-toggle:hover{ color: var(--accent-brand-bright); border-color: var(--accent-brand); }
.theme-toggle__icon--moon{ display: none; }
.theme-toggle__icon--sun{ display: block; }
[data-theme="light"] .theme-toggle__icon--sun{ display: none; }
[data-theme="light"] .theme-toggle__icon--moon{ display: block; }

.nav-toggle{ display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.nav-toggle span{ width: 22px; height: 2px; background: var(--text-primary); display: block; transition: transform 0.2s ease, opacity 0.2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.nav-mobile{ display: none; }

/* ==========================================================================
   Hero — dark aurora gradient + glass trading panel
   ========================================================================== */
.hero{
  position: relative;
  padding: 100px 0 150px;
  overflow: hidden;
  background:
    radial-gradient(1100px 620px at 18% -12%, rgba(233,184,36,0.20), transparent 58%),
    radial-gradient(900px 560px at 88% 4%, rgba(233,184,36,0.12), transparent 55%),
    radial-gradient(700px 500px at 50% 115%, rgba(233,184,36,0.10), transparent 60%),
    var(--bg-void);
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent);
  pointer-events:none;
}
.hero__inner{ display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.hero__title{ font-size: clamp(38px, 4.8vw, 58px); letter-spacing: -0.01em; }
.hero__sub{ font-size: 18px; max-width: 480px; }
.hero__actions{ display: flex; gap: 14px; margin: 28px 0 16px; flex-wrap: wrap; }
.hero__meta{ font-size: 13px; color: var(--text-tertiary); margin: 0; }

.hero__badges{ display:flex; gap:10px; margin-bottom: 26px; flex-wrap: wrap; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  font-size: 12.5px; font-weight: 500; color: var(--text-secondary);
  background: rgba(255,255,255,0.05); border: 1px solid var(--hairline-strong);
  padding: 7px 14px; border-radius: 30px; backdrop-filter: blur(6px);
}
.hero__badge svg{ color: var(--accent-brand); flex-shrink:0; }

.hero__panel{ position: relative; }
.hero__panel-glow{
  position:absolute; inset: -30px;
  background: radial-gradient(circle at 50% 40%, rgba(233,184,36,0.22), transparent 65%);
  filter: blur(10px);
  z-index: 0;
}
.trade-panel{
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(27,35,46,0.9), rgba(16,21,28,0.9));
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  backdrop-filter: blur(20px);
  animation: noemon-float 6s ease-in-out infinite;
}
@keyframes noemon-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-10px); } }
.trade-panel__head{ display: flex; align-items: center; gap: 8px; padding: 16px 18px; border-bottom: 1px solid var(--hairline); }
.trade-panel__dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--hairline-strong); }
.trade-panel__live{ width:7px; height:7px; border-radius:50%; background: var(--accent-buy); margin-left: auto; box-shadow: 0 0 0 0 rgba(52,197,142,0.6); animation: noemon-pulse 2s infinite; }
@keyframes noemon-pulse{ 0%{ box-shadow: 0 0 0 0 rgba(52,197,142,0.55); } 70%{ box-shadow: 0 0 0 8px rgba(52,197,142,0); } 100%{ box-shadow: 0 0 0 0 rgba(52,197,142,0); } }
.trade-panel__title{ font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-left: 6px; }
.trade-panel__tv-main{ border-bottom: 1px solid var(--hairline); }
.trade-panel__rows{ padding: 10px 16px 18px; }
.trade-panel__row{ display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.trade-panel__row:last-child{ border-bottom: none; }
.trade-panel__row .tradingview-widget-container{ flex: 1; min-width: 0; }
.trade-panel__pill{ display: inline-block; text-decoration: none; font-family: var(--font-mono); font-size: 11.5px; padding: 7px 12px; border-radius: var(--radius-sm); border: none; font-weight: 600; transition: transform .2s ease, filter .2s ease; flex-shrink: 0; }
.trade-panel__pill:hover{ transform: translateY(-1px); filter: brightness(1.15); }
.trade-panel__pill--sell{ background: rgba(232,85,95,0.14); color: var(--accent-sell); }
.trade-panel__pill--buy{ background: rgba(52,197,142,0.14); color: var(--accent-buy); }

/* ==========================================================================
   Trust bar — floating glass card overlapping hero/next section
   ========================================================================== */
.trust-bar{ position: relative; z-index: 2; margin-top: -84px; padding: 0 0 40px; }
.trust-bar__card{
  background: var(--bg-light-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float-light);
  padding: 40px 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 900px;
  margin: 0 auto;
}
.trust-bar__item{ display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--hairline-on-light); padding-left: 22px; }
.trust-bar__item:first-child{ border-left: none; padding-left: 0; }
.trust-bar__value{ font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--accent-brand-deep); }
.trust-bar__label{ font-size: 14px; color: var(--text-on-light); font-weight: 600; }
.trust-bar__note{ font-size: 12.5px; color: var(--text-on-light-3); }

/* Plain variant — icon + single headline, no big number (used when no
   numeric stats are supplied). */
.trust-bar__item--plain{
  flex-direction: row; align-items: center; gap: 14px;
  border-left: none !important; padding-left: 0 !important;
}
.trust-bar__icon{
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--bg-light-elevated), var(--bg-light)); border: 1px solid var(--hairline-on-light);
  color: var(--accent-brand-deep); display: inline-flex; align-items: center; justify-content: center;
}
.trust-bar__icon svg{ width: 22px; height: 22px; }
.trust-bar__item--plain .trust-bar__label{ font-size: 15px; line-height: 1.3; }

/* ==========================================================================
   Popular markets (dark section)
   ========================================================================== */
.markets__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.market-card{ background: var(--bg-elevated); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 22px; transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow .25s var(--ease); }
.market-card:hover{ border-color: rgba(233,184,36,0.5); transform: translateY(-4px); box-shadow: 0 20px 40px -18px rgba(233,184,36,0.25); }
.market-card__top{ display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.market-card__symbol{ display: flex; align-items:center; gap:6px; font-family: var(--font-mono); font-weight: 600; font-size: 15px; }
.market-card__symbol::before{ content:""; width:6px; height:6px; border-radius:50%; background: var(--accent-buy); box-shadow: 0 0 0 0 rgba(233,184,36,0.5); animation: noemon-pulse 2s infinite; }
.market-card__name{ display: block; font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.market-card__tv{ margin: 4px -4px 10px; }
.market-card__bottom{ display: flex; align-items: center; justify-content: flex-end; }
.market-card__cta{ font-size: 13.5px; color: var(--accent-brand); font-weight: 600; transition: gap .2s ease; }
.market-card__cta:hover{ color: var(--accent-brand-bright); }

/* ==========================================================================
   Selling points (light section)
   ========================================================================== */
.points__grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.points__grid--six{ grid-template-columns: repeat(3, 1fr); }
.point-card{ padding: 28px 22px; background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light); border-radius: var(--radius-lg); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.point-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float-light); }
.point-card__icon{ display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: var(--radius-md); background: linear-gradient(160deg, var(--bg-light-elevated), var(--bg-light)); border: 1px solid var(--hairline-on-light); color: var(--accent-brand-deep); margin-bottom: 20px; }
.point-card h3{ font-size: 18px; margin-bottom: 8px; color: var(--text-on-light); }
.point-card p{ font-size: 14.5px; margin-bottom: 0; }

/* ==========================================================================
   Partners page
   ========================================================================== */
.partners-strip{
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  margin: 22px 0 6px;
}
.partners-strip__dot{ color: var(--accent-brand); }

.partner-plans{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; align-items: stretch; }
.partner-plan{
  background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light); border-radius: var(--radius-lg);
  padding: 36px 32px; display: flex; flex-direction: column;
}
.partner-plan h3{ font-size: 22px; margin: 8px 0 14px; }
.partner-plan__body{ font-size: 14.5px; margin-bottom: 22px; }
.partner-plan__list-title{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-on-light-3); margin-bottom: 14px;
}
.partner-plan__list{ margin-bottom: 22px; flex: 1; }
.partner-plan__list li{
  position: relative; padding-left: 26px; font-size: 14px;
  color: var(--text-on-light-2); margin-bottom: 11px; line-height: 1.45;
}
.partner-plan__list li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent-brand-deep); font-weight: 700;
}
.partner-plan__best-for{ font-size: 13px; color: var(--text-on-light-3); margin-bottom: 20px; }
.partner-plan__best-for strong{ color: var(--text-on-light); }
/* One partnership model (Introducing Broker): a single centred card, benefits in two columns */
.partner-plans--single{ grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
.partner-plans--single .partner-plan__list{ columns: 2; column-gap: 32px; }
.partner-plans--single .partner-plan__list li{ break-inside: avoid; }
@media (max-width: 640px){ .partner-plans--single .partner-plan__list{ columns: 1; } }

/* ==========================================================================
   Platforms (dark gradient section)
   ========================================================================== */
.platforms__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.platform-card{ text-align: left; }
.platform-card--info .point-card__icon{ margin-bottom: 22px; }
.platform-card--info h3{ font-size: 19px; }
.platform-card h3{ font-size: 19px; }
.platform-card p{ font-size: 14.5px; }

.platform-shot{
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px;
  box-shadow: var(--shadow-card); border: 1px solid var(--hairline-strong);
  background: var(--bg-elevated); transition: transform .3s var(--ease);
}
.platform-card:hover .platform-shot{ transform: translateY(-6px); }
.platform-shot img{ width: 100%; height: auto; display: block; }
.platform-shot--mobile{ max-width: 200px; margin-left: auto; margin-right: auto; }

.platforms__cta{ margin-top: 16px; }

/* ==========================================================================
   Accounts (light section)
   ========================================================================== */
.accounts__grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 50px; align-items: stretch; margin: 0 auto; }
.account-card{ position: relative; background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light); border-radius: var(--radius-lg); padding: 34px 28px; display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.account-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-float-light); }
.account-card--featured{ border-color: var(--accent-brand); background: linear-gradient(180deg, var(--bg-light-elevated), var(--bg-light)); box-shadow: 0 30px 60px -24px rgba(233,184,36,0.35); }
.account-card__badge{ position: absolute; top: -13px; left: 28px; background: linear-gradient(180deg, var(--accent-brand-bright), var(--accent-brand)); color: #1A1400; font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; box-shadow: 0 8px 16px -6px rgba(233,184,36,0.6); }
.account-card h3{ font-size: 22px; margin-bottom: 4px; }
.account-card__tagline{ font-size: 14px; margin-bottom: 24px; }
.account-card__specs{ margin-bottom: 28px; flex: 1; }
.account-card__specs li{ display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--hairline-on-light); font-size: 13.5px; }
.account-card__specs li:first-child{ border-top: none; }
.account-card__specs span{ color: var(--text-on-light-3); }
.account-card__specs strong{ font-family: var(--font-mono); font-weight: 600; text-align: right; font-size: 13px; color: var(--text-on-light); }
.accounts__footnote{ margin-top: 24px; font-size: 12.5px; color: var(--text-on-light-3); text-align: center; }

/* ==========================================================================
   Tabs (Account Types / Leverage)
   ========================================================================== */
.tabs__nav{
  display: inline-flex;
  gap: 4px;
  background: var(--bg-light-elevated);
  border: 1px solid var(--hairline-on-light);
  padding: 5px;
  border-radius: 999px;
  margin: 0 auto 44px;
}
.section__head + .tabs .tabs__nav,
.tabs .tabs__nav{ display: flex; width: max-content; }
.tabs{ display: flex; flex-direction: column; align-items: center; }
.tabs__btn{
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-light-2);
  background: transparent;
  border: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.tabs__btn:hover{ color: var(--text-on-light); }
.tabs__btn.is-active{ background: var(--accent-brand); color: #1A1400; box-shadow: 0 8px 18px -8px rgba(233,184,36,0.5); }
.tabs__panel{ width: 100%; }
.tabs__panel[hidden]{ display: none; }
@keyframes noemon-fade-in{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
.tabs__panel:not([hidden]){ animation: noemon-fade-in .45s var(--ease); }

/* Account cards — stacked figures, matching the brand spec sheets */
.account-card__name{ font-size: 24px; text-align: center; margin-bottom: 4px; }
.account-card__tagline{ font-size: 13.5px; text-align: center; margin-bottom: 10px; }
.account-card__stats{ margin: 18px 0 6px; }
.account-card__stat{ text-align: center; padding: 14px 0; border-top: 1px solid var(--hairline-on-light); }
.account-card__stat:first-child{ border-top: none; }
.account-card__stat-label{ display: block; font-size: 11.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-on-light-3); margin-bottom: 5px; }
.account-card__stat-value{ display: block; font-size: 16px; font-weight: 600; color: var(--text-on-light); }
.account-card__stat-value--yes{ color: var(--accent-brand-deep); }
.account-card__stat-value--no{ color: var(--text-on-light-3); }
.account-card__note{ font-size: 12px; color: var(--text-on-light-3); text-align: center; margin: 4px 0 20px; line-height: 1.5; }
.account-card > .btn{ margin-top: 8px; }

/* Leverage table — dark card, echoes the client's brand reference screens */
.leverage{
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  box-shadow: var(--shadow-card);
  margin-bottom: 28px;
}
.leverage__intro{ color: var(--text-secondary); font-size: 15px; margin-bottom: 24px; }
.leverage__table{ border: 1px solid var(--hairline); border-radius: var(--radius-md); overflow: hidden; }
.leverage__row{ display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; border-top: 1px solid var(--hairline); }
.leverage__row:first-child{ border-top: none; }
.leverage__row--head{ background: rgba(255,255,255,0.03); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); }
.leverage__equity{ color: var(--accent-brand-bright); font-weight: 600; font-size: 14.5px; }
.leverage__equity em{ display: block; font-style: normal; color: var(--text-tertiary); font-weight: 400; font-size: 12.5px; margin-top: 2px; }
.leverage__value{ font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--text-primary); justify-self: end; }
.leverage__footnote{ font-size: 12px; color: var(--text-tertiary); margin: 16px 4px 0; }

/* Leverage adjustment notice (anti-abuse) */
.leverage-notice{ background: var(--bg-elevated); border: 1px solid rgba(232,85,95,0.25); border-radius: var(--radius-lg); padding: 36px; }
.leverage-notice__head{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.leverage-notice__head h3{ font-size: 19px; margin: 0; }
.leverage-notice__icon{ color: var(--accent-brand); display: inline-flex; }
.leverage-notice__intro{ font-size: 14.5px; margin-bottom: 22px; }
.leverage-notice__rules{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 26px; }
.leverage-notice__rule{ background: rgba(255,255,255,0.03); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: 16px 18px; }
.leverage-notice__rule-label{ display: block; font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 6px; }
.leverage-notice__rule-value{ font-weight: 600; color: var(--accent-brand-bright); }
.leverage-notice__rule-condition{ display: block; font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5; }
.leverage-notice__subhead{ font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); font-family: var(--font-body); margin-bottom: 12px; }
.leverage-notice__definitions{ margin-bottom: 20px; }
.leverage-notice__definitions li{ position: relative; padding-left: 18px; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.55; }
.leverage-notice__definitions li::before{ content: "•"; position: absolute; left: 0; color: var(--accent-brand); }
.leverage-notice__footnote{ font-size: 12.5px; color: var(--text-tertiary); margin: 0; line-height: 1.6; }

/* ==========================================================================
   Registration steps (dark gradient section)
   ========================================================================== */
.steps__row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps__row::before{ content: ""; position: absolute; top: 27px; left: 6%; right: 6%; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline-strong) 20%, var(--hairline-strong) 80%, transparent); z-index: 0; }
.step-card{ position: relative; z-index: 1; padding-right: 20px; }
.step-card__num{ display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.04); backdrop-filter: blur(6px); border: 1px solid var(--accent-brand); color: var(--accent-brand-bright); font-family: var(--font-mono); font-weight: 600; margin-bottom: 20px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.step-card:hover .step-card__num{ transform: scale(1.08); box-shadow: 0 0 0 6px rgba(233,184,36,0.12); }
.step-card h3{ font-size: 18px; margin-bottom: 6px; }
.step-card p{ font-size: 14px; }

/* ==========================================================================
   Payments (light section)
   ========================================================================== */
.payments__grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 780px; margin: 0 auto; }
.payment-badge{ display: flex; align-items: center; gap: 12px; background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light); border-radius: var(--radius-md); padding: 20px; font-size: 14px; font-weight: 500; color: var(--text-on-light); transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.payment-badge:hover{ transform: translateY(-3px); box-shadow: var(--shadow-float-light); }
.payment-badge__icon{ flex-shrink: 0; color: var(--accent-brand-deep); display: inline-flex; }
.payment-badge__body{ display: flex; flex-direction: column; gap: 2px; }
.payment-badge__name{ font-weight: 600; }
.payment-badge__text{ font-size: 12.5px; font-weight: 400; color: var(--text-on-light-3); }

/* ==========================================================================
   Final CTA
   ========================================================================== */
.final-cta{ position: relative; background: linear-gradient(135deg, var(--accent-brand-bright), var(--accent-brand)); padding: 100px 0; overflow: hidden; }
.final-cta::before{ content:""; position:absolute; inset:0; background-image: radial-gradient(rgba(255,255,255,0.35) 1px, transparent 1px); background-size: 22px 22px; opacity:.4; }
.final-cta__inner{ text-align: center; max-width: 620px; margin: 0 auto; position: relative; }
.final-cta h2{ color: #1A1400; font-size: clamp(28px, 3.6vw, 42px); }
.final-cta p{ color: rgba(26,20,0,0.75); font-size: 17px; }
.final-cta__actions{ display: flex; justify-content: center; gap: 14px; margin-top: 26px; flex-wrap: wrap; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background: var(--bg-surface); border-top: 1px solid var(--hairline); padding-top: 72px; }
.footer__top{ display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__desc{ font-size: 14px; margin-top: 14px; max-width: 280px; }
.footer__col h4{ font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; }
.footer-menu li{ margin-bottom: 10px; }
.footer-menu a{ font-size: 14.5px; color: var(--text-secondary); }
.footer-menu a:hover{ color: var(--text-primary); }

.footer__legal{ border-top: 1px solid var(--hairline); padding: 28px 0; }
.footer__legal-block{ margin-bottom: 18px; }
.footer__legal-block:last-child{ margin-bottom: 0; }
.footer__legal-block h5{
  font-family: var(--font-body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 6px;
}
.footer__legal-block p{ font-size: 12px; line-height: 1.65; color: var(--text-tertiary); margin: 0 0 6px; }
.footer__legal-block p:last-child{ margin-bottom: 0; }
.footer__legal-block a{ color: var(--text-secondary); text-decoration: underline; }
.footer__legal-block a:hover{ color: var(--accent-brand-bright); }

/* ==========================================================================
   Markets listing page (page-templates/template-markets.php)
   ========================================================================== */
.markets-hero__ticker{
  margin-top: 32px; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--hairline-strong);
}
/* Markets page: "Top 6 of 71" head, the instrument board and the "+65 more" band */
.markets-list__head{
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
  margin-bottom: 32px;
}
.markets-list__head h2{ margin: 14px 0 12px; font-size: clamp(28px, 3.4vw, 40px); }
.markets-list__head p{ margin: 0; max-width: 560px; font-size: 15.5px; line-height: 1.65; color: var(--text-on-light-2); }
.markets-list__head p strong{ color: var(--text-on-light); font-weight: 600; }
.markets-list__stat{
  display: flex; align-items: baseline; gap: 6px; flex-shrink: 0;
  font-family: var(--font-display); line-height: 1;
}
.markets-list__stat strong{
  font-size: 76px; font-weight: 500;
  background: linear-gradient(180deg, var(--accent-brand-bright), var(--accent-brand-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.markets-list__stat span{ font-size: 28px; color: var(--text-on-light-3); }

.markets-board{
  background: var(--bg-light-elevated);
  border: 1px solid var(--hairline-on-light-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.markets-board__labels,
.markets-board__row{
  display: grid; align-items: center; gap: 20px;
  grid-template-columns: minmax(190px, 1.7fr) 110px minmax(80px, 1fr) 110px 92px 96px;
  padding: 0 24px;
}
.markets-board__labels{
  height: 44px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-light-3);
  border-bottom: 1px solid var(--hairline-on-light);
  background: color-mix(in srgb, var(--accent-brand) 4%, transparent);
}
.markets-board__labels span:nth-child(4),
.markets-board__labels span:nth-child(5){ text-align: right; }
.markets-board__row{
  position: relative; min-height: 78px;
  border-bottom: 1px solid var(--hairline-on-light);
  transition: background .2s ease;
}
.markets-board__row:last-child{ border-bottom: none; }
.markets-board__row::before{
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px;
  background: var(--accent-brand); border-radius: 2px;
  transform: scaleY(0); transition: transform .25s var(--ease);
}
.markets-board__row:hover{ background: color-mix(in srgb, var(--accent-brand) 5%, transparent); }
.markets-board__row:hover::before{ transform: scaleY(1); }

.markets-board__asset{ display: flex; align-items: center; gap: 14px; min-width: 0; }
.markets-board__badge{
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--accent-brand-deep);
  background: color-mix(in srgb, var(--accent-brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-brand) 35%, transparent);
}
:root:not([data-theme="light"]) .markets-board__badge{ color: var(--accent-brand-bright); }
.markets-board__symbol{ display: block; font-family: var(--font-mono); font-weight: 600; font-size: 15px; color: var(--text-on-light); }
.markets-board__name{ display: block; margin-top: 3px; font-size: 12.5px; color: var(--text-on-light-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.markets-board__cat{
  justify-self: start;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; color: var(--text-on-light-2);
  border: 1px solid var(--hairline-on-light-strong);
}
.markets-board__spark{ width: 100%; max-width: 120px; height: 28px; }
.markets-board__row--up .markets-board__spark{ color: var(--accent-buy); }
.markets-board__row--down .markets-board__spark{ color: var(--accent-sell); }

.markets-board__price{ font-family: var(--font-mono); font-weight: 600; font-size: 15px; text-align: right; color: var(--text-on-light); }
.markets-board__change{
  justify-self: end;
  padding: 5px 9px; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.markets-board__row--up .markets-board__change{ color: var(--accent-buy); background: color-mix(in srgb, var(--accent-buy) 12%, transparent); }
.markets-board__row--down .markets-board__change{ color: var(--accent-sell); background: color-mix(in srgb, var(--accent-sell) 12%, transparent); }

.markets-board__cta{
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text-on-light);
  border: 1px solid var(--hairline-on-light-strong);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.markets-board__cta svg{ transition: transform .25s var(--ease); }
.markets-board__cta:hover,
.markets-board__row:hover .markets-board__cta{ border-color: var(--accent-brand); color: var(--accent-brand-deep); }
:root:not([data-theme="light"]) .markets-board__cta:hover,
:root:not([data-theme="light"]) .markets-board__row:hover .markets-board__cta{ color: var(--accent-brand-bright); }
.markets-board__row:hover .markets-board__cta svg{ transform: translateX(3px); }

.markets-more{
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 20px; padding: 22px 24px;
  border-radius: var(--radius-lg);
  border: 1px dashed color-mix(in srgb, var(--accent-brand) 55%, transparent);
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(233,184,36,0.12), transparent 70%),
    var(--bg-light-elevated);
}
.markets-more strong{ display: block; font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--text-on-light); }
.markets-more span{ display: block; margin-top: 4px; font-size: 14px; color: var(--text-on-light-2); }
.markets-more .btn{ flex-shrink: 0; }

/* ==========================================================================
   Legal Documents page (page-templates/template-legal-documents.php)
   ========================================================================== */
.legal-docs__list{ display: flex; flex-direction: column; gap: 16px; }
.legal-doc-card{
  display: flex; align-items: center; gap: 20px;
  background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light);
  border-radius: var(--radius-lg); padding: 24px 26px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.legal-doc-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-float-light); }
.legal-doc-card__icon{
  flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md);
  background: linear-gradient(160deg, var(--bg-light-elevated), var(--bg-light)); border: 1px solid var(--hairline-on-light);
  color: var(--accent-brand-deep); display: inline-flex; align-items: center; justify-content: center;
}
.legal-doc-card__body{ flex: 1; min-width: 0; }
.legal-doc-card__body h3{ font-size: 17px; margin-bottom: 4px; }
.legal-doc-card__body p{ font-size: 13.5px; margin-bottom: 6px; }
.legal-doc-card__version{ font-family: var(--font-mono); font-size: 11.5px; color: var(--text-on-light-3); }
.legal-doc-card__cta{ flex-shrink: 0; }
.legal-doc-card__cta svg{ margin-left: 2px; }

@media (max-width: 620px){
  .legal-doc-card{ flex-direction: column; align-items: flex-start; }
  .legal-doc-card__cta{ width: 100%; justify-content: center; }
}

.footer__bottom{ display: flex; align-items: center; justify-content: space-between; padding: 20px 0 32px; border-top: 1px solid var(--hairline); }
.footer__bottom p{ margin: 0; font-size: 13px; color: var(--text-tertiary); }
.footer__social{ display: flex; gap: 14px; }
.footer__social a{ color: var(--text-tertiary); transition: color .2s ease, transform .2s ease; }
.footer__social a:hover{ color: var(--accent-brand); transform: translateY(-2px); }

/* Sticky mobile CTA */
.sticky-cta{ display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 600; padding: 12px 16px; background: color-mix(in srgb, var(--bg-void) 94%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--hairline-strong); }

/* Generic page / blog fallback */
.generic-page{ padding-top: 72px; }
.generic-page__title{ font-size: 34px; }
.generic-page__content{ font-size: 16px; }
.blog-item{ padding: 24px 0; border-bottom: 1px solid var(--hairline); }
.blog-item h2{ font-size: 22px; margin-bottom: 8px; }

/* ==========================================================================
   Scroll-reveal animation utilities
   ========================================================================== */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 70ms);
}
[data-reveal].is-visible{ opacity: 1; transform: none; }
[data-reveal="left"]{ transform: translateX(-28px); }
[data-reveal="left"].is-visible{ transform: none; }
[data-reveal="right"]{ transform: translateX(28px); }
[data-reveal="right"].is-visible{ transform: none; }
[data-reveal="scale"]{ transform: scale(0.94); }
[data-reveal="scale"].is-visible{ transform: none; }

/* ==========================================================================
   Mega-menu (desktop dropdown nav)
   ========================================================================== */
.nav-menu__item{ position: relative; }
.nav-menu__trigger{
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 6px 0;
  font-size: 14.5px; color: var(--text-secondary); font-family: var(--font-body);
  transition: color .2s ease;
}
.nav-menu__trigger:hover{ color: var(--text-primary); }
.nav-menu__chevron{ transition: transform .25s var(--ease); flex-shrink: 0; }
.has-dropdown:hover .nav-menu__trigger,
.has-dropdown.is-open .nav-menu__trigger{ color: var(--text-primary); }
.has-dropdown:hover .nav-menu__chevron,
.has-dropdown.is-open .nav-menu__chevron{ transform: rotate(180deg); }

/* The panel is anchored to the header container (.site-header__inner is
   already position:relative via .wrap), not to the "Trading" trigger, so
   it can never hang off the left edge of the screen. It is centered under
   the header, sized from the number of columns (--cols, set in header.php),
   capped to the container width, and its columns reflow with auto-fit. */
.site-header__inner{ position: relative; }
.site-nav{ align-self: stretch; display: flex; align-items: stretch; }
.site-nav .nav-menu{ align-items: stretch; }
.site-nav .nav-menu > li{ display: flex; align-items: center; }
.nav-menu__item.has-dropdown{ position: static; }

.mega-menu{
  position: absolute; top: 100%; left: 50%; box-sizing: border-box;
  width: min(calc(var(--cols, 3) * 210px + 58px), calc(100% - 48px));
  transform: translateX(-50%) translateY(8px);
  background: var(--bg-elevated); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-float);
  padding: 28px; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 400;
}
/* hover bridge so the pointer can travel from trigger to panel */
.mega-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.has-dropdown:hover .mega-menu,
.has-dropdown:focus-within .mega-menu,
.has-dropdown.is-open .mega-menu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-menu__inner{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 28px 32px;
}
.mega-menu__col{ min-width: 0; }
.mega-menu__col-title{
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary);
  margin-bottom: 14px;
}
.mega-menu__col ul{ display: flex; flex-direction: column; gap: 6px; }
.mega-menu__col a{ display: block; padding: 4px 0; font-size: 14px; color: var(--text-secondary); transition: color .2s ease; }
.mega-menu__col a::after{ display: none; }
.mega-menu__col a:hover{ color: var(--accent-brand-bright); }

/* Desktop widths between the mobile breakpoint and ~1100px: tighten the
   header row so logo, nav and actions all fit without crowding. */
@media (max-width: 1100px) and (min-width: 881px){
  .site-header__inner{ gap: 20px; }
  .brand__logo{ height: 36px; }
  .nav-menu{ gap: 20px; }
  .site-header__actions{ gap: 10px; }
}

/* Mobile nav — accordion groups via native <details> */
.nav-mobile__group-item{ border-bottom: 1px solid var(--hairline); }
.nav-mobile__group-item summary{
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; font-size: 17px; color: var(--text-primary); cursor: pointer;
}
.nav-mobile__group-item summary::-webkit-details-marker{ display: none; }
.nav-mobile__group-item summary::after{
  content: "+"; font-size: 20px; line-height: 1; color: var(--text-tertiary);
}
.nav-mobile__group-item details[open] summary::after{ content: "–"; }
.nav-mobile__group{ padding: 2px 0 18px 8px; }
.nav-mobile__group-title{
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-tertiary);
  margin: 12px 0 8px;
}
.nav-mobile__group:first-child .nav-mobile__group-title{ margin-top: 0; }
.nav-mobile__group ul{ display: flex; flex-direction: column; gap: 4px; }
.nav-mobile__group a{ font-size: 15px; color: var(--text-secondary); display: block; padding: 5px 0; }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq__list{ display: flex; flex-direction: column; gap: 14px; }
.faq__item{
  background: var(--bg-elevated); border: 1px solid var(--hairline);
  border-radius: var(--radius-md); padding: 4px 26px;
  transition: border-color .2s ease;
}
.faq__item[open]{ border-color: var(--hairline-strong); }
.faq__question{
  list-style: none; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 20px 0; cursor: pointer; font-weight: 600; font-size: 15.5px;
  color: var(--text-primary);
}
.faq__question::-webkit-details-marker{ display: none; }
.faq__toggle{
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  background: rgba(233,184,36,0.16); color: var(--accent-brand-bright);
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__toggle{ transform: rotate(180deg); }
.faq__answer{ padding: 0 0 22px; margin: 0; font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; }

/* Light-section variant — used on the dedicated FAQ page */
.faq__item--light{ background: var(--bg-light-elevated); border-color: var(--hairline-on-light); }
.faq__item--light[open]{ border-color: var(--hairline-on-light-strong); }
.faq__item--light .faq__question{ color: var(--text-on-light); }
.faq__item--light .faq__answer{ color: var(--text-on-light-2); }
.faq__item--light .faq__toggle{ background: rgba(23,145,106,0.12); color: var(--accent-brand-deep); }

.faq-page__group{ margin-bottom: 40px; }
.faq-page__group:last-of-type{ margin-bottom: 24px; }
.faq-page__group-title{
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent-brand-deep);
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline-on-light);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px){
  .points__grid{ grid-template-columns: repeat(2, 1fr); }
  .points__grid--six{ grid-template-columns: repeat(2, 1fr); }
  .partner-plans{ grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .accounts__grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .platforms__grid{ grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 48px; }
  .markets__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__top{ grid-template-columns: 1fr 1fr; }
  .trust-bar__card{ grid-template-columns: repeat(2,1fr); row-gap: 28px; }
  .trust-bar__item:nth-child(3){ border-left: none; padding-left: 0; }
}

@media (max-width: 880px){
  .site-nav, .site-header__actions .link-quiet{ display: none; }
  .nav-toggle{ display: flex; }

  /* The header row got crowded across several rounds of additions
     (GTranslate, theme toggle). Decluttered so nothing gets pushed off
     the edge of narrow screens: shrink the logo, drop the "Open Account"
     button from the top bar (it's already in the mobile menu panel
     below), and keep the controls that remain from ever shrinking. */
  .site-header__inner{ gap: 12px; }
  .brand__logo{ height: 28px; }
  .brand--footer .brand__logo{ height: 34px; }
  .site-header__logo{ flex-shrink: 0; min-width: 0; }
  .site-header__actions{ gap: 8px; flex-shrink: 0; }
  .site-header__actions > .btn--brand{ display: none; }
  .nav-toggle, .theme-toggle{ flex-shrink: 0; }
  .nav-mobile{
    display: block;
    position: fixed;
    top: var(--header-h); /* fallback; JS sets the real offset on open/resize */
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-void);
    padding: 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 490;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-mobile.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-mobile .nav-menu{ flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav-mobile .nav-menu a{ display: block; padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--hairline); width: 100%; }
  .nav-mobile__actions{ display: flex; gap: 12px; margin-top: 24px; }

  .hero__inner{ grid-template-columns: 1fr; gap: 44px; }
  .hero{ padding: 56px 0 120px; }
  .trust-bar{ margin-top: -60px; }
  .trust-bar__card{ padding: 28px 24px; grid-template-columns: 1fr 1fr; }
  .points__grid{ grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
  .markets__grid{ grid-template-columns: 1fr; }
  .payments__grid{ grid-template-columns: 1fr 1fr; max-width: none; }
  .tabs__btn{ padding: 10px 18px; font-size: 13px; }
  .leverage, .leverage-notice{ padding: 26px 20px; }
  .leverage__row{ grid-template-columns: 1fr; text-align: left; gap: 4px; }
  .leverage__value{ justify-self: start; }
  .leverage-notice__rules{ grid-template-columns: 1fr; }
  .markets-list__head{ flex-direction: column; align-items: flex-start; gap: 16px; }
  .markets-list__stat{ display: none; }
  .markets-board__labels{ display: none; }
  .markets-board__row{
    grid-template-columns: 1fr auto; grid-template-areas: "asset price" "cat change" "spark cta";
    gap: 10px 16px; padding: 18px;
  }
  .markets-board__asset{ grid-area: asset; }
  .markets-board__price{ grid-area: price; }
  .markets-board__cat{ grid-area: cat; }
  .markets-board__change{ grid-area: change; }
  .markets-board__spark{ grid-area: spark; max-width: 140px; }
  .markets-board__cta{ grid-area: cta; }
  .markets-more{ flex-direction: column; align-items: flex-start; padding: 20px; }
  .steps__row{ grid-template-columns: 1fr; gap: 32px; }
  .steps__row::before{ display: none; }
  .section{ padding: 72px 0; }
  .footer__top{ grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom{ flex-direction: column; gap: 12px; text-align: center; }
  .sticky-cta{ display: block; }
  main{ padding-bottom: 76px; }
}

@media (max-width: 520px){
  .hero__actions{ flex-direction: column; }
  .hero__actions .btn{ width: 100%; }
  .final-cta__actions{ flex-direction: column; }
  .final-cta__actions .btn{ width: 100%; }
  .trust-bar__card{ grid-template-columns: 1fr; }
  .trust-bar__item{ border-left: none !important; padding-left: 0 !important; border-top: 1px solid var(--hairline-on-light); padding-top: 16px; }
  .trust-bar__item:first-child{ border-top: none; padding-top: 0; }
}

/* ==========================================================================
   Website review (Nov 2026): header "Download App", app-store badges, the
   short regulation/risk line, the Platforms app section, Education page
   ========================================================================== */
.site-header__app{ gap: 7px; }
/* Header row now holds Login, Download App, Open Account, GTranslate and
   the theme toggle: tighter gaps so the menu and the buttons keep clear
   space between them. */
.nav-menu{ gap: 24px; }
.site-header__actions{ gap: 10px; }
.site-header__actions .btn--sm{ padding: 9px 14px; }

.app-badges{ display: flex; flex-wrap: wrap; gap: 10px; }
.app-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 13px; min-width: 150px;
  border: 1px solid var(--hairline-strong); border-radius: var(--radius-md);
  background: var(--bg-elevated); color: var(--text-primary);
  transition: border-color .2s ease, transform .2s ease;
}
a.app-badge:hover{ border-color: var(--accent-brand); transform: translateY(-2px); }
.app-badge__text{ display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.15; }
.app-badge__text small{ font-size: 10.5px; font-weight: 500; color: var(--text-tertiary); letter-spacing: 0.02em; }
.app-badge--soon{ opacity: 0.6; cursor: default; }
.app-badges--lg .app-badge{ padding: 11px 20px 11px 16px; min-width: 180px; }
.app-badges--lg .app-badge__text{ font-size: 17px; }
.section--light .app-badge{ background: var(--bg-light-elevated); border-color: var(--hairline-on-light-strong); color: var(--text-on-light); }
.footer__apps{ margin-top: 20px; }

.trust-line{ margin-top: 22px; max-width: 540px; }
.trust-line p{ margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--text-tertiary); }
.trust-line__reg{ display: flex; align-items: flex-start; gap: 8px; color: var(--text-secondary) !important; font-weight: 500; }
.trust-line__reg svg{ flex-shrink: 0; margin-top: 2px; color: var(--accent-brand); }
.trust-line a{ color: var(--text-secondary); text-decoration: underline; }
.trust-line a:hover{ color: var(--accent-brand-bright); }
.section--light .trust-line__reg{ color: var(--text-on-light-2) !important; }
.section--light .trust-line p{ color: var(--text-on-light-3); }
.section--light .trust-line a{ color: var(--text-on-light-2); }
.trust-line--on-brand{ margin: 26px auto 0; text-align: center; }
.trust-line--on-brand .trust-line__reg{ justify-content: center; color: rgba(26,20,0,0.82) !important; }
.trust-line--on-brand .trust-line__reg svg{ color: #1A1400; }
.final-cta .trust-line--on-brand p{ font-size: 12.5px; color: rgba(26,20,0,0.7); }
.trust-line--on-brand a, .trust-line--on-brand a:hover{ color: #1A1400; }

.platform-app{ padding: 90px 0; }
.platform-app__inner{ display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.platform-app__copy h2{ font-size: clamp(28px, 3.4vw, 40px); }
.platform-app__copy p{ max-width: 480px; margin-bottom: 26px; }
.platform-app__shot img{ width: 100%; max-width: 230px; height: auto; display: block; margin: 0 auto; }

.edu-notice{
  display: flex; gap: 14px; align-items: flex-start; max-width: 860px;
  padding: 18px 22px; border-radius: var(--radius-md);
  background: var(--bg-elevated); border: 1px solid var(--hairline-strong); border-left: 3px solid var(--accent-brand);
}
.edu-notice svg{ flex-shrink: 0; color: var(--accent-brand); margin-top: 1px; }
.edu-notice p{ margin: 0; font-size: 14px; line-height: 1.6; }
.edu-notice strong{ color: var(--text-primary); }
.edu-notice a{ color: var(--text-primary); text-decoration: underline; }

.edu-library{ padding-bottom: 72px; }
.edu-filters{ display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.edu-search{
  display: flex; align-items: center; gap: 10px; max-width: 460px;
  padding: 0 16px; border-radius: var(--radius-md);
  background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light-strong); color: var(--text-on-light-3);
}
.edu-search:focus-within{ border-color: var(--accent-brand); }
.edu-search input{ flex: 1; min-width: 0; padding: 13px 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--text-on-light); }
.edu-chips{ display: flex; flex-wrap: wrap; gap: 8px; }
.edu-chip{
  padding: 8px 15px; border-radius: 30px; font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline-on-light-strong); color: var(--text-on-light-2);
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.edu-chip:hover{ border-color: var(--accent-brand); color: var(--text-on-light); }
.edu-chip.is-active{ background: var(--accent-brand); border-color: var(--accent-brand); color: #1A1400; }
.edu-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.edu-card{
  display: flex; flex-direction: column; padding: 24px; border-radius: var(--radius-lg);
  background: var(--bg-light-elevated); border: 1px solid var(--hairline-on-light);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.edu-card:hover{ transform: translateY(-3px); border-color: var(--accent-brand); box-shadow: var(--shadow-float-light); }
.edu-card[hidden]{ display: none; }
.edu-card__meta{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.edu-card__type{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-brand-deep); }
.edu-card__level{ font-size: 12px; color: var(--text-on-light-3); }
.edu-card h3{ font-size: 18px; margin-bottom: 8px; }
.edu-card p{ font-size: 14px; line-height: 1.55; margin-bottom: 18px; }
.edu-card__cat{ margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--text-on-light-2); }
.edu-empty{ margin: 24px 0 0; font-size: 14.5px; }
.edu-empty a{ color: var(--accent-brand-deep); text-decoration: underline; }

.edu-glossary{ padding-top: 40px; scroll-margin-top: 90px; }
.edu-terms{ margin: 0; border-top: 1px solid var(--hairline-on-light); }
.edu-term{ display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--hairline-on-light); }
.edu-term[hidden]{ display: none; }
.edu-term dt{ font-weight: 600; color: var(--text-on-light); }
.edu-term dd{ margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-on-light-2); }

@media (max-width: 1440px) and (min-width: 881px){
  /* Icon only on narrower desktops, so the header row still fits. */
  .site-header__actions .site-header__app{ padding-left: 10px; padding-right: 10px; font-size: 0; gap: 0; }
}
@media (max-width: 1280px) and (min-width: 881px){
  .nav-menu{ gap: 20px; }
  .site-header__actions{ gap: 8px; }
}
@media (max-width: 1100px) and (min-width: 881px){
  .site-nav .nav-menu{ gap: 14px; }
  .site-nav .nav-menu a, .site-nav .nav-menu__trigger{ font-size: 13.5px; }
  .site-header__actions .btn--brand{ padding: 8px 12px; font-size: 13.5px; }
}
@media (max-width: 1000px) and (min-width: 881px){
  .site-header .brand__logo{ height: 30px; }
  .site-header__inner{ gap: 16px; }
  .site-nav .nav-menu{ gap: 12px; }
}
@media (max-width: 940px) and (min-width: 881px){
  .site-header__actions > .site-header__app{ display: none; }
}
@media (max-width: 1080px){
  .edu-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px){
  .site-header__actions > .site-header__app{ display: none; }
  .nav-mobile__actions{ flex-wrap: wrap; }
  .platform-app__inner{ grid-template-columns: 1fr; gap: 36px; }
  .platform-app{ padding: 72px 0; }
  .edu-grid{ grid-template-columns: 1fr; }
  .edu-term{ grid-template-columns: 1fr; gap: 4px; }
  .trust-line{ max-width: none; }
}