/* BrokerOption design system v1.6 — one layer, previous stacked premium CSS is NOT enqueued. */
:root{--bo-bg:#061323;--bo-panel:#0a2135;--bo-border:#27475e;--bo-cyan:#59c5ff;--bo-muted:#b2cadb}
html{scroll-behavior:smooth}body{background:var(--bo-bg)!important;color:#e5f3ff!important}
.site-header{position:relative!important;z-index:30!important;background:#061323!important;box-shadow:none!important;border:0!important}
.site-header::before{content:none!important}
.site-header .topbar{height:72px!important;max-width:1360px!important;border:0!important}
.brand-word{font-size:23px!important}.brand-symbol{background:linear-gradient(145deg,#1763a5,#008ce9)!important}
.header-nav{gap:29px!important}.header-nav a{font-size:12.5px!important;color:#d5e8fa!important}
/* Compact broker menu: part of site navigation, NOT a gallery. */
.site-header{background:linear-gradient(180deg,#061323,#081a2b)!important}
.broker-rail{display:block!important;background:linear-gradient(180deg,#08182a 0%,#0b2036 100%)!important;padding:7px max(18px,calc((100vw - 1480px)/2)) 9px!important;border-top:1px solid #173451!important;border-bottom:1px solid #24415a!important;box-shadow:inset 0 1px 0 #ffffff05!important;position:relative!important}
.broker-rail:after{content:none!important}
.broker-rail-items{display:flex!important;gap:7px!important;align-items:stretch!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;scroll-snap-type:x proximity;padding:0 1px 2px!important;white-space:normal!important}
.broker-rail-items::-webkit-scrollbar{display:none}
.broker-rail nav a.broker-rail-tile{--accent:#56a9f7;flex:1 0 0!important;min-width:129px!important;max-width:none!important;height:62px!important;min-height:62px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:8px!important;padding:5px 8px 5px 5px!important;position:relative!important;overflow:hidden!important;background:linear-gradient(130deg,#142c45aa,#102337cc)!important;border:1px solid #2b4b64!important;border-radius:9px!important;box-shadow:inset 0 1px 0 #ffffff08!important;text-decoration:none!important;color:#fff!important;scroll-snap-align:start;transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important}
.broker-rail nav a.broker-rail-tile::before{content:none!important}
.broker-rail nav a.broker-rail-tile:hover,.broker-rail nav a.broker-rail-tile:focus-visible{transform:none!important;border-color:var(--accent)!important;background:#15334f!important;box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 27%,transparent),0 5px 13px #0003!important;outline-offset:2px!important}
.broker-rail .rail-thumb{position:relative!important;display:block!important;flex:0 0 47px!important;width:47px!important;height:50px!important;min-height:50px!important;overflow:hidden!important;border-radius:6px!important;border:1px solid color-mix(in srgb,var(--accent) 45%,#34516d)!important;background:#071c30!important}
.broker-rail .rail-thumb:after{content:''!important;position:absolute;inset:0;background:linear-gradient(110deg,#0a172433,transparent 75%)!important;pointer-events:none}
.broker-rail .rail-thumb img{width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;filter:saturate(.96)!important;transition:transform .2s ease!important}
.broker-rail .broker-rail-tile:hover .rail-thumb img{transform:scale(1.05)!important}
.broker-rail .rail-caption{flex:1!important;min-width:0!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:0!important;padding:0!important;background:none!important;position:static!important;text-align:left!important}
.broker-rail .rail-caption strong{color:#f0f7ff!important;font:800 11.5px/1.2 Arial,Helvetica,sans-serif!important;white-space:normal!important;letter-spacing:-.17px!important;overflow-wrap:normal!important;word-break:normal!important}
.broker-rail .rail-go{display:none!important}
.rail-pocket-option{--accent:#6f83ff!important}.rail-quotex{--accent:#1acb99!important}.rail-binolla{--accent:#4a8cff!important}.rail-exnova{--accent:#40caff!important}.rail-binarium{--accent:#f7bb61!important}.rail-olymp-trade{--accent:#1ad2a9!important}.rail-iq-option{--accent:#b982ff!important}.rail-1trade{--accent:#ff7999!important}.rail-binodex{--accent:#71a6ff!important}
/* Hero is one uninterrupted scene; graphic is blended with CSS masks, no horizontal slabs. */
.front-stage{background:#071a30!important;position:relative!important;isolation:isolate}
.front-stage .hero{position:relative!important;isolation:isolate!important;min-height:610px!important;background:radial-gradient(ellipse at 38% 10%,#1a416c44,transparent 55%),linear-gradient(150deg,#091e34,#06182d 69%,#071a30)!important;overflow:hidden!important;border:0!important}
.front-stage .hero:before{content:''!important;position:absolute!important;inset:0 0 0 39%!important;background-image:url('../img/hero-brokeroption.webp')!important;background-size:cover!important;background-repeat:no-repeat!important;background-position:center!important;opacity:.9!important;mask-image:linear-gradient(to right,transparent 0%,black 36%,black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,black 36%,black 100%);pointer-events:none!important;z-index:0!important;}
.front-stage .hero:after{content:''!important;position:absolute!important;inset:auto 0 0!important;height:150px!important;background:linear-gradient(to top,#071b30 0%,#071b3055 46%,transparent 100%)!important;z-index:1!important;pointer-events:none!important}
.front-stage .hero-glow{position:absolute!important;inset:-15% 38% 0 0!important;display:block!important;pointer-events:none!important;background:radial-gradient(ellipse at 70% 48%,#2587c116,transparent 69%)!important;filter:blur(20px)!important;z-index:0!important}
.front-stage .hero-content{max-width:1360px!important;position:relative!important;z-index:2!important;min-height:610px!important;display:flex!important;align-items:center!important}
.front-stage .hero-copy{width:min(720px,59%)!important;padding:58px 0 88px!important}
.front-stage .hero .eyebrow{font-size:10px!important;letter-spacing:2px!important;margin-bottom:24px!important;color:#9cddff!important}
.front-stage .hero .pulse{width:7px;height:7px;background:#57e4c7!important}
.front-stage .hero h1{font:800 clamp(40px,3.35vw,52px)/1.12 Arial,Helvetica,sans-serif!important;max-width:715px!important;letter-spacing:-1.85px!important;color:white!important;margin:0!important;text-shadow:0 3px 16px #0006!important;text-wrap:balance!important}
.front-stage .hero h1 em{font-style:normal!important;display:block!important;color:#56bdff!important;white-space:normal!important;letter-spacing:-1.95px!important}
.front-stage .hero .hero-lead{max-width:510px!important;font-size:16px!important;line-height:1.68!important;color:#d4e5f4!important;margin:25px 0 26px!important;text-shadow:none!important}
.front-stage .hero-actions{display:flex!important;flex-wrap:wrap!important;gap:12px!important}
.front-stage .hero-actions .btn{display:inline-flex!important;align-items:center!important;justify-content:space-between!important;min-height:55px!important;min-width:202px!important;border-radius:12px!important;padding:14px 21px!important;font-weight:800!important;font-size:13px!important;box-shadow:none!important;transition:transform .2s ease,box-shadow .2s ease!important}
.front-stage .hero-actions .btn-primary{background:linear-gradient(120deg,#07a8fb,#0e6be9)!important;border:1px solid #70cdff!important;box-shadow:inset 0 1px #ffffff50,0 14px 30px #006deb3a!important;color:#fff!important}
.front-stage .hero-actions .btn-outline{background:#0a2845c7!important;border:1px solid #71a8d4!important;color:#eaf5ff!important}
.front-stage .hero-actions .btn:hover{transform:translateY(-2px)!important;box-shadow:0 16px 28px #0008!important}
.front-stage .hero-small{font-size:10px!important;color:#b3c8de!important;margin-top:21px!important}
.front-stage .hero-evidence{display:flex!important;gap:24px!important;flex-wrap:wrap!important;margin-top:32px!important;padding-top:18px!important;border-top:1px solid #8fd4ff26!important;color:#bcd5ea!important;font-size:11px!important}
.front-stage .hero-evidence b{color:#52c7ff!important}
/* Bridge between image / lower contents: the actions visually overlay the hero bottom. */
.bo-action-band{position:relative;z-index:5;background:linear-gradient(#071b30,#071b30)!important;margin-top:-48px!important;padding:0 0 18px!important}
.bo-action-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important;max-width:1360px!important}
.bo-action-card{display:flex!important;align-items:center!important;gap:15px!important;min-height:108px!important;padding:18px 19px!important;text-decoration:none!important;border-radius:16px!important;border:1px solid #37638a!important;background:linear-gradient(145deg,#123553,#0a2239 80%)!important;color:#eaf5ff!important;box-shadow:inset 0 1px #ffffff1b,0 16px 28px #0006!important;transition:transform .2s ease,border-color .2s ease,background .2s ease!important}
.bo-action-card:hover{transform:translateY(-4px)!important;border-color:#69ceff!important;background:linear-gradient(145deg,#17486f,#0e2b48 80%)!important}
.bo-action-symbol{display:grid!important;place-items:center!important;flex:0 0 47px!important;width:47px!important;height:47px!important;border-radius:12px!important;border:1px solid #4d9dde70!important;background:linear-gradient(145deg,#123f6c,#0a284b)!important;color:#57c8ff!important;font-size:25px!important;font-weight:700!important}
.bo-action-card>span:nth-child(2){display:flex!important;flex:1!important;flex-direction:column!important;gap:6px!important;min-width:0!important}
.bo-action-card strong{font-size:15px!important;line-height:1.2!important;color:white!important}
.bo-action-card small{font-size:11px!important;line-height:1.5!important;color:#aacce5!important}
.bo-action-arrow{font-size:22px!important;color:#82ccff!important}
.broker-section{padding-top:72px!important;background:linear-gradient(180deg,#071b30,#071a2f)!important}
.section-top h2,.section-heading h2,.focus-layout h2,.learn-layout h2,.method-layout h2,.faq-intro h2{color:#eef6ff!important}
.section-top p,.section-heading p,.section p{color:#c0d2e2}.section-soft,.section{background:#08192c;color:#eaf4ff}
.broker-grid{gap:18px!important}
.broker-card{border:1px solid #325674!important;background:linear-gradient(156deg,#12304b,#0a1c31)!important;box-shadow:0 15px 35px #0004!important;border-radius:17px!important;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease!important}
.broker-card:hover{transform:translateY(-2px)!important;border-color:#6bb7e4!important;box-shadow:0 18px 40px #0007!important}
.broker-card-top{padding:16px 18px 11px!important}.broker-card-top strong{font-size:16px!important}
.broker-media{margin:0 13px!important;aspect-ratio:16/9!important;border-radius:9px!important;overflow:hidden!important;background:#061326!important}
.broker-media img{object-fit:cover!important;transition:none!important}
.broker-body{display:flex;flex-direction:column;flex:1;padding:14px 18px 18px!important}.broker-body>p{min-height:72px!important;line-height:1.58!important;color:#bacfe2!important}
.broker-actions{display:flex!important;gap:9px!important;flex-wrap:nowrap!important;margin-top:auto!important;padding-top:14px!important;border-top:1px solid #45678969!important}
.broker-actions .card-cta{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;min-width:0!important;flex:1 1 0!important;min-height:47px!important;padding:11px 12px!important;font-size:12px!important;line-height:1.25!important;font-weight:800!important;white-space:normal!important;border-radius:9px!important;text-align:left!important;text-decoration:none!important;transition:border-color .18s ease,background .18s ease!important}
.broker-actions .card-cta-primary{background:linear-gradient(120deg,#109fea,#086bd6)!important;border:1px solid #65c5ff!important;color:white!important;box-shadow:0 6px 18px #0578ee42!important}
.broker-actions .card-cta-secondary{background:#0a2843!important;border:1px solid #4a7798!important;color:#e1f0ff!important}
.broker-actions .card-cta:hover{filter:brightness(1.13)!important;transform:none!important}
.broker-card .image-zoom{opacity:.85!important}

@media(max-width:1190px){.broker-rail nav a.broker-rail-tile{flex:0 0 141px!important}.front-stage .hero-copy{width:67%!important}.front-stage .hero:before{inset:0 0 0 31%!important}}
@media(max-width:850px){.broker-rail{padding-left:16px!important;padding-right:16px!important}.broker-rail nav a.broker-rail-tile{flex:0 0 141px!important}.front-stage .hero-copy{width:78%!important}.front-stage .hero:before{inset:0 0 0 20%!important;opacity:.6!important}.bo-action-grid{gap:10px!important}.bo-action-card{padding:13px!important;gap:10px!important}.bo-action-symbol{width:35px!important;height:35px!important;flex-basis:35px!important;font-size:20px!important}.bo-action-card strong{font-size:12.5px!important}}
@media(max-width:650px){
 .site-header .topbar{height:64px!important}.brand-word{font-size:20px!important}
 .broker-rail{padding:7px 14px 9px!important}
 .broker-rail nav a.broker-rail-tile{flex:0 0 139px!important;min-height:62px!important}.broker-rail .rail-thumb{height:50px!important;min-height:50px!important}.broker-rail .rail-caption strong{font-size:11.5px!important}
 .front-stage .hero{min-height:615px!important;background:linear-gradient(180deg,#0b243b,#07172a)!important}
 .front-stage .hero:before{inset:40% 0 0 0!important;background-size:cover!important;background-position:center!important;opacity:.88!important;-webkit-mask-image:linear-gradient(180deg,transparent 0%,black 35%,black 65%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,black 35%,black 65%,transparent 100%)}
 .front-stage .hero:after{height:115px!important}
 .front-stage .hero-content{min-height:615px!important;align-items:flex-start!important}
 .front-stage .hero-copy{width:100%!important;padding:35px 0 265px!important}
 .front-stage .hero .eyebrow{font-size:9px!important;letter-spacing:1.1px!important;margin-bottom:15px!important}
 .front-stage .hero h1{font-size:clamp(35px,9vw,45px)!important;letter-spacing:-1.55px!important;max-width:480px!important}
 .front-stage .hero h1 em{letter-spacing:-1.7px!important}
 .front-stage .hero .hero-lead{font-size:13px!important;line-height:1.55!important;margin:16px 0 16px!important}
 .front-stage .hero-actions{gap:8px!important}.front-stage .hero-actions .btn{min-width:0!important;flex:1 1 145px!important;min-height:44px!important;padding:10px 10px!important;font-size:11px!important}
 .front-stage .hero-small{font-size:9px!important;line-height:1.5!important;margin-top:12px!important}
 .front-stage .hero-evidence{display:none!important}
 .bo-action-band{margin-top:-5px!important;padding-bottom:9px!important}
 .bo-action-grid{grid-template-columns:1fr!important;gap:9px!important}.bo-action-card{min-height:70px!important;padding:11px 15px!important}.bo-action-card strong{font-size:14px!important}.bo-action-card small{font-size:11px!important}
 .broker-section{padding-top:44px!important}.broker-actions{flex-direction:column!important}.broker-actions .card-cta{flex:none!important;width:100%!important;font-size:13px!important}
}
@media(prefers-reduced-motion:reduce){.broker-rail nav a.broker-rail-tile,.broker-rail .rail-thumb img,.bo-action-card,.broker-card,.broker-actions .card-cta,.hero-actions .btn{transition:none!important;transform:none!important}}
/* Critical: main.css previously constrained ::before to height:32%, causing a visible image seam. */
.front-stage .hero::before{height:auto!important;width:auto!important;min-height:0!important;max-height:none!important}
@media(max-width:650px){.front-stage .hero::before{height:auto!important}}

/* v1.7 exact breakpoints: navigation remains menu-sized on every screen */
@media(max-width:650px){
 .broker-rail{padding:6px 14px 8px!important}
 .broker-rail nav a.broker-rail-tile{flex:0 0 136px!important;height:58px!important;min-height:58px!important;padding:4px 6px 4px 4px!important;gap:6px!important}
 .broker-rail .rail-thumb{flex-basis:42px!important;width:42px!important;height:48px!important;min-height:48px!important}
 .broker-rail .rail-caption strong{font-size:11.5px!important}
 .front-stage .hero-copy{width:100%!important}
}
@media(min-width:651px) and (max-width:1190px){
 .broker-rail nav a.broker-rail-tile{flex:0 0 142px!important}
}
@media(prefers-reduced-motion:reduce){.broker-rail nav a.broker-rail-tile:hover{transform:none!important}}

/* v1.8 — purpose-built brand marks for the 47×50 navigation thumb.
   The previous scaled-down trading desktops were illegible at menu size. */
.broker-rail .rail-thumb{background:#09192c!important;border-color:color-mix(in srgb,var(--accent) 49%,#34516d)!important}
.broker-rail .rail-thumb:after{content:none!important;display:none!important}
.broker-rail .rail-thumb img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;object-position:50% 50%!important;filter:none!important;image-rendering:auto!important}
.broker-rail .broker-rail-tile:hover .rail-thumb img{transform:none!important}
.broker-rail .rail-caption strong{font-size:12px!important;font-weight:800!important;color:#fff!important;letter-spacing:0!important}