/* ===== Trading hub components — soft-brutalism, Exness light ===== */

/* Risk banner */
.risk-banner{background:var(--bear);color:#fff;border-bottom:3px solid var(--ink);font-size:.82rem;text-align:center;padding:.55rem var(--space)}
.risk-banner *{color:#fff}
.risk-banner strong{font-family:var(--font-display)}

/* Ticker */
.ticker-viewport{background:var(--dark);border-bottom:3px solid var(--ink);overflow:hidden;color:var(--dark-text)}
.ticker-viewport *{color:inherit}
.ticker-marquee{display:flex;width:max-content;animation:ticker 32s linear infinite}
.ticker-viewport:hover .ticker-marquee,.ticker-viewport:focus-within .ticker-marquee{animation-play-state:paused}
.ticker-track{display:flex;flex-shrink:0}
.ticker-item{display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.4rem;font-size:.85rem;font-family:var(--font-display);white-space:nowrap;border-right:1px solid #2a3140}
.ticker-item .sym{color:var(--dark-text)}
.ticker-item .up{color:var(--bull)}
.ticker-item .down{color:var(--bear)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-marquee{animation:none}}

/* Hero bento */
.hero-bento{display:grid;grid-template-columns:1fr;gap:1.2rem}
.bento-cell{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-brut)}
.bento-cell.bento-main{background:var(--panel-2)}
.bento-cell h1{margin-bottom:.8rem}
.bento-cell .lede{color:var(--muted);font-size:1.1rem;margin-bottom:1.4rem}
.bento-stat{font-family:var(--font-display);font-size:2rem;color:var(--bull)}
.bento-stat small{display:block;font-size:.8rem;color:var(--muted);font-family:var(--font-body)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem}
@media (min-width:780px){.hero-bento{grid-template-columns:2fr 1fr;grid-auto-rows:minmax(0,auto)}.bento-main{grid-row:span 2}}

/* Panel grid */
.panel-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:640px){.panel-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:780px){.panel-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.panel{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-brut)}
.panel h3{margin-bottom:.6rem}
.panel p{color:var(--muted)}
.panel .panel-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:var(--panel-2);border:2px solid var(--ink);border-radius:10px;font-family:var(--font-display);font-size:1.2rem;margin-bottom:1rem;color:var(--system)}

/* Tabs */
[data-tab-group]{margin-top:1rem}
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.4rem}
.tab-btn{font-family:var(--font-display);font-weight:700;font-size:.9rem;padding:.65rem 1.2rem;border:2px solid var(--ink);border-radius:10px;background:var(--panel);color:var(--ink)}
.tab-btn.is-active{background:var(--system);color:#fff}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Seg control */
[data-seg-group]{margin-top:1rem}
.seg-control{display:inline-flex;gap:.3rem;background:var(--panel-2);border:2px solid var(--ink);border-radius:12px;padding:.3rem;margin-bottom:1.4rem}
.seg-btn{font-family:var(--font-display);font-weight:700;font-size:.85rem;padding:.5rem 1.1rem;border-radius:8px;background:transparent;color:var(--ink)}
.seg-btn.is-active{background:var(--bull);color:var(--ink)}
.seg-panel{display:none}
.seg-panel.is-active{display:block}

/* Comparison matrix / dense tables */
.matrix-wrap{overflow-x:auto;border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-brut)}
table.matrix,table.data-table{width:100%;border-collapse:collapse;min-width:560px;background:var(--panel)}
table.matrix th,table.matrix td,table.data-table th,table.data-table td{padding:.8rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
table.matrix thead th,table.data-table thead th{background:var(--dark);color:var(--dark-text);font-family:var(--font-display);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em}
table.matrix thead th *{color:inherit}
table.matrix tbody tr:nth-child(even),table.data-table tbody tr:nth-child(even){background:var(--panel-2)}
table.matrix td.yes{color:var(--bull);font-weight:700}
table.matrix td.no{color:var(--bear);font-weight:700}

/* Platform mock frame */
.mock-frame{border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-brut);background:var(--panel)}
.mock-bar{display:flex;align-items:center;gap:.4rem;background:var(--dark);padding:.6rem .9rem}
.mock-bar *{color:var(--dark-text)}
.mock-bar .dot{width:11px;height:11px;border-radius:50%;background:#3a4252}
.mock-bar .dot.r{background:var(--bear)}.mock-bar .dot.y{background:#f5b942}.mock-bar .dot.g{background:var(--bull)}
.mock-body{padding:1.2rem;display:grid;gap:.5rem}
.mock-row{display:flex;justify-content:space-between;font-family:var(--font-display);font-size:.9rem;padding:.4rem .6rem;background:var(--panel-2);border-radius:6px}
.mock-row .up{color:var(--bull)}.mock-row .down{color:var(--bear)}

/* Steps */
.steps{display:grid;gap:1rem;counter-reset:step}
@media (min-width:780px){.steps.steps-row{grid-template-columns:repeat(4,1fr)}}
.step{position:relative;background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-brut)}
.step::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bull);border:2px solid var(--ink);border-radius:50%;font-family:var(--font-display);font-weight:800;margin-bottom:.9rem;color:var(--ink)}
.step h4{margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.92rem}

/* Accordion */
.accordion-item,.faq-item,.checklist-item{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);margin-bottom:.8rem;overflow:hidden;box-shadow:3px 3px 0 var(--ink)}
.accordion-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:1.1rem 1.3rem;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ink);background:var(--panel)}
.accordion-trigger::after{content:'+';font-size:1.5rem;line-height:1;color:var(--system);margin-left:1rem;transition:transform .2s}
.accordion-item.open .accordion-trigger::after,.faq-item.open .accordion-trigger::after,.checklist-item.open .accordion-trigger::after{content:'\2212'}
.accordion-body,.faq-body,.checklist-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.accordion-body>*,.faq-body>*,.checklist-body>*{padding:0 1.3rem}
.accordion-body>*:first-child,.faq-body>*:first-child,.checklist-body>*:first-child{padding-top:.2rem}
.accordion-body>*:last-child,.faq-body>*:last-child,.checklist-body>*:last-child{padding-bottom:1.2rem}
.accordion-body p,.faq-body p,.checklist-body p{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.accordion-body,.faq-body,.checklist-body{transition:none}}

/* Expand cards */
.expand-card{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.3rem;box-shadow:3px 3px 0 var(--ink);margin-bottom:.8rem}
.expand-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;font-family:var(--font-display);font-weight:700;background:none;text-align:left;color:var(--ink)}
.expand-trigger::after{content:'\203A';font-size:1.4rem;transition:transform .2s;color:var(--system)}
.expand-card.open .expand-trigger::after{transform:rotate(90deg)}
.expand-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.expand-card.open .expand-body{max-height:500px;padding-top:.9rem}
.expand-body p{color:var(--muted)}
@media (prefers-reduced-motion:reduce){.expand-body{transition:none}}

/* Trust panel */
.trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (min-width:780px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{text-align:center;background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.3rem;box-shadow:var(--shadow-brut)}
.trust-item .num{font-family:var(--font-display);font-size:1.8rem;color:var(--system);display:block}
.trust-item small{color:var(--muted)}

/* CTA band (dark) */
.cta-band{background:var(--dark);color:var(--dark-text);border:3px solid var(--ink);border-radius:var(--radius);padding:clamp(1.8rem,5vw,3rem);text-align:center;box-shadow:var(--shadow-brut)}
.cta-band *{color:inherit}
.cta-band h2{color:var(--dark-text)}
.cta-band p{color:#c4cbd6;max-width:560px;margin:0 auto 1.6rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}
.dual-cta{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media (min-width:640px){.dual-cta{grid-template-columns:1fr 1fr}}
.dual-cta .cta-card{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.8rem;text-align:center;box-shadow:var(--shadow-brut)}
.dual-cta .cta-card.is-primary{background:var(--bull)}
.dual-cta .cta-card h3{margin-bottom:.6rem}
.dual-cta .cta-card p{color:var(--muted);margin-bottom:1.2rem}
.dual-cta .cta-card.is-primary p{color:#0a3b2c}

/* Callout / risk block */
.callout{border:3px solid var(--ink);border-left-width:8px;border-left-color:var(--bear);background:var(--panel);border-radius:var(--radius);padding:1.4rem 1.6rem;box-shadow:3px 3px 0 var(--ink)}
.callout.info{border-left-color:var(--system)}
.callout.ok{border-left-color:var(--bull)}
.callout h4{margin-bottom:.4rem}
.callout p{color:var(--muted);margin-bottom:0}

/* Prose */
.prose{max-width:760px}
.prose h2{margin:1.6rem 0 .6rem}
.prose h3{margin:1.2rem 0 .5rem}
.prose p,.prose li{color:var(--muted)}
.prose ul{list-style:disc;padding-left:1.3rem;margin-bottom:1rem}
.prose li{margin-bottom:.4rem}

/* Timeline */
.timeline{position:relative;padding-left:2rem;border-left:3px solid var(--ink)}
.timeline-item{position:relative;margin-bottom:1.6rem}
.timeline-item::before{content:'';position:absolute;left:-2.6rem;top:.2rem;width:18px;height:18px;background:var(--bull);border:3px solid var(--ink);border-radius:50%}
.timeline-item .year{font-family:var(--font-display);color:var(--system);font-size:1.1rem}
.timeline-item p{color:var(--muted)}

/* Search box */
.faq-search-box{display:flex;gap:.6rem;max-width:520px;margin-bottom:1.5rem}
.faq-search-box input{flex:1;padding:.85rem 1rem;border:3px solid var(--ink);border-radius:10px;font-family:var(--font-body);font-size:1rem;background:var(--panel);color:var(--text-light)}
.faq-search-box input:focus{outline:none;border-color:var(--system)}
.faq-item[hidden]{display:none}

/* Contact cards */
.contact-card{background:var(--panel);border:3px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-brut)}
.contact-card .ic{font-family:var(--font-display);font-size:1.4rem;color:var(--system);margin-bottom:.6rem}
.contact-card p{color:var(--muted)}

/* Hours */
.hours-panel{background:var(--panel-2);border:3px solid var(--ink);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow-brut)}
.hours-row{display:flex;justify-content:space-between;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.hours-row:last-child{border-bottom:none}
.hours-row span:last-child{font-family:var(--font-display)}

/* Page hero generic */
.page-hero{background:var(--panel-2);border-bottom:3px solid var(--ink)}
.page-hero .container{padding-top:clamp(2rem,5vw,3.5rem);padding-bottom:clamp(2rem,5vw,3.5rem)}
.page-hero .lede{color:var(--muted);font-size:1.15rem;max-width:640px}
.page-hero .hero-actions{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.8rem}

/* badges */
.badge{display:inline-block;font-family:var(--font-display);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;padding:.25rem .6rem;border:2px solid var(--ink);border-radius:6px;background:var(--panel-2);color:var(--ink)}
.badge.bull{background:var(--bull)}
.badge.system{background:var(--system);color:#fff}