/* =============================================================
   STARTRADER — Landing page styles
   Font: Plus Jakarta Sans (self-hosted)
   ============================================================= */
/* ---------- Design tokens ---------- */
:root{
  --blue:#0047BB;
  --blue-700:#002EA2;
  --blue-800:#001489;
  --blue-bright:#0348CD;
  --blue-soft:#1F5DC3;
  --green:#10B981;
  --red:#EF4444;

  --ink:#0E1524;
  --ink-soft:#54607140;
  --text:#101623;
  --text-soft:#5A6472;
  --text-mute:#8A93A2;

  --slate:#1C1F2A;

  --bg-light:#F4F7FA;
  --bg-light-2:#F8FAFC;
  --card:#FFFFFF;
  --line:#E7ECF2;

  --hero:#05070E;
  --navy:#00102D;
  --navy-2:#000B20;
  --near-black:#04060B;
  --dark-card:#0E1017;
  --dark-line:rgba(255,255,255,.09);

  --maxw:1200px;
  --gutter:24px;
  --nav-h:70px;
  /* full height of the sticky chrome (disclaimer topbar + nav) */
  --chrome-h:calc(var(--topbar-h,44px) + var(--nav-h));
  --chrome-gap:14px;
  --radius:16px;
  --radius-lg:22px;
  --radius-xl:26px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 2px 8px rgba(16,30,54,.06);
  --shadow:0 18px 44px -20px rgba(16,30,54,.22);
  --shadow-blue:0 16px 40px -12px rgba(0,71,187,.5);

  --font:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font);
  color:var(--text);
  background:#05070E;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
h1,h2,h3,h4,h5{line-height:1.1;letter-spacing:-.02em;font-weight:700;text-wrap:balance;overflow-wrap:break-word}
p{text-wrap:pretty}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}
/* .skip-link{position:absolute;left:-999px;top:0;z-index:2000;background:var(--blue);color:#fff;padding:10px 16px;border-radius:8px}
.skip-link:focus{left:12px;top:12px} */
/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding:96px 0}
.head{margin-bottom:56px}
.head.center{text-align:center;max-width:820px;margin-inline:auto}
.center{text-align:center}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--blue);margin-bottom:14px;
}
.eyebrow-blue{color:#93b6ff}
.h2{font-size:clamp(26px,4.4vw,44px);color:var(--text);font-weight:700;line-height:1.12}
.h2-light{color:#fff}
.h2.xl{font-size:clamp(26px,4.4vw,44px)}
/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-weight:600;font-size:14px;line-height:1;white-space:nowrap;
  padding:14px 24px;border-radius:70px;color:#fff;cursor:pointer;
  background:var(--blue);border:none;
  transition:background .18s ease;
}
.btn .ico{width:17px;height:17px}
.btn-lg{padding:16px 30px;font-size:15px}
.btn-sm{padding:12px 20px}
.btn-block{width:100%;padding:15px}
.btn-navy{
  background:linear-gradient(180deg,#0b1e5c,#061436);border-color:rgba(255,255,255,.25);
}
.btn-navy:hover{box-shadow:0 18px 40px -16px rgba(0,0,0,.55)}

























/* ---------- Hero ---------- */
.hero{
  position:relative;background:#04060e url(../img/home-hero-bg.webp) center center/cover no-repeat;color:#fff;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));
  padding:calc(60px + var(--nav-h)) 0 40px;isolation:isolate;
  min-height:min(760px, calc(100vh - var(--topbar-h,44px)));
}
.hero>.container{width:100%}
.hero-glow,.hero-shape{display:none}
.hero-glow{
  position:absolute;top:-160px;left:50%;transform:translateX(-50%);
  width:1280px;height:820px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(38% 42% at 50% 34%,rgba(22,233,215,.12),transparent 62%),
    radial-gradient(closest-side,rgba(3,72,205,.6),rgba(0,54,160,.18) 46%,transparent 72%);
  filter:blur(4px);
  animation:heroGlowPulse 7s ease-in-out infinite;
}
@keyframes heroGlowPulse{0%,100%{opacity:.9}50%{opacity:1}}
.hero-shape{
  position:absolute;right:-160px;top:180px;width:680px;height:760px;z-index:-2;pointer-events:none;
  background:conic-gradient(from 160deg at 60% 40%,rgba(0,71,187,.22),transparent 40%,rgba(4,120,220,.14) 70%,transparent);
  clip-path:polygon(30% 0,100% 22%,86% 100%,0 74%);
  opacity:.55;filter:blur(20px);
}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 58% at 50% 44%,rgba(3,7,20,.22) 0%,rgba(3,7,20,.1) 54%,rgba(3,7,20,0) 82%),
    linear-gradient(180deg,rgba(3,7,20,.62) 0%,rgba(3,7,20,.24) 18%,rgba(3,7,20,.06) 42%,rgba(3,7,20,.18) 64%,rgba(3,7,20,.42) 84%,rgba(3,7,20,.7) 100%);
}
/* ---------- Ticker ---------- */
.ticker{background:var(--slate);overflow:hidden;border-block:1px solid rgba(255,255,255,.04)}
.ticker-track{display:flex;align-items:center;gap:0;white-space:nowrap;will-change:transform}
.ticker-item{display:inline-flex;align-items:center;gap:9px;padding:17px 34px;font-size:13.5px;flex:none}
.ticker-item .t-dot{width:7px;height:7px;border-radius:50%}
.ticker-item .t-dot.up{background:var(--green)}
.ticker-item .t-dot.down{background:var(--red)}
.ticker-item .t-sym{font-weight:700;color:#eef1f6}
.ticker-item .t-price{color:#9aa3b2}
.ticker-item .t-chg{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.ticker-item .t-chg svg{width:11px;height:11px}
.ticker-item .t-chg.up{color:var(--green)}
.ticker-item .t-chg.down{color:var(--red)}
/* ---------- Section themes ---------- */
.why,.awards{background:var(--bg-light)}
.markets,.academy,.sponsors{background:var(--bg-light-2)}
.platforms{background:linear-gradient(180deg,var(--bg-light-2),#fff)}
/* ---------- Why stats ---------- */
/* ---------- Markets (glassmorphism) ---------- */
.markets{position:relative;overflow:hidden;background:var(--bg-light)}
.markets>.container{position:relative;z-index:1}
/* ---- Markets explorer (glassmorphic cards + category tabs) ---- */
.mkx-card{display:flex;flex-direction:column;width:320px;flex:none;border-radius:var(--radius-xl);padding:20px 20px 18px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);border:1px solid rgba(255,255,255,.85);transition:transform .4s var(--ease),border-color .3s,background .3s}
.mkx-card:hover{transform:translateY(-4px);border-color:#fff;background:rgba(255,255,255,.66)}
.mkx-top{display:flex;align-items:center;gap:12px}
.mkx-ic{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:14px;font-weight:800;color:#fff;letter-spacing:-.02em}
.mkx-ic-flag{overflow:hidden;border:1px solid rgba(0,0,0,.08);box-shadow:0 2px 6px rgba(0,0,0,.14)}
.mkx-ic-flag img{width:100%;height:100%;object-fit:cover}
.mkx-ic-flags{position:relative;width:48px;background:none}
.mkx-ic-flags img{position:absolute;top:50%;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.22)}
.mkx-ic-flags img:first-child{width:29px;height:29px;left:0;transform:translateY(-50%);z-index:1}
.mkx-ic-flags img:last-child{width:25px;height:25px;right:0;transform:translateY(-50%);z-index:2}
.mkx-ic-inst{overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.mkx-ic-inst img{width:100%;height:100%;display:block}
.mkx-ic-etf{background:#e6edf6;color:#5c6c86}
.mkx-ic-etf svg{width:22px;height:22px}
.mkx-name{min-width:0}
.mkx-name b{display:block;font-size:15px;font-weight:800;color:var(--text);letter-spacing:-.01em}
.mkx-name em{display:block;font-style:normal;font-size:12.5px;color:var(--text-mute);line-height:1.3;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkx-spark{margin:14px 0 16px;height:64px}
.mkx-spark svg{width:100%;height:100%;display:block}
.mkx-base{stroke:rgba(20,44,96,.2);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.mkx-foot{display:flex;align-items:center;gap:10px;margin-top:auto}
.mkx-price{font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;padding:7px 13px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid var(--line)}
.mkx-flash-up{animation:mkxFlash .8s ease;--fc:#0a9d5a;--fb:rgba(18,183,106,.16)}
.mkx-flash-down{animation:mkxFlash .8s ease;--fc:#d43a3f;--fb:rgba(229,72,77,.16)}
@keyframes mkxFlash{0%,26%{color:var(--fc);background:var(--fb)}100%{color:var(--text);background:rgba(255,255,255,.72)}}
.mkx-chg{font-size:13px;font-weight:700;color:#fff;padding:7px 12px;border-radius:60px;font-variant-numeric:tabular-nums}
.mkx-chg.up{background:#12b76a}
.mkx-chg.down{background:#e5484d}
.mkx-trade{margin-left:auto;font-size:13.5px;font-weight:600;color:var(--text);padding:8px 18px;border-radius:60px;background:rgba(255,255,255,.72);border:1px solid var(--line);text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.mkx-trade:hover{background:var(--blue);color:#fff;border-color:transparent}
@media (max-width:560px){.mkx-card{width:280px}}
.markets-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.mkt-card{
  background:rgba(255,255,255,.46);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-lg);
  padding:26px 28px;box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.mkt-card:hover{transform:translateY(-5px);box-shadow:0 24px 54px -22px rgba(20,44,96,.34),inset 0 1px 0 rgba(255,255,255,.95);border-color:#fff}
.mkt-list li{border-bottom-color:rgba(203,214,228,.5)}
.price-flash-up{animation:flashUp .6s var(--ease)}
.price-flash-down{animation:flashDown .6s var(--ease)}
@keyframes flashUp{0%{color:var(--green)}100%{color:#3a4353}}
@keyframes flashDown{0%{color:var(--red)}100%{color:#3a4353}}
.mkt-wide{grid-column:span 2}
.mkt-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mkt-head h3{font-size:13px;letter-spacing:.08em;color:var(--text);font-weight:700}
.view-all{font-size:12.5px;color:var(--blue);font-weight:600;transition:opacity .2s}
.view-all:hover{opacity:.7}
.mkt-list li{border-bottom:1px solid #eef1f6}
.mkt-list li:last-child{border-bottom:none}
.mkt-row{display:grid;grid-template-columns:26px 1fr auto auto 16px;align-items:center;gap:12px;padding:13px 10px;margin:0 -10px;border-radius:11px;color:inherit;transition:background .25s var(--ease)}
.mkt-row:hover{background:rgba(0,71,187,.06)}
.mkt-row:hover .mkt-name{color:var(--blue)}
.mkt-row:hover .coin{transform:scale(1.08)}
.coin{transition:transform .25s var(--ease)}
.mkt-arrow{width:16px;height:16px;color:var(--blue);opacity:0;transform:translateX(-5px);transition:opacity .25s var(--ease),transform .25s var(--ease);justify-self:end}
.mkt-row:hover .mkt-arrow{opacity:1;transform:translateX(0)}
.coin{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.coin-gold{background:linear-gradient(145deg,#f7b733,#e08c1a)}
.coin-silver{background:linear-gradient(145deg,#9aa7b8,#6a7688)}
.coin-copper{background:linear-gradient(145deg,#e0603a,#b23a1e)}
.coin-plat{background:linear-gradient(145deg,#2b2f38,#12151b)}
.coin-eur{background:linear-gradient(145deg,#3b6fe0,#1b3fa8)}
.coin-gbp{background:linear-gradient(145deg,#7a5cf0,#4a2fb0)}
.coin-jpy{background:linear-gradient(145deg,#1f2733,#0c1119)}
.coin-aud{background:linear-gradient(145deg,#12b389,#0b7d5f)}
.coin-aapl{background:linear-gradient(145deg,#5b6472,#2c333d)}
.coin-tsla{background:linear-gradient(145deg,#e0303a,#a01820)}
.coin-nvda{background:linear-gradient(145deg,#4caf50,#2e7d32)}
.coin-amzn{background:linear-gradient(145deg,#ff9f1c,#e07800)}
.coin-idx{background:linear-gradient(145deg,#3f78d8,#1d4fa0);font-size:9.5px}
.coin-etf{background:linear-gradient(145deg,#5568e0,#2f3fae)}
.mkt-name{font-size:14.5px;font-weight:600;color:var(--text)}
.mkt-name em{font-style:normal;color:var(--text-mute);font-weight:400}
.mkt-price{font-size:14px;color:#3a4353;font-variant-numeric:tabular-nums;font-weight:500}
.chg{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.chg.up{color:var(--green)}
.chg.down{color:var(--red)}
/* ---------- Platforms ---------- */
.plat-grid{
  display:grid;gap:24px;margin-bottom:56px;
  grid-template-columns:1.42fr 1fr 1fr;
  grid-template-areas:"app web web" "app mt4 mt5";
}
.plat-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);
  padding:34px 34px 0;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.plat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.plat-copy h3{font-size:21px;color:var(--text);margin-bottom:8px}
.plat-copy p{font-size:14.5px;color:var(--text-soft);max-width:420px}
.plat-app{grid-area:app;background:linear-gradient(155deg,#e8f0fb 0%,#ffffff 60%);min-height:512px;padding-bottom:0;overflow:hidden}
.plat-app::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(70% 60% at 8% 6%,rgba(255,255,255,.9),rgba(235,242,251,0) 68%)}
.plat-app .plat-copy{max-width:min(100%,40%);position:relative;z-index:5}
.plat-app .plat-copy h3{font-size:clamp(15px,2.1vw,19px);white-space:nowrap}
@keyframes platFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.plat-web{
  grid-area:web;overflow:hidden;min-height:240px;color:var(--text);
  background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  background-image:radial-gradient(62% 70% at 6% 0%,rgba(0,71,187,.08),transparent 64%);
}
.plat-web .plat-copy{max-width:44%;position:relative;z-index:5}
.plat-web .plat-copy h3{color:var(--text)}
.plat-web .plat-copy p{color:var(--text-soft)}
.plat-tablet{position:absolute;right:0;bottom:0;display:block;height:calc(100% - 26px);width:auto;max-width:54%;object-fit:contain;object-position:100% 100%;filter:drop-shadow(0 22px 34px rgba(20,44,96,.3));z-index:1;pointer-events:none}
.link-ur{position:absolute;bottom:26px;left:34px;z-index:5;display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue)}
.plat-mt .link-ur{color:var(--blue)}
.link-ur .ico{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-ur:hover .ico{transform:translate(3px,-3px)}
.plat-mt{
  min-height:250px;background-color:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  border-color:rgba(255,255,255,.75);
  box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  background-image:radial-gradient(58% 66% at 6% 0%,rgba(0,71,187,.07),transparent 64%);
}
.plat-mt:nth-of-type(3){grid-area:mt4}
.plat-mt:nth-of-type(4){grid-area:mt5}
.plat-mt .plat-copy{max-width:225px;position:relative;z-index:2}
.plat-mt-ico{position:absolute;right:14px;bottom:0;width:auto;height:126px;max-width:44%;z-index:1;object-fit:contain;object-position:100% 100%}
/* ---------- Tools (dark) ---------- */
.tools{
  background:
    radial-gradient(90% 60% at 50% 100%,rgba(0,40,120,.5),transparent 70%),
    linear-gradient(180deg,#000 0%,#00102c 100%);
  color:#fff;position:relative;
}
.blue{color:var(--blue)}
/* ---------- How it works (dark navy, pinned scrub) ---------- */
.howto{background:
  radial-gradient(92% 72% at 50% 6%,rgba(0,46,138,.42),transparent 60%),
  radial-gradient(80% 60% at 50% 100%,rgba(0,32,96,.34),transparent 66%),
  linear-gradient(180deg,#04060e 0%,#050a1c 50%,#04060e 100%);
  color:#fff;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.stp{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:700;font-size:15px;background:rgba(255,255,255,.08);color:#8b97ae;border:1px solid rgba(255,255,255,.12);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease),transform .35s var(--ease)}
.stp.done{background:var(--blue);color:#fff;border-color:transparent}
.stp.done::after{content:"";width:16px;height:9px;border-left:2.4px solid #fff;border-bottom:2.4px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.stp.active{background:#031233;color:#5b9dff;border:2px solid #2f6bde;box-shadow:0 0 0 5px rgba(47,107,222,.18);transform:scale(1.06)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:44px}
.step{position:relative;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);padding:30px 28px;transition:transform .45s var(--ease),border-color .35s,background .35s,box-shadow .35s}
.step h3{font-size:21px;color:#dfe6f2;margin-bottom:10px;transition:color .35s}
.step p{font-size:14px;color:#93a0b7;transition:color .35s}
/* static fallback (mobile / short viewports): all steps as equal white cards, no stepper */
.howto-static{min-height:auto;display:block}
.howto-static .steps{margin-bottom:26px}
.howto-static .step{background:#fff;border-color:#fff}
.howto-static .step h3{color:#0d1424}
.howto-static .step p{color:#5a6472}
/* ---------- Trusted worldwide ---------- */
.trusted{background:linear-gradient(180deg,#001333 0%,#050912 34%,#04060b 100%);color:#fff;overflow:hidden}
.play{position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.85);color:#0d1424;display:grid;place-items:center;backdrop-filter:blur(4px);transition:transform .3s var(--ease),background .3s}
.play svg{width:20px;height:20px;margin-left:2px}
.play:hover{transform:scale(1.08);background:#fff}
/* ---------- Reviews ---------- */
.reviews{background:#04060b;color:#fff;position:relative}
.tp-sub{margin-top:14px;font-size:15px;color:#aab4c8}
.tp-logo{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:#fff}
.tp-star{width:16px;height:16px;color:#00b67a}
.reviews-rail{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.reviews-track{display:flex;align-items:stretch;gap:20px;width:max-content;padding:6px 20px;will-change:transform}
.review{flex:0 0 340px;width:340px;display:flex;flex-direction:column;background:#121319;border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:22px;transition:transform .4s var(--ease),border-color .3s}
.review:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.16)}
.rv-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.stars{display:inline-flex;gap:2px;background:#00b67a;padding:4px;border-radius:4px}
.stars svg{width:15px;height:15px;color:#fff}
.verified{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:#9aa4b6}
.verified svg{width:14px;height:14px;color:#8a94a6}
.rv-meta{font-size:12.5px;color:#8f99ab;margin-bottom:8px}
.rv-meta b{color:#e6eaf1;font-weight:600}
.rv-meta em{font-style:normal}
.review h4{font-size:15px;color:#fff;margin-bottom:8px;letter-spacing:-.01em}
.review p{font-size:13.5px;color:#98a2b4;line-height:1.6}
.read-more{color:#00b67a;font-weight:600}
.reviews-cta{text-align:center;margin-top:40px}
.reviews-more{display:inline-flex}
/* ---------- Awards ---------- */
.awards{position:relative;overflow:hidden}
.awards::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(50% 60% at 82% 8%,rgba(0,71,187,.08),transparent 62%)}
.awards>.container{position:relative;z-index:1}
.award-rail{width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.award-track{display:flex;gap:24px;width:max-content;will-change:transform;padding:4px 0}
.award-card{flex:0 0 300px;height:130px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.72);border-radius:16px;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),border-color .3s}
.award-card:hover{transform:translateY(-4px);border-color:#fff}
.laurel{width:22px;height:42px;background:center/contain no-repeat;flex:none}
.laurel-l{background-image:url('../img/laurel-left.svg')}
.laurel-r{background-image:url('../img/laurel-right.svg')}
.award-body{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;min-width:0}
.award-txt{font-size:13px;font-weight:700;color:var(--text);text-align:center;letter-spacing:-.01em;line-height:1.25}
.award-sum{display:block;font-size:9.5px;font-weight:700;letter-spacing:.03em;color:var(--blue);line-height:1.2}
.award-nav{display:none}
.media-head{margin-top:100px}
.media-logos{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(28px,5vw,72px)}
.media-logos li{display:flex;flex-direction:column;align-items:center;gap:12px}
.media-rate{font-size:22px;font-weight:700;color:var(--text)}
.media-logo{display:flex;align-items:center;justify-content:center;height:30px;width:132px}
.media-logos img{max-height:26px;max-width:124px;width:auto;height:auto;object-fit:contain;transition:transform .3s var(--ease)}
.media-logos li:hover img{transform:translateY(-2px)}
.media-url{font-size:12.5px;color:var(--text-mute)}
/* ---------- Academy ---------- */
.academy{position:relative;overflow:hidden}
.academy::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(52% 55% at 90% 6%,rgba(0,71,187,.08),transparent 62%)}
.academy>.container{position:relative;z-index:1}
/* ---------- Sponsors ---------- */
.sponsors{position:relative;overflow:hidden}
.sponsors::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(46% 70% at 22% 20%,rgba(0,71,187,.07),transparent 62%)}
.sponsors>.container{position:relative;z-index:1}
/* ---------- CTA banner ---------- */
.cta-banner{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#04060d}
.cta-bg{position:absolute;inset:0;z-index:-2;
  background:#04060d url("../img/cta-broker.webp") center bottom/cover no-repeat}
.cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,13,.55) 0%,rgba(4,6,13,0) 30%);pointer-events:none}
/* .cta-inner{text-align:center;padding:112px 0 clamp(300px,25vw,560px)}
.cta-inner h2{font-size:clamp(26px,4.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12}
.cta-inner p{max-width:620px;margin:18px auto 0;font-size:15px;color:#d3e2ff}
.cta-inner .btn{margin-top:30px} */
/* ---------- Hero network graphic ---------- */
.hero-stars{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#cfe0ff;opacity:.5;animation:twinkle 4s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.18}50%{opacity:.85}}
.hero-viz{position:relative;z-index:1;width:min(100%,720px);aspect-ratio:720/468;margin:48px auto 4px}
.cta-traces{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.cta-traces path{fill:none}
.tr-base path{stroke:rgba(120,150,220,.16);stroke-width:1.4}
.tr-flow path{stroke:#3f80ea;stroke-width:1.6;stroke-dasharray:4 66;stroke-linecap:round;animation:trFlow 3.2s linear infinite;filter:drop-shadow(0 0 4px rgba(63,128,234,.9))}
@keyframes trFlow{to{stroke-dashoffset:-140}}
.tr-nodes circle{animation:nodePulse 2.4s ease-in-out infinite}
@keyframes nodePulse{0%,100%{opacity:.4}50%{opacity:1}}
.cta-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120px;height:120px;display:grid;place-items:center;z-index:3}
.cta-hub::before{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,95,255,.55),transparent 70%);filter:blur(6px)}
.hub-ring{position:absolute;width:100px;height:100px;border-radius:26px;border:1px solid rgba(90,150,255,.45);animation:hubpulse 3s ease-out infinite}
.hub-ring.r2{animation-delay:1.5s}
@keyframes hubpulse{0%{transform:scale(.85);opacity:.7}100%{transform:scale(1.7);opacity:0}}
.hub-core{position:relative;z-index:2;width:96px;height:96px;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:linear-gradient(160deg,rgba(34,54,102,.7),rgba(8,16,40,.8));border:1px solid rgba(120,160,255,.45);box-shadow:0 0 50px rgba(0,90,255,.5),inset 0 1px 0 rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hub-core img{width:30px;height:auto}
.hub-core b{font-size:8.5px;font-weight:700;letter-spacing:.14em;color:#dbe6ff}
.cta-card{position:absolute;z-index:2;background:rgba(18,26,46,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:14px 16px;box-shadow:0 22px 50px -22px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.1)}
.cc-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.08);color:#9fc2ff;margin-bottom:9px}
.cc-ic svg{width:15px;height:15px}
.cc-h{font-size:11.5px;color:#8b95a8}
.cc-big{display:block;font-size:16px;font-weight:700;color:#fff;margin-top:3px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cc-sub{display:block;font-size:11px;color:#8b95a8;margin-top:4px}
.cc-sub.up{color:#34d99b}
.cc-price-row{justify-content:space-between;margin-top:8px}
.cc-price-val{font-size:17px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.cc-chart{width:100%;height:30px;margin-top:8px}
.cc-conn{top:0;left:6%;width:190px}
.cc-vol{top:37%;left:0;width:214px}
.cc-vol.is-active{border-color:rgba(0,120,255,.6);box-shadow:0 0 0 1px rgba(0,120,255,.35),0 22px 50px -20px rgba(0,60,180,.6)}
.cc-price{bottom:0;left:7%;width:216px}
.cta-bubble{position:absolute;z-index:2;top:6%;right:6%;background:rgba(20,28,48,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);border-radius:14px 14px 14px 4px;padding:10px 14px;font-size:12.5px;color:#dfe6f2;font-weight:500;white-space:nowrap;box-shadow:0 16px 34px -16px rgba(0,0,0,.6)}
.cta-bubble b{color:#7fb0ff}
.cta-chip{position:absolute;z-index:2;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#9fc2ff;background:rgba(18,26,46,.6);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12);box-shadow:0 16px 34px -18px rgba(0,0,0,.6)}
.cta-chip svg{width:20px;height:20px}
.cta-chip.cx1{top:37%;right:0}
.cta-chip.cx2{bottom:19%;right:16%}
[data-float]{animation:floaty2 6s ease-in-out infinite;will-change:transform}
.cc-vol[data-float]{animation-duration:7s;animation-delay:-1.2s}
.cc-price[data-float]{animation-duration:6.6s;animation-delay:-2.4s}
.cta-bubble[data-float]{animation-duration:5.4s;animation-delay:-.8s}
.cta-chip.cx1[data-float]{animation-duration:5.8s;animation-delay:-1.6s}
.cta-chip.cx2[data-float]{animation-duration:6.8s;animation-delay:-3s}
@keyframes floaty2{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}












/* ---------- Animations ---------- */
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
/* reveal initial states (only when JS animation active) */
/* only the fade is declared here — the 28px rise is set by GSAP in initReveals,
   so once the tween clears its inline transform nothing overrides :hover */
html.is-animate [data-reveal],html.is-animate [data-reveal-stagger]>*{opacity:0}
html.is-animate .head [data-reveal]{will-change:transform,opacity}
/* ---------- Responsive ---------- */
@media (max-width:1200px){.header-partners,.hp-divider{display:none}}
@media (max-width:1080px){:root{--gutter:20px}
.plat-grid{grid-template-columns:1fr 1fr;grid-template-areas:"app app" "web web" "mt4 mt5"}
.plat-app{min-height:440px}
.plat-tablet{right:0;max-width:46%}
.reviews-track{padding-inline:16px}
.foot-cols{grid-template-columns:repeat(4,1fr);gap:32px 24px;padding-top:56px}}
@media (max-width:900px){
  /* .nav-menu{display:none} */
.login,.lang,.lang-pop{display:none}
.hamburger{display:flex}
.nav{gap:16px}
.markets-grid{grid-template-columns:1fr 1fr}
.mkt-wide{grid-column:span 2}
.howto{min-height:auto;display:block}
}
@media (max-width:720px){.section{padding:68px 0}}
.head{margin-bottom:40px}
.hero{padding:calc(var(--nav-h) + 26px) 0 72px}
.markets-grid{grid-template-columns:1fr}
.mkt-wide{grid-column:span 1}
.plat-grid{grid-template-columns:1fr;grid-template-areas:"app" "web" "mt4" "mt5"}
.plat-web{min-height:0}
.plat-web .plat-copy{max-width:none}
.plat-web .link-ur{position:static;left:auto;bottom:auto;margin-top:20px}
.plat-tablet{position:static;height:auto;width:min(88%,400px);max-width:none;margin:24px -34px 0 auto;top:0;right:0}
.plat-mt{min-height:210px}
.steps{grid-template-columns:1fr}
.review{flex-basis:290px;width:290px}
.foot-cols{grid-template-columns:repeat(2,1fr)}
.foot-bottom{flex-direction:column;align-items:flex-start;gap:18px}
/* .cta-inner{padding:84px 0 150px}} */

@media (max-width:460px){.foot-cols{grid-template-columns:1fr}
.risk{padding:0}}
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
html.is-animate [data-reveal],html.is-animate [data-reveal-stagger]>*,html.is-animate [data-ct-cards]>*{opacity:1!important;transform:none!important}
html.is-animate [data-ct-words] .ct-w>i{transform:none!important}
.ticker-track{animation:none!important}}
/* ================= ACCOUNT OPENING PAGE ================= */
/* the outline treatment read as an unfinished button on dark banners */
.btn-ghost{background:#fff;border:1.5px solid transparent;color:var(--text)}
.btn-ghost::after{display:none}
.btn-ghost:hover{background:#eaf0fa;border-color:transparent;box-shadow:0 18px 38px -22px rgba(0,0,0,.5)}
/* ---- Banner ---- */
.acct-hero{position:relative;color:#fff;overflow:hidden;isolation:isolate;background:#04060e;margin-top:calc(-1 * var(--nav-h));min-height:min(780px, calc(100vh - var(--topbar-h,44px)));display:flex;align-items:center;padding:calc(var(--nav-h) + 40px) 0 56px}
.acct-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.acct-hero-bg{position:absolute;inset:0;z-index:-1;background:transparent}
.acct-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,14,.95) 0%,rgba(4,6,14,.78) 38%,rgba(4,6,14,.32) 64%,rgba(4,6,14,.04) 100%)}
.acct-hero-inner{position:relative;z-index:1}
.acct-hero-title{font-size:clamp(29px,4.1vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1.12;margin-top:16px}
.acct-hero-sub{margin-top:18px;max-width:540px;font-size:clamp(15px,1.5vw,17px);color:#c4cedf;line-height:1.6}
.acct-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.acct-hero-points{display:flex;gap:14px;flex-wrap:wrap;margin-top:40px}
.acct-hero-points li{display:flex;align-items:center;gap:11px;font-size:14px;font-weight:600;color:#eaf0fa;padding:8px 18px 8px 8px;border-radius:70px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.acct-hero-points .pt-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(0,71,187,.3);color:#8fb8ff}
.acct-hero-points .pt-ic svg{width:17px;height:17px}
/* ---- Section themes ---- */
.faq-sec{background:var(--bg-light)}
/* ---- Verify bento (cards with image tiles + wide dark card) ---- */
.vb-glyph{position:relative;z-index:1;width:84px;height:84px;border-radius:22px;display:grid;place-items:center;color:#fff;box-shadow:0 22px 46px -16px rgba(0,71,187,.55);transition:transform .45s var(--ease)}
.vb-glyph svg{width:40px;height:40px}
.vg-blue{background:linear-gradient(160deg,#2a72ff,#0b43c6)}
.vg-cyan{background:linear-gradient(160deg,#16E9D7,#0a9d92)}
.vg-green{background:linear-gradient(160deg,#26cf90,#0f9d6f)}
/* ---- Next steps ---- */
/* ---- FAQ (minimal divider list) ---- */
.faq-list{max-width:1000px;margin:0 auto}
.faq-item{background:none;border:none;border-bottom:1px solid rgba(20,40,80,.12);border-radius:0}
.faq-item:first-child{border-top:1px solid rgba(20,40,80,.12)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:28px;padding:27px 4px;font-size:clamp(16px,1.65vw,19px);font-weight:400;color:var(--text);transition:color .2s}
.faq-item summary:hover{color:var(--blue)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q-ic{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(20,40,80,.28);display:grid;place-items:center;color:var(--text-soft);transition:transform .3s var(--ease),border-color .25s,color .25s,background .25s}
.faq-q-ic svg{width:22px;height:22px}
.faq-item summary:hover .faq-q-ic{border-color:var(--blue);color:var(--blue)}
.faq-item[open] summary .faq-q-ic,.faq-item[open] summary:hover .faq-q-ic{transform:rotate(45deg);background:var(--blue);border-color:var(--blue);color:#fff}
.faq-a{padding:0 4px 28px;max-width:860px;font-size:15px;color:var(--text-soft);line-height:1.7}
@media (max-width:720px){.acct-hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 54px;text-align:center}
.hero{min-height:auto}
.acct-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.68),rgba(4,6,14,.93))}
.acct-hero-inner{max-width:100%}
.acct-hero-sub{margin-inline:auto}
.acct-hero-cta,.acct-hero-points{justify-content:center}
.acct-hero-sub br{display:none}}
/* ================= TRADING ACCOUNT PAGE ================= */
/* ---- Hero (two-column: copy + interactive panel over video) ---- */
.ta-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:center;width:100%}
.ta-hero-copy{max-width:600px;min-width:0}
.ta-panel{min-width:0}
.ta-hero-metrics{display:flex;flex-wrap:wrap;gap:14px 0;margin-top:38px}
.ta-hero-metrics li{padding:0 26px;position:relative}
.ta-hero-metrics li:first-child{padding-left:0}
.ta-hero-metrics li+li::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:1px;background:rgba(255,255,255,.16)}
.ta-hero-metrics b{display:block;font-size:clamp(21px,2.3vw,28px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.ta-hero-metrics span{display:block;margin-top:6px;font-size:12px;color:#9fb0cc;letter-spacing:.01em}
/* Interactive account panel */
.ta-panel{position:relative;border-radius:var(--radius-xl);padding:22px 22px 24px;
  background:linear-gradient(180deg,rgba(21,29,52,.74),rgba(9,13,24,.86));
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 44px 100px -36px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.14)}
.ta-panel::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(120,160,255,.4),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
.ta-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.ta-panel-head b{font-size:15px;color:#fff;font-weight:600;letter-spacing:-.01em}
.ta-status{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#34d99b;padding:5px 12px 5px 10px;border-radius:70px;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.32)}
.ta-status i{width:7px;height:7px;border-radius:50%;background:#34d99b;animation:pulse 2.4s infinite}
.ta-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:5px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.ta-seg button{padding:11px 8px;border-radius:10px;font-size:13px;font-weight:600;color:#aeb8cc;white-space:nowrap;transition:color .25s var(--ease),background .25s var(--ease),box-shadow .25s}
.ta-seg button:hover{color:#fff}
.ta-seg button.active{background:linear-gradient(180deg,#0b57e6,#0740b8);color:#fff;box-shadow:0 12px 26px -12px rgba(3,72,205,.95)}
.ta-tabs{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 16px}
.ta-tabs button{font-size:12.5px;font-weight:600;color:#aeb8cc;padding:7px 14px;border-radius:70px;border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);transition:color .25s,background .25s,border-color .25s}
.ta-tabs button:hover{color:#fff;border-color:rgba(255,255,255,.28)}
.ta-tabs button.active{color:#fff;background:rgba(0,71,187,.3);border-color:rgba(90,150,255,.55)}
.ta-quote{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.08)}
.ta-quote-l{min-width:0}
.ta-quote-sym{font-size:15px;font-weight:700;color:#fff;letter-spacing:-.01em}
.ta-quote-name{font-size:12px;color:#8b95a8;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ta-spark{width:78px;height:34px;flex:none}
.ta-spark path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:taSpark 1.4s var(--ease) forwards}
@keyframes taSpark{to{stroke-dashoffset:0}}
.ta-quote-r{text-align:right;flex:none}
.ta-quote-price{font-size:18px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.ta-quote-chg{font-size:12.5px;font-weight:600;margin-top:2px}
.ta-quote-chg.up{color:#34d99b}
.ta-quote-chg.down{color:#ff6b6b}
@keyframes taUp{0%{color:#34d99b}100%{color:#fff}}
@keyframes taDown{0%{color:#ff6b6b}100%{color:#fff}}
.ta-quote-price.fup{animation:taUp .7s ease}
.ta-quote-price.fdown{animation:taDown .7s ease}
.ta-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 18px}
.ta-metric{padding:13px 15px;border-radius:13px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.ta-metric small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:#8b95a8;margin-bottom:6px}
.ta-metric small svg{width:13px;height:13px;color:#7fb0ff}
.ta-metric b{font-size:17px;color:#fff;font-weight:700;letter-spacing:-.01em}
.ta-metric em{font-style:normal;font-size:10.5px;color:#8b95a8;display:block;margin-top:2px}
@keyframes taMetric{0%{background:rgba(0,71,187,.2);border-color:rgba(90,150,255,.4)}100%{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08)}}
.ta-panel .btn{width:100%}
.ta-panel-note{margin-top:12px;font-size:11px;color:#7d879a;text-align:center}
/* ---- Account type cards (dark, multi-shade, equal height) ---- */
/* ---- Comparison table (airy, brand-highlighted column) ---- */
.ta-spec-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ta-table{width:100%;min-width:820px;max-width:1080px;margin:0 auto;border-collapse:collapse;font-size:15px}
.ta-table th,.ta-table td{padding:21px 26px;text-align:left;vertical-align:middle}
.ta-table thead th{font-size:17px;font-weight:700;color:var(--text);letter-spacing:-.01em;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ta-table thead th:first-child{font-size:14px;color:var(--text-mute);font-weight:600}
.spec-feat{display:flex;align-items:center;gap:14px}
.spec-ic{flex:none;width:24px;height:24px;color:var(--text-mute)}
.spec-ic svg{width:24px;height:24px}
.ta-table tbody td:first-child{color:var(--text);font-weight:500}
.ta-table tbody td{color:var(--text-soft);line-height:1.45}
.ta-table tbody tr td{border-bottom:1px solid var(--line)}
.ta-table tbody tr:last-child td{border-bottom:none}
/* brand-highlighted column (Prime ECN) */
.ta-table th.ta-col-rec{color:var(--blue);background:rgba(0,71,187,.06);border-top-left-radius:14px;border-top-right-radius:14px}
.ta-table td.ta-col-rec{color:var(--blue);font-weight:600;background:rgba(0,71,187,.05)}
.ta-table tbody tr:last-child td.ta-col-rec{border-bottom-left-radius:14px;border-bottom-right-radius:14px}
.ta-rec-badge{display:inline-block;margin-left:9px;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:70px;background:var(--blue);vertical-align:middle}
.spec-no{display:inline-grid;place-items:center;width:24px;height:24px}
.spec-no svg{width:17px;height:17px;color:#b8c0cc}
/* ---- FAQ (white, to separate from the light specs section above) ---- */
.ta-faq{background:#fff}
/* ---- Closing CTA: two actions ---- */
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
/* .cta-inner .cta-actions .btn{margin-top:0} */
@media (max-width:980px){.ta-hero-grid{grid-template-columns:minmax(0,1fr);gap:38px;text-align:center}
.ta-hero-copy{max-width:600px;margin-inline:auto}
.acct-hero-cta{justify-content:center}
.ta-panel{width:100%;max-width:480px;margin-inline:auto}}
/* ================= PRIME ECN PAGE ================= */
/* ---- Key metrics (light, glassmorphism cards) ---- */
/* ---- Built for professionals (dark bento) ---- */
/* ---- Upgrading (light two-column) ---- */
.pe-float{position:absolute;left:-24px;bottom:36px;display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 20px;box-shadow:0 24px 54px -22px rgba(16,30,54,.34);min-width:290px}
.pe-float-ic{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(16,185,129,.12);color:var(--green)}
.pe-float-ic svg{width:22px;height:22px}
.pe-float-txt b{display:block;font-size:15px;color:var(--text);letter-spacing:-.01em}
.pe-float-txt span{display:block;font-size:12.5px;color:var(--text-mute);margin-top:2px}
.pe-float-val{margin-left:auto;text-align:right}
.pe-float-val b{display:block;font-size:15px;color:var(--green);font-weight:700}
.pe-float-val span{font-size:11.5px;color:var(--text-mute)}
@media (max-width:720px){.pe-float{left:12px;right:12px;min-width:0}}
/* ---- Prime ECN micro-interactions ---- */
@keyframes peBar{0%,100%{opacity:.4}30%{opacity:1;box-shadow:0 0 10px rgba(91,157,255,.7)}}
@keyframes peGlow{0%,100%{text-shadow:0 0 0 rgba(91,157,255,0)}50%{text-shadow:0 0 22px rgba(91,157,255,.45)}}
@keyframes peSheen{0%{left:-60%}55%,100%{left:135%}}
/* ================= FUNDING PAGE ================= */
/* ---- Methods (light, tabbed) ---- */
@keyframes payIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ---- Deposit calculator (dark, interactive) ---- */
@keyframes calcFlash{0%{color:#34d99b}100%{color:#fff}}
.calc-credited.flash{animation:calcFlash .55s ease}
/* ---- Important information (two-column: icon rows + image) ---- */
/* ================= FOREX PAGE ================= */
/* ---- Hero (dark; render bleeds from the disclaimer bar to the base) ---- */
.fx-hero{position:relative;min-height:min(780px,calc(100vh - var(--topbar-h,44px)));display:flex;align-items:center;padding:calc(var(--nav-h) + 30px) 0 44px;overflow:hidden;background:
  radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.32),transparent 60%),
  radial-gradient(60% 70% at 10% 6%,rgba(3,72,205,.20),transparent 58%),
  linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%)}
.fx-hero .acct-hero-bg::after{background:
  linear-gradient(90deg,rgba(4,6,14,.95) 0%,rgba(4,6,14,.74) 32%,rgba(4,6,14,.3) 58%,rgba(4,6,14,.06) 100%),
  linear-gradient(180deg,rgba(4,6,14,.5) 0%,transparent 24%,transparent 82%,rgba(4,6,14,.42) 100%)}
.fx-hero-copy-wrap{position:relative;z-index:2;width:100%}
.fx-hero-copy{max-width:560px}
.fx-hero .acct-hero-sub{max-width:520px}


/* ---------- Back to top ---------- */
    .to-top{position:fixed;right:24px;bottom:94px;width:46px;height:46px;border-radius:50%;background:rgba(6,9,20,.7);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.5);z-index:840;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s,transform .35s,background .3s}
    .to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
    .to-top svg{width:20px;height:20px}
    .to-top:hover{background:var(--blue)}


/* right visual — absolute; render touches the disclaimer bar (top) and the banner base (bottom) */
.fx-hero-visual{position:absolute;top:0;right:0;bottom:0;width:min(760px,54%);z-index:1;pointer-events:none}
.fx-hero-stage{position:absolute;right:-2%;bottom:-1%;width:min(110%,760px);aspect-ratio:1/1;max-width:none}
.fx-hero-stage::before{content:"";position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);width:100%;height:100%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(170,200,255,.48),rgba(60,120,255,.2) 44%,transparent 72%);filter:blur(6px);animation:fxHalo 7s ease-in-out infinite}
@keyframes fxHalo{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}
.fx-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center bottom;
  -webkit-mask-image:radial-gradient(72% 82% at 50% 47%,#000 58%,rgba(0,0,0,0) 86%);mask-image:radial-gradient(72% 82% at 50% 47%,#000 58%,rgba(0,0,0,0) 86%);
  filter:drop-shadow(0 30px 56px rgba(0,20,70,.5))}
.fx-hero-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:70%;height:60px;pointer-events:none;background:radial-gradient(60% 100% at 50% 100%,rgba(0,90,220,.36),transparent 72%)}
/* ---- Scale band (light, glass stat cards) ---- */
.fx-scale{background:radial-gradient(58% 60% at 88% 2%,rgba(0,71,187,.08),transparent 60%),radial-gradient(50% 60% at 6% 100%,rgba(22,233,215,.06),transparent 60%),var(--bg-light)}
.fx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.fx-stat{background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);padding:34px 26px;text-align:center;box-shadow:0 12px 34px -18px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.fx-stat:hover{transform:translateY(-5px);box-shadow:0 28px 58px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.95);border-color:#fff}
.fx-stat b{display:block;font-size:clamp(34px,4.6vw,50px);font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1;transition:color .3s}
.fx-stat:hover b{color:var(--blue)}
.fx-stat span{display:block;margin-top:13px;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-mute);font-weight:600}
/* ---- Currency pairs explorer (tinted bg so glass cards read) ---- */
.fx-pairs{background:radial-gradient(60% 58% at 86% 0%,rgba(0,71,187,.06),transparent 60%),radial-gradient(50% 60% at 8% 100%,rgba(22,233,215,.05),transparent 60%),var(--bg-light-2)}
.fx-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:30px}
.fx-cat{position:relative;text-align:left;cursor:pointer;border-radius:var(--radius-lg);padding:26px 26px 24px;
  background:rgba(255,255,255,.42);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 10px 30px -20px rgba(20,44,96,.2),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .4s var(--ease),box-shadow .4s,border-color .3s,background .3s}
.fx-cat:hover{transform:translateY(-4px);border-color:#fff;background:rgba(255,255,255,.56);box-shadow:0 18px 40px -24px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.95)}
.fx-cat.active{border-color:rgba(0,71,187,.55);background:rgba(255,255,255,.62);box-shadow:0 10px 26px -20px rgba(0,71,187,.28),inset 0 1px 0 rgba(255,255,255,.95)}
.fx-cat::after{content:"";position:absolute;top:0;left:26px;right:26px;height:3px;border-radius:3px;background:var(--blue);opacity:0;transform:scaleX(.4);transform-origin:left;transition:opacity .3s,transform .4s var(--ease)}
.fx-cat.active::after{opacity:1;transform:scaleX(1)}
.fx-cat .cat-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:rgba(0,71,187,.08);padding:5px 11px;border-radius:70px;margin-bottom:16px}
.fx-cat h3{font-size:20px;color:var(--text);letter-spacing:-.01em;margin-bottom:8px}
.fx-cat p{font-size:13.5px;color:var(--text-soft);line-height:1.55}
.fx-cat .cat-count{margin-top:16px;display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-mute)}
.fx-cat .cat-count svg{color:var(--blue)}
.fx-cat .cat-count b{color:var(--text);font-weight:700}
.fx-pairs .ta-spec-wrap{background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);border-radius:var(--radius-lg);box-shadow:0 14px 40px -24px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9)}
.fx-pairs .ta-table{min-width:640px}
/* instrument marks — overlapping currency flags on forex, a single
   commodity icon on commodities */
.fx-pair-flags{position:relative;flex:none;width:50px;height:32px}
.fx-pair-flags img{
  position:absolute;top:50%;border-radius:50%;object-fit:cover;background:#fff;
  border:2px solid #fff;box-shadow:0 2px 7px rgba(20,44,96,.3);
  transition:transform .35s var(--ease);
}
.fx-pair-flags img:first-child{width:29px;height:29px;left:0;transform:translateY(-50%);z-index:1}
.fx-pair-flags img:last-child{width:25px;height:25px;right:0;transform:translateY(-50%);z-index:2}
.ta-table tbody tr:hover .fx-pair-flags img:first-child{transform:translateY(-50%) translateX(-2px)}
.ta-table tbody tr:hover .fx-pair-flags img:last-child{transform:translateY(-50%) translateX(2px)}
.fx-inst-ic{
  flex:none;width:34px;height:34px;border-radius:50%;overflow:hidden;display:block;
  box-shadow:0 2px 8px rgba(20,44,96,.26);transition:transform .35s var(--ease)
}
.fx-inst-ic img{display:block;width:100%;height:100%;object-fit:cover}
.ta-table tbody tr:hover .fx-inst-ic{transform:scale(1.08)}
.fx-pair-name{font-weight:700;color:var(--text);letter-spacing:-.01em}
.fx-pair-name em{display:block;font-style:normal;font-size:12px;color:var(--text-mute);font-weight:500;margin-top:1px}
.fx-px{color:var(--text);font-weight:600;font-variant-numeric:tabular-nums}
.fx-px.fup{animation:fxUp .7s ease}
.fx-px.fdown{animation:fxDown .7s ease}
@keyframes fxUp{0%{color:#0f9d6f}100%{color:var(--text)}}
@keyframes fxDown{0%{color:#e0483f}100%{color:var(--text)}}
.fx-spread-pill{display:inline-block;min-width:52px;text-align:center;font-weight:700;color:var(--blue);background:rgba(0,71,187,.08);padding:4px 12px;border-radius:70px;font-size:13px}
.fx-pairs .ta-table tbody tr{animation:fxRowIn .5s var(--ease) both}
.fx-pairs .ta-table tbody tr:nth-child(2){animation-delay:.05s}
.fx-pairs .ta-table tbody tr:nth-child(3){animation-delay:.1s}
.fx-pairs .ta-table tbody tr:nth-child(4){animation-delay:.15s}
.fx-pairs .ta-table tbody tr:nth-child(5){animation-delay:.2s}
.fx-pairs .ta-table tbody tr:nth-child(6){animation-delay:.25s}
@keyframes fxRowIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fx-pairs-note{margin-top:22px;text-align:center;font-size:12.5px;color:var(--text-mute)}
/* ---- Market hours (dark glassmorphic bento with glowing ray-line accents) ---- */
.fx-hours{background:radial-gradient(90% 68% at 50% 0%,rgba(0,46,138,.34),transparent 60%),linear-gradient(180deg,#04060e 0%,#060a18 52%,#04060e 100%);color:#fff}
/* the section owns its text colour: .h2 is near-black by default, so a dark
   section that relied on each page remembering .h2-light rendered the heading
   invisible, and .head-sub was dark grey on near-black either way */
.fx-hours .h2,.fx-hours .h2-light{color:#fff}
.fx-hours .head-sub{color:#a9b7cf}
/* leave an explicit .eyebrow-blue alone; this only rescues a bare .eyebrow */
.fx-hours .eyebrow:not(.eyebrow-blue){color:#93b6ff}
.fx-mh{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fx-mh-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:28px 28px 26px;min-height:216px;
  background:radial-gradient(130% 78% at 50% -14%,var(--ray,rgba(120,160,255,.2)),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s}
.fx-mh-card::after{content:"";position:absolute;top:0;left:16%;right:16%;height:2px;border-radius:2px;background:var(--ray-line,rgba(120,160,255,.85));box-shadow:0 0 18px 1px var(--ray-line,rgba(120,160,255,.85));opacity:.9;transition:opacity .35s,left .45s var(--ease),right .45s var(--ease)}
.fx-mh-card:hover{transform:translateY(-4px);border-color:var(--ray-line,rgba(90,150,255,.4));box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.fx-mh-card:hover::after{left:6%;right:6%;opacity:1}
/* spans */
.fx-mh--wide{grid-column:span 2}
.fx-mh--full{grid-column:1 / -1;flex-direction:row;align-items:center;gap:40px}
.fx-mh--full .fx-mh-main{flex:1;min-width:0}
.fx-mh--full .fx-mh-viz{flex:1.35;min-width:0;margin-top:0;padding-top:0}
/* ray colours (per card) */
.fx-mh--teal{--ray:rgba(22,233,215,.2);--ray-line:rgba(22,233,215,.85)}
.fx-mh--blue{--ray:rgba(0,110,255,.28);--ray-line:rgba(80,150,255,.95)}
.fx-mh--purple{--ray:rgba(150,110,255,.22);--ray-line:rgba(160,120,255,.9)}
.fx-mh--green{--ray:rgba(16,200,140,.2);--ray-line:rgba(30,210,150,.9)}
.fx-mh--orange{--ray:rgba(255,170,60,.18);--ray-line:rgba(255,180,80,.9)}
/* header */
.fx-mh-ic{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;margin-bottom:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe0ff;transition:transform .4s var(--ease),color .3s,border-color .3s}
.fx-mh-card:hover .fx-mh-ic{transform:translateY(-2px);color:#fff;border-color:var(--ray-line)}
.fx-mh-ic svg{width:23px;height:23px}
.fx-mh-card h3{font-size:19px;letter-spacing:-.02em;color:#fff;margin-bottom:8px}
.fx-mh-card p{font-size:13.5px;line-height:1.55;color:#9fb0cc;max-width:380px}
.fx-mh-viz{margin-top:auto;padding-top:20px}
/* glass sub-panel */
.fx-mh-panel{background:rgba(0,0,0,.26);border:1px solid rgba(255,255,255,.09);border-radius:13px;padding:13px 15px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* 24/5 — live status */
.fx-mh-status{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:#c4cee0}
.fx-mh-status i{width:8px;height:8px;border-radius:50%;background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite;flex:none}
/* deep liquidity — live sessions */
.fx-mh-live{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.fx-mh-sess{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#aeb8cc;padding:8px 14px;border-radius:70px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);white-space:nowrap;transition:color .35s,background .35s,border-color .35s}
.fx-mh-sess i{width:7px;height:7px;border-radius:50%;background:#6d7893}
.fx-mh-sess.is-open{color:#fff;background:rgba(52,217,155,.1);border-color:rgba(52,217,155,.4)}
.fx-mh-sess.is-open i{background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite}
.fx-mh-clock-lbl{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap;padding:8px 14px;border-radius:70px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.16)}
.fx-mh-clock-lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:#34d99b;box-shadow:0 0 0 0 rgba(52,217,155,.5);animation:pulse 2.4s infinite}
/* any hour — live quote */
.fx-mh-quote{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fx-mh-quote .q-sym{font-size:13px;font-weight:700;color:#fff}
.fx-mh-quote .q-r{text-align:right}
.fx-mh-quote .q-px{font-size:17px;font-weight:700;color:#eaf1ff;font-variant-numeric:tabular-nums}
.fx-mh-quote .q-chg{font-size:11.5px;font-weight:700}
.fx-mh-quote .q-chg.up{color:#34d99b}
.fx-mh-quote .q-chg.down{color:#ff6b6b}
/* catch every move — flowing sparkline */
.fx-mh-catch{display:flex;align-items:center;gap:12px}
.fx-mh-mv{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;background:rgba(52,217,155,.14);border:1px solid rgba(52,217,155,.35);color:#34d99b}
.fx-mh-mv svg{width:19px;height:19px}
.fx-mh-catch-t{font-size:13px;color:#c4cee0}
.fx-mh-catch-t b{color:#34d99b;font-weight:700;font-variant-numeric:tabular-nums}
/* react — live alert with ping */
.fx-mh-alert{display:flex;align-items:center;gap:12px;font-size:13px;color:#c4cee0}
.fx-mh-ping{position:relative;width:11px;height:11px;flex:none}
.fx-mh-ping i{position:absolute;inset:0;border-radius:50%;background:#ffb04e}
.fx-mh-ping::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #ffb04e}
.fx-mh-alert b{color:#fff;font-weight:700}
/* access 80+ pairs — live pair tiles */
.fx-mh-pairs{display:flex;gap:12px;flex-wrap:wrap}
.fx-mh-tile{flex:1;min-width:132px;display:flex;flex-direction:column;gap:7px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .3s var(--ease),border-color .3s,background .3s}
.fx-mh-tile:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.45);background:rgba(255,255,255,.06)}
.fx-mh-tile .q-sym{font-size:12.5px;font-weight:700;color:#fff}
.fx-mh-tile .q-r{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fx-mh-tile .q-px{font-size:14px;font-weight:700;color:#eaf1ff;font-variant-numeric:tabular-nums}
.fx-mh-tile .q-chg{font-size:11px;font-weight:700}
.fx-mh-tile .q-chg.up{color:#34d99b}
.fx-mh-tile .q-chg.down{color:#ff6b6b}
.fx-mh-tile.more{flex:0 0 118px;align-items:center;justify-content:center;color:#7fb0ff;font-weight:700;font-size:13px;background:rgba(0,71,187,.16);border-color:rgba(0,120,255,.4)}
/* motion-safe loops */
@media (prefers-reduced-motion:no-preference){.fx-mh-mv{animation:fxMhRise 2.4s ease-in-out infinite}
@keyframes fxMhRise{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.fx-mh-ping::before{animation:fxMhPing 2.2s ease-out infinite}
@keyframes fxMhPing{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.6);opacity:0}}}
@media (max-width:980px){.fx-mh{grid-template-columns:repeat(2,1fr)}
.fx-mh--wide{grid-column:span 2}
.fx-mh--full{grid-column:span 2;flex-direction:column;align-items:stretch;gap:22px}
.fx-mh--full .fx-mh-viz{width:100%}}
@media (max-width:640px){.fx-mh{grid-template-columns:1fr}
.fx-mh--wide,.fx-mh--full{grid-column:auto}
.fx-mh-tile{min-width:0}}
/* ---- Why trade forex (Figma: heading cell + 5 illustrated cards) ---- */
.fx-why{background:var(--bg-light)}
.fx-w2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* heading occupies the top-left cell */
.fx-w2-head{display:flex;flex-direction:column;justify-content:center;padding:6px 16px 6px 6px}
.fx-w2-head .eyebrow{margin-bottom:14px}
.fx-w2-head h2{font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;line-height:1.12;color:var(--text)}
.fx-w2-head h2 .hl{color:var(--blue)}
/* card */
.fx-w2{display:flex;flex-direction:column;background:linear-gradient(180deg,#eff3fb,#e7edf7);border:1px solid #fff;border-radius:var(--radius-xl);padding:30px 30px 28px;box-shadow:inset 0 1px 0 #fff,0 16px 36px -28px rgba(20,44,96,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fx-w2:hover{transform:translateY(-5px);box-shadow:inset 0 1px 0 #fff,0 26px 52px -30px rgba(20,44,96,.45)}
.fx-w2-viz{position:relative;height:206px;margin-bottom:20px;display:grid;place-items:center}
.fx-w2 h3{font-size:20px;letter-spacing:-.02em;color:#0f1830;margin-bottom:8px}
.fx-w2 h3 .hl{color:var(--blue)}
.fx-w2 p{font-size:14px;color:var(--text-soft);line-height:1.5;max-width:340px;min-height:2.9em}
/* leverage card — chart bleeds to the card's left & right edges */
/* -30px clears the padding, the extra 1px clears the card's own border, so the
   chart meets both edges instead of stopping a hairline short */
.fx-w2--lev .fx-w2-viz{margin-left:-31px;margin-right:-31px;overflow:hidden}
.fx-w2--lev .fx-lv-chip{top:8px;left:30px}
/* access 80+ pairs — live watchlist panel */
.fx-pw{width:90%;max-width:280px;display:flex;flex-direction:column;gap:9px}
.fx-pw-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid #fff;box-shadow:0 10px 22px -15px rgba(20,44,96,.4),inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
.fx-pw-row .q-sym{font-size:12.5px;font-weight:700;color:#0f1830}
.fx-pw-row .q-px{font-size:13px;font-weight:700;color:#0f1830;font-variant-numeric:tabular-nums}
.fx-pw-row .q-chg{font-size:11px;font-weight:700;min-width:52px;text-align:right}
.fx-pw-row .q-chg.up{color:#0f9d6f}
.fx-pw-row .q-chg.down{color:#e0483f}
.fx-pw-more{text-align:center;font-size:11.5px;font-weight:700;color:var(--blue);padding-top:2px}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fxPingR{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.55);opacity:0}}
/* 1 — Easy Transactions */
.fx-tx{position:relative;display:grid;place-items:center;width:100%;height:100%}
.fx-tx-ring{position:relative;width:148px;height:148px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 44%,rgba(255,255,255,.95),rgba(224,233,247,.4) 58%,transparent 72%);margin-top:-12px}
.fx-tx-core{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(130% 130% at 50% 16%,#2074ff,#0740b8);box-shadow:0 20px 40px -14px rgba(0,71,187,.6),inset 0 1px 0 rgba(255,255,255,.3);color:#fff}
.fx-tx-core svg{width:40px;height:40px}
.fx-tx-badge{position:absolute;right:20px;bottom:22px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--blue);border:3px solid #eef3fb;color:#fff}
.fx-tx-badge svg{width:12px;height:12px}
.fx-tx-chip{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;background:#fff;padding:8px 14px;border-radius:11px;box-shadow:0 12px 26px -12px rgba(20,44,96,.45)}
.fx-tx-chip .ok{flex:none;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.fx-tx-chip .ok svg{width:10px;height:10px}
.fx-tx-chip b{display:block;font-size:11px;color:#0f1830;font-weight:700;line-height:1.25}
.fx-tx-chip em{display:block;font-style:normal;font-size:9.5px;color:var(--text-mute);line-height:1.2}
/* 2 — Competitive Spreads */
.fx-cs{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-cs-meter{width:74%;max-width:236px;border-radius:16px;padding:22px 22px 18px;text-align:center;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px rgba(20,44,96,.3);-webkit-backdrop-filter:blur(8px) saturate(1.4);backdrop-filter:blur(8px) saturate(1.4)}
.fx-cs-meter .sym{display:block;margin-top:16px;font-size:11px;color:var(--text-mute);font-weight:600}
.fx-cs-meter .big{font-size:34px;font-weight:800;color:#0f1830;letter-spacing:-.03em;line-height:1;margin-bottom:18px}
.fx-cs-meter .big em{font-style:normal;font-size:14px;color:var(--blue);font-weight:700;margin-left:5px}
.fx-cs-bars{display:flex;gap:8px}
.fx-cs-bars span{flex:1;height:6px;border-radius:4px;background:linear-gradient(90deg,#1e4fb8,#5b9dff)}
.fx-cs-chip{position:absolute;display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:#0f1830;background:#fff;padding:7px 11px;border-radius:10px;box-shadow:0 10px 22px -12px rgba(20,44,96,.4)}
.fx-cs-chip .ok{flex:none;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.fx-cs-chip .ok svg{width:10px;height:10px}
.fx-cs-chip.c1{top:0;right:0}
.fx-cs-chip.c2{top:0;left:0}
.fx-cs-chip.c3{bottom:4px;right:18px}
/* 3 — Ultra-Fast Execution */
.fx-uf{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-uf-core{position:relative;width:108px;height:108px;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,#eaf1fb);box-shadow:0 20px 44px -18px rgba(20,44,96,.4),inset 0 1px 0 #fff;display:grid;place-items:center;color:var(--blue)}
.fx-uf-core svg{width:44px;height:44px}
.fx-uf-speed{position:absolute;right:calc(50% + 44px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.fx-uf-speed i{height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#2f6bde)}
.fx-uf-speed i:nth-child(1){width:30px}
.fx-uf-speed i:nth-child(2){width:50px}
.fx-uf-speed i:nth-child(3){width:38px}
.fx-uf-speed i:nth-child(4){width:56px}
.fx-uf-speed i:nth-child(5){width:28px}
/* 4 — Flexible Leverage */
.fx-lv{position:relative;width:100%;height:100%}
.fx-lv svg{position:absolute;inset:0;width:100%;height:100%}
.fx-lv .area{fill:rgba(59,123,255,.14)}
.fx-lv .ln{fill:none;stroke:#0740b8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fx-lv .dot{fill:#0740b8;filter:drop-shadow(0 0 5px rgba(7,64,184,.6))}
.fx-lv-chip{position:absolute;top:4px;left:4px;display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#0f1830;background:#fff;padding:7px 13px;border-radius:70px;box-shadow:0 10px 22px -12px rgba(20,44,96,.4)}
.fx-lv-chip i{width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* 5 — 24/7 Multilingual Support */
.fx-su{position:relative;width:100%;height:100%;display:grid;place-items:center}
.fx-su-core{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(130% 130% at 50% 18%,#2074ff,#0740b8);color:#fff;box-shadow:0 20px 40px -16px rgba(0,71,187,.55)}
.fx-su-core svg{width:36px;height:36px}
.fx-su-core::before,.fx-su-core::after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(0,71,187,.22)}
.fx-su-core::before{width:152%;height:152%}
.fx-su-core::after{width:214%;height:214%}
.fx-su-ch{position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 12px 26px -12px rgba(20,44,96,.4)}
.fx-su-ch svg{width:20px;height:20px}
.fx-su-ch.mail{left:4%;top:32%;color:#1f2a3d}
.fx-su-ch.x{right:8%;top:10%;color:#0f1830}
.fx-su-ch.gm{right:12%;bottom:18%}
/* micro-interactions — calm, purposeful, motion-safe */
@media (prefers-reduced-motion:no-preference){.fx-tx-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(0,71,187,.4);animation:fxPingR 2.8s ease-out infinite}
.fx-tx-badge{animation:fxPop 2.8s ease-in-out infinite}
.fx-tx-chip{animation:fxTxFloat 5s ease-in-out infinite}
@keyframes fxTxFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,-5px)}}
@keyframes fxPop{0%,58%,100%{transform:scale(1)}70%{transform:scale(1.16)}}
.fx-cs-bars span{animation:fxCsBar 1.9s ease-in-out infinite}
.fx-cs-bars span:nth-child(2){animation-delay:.16s}
.fx-cs-bars span:nth-child(3){animation-delay:.32s}
.fx-cs-bars span:nth-child(4){animation-delay:.48s}
@keyframes fxCsBar{0%,100%{opacity:.4}35%{opacity:1;box-shadow:0 0 10px rgba(91,157,255,.7)}}
.fx-cs-chip.c1{animation:fxFloat 5.4s ease-in-out infinite}
.fx-cs-chip.c2{animation:fxFloat 5s ease-in-out infinite -1.4s}
.fx-cs-chip.c3{animation:fxFloat 5.8s ease-in-out infinite -2.2s}
.fx-uf-speed i{animation:fxSpeed 1.5s ease-in-out infinite}
.fx-uf-speed i:nth-child(1){animation-delay:0s}
.fx-uf-speed i:nth-child(2){animation-delay:.12s}
.fx-uf-speed i:nth-child(3){animation-delay:.24s}
.fx-uf-speed i:nth-child(4){animation-delay:.36s}
.fx-uf-speed i:nth-child(5){animation-delay:.48s}
@keyframes fxSpeed{0%{opacity:.2;transform:translateX(7px)}50%{opacity:1;transform:translateX(0)}100%{opacity:.2;transform:translateX(7px)}}
.fx-su-core::before{animation:fxPingR 3s ease-out infinite}
.fx-su-core::after{animation:fxPingR 3s ease-out infinite 1.5s}
.fx-su-ch.mail{animation:fxFloat 5s ease-in-out infinite}
.fx-su-ch.x{animation:fxFloat 5.6s ease-in-out infinite -1.6s}
.fx-su-ch.gm{animation:fxFloat 5.2s ease-in-out infinite -2.6s}}
/* ---- Explore other products (image cards) ---- */
.fx-more{background:radial-gradient(56% 60% at 90% 4%,rgba(0,71,187,.06),transparent 60%),var(--bg-light-2)}
.fx-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.fx-more-card{display:flex;flex-direction:column;text-decoration:none}
.fx-more-media{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:640/349;box-shadow:0 14px 34px -22px rgba(20,44,96,.4);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fx-more-card:hover .fx-more-media{transform:translateY(-6px);box-shadow:0 30px 58px -28px rgba(20,44,96,.5)}
.fx-more-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s var(--ease)}
.fx-more-card:hover .fx-more-media img{transform:scale(1.04)}
.fx-more-desc{margin-top:18px;font-size:14.5px;color:var(--text-soft);line-height:1.5;min-height:3em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fx-more-foot{margin-top:16px;display:flex;align-items:center;justify-content:space-between}
.fx-more-tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:#e9eef4;padding:8px 13px;border-radius:9px}
.fx-more-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--blue);background:rgba(0,71,187,.09);transition:background .3s,color .3s,transform .3s}
.fx-more-go svg{width:15px;height:15px}
.fx-more-card:hover .fx-more-go{background:var(--blue);color:#fff;transform:translateX(3px)}
/* ---- FAQ (white) ---- */
.fx-faq{background:#fff}
@media (max-width:1080px){.fx-stats{grid-template-columns:repeat(2,1fr)}
.fx-more-grid{grid-template-columns:repeat(2,1fr);gap:24px}
.fx-w2-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:980px){.fx-hero{display:block;min-height:auto;padding:calc(var(--nav-h) + 30px) 0 0;text-align:center}
.fx-hero .acct-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.72) 0%,transparent 26%,rgba(4,6,14,.5) 80%,#04060e 100%)}
.fx-hero-copy{max-width:620px;margin:0 auto}
.fx-hero .acct-hero-sub{margin-inline:auto}
.acct-hero-cta{justify-content:center}
.fx-hero-visual{position:static;width:100%;max-width:520px;height:auto;margin:14px auto 0;pointer-events:auto}
.fx-hero-stage{position:relative;right:auto;bottom:auto;margin:0 auto;width:100%;aspect-ratio:1/1}
.fx-mh{grid-template-columns:repeat(2,1fr)}
.fx-mh--a,.fx-mh--b,.fx-mh--c,.fx-mh--d,.fx-mh--e{grid-column:span 1}
.fx-mh--b{grid-column:span 2}}
@media (max-width:720px){.fx-cats{grid-template-columns:1fr;gap:14px}
.fx-stats{gap:14px}
.fx-mh{grid-template-columns:1fr}
.fx-mh--a,.fx-mh--b,.fx-mh--c,.fx-mh--d,.fx-mh--e{grid-column:auto}
.fx-w2-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
@media (max-width:560px){.fx-stats{grid-template-columns:1fr;max-width:340px;margin-inline:auto}
.fx-more-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}
.fx-hero-visual{max-width:400px}}
/* ================= HOW-TO-TRADE STEPS (shared component) ================= */
.htrade-sec{background:radial-gradient(60% 60% at 92% 0%,rgba(0,71,187,.05),transparent 60%),var(--bg-light)}
.htrade{display:grid;grid-template-columns:.86fr 1.14fr;gap:24px;align-items:stretch}
.htrade-intro,.htrade-steps{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-xl);
  box-shadow:0 18px 44px -34px rgba(20,44,96,.45);
}
.htrade-intro{display:flex;flex-direction:column;justify-content:center;padding:46px 44px}
.htrade-title{font-size:clamp(34px,4.4vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.04;color:var(--text)}
.htrade-title span{color:#b3bcc9}
.htrade-sub{margin-top:20px;font-size:15.5px;color:var(--text-soft)}
.htrade-btn{align-self:flex-start;margin-top:38px;padding-right:9px;gap:16px}
.htrade-go{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(255,255,255,.18);transition:transform .45s var(--ease),background .3s;
}
.htrade-go svg{width:15px;height:15px}
.htrade-btn:hover .htrade-go{transform:translateX(3px);background:rgba(255,255,255,.28)}
.htrade-steps{position:relative;list-style:none;margin:0;padding:34px 42px 34px 40px;display:flex;flex-direction:column;justify-content:center;gap:6px}
/* progress rail behind the number pills — filled on scroll */
/* connector rail — spans first pill centre to last pill centre (measured in JS) */
.htrade-steps::before,.htrade-steps::after{
  content:"";position:absolute;left:var(--htrade-x,66px);top:var(--htrade-y,52px);
  width:2px;height:var(--htrade-h,0);margin-left:-1px;border-radius:2px;
}
.htrade-steps::before{background:var(--line)}
.htrade-steps::after{
  background:linear-gradient(180deg,var(--blue),#5b9dff);
  transform:scaleY(var(--htrade-rail,0));transform-origin:top;
}
.htrade-step{position:relative;z-index:1;display:flex;align-items:flex-start;gap:22px;padding:18px 16px;border-radius:18px;
  transition:background .35s var(--ease),transform .4s var(--ease)}
.htrade-step:hover,.htrade-step.is-on{background:rgba(0,71,187,.045);transform:translateX(4px)}
.htrade-num{
  flex:none;width:54px;height:38px;border-radius:70px;display:grid;place-items:center;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:var(--text-mute);
  background:#fff;border:1px solid var(--line);font-variant-numeric:tabular-nums;
  transition:background .35s,color .35s,border-color .35s,transform .45s var(--ease),box-shadow .35s;
}
.htrade-step:hover .htrade-num,.htrade-step.is-on .htrade-num{
  background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06);
  box-shadow:0 12px 26px -12px rgba(0,71,187,.7);
}
.htrade-txt h3{font-size:19px;letter-spacing:-.02em;color:var(--text);margin-bottom:6px;transition:color .3s}
.htrade-step:hover .htrade-txt h3,.htrade-step.is-on .htrade-txt h3{color:var(--blue)}
.htrade-txt p{font-size:14.5px;line-height:1.55;color:var(--text-soft);max-width:52ch}
/* ================= COMMODITIES PAGE ================= */
/* ================= LEARN CARD (shared: dark takeaway card) ================= */
/* right-hand illustration — the asset's plate is crushed to true black and
   screen-blended, so it composites onto the card with no visible edge.
   The mask only feathers the outermost dashed guides. */
.learn-viz{position:relative;display:grid;place-items:center}
.learn-viz img{
  display:block;width:min(162%,790px);height:auto;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(78% 78% at 50% 50%,#000 62%,transparent 100%);
  mask-image:radial-gradient(78% 78% at 50% 50%,#000 62%,transparent 100%);
}
@media (prefers-reduced-motion:no-preference){.learn-viz img{animation:learnFloat 7s ease-in-out infinite}}
@keyframes learnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* ---- Account tiers visual (Why card 6) ---- */
@media (max-width:1080px){.htrade{grid-template-columns:1fr;gap:20px}
.htrade-intro{padding:40px 38px}
.htrade-title br{display:none}
.htrade-title span{margin-left:.28em}}
@media (max-width:900px){.learn-viz{order:-1}
.learn-viz img{width:min(72%,330px)}}
@media (max-width:720px){.htrade-intro{padding:34px 26px}
.htrade-steps{padding:22px 22px 22px 20px}
.htrade-step{gap:16px;padding:15px 10px}
.htrade-num{width:48px;height:34px;font-size:13px}
.htrade-btn{align-self:stretch;justify-content:space-between}}
/* ================= COMPANY PAGE ================= */
/* ---- Scroll reveals (robust — never leaves content hidden; no-JS shows everything) ---- */
.js-reveal .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.js-reveal .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js-reveal .reveal{opacity:1 !important;transform:none !important;transition:none}}
/* Shared section sub-heading */
.head-sub{max-width:600px;margin:14px auto 0;font-size:clamp(14.5px,1.4vw,16px);color:var(--text-soft);line-height:1.65}
.head:not(.center) .head-sub{margin-inline:0}
/* ---- Trade & shine (dark bento with colored ray-lines) ---- */
/* ---- Hero (center-aligned, blue-wave banner image) ---- */
.co-ghost{color:#e7eefc;border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.04)}
.co-ghost:hover{border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.09)}
/* ---- Banner live-market ticker (scrolling pills) ---- */
.hero-ticker{position:relative;z-index:3;margin-top:52px;overflow:hidden;padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hero-ticker-track{display:flex;gap:14px;width:max-content;will-change:transform}
.mkt-pill{display:flex;align-items:center;gap:12px;flex:none;padding:9px 9px 9px 12px;border-radius:60px;text-decoration:none;background:rgba(12,16,26,.6);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4);transition:border-color .25s,background .25s,transform .3s}
.mkt-pill:hover{border-color:rgba(90,150,255,.42);background:rgba(16,22,36,.76);transform:translateY(-2px)}
.mkt-flags{position:relative;width:48px;height:34px;flex:none}
.mkt-flags img{position:absolute;top:50%;border-radius:50%;object-fit:cover;background:#0c1017;border:2px solid #10141c;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.mkt-flags img:first-child{width:30px;height:30px;left:0;transform:translateY(-50%);z-index:1}
.mkt-flags img:last-child{width:26px;height:26px;right:0;transform:translateY(-50%);z-index:2}
.mkt-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.mkt-txt b{font-size:13.5px;font-weight:700;color:#fff;letter-spacing:-.01em;max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-txt em{font-style:normal;font-size:12px;color:#98a4bb;font-variant-numeric:tabular-nums;margin-top:2px;white-space:nowrap}
.mkt-dir{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff}
.mkt-dir.down{background:#e5484d}
.mkt-dir.up{background:#12b76a}
.mkt-dir svg{width:16px;height:16px}
.mkt-trade{flex:none;font-size:13px;font-weight:600;color:#fff;padding:9px 18px;border-radius:60px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);transition:background .25s,border-color .25s}
.mkt-pill:hover .mkt-trade{background:var(--blue);border-color:transparent}
@media (max-width:720px){.hero-ticker{display:none}}
/* ---- Key stats bento (its own light section below the hero) ---- */
/* ---- Global presence (interactive map) ---- */
/* regulator selector (dropdown) */
.co-geo{display:flex;justify-content:center;align-items:stretch;gap:12px;margin-top:30px;flex-wrap:wrap}
.co-geo-select{position:relative;width:330px;max-width:100%}
.co-geo-btn{display:flex;align-items:center;gap:14px;width:100%;padding:13px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px -18px rgba(20,44,96,.3);cursor:pointer;text-align:left;transition:border-color .25s,box-shadow .25s}
.co-geo-btn:hover{border-color:#c3d2ea;box-shadow:0 16px 36px -18px rgba(20,44,96,.36)}
.co-geo-select.is-open .co-geo-btn{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,71,187,.12)}
.co-geo-flag{width:30px;height:21px;border-radius:5px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.24);flex:none}
.co-geo-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.co-geo-txt b{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.01em}
.co-geo-txt em{font-style:normal;font-size:12.5px;color:var(--text-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-geo-caret{width:18px;height:18px;color:var(--text-mute);flex:none;transition:transform .3s var(--ease)}
.co-geo-select.is-open .co-geo-caret{transform:rotate(180deg)}
.co-geo-list{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;list-style:none;margin:0;padding:6px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 26px 60px -24px rgba(20,44,96,.4);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s,transform .22s,visibility .22s;max-height:320px;overflow:auto}
.co-geo-select.is-open .co-geo-list{opacity:1;visibility:visible;transform:none}
.co-geo-opt{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:background .2s}
.co-geo-opt:hover{background:var(--bg-light)}
.co-geo-opt.is-active{background:rgba(0,71,187,.08)}
.co-geo-opt img{width:26px;height:19px;border-radius:4px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.2);flex:none}
.co-geo-opt span{display:flex;flex-direction:column;line-height:1.25}
.co-geo-opt b{font-size:14px;font-weight:700;color:var(--text)}
.co-geo-opt em{font-style:normal;font-size:12px;color:var(--text-mute)}
.co-geo-cta{border-radius:16px}
.co-geo-note{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text-mute);text-align:center}
.co-geo-note svg{width:15px;height:15px;color:var(--green);flex:none}
.co-geo-full{color:var(--text-soft);font-weight:600}
@keyframes coPing{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(2.6)}}
/* stats with icons */
.co-statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:40px}
.co-stat{text-align:center;border-radius:var(--radius-lg);padding:30px 20px 26px;background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);box-shadow:0 12px 34px -20px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.co-stat:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 26px 54px -26px rgba(20,44,96,.3)}
.co-stat-ic{width:46px;height:46px;margin:0 auto 16px;border-radius:13px;display:grid;place-items:center;background:rgba(0,71,187,.09);color:var(--blue)}
.co-stat-ic svg{width:23px;height:23px}
.co-stat .n{font-size:clamp(32px,4.2vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.co-stat .n .suf{color:var(--blue)}
.co-stat .l{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
/* ---- Shared card grid (asset classes, advantages, risk) ---- */
.co-grid{display:grid;gap:22px}
.co-g3{grid-template-columns:repeat(3,1fr)}
.co-g2{grid-template-columns:repeat(2,1fr)}
.co-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-xl);padding:28px 28px 26px;text-decoration:none;
  background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 34px -20px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s}
.co-card:hover{transform:translateY(-4px);border-color:#fff;box-shadow:0 28px 58px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.95)}
.co-ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:rgba(0,71,187,.09);color:var(--blue);margin-bottom:18px;transition:transform .4s var(--ease),background .3s,color .3s}
.co-card:hover .co-ic{transform:translateY(-3px) scale(1.05)}
.co-ic svg{width:23px;height:23px}
.co-card h3{font-size:19px;color:var(--text);letter-spacing:-.01em;margin-bottom:8px}
.co-card p{font-size:14px;color:var(--text-soft);line-height:1.6;flex:1}
.co-card .more{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue)}
.co-bignum{font-size:44px;font-weight:800;letter-spacing:-.03em;color:var(--text);line-height:1}
/* dark accent card */
.co-card.dark{background:radial-gradient(130% 80% at 50% -10%,rgba(0,90,220,.4),transparent 60%),linear-gradient(180deg,#0a1020,#0f1a3a 70%);border:1px solid rgba(90,150,255,.26);box-shadow:0 26px 60px -34px rgba(0,60,180,.6)}
.co-card.dark h3{color:#fff}
.co-card.dark p{color:#c4cee0}
.co-card.dark .co-ic{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#8fb8ff}
.co-card.dark .more{color:#8fb8ff}
/* ---- Vision / Mission (dark, editorial split) ---- */
/* ---- STAR values (elevated gradient tiles + connector) ---- */
/* ---- In the world (events / sponsorships gallery) ---- */
/* ---- Trust band (peace of mind) ---- */
@keyframes trPing{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.95)}}
@keyframes trFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* ---- Risk note ---- */
@media (max-width:1080px){.co-statstrip{grid-template-columns:repeat(2,1fr)}
.co-g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.co-geo{flex-direction:column;align-items:center}
.co-geo-select,.co-geo-cta{width:330px;max-width:100%}
.co-geo-cta{justify-content:center}}
@media (max-width:620px){.co-g3,.co-g2{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* ================= GLOSSARY ================= */
/* the filter toggles [hidden]; an explicit display: would otherwise beat the UA rule */
[hidden]{display:none !important}
.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}
/* frosted surface used across the glossary (light contexts) */
/* the shared card surface — solid white everywhere, one look site-wide */
/* the shared card surface — frosted glass, one look site-wide */
.glass{
  background:rgba(255,255,255,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:0 18px 40px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.96);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:rgba(255,255,255,.94)}}
/* one hover for every card on every page — do not redefine it per component */
.u-hover,.kc-guide{
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.u-hover:hover,.kc-guide:hover{
  transform:translateY(-4px);
  border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff;
}
/* ---- Hero: same blue-on-black gradient as the forex/commodities heroes ---- */
.gl-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;text-align:center;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--nav-h) + 40px) 0 56px;
  background:
    radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.32),transparent 60%),
    radial-gradient(60% 70% at 10% 6%,rgba(3,72,205,.2),transparent 58%),
    linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%);
}
.gl-orb{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(52px)}
.gl-orb.o1{width:460px;height:460px;top:-170px;left:-110px;background:radial-gradient(closest-side,rgba(40,110,255,.5),transparent 72%)}
.gl-orb.o2{width:380px;height:380px;bottom:-180px;right:-70px;background:radial-gradient(closest-side,rgba(22,233,215,.16),transparent 72%)}
.gl-orb.o3{width:340px;height:340px;top:28%;right:20%;background:radial-gradient(closest-side,rgba(90,150,255,.22),transparent 70%)}
.gl-hero-inner{position:relative;z-index:1;max-width:820px}
.gl-hero-title{font-size:clamp(33px,5vw,54px);font-weight:800;letter-spacing:-.032em;line-height:1.08;margin-top:14px}
.gl-hero-sub{margin:18px auto 0;max-width:620px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.62;color:#d3e0f5}
/* ---- Body: soft mesh so the frosted cards have something to blur ---- */
.gl-empty-ic{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,71,187,.08);color:var(--blue);
}
.gl-empty-ic svg{width:28px;height:28px}
/* ---- Term page ---- */
.gt-rel{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 12px;border-radius:12px;text-decoration:none;
  transition:background .25s,transform .35s var(--ease);
}
.gt-rel:hover{background:rgba(0,71,187,.07);transform:translateX(3px)}
.gt-rel b{font-size:14px;font-weight:600;color:var(--text);letter-spacing:-.01em;transition:color .25s}
.gt-rel:hover b{color:var(--blue)}
.gt-rel svg{width:14px;height:14px;flex:none;color:var(--blue);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .3s var(--ease)}
.gt-rel:hover svg{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:no-preference){.gl-orb.o1{animation:glOrb 15s ease-in-out infinite}
.gl-orb.o2{animation:glOrb 19s ease-in-out infinite reverse}
.gl-orb.o3{animation:glOrb 23s ease-in-out infinite}}
@keyframes glOrb{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(26px,-22px,0) scale(1.1)}}
@media (max-width:720px){.gl-hero{min-height:auto;padding:calc(var(--nav-h) + 52px) 0 60px}}
/* ================= WEBINARS PAGE ================= */
/* ---- Hero (dark; copy + next-session card) ---- */
.wb-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;flex-direction:column;justify-content:space-between;
  padding:calc(var(--nav-h) + 62px) 0 44px;
  background:
    radial-gradient(90% 80% at 76% 30%,rgba(0,71,187,.26),transparent 60%),
    linear-gradient(180deg,#04060e 0%,#050a1c 46%,#04060e 100%);
}
/* banner film — over-height and top-anchored so the footage's lower band
   (which carries another brand's scheme marks) is cropped away entirely */
.wb-hero-video{
  position:absolute;top:0;left:0;z-index:-2;width:100%;height:132%;
  object-fit:cover;object-position:50% 0;pointer-events:none;
  filter:brightness(1.16) saturate(1.06);
}
.wb-hero-scrim{
  position:absolute;inset:0;z-index:-1;pointer-events:none;background:
    linear-gradient(90deg,rgba(4,6,14,.9) 0%,rgba(4,6,14,.7) 30%,rgba(4,6,14,.36) 62%,rgba(4,6,14,.1) 100%),
    linear-gradient(180deg,rgba(4,6,14,.6) 0%,rgba(4,6,14,.04) 22%,rgba(4,6,14,.12) 56%,rgba(4,6,14,.86) 92%,#04060e 100%);
}
/* banner copy is centred on the same axis as the session strip below it */
.wb-hero-inner{position:relative;z-index:1;width:100%;text-align:left}
.wb-h1{font-size:clamp(38px,6.4vw,74px);font-weight:800;letter-spacing:-.038em;line-height:1.02;margin-top:12px}
.wb-lead{margin:18px 0 0;max-width:53ch;font-size:clamp(15px,1.55vw,17.5px);line-height:1.62;color:#c9d5ea}
.wb-hact{display:flex;justify-content:flex-start;gap:14px;flex-wrap:wrap;margin-top:30px}
@media (prefers-reduced-motion:no-preference){@keyframes wbTick{from{opacity:.4;transform:translateY(-2px)}to{opacity:1;transform:none}}}
/* ---- Schedule (light, frosted cards) ---- */
.wb-status{min-height:22px;margin:18px 0 6px;text-align:center;font-size:13px;color:var(--text-mute)}
.wb-textlink{margin-top:16px;align-self:flex-start}
.wb-textlink{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--blue);cursor:pointer}
.wb-textlink svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.wb-textlink:hover svg{transform:translateX(4px)}
.wb-textlink--lg{font-size:15px}
/* ---- Curriculum bento (reuses the dark market-hours cards) ---- */
/* ---- Presenters ---- */
/* ---- Subscribe (dark, validated form) ---- */
.wb-tick{flex:none;width:24px;height:24px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:rgba(0,71,187,.32);color:#8fd6b4}
.wb-tick svg{width:14px;height:14px}
.wb-selwrap select{
  width:100%;font:inherit;font-size:14.5px;color:#fff;padding:13px 15px;border-radius:13px;
  background:rgba(4,8,18,.5);border:1px solid rgba(255,255,255,.14);outline:none;
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.wb-selwrap select:focus{border-color:rgba(110,170,255,.7);background:rgba(4,8,18,.66);box-shadow:0 0 0 4px rgba(0,71,187,.28)}
.wb-selwrap{position:relative}
.wb-selwrap select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.wb-selwrap select option{background:#0b1224;color:#fff}
.wb-selchev{position:absolute;right:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#9db3d6;pointer-events:none}
/* ---- Explore more (3 cards) ---- */
.wb-more .fx-more-grid{grid-template-columns:repeat(3,1fr)}
/* ---- Responsive ---- */
/* short windows: tighten the banner so it collapses to the same height as the
   product-page banners instead of being propped open by the countdown box */
@media (min-width:721px) and (max-height:880px){.wb-hero{padding:calc(var(--nav-h) + 30px) 0 30px}
.wb-h1{font-size:clamp(34px,5vw,58px)}
.wb-lead{margin-top:14px}
.wb-hact{margin-top:22px}}
@media (max-width:1080px){.wb-more .fx-more-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.wb-hero{min-height:auto;padding:calc(var(--nav-h) + 46px) 0 52px}}
@media (max-width:560px){.wb-more .fx-more-grid{grid-template-columns:1fr;max-width:380px;margin-inline:auto}}
/* ================= ECONOMIC CALENDAR PAGE ================= */
/* ---- Calendar section (live third-party feed) ---- */
@keyframes ecPing{0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
/* ---- Reading the calendar: the market-hours bento, with a calendar legend ---- */
/* ---- Responsive ---- */
/* ---- Why-card additions for features the product pages don't cover.
   Same vocabulary as .fx-tx / .fx-cs / .fx-su: white chips on soft shadow,
   the blue gradient disc, frosted panels — only the composition is new. ---- */
@media (prefers-reduced-motion:no-preference){@keyframes fxSvWave{0%{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(.72)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,calc(-50% - 18px)) scale(1.08)}}
@keyframes fxSvBar{0%,100%{opacity:.42}45%{opacity:1;box-shadow:0 0 9px rgba(91,157,255,.75)}}
@keyframes fxLqDepth{0%,100%{width:calc(var(--w) * .72);opacity:.75}50%{width:var(--w);opacity:1}}}
/* ================= NEWS ROOM PAGE ================= */
/* ---- Lead story ---- */
/* ---- The latest ---- */
.nr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* frosted card: meta header, copy, then the still filling the foot */
.nr-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.nr-card:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.nr-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.nr-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.nr-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.nr-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.nr-body{display:flex;flex-direction:column;padding:17px 18px 19px}
.nr-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.nr-h a{transition:color .25s}
.nr-card:hover .nr-h a{color:var(--blue)}
.nr-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.nr-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-mute)}
/* the still sits flush to the card's lower edge, corners clipped by the card */
.nr-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.nr-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.nr-card:hover .nr-media img{transform:scale(1.05)}
.nr-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.nr-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.nr-readmark svg{width:15px;height:15px}
.nr-card:hover .nr-readmark{transform:translate(2px,-2px);background:#fff}
.nr-morerow{display:flex;justify-content:center;margin-top:44px}
.nr-morerow .btn svg{transition:transform .3s var(--ease)}
.nr-morerow .btn:hover svg{transform:translateY(2px)}
/* ---- In the spotlight ---- */
/* ---- Subscribe bar ---- */
.nr-sub{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,48px);align-items:center;
  padding:clamp(26px,3vw,44px);border-radius:var(--radius-xl);
}
.nr-sub-h{margin-top:12px;font-size:clamp(21px,2.3vw,29px);font-weight:800;letter-spacing:-.028em;line-height:1.16;color:var(--text)}
.nr-sub-copy p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.nr-sub-field{display:flex;gap:10px;flex-wrap:wrap}
.nr-sub-field input{
  flex:1 1 220px;min-width:0;font:inherit;font-size:14.5px;color:var(--text);
  padding:14px 16px;border-radius:70px;background:#fff;border:1px solid var(--line);outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.nr-sub-field input:focus{border-color:rgba(0,71,187,.5);box-shadow:0 0 0 4px rgba(0,71,187,.12)}
.nr-sub-field.is-bad input{border-color:rgba(239,68,68,.6);box-shadow:0 0 0 4px rgba(239,68,68,.14)}
.nr-sub-field .btn{flex:none}
.nr-err{margin-top:9px;font-size:12.5px;color:#c0392f}
.nr-sub-ok{margin-top:11px;font-size:13.5px;font-weight:600;color:#0f7d5c}
.nr-sub-note{margin-top:11px;font-size:12px;line-height:1.55;color:var(--text-mute)}
/* ---- Responsive ---- */
@media (max-width:1080px){.nr-grid{grid-template-columns:repeat(2,1fr)}
.nr-sub{grid-template-columns:1fr}}
@media (max-width:720px){.nr-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}
/* ================= NEWS ARTICLE PAGE ================= */
/* TOC rail on the left, article column on the right, both centred as a unit */
.ar{--ar-measure:min(760px,100%);--ar-rail:224px;background:#fff}
.ar-progress{position:fixed;top:calc(var(--topbar-h,44px) + var(--nav-h) - 3px);left:0;right:0;height:3px;z-index:899;pointer-events:none;background:rgba(20,44,96,.08)}
.ar-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue),#5b9dff);box-shadow:0 0 12px rgba(0,71,187,.55);transition:width .12s linear}
.ar-wrap{padding:calc(var(--nav-h) + 40px) 0 clamp(34px,4vw,54px);margin-top:calc(-1 * var(--nav-h))}
.ar-cols{
  display:grid;grid-template-columns:var(--ar-rail) var(--ar-measure);
  gap:clamp(26px,3.2vw,52px);align-items:start;justify-content:center;
}
/* left rail */
.ar-rail{position:sticky;top:calc(var(--chrome-h) + 26px);display:flex;flex-direction:column;gap:22px}
.ar-toc{--toc-pad:clamp(18px,2vw,26px);padding-right:var(--toc-pad);border-right:1px solid var(--line)}
.ar-toc nav{display:flex;flex-direction:column;gap:2px}
.ar-toc a{
  position:relative;padding:9px 0;font-size:14px;line-height:1.4;color:var(--text-mute);
  transition:color .25s;
}
.ar-toc a::after{
  content:"";position:absolute;right:calc(-1 * var(--toc-pad) - 1px);top:6px;bottom:6px;width:2px;border-radius:2px;
  background:transparent;transition:background .25s;
}
.ar-toc a:hover{color:var(--text)}
.ar-toc a.is-on{color:var(--blue);font-weight:600}
.ar-toc a.is-on::after{background:var(--blue)}
.ar-extras{display:flex;flex-direction:column;gap:14px}
.ar-side-h{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-mute)}
.ar-key,.ar-sub{padding:16px 16px 18px;border-radius:16px}
.ar-key ul{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.ar-key li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.ar-key li:last-child{border-bottom:none}
.ar-key span{font-size:12.5px;color:var(--text-soft)}
.ar-key b{font-size:13.5px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.ar-key-note{margin-top:9px;font-size:11px;color:var(--text-mute)}
.ar-sub p{margin:9px 0 14px;font-size:13px;line-height:1.55;color:var(--text-soft)}
/* article column */
.ar-crumb{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12.5px}
.ar-crumb a{padding:6px 12px;border-radius:70px;background:var(--bg-light);color:var(--text-soft);transition:background .25s,color .25s}
.ar-crumb a:hover{background:rgba(0,71,187,.1);color:var(--blue)}
.ar-h1{margin-top:22px;font-size:clamp(28px,3.6vw,44px);font-weight:800;letter-spacing:-.032em;line-height:1.12;color:var(--text)}
.ar-stand{margin-top:16px;font-size:clamp(15.5px,1.5vw,18px);line-height:1.62;color:var(--text-soft)}
.ar-byline{display:flex;align-items:center;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;margin-top:26px}
.ar-author{display:flex;align-items:center;gap:12px}
.ar-author img{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 2px 10px rgba(20,44,96,.24)}
.ar-author-tx b{display:block;font-size:14.5px;color:var(--blue);letter-spacing:-.01em}
.ar-author-tx em{display:block;font-style:normal;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.ar-share{display:flex;align-items:center;gap:8px}
.ar-sh{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;cursor:pointer;
  color:var(--text-soft);background:var(--bg-light);border:1px solid var(--line);
  transition:color .25s,border-color .25s,background .25s,transform .3s var(--ease);
}
.ar-sh svg{width:16px;height:16px}
.ar-sh:hover{color:var(--blue);border-color:rgba(0,71,187,.4);background:#fff;transform:translateY(-2px)}
.ar-copied{font-size:12px;font-weight:600;color:#0f7d5c}
.ar-fig{margin-top:26px;border-radius:var(--radius-lg);overflow:hidden;background:#0b1220;border:1px solid var(--line)}
/* 16:9 matches the supplied artwork, so nothing is cropped */
.ar-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.ar-fig figcaption{padding:12px 16px;font-size:12.5px;line-height:1.5;color:var(--text-mute);background:#fff;border-top:1px solid var(--line)}
/* prose */
.ar-body{margin-top:clamp(26px,3vw,36px);min-width:0;font-size:16.5px;line-height:1.78;color:var(--text-soft)}
.ar-lede{font-size:18px;line-height:1.7;color:var(--text)}
.ar-body p+p{margin-top:18px}
.ar-body h2{
  margin-top:42px;font-size:clamp(20px,2.2vw,26px);font-weight:800;letter-spacing:-.026em;line-height:1.22;color:var(--text);
  scroll-margin-top:calc(var(--chrome-h) + 22px);
}
.ar-body h2+p{margin-top:14px}
.ar-body a{color:var(--blue);font-weight:600}
.ar-body a:hover{text-decoration:underline;text-underline-offset:3px}
.ar-levels{margin-top:20px;display:flex;flex-direction:column;gap:11px}
.ar-levels li{
  display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;align-items:baseline;
  padding:15px 18px;border-radius:14px;background:var(--bg-light);border:1px solid var(--line);
  transition:border-color .25s,transform .3s var(--ease);
}
.ar-levels li:hover{border-color:rgba(0,71,187,.28);transform:translateX(3px)}
.ar-levels b{font-size:17px;font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ar-levels span{font-size:14.5px;line-height:1.6}
.ar-quote{position:relative;margin:34px 0 0;padding:26px 28px 26px 30px;border-radius:18px;background:var(--bg-light);overflow:hidden}
.ar-quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--blue),#5b9dff)}
.ar-quote p{font-size:17.5px;line-height:1.62;font-weight:600;color:var(--text);letter-spacing:-.012em}
.ar-quote cite{display:block;margin-top:12px;font-style:normal;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-mute)}
.ar-note{margin-top:38px;padding:20px 22px;border-radius:16px;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.18)}
.ar-note b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#b0342f;margin-bottom:8px}
.ar-note p{font-size:13.5px;line-height:1.65;color:var(--text-soft)}
.ar-tags{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:34px;padding-top:22px;border-top:1px solid var(--line)}
.ar-tags-l{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.ar-tag{
  font-size:12.5px;font-weight:600;color:var(--text-soft);padding:7px 13px;border-radius:70px;
  background:var(--bg-light);border:1px solid var(--line);transition:color .25s,border-color .25s,transform .3s var(--ease);
}
.ar-tag:hover{color:var(--blue);border-color:rgba(0,71,187,.38);transform:translateY(-2px)}
/* prev / next */
.ar-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:clamp(30px,3.6vw,44px) 0 0}
.ar-pg{
  display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:16px;
  background:var(--bg-light);border:1px solid var(--line);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.ar-pg:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ar-pg .dir{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-mute)}
.ar-pg .dir svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.ar-pg:hover .dir svg{transform:translateX(-3px)}
.ar-pg .ttl{font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.015em;line-height:1.35}
.ar-pg--next{text-align:right}
.ar-pg--next .dir{justify-content:flex-end}
.ar-pg--next:hover .dir svg{transform:translateX(3px)}
.ar-rel-sec{background:radial-gradient(56% 46% at 8% 0%,rgba(0,71,187,.06),transparent 62%),var(--bg-light-2)}
/* ---- Responsive ---- */
@media (max-width:1024px){/* rail unwraps: contents jump to the article column's flow */
.ar{--ar-measure:100%}
.ar-cols{grid-template-columns:minmax(0,1fr)}
.ar-rail{display:contents}
/* min-width:0 lets the jump-to row scroll instead of stretching the column */
.ar-toc{order:1;position:static;padding:0;border:0;min-width:0}
.ar-main{order:2;min-width:0}
.ar-extras{order:3;display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
/* the contents list reads as a jump-to row above the article */
.ar-toc nav{flex-direction:row;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.ar-toc nav::-webkit-scrollbar{display:none}
.ar-toc a{flex:none;padding:8px 14px;border-radius:70px;background:var(--bg-light);border:1px solid var(--line);white-space:nowrap;font-size:13px}
.ar-toc a::after{display:none}
.ar-toc a.is-on{background:rgba(0,71,187,.1);border-color:rgba(0,71,187,.4)}}
@media (max-width:720px){.ar-wrap{padding-top:calc(var(--nav-h) + 26px)}
.ar-body{font-size:16px}
.ar-levels li{grid-template-columns:1fr;gap:6px}
.ar-pager{grid-template-columns:1fr}
.ar-pg--next{text-align:left}
.ar-pg--next .dir{justify-content:flex-start}
.ar-extras{grid-template-columns:1fr}}
/* print: just the article, on paper */
@media print{.topbar,.site-header,.ar-progress,.ar-rail,.ar-share,.ar-pager,.ar-rel-sec,.cta-banner,.site-footer,.to-top,.chat-fab,.chat-panel,.cookie{display:none !important}
.ar-wrap{padding:0;margin:0}
.ar-cols{display:block}
.ar-main{max-width:none}
.ar-h1{font-size:26pt}
.ar-body{font-size:11pt;line-height:1.55;color:#000}
.ar-fig{break-inside:avoid}
a{color:#000;text-decoration:underline}}
/* ================= ANNOUNCEMENTS PAGE ================= */
/* ---- Notices ---- */
/* the content slides in rather than snapping when a notice opens */
@media (prefers-reduced-motion:no-preference){@keyframes anOpen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}}
/* table inside a notice */
.an-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.an-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13.5px;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.an-table th,.an-table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.an-table th:last-child,.an-table td:last-child{border-right:none}
.an-table tbody tr:last-child th,.an-table tbody tr:last-child td{border-bottom:none}
.an-table thead th{background:rgba(0,71,187,.05);font-size:12.5px;font-weight:700;color:var(--text)}
.an-table tbody th{font-weight:700;color:var(--text);background:rgba(20,40,80,.02)}
.an-table td{color:var(--text-soft)}
/* ---- Responsive ---- */
/* ---- Announcements: date tile, share action, filter dialog ---- */
@media (prefers-reduced-motion:no-preference){@keyframes anModalIn{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:none}}
@keyframes anFadeIn{from{opacity:0}to{opacity:1}}}
/* .an-box{
  flex:none;width:21px;height:21px;margin-top:1px;border-radius:6px;display:grid;place-items:center;
  background:var(--bg-light);border:1.5px solid rgba(20,40,80,.18);color:transparent;
  transition:background .2s,border-color .2s,color .2s;
} */
.an-box svg{width:12px;height:12px}
.an-chip{
  display:inline-flex;align-items:center;gap:8px;padding:6px 8px 6px 13px;border-radius:70px;
  font-size:12px;font-weight:600;color:var(--blue);background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.2);
}
.an-chip button{
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--blue);background:rgba(0,71,187,.12);transition:background .2s,transform .25s var(--ease);
}
.an-chip button svg{width:9px;height:9px}
.an-chip button:hover{background:var(--blue);color:#fff;transform:rotate(90deg)}
.an-chip--clear{background:none;border-color:var(--line);color:var(--text-soft);padding:6px 13px;cursor:pointer}
.an-chip--clear:hover{color:var(--blue);border-color:rgba(0,71,187,.35)}
/* ================= CONTACT PAGE ================= */
@media (prefers-reduced-motion:no-preference){@keyframes ctVeil{from{transform:translate3d(-3%,-2%,0) scale(1)}to{transform:translate3d(4%,3%,0) scale(1.12)}}}
.ct-form-sec{
  background:
    radial-gradient(52% 44% at 96% 10%,rgba(22,233,215,.07),transparent 62%),
    radial-gradient(56% 40% at 40% 104%,rgba(0,71,187,.06),transparent 62%),
    var(--bg-light-2);
  scroll-margin-top:calc(var(--chrome-h) + var(--chrome-gap));
}
.ct-form-sec{position:relative;isolation:isolate}
/* clip-path, not overflow: an overflow container would stop the aside pinning */
.ct-form-sec{clip-path:inset(0)}
.ct-form-sec>.container{position:relative;z-index:1}
/* ---- Channels — bento, same glass + hover as the news and webinars cards ---- */
/* ---- Form ---- */
.ct-aside-list{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.ct-aside-list li{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;color:var(--text-soft)}
.ct-aside-list .wb-tick{background:rgba(0,71,187,.1);color:var(--blue)}
.ct-inline-chat{
  font:inherit;font-size:inherit;font-weight:700;color:var(--blue);cursor:pointer;padding:0;
  border-bottom:1px solid rgba(0,71,187,.35);transition:border-color .25s}
.ct-inline-chat:hover{border-color:var(--blue)}
.ct-aside-note{margin-top:28px;padding:20px 22px;border-radius:16px;background:rgba(0,71,187,.05);border:1px solid rgba(0,71,187,.14)}
.ct-aside-note b{display:block;font-size:13px;color:var(--text);margin-bottom:6px}
.ct-aside-note p{font-size:13px;line-height:1.6;color:var(--text-soft)}

.ct-panel{margin-top:2px}
@media (prefers-reduced-motion:no-preference){.ct-panel{animation:ctPanel .42s var(--ease-out)}
@keyframes ctPanel{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}}
/* fields carry a single rule under them rather than a boxed input */
.ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px}
.ct-field{display:flex;flex-direction:column;gap:4px;min-width:0}
.ct-field label{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--text-soft)}
.ct-field label em{font-style:normal;font-weight:400;color:var(--text-mute)}
.ct-field input,.ct-field textarea{
  width:100%;font:inherit;font-size:16px;color:var(--text);padding:11px 2px;
  background:transparent;border:0;border-bottom:1px solid rgba(20,44,96,.2);border-radius:0;outline:none;
  transition:border-color .25s,box-shadow .25s;
}
.ct-field textarea{resize:vertical;min-height:104px;line-height:1.6}
.ct-field input::placeholder,.ct-field textarea::placeholder{color:var(--text-mute)}
.ct-field input:hover,.ct-field textarea:hover{border-bottom-color:rgba(20,44,96,.4)}
.ct-field input:focus,.ct-field textarea:focus{
  border-bottom-color:var(--blue);box-shadow:0 1px 0 0 var(--blue);
}

.ct-field.is-bad input,.ct-field.is-bad textarea{border-bottom-color:#d0453b;box-shadow:0 1px 0 0 #d0453b}
/* .ct-err{font-size:12.5px;color:#c0392f;margin-top:2px} */
.ct-below{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:2px}
.ct-count{font-size:12px;color:var(--text-mute);font-variant-numeric:tabular-nums;margin-left:auto}
.ct-count.is-over{color:#c0392f;font-weight:700}
.ct-panel>.ct-field+.ct-field,.ct-panel>.ct-grid+*{margin-top:26px}
/* .ct-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;margin-top:28px;font-size:13.5px;line-height:1.55;color:var(--text-soft)}
.ct-check input{position:absolute;opacity:0;width:0;height:0}
.ct-check a{color:var(--blue);font-weight:600}
.ct-check.is-bad .an-box{border-color:rgba(239,68,68,.65)} */
.ct-actions{margin-top:32px}
/* .ct-submit{width:100%;justify-content:center} */
.ct-done{text-align:center;padding:14px 4px 6px}
.ct-done-ic{
  width:64px;height:64px;margin:0 auto 20px;border-radius:50%;display:grid;place-items:center;
  background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);color:#0f7d5c;
}
.ct-done-ic svg{width:28px;height:28px}
.ct-done h3{font-size:23px;letter-spacing:-.025em;color:var(--text)}
.ct-done h3:focus{outline:none}
.ct-done p{margin-top:12px;font-size:14.5px;line-height:1.65;color:var(--text-soft)}
.ct-done-acts{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:24px}
/* ---- word-by-word heading reveal ---- */
/* the mask has to be taller than the line box or descenders get cut; the
   negative margin keeps line spacing exactly as it was */
.ct-w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.2em;margin-bottom:-.2em}
.ct-w>i{display:inline-block;font-style:inherit;will-change:transform}
html.is-animate [data-ct-words] .ct-w>i{transform:translateY(130%)}
html.is-animate [data-ct-cards]>*{opacity:0}
/* ---- Responsive ---- */
@media (max-width:720px){.ct-grid{grid-template-columns:1fr}}
/* ================= REGULATION PAGE ================= */
/* ---- Entities ---- */
/* ---- Verify ---- */
/* ---- Scope (dark) ---- */
/* ---- Risk + restrictions ---- */
/* ---- Responsive ---- */
/* ================= PARTNER PAGES (hub, IB, affiliate, money manager, institutional) =================
   One vocabulary shared by all five so the programme pages read as a family. */
.pt-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(600px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 44px) 0 48px;
  background:
    radial-gradient(72% 78% at 80% 8%,rgba(0,71,187,.3),transparent 62%),
    radial-gradient(52% 60% at 4% 96%,rgba(22,233,215,.09),transparent 64%),
    linear-gradient(180deg,#04060e 0%,#070c1c 56%,#04060e 100%);
}
.pt-hero-in{position:relative;z-index:1;width:100%}
.pt-h1{font-size:clamp(36px,5.4vw,64px);font-weight:800;letter-spacing:-.038em;line-height:1.04;margin-top:12px}
.pt-h1 .g{
  background:linear-gradient(90deg,#7fb2ff,#dbe8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;
}
.pt-lead{margin-top:18px;max-width:58ch;font-size:clamp(15px,1.5vw,17px);line-height:1.66;color:#c9d5ea}
.pt-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
/* the value + dark grids reuse the forex section shells; these only supply
   the partner pages' own backdrop so the shells stay untouched elsewhere */
/* the aura layer lives in here, so it has to clip and stack like .pt-sec does */
.pt-why{
  position:relative;isolation:isolate;overflow:clip;
  background:radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light);
}
.pt-why>.container{position:relative;z-index:1}
.pt-hours{scroll-margin-top:calc(var(--chrome-h) + var(--chrome-gap))}
/* ---- shared section shells ---- */
.pt-sec{position:relative;isolation:isolate;overflow:clip}
.pt-sec>.container{position:relative;z-index:1}
.pt-light{background:radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light)}
.pt-light-2{background:radial-gradient(52% 44% at 96% 10%,rgba(22,233,215,.07),transparent 62%),var(--bg-light-2)}
.pt-dark{
  color:#fff;
  background:
    radial-gradient(80% 60% at 12% 0%,rgba(0,44,130,.4),transparent 62%),
    linear-gradient(180deg,#04060e,#080b16 58%,#04060e);
}
.pt-dark .head-sub{color:#a9b7cf}
.pt-aura{position:absolute;z-index:0;pointer-events:none;border-radius:50%;filter:blur(70px)}
.pt-aura.a1{top:-80px;right:-70px;width:min(500px,54vw);aspect-ratio:1;background:radial-gradient(circle,rgba(0,71,187,.08),transparent 68%)}
.pt-aura.a2{bottom:-130px;left:-80px;width:min(440px,50vw);aspect-ratio:1;background:radial-gradient(circle,rgba(22,233,215,.07),transparent 68%)}
/* ---- the three programme models ---- */
.pt-models{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pt-model{
  position:relative;display:flex;flex-direction:column;padding:30px 28px 28px;border-radius:22px;min-width:0;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.pt-model:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.pt-model::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:0 3px 3px 0;
  background:linear-gradient(180deg,var(--blue),#5b9dff);
}
.pt-model-ic{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .45s var(--ease)}
.pt-model-ic svg{width:24px;height:24px}
.pt-model:hover .pt-model-ic{transform:translateY(-3px) scale(1.05)}
.pt-model-tag{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);background:rgba(0,71,187,.08);border:1px solid rgba(0,71,187,.18);
  padding:5px 11px;border-radius:70px;margin-bottom:13px;align-self:flex-start;
}
.pt-model h3{font-size:20px;letter-spacing:-.025em;color:var(--text)}
.pt-model p{margin-top:11px;font-size:14px;line-height:1.65;color:var(--text-soft)}
.pt-model-list{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.pt-model-list li{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--text-soft)}
.pt-model-list .wb-tick{background:rgba(0,71,187,.1);color:var(--blue);flex:none}
.pt-model-go{
  margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:9px;
  font-size:13.5px;font-weight:700;color:var(--blue);
}
.pt-model-go svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.pt-model:hover .pt-model-go svg{transform:translateX(4px)}
.pt-model-go:hover{text-decoration:underline;text-underline-offset:3px}
/* ---- tier country chips ---- */
/* ---- document list (legal documents) ---- */
/* ---- liquidity providers ----
   One pane divided by hairlines rather than ten separate cards: ten logos in
   ten boxes reads as clutter, and the shared frame is what makes it a wall. */
.cp-lp-note{margin-top:22px;text-align:center;font-size:12.5px;line-height:1.7;color:var(--text-soft)}
/* ---- spec tables — the site's Account specifications pattern ---- */
.pt-spec-wrap{margin-top:26px}
.pt-spec{min-width:760px}
.pt-spec--2{min-width:640px}
.pt-spec thead th{font-size:16px}
.pt-spec thead th:first-child{font-size:13.5px}
.pt-spec tbody td{font-size:14px}
.pt-spec th,.pt-spec td{padding:18px 22px}
/* the note needs air under the table, not to butt against the last row */
.pt-table-note{margin-top:26px;font-size:12.5px;line-height:1.7;color:var(--text-soft)}
/* ---- tabbed application form ---- */
.pt-form-wrap{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(28px,3.6vw,58px);align-items:start}
.pt-form-aside{position:sticky;top:calc(var(--chrome-h) + 26px)}
.pt-aside-lead{margin-top:16px;font-size:15px;line-height:1.68;color:var(--text-soft)}
/* .pt-form-card{padding:clamp(24px,3vw,38px);border-radius:var(--radius-xl)} */
/* tabs, because three programmes share one form rather than three near-identical pages of fields */
.pt-tabs{display:flex;gap:6px;padding:5px;border-radius:14px;background:rgba(20,44,96,.05);border:1px solid rgba(20,44,96,.08)}
.pt-tab{
  flex:1;min-width:0;cursor:pointer;font:inherit;font-size:13px;font-weight:600;
  padding:11px 10px;border-radius:10px;color:var(--text-soft);background:transparent;
  transition:background .25s,color .25s,box-shadow .25s;
}
.pt-tab:hover{color:var(--text)}
.pt-tab[aria-selected="true"]{background:#fff;color:var(--blue);box-shadow:0 8px 20px -12px rgba(20,44,96,.4)}
.pt-tabnote{
  display:flex;align-items:center;gap:9px;margin-top:16px;padding:11px 14px;border-radius:12px;
  font-size:12.5px;line-height:1.5;color:var(--text-soft);
  background:rgba(0,71,187,.055);border:1px solid rgba(0,71,187,.13);
}
.pt-tabnote svg{width:15px;height:15px;flex:none;color:var(--blue)}
.pt-panel{margin-top:22px}
@media (prefers-reduced-motion:no-preference){.pt-panel{animation:ptPanel .4s var(--ease-out)}
@keyframes ptPanel{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
/* ---- FAQ + closing ---- */
.pt-cta-note{margin-top:20px;font-size:12.5px;color:var(--text-soft);text-align:center}
/* ---- Responsive ---- */
@media (max-width:1080px){.pt-models{grid-template-columns:1fr}
.pt-form-wrap{grid-template-columns:1fr;gap:30px}
.pt-form-aside{position:static}}
@media (max-width:860px){.pt-hero{min-height:min(500px,calc(100vh - var(--topbar-h,44px)));padding:calc(var(--nav-h) + 40px) 0 42px}}
@media (max-width:720px){.pt-hero{min-height:auto}
.pt-tabs{flex-wrap:wrap}
.pt-tab{flex:1 1 100%}
.pt-aura{filter:blur(54px)}}
/* ================= TRADING APP PAGE =================
   Banner follows the forex / commodities pattern: copy left, photographic
   render on the right bleeding from the disclaimer bar to the section base.
   The render is shot on pure black, so it is composited with mix-blend-mode
   rather than masked — the background dissolves into the banner exactly.
   For that to work nothing between .acct-hero (which isolates) and the image
   may create a stacking context, hence no z-index / filter on .ap-hero-visual. */
/* ---- Store buttons (shared by the banner and the download panel) ---- */
@media (prefers-reduced-motion:no-preference){@keyframes stSheen{from{left:-70%;opacity:1}to{left:120%;opacity:0}}}
/* ---- Banner ---- */
@media (prefers-reduced-motion:no-preference){@keyframes apBreathe{from{transform:scale(1)}to{transform:scale(1.022)}}}
/* ---- Feature spec grid (editorial hairlines, no card chrome) ---- */
@media (prefers-reduced-motion:no-preference){@keyframes apBar{from{transform:scaleY(.86)}to{transform:scaleY(1)}}}
/* ---- Download band (full-bleed, light blue) ----
   The render is photographed on white, so it composites with multiply: white
   dissolves into the gradient and the device keeps its own values. Nothing
   between .ap-dl2 and the image may create a stacking context, so the auras
   sit at z-index:-1 rather than the content being lifted above them. */
/* ---- Glass cards riding over the device ---- */
/* ---- Responsive ---- */
/* =================================================================
   EDUCATION — MARKET ANALYSIS + KNOWLEDGE CENTRE
   ================================================================= */
/* ---- Shared surfaces & controls ---- */
/* dark mirror of .glass, for frosted panels on the near-black sections */
.glass-dark{
  background:rgba(255,255,255,.062);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 34px 70px -38px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.15);
}
/* filter chip — referenced by the news room and economic calendar markup but
   never defined, so those two pages were rendering unstyled buttons */
.ec-chip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;line-height:1;white-space:nowrap;
  padding:9px 15px;border-radius:70px;color:var(--text-soft);
  background:#fff;border:1px solid var(--line);
  transition:color .25s,background .25s,border-color .25s,transform .25s var(--ease);
}
.ec-chip:hover{color:var(--blue);border-color:rgba(0,71,187,.3);transform:translateY(-1px)}
.ec-chip.is-on{color:#fff;background:var(--blue);border-color:var(--blue);box-shadow:0 12px 26px -14px rgba(0,71,187,.7)}
/* =================== MARKET ANALYSIS =================== */
/* ---- choose your analysis (bento) ---- */
/* ---- reports ---- */
/* ---- method (scroll-linked) ---- */
/* ---- coverage ---- */
/* ---- subscribe ---- */
/* =================== KNOWLEDGE CENTRE =================== */
/* ---- learning path ---- */
/* ---- guides ---- */
.kc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* ---- videos ---- */
@media (prefers-reduced-motion:no-preference){@keyframes kcPing{0%{transform:scale(1);opacity:.75}70%{transform:scale(1.55);opacity:0}100%{opacity:0}}}
/* ---- formats ---- */
/* ---- Responsive ---- */
@media (max-width:1080px){.kc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.kc-grid{grid-template-columns:1fr}
.ma-levels{width:100%}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass-dark{background:rgba(14,20,38,.95)}}
/* =================================================================
   PLATFORM PAGES (MT4/MT5, web traders, copy trading, PAMM)
   ================================================================= */
/* ---- Banner: the render is the background, no pattern overlay ---- */
.pf-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(780px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + 56px) 0 60px;
  background:#04060e;
}
.pf-hero-bg{
  position:absolute;inset:0;z-index:-1;
  background-image:url("../img/platform-hero.webp");
  background-size:cover;background-position:50% 45%;
}
/* the render is already near-black under the copy, so this is a light safety
   wash rather than the heavy scrim a bright image would need — anything more
   and the ribbons go flat */
.pf-hero-bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,6,14,.72) 0%,rgba(4,6,14,.46) 30%,rgba(4,6,14,.12) 58%,rgba(4,6,14,0) 84%),
    linear-gradient(180deg,rgba(4,6,14,.5) 0%,transparent 22%,transparent 78%,rgba(4,6,14,.55) 100%);
}
.pf-hero-in{position:relative;z-index:1;width:100%}
.pf-hero-copy{max-width:720px;min-width:0}
.pf-badge{
  display:inline-block;margin-left:9px;vertical-align:middle;
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--blue);padding:4px 9px;border-radius:70px;
}
.pf-h1{font-size:clamp(31px,4.4vw,52px);font-weight:800;letter-spacing:-.038em;line-height:1.08;margin-top:16px}
.pf-lead{margin-top:20px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.68;color:#c2cfe4;max-width:62ch}
.pf-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
/* ---- Feature grid ---- */
.pf-aura{position:absolute;z-index:0;border-radius:50%;filter:blur(92px);pointer-events:none}
.pf-aura.a1{width:520px;height:520px;top:-12%;right:-8%;background:radial-gradient(circle,rgba(0,71,187,.12),transparent 68%)}
.pf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-card{display:flex;flex-direction:column;border-radius:20px;padding:26px 24px 24px;min-width:0;overflow:hidden}
.pf-card-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .4s var(--ease);
}
.pf-card-ic svg{width:22px;height:22px}
.pf-card:hover .pf-card-ic{transform:translateY(-3px) scale(1.05)}
.pf-card h3{font-size:18px;letter-spacing:-.025em;color:var(--text)}
.pf-card h3 .hl{color:var(--blue)}
.pf-card p{margin-top:10px;font-size:13.5px;line-height:1.64;color:var(--text-soft)}
.pf-pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:20px}
.pf-pills span{
  font-size:11px;font-weight:600;color:var(--text-soft);
  background:#fff;border:1px solid var(--line);padding:5px 11px;border-radius:70px;
  transition:border-color .3s,color .3s;
}
.pf-card:hover .pf-pills span{border-color:rgba(0,71,187,.24);color:var(--blue)}
/* ---- Detail + pattern render ---- */
.pf-split{background:#fff}
.pf-split-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,4.5vw,72px);align-items:center}
.pf-split-copy{min-width:0}
.pf-split-body{margin-top:20px;display:flex;flex-direction:column;gap:14px}
.pf-split-body p{font-size:14.5px;line-height:1.72;color:var(--text-soft)}
.pf-split-pts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;margin-top:26px}
.pf-split-pts li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;line-height:1.5;color:var(--text)}
.pf-split-pts svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--blue)}
.pf-split-go{display:inline-flex;align-items:center;gap:8px;margin-top:28px;font-size:13.5px;font-weight:700;color:var(--blue)}
.pf-split-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.pf-split-go:hover svg{transform:translateX(5px)}
/* the render the design manager likes — one per page, never repeated */
.pf-split-viz{
  position:relative;border-radius:26px;overflow:hidden;
  aspect-ratio:4/3.2;box-shadow:0 40px 80px -44px rgba(20,44,96,.5);
}
.pf-split-viz img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pf-split-viz:hover img{transform:scale(1.04)}
/* ---- Steps ---- */
.pf-steps{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(80% 64% at 50% 0%,rgba(0,46,138,.32),transparent 60%),linear-gradient(180deg,#04060e,#060a18 52%,#04060e);
}
.pf-steps .h2,.pf-steps .h2-light{color:#fff}
.pf-steplist{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pf-step{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--radius-xl);padding:28px 28px 26px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  -webkit-backdrop-filter:blur(22px) saturate(1.4);backdrop-filter:blur(22px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.pf-step::after{
  content:"";position:absolute;top:0;left:16%;right:16%;height:2px;border-radius:2px;
  background:rgba(120,160,255,.85);box-shadow:0 0 18px 1px rgba(120,160,255,.85);
  opacity:.9;transition:opacity .35s,left .45s var(--ease),right .45s var(--ease);
}
.pf-step:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.4);box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.pf-step:hover::after{left:6%;right:6%;opacity:1}
.pf-step-n{font-size:12px;font-weight:800;letter-spacing:.14em;color:#6fa8ff}
.pf-step h3{margin-top:10px;font-size:20px;letter-spacing:-.026em;color:#fff}
.pf-step p{margin-top:10px;font-size:13.5px;line-height:1.64;color:#a9bcdb}
.pf-steps-cta{display:flex;justify-content:center;margin-top:38px}
/* ---- Responsive ---- */
@media (max-width:1080px){.pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-split-in{grid-template-columns:1fr;gap:36px}
.pf-split-viz{max-width:460px;margin-inline:auto;width:100%}
.pf-steplist{grid-template-columns:1fr}}
@media (max-width:860px){.pf-hero{min-height:auto;padding:calc(var(--nav-h) + 44px) 0 54px}
.pf-hero-bg{background-position:66% 50%}
.pf-hero-bg::after{background:linear-gradient(180deg,rgba(4,6,14,.74) 0%,rgba(4,6,14,.6) 46%,rgba(4,6,14,.88) 100%)}}
@media (max-width:720px){.pf-h1 br,.pf-lead br,.pf-split .h2 br{display:none}
.pf-hero-copy{max-width:none}
.pf-grid{grid-template-columns:1fr}
.pf-split-pts{grid-template-columns:1fr}
.pf-hact .btn{width:100%;justify-content:center}}
/* =================================================================
   SPONSORSHIP, COMPANY AND HELP-CENTRE PAGES
   ================================================================= */
/* in-page nav in the banner — short pages get none, long ones get anchors */
.pf-subnav{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.pf-subnav a{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;color:#c9d5ea;
  padding:8px 16px;border-radius:70px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;
}
.pf-subnav a:hover{transform:translateY(-2px);color:#fff;background:rgba(255,255,255,.12);border-color:rgba(120,175,255,.44)}
/* ---- Partner grid (sponsorship index) ---- */
/* ---- Listing filter bar (CSR / events / media / achievements) ---- */
.pg-list{background:#fff}
.pg-bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  padding:14px;border-radius:20px;margin-bottom:22px;
}
.pg-cats{display:flex;flex-wrap:wrap;gap:8px}
.pg-status{font-size:12.5px;color:var(--text-mute);margin:0}
.pg-empty{max-width:460px;margin:8px auto 0;text-align:center;padding:38px 26px;border-radius:22px;background:var(--bg-light);border:1px dashed var(--line)}
.pg-empty p{font-size:14.5px;color:var(--text-soft);margin-bottom:18px}
/* the listing reuses .nr-card, but these cards do not link out to an article body */
.pg-list .nr-media{cursor:default}
/* ---- Fixtures (ICC) ---- */
.pg-sched{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(80% 64% at 50% 0%,rgba(0,46,138,.32),transparent 60%),linear-gradient(180deg,#04060e,#060a18 52%,#04060e);
}
.pg-sched .h2,.pg-sched .h2-light{color:#fff}
.pg-sched .head-sub{color:#a9bcdb}
.pg-fixtures{list-style:none;display:flex;flex-direction:column;gap:12px;max-width:760px;margin-inline:auto}
.pg-fix{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 24px;border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.pg-fix::before{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,#6fa8ff,#0047BB);transform:scaleY(0);transform-origin:top;
  transition:transform .45s var(--ease);
}
.pg-fix:hover{transform:translateX(4px);border-color:rgba(120,175,255,.34);background:rgba(255,255,255,.075)}
.pg-fix:hover::before{transform:scaleY(1)}
.pg-fix-t{display:flex;flex-direction:column;gap:3px}
.pg-fix-t b{font-size:16px;letter-spacing:-.02em;color:#fff}
.pg-fix-t em{font-style:normal;font-size:12px;color:#8ea4c6}
.pg-fix-tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#bcd6ff;background:rgba(0,71,187,.34);padding:6px 12px;border-radius:70px}
/* ---- CEO quote ---- */
.pg-quote{background:var(--bg-light-2)}
.pg-quote-card{position:relative;max-width:900px;margin-inline:auto;padding:clamp(30px,4vw,52px);border-radius:26px;text-align:center}
.pg-quote-mark{position:absolute;top:6px;left:clamp(20px,3vw,40px);font-size:110px;line-height:1;color:rgba(0,71,187,.1);font-weight:800}
.pg-quote-card blockquote p{position:relative;font-size:clamp(16px,2vw,21px);line-height:1.66;letter-spacing:-.018em;color:var(--text)}
.pg-quote-card figcaption{margin-top:22px;display:flex;flex-direction:column;gap:3px}
.pg-quote-card figcaption b{font-size:14.5px;color:var(--ink)}
.pg-quote-card figcaption span{font-size:12.5px;color:var(--text-mute)}
/* ---- PCCME telemetry: the one bespoke block on these pages ---- */
.pg-tel{
  position:relative;overflow:clip;color:#fff;
  background:radial-gradient(76% 62% at 76% 6%,rgba(0,71,187,.34),transparent 62%),linear-gradient(180deg,#04060e,#070c1c 52%,#04060e);
}
.pg-tel .h2,.pg-tel .h2-light{color:#fff}
.pg-tel .head-sub{color:#a9bcdb}
.tel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}
.tel-dash{border-radius:26px;padding:24px}
.tel-dash-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.tel-sym{display:flex;flex-direction:column;gap:3px}
.tel-sym b{font-size:18px;letter-spacing:-.025em}
.tel-sym em{font-style:normal;font-size:12px;color:#9fb2d0}
.tel-gear{display:flex;flex-direction:column;align-items:center;gap:2px}
.tel-gear i{font-style:normal;font-size:26px;font-weight:800;letter-spacing:-.04em;color:#6fa8ff;font-variant-numeric:tabular-nums}
.tel-gear u{text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.16em;color:#6f86ad}
.tel-gauge{position:relative;margin-top:16px}
.tel-gauge svg{width:100%;height:auto;display:block;overflow:visible}
/* no non-scaling-stroke here: it computes the dash in device space while the
   dasharray is authored in user units, which breaks the fill proportion */
.tel-arc-bg,.tel-arc{fill:none;stroke-width:10;stroke-linecap:round}
.tel-arc-bg{stroke:rgba(255,255,255,.09)}
.tel-arc{stroke:#6fa8ff;stroke-dasharray:315;stroke-dashoffset:315;transition:stroke-dashoffset .9s var(--ease)}
.tel-read{position:absolute;left:0;right:0;bottom:6px;display:flex;flex-direction:column;align-items:center;gap:1px}
.tel-read b{font-size:clamp(32px,4vw,44px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.tel-read em{font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#8ea4c6}
.tel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.09)}
.tel-stats div{display:flex;flex-direction:column;gap:3px;align-items:center}
.tel-stats dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6f86ad}
.tel-stats dd{font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tel-laps{display:flex;flex-direction:column;gap:10px}
.tel-lap{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;
  padding:16px 18px;border-radius:16px;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1);
  transition:transform .4s var(--ease),border-color .3s,background .3s;
}
.tel-lap:hover{transform:translateX(4px);background:rgba(255,255,255,.075)}
.tel-lap.is-on{border-color:rgba(120,175,255,.44);background:rgba(255,255,255,.085)}
.tel-lap-n{
  grid-row:span 2;align-self:center;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:12.5px;font-weight:800;letter-spacing:-.01em;color:#6f86ad;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:color .35s,background .35s;
}
.tel-lap.is-on .tel-lap-n{color:#0b1220;background:#6fa8ff;border-color:transparent}
.tel-lap-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tel-lap-tx b{font-size:15px;letter-spacing:-.022em;color:#fff}
.tel-lap-tx em{font-style:normal;font-size:12px;color:#8ea4c6}
.tel-lap-bar{grid-column:2;height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:8px}
.tel-lap-bar i{display:block;height:100%;width:var(--w);border-radius:4px;background:linear-gradient(90deg,#6fa8ff,#16e9d7);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease)}
.tel-lap.is-on .tel-lap-bar i{transform:scaleX(1)}
.tel-note{margin-top:6px;font-size:12.5px;line-height:1.6;color:#8ea4c6}
/* ---- Help centre ---- */
.hc-assist{background:var(--bg-light-2)}
.hc-assist-card{
  position:relative;overflow:hidden;border-radius:28px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,3vw,44px);align-items:center;
  padding:clamp(30px,4vw,52px);
  background:radial-gradient(74% 84% at 88% 6%,rgba(0,71,187,.46),transparent 62%),linear-gradient(152deg,#0b1224,#050914 56%,#04060e);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 46px 100px -50px rgba(0,20,70,.82),inset 0 1px 0 rgba(255,255,255,.13);
}
.hc-assist-aura{position:absolute;z-index:0;width:420px;height:420px;top:-40%;right:6%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 66%);filter:blur(60px)}
.hc-assist-tx,.hc-assist-act{position:relative;z-index:1}
.hc-assist-tx h2{font-size:clamp(23px,2.6vw,32px);letter-spacing:-.032em;line-height:1.16}
.hc-assist-tx p{margin-top:12px;font-size:14.5px;line-height:1.66;color:#a9bcdb;max-width:52ch}
.hc-assist-act{display:flex;flex-wrap:wrap;gap:12px}
/* ---- Help article ---- */
/* ---- Responsive ---- */
@media (max-width:1080px){.tel{grid-template-columns:1fr}
.hc-assist-card{grid-template-columns:1fr}}
@media (max-width:720px){.pf-subnav a{flex:1 1 calc(50% - 5px);justify-content:center}
.pg-tel .h2 br{display:none}
.pg-fix{flex-direction:column;align-items:flex-start;gap:12px}
.hc-assist-act .btn{flex:1 1 100%;justify-content:center}}
/* =================================================================
   MT4 / MT5 PAGES
   ================================================================= */
/* ---- Banner: gradient rather than a photo, with the render bleeding
        into the bottom-right corner of the section ---- */
/* flat dark only — the render carries its own light, and stacking gradients
   behind it was what made it look muddy */
.pf-hero--mt{background:#04060e;overflow:hidden}
.pf-hero--mt .pf-hero-copy{max-width:min(560px,52%)}
/* the render is shot on pure black, so it composites instead of being masked;
   nothing between .pf-hero--mt and the image may create a stacking context */
.pf-hero--mt{isolation:isolate}
/* the render spans the banner from the disclaimer bar to the base */
.mt-hero-visual{position:absolute;top:0;right:0;bottom:0;width:min(58%,920px);pointer-events:none}
.mt-hero-img{
  display:block;width:100%;height:100%;object-fit:cover;object-position:56% center;
  mix-blend-mode:lighten;transform-origin:center right;
  /* one mask, not two composited — intersecting them left a visible seam
     where the radial's edge crossed the linear fade */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 16%,#000 46%,#000 100%);
}
@media (prefers-reduced-motion:no-preference){.mt-hero-img{animation:mtBreathe 9s var(--ease) infinite alternate}
@keyframes mtBreathe{from{transform:scale(1)}to{transform:scale(1.018)}}}
.mt-chip{
  position:absolute;z-index:2;display:flex;align-items:center;gap:10px;
  padding:11px 15px;border-radius:15px;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.75);
}
.mt-chip-ic{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(0,71,187,.4);color:#bcd6ff}
.mt-chip-ic svg{width:15px;height:15px}
.mt-chip-tx{display:flex;flex-direction:column;line-height:1.25}
.mt-chip-tx b{font-size:12.5px;color:#fff;letter-spacing:-.015em;white-space:nowrap}
.mt-chip-tx em{font-style:normal;font-size:10px;color:#a9bcdb;white-space:nowrap}
.mt-chip.c1{top:20%;left:2%}
.mt-chip.c2{bottom:22%;left:16%}
/* ---- Why choose: features grouped into three cards ---- */
.mt-why{
  position:relative;isolation:isolate;overflow:clip;
  background:radial-gradient(50% 44% at 94% 2%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2);
}
.mt-why>.container{position:relative;z-index:1}
.mt-why .head-sub{max-width:74ch}
.mt-fgroups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
/* one gradient across all three — the blue reads best against the section */
.mt-fgroup--a,.mt-fgroup--b,.mt-fgroup--c{background:linear-gradient(180deg,rgba(0,71,187,.09),rgba(255,255,255,.62) 46%)}
.mt-fgroup-ic{background:rgba(0,71,187,.11);color:var(--blue)}
.mt-fgroup{
  display:flex;flex-direction:column;border-radius:22px;padding:28px 26px 24px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.mt-fgroup:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.mt-fgroup-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:18px;
  background:rgba(0,71,187,.09);color:var(--blue);transition:transform .4s var(--ease);
}
.mt-fgroup-ic svg{width:22px;height:22px}
.mt-fgroup:hover .mt-fgroup-ic{transform:translateY(-3px) scale(1.05)}
.mt-fgroup h3{font-size:18px;letter-spacing:-.026em;color:var(--text)}
.mt-fgroup ul{display:flex;flex-direction:column;margin-top:14px}
.mt-fgroup li{
  display:flex;align-items:flex-start;gap:11px;padding:11px 0;font-size:13.5px;line-height:1.5;color:var(--text-soft);
  border-bottom:1px solid var(--line);transition:color .3s var(--ease),transform .3s var(--ease);
}
.mt-fgroup li:last-child{border-bottom:0;padding-bottom:0}
.mt-fgroup li:hover{color:var(--blue);transform:translateX(3px)}
.mt-fgroup li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--blue)}
/* ---- Beyond: a horizontal rail the page scroll drives ---- */
.mt-beyond{
  position:relative;overflow:clip;color:#fff;background:#04060e;
}
.mt-beyond .h2,.mt-beyond .h2-light{color:#fff}
.mt-beyond .head-sub{color:#a9bcdb}
/* no scroll-snap: the rail's inline padding aligns the first card with the
   container, and snap immediately pulled past it so "previous" never disabled */
.mt-rail-vp{
  overflow-x:auto;overflow-y:hidden;padding-block:6px;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain;
}
.mt-rail-vp::-webkit-scrollbar{display:none}
.mt-rail{display:flex;gap:20px;width:max-content;padding-inline:max(24px,calc((100vw - var(--maxw)) / 2 + 24px));will-change:transform}
.mt-rail-card{
  position:relative;flex:none;width:clamp(280px,26vw,360px);min-height:clamp(320px,30vw,400px);
  display:flex;flex-direction:column;border-radius:24px;padding:28px 26px 26px;overflow:hidden;
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
.mt-rail-card:hover{transform:translateY(-4px);border-color:rgba(120,175,255,.4);box-shadow:0 30px 64px -34px rgba(0,60,180,.55)}
.mt-rail-n{font-size:11.5px;font-weight:800;letter-spacing:.16em;color:#6f86ad}
.mt-rail-ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin:16px 0 16px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:#cfe0ff;
  transition:transform .4s var(--ease),border-color .3s;
}
.mt-rail-ic svg{width:22px;height:22px}
.mt-rail-card:hover .mt-rail-ic{transform:translateY(-3px);border-color:rgba(120,175,255,.5)}
.mt-rail-card h3{font-size:19px;letter-spacing:-.026em;color:#fff}
.mt-rail-card p{margin-top:10px;font-size:13.5px;line-height:1.64;color:#a9bcdb}
/* the first card is the video */
.mt-rail-card--video{width:clamp(320px,34vw,480px);padding:0;border:1px solid rgba(255,255,255,.12)}
.mt-rail-card--video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.mt-rail-card--video:hover img{transform:scale(1.05)}
.mt-rail-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.2) 0%,rgba(4,6,14,.32) 46%,rgba(4,6,14,.9) 100%)}
.mt-rail-play{
  position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 20px 44px -16px rgba(0,0,0,.7);
  transition:transform .45s var(--ease),background .35s;
}
.mt-rail-play svg{width:24px;height:24px;margin-left:3px}
.mt-rail-card--video:hover .mt-rail-play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
@media (prefers-reduced-motion:no-preference){.mt-rail-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:kcPing 2.8s ease-out infinite}}
.mt-rail-vmeta{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-rail-tag{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(0,71,187,.86);padding:6px 11px;border-radius:70px}
.mt-rail-dur{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;background:rgba(4,6,14,.6);padding:5px 10px;border-radius:70px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.mt-rail-dur svg{width:12px;height:12px}
.mt-rail-vtx{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:6px}
.mt-rail-vtx b{font-size:21px;font-weight:700;letter-spacing:-.03em;line-height:1.16}
.mt-rail-vtx em{font-style:normal;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.76)}
/* closing card links to the other platform */
.mt-rail-card--end{
  background:linear-gradient(160deg,rgba(0,71,187,.34),rgba(255,255,255,.03));
  border:1px solid rgba(120,175,255,.28);
}
.mt-rail-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:20px;font-size:13px;font-weight:700;color:#bcd6ff}
.mt-rail-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
.mt-rail-card--end:hover .mt-rail-go svg{transform:translateX(5px)}
.mt-rail-foot{display:flex;align-items:center;gap:24px;margin-top:32px}
.mt-rail-progress{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}
.mt-rail-progress i{display:block;height:100%;width:100%;border-radius:3px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#0047BB,#6fa8ff 60%,#16e9d7);transition:transform .25s var(--ease)}
.mt-rail-nav{display:flex;gap:10px;flex:none}
.mt-rail-btn{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  transition:background .3s,border-color .3s,transform .3s var(--ease),opacity .3s;
}
.mt-rail-btn svg{width:19px;height:19px}
.mt-rail-btn:hover:not(:disabled){background:rgba(0,71,187,.55);border-color:rgba(120,175,255,.5);transform:translateY(-2px)}
.mt-rail-btn:disabled{opacity:.32;cursor:default}
/* ---- Download: centred render composited into the section ---- */
.mt-dl{
  position:relative;overflow:clip;isolation:isolate;color:#fff;
  background:#04060e;
}
.mt-dl .h2,.mt-dl .h2-light{color:#fff}
.mt-dl .head-sub{color:#a9bcdb;max-width:64ch}
.mt-dl>.container{position:relative}
/* the backdrop is crushed to black in the asset, so lighten melts it into the
   section — no frame, no visible rectangle */
.mt-dl-stage{position:relative;max-width:min(980px,94%);margin:0 auto}
.mt-dl-img{
  display:block;width:100%;height:auto;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(78% 84% at 50% 46%,#000 62%,rgba(0,0,0,0) 96%);
  mask-image:radial-gradient(78% 84% at 50% 46%,#000 62%,rgba(0,0,0,0) 96%);
}
.mt-dl-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:10px auto 0}
.mt-dl-btn{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:14px 24px 14px 14px;border-radius:18px;flex:0 1 236px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease);
}
/* each platform lights in its own colour on hover */
.mt-dl-btn::after{
  content:"";position:absolute;left:50%;bottom:-32px;width:70%;height:56px;transform:translateX(-50%);
  border-radius:50%;filter:blur(22px);opacity:0;transition:opacity .4s var(--ease);
  background:var(--glow,rgba(120,175,255,.9));
}
.mt-dl-btn:hover{transform:translateY(-4px);border-color:var(--edge,rgba(120,175,255,.5));box-shadow:0 26px 50px -24px rgba(0,0,0,.8)}
.mt-dl-btn:hover::after{opacity:.55}
.mt-dl-tile{
  width:46px;height:46px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  transition:transform .4s var(--ease),background .3s,border-color .3s;
}
.mt-dl-btn:hover .mt-dl-tile{transform:translateY(-2px) scale(1.04);border-color:var(--edge,rgba(120,175,255,.5))}
.mt-dl-ic{width:24px;height:24px}
.mt-dl-tile.apple{--x:#fff}
.mt-dl-tile.apple .mt-dl-ic{color:#fff}
.mt-dl-btn:has(.apple){--glow:rgba(190,210,240,.75);--edge:rgba(220,232,248,.5)}
.mt-dl-btn:has(.win){--glow:rgba(0,164,239,.85);--edge:rgba(0,164,239,.55)}
.mt-dl-btn:has(.droid){--glow:rgba(61,220,132,.8);--edge:rgba(61,220,132,.5)}
.mt-dl-tile.win{background:rgba(0,164,239,.14);border-color:rgba(0,164,239,.28)}
.mt-dl-tile.droid{background:rgba(61,220,132,.13);border-color:rgba(61,220,132,.26)}
.mt-dl-tx{display:flex;flex-direction:column;line-height:1.18;min-width:0}
.mt-dl-tx em{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8ea4c6}
.mt-dl-tx b{font-size:16px;font-weight:700;letter-spacing:-.022em;color:#fff;white-space:nowrap}
/* ---- Why STARTRADER: the gradient ray boxes, three up ---- */
.mt-whyst-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mt-whyst-grid .fx-mh-card{min-height:0}
/* ---- Responsive ---- */
@media (max-width:1180px){.mt-hero-visual{width:min(64%,780px)}
.mt-chip.c1{left:8%}
.mt-chip.c2{left:-2%}}
@media (max-width:1080px){.pf-hero--mt{padding-bottom:clamp(300px,36vw,440px)}
.pf-hero--mt .pf-hero-copy{max-width:none}
.mt-hero-visual{top:auto;height:clamp(280px,34vw,420px);width:100%;right:0}
.mt-fgroups{grid-template-columns:1fr}
.mt-whyst-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.pf-hero--mt{padding-bottom:clamp(220px,58vw,340px)}
.mt-hero-visual{height:clamp(220px,52vw,320px)}
.mt-chip{display:none}
.mt-dl-btn{flex:1 1 100%}
.mt-dl-stage{max-width:112%;margin-inline:-6%}
.mt-whyst-grid{grid-template-columns:1fr}
.mt-dl .h2 br{display:none}}
/* MT4: the extra blocks its content needs */
.mt-quickdl{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.mt-quickdl .mt-dl-btn{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px -26px rgba(20,44,96,.32);
}
.mt-quickdl .mt-dl-btn:hover{border-color:var(--edge,rgba(0,71,187,.4));box-shadow:0 26px 50px -26px rgba(20,44,96,.42)}
.mt-quickdl .mt-dl-tx em{color:var(--text-mute)}
.mt-quickdl .mt-dl-tx b{color:var(--text)}
.mt-quickdl .mt-dl-tile{background:rgba(20,44,96,.05);border-color:var(--line)}
.mt-quickdl .mt-dl-tile.apple .mt-dl-ic{color:#0a1020}
.mt-sysreq{margin-top:28px;text-align:center;font-size:12.5px;line-height:1.6;color:#8ea4c6}
.mt-sysreq b{color:#c2cfe4;margin-right:6px}
.mt-pair-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.mt-pair-note{margin-top:30px;text-align:center;font-size:12px;line-height:1.6;color:#7f92b3}
.mt-dl-cta{display:flex;justify-content:center;margin-top:30px}
@media (max-width:1080px){.mt-pair-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.mt-pair-grid{grid-template-columns:1fr}
.mt-quickdl .mt-dl-btn{flex:1 1 100%}}
/* =================================================================
   COPY TRADING
   ================================================================= */
.ct-bpanel--alt:hover{border-color:rgba(138,100,64,.34)}
.ct-path-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:24px;font-size:13.5px;font-weight:700;color:var(--blue)}
.ct-path-go svg{width:15px;height:15px;transition:transform .35s var(--ease)}
/* ---- video ---- */
/* ---- steps reuse htrade; only the switch is new ---- */
.ct-switch{position:relative;align-self:flex-start;display:inline-flex;width:auto;gap:4px;padding:5px;border-radius:70px;background:rgba(20,44,96,.06);margin:22px 0 26px}
.ct-switch-ind{position:absolute;top:5px;bottom:5px;left:0;width:0;border-radius:70px;background:var(--blue);box-shadow:0 14px 28px -14px rgba(0,71,187,.75);transition:transform .42s var(--ease),width .42s var(--ease)}
.ct-tab{position:relative;z-index:1;padding:10px 22px;border-radius:70px;font-size:13.5px;font-weight:700;color:var(--text-soft);transition:color .3s}
.ct-tab:hover{color:var(--text)}
.ct-tab.is-on{color:#fff}
.ct-panel{min-width:0;animation:ctIn .45s var(--ease) both}
@keyframes ctIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ct-panel{animation:none}}
/* ---- benefits ---- */
.ct-ben-sec{background:var(--bg-light)}
.ct-bens{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.ct-bpanel{border-radius:24px;padding:30px 28px 24px;transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s}
.ct-bpanel:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ct-bpanel header{display:flex;flex-direction:column;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ct-ben-chip{align-self:flex-start;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blue);padding:7px 14px;border-radius:70px}
.ct-ben-chip.alt{background:#8a6440}
.ct-bpanel header b{font-size:20px;letter-spacing:-.028em;color:var(--text)}
.ct-brows{display:flex;flex-direction:column}
.ct-brows li{
  display:flex;align-items:flex-start;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);
  transition:transform .3s var(--ease);
}
.ct-brows li:last-child{border-bottom:0;padding-bottom:4px}
.ct-brows li:hover{transform:translateX(4px)}
.ct-brow-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(0,71,187,.1);color:var(--blue);transition:transform .35s var(--ease)}
.ct-bpanel--alt{background:linear-gradient(180deg,rgba(223,197,174,.4),rgba(255,255,255,.66) 44%)}
.ct-bpanel--alt .ct-brow-ic{background:rgba(223,197,174,.55);color:#8a6440}
.ct-brow-ic svg{width:18px;height:18px}
.ct-brows li:hover .ct-brow-ic{transform:scale(1.06)}
.ct-brow-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.ct-brow-tx b{font-size:15px;letter-spacing:-.022em;color:var(--text)}
.ct-brow-tx em{font-style:normal;font-size:13px;line-height:1.6;color:var(--text-soft)}
/* ---- ranking: an auto-scrolling rail, same construction as the awards row ---- */
.ct-rail{
  position:relative;z-index:1;width:100vw;margin-left:calc(-50vw + 50%);overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ct-track{display:flex;gap:18px;width:max-content;padding:4px 0;will-change:transform}
/* ---- Responsive ---- */
@media (max-width:1080px){.ct-bens{grid-template-columns:1fr}
.ct-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.ct-cards{grid-template-columns:1fr}
.ct-switch{width:100%}
.ct-tab{flex:1;padding-inline:10px}}
/* =================================================================
   STAR COPY
   shares the copy-trading language — glass cards, the sand accent for
   the master side, the same pill switch — with its own section shapes
   ================================================================= */
/* ---- benefits: one expanding rail, so only the open panel spends space ---- */
@keyframes scDwell{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- the two roles: the shared htrade stepper, switched by role ---- */
/* where the stepper sits in a switchable panel, keep it the height of the intro card */
.htrade .ct-panel{display:flex}
.htrade .ct-panel .htrade-steps{height:100%}
/* ---- master board: the figures animate in once, on scroll ---- */
.sc-strat-aura{position:absolute;z-index:0;width:680px;height:420px;top:-8%;left:50%;transform:translateX(-50%);border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.2),transparent 70%);filter:blur(96px)}
/* ---- Responsive ---- */
/* =================================================================
   STAR WEB TRADING
   ================================================================= */
/* ---- the dashboard, built rather than photographed: the panel you pick is
   the panel that lights, and the rest step back ---- */
@keyframes swPing{0%{opacity:.9;transform:scale(.7)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
/* ---- benefits as a bento: the lead cell carries the weight ---- */
/* ---- key features: one list, one panel, kept in step ---- */
@keyframes swFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* ---- access from anywhere: the ray-gradient cards from the forex hours grid ---- */
/* ---- Responsive ---- */
/* =================================================================
   WEB TRADER
   ================================================================= */
/* ---- ten reasons: a spec sheet, not ten boxes ---- */
/* ---- the stage: one framed screen, one aligned strip, nothing floating ---- */
.wt-stage-sec{
  position:relative;overflow:clip;color:#fff;
  background:
    radial-gradient(62% 46% at 50% 2%,rgba(10,92,245,.28),transparent 64%),
    linear-gradient(180deg,#060b18,#0a1122 50%,#050912);
}
.wt-stage-sec .h2,.wt-stage-sec .h2-light{color:#fff}
.wt-stage-sec .head-sub{color:#a9bcdb}
.wt-stage-sec>.container{position:relative;z-index:1}
.wt-frame{
  position:relative;max-width:min(940px,100%);margin:0 auto;border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#101a30,#0a1120);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 56px 110px -46px rgba(0,0,0,.95),0 0 0 1px rgba(10,92,245,.14),inset 0 1px 0 rgba(255,255,255,.1);
}
.wt-frame-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.1)}
.wt-frame-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.2)}
.wt-frame-bar i:first-child{background:#ff6058}
.wt-frame-bar i:nth-child(2){background:#ffbe2f}
.wt-frame-bar i:nth-child(3){background:#28ca42}
.wt-frame-url{
  flex:1;margin-left:8px;max-width:280px;display:flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:70px;font-size:11px;color:#c8d6ec;
  background:rgba(0,0,0,.36);border:1px solid rgba(255,255,255,.1);
}
.wt-frame-url svg{width:11px;height:11px;color:#3fd9a8}
.wt-frame-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#8ea4c6}
.wt-frame-live b{position:relative;width:6px;height:6px;border-radius:50%;background:#3fd9a8}
@media (prefers-reduced-motion:no-preference){.wt-frame-live b::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid rgba(63,217,168,.7);animation:wtPing 2.4s ease-out infinite}}
@keyframes wtPing{0%{opacity:.9;transform:scale(.7)}70%{opacity:0;transform:scale(1.9)}100%{opacity:0;transform:scale(1.9)}}
.wt-frame>img{display:block;width:100%;height:auto}
/* an MT4-style view drawn rather than screenshotted, so it stays crisp */
.wt-ui{padding:12px;display:flex;flex-direction:column;gap:10px;font-variant-numeric:tabular-nums}
.wt-ui-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.wt-ui-tabs,.wt-ui-tfs{display:flex;gap:5px}
.wt-ui-tabs span,.wt-ui-tfs span{font-size:9.5px;font-weight:700;color:#8ea4c6;padding:5px 9px;border-radius:6px;background:rgba(255,255,255,.05)}
.wt-ui-tabs span.on,.wt-ui-tfs span.on{color:#fff;background:rgba(61,139,255,.34)}
.wt-ui-main{display:grid;grid-template-columns:214px minmax(0,1fr);gap:10px}
.wt-ui-mw,.wt-ui-plot,.wt-ui-term{border-radius:11px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);padding:11px}
.wt-ui-hd{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#6f86ad;margin-bottom:9px}
.wt-ui-q{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:10px;white-space:nowrap}
.wt-ui-q:last-child{border-bottom:0}
.wt-ui-q b{color:#e6edf8;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.wt-ui-q em{font-style:normal;color:#c8d6ec}
.wt-ui-q u{text-decoration:none;font-weight:700;text-align:right}
.wt-ui-q u.up{color:#3fd9a8}
.wt-ui-q u.down{color:#ff7a7a}
.wt-ui-plot{position:relative;padding-right:56px}
.wt-ui-sym{position:absolute;top:11px;left:12px;z-index:1;font-size:9.5px;font-weight:600;color:#8ea4c6}
.wt-ui-sym b{color:#fff;font-weight:700}
.wt-ui-chart{display:block;width:100%;height:196px;margin-top:14px}
.ku{fill:#3fd9a8}
.kd{fill:#ff6b6b}
.kuw{stroke:#3fd9a8;stroke-width:1;vector-effect:non-scaling-stroke}
.kdw{stroke:#ff6b6b;stroke-width:1;vector-effect:non-scaling-stroke}
.wt-ui-axis{position:absolute;top:32px;right:10px;bottom:11px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:9px;color:#6f86ad}
.wt-ui-axis .now{color:#08281c;background:#3fd9a8;font-weight:700;padding:2px 5px;border-radius:4px}
.wt-ui-th,.wt-ui-tr{display:grid;grid-template-columns:1.1fr .7fr .7fr .9fr .9fr .9fr;gap:8px;align-items:center;font-size:10.5px}
.wt-ui-th{padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.09);font-size:9px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#6f86ad}
.wt-ui-tr{padding:7px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#c8d6ec}
.wt-ui-tr:last-child{border-bottom:0}
.wt-ui-tr b{color:#fff;font-weight:600}
.wt-ui-tr u{text-decoration:none;font-weight:700}
.wt-ui-tr u.up{color:#3fd9a8}
.wt-ui-tr u.down{color:#ff7a7a}
.wt-ui-side{display:inline-flex;align-items:center;gap:5px;text-transform:capitalize}
.wt-ui-side::before{content:"";width:5px;height:5px;border-radius:2px;background:#3fd9a8}
.wt-ui-side.s::before{background:#ff7a7a}
.wt-caps{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
  max-width:min(1000px,100%);margin:36px auto 0;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.wt-cap{
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:24px 16px;text-align:center;border-left:1px solid rgba(255,255,255,.08);
  transition:background .3s;
}
.wt-cap:first-child{border-left:0}
.wt-cap:hover{background:rgba(255,255,255,.05)}
.wt-cap-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;background:rgba(61,139,255,.16);border:1px solid rgba(61,139,255,.26);color:#8ec0ff;transition:transform .35s var(--ease)}
.wt-cap-ic svg{width:18px;height:18px}
.wt-cap:hover .wt-cap-ic{transform:translateY(-3px)}
.wt-cap b{font-size:14px;letter-spacing:-.022em;color:#fff;line-height:1.28}
.wt-cap em{font-style:normal;font-size:11.5px;line-height:1.5;color:#8ea4c6}
.wt-req{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:11px;
  max-width:820px;margin:30px auto 0;padding:15px 24px;border-radius:70px;
  font-size:12.5px;line-height:1.6;text-align:center;color:#a9bcdb;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
}
.wt-req b{color:#fff;font-weight:700}
.wt-req svg{width:15px;height:15px;flex:none;color:#3fd9a8}
.wt-stage-cta{display:flex;justify-content:center;margin-top:28px}
/* ---- Responsive ---- */
@media (max-width:980px){.wt-caps{grid-template-columns:repeat(3,minmax(0,1fr))}
.wt-cap:nth-child(4){border-left:0}
.wt-cap:nth-child(n+4){border-top:1px solid rgba(255,255,255,.08)}}
@media (max-width:980px){.wt-ui-main{grid-template-columns:1fr}
.wt-ui-chart{height:170px}}
@media (max-width:720px){/* keep four columns and drop the two mid ones, so profit stays on its row */
.wt-ui-th,.wt-ui-tr{grid-template-columns:1.1fr .8fr .7fr .9fr;gap:8px}
.wt-ui-th span:nth-child(4),.wt-ui-th span:nth-child(5),.wt-ui-tr span:nth-child(4),.wt-ui-tr span:nth-child(5){display:none}
.wt-caps{grid-template-columns:repeat(2,minmax(0,1fr))}
.wt-cap:nth-child(odd){border-left:0}
.wt-cap:nth-child(n+3){border-top:1px solid rgba(255,255,255,.08)}
.wt-stage-sec .h2 br{display:none}
.wt-req{border-radius:20px;text-align:left;justify-content:flex-start}}
/* =================================================================
   PLATFORM PAGES — shared light cards, each with its own accent
   (a clean glass base, not a gradient wash)
   ================================================================= */
.pl-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.pl-sec>.container{position:relative;z-index:1}
.pl-sec--plain{background:var(--bg-light)}
.pl-intro{display:grid;grid-template-columns:104px minmax(0,1fr);gap:26px;align-items:start;max-width:880px;margin:0 auto 46px}
.pl-intro img{width:104px;height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
.pl-intro p{font-size:15px;line-height:1.76;color:var(--text-soft)}
/* the same shell, top bar and lift as the regulator cards on why-startrader */
.pl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pl-card{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  border-radius:var(--radius-lg);padding:20px 20px 18px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 10px 28px -18px rgba(20,44,96,.24),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .38s var(--ease),box-shadow .38s,border-color .3s;
}
.pl-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#2a72ff,#0b43c6);
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);
}
.pl-card:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 24px 46px -24px rgba(0,71,187,.4)}
.pl-card:hover::before{transform:scaleX(1)}
.pl-card-hd{display:flex;align-items:center;gap:12px}
.pl-card-ic{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(0,71,187,.1);color:var(--blue);
  transition:transform .38s var(--ease),background .3s,color .3s;
}
.pl-card-ic svg{width:19px;height:19px}
.pl-card:hover .pl-card-ic{transform:translateY(-2px);background:var(--blue);color:#fff}
.pl-card-hd h3{font-size:15.5px;font-weight:700;letter-spacing:-.022em;line-height:1.28;color:var(--text)}
.pl-card p{margin-top:13px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.6;color:var(--text-soft)}
.pl-act{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:42px}
/* the per-step action inside the shared stepper */
.htrade-txt .ct-path-go{margin-top:12px;padding-top:0}
/* ---- strategy managers: the figures animate in once, on scroll ---- */
/* ---- talk to the desk ---- */
@media (max-width:980px){.pl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pl-cards{grid-template-columns:1fr}}
@media (max-width:720px){.pl-intro{grid-template-columns:1fr;gap:18px}
.pl-intro img{width:88px}}
/* lettered instrument badge, for indices, shares, ETFs and the CFD umbrella */
.fx-inst-tx{
  flex:none;display:grid;place-items:center;min-width:52px;height:32px;padding:0 9px;border-radius:9px;
  font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--blue);
  background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.16);
  transition:transform .3s var(--ease),background .3s,color .3s;
}
.ta-table tbody tr:hover .fx-inst-tx{transform:translateY(-1px);background:var(--blue);color:#fff}
/* the 3D mark closes out the stepper's intro card, where there was dead space */
.htrade-mark{display:block;width:118px;height:auto;margin:34px 0 0 auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
@media (max-width:1080px){.htrade-mark{width:96px;margin-top:26px}}
/* the video is the banner: no scrim over it, and the frame is set so its subject
   lands on the right where the copy is not */
.fx-hero .acct-hero-video{opacity:1;object-position:64% center}
.fx-hero .acct-hero-bg::after{background:none}
@media (prefers-reduced-motion:reduce){.fx-hero .acct-hero-video{display:none}}
/* a Trade action on every row of an instrument board */
.ta-table th.ta-th-act,.ta-table td.ta-td-act{text-align:right;padding-left:12px}
.fx-trade{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 16px;border-radius:70px;font-size:12.5px;font-weight:700;
  color:var(--blue);background:rgba(0,71,187,.09);border:1px solid rgba(0,71,187,.18);
  transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),box-shadow .35s var(--ease);
}
.fx-trade svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.fx-trade:hover{background:var(--blue);color:#fff;border-color:transparent;transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(0,71,187,.6)}
.fx-trade:hover svg{transform:translateX(3px)}
.ta-table tbody tr:hover .fx-trade{background:var(--blue);color:#fff;border-color:transparent}
@media (max-width:860px){.fx-trade{padding:8px 13px;font-size:11.5px}
.fx-trade svg{display:none}}
@media (max-width:860px){/* a fifth column earns its room back from the cell padding */
.ta-table th,.ta-table td{padding:16px 14px}
.ta-table{min-width:700px}}
/* the flyout's group headings are the family pages */
.fly-group h5 a{color:inherit;transition:color .2s}
.fly-group h5 a:hover,.fly-group h5 a:focus-visible{color:#5b9dff}
/* =================================================================
   CSR — commitments, gallery, initiative timeline
   ================================================================= */
.csr-intro{display:grid;grid-template-columns:104px minmax(0,1fr);gap:26px;align-items:start;max-width:880px;margin:0 auto 46px}
.csr-intro img{width:104px;height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.22))}
.csr-intro p{font-size:15px;line-height:1.76;color:var(--text-soft)}
/* ---- gallery: a bento of stills, each one opens ---- */
/* ---- lightbox ---- */
/* ---- initiatives: a horizontal milestone scrubber ---- */
@keyframes csrSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* the shield gets a container of its own rather than floating beside a heading */
.pl-sign{
  display:flex;flex-wrap:wrap;align-items:center;gap:28px;margin-top:22px;
  padding:26px 32px;border-radius:24px;
  background:linear-gradient(110deg,rgba(0,71,187,.075),rgba(255,255,255,.68) 56%);
  border:1px solid rgba(255,255,255,.94);
  box-shadow:0 22px 46px -30px rgba(20,44,96,.34),inset 0 1px 0 #fff;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.pl-sign:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.pl-sign img{width:88px;height:auto;flex:none;filter:drop-shadow(0 18px 24px rgba(20,44,96,.24))}
.pl-sign-tx{flex:1;min-width:min(280px,100%);display:flex;flex-direction:column;gap:7px}
.pl-sign-tx b{font-size:17px;letter-spacing:-.028em;color:var(--text)}
.pl-sign-tx em{font-style:normal;font-size:14px;line-height:1.68;color:var(--text-soft)}
.pl-sign .btn{flex:none}
@media (max-width:720px){.pl-sign{padding:24px}}
/* =================================================================
   EVENTS — a stage gallery, and the shared kinds/band pattern
   ================================================================= */
/* ---- gallery: a full-bleed editorial rail, captions under the frame ---- */
/* =================================================================
   MEDIA COVERAGE — a rated-outlet rail and a wall of clippings
   ================================================================= */
.mc-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.mc-sec>.container{position:relative;z-index:1}
/* ---- the outlets, on a slow rail ---- */
/* ---- the wall: clippings flowing down columns ---- */
/* =================================================================
   ACHIEVEMENTS — the award wall
   ================================================================= */
/* =================================================================
   NBA PARTNERSHIP — an arena page: its own type, its own motion.
   Nothing here is shared with the other company pages on purpose.
   ================================================================= */
/* ---------------- hero ---------------- */
/* ---------------- the arc of values ---------------- */
/* ---------------- wallpapers: the locker ---------------- */
/* ---------------- the repeatedly panels ---------------- */
/* ---------------- the CEO word ---------------- */
/* ---------------- responsive ---------------- */
@media (max-width:1080px){.nb-hero-viz{order:-1;width:min(78%,420px)}}
/* =================================================================
   PORSCHE CARRERA CUP MIDDLE EAST
   A racing page: dark cinema, a studio for the car, a circuit you can
   read, and the real wallpapers on a moving rail. Scoped to .pcx.
   ================================================================= */
/* ---------------- banner: the same frame as the NBA page ---------------- */
/* ---------------- performance x precision: six reasons, plainly set ---------------- */
/* ---------------- engineered for excellence: the circuit ---------------- */
/* ---------------- beyond the finish line ---------------- */
/* ---------------- wallpapers on a moving rail ---------------- */
/* ---------------- start your journey ---------------- */
/* ---------------- a word from our CEO ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   UAE NATIONAL CRICKET TEAM — ICC MEN'S T20 WORLD CUP 2026
   Brand palette only. The cricket furniture is drawn, not photographed:
   stumps, a ball on its arc, fielding positions, a stitched seam.
   Scoped to .ckt.
   ================================================================= */
.ckt{--acc:#0047bb;--acc-2:#2a72ff;--acc-3:#7fb2ff;--seam:#2a72ff;
     --ink:#05070d;--glass:rgba(255,255,255,.06)}
/* ---------------- banner ---------------- */
.ck-hero{
  position:relative;isolation:isolate;overflow:hidden;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(900px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;padding:calc(var(--nav-h) + 70px) 0 96px;
  background:var(--ink);
}
.ck-hero-bg{
  position:absolute;inset:-8% 0;z-index:-3;will-change:transform;
  background:url("../img/icc-banner.webp") center/cover no-repeat;
}
.ck-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(3,8,20,.95) 0%,rgba(3,8,20,.88) 30%,rgba(3,8,20,.56) 50%,rgba(3,8,20,.12) 72%,transparent 88%),
    linear-gradient(180deg,rgba(3,8,20,.6),transparent 24%,rgba(3,8,20,.9));
}
.ck-hero-in{position:relative;z-index:2;width:100%}
.ck-hero-copy{max-width:min(100%,620px)}
.ck-badge{
  display:inline-flex;align-items:center;gap:13px;padding:8px 19px 8px 11px;border-radius:70px;
  background:var(--glass);border:1px solid rgba(255,255,255,.17);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
.ck-badge img{height:38px;width:auto;display:block}
.ck-badge span{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#e6edf8}
.ck-h1{margin-top:26px;font-size:clamp(36px,5vw,70px);font-weight:800;letter-spacing:-.05em;line-height:.98}
.ck-h1 span{display:block}
.ck-h1 .hollow{
  color:transparent;-webkit-text-stroke:1.4px rgba(127,178,255,.8);
  text-shadow:0 0 30px rgba(42,114,255,.5),0 0 70px rgba(0,71,187,.44);
}
.ck-h1 span:first-child{text-shadow:0 0 46px rgba(0,71,187,.5)}
.ck-lead{margin-top:24px;max-width:50ch;font-size:clamp(15px,1.5vw,17px);line-height:1.72;color:#c4cedf}
.ck-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ck-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 26px;border-radius:70px;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
  box-shadow:0 18px 38px -16px rgba(0,71,187,.9);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.ck-btn:hover{transform:translateY(-3px);box-shadow:0 26px 48px -16px rgba(42,114,255,.95)}
.ck-btn svg{width:15px;height:15px;flex:none}
.ck-btn--ghost{color:#fff;background:var(--glass);border:1px solid rgba(255,255,255,.2);box-shadow:none;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ck-btn--ghost:hover{background:rgba(255,255,255,.13);box-shadow:none}
/* shared headings */
.ck-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc-2);text-align:center}
.ck-h2{margin-top:16px;font-size:clamp(28px,3.7vw,50px);font-weight:800;letter-spacing:-.042em;line-height:1.06;text-align:center}
.ck-sub{margin:18px auto 0;max-width:62ch;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.7;text-align:center}
/* ---------------- the bento ---------------- */
.ck-bento-sec{position:relative;overflow:hidden;background:linear-gradient(180deg,#f5f8fc,#eef3fa)}
.ck-bento-sec .ck-eyebrow{color:var(--acc)}
.ck-bento-sec .ck-h2{color:var(--ink)}
.ck-bento-sec .ck-sub{color:#4d5c74}
.ck-bento{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(12px,1.5vw,18px);margin-top:clamp(32px,4vw,50px);
}
.ck-cell{
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(20px,2.4vw,28px);border-radius:var(--radius-lg);
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 12px 30px -20px rgba(20,44,96,.26),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .42s var(--ease),box-shadow .42s,border-color .32s;
}
.ck-cell:hover{transform:translateY(-6px);border-color:rgba(42,114,255,.5);
  box-shadow:0 28px 52px -26px rgba(0,71,187,.36)}
/* the stitch across the top runs when you point at a cell */
.ck-cell::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
  background:repeating-linear-gradient(90deg,var(--seam) 0 7px,transparent 7px 14px);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.ck-cell:hover::before{transform:scaleX(1)}
.ck-cell-n{
  position:relative;z-index:1;display:inline-flex;align-items:center;gap:9px;
  font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--acc);
}
.ck-cell-n i{
  width:16px;height:11px;border-radius:2px;
  background:repeating-linear-gradient(90deg,rgba(0,71,187,.5) 0 2px,transparent 2px 5px);
}
.ck-cell h3{position:relative;z-index:1;margin-top:13px;font-size:clamp(17px,1.9vw,22px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.ck-cell p{position:relative;z-index:1;margin-top:10px;font-size:13.6px;line-height:1.68;color:#5a6a83}
/* --- the drawn elements, one per cell, each answering the pointer --- */
.ck-viz{position:relative;z-index:1;display:block;align-self:stretch;margin-top:auto;padding-top:24px;height:118px}
/* three stumps and a bail */
.ck-viz--stumps{display:flex;align-items:flex-end;justify-content:center;gap:10px}
.ck-viz--stumps i{
  width:6px;border-radius:3px 3px 0 0;transform-origin:bottom;
  background:linear-gradient(180deg,var(--acc-2),rgba(42,114,255,.2));
  transition:height .55s var(--ease),transform .55s var(--ease);
}
.ck-viz--stumps i:nth-child(1){height:46px}
.ck-viz--stumps i:nth-child(2){height:58px}
.ck-viz--stumps i:nth-child(3){height:46px}
.ck-cell:hover .ck-viz--stumps i:nth-child(1){height:60px;transform:rotate(-7deg)}
.ck-cell:hover .ck-viz--stumps i:nth-child(2){height:74px}
.ck-cell:hover .ck-viz--stumps i:nth-child(3){height:60px;transform:rotate(7deg)}
.ck-viz--stumps::after{
  content:"";position:absolute;left:50%;bottom:60px;transform:translateX(-50%);
  width:36px;height:3px;border-radius:3px;background:var(--acc);
  transition:bottom .55s var(--ease),opacity .45s,transform .55s var(--ease);
}
.ck-cell:hover .ck-viz--stumps::after{bottom:78px;opacity:.35;transform:translateX(-50%) rotate(-8deg)}
/* a ball travelling its arc */
.ck-viz--arc{padding-inline:8px}
.ck-viz--arc svg{display:block;width:100%;height:92px;overflow:visible}
.ck-viz--arc .track{fill:none;stroke:rgba(0,71,187,.2);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.ck-viz--arc .draw{
  fill:none;stroke:var(--acc-2);stroke-width:2.6;stroke-linecap:round;
  stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s var(--ease);
}
.ck-cell:hover .ck-viz--arc .draw{stroke-dashoffset:0}
.ck-ball{
  position:absolute;left:0;bottom:8px;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,var(--acc-2) 70%);
  box-shadow:0 0 14px rgba(42,114,255,.85);
  transform:translateX(0);transition:transform 1.1s var(--ease);
}
.ck-cell:hover .ck-ball{transform:translateX(calc(100% + 240px))}
@supports (offset-path:path("M0 0 L1 1")){.ck-ball{
    left:auto;bottom:auto;top:24px;
    offset-path:path("M6 84 C 62 -2, 178 -2, 234 84");offset-distance:0%;
    transition:offset-distance 1.1s var(--ease);transform:none;
  }
.ck-cell:hover .ck-ball{offset-distance:100%;transform:none}}
/* fielders spreading to the boundary */
.ck-viz--field{display:block}
.ck-viz--field .ring{
  position:absolute;left:50%;top:calc(50% + 10px);transform:translate(-50%,-50%);
  width:92px;height:92px;border-radius:50%;border:1px dashed rgba(0,71,187,.3);
  transition:transform .6s var(--ease);
}
.ck-cell:hover .ck-viz--field .ring{transform:translate(-50%,-50%) scale(1.12) rotate(22deg)}
.ck-viz--field i{
  position:absolute;left:50%;top:calc(50% + 10px);width:7px;height:7px;border-radius:50%;
  background:var(--acc-2);
  transform:translate(-50%,-50%) rotate(var(--a)) translateY(-16px);
  transition:transform .6s var(--ease);
}
.ck-cell:hover .ck-viz--field i{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-44px)}
.ck-viz--field i:nth-child(2){transition-delay:.03s}
.ck-viz--field i:nth-child(3){transition-delay:.06s}
.ck-viz--field i:nth-child(4){transition-delay:.09s}
.ck-viz--field i:nth-child(5){transition-delay:.12s}
.ck-viz--field i:nth-child(6){transition-delay:.15s}
.ck-viz--field i:nth-child(7){transition-delay:.18s}
/* a run rate climbing */
.ck-viz--bars{display:flex;align-items:flex-end;justify-content:center;gap:9px}
.ck-viz--bars i{
  width:15px;border-radius:4px 4px 0 0;transform-origin:bottom;transform:scaleY(.3);
  background:linear-gradient(180deg,var(--acc-2),rgba(42,114,255,.18));
  transition:transform .6s var(--ease);
}
.ck-viz--bars i:nth-child(1){height:34px}
.ck-viz--bars i:nth-child(2){height:48px}
.ck-viz--bars i:nth-child(3){height:40px}
.ck-viz--bars i:nth-child(4){height:62px}
.ck-viz--bars i:nth-child(5){height:76px}
.ck-cell:hover .ck-viz--bars i{transform:scaleY(1)}
.ck-cell:hover .ck-viz--bars i:nth-child(2){transition-delay:.06s}
.ck-cell:hover .ck-viz--bars i:nth-child(3){transition-delay:.12s}
.ck-cell:hover .ck-viz--bars i:nth-child(4){transition-delay:.18s}
.ck-cell:hover .ck-viz--bars i:nth-child(5){transition-delay:.24s}
/* the lead cell: a blurred ground with a white card floating on it */
.ck-cell--lead{
  grid-column:span 2;grid-row:span 2;
  padding:clamp(18px,2.2vw,30px);border:0;
  background:#08183a;
  align-items:center;justify-content:center;
  box-shadow:0 26px 60px -34px rgba(8,24,58,.9);
}
.ck-cell--lead::before{z-index:3}
.ck-lead-bg{
  position:absolute;inset:0;z-index:0;
  background:url("../img/icc-ground.webp") center 32%/cover no-repeat;
  transform:scale(1.06);transition:transform 1.1s var(--ease);
}
.ck-cell--lead:hover .ck-lead-bg{transform:scale(1.12)}
.ck-lead-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,12,32,.3),rgba(4,12,32,.12) 42%,rgba(4,12,32,.4));
}
.ck-lead-card{
  position:relative;z-index:2;width:min(100%,410px);
  padding:clamp(20px,2.2vw,28px);border-radius:clamp(18px,2vw,26px);
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 34px 70px -26px rgba(4,12,32,.6),inset 0 1px 0 #fff;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.ck-cell--lead:hover .ck-lead-card{transform:translateY(-5px);box-shadow:0 44px 84px -26px rgba(4,12,32,.7)}
.ck-lead-hd{display:flex;align-items:center;gap:11px}
.ck-lead-ic{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:linear-gradient(158deg,var(--acc-2),var(--acc));
  box-shadow:0 10px 20px -10px rgba(0,71,187,.7);
}
.ck-lead-ic svg{width:16px;height:16px;color:#fff}
.ck-lead-hd b{font-size:15px;font-weight:700;letter-spacing:-.026em;color:var(--ink)}
.ck-lead-tag{
  margin-left:auto;padding:5px 12px;border-radius:70px;
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
}
.ck-lead-big{display:flex;align-items:baseline;gap:9px;margin-top:18px}
.ck-lead-big b{font-size:clamp(40px,4.6vw,58px);font-weight:800;letter-spacing:-.05em;line-height:.9;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ck-lead-big em{font-style:normal;font-size:13px;font-weight:700;color:#7a8aa4}
.ck-lead-card > p{margin-top:12px;font-size:13.4px;line-height:1.66;color:#5a6a83}
/* a run-rate line over a dotted grid, the way a scorecard plots it */
.ck-spark{
  position:relative;display:block;height:86px;margin-top:18px;border-radius:10px;overflow:hidden;
  background-image:radial-gradient(rgba(20,44,96,.16) 1px,transparent 1px);
  background-size:9px 9px;background-position:2px 2px;
}
.ck-spark svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ck-spark .ghost{fill:none;stroke:rgba(20,44,96,.2);stroke-width:2;stroke-linecap:round}
.ck-spark .live{
  fill:none;stroke:url(#ckSpark);stroke-width:3.4;stroke-linecap:round;
  stroke-dasharray:400;stroke-dashoffset:400;
}
.ck-spark.is-drawn .live{transition:stroke-dashoffset 1.5s var(--ease);stroke-dashoffset:0}
.ck-spark i{
  position:absolute;left:63%;top:76%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;
  border-radius:50%;background:var(--acc);box-shadow:0 0 0 3px rgba(42,114,255,.22);
  opacity:0;transform:scale(.4);transition:opacity .4s .9s,transform .5s .9s var(--ease);
}
.ck-spark.is-drawn i{opacity:1;transform:scale(1)}
.ck-lead-stats{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:clamp(14px,2vw,26px);margin-top:18px}
.ck-lead-stats span{display:flex;flex-direction:column;gap:5px}
.ck-lead-stats span::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--acc-2);
}
.ck-lead-stats b{font-size:clamp(17px,1.9vw,22px);font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.ck-lead-stats em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#7a8aa4}
/* ---------------- the schedule ---------------- */
/* ---------------- why it matters ---------------- */
/* ---------------- a word from our CEO ---------------- */
.ck-ceo{position:relative;overflow:hidden;background:linear-gradient(180deg,#f2f6fc,#fff)}
.ck-ceo::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,var(--seam) 0 9px,transparent 9px 18px);opacity:.34;
}
.ck-ceo-in{position:relative;max-width:900px;margin-inline:auto;text-align:center}
.ck-ceo .ck-eyebrow{color:var(--acc)}
.ck-ceo-mark{
  display:block;margin:18px auto -6px;font:700 104px/.72 Georgia,"Times New Roman",serif;
  color:transparent;background:linear-gradient(180deg,var(--acc-2),rgba(0,71,187,.42));
  -webkit-background-clip:text;background-clip:text;
}
.ck-ceo-in blockquote{
  margin-top:18px;font-size:clamp(18px,2.5vw,30px);font-weight:500;line-height:1.5;
  letter-spacing:-.03em;color:var(--ink);
}
.ck-ceo-by{
  display:inline-flex;align-items:center;gap:16px;margin-top:clamp(26px,3vw,38px);
  padding:10px 22px 10px 10px;border-radius:70px;
  background:rgba(255,255,255,.9);border:1px solid rgba(20,44,96,.09);
  box-shadow:0 16px 36px -22px rgba(20,44,96,.34);
}
.ck-ceo-face{
  position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;
  background:#0b1018;box-shadow:0 0 0 2px rgba(42,114,255,.34);
}
.ck-ceo-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:44% 20%;display:block}
.ck-ceo-who{display:flex;flex-direction:column;gap:3px;text-align:left}
.ck-ceo-who b{font-size:14.5px;font-weight:700;letter-spacing:-.024em;color:var(--ink)}
.ck-ceo-who em{font-style:normal;font-size:11.5px;color:#7a8aa4}
.ck-ceo-rules{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:clamp(24px,3vw,34px)}
.ck-ceo-rules i{width:min(120px,22vw);height:1px;background:linear-gradient(90deg,transparent,rgba(20,44,96,.22),transparent)}
.ck-ceo-rules span{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#8496b0}
/* ---------------- responsive ---------------- */
@media (max-width:1080px){.ck-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
.ck-cell--lead{grid-column:span 2;grid-row:span 1}}
@media (max-width:720px){.ck-hero{min-height:0;padding-bottom:80px}
.ck-bento{grid-template-columns:1fr}
.ck-cell--lead{grid-column:span 1}
.ck-lead-stats{gap:14px 20px}}
/* ---------------- Asia Cup: the gallery ---------------- */
/* =================================================================
   PFL ROAD TO DUBAI CHAMPIONS SERIES
   Light throughout bar the banner. The two gradient panels are the
   STAR Copy pair — blue and sand. The corner is a dial, not a grid of
   cards. Scoped to .flx.
   ================================================================= */
/* ---------------- banner ---------------- */
/* ---------------- the two panels: the cage and the market ---------------- */
/* ---------------- the corner: a dial, not a grid ---------------- */
/* ---------------- what it means: a staggered strip ---------------- */
/* ---------------- a word from our CEO, as on the cricket pages ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   MENA INVESTMENT CONGRESS 2025
   A forum, not a fixture: the banner sets the artwork beside the words,
   the beliefs read as a ledger rather than a grid of cards, and the
   figures count themselves up. Scoped to .mnx.
   ================================================================= */
/* ---------------- banner: one plate, the words on the left ---------------- */
/* ---------------- the beliefs, as a ledger ---------------- */
/* ---------------- about the congress ---------------- */
/* ---------------- a word from our CEO ---------------- */
/* ---------------- responsive ---------------- */
/* =================================================================
   PROMOTIONS
   Light and glassy. The offers are coupons — notched, perforated, with
   a stub that carries the reward — on the brand's blue and sand
   gradients. Scoped to .prx.
   ================================================================= */
.prx{--acc:#0047bb;--acc-2:#2a72ff;--acc-3:#7fb2ff;--mint:#16e9d7;
     --sand:#dfc5ae;--sand-ink:#8a6440;--ink:#04060d}
/* ---------------- banner: the video plays light ---------------- */
.pm-hero{
  position:relative;isolation:isolate;overflow:hidden;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(760px,calc(100vh - var(--topbar-h,44px)));
  display:flex;align-items:center;padding:calc(var(--nav-h) + 62px) 0 78px;
  background:#eef2f8;
}
.pm-hero-video{
  position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;display:block;
}
.pm-hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:
    linear-gradient(90deg,rgba(244,247,252,.96) 0%,rgba(244,247,252,.86) 34%,rgba(244,247,252,.4) 58%,transparent 80%),
    linear-gradient(180deg,rgba(244,247,252,.7),transparent 26%,rgba(238,242,248,.62));
}
.pm-hero-in{position:relative;z-index:1;width:100%}
.pm-hero-copy{max-width:min(100%,700px)}
.pm-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}
/* two lines: the type gives way rather than wrapping */
.pm-h1{margin-top:18px;font-size:clamp(31px,3.9vw,55px);font-weight:800;letter-spacing:-.05em;line-height:1.12;color:var(--ink)}
.pm-h1 span:first-child{white-space:nowrap}
.pm-h1 span{display:block}
.pm-h1 .lit{
  display:inline-block;padding-bottom:.08em;color:transparent;
  background:linear-gradient(96deg,var(--acc) 6%,var(--acc-2) 52%,#12b9ad 96%);
  -webkit-background-clip:text;background-clip:text;
}
.pm-lead{margin-top:20px;max-width:50ch;font-size:clamp(15px,1.5vw,17px);line-height:1.72;color:#4d5c74}
.pm-hact{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.pm-btn{
  display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:70px;white-space:nowrap;
  font-size:13.5px;font-weight:700;color:#fff;
  background:linear-gradient(180deg,var(--acc-2),var(--acc));
  box-shadow:0 18px 38px -16px rgba(0,71,187,.65);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.pm-btn:hover{transform:translateY(-3px);box-shadow:0 26px 48px -16px rgba(42,114,255,.75)}
.pm-btn svg{width:15px;height:15px;flex:none}
/* shared headings */
.pm-eyebrow-c{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);text-align:center}
.pm-h2{margin-top:16px;font-size:clamp(28px,3.7vw,50px);font-weight:800;letter-spacing:-.042em;line-height:1.06;text-align:center;color:var(--ink)}
.pm-sub{margin:18px auto 0;max-width:62ch;font-size:clamp(14.5px,1.45vw,16.5px);line-height:1.7;text-align:center;color:#4d5c74}
/* ---------------- the offers, as coupons ---------------- */
/* ---------------- the sign-off band ---------------- */
/* ---------------- how a claim works ---------------- */
/* ---------------- responsive ---------------- */
@media (max-width:760px){.pm-h1 span:first-child{white-space:normal}}
@media (max-width:640px){.pm-hero{min-height:0;padding-bottom:56px}
.pm-hero::before{
    background:
      linear-gradient(180deg,rgba(244,247,252,.94) 0%,rgba(244,247,252,.8) 48%,rgba(244,247,252,.5) 100%);
  }}
/* =================================================================
   DEPOSIT BONUS / SWITCH REWARDS
   Shares the promotions palette. The two rewards sit on the blue and
   sand gradients, and the estimator does the arithmetic in front of you.
   Scoped to .dbx.
   ================================================================= */
/* ---------------- why switch ---------------- */
/* ---------------- the two rewards ---------------- */
/* ---------------- the estimator ---------------- */
/* ---------------- how to switch ---------------- */
/* ---------------- the account form ---------------- */
/* ---------------- open an account: its own section ---------------- */
/* @media (max-width:1000px){.ct-form-card[data-db-form]{max-width:560px;margin-inline:auto;width:100%}} */
/* ---------------- responsive ---------------- */
/* =================================================================
   DEPOSIT BONUS 50/20
   Shares the promotions palette and its coupon language. The two tiers
   carry their percentage as the artwork; the estimator does the sums.
   ================================================================= */
/* ---------------- the estimator ---------------- */
/* ---------------- how to get it ---------------- */
/* =================================================================
   VPS
   Promotions palette. Six reasons on glass, the two reimbursement tiers
   as the centrepiece with a checker, then the house case as a hairline
   list. Scoped with the .prx page class.
   ================================================================= */
/* ---------------- the reimbursement tiers ---------------- */
/* =================================================================
   POINT MALL
   Promotions palette. The rewards read as a bento: one lead cell that
   states the deal, four category tiles filling the rest exactly.
   ================================================================= */
/* ---------------- how it works ---------------- */
/* =================================================================
   KNOWLEDGE ARTICLE
   The article furniture is the shared ar-* system; only the sign-up
   block and two body details are new.
   ================================================================= */
/* the body has no h3 rhythm of its own, so give the sub-headings room */
.ar-body h3{margin-top:26px;font-size:clamp(17px,1.9vw,20px);font-weight:700;
  letter-spacing:-.03em;line-height:1.3;color:var(--ink)}
.ar-body h3+p,.ar-body h3+.an-tablewrap{margin-top:12px}
/* tables sit in the body with the same rhythm as paragraphs */
.ar-body .an-tablewrap{margin:22px 0}
.ar-body .faq-list{margin-top:18px}
/* ---- guide cards: the same card the news index uses ---- */
.kc-guide{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.kc-guide:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.kc-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.kc-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.kc-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
/* each product keeps its own accent on the icon */
.kc-cat.commodities svg{color:#c9862f}
.kc-cat.indices svg{color:#0f9d7a}
.kc-cat.shares svg{color:#7b5cd6}
.kc-cat.crypto svg{color:#e08a1e}
.kc-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.kc-body{display:flex;flex-direction:column;padding:17px 18px 19px}
.kc-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.kc-h a{transition:color .25s}
.kc-guide:hover .kc-h a{color:var(--blue)}
.kc-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.kc-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute)}
/* the plate sits flush to the card's lower edge, corners clipped by the card */
.kc-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.kc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.kc-guide:hover .kc-media img{transform:scale(1.05)}
.kc-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.kc-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.kc-readmark svg{width:15px;height:15px}
.kc-guide:hover .kc-readmark{transform:translate(2px,-2px);background:#fff}
/* every card is the same shape, so the plates line up across a row */
.kc-guide{height:100%}
.kc-body{flex:1}
/* ---- report cards: the same card the news index uses ---- */
/* ---- event page: the four stills inside the body ---- */
/* ---- coverage page: the outlet run inside the body, and clickable clippings ---- */
/* ---- footer brand line ---- */
.foot-brand{display:inline-flex;align-items:center;gap:clamp(12px,1.6vw,20px);min-width:0;flex-wrap:wrap}
.foot-tag{
  font-family:'Zodiak',Georgia,'Times New Roman',serif;
  font-size:clamp(13px,1.35vw,16px);font-weight:400;font-style:normal;
  letter-spacing:.01em;line-height:1.25;color:#DAE3ED;opacity:.4;
}
@media (max-width:640px){.foot-tag{flex-basis:100%}}
/* the intro panel and the steps list share a row, so they share a height */
.htrade>div{display:flex;min-width:0}
.htrade>div>.htrade-steps{flex:1}
/* =================================================================
   MT4 vs MT5 — the comparison dialog
   Dark and glassy: a lit edge, two gradient wells behind the card, and a
   blurred backdrop. Native <dialog>, so Escape and the backdrop are free.
   ================================================================= */
.cmp{
  width:min(940px,calc(100vw - 32px));max-height:min(88vh,900px);
  margin:auto;inset:0;
  padding:0;border:0;border-radius:clamp(18px,2.2vw,26px);background:none;overflow:visible;
  color:#eaf0fa;
}
.cmp::backdrop{background:rgba(2,5,12,.72);backdrop-filter:blur(8px) saturate(1.1)}
.cmp[open]{animation:cmpIn .34s var(--ease)}
@keyframes cmpIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cmp[open]{animation:none}}
.cmp-card{
  position:relative;max-height:inherit;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(22px,2.6vw,34px);border-radius:inherit;
  /* two wells of light behind the glass, one blue and one teal */
  background:
    radial-gradient(58% 46% at 12% 0%,rgba(42,114,255,.28),transparent 62%),
    radial-gradient(46% 40% at 92% 8%,rgba(22,233,215,.16),transparent 64%),
    linear-gradient(180deg,rgba(16,24,44,.86),rgba(8,12,24,.92));
  -webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.14);
}
/* a lit hairline across the top edge of the glass */
.cmp-card::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(127,178,255,.9),rgba(22,233,215,.7),transparent);
}
.cmp-x{
  position:sticky;top:0;float:right;z-index:2;margin:-4px -4px 0 0;
  display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#cfe0ff;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:background .3s,color .3s,transform .3s var(--ease),border-color .3s;
}
.cmp-x:hover{background:rgba(42,114,255,.85);border-color:transparent;color:#fff;transform:rotate(90deg)}
.cmp-x svg{width:15px;height:15px}
.cmp-head{text-align:center;max-width:56ch;margin-inline:auto}
.cmp-eyebrow{display:block;font-size:10.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:#7fb2ff}
.cmp-h{margin-top:12px;font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.042em;
  line-height:1.08;color:#fff}
.cmp-sub{margin-top:12px;font-size:14.5px;line-height:1.7;color:#a9bcd8}
.cmp-tablewrap{
  margin-top:clamp(22px,2.6vw,32px);overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:16px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.cmp-table{
  width:100%;min-width:560px;border-collapse:separate;border-spacing:0;font-size:13.5px;
}
.cmp-table th,.cmp-table td{
  padding:11px 15px;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);
}
.cmp-table th:last-child,.cmp-table td:last-child{border-right:0}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table thead th{background:rgba(255,255,255,.06);padding:14px 15px}
.cmp-table tbody th{width:34%;font-weight:700;color:#e4ecf8;background:rgba(255,255,255,.025)}
.cmp-table td{color:#9fb2ce}
/* the column for the page you are on is lit */
.cmp-table td.is-current{
  color:#fff;font-weight:600;
  background:linear-gradient(180deg,rgba(42,114,255,.16),rgba(42,114,255,.07));
}
.cmp-flag{
  display:inline-flex;flex-direction:column;gap:3px;
  font-size:14px;font-weight:800;letter-spacing:-.02em;color:#e4ecf8;
}
.cmp-flag em{font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#16e9d7}
.cmp-flag.is-current{color:#fff}
.cmp-note{margin-top:clamp(18px,2.2vw,26px);font-size:13px;line-height:1.7;color:#8ea4c6}
.cmp-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}
/* the dialog is dark, so its buttons cannot inherit the page's light ones */
.cmp-act .btn-primary{background:linear-gradient(180deg,#2a72ff,#0047bb);color:#fff;border:0;
  box-shadow:0 18px 38px -16px rgba(0,71,187,.9)}
.cmp-act .btn-primary:hover{background:linear-gradient(180deg,#4f9bff,#0a53d0)}
.cmp-act .btn-ghost{background:rgba(255,255,255,.08);color:#eaf0fa;
  border:1px solid rgba(255,255,255,.2)}
.cmp-act .btn-ghost:hover{background:rgba(255,255,255,.15);color:#fff}
/* the rail's last card is a button now: reset the control, but never its size —
   .mt-rail-card already sets width and min-height for the track */
button.mt-rail-card{
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
@media (max-width:640px){.cmp-card{padding:20px 14px}
.cmp-act .btn{width:100%;justify-content:center}}
/* =============================================================
   SWIPER MARQUEE RAILS (appended batch — plugin migration)
   Rails keep their page classes for the skin; Swiper owns layout.
   The wrapper's own gap is zeroed because Swiper applies the gap
   as spaceBetween margins; the linear timing keeps the marquee
   gliding instead of easing between slides.
   ============================================================= */
.st-marquee{overflow:hidden}
.st-marquee .swiper-wrapper{width:auto;gap:0;transition-timing-function:linear;will-change:transform}
/* slides keep the width their own card class declares; only the ticker's
   bare spans need auto width because the bundle defaults slides to 100% */
.st-marquee .swiper-slide{flex-shrink:0}
.nb-ticker-track .swiper-slide,.nb-ticker-track.swiper-wrapper span{width:auto}

/* =============================================================
   AOS REVEALS (appended batch — plugin migration)
   ============================================================= */
/* no-JS / reduced-motion safety: content is never left hidden */
html:not(.js-aos) [data-aos]{opacity:1 !important;transform:none !important;transition:none !important}
/* the house reveal travels 28px, not AOS's default 100px */
[data-aos="fade-up"]{transform:translate3d(0,28px,0)}

/* =============================================================
   MARKET ANALYSIS FAMILY (appended batch — analysis cadence pages)
   Shared by market-analysis.html and the four cadence pages:
   daily-technical, daily-fundamental, weekly, monthly.
   ============================================================= */
/* =================== MARKET ANALYSIS =================== */
.ma-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  min-height:min(660px,calc(100vh - var(--topbar-h,44px)));
  display:flex;flex-direction:column;justify-content:center;
  padding:calc(var(--nav-h) + 56px) 0 24px;
  background:
    radial-gradient(80% 74% at 76% 16%,rgba(0,71,187,.34),transparent 62%),
    radial-gradient(54% 58% at 4% 92%,rgba(22,233,215,.1),transparent 62%),
    linear-gradient(180deg,#04060e 0%,#070c1c 50%,#04060e 100%);
}
.ma-hero-aura{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(90px)}
.ma-hero-aura.a1{width:560px;height:560px;top:-18%;right:2%;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 68%)}
.ma-hero-aura.a2{width:440px;height:440px;bottom:-14%;left:-6%;background:radial-gradient(circle,rgba(22,233,215,.16),transparent 68%)}
.ma-hero-in{position:relative;z-index:1;width:100%}
.ma-hero-copy{max-width:720px;min-width:0}
.ma-h1{font-size:clamp(30px,4.2vw,50px);font-weight:800;letter-spacing:-.036em;line-height:1.1;margin-top:16px}
.ma-lead{margin-top:20px;font-size:clamp(15px,1.6vw,17.5px);line-height:1.68;color:#c2cfe4;max-width:62ch}
.ma-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}

/* ---- reports ---- */
.ma-reports{background:#fff}
.ma-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px;border-radius:20px;margin-bottom:22px}
.ma-search{position:relative;flex:1 1 260px;display:flex;align-items:center}
.ma-search-ic{position:absolute;left:14px;width:17px;height:17px;color:var(--text-mute);pointer-events:none}
.ma-search-ic svg{width:100%;height:100%}
.ma-search input{
  width:100%;height:44px;padding:0 40px 0 40px;border-radius:70px;
  background:#fff;border:1px solid var(--line);font:inherit;font-size:14px;color:var(--text);
  transition:border-color .25s,box-shadow .25s;
}
.ma-search input::placeholder{color:var(--text-mute)}
.ma-search input:focus{outline:none;border-color:rgba(0,71,187,.42);box-shadow:0 0 0 4px rgba(0,71,187,.1)}
.ma-clear{position:absolute;right:12px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--text-mute);background:rgba(20,44,96,.07)}
.ma-clear svg{width:12px;height:12px}
.ma-clear:hover{color:var(--text);background:rgba(20,44,96,.13)}
.ma-cats{display:flex;flex-wrap:wrap;gap:8px}
.ma-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ma-rep mark{background:rgba(255,214,102,.5);color:inherit;border-radius:3px;padding:0 2px}
.ma-empty{
  max-width:520px;margin:12px auto 0;text-align:center;padding:44px 30px;border-radius:22px;
  background:var(--bg-light);border:1px dashed var(--line);
}
.ma-empty-ic{width:52px;height:52px;margin:0 auto 16px;border-radius:16px;display:grid;place-items:center;background:rgba(0,71,187,.08);color:var(--blue)}
.ma-empty-ic svg{width:24px;height:24px}
.ma-empty h3{font-size:19px;letter-spacing:-.022em}
.ma-empty p{margin:10px 0 20px;font-size:14px;color:var(--text-soft);line-height:1.6}
.ma-morerow{display:flex;justify-content:center;margin-top:34px}

/* ---- subscribe ---- */
.ma-sub{background:#fff}
.ma-sub-panel{
  position:relative;overflow:hidden;border-radius:28px;color:#fff;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.88fr);gap:clamp(26px,3.4vw,52px);align-items:center;
  padding:clamp(32px,4vw,54px);
  background:radial-gradient(74% 84% at 88% 6%,rgba(0,71,187,.46),transparent 62%),linear-gradient(152deg,#0b1224,#050914 56%,#04060e);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 46px 100px -50px rgba(0,20,70,.82),inset 0 1px 0 rgba(255,255,255,.13);
}
.ma-sub-aura{position:absolute;z-index:0;width:460px;height:460px;top:-38%;right:4%;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(0,110,255,.36),transparent 66%);filter:blur(60px)}
.ma-sub-copy,.ma-sub-form{position:relative;z-index:1;min-width:0}
.ma-sub-copy h2{font-size:clamp(24px,2.7vw,34px);letter-spacing:-.032em;line-height:1.16}
.ma-sub-copy>p{margin-top:14px;font-size:14.5px;line-height:1.66;color:#a9bcdb;max-width:46ch}
.ma-sub-pts{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.ma-sub-pts li{display:flex;align-items:center;gap:9px;font-size:13px;color:#c2cfe4}
.ma-sub-pts svg{width:14px;height:14px;flex:none;color:#3fd9a8}
.ma-sub-field{display:flex;gap:10px;flex-wrap:wrap}
.ma-sub-field input{
  flex:1 1 200px;height:52px;padding:0 18px;border-radius:14px;font:inherit;font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.ma-sub-field input::placeholder{color:#7f92b3}
.ma-sub-field input:focus{outline:none;background:rgba(255,255,255,.11);border-color:rgba(120,175,255,.6);box-shadow:0 0 0 4px rgba(0,71,187,.24)}
.ma-sub-field .btn{height:52px;border-radius:14px;padding-inline:24px}
.ma-sub-note{margin-top:14px;font-size:11.5px;line-height:1.5;color:#7f92b3}
.ma-sub-note.is-ok{color:#3fd9a8}
.ma-sub-note.is-err{color:#ff8078}

/* ---- report cards: the same card the news index uses ---- */
.ma-rep{
  display:flex;flex-direction:column;overflow:hidden;border-radius:20px;height:100%;padding:0;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.ma-rep:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);
  box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.ma-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.ma-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.ma-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.ma-cat.fa svg{color:#0f9d76}
.ma-cat.wk svg{color:#a2650a}
.ma-cat.mo svg{color:#6d3fd9}
.ma-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.ma-body{display:flex;flex-direction:column;flex:1;padding:17px 18px 19px}
.ma-h{font-size:17px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.ma-h a{transition:color .25s}
.ma-rep:hover .ma-h a{color:var(--blue)}
.ma-ex{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ma-read{margin-top:11px;font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-mute)}
.ma-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.ma-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.ma-rep:hover .ma-media img{transform:scale(1.05)}
.ma-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.06) 0%,rgba(4,8,18,.04) 46%,rgba(4,8,18,.34) 100%)}
.ma-readmark{
  position:absolute;left:12px;bottom:12px;z-index:2;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--blue);
  box-shadow:0 10px 22px -10px rgba(20,44,96,.55);
  transition:transform .35s var(--ease),background .3s;
}
.ma-readmark svg{width:15px;height:15px}
.ma-rep:hover .ma-readmark{transform:translate(2px,-2px);background:#fff}
.ma-rep mark{background:rgba(255,214,102,.5);color:inherit;border-radius:3px;padding:0 2px}
  
/* ---- family responsive ---- */
@media (max-width:1080px){
.ma-hero-copy{max-width:none}
.ma-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.ma-sub-panel{grid-template-columns:1fr;gap:30px}
}
@media (max-width:860px){
.ma-hero{min-height:auto;padding:calc(var(--nav-h) + 40px) 0 54px}
.ma-bar{padding:12px}
}
@media (max-width:720px){
.ma-hact .btn{width:100%;justify-content:center}
.ma-sub-field .btn{flex:1 1 100%}
}
@media (max-width:520px){
.ma-cats{width:100%}
}

/* =============================================================
   EVENTS FAMILY (appended batch — expo page)
   Shared by events.html and expo.html: the gallery rail and the
   tinted section shells.
   ============================================================= */
/* =================================================================
   EVENTS — a stage gallery, and the shared kinds/band pattern
   ================================================================= */
.ev-sec{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 50% -6%,rgba(0,71,187,.07),transparent 62%),var(--bg-light-2)}
.ev-sec>.container{position:relative;z-index:1}
/* ---- gallery: a full-bleed editorial rail, captions under the frame ---- */
.ev-gal-sec{position:relative;overflow:clip;background:var(--bg-light-2)}
.ev-gal-sec>.container{position:relative;z-index:1}
.ev-rail{
  position:relative;width:100vw;margin-left:calc(-50vw + 50%);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  cursor:grab;overscroll-behavior-x:contain;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.ev-rail::-webkit-scrollbar{display:none}
.ev-rail.dragging{cursor:grabbing}
.ev-track{display:flex;gap:clamp(18px,2.4vw,32px);width:max-content;padding:6px max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
.ev-frame{flex:0 0 clamp(240px,25vw,340px)}
.ev-shot{
  position:relative;display:block;overflow:hidden;border-radius:20px;aspect-ratio:4/5;
  background:rgba(20,44,96,.05);
  box-shadow:0 24px 50px -30px rgba(20,44,96,.36);
  transition:transform .55s var(--ease),box-shadow .55s var(--ease);
}
.ev-shot img{
  position:absolute;top:0;left:0;width:112%;height:100%;object-fit:cover;
  transform:translate3d(calc(var(--px,.5) * -10.7%),0,0);
  will-change:transform;
}
.ev-frame:hover .ev-shot{transform:translateY(-6px);box-shadow:0 34px 64px -30px rgba(20,44,96,.5)}
.ev-cap{margin-top:18px}
.ev-cap b{display:block;font-size:15.5px;letter-spacing:-.026em;line-height:1.34;color:var(--text)}
.ev-cap em{display:block;margin-top:6px;font-style:normal;font-size:13px;line-height:1.6;color:var(--text-soft)}
.ev-progress{display:block;width:min(320px,54vw);height:2px;margin:40px auto 0;border-radius:2px;background:var(--line);overflow:hidden}
.ev-progress i{display:block;height:100%;width:22%;border-radius:2px;background:var(--blue);transform-origin:left;transition:transform .25s linear}
.ev-hint{margin-top:16px;text-align:center;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-mute)}
@media (max-width:720px){.ev-frame{flex:0 0 clamp(210px,62vw,270px)}
.ev-cap b{font-size:14.5px}}

/* =============================================================
   CT-CHECK CHECKED STATE (appended batch — banner account form)
   The an-box never showed its tick anywhere on the site; now every
   ct-check (contact, partnership, promo forms) fills blue when
   checked, radios draw round, and keyboard focus is visible.
   ============================================================= */
/* .ct-check input:checked + .an-box{background:var(--blue);border-color:var(--blue);color:#fff}
.ct-check input:focus-visible + .an-box{outline:2px solid var(--blue);outline-offset:2px}
.ct-check input[type="radio"] + .an-box{border-radius:50%}
.ct-check:hover .an-box{border-color:rgba(0,71,187,.45)} */

/* =============================================================
   KNOWLEDGE FAMILY HERO (appended batch — knowledge-basics page)
   Shared by knowledge.html and knowledge-basics.html.
   ============================================================= */
.kc-hero{
  position:relative;overflow:hidden;isolation:isolate;color:#fff;
  margin-top:calc(-1 * var(--nav-h));
  display:flex;align-items:center;
  min-height:min(660px,calc(100vh - var(--topbar-h,44px)));
  padding:calc(var(--nav-h) + 56px) 0 60px;
  background:
    radial-gradient(72% 68% at 50% 6%,rgba(0,71,187,.36),transparent 62%),
    radial-gradient(48% 52% at 8% 96%,rgba(22,233,215,.11),transparent 62%),
    linear-gradient(180deg,#04060e 0%,#070c1c 48%,#04060e 100%);
}
.kc-hero-aura{position:absolute;z-index:-1;border-radius:50%;pointer-events:none;filter:blur(96px)}
.kc-hero-aura.a1{width:600px;height:600px;top:-20%;right:2%;background:radial-gradient(circle,rgba(0,110,255,.34),transparent 68%)}
.kc-hero-aura.a2{width:440px;height:440px;bottom:-22%;right:-6%;background:radial-gradient(circle,rgba(22,233,215,.16),transparent 68%)}
.kc-hero-in{position:relative;z-index:1;width:100%}
.kc-hero-copy{max-width:720px;min-width:0}
.kc-h1{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.038em;line-height:1.06;margin-top:16px}
.kc-lead{margin-top:20px;max-width:64ch;font-size:clamp(15px,1.5vw,17px);line-height:1.68;color:#c2cfe4}
.kc-hact{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
@media (max-width:1080px){
.kc-hero-copy{max-width:none}
}
@media (max-width:860px){
.kc-hero{min-height:auto;padding:calc(var(--nav-h) + 44px) 0 56px}
}
@media (max-width:720px){
.kc-hact .btn{width:100%;justify-content:center}
.kc-h1 br,.kc-lead br,.kc-path .head-sub br{display:none}
}
.kc-guides{background:#fff}

/* the more-row must wrap when it carries two buttons (350px floor) */
.ma-morerow{flex-wrap:wrap;gap:12px}

/* =============================================================
   KNOWLEDGE VIDEO CARDS (appended batch — knowledge-videos page)
   The feature tile and play chip, shared by the centre's theatre
   and the full video library.
   ============================================================= */
.kc-feature{display:flex}
.kc-feature-media{
  position:relative;display:block;width:100%;border-radius:22px;overflow:hidden;aspect-ratio:16/9;
  box-shadow:0 34px 70px -38px rgba(20,44,96,.55);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.kc-feature-media:hover{transform:translateY(-4px);box-shadow:0 44px 84px -40px rgba(20,44,96,.62)}
.kc-playlist{justify-content:flex-start}
.kc-feature-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.kc-feature-media:hover img{transform:scale(1.05)}
.kc-feature-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,6,14,.1) 0%,rgba(4,6,14,.28) 46%,rgba(4,6,14,.88) 100%)}
.kc-feature-meta{position:absolute;top:18px;left:18px;right:18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.kc-feature-chip{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#fff;background:rgba(0,71,187,.86);padding:6px 12px;border-radius:70px}
.kc-feature-dur{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#fff;background:rgba(4,6,14,.62);padding:6px 11px;border-radius:70px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-variant-numeric:tabular-nums}
.kc-feature-dur svg{width:13px;height:13px}
.kc-feature-copy{position:absolute;left:22px;right:22px;bottom:26px;display:flex;flex-direction:column;gap:7px}
.kc-feature-copy b{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:-.03em;color:#fff;line-height:1.16}
.kc-feature-copy em{font-style:normal;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.78);max-width:46ch}
.kc-feature-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.16)}
.kc-feature-bar i{display:block;height:100%;width:26%;background:linear-gradient(90deg,#4d94ff,#16e9d7);transition:width .7s var(--ease)}
.kc-feature-media:hover .kc-feature-bar i{width:62%}
.kc-playlist{display:flex;flex-direction:column;gap:8px;padding:18px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px -24px rgba(20,44,96,.26)}
.kc-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--blue);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
  transition:transform .45s var(--ease),background .35s;
}
.kc-play svg{width:24px;height:24px;margin-left:3px}
.kc-feature-media:hover .kc-play{transform:translate(-50%,-50%) scale(1.1);background:#fff}
@media (prefers-reduced-motion:no-preference){
.kc-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:kcPing 2.8s ease-out infinite}
}

/* =============================================================
   NEWS SPOTLIGHT CARDS (appended batch — spotlight page)
   The dark glass appearance cards, shared by the news room and
   the full spotlight archive.
   ============================================================= */
.nr-meta--light{color:#93a4c2}
.nr-spot{
  position:relative;color:#fff;
  background:
    radial-gradient(80% 60% at 12% 0%,rgba(0,44,130,.42),transparent 62%),
    linear-gradient(180deg,#04060e,#080b16 58%,#04060e);
}
.nr-spot-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.nr-spot-all{color:#9fc0ff}
.nr-spot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.nr-spot-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.024));
  -webkit-backdrop-filter:blur(20px) saturate(1.4);backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid rgba(255,255,255,.11);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.nr-spot-card:hover{transform:translateY(-4px);border-color:rgba(90,150,255,.42);box-shadow:0 30px 64px -34px rgba(0,60,180,.6)}
.nr-spot-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden}
.nr-spot-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.nr-spot-card:hover .nr-spot-media img{transform:scale(1.05)}
.nr-spot-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,8,18,.2) 0%,rgba(4,8,18,.05) 40%,rgba(4,8,18,.62) 100%)}
.nr-spot-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 12px 30px -8px rgba(0,0,0,.55);
  transition:transform .35s var(--ease),background .3s;
}
.nr-spot-play svg{width:19px;height:19px;margin-left:3px}
.nr-spot-card:hover .nr-spot-play{transform:scale(1.08);background:#fff}
.nr-spot-body{display:flex;flex-direction:column;padding:18px 20px 22px}
.nr-spot-body h3{margin-top:10px;font-size:17px;letter-spacing:-.02em;line-height:1.3;color:#fff;transition:color .25s}
.nr-spot-card:hover .nr-spot-body h3{color:#bcd6ff}
.nr-spot-body p{margin-top:9px;font-size:13.5px;line-height:1.6;color:#a7b6d0}
@media (max-width:1080px){
.nr-spot-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.nr-spot-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
.nr-spot-head{align-items:flex-start}
}

/* =============================================================
   LEGAL PAGES (appended batch — policy & disclaimer family)
   Dark title band, sticky frosted contents rail with scroll-spy,
   and numbered glass section cards. Shared by privacy-policy-app
   and star-copy-disclaimer.
   ============================================================= */
/* =================================================================
   PRIVACY & SECURITY POLICY — a legal document you can actually read.
   A quiet title band, a sticky frosted contents rail that knows where
   you are, and the policy itself in numbered glass cards.
   ================================================================= */
.pp-top{position:relative;isolation:isolate;overflow:clip;color:#fff;padding:clamp(52px,6.5vw,92px) 0 clamp(36px,4.4vw,56px);
  background:
    radial-gradient(70% 90% at 14% -10%,rgba(0,64,190,.5),transparent 62%),
    radial-gradient(50% 70% at 88% 10%,rgba(22,233,215,.1),transparent 58%),
    linear-gradient(180deg,#04060e,#081020 60%,#04060e)}
.pp-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(90,150,255,.5),rgba(22,233,215,.4),transparent)}
.pp-top>.container{position:relative;z-index:1}
.pp-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:40px;
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#9fc0ff;
  background:rgba(90,150,255,.1);border:1px solid rgba(90,150,255,.24)}
.pp-h1{margin-top:16px;font-size:clamp(28px,3.8vw,48px);font-weight:800;letter-spacing:-.038em;line-height:1.08;color:#fff}
.pp-h1 span{color:#5b9dff}
.pp-meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-size:12.5px;font-weight:600;color:#8ea4c6}
.pp-meta b{color:#cdd9ec;font-weight:700}

.pp-body{position:relative;isolation:isolate;overflow:clip;padding:clamp(30px,4vw,56px) 0 clamp(64px,7vw,100px);
  background:
    radial-gradient(44% 38% at 88% 8%,rgba(0,71,187,.05),transparent 60%),
    radial-gradient(40% 36% at 6% 90%,rgba(22,233,215,.05),transparent 58%),
    var(--bg-light-2)}
.pp-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(22px,3vw,44px);align-items:start}

/* the contents rail */
.pp-toc{position:sticky;top:calc(var(--chrome-h,114px) + 18px);
  border-radius:22px;padding:20px 8px 20px 20px;max-height:calc(100vh - var(--chrome-h,114px) - 40px);overflow:auto;
  background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 24px 54px -36px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.9);
  scrollbar-width:thin}
.pp-toc b{display:block;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--text-mute);margin-bottom:12px}
.pp-toc a{display:flex;gap:9px;align-items:baseline;padding:7px 10px;border-radius:10px;
  font-size:12.5px;line-height:1.4;color:var(--text-soft);transition:background .25s,color .25s}
.pp-toc a em{font-style:normal;font-size:10.5px;font-weight:800;color:var(--text-mute);min-width:16px;transition:color .25s}
.pp-toc a:hover{background:rgba(0,71,187,.05);color:var(--text)}
.pp-toc a.is-on{background:rgba(0,71,187,.09);color:var(--blue);font-weight:600}
.pp-toc a.is-on em{color:var(--blue)}

/* the sections */
.pp-secs{display:grid;gap:clamp(14px,1.8vw,22px)}
.pp-card{border-radius:clamp(18px,2vw,26px);padding:clamp(22px,2.8vw,34px);
  background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.45);backdrop-filter:blur(18px) saturate(1.45);
  box-shadow:0 22px 50px -36px rgba(20,44,96,.3),inset 0 1px 0 rgba(255,255,255,.9);
  scroll-margin-top:calc(var(--chrome-h,114px) + 20px);
  transition:border-color .35s,box-shadow .35s}
.pp-card:target,.pp-card.is-here{border-color:rgba(0,71,187,.28);box-shadow:0 30px 60px -36px rgba(0,60,180,.4),inset 0 1px 0 rgba(255,255,255,.9)}
.pp-card h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(16.5px,1.7vw,20px);letter-spacing:-.022em;line-height:1.3;color:var(--ink)}
.pp-num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:11px;
  font-size:12.5px;font-weight:800;color:var(--blue);
  background:rgba(0,71,187,.08);border:1px solid rgba(0,71,187,.14);transform:translateY(4px)}
.pp-card p{margin-top:12px;font-size:14px;line-height:1.75;color:var(--text-soft)}
.pp-card ul{margin-top:12px;display:grid;gap:8px;padding-left:2px}
.pp-card li{display:flex;gap:10px;font-size:13.5px;line-height:1.65;color:var(--text-soft)}
.pp-card li svg{flex:none;width:14px;height:14px;margin-top:4px;color:var(--blue)}
.pp-card a{color:var(--blue);font-weight:600}

/* contact card stands out a touch */
.pp-card--contact{background:linear-gradient(180deg,rgba(0,71,187,.08),rgba(255,255,255,.7) 55%)}

@media (max-width:980px){
  .pp-grid{grid-template-columns:1fr}
  .pp-toc{position:static;max-height:none;order:-1}
}

/* =============================================================
   STAR PANEL FAN (appended batch — star-matrix page)
   The auto-advancing benefit panels, shared by STAR Copy and
   STAR Matrix.
   ============================================================= */
.sc-fan{display:flex;gap:14px;height:372px}
.sc-panel{
  position:relative;flex:0 0 96px;min-width:96px;overflow:hidden;border-radius:24px;
  background:linear-gradient(180deg,rgba(0,71,187,.09),rgba(255,255,255,.62) 48%);
  transition:flex-grow .62s var(--ease),flex-basis .62s var(--ease),min-width .62s var(--ease),
             box-shadow .42s var(--ease),border-color .3s;
}
.sc-panel:nth-child(even){background:linear-gradient(180deg,rgba(223,197,174,.5),rgba(255,255,255,.62) 50%)}
.sc-panel.is-on{flex:1 1 0;min-width:0;border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.sc-panel.is-on:nth-child(even){border-color:rgba(138,100,64,.34)}
.sc-panel-hit{position:absolute;inset:0;z-index:2;width:100%;font-size:0;color:transparent;padding:0}
.sc-panel-hit:focus-visible{outline:2px solid var(--blue);outline-offset:-4px;border-radius:24px}
.sc-panel-n{
  position:absolute;top:24px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--blue);
  transition:left .55s var(--ease),transform .55s var(--ease);
}
.sc-panel:nth-child(even) .sc-panel-n{color:#8a6440}
.sc-panel.is-on .sc-panel-n{left:28px;transform:none}
.sc-panel-vt{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;white-space:nowrap;
  font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text);
  transition:opacity .3s;
}
.sc-panel.is-on .sc-panel-vt{opacity:0}
.sc-panel-in{
  position:absolute;top:58px;left:28px;right:28px;bottom:30px;min-width:266px;
  display:flex;flex-direction:column;justify-content:flex-end;gap:11px;
  opacity:0;transform:translateY(12px);
  transition:opacity .5s .14s var(--ease),transform .5s .14s var(--ease);
}
.sc-panel.is-on .sc-panel-in{opacity:1;transform:none}
.sc-panel-ico{position:absolute;right:2px;top:42%;transform:translateY(-50%);width:min(38%,166px);height:auto;filter:drop-shadow(0 20px 26px rgba(20,44,96,.24))}
.sc-panel-in b{max-width:26ch;font-size:clamp(19px,1.9vw,23px);letter-spacing:-.03em;line-height:1.2;color:var(--text)}
.sc-panel-in em{max-width:46ch;font-style:normal;font-size:13.5px;line-height:1.68;color:var(--text-soft)}
.sc-panel-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(20,44,96,.07);opacity:0;transition:opacity .3s}
.sc-panel.is-on .sc-panel-bar{opacity:1}
.sc-panel-bar i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:var(--blue)}
.sc-panel:nth-child(even) .sc-panel-bar i{background:#8a6440}
@media (prefers-reduced-motion:no-preference){
.sc-panel.is-on .sc-panel-bar i{animation:scDwell 6.5s linear forwards}
}
.sc-fan:hover .sc-panel.is-on .sc-panel-bar i,.sc-fan:focus-within .sc-panel.is-on .sc-panel-bar i,.sc-fan:not(.is-live) .sc-panel.is-on .sc-panel-bar i{animation-play-state:paused}
@media (max-width:1000px){
.sc-fan{display:grid;grid-template-columns:1fr;height:auto}
.sc-panel,.sc-panel.is-on{flex:auto;min-width:0;padding:26px 24px;box-shadow:0 18px 40px -26px rgba(20,44,96,.32),inset 0 1px 0 rgba(255,255,255,.96)}
.sc-panel-hit,.sc-panel-vt,.sc-panel-bar{display:none}
.sc-panel-n,.sc-panel.is-on .sc-panel-n{position:static;left:auto;transform:none;display:block;margin-bottom:16px}
.sc-panel-in,.sc-panel.is-on .sc-panel-in{position:static;min-width:0;opacity:1;transform:none}
.sc-panel-ico{position:static;top:auto;right:auto;transform:none;width:84px;margin-bottom:6px}
.sc-panel-in b,.sc-panel-in em{max-width:none}
}
/* the fan's light section shell */
.sc-ben{position:relative;isolation:isolate;overflow:clip;background:radial-gradient(52% 44% at 8% 0%,rgba(0,71,187,.08),transparent 62%),var(--bg-light-2)}
.sc-ben>.container{position:relative;z-index:1}

/* =============================================================
   WEBINAR REPLAY CARDS (appended batch — previous-webinars page)
   Shared by webinars.html and the replay archive.
   ============================================================= */
.wb-rep-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wb-rep{
  position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:20px;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .3s;
}
.wb-rep:hover{transform:translateY(-4px);border-color:rgba(0,71,187,.28);box-shadow:0 28px 52px -30px rgba(20,44,96,.5),inset 0 1px 0 #fff}
.wb-rep-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;border-bottom:1px solid rgba(20,40,80,.09);
}
.wb-rep-cat{display:flex;align-items:center;gap:9px;min-width:0;font-size:13px;font-weight:600;color:var(--text)}
.wb-rep-cat svg{width:17px;height:17px;flex:none;color:var(--blue)}
.wb-rep-cat i{width:3px;height:3px;border-radius:50%;background:var(--text-mute);flex:none;margin-inline:1px}
.wb-rep-date{flex:none;font-size:12.5px;color:var(--text-mute);font-variant-numeric:tabular-nums}
.wb-rep-body{padding:17px 18px 19px}
.wb-rep-title{font-size:17.5px;letter-spacing:-.022em;line-height:1.3;color:var(--text)}
.wb-rep-title a{transition:color .25s}
.wb-rep:hover .wb-rep-title a{color:var(--blue)}
.wb-rep-desc{
  margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.wb-rep-media{position:relative;display:block;margin-top:auto;aspect-ratio:16/10;overflow:hidden}
.wb-rep-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wb-rep:hover .wb-rep-media img{transform:scale(1.05)}
.wb-rep-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,8,18,.12) 0%,rgba(4,8,18,.08) 46%,rgba(4,8,18,.5) 100%);
}
.wb-play{
  position:absolute;inset:0;margin:auto;z-index:2;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.94);color:var(--blue);box-shadow:0 12px 30px -8px rgba(0,0,0,.5);
  transition:transform .35s var(--ease),background .3s;
}
.wb-play svg{width:19px;height:19px;margin-left:3px}
.wb-rep:hover .wb-play{transform:scale(1.08);background:#fff}
.wb-dur,.wb-lvl{
  position:absolute;bottom:12px;z-index:2;font-size:11px;font-weight:600;color:#fff;
  padding:5px 11px;border-radius:70px;background:rgba(8,14,26,.56);border:1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wb-dur{left:12px;font-variant-numeric:tabular-nums}
.wb-lvl{right:12px;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.wb-allrow{display:flex;justify-content:center;margin-top:40px}
@media (max-width:1080px){
.wb-rep-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
.wb-rep-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
}
/* the replay archive's light section shell */
.wb-sched{
  background:
    radial-gradient(58% 46% at 6% 0%,rgba(0,71,187,.08),transparent 62%),
    radial-gradient(52% 44% at 96% 16%,rgba(22,233,215,.07),transparent 62%),
    radial-gradient(56% 40% at 48% 104%,rgba(0,71,187,.06),transparent 62%),
    var(--bg-light);
}

/* =============================================================
   MEGA MENU — FULL-LENGTH MINIMAL (appended batch, preview)
   The dropdown becomes one full-width panel under the header:
   flat near-black, text-only columns, no icon chips — headings
   in muted grey, items as plain links aligned to the site grid.
   ============================================================= */
.mega,.mega--center{
  left:0;right:0;top:100%;
  max-width:none;width:auto;
  border-radius:0;
  background:#070a12;
  border-top:1px solid rgba(255,255,255,.06);
  border-left:0;border-right:0;border-bottom:1px solid rgba(255,255,255,.05);
  box-shadow:0 48px 80px -38px rgba(0,0,0,.85);
  padding:40px max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter))) 48px;
  gap:clamp(30px,4.5vw,84px);
  transform:translateY(8px);
}
.mega--center{transform:translateY(8px)}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega,
.nav-item.has-mega:hover .mega--center,.nav-item.has-mega:focus-within .mega--center{transform:translateY(0)}
.mega .mega-ico{display:none}
.mega-col{padding:0}
.mega-head{padding-left:0;margin-bottom:14px;text-transform:none;letter-spacing:.02em;font-size:13px;font-weight:600;color:#8592ad}
.mega-item{gap:0;padding:10px 0;border-radius:0;background:none}
.mega-item:hover,.mega-item:focus-visible{background:none}
.mega-txt b{font-weight:500;font-size:14.5px;color:#e6ebf4;transition:color .2s}
.mega-item:hover .mega-txt b,.mega-item:focus-visible .mega-txt b{color:#5b9dff}
.mega-txt em{display:none}
.mega-subchev{margin-left:6px}
/* the panel must span the header, not the container */
.site-header .nav{position:static}
/* alignment pass: arrows lead from the left, columns tighten, dividers go */
.mega-col+.mega-col{border-left:0}
.mega,.mega--center{gap:clamp(40px,5vw,72px)}
.mega-col{min-width:210px}
.mega-item{align-items:center}
.mega-item .mega-chev,.mega-item .mega-subchev{order:-1;margin:0 10px 0 0;width:14px;height:14px;flex:none;color:#6d7893}
.mega-item:hover .mega-chev{color:#5b9dff;transform:translateX(2px)}
.mega-item .mega-subchev{transform:none}
.mega-item[aria-expanded="true"] .mega-subchev,.mega-sub.is-open .mega-subchev{transform:rotate(90deg);color:#5b9dff}
.mega-subitems{padding-left:24px}
.fly-inner{margin-left:0;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08)}
/* arrows belong to the children: parents keep their indicator beside the
   label, every sub-menu entry leads with a small arrow */
.mega-item .mega-chev,.mega-item .mega-subchev{order:0;margin:0 0 0 8px}
.mega-item:hover .mega-chev{transform:none}
.mega-subitems a,.fly-group a{display:flex;align-items:center}
.mega-subitems a::before,.fly-group a:not(:first-child)::before,.fly-group h5+a::before{content:"›";margin-right:9px;font-weight:600;color:#6d7893;transition:color .2s}
.fly-group a::before{content:"›";margin-right:9px;font-weight:600;color:#6d7893;transition:color .2s}
.fly-group h5 a::before{content:none}
.mega-subitems a:hover::before,.fly-group a:hover::before{color:#5b9dff}
.mega-subitems{padding-left:8px}
/* columns take their natural width — the gap alone does the spacing,
   so the flyout docks right beside its column */
.mega-col{min-width:0}
.mega-flyout .fly-inner{margin-left:0}
/* the column wrapper stays content-sized so the flyout docks beside it,
   and the current page reads as blue text — not a boxed pill */
.mega-main{display:flex;gap:clamp(40px,5vw,72px);flex:0 0 auto}
.mega-item:hover,.mega-item.active,.mega-item.is-current{background:none}
.mega-item.active .mega-txt b,.mega-item.is-current .mega-txt b{color:#5b9dff}
.mega-item.active .mega-chev,.mega-item.is-current .mega-chev{color:#5b9dff}
/* the flyout lays its groups side by side — a third of the height */
.mega.flyout-open .mega-flyout{width:auto;max-width:640px}
.mega-flyout .fly-inner{width:100%;min-width:0}
.mega-flyout [data-fly-panel].is-on{display:flex;gap:clamp(14px,1.6vw,26px);align-items:flex-start}
.mega-flyout .fly-title{flex:none}
.mega-flyout [data-fly-panel].is-on .fly-title{width:100%;margin-bottom:4px}
.mega-flyout [data-fly-panel].is-on{flex-wrap:wrap}
.mega-flyout .fly-group{margin-bottom:0;min-width:118px;flex:1}
/* the navbar and the panel are one surface: same black glass */
.site-header,.site-header.scrolled{
  background:rgba(5,8,15,.82);
  -webkit-backdrop-filter:blur(30px) saturate(1.5);backdrop-filter:blur(30px) saturate(1.5);
  box-shadow:none;border-bottom:1px solid rgba(255,255,255,.05)}
.mega,.mega--center{border-top:0}
/* where the browser cannot blur the backdrop, the glass goes solid */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,.site-header.scrolled{background:rgba(5,8,15,.98)}
}
/* the flyout overlays inside the panel instead of stretching it —
   the menu's height never moves */
.mega-flyout{position:absolute;top:34px;bottom:40px;
  left:calc(max(var(--gutter),(100vw - var(--maxw))/2 + var(--gutter)) + 620px);
  right:max(var(--gutter),calc((100vw - var(--maxw))/2 + var(--gutter)));
  width:auto;overflow:visible;transition:opacity .28s var(--ease);opacity:0;pointer-events:none}
.mega.flyout-open .mega-flyout{width:auto;opacity:1;pointer-events:auto}
.mega-flyout .fly-inner{height:100%;overflow:auto;scrollbar-width:thin}
/* menus crossfade in place — no slide offset, so the panel never
   detaches from the navbar while switching items */
.mega,.mega--center{transform:none}
.nav-item.has-mega:hover .mega,.nav-item.has-mega:focus-within .mega,
.nav-item.has-mega:hover .mega--center,.nav-item.has-mega:focus-within .mega--center{transform:none}
.site-header:has(.nav-item.has-mega:hover){border-bottom-color:transparent}
/* identical solid panels swap instantly — a crossfade only lets the
   page ghost through and reads as a colour shift */
.mega,.mega--center{transition:none}

/* ===== MOBILE HARDENING (appended batch) =====
   Root-level guard: no page may scroll sideways on a phone, whatever an
   individual element does. body already clips; the root now matches. */
html{overflow-x:clip}

/* ===== I18N HARDENING + MOBILE MENU V2 (appended batch) =====
   Dev feedback: fixed-width chrome breaks once EN copy is swapped for
   CN/AR/JP. The 130% width reserve now reaches the disclaimer bar, the
   cookie pill and the top nav; the mobile menu gains the sub-category
   accordion and a language switcher. */
/* 1 — top disclaimer: copy may run long in translation; scale and wrap */
.topbar p{font-size:clamp(10.5px,1.4vw,12.5px);line-height:1.45}
@media (max-width:640px){.topbar .container{padding-block:9px}}

/* 4 — nav: labels never break to a second line; spacing flexes instead */
.nav-menu{gap:clamp(2px,0.6vw,10px)}
.nav-menu .nav-link{white-space:nowrap}
.mega-head{white-space:nowrap}
/* 2 — mobile menu v2: sub-category accordion + language switcher */
.mobile-menu .mm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  background:none;border:0;color:#dbe0ec;font:500 17px/1.3 inherit;font-family:inherit;text-align:left;
  padding:13px 6px;border-radius:10px;cursor:pointer}
.mobile-menu .mm-top:hover{background:rgba(255,255,255,.05)}
.mm-top svg{width:15px;height:15px;flex:0 0 auto;color:#8b97ae;transition:transform .3s var(--ease)}
.mm-acc.open .mm-top svg{transform:rotate(180deg)}
.mm-panel{display:none;padding:0 6px 8px}
.mm-acc.open .mm-panel{display:block}
.mm-group{display:block;margin:12px 0 3px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#5b9dff}
.mobile-menu .mm-panel a{display:block;padding:8px;font-size:14.5px;font-weight:500;color:#c7cddb;border-radius:8px}
.mobile-menu .mm-panel a:hover{background:rgba(255,255,255,.05)}
.mm-lang{margin-top:14px;padding-top:16px;border-top:1px solid rgba(255,255,255,.09)}
.mm-lang b{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#8b97ae;margin-bottom:10px}
.mm-langs{display:flex;flex-wrap:wrap;gap:8px}
.mm-langs button{padding:7px 13px;border-radius:24px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#c7cddb;font:600 12.5px/1 inherit;font-family:inherit;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s}
.mm-langs button:hover{border-color:rgba(255,255,255,.35);color:#fff}
.mm-langs button.is-on{background:var(--blue);border-color:transparent;color:#fff}

/* ===== MOBILE MENU V3 — full-sheet redesign (appended batch) =====
   Modern sheet menu in the capital.com / Rise grammar: logo + close
   header, search that filters the links, oversized drill items with
   right chevrons, pinned pill CTAs and a folded language switcher. */
.mobile-menu{width:min(100vw,470px);padding:18px 22px 30px;display:flex;flex-direction:column}
.mobile-menu nav{flex:1;display:flex;flex-direction:column;gap:2px}
.mm-head-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mm-head-row img{width:150px;height:auto;display:block}
.mm-x{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#e6ecf7;cursor:pointer;
  transition:background .25s,transform .35s var(--ease)}
.mm-x:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}
.mm-x svg{width:16px;height:16px}
.mm-search{position:relative;margin:2px 0 14px}
.mm-search svg{position:absolute;left:15px;top:50%;width:15px;height:15px;margin-top:-7.5px;color:#8b97ae}
.mm-search input{width:100%;padding:13px 16px 13px 41px;border-radius:40px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);
  color:#fff;font:500 14.5px/1.2 inherit;font-family:inherit;outline:none;transition:border-color .25s}
.mm-search input::placeholder{color:#8b97ae}
.mm-search input:focus{border-color:rgba(91,157,255,.55)}
.mobile-menu .mm-top{font-size:clamp(22px,6vw,26px);font-weight:700;letter-spacing:-.022em;
  color:#fff;padding:14px 4px}
.mm-top svg{width:18px;height:18px}
.mm-acc.open .mm-top svg{transform:rotate(90deg)}
.mm-panel{padding:0 4px 12px}
.mobile-menu .mm-panel a{font-size:15px;padding:9px 8px}
.mm-new{display:inline-block;margin-left:8px;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:#ff8a3d;text-transform:uppercase;font-style:normal}
.mm-cta{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.mm-cta a{display:flex;align-items:center;justify-content:center;width:100%;height:52px;
  border-radius:40px;font-size:15.5px;font-weight:700;padding:0}
.mm-cta .mm-login{background:#eef1f6;color:#0c1526}
.mm-cta .mm-login:hover{background:#fff}
.mobile-menu .mm-cta .btn{margin:0;width:100%;height:52px;border-radius:40px}
.mobile-menu .mm-lang{margin-top:auto;padding-top:22px;border-top:0}
.mm-lang-btn{display:inline-flex;align-items:center;gap:9px;background:none;border:0;
  color:#dbe0ec;font:600 14.5px/1 inherit;font-family:inherit;cursor:pointer;padding:6px 4px}
.mm-lang-btn svg{width:14px;height:14px;color:#8b97ae;transition:transform .3s var(--ease)}
.mm-lang.open .mm-lang-btn svg{transform:rotate(180deg)}
.mobile-menu .mm-langs{display:none;margin-top:12px}
.mm-lang.open .mm-langs{display:flex}
.mm-empty{padding:18px 6px;font-size:13.5px;color:#8b97ae}

/* ===== MOBILE SCROLL + LANGUAGE POLISH (appended batch) =====
   Native scrolling on phones (Lenis now stands down there); the sticky
   chrome drops its expensive blur below 720px, and the sheet menu's
   language switcher moves up under the CTAs with full language names. */
@media (max-width:720px){
  .site-header{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(5,8,15,.97)}
  .topbar{-webkit-backdrop-filter:none;backdrop-filter:none}
}
.mobile-menu .mm-lang{margin-top:18px;padding-top:20px;border-top:1px solid rgba(255,255,255,.09)}
.mobile-menu .mm-langs button{font-size:13px;padding:8px 14px}

/* ===== LANGUAGE PANEL — MEGA CLOTH, SCREEN CENTRE (appended batch) =====
   The panel lives inside the blurred header, and Chrome cannot nest
   backdrop-filters — the same quirk that made the mega menu solid. It now
   wears the mega panel's exact background and sits dead centre. */
/* the blurred header is the panel's containing block, so viewport maths
   resolve against the bar — hang it centred beneath the nav, mega-style */
.lang-pop{top:calc(100% + 12px);background:#070a12;-webkit-backdrop-filter:none;backdrop-filter:none;
  border:1px solid rgba(255,255,255,.1);max-height:min(78vh,calc(100vh - 160px))}

/* ===== MOBILE SHEET STANDS DOWN ON DESKTOP (appended batch) =====
   The sheet could linger open when the viewport grew past the hamburger
   breakpoint (devtools closing, tablet rotation). Above 900px it simply
   does not exist. */
@media (min-width:901px){.mobile-menu,.menu-backdrop{display:none !important}}


.mega-badge{background:none;border:0;padding:0;color:#5b9dff}
.mm-new{color:#5b9dff}

/* ===== MOBILE SCROLL SMOOTHNESS (appended batch) =====
   Two per-frame costs leave phones: hero heights key to the small viewport
   (100svh) so the collapsing address bar no longer re-lays the page out
   mid-scroll, and decorative glass loses its backdrop blur on coarse
   pointers — the tints stay, the per-frame repaint bill goes. */
@supports (min-height:100svh){
  .hero{min-height:min(760px,calc(100svh - var(--topbar-h,44px)))}
  .howto{min-height:100svh}
  .acct-hero,.fx-hero,.gl-hero,.wb-hero,.pf-hero{min-height:min(780px,calc(100svh - var(--topbar-h,44px)))}
  .pt-hero{min-height:min(600px,calc(100svh - var(--topbar-h,44px)))}
  .ck-hero{min-height:min(900px,calc(100svh - var(--topbar-h,44px)))}
  .pm-hero{min-height:min(760px,calc(100svh - var(--topbar-h,44px)))}
  .ma-hero{min-height:min(660px,calc(100svh - var(--topbar-h,44px)))}
  @media (max-width:860px){.pt-hero{min-height:min(500px,calc(100svh - var(--topbar-h,44px)))}}
}
@media (pointer: coarse){
  .mkx-card,.mkt-card,.plat-web,.plat-mt,.play,.award-card,.hub-core,.cta-card,.cta-bubble,.cta-chip,.to-top,
  .acct-hero-points li,.ta-panel,.fx-stat,.fx-cat,.fx-pairs .ta-spec-wrap,.fx-mh-card,.fx-mh-panel,.fx-mh-tile,
  .fx-pw-row,.fx-cs-meter,.mkt-pill,.co-stat,.co-card,.glass,.glass-dark,.ma-levels,.pf-step,.pf-subnav a,
  .mt-chip,.mt-rail-dur,.mt-rail-btn,.mt-dl-btn,.pl-card,.pl-sign,.ck-badge,.ck-btn--ghost,.ck-cell,.ck-lead-card,
  .cmp-card,.cmp-x,.kc-feature-dur,.nr-spot-card,.pp-toc,.pp-card,.wb-dur,.wb-lvl,.chat-panel,.cookie{
    -webkit-backdrop-filter:none;backdrop-filter:none}
}


.nav-brandwrap{flex:0 0 auto}
.brand img{min-width:140px}
.nav-menu{min-width:0}
@media (max-width:1280px){.header-partners,.hp-divider{display:none}}
.mobile-menu .mm-top{font-size:clamp(17px,4.6vw,20px);font-weight:600;padding:12px 4px}
.mega,.mega--center{max-height:calc(100vh - var(--topbar-h,44px) - var(--nav-h,64px));
  overflow-y:auto;overscroll-behavior:contain}
.lang-pop{overscroll-behavior:contain}
/* .mobile-menu .mm-cta a.btn:hover{background:linear-gradient(180deg,#2a72ff,#0047bb)} */
/* .mobile-menu .mm-cta a.mm-login:hover{background:#fff} */
/* smart app banner — phones only, all pages, dismissible per visit */
.sb-bar{display:none}
@media (max-width:768px){
  .sb-bar{position:relative;z-index:902;display:flex;align-items:center;gap:11px;padding:10px 12px;
    background:linear-gradient(120deg,#13cbb4,#0aa896);color:#04241f}
  .sb-x{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:0 0 auto;
    border:0;background:rgba(4,36,31,.14);color:#04241f;cursor:pointer}
  .sb-x svg{width:12px;height:12px}
  .sb-ico{width:38px;height:38px;border-radius:10px;background:#05070e;display:grid;place-items:center;flex:0 0 auto}
  .sb-ico img{width:22px;height:22px;display:block}
  .sb-txt{flex:1;min-width:0;line-height:1.3}
  .sb-txt b{display:block;font-size:12.5px;font-weight:700}
  .sb-txt span{display:block;font-size:10.5px;opacity:.78}
  .sb-get{flex:0 0 auto;padding:8px 15px;border-radius:30px;background:#05070e;color:#7ef0d2;
    font-size:12px;font-weight:800;letter-spacing:.02em}
}

/* ===== SMART BANNER — FIGMA 184:1421 (appended batch) =====
   The phone banner takes the designed form — frosted white card,
   blue-gradient app tile, 4.5 stars, gradient Install pill — and moves
   to the foot of the screen; the cookie pill and chat bubble step up
   while it is present. */
@media (max-width:768px){
  .sb-bar{position:fixed;left:12px;right:12px;top:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px));
    z-index:902;display:flex;align-items:center;gap:12px;padding:15px 14px;border-radius:20px;
    background:rgba(255,255,255,.72);border:1px solid #fff;color:#1c1f2a;
    -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
    box-shadow:0 24px 54px -22px rgba(10,20,50,.45)}
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .sb-bar{background:rgba(255,255,255,.96)}
  }
  .sb-x{position:absolute;top:-9px;right:-4px;width:26px;height:26px;border-radius:50%;
    background:#fff;color:#50555b;border:1px solid rgba(28,31,42,.12);
    box-shadow:0 8px 18px -8px rgba(10,20,50,.4)}
  .sb-ico{width:56px;height:56px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
    background:linear-gradient(180deg,#0047bb,#001489)}
  .sb-ico img{width:24px;height:31px;display:block}
  .sb-txt{flex:1;min-width:0;line-height:1.32}
  .sb-txt b{display:block;font-size:14px;font-weight:600;color:#1c1f2a}
  .sb-txt span{display:block;font-size:12px;font-weight:500;color:#50555b;opacity:1}
  .sb-txt .sb-stars{display:flex;gap:3px;margin-top:4px}
  .sb-stars img{width:11px;height:10px;display:block}
  .sb-get{flex:0 0 auto;display:flex;align-items:center;justify-content:center;height:36px;
    padding:0 24px;border-radius:70px;border:2px solid #0047bb;color:#fff;
    font-size:12.5px;font-weight:600;letter-spacing:.01em;
    background:linear-gradient(180deg,#0047bb,#002ea2 50%,#001489)}
  body.ck-open .sb-bar{bottom:calc(126px + env(safe-area-inset-bottom,0px))}
  body.has-sb .chat-fab{bottom:calc(104px + env(safe-area-inset-bottom,0px))}
  body.has-sb.ck-open .chat-fab{bottom:calc(208px + env(safe-area-inset-bottom,0px))}
}





/* ===== FOOTER TAGLINE, SET LARGE IN PERIWINKLE (appended batch) ===== */
.foot-tag{color:#7da4f7;font-size:clamp(24px,3.4vw,44px);letter-spacing:0;line-height:1.15}

/* ===== PLATFORM CARD BREATHES ON SMALL PHONES (appended batch) =====
   Below 480px the app card's copy column was pinned to 40% width with a
   nowrap title, clipping the heading and stacking one word per line. */
@media (max-width:480px){
  .plat-app .plat-copy{max-width:100%}
  .plat-app .plat-copy h3{white-space:normal}
  .plat-copy p{max-width:none}
  .plat-hand{width:min(230px,64%)}
}

/* ===== TAGLINE SITS LEVEL WITH THE LOGO (appended batch) ===== */
.foot-tag{font-size:clamp(15px,1.6vw,20px)}



/* ===== EVENTS RAIL FULL-BLEED SHOTS (appended batch 2026-08-12) =====
   the parallax slack left visible gaps at the frame edges — every shot
   now covers its 4:5 frame exactly, like a background image would */
.ev-shot img{width:100%;transform:none}
/* ! wwwstartr|2026-08-17 11:53:00 ! */