/* ===== FXPro hub components — soft-brutalism, light ===== */

/* RISK RIBBON */
.risk-ribbon{background:var(--bg-panel-2);border-bottom:2px solid var(--text);font-size:.8rem;color:var(--text-muted)}
.risk-ribbon .container{padding-block:.6rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.risk-ribbon strong{color:var(--text)}

/* BENTO / HERO BENTO */
.bento{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:780px){.bento{grid-template-columns:repeat(3,1fr)}.bento .bento-lg{grid-column:span 2;grid-row:span 2}}
.bento-cell{background:var(--bg-elevated);border:2px solid var(--text);border-radius:14px;padding:1.4rem;box-shadow:5px 5px 0 var(--shadow-brut)}
.bento-cell h3{margin-bottom:.5rem}
.bento-cell .big-num{font-size:2.2rem;font-weight:800;color:var(--system);font-variant-numeric:tabular-nums}

/* TICKER MARQUEE */
.ticker-marquee,.ticker-viewport{overflow:hidden;border-block:2px solid var(--text);background:var(--bg-panel)}
.ticker-viewport{cursor:pointer}
.ticker-track{display:flex;gap:2.2rem;padding:.7rem 0;white-space:nowrap;width:max-content;animation:tick 30s linear infinite}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track,.ticker-viewport.is-paused .ticker-track{animation-play-state:paused}
.ticker-item{display:inline-flex;gap:.5rem;align-items:center;font-weight:600;font-variant-numeric:tabular-nums;font-size:.9rem}
.ticker-item .up{color:var(--bull)}
.ticker-item .down{color:var(--bear)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* TABS */
.tab-list{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.4rem}
.tab-btn{font:inherit;font-weight:700;cursor:pointer;padding:.7rem 1.1rem;border:2px solid var(--text);border-radius:10px;background:var(--bg-elevated);color:var(--text)}
.tab-btn.is-active{background:var(--brand);color:var(--brand-ink);box-shadow:4px 4px 0 var(--shadow-brut)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* SEG CONTROL */
.seg-control{display:inline-flex;border:2px solid var(--text);border-radius:10px;overflow:hidden;margin-bottom:1.4rem}
.seg-btn{font:inherit;font-weight:700;cursor:pointer;padding:.6rem 1rem;background:var(--bg-elevated);color:var(--text);border:none;border-right:2px solid var(--text)}
.seg-btn:last-child{border-right:none}
.seg-btn.is-active{background:var(--brand);color:var(--brand-ink)}

/* COMPARISON / MATRIX TABLES */
.matrix-wrap{overflow-x:auto;border:2px solid var(--text);border-radius:14px;box-shadow:5px 5px 0 var(--shadow-brut)}
.matrix,table.data-table{width:100%;border-collapse:collapse;min-width:560px}
.matrix th,.matrix td,.data-table th,.data-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums}
.matrix thead th,.data-table thead th{background:var(--bg-panel-2);font-weight:800;color:var(--text);border-bottom:2px solid var(--text)}
.matrix tbody tr:nth-child(even),.data-table tbody tr:nth-child(even){background:var(--bg-panel)}
.matrix .yes{color:var(--bull);font-weight:700}
.matrix .no{color:var(--bear);font-weight:700}

/* COMPARISON CARDS (account) */
.compare-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:780px){.compare-grid{grid-template-columns:repeat(3,1fr)}}
.account-card{background:var(--bg-elevated);border:2px solid var(--text);border-radius:14px;padding:1.5rem;box-shadow:5px 5px 0 var(--shadow-brut);display:flex;flex-direction:column}
.account-card.is-featured{border-color:var(--brand);box-shadow:5px 5px 0 var(--brand)}
.account-card h3{margin-bottom:.4rem}
.account-card .price{font-size:1.8rem;font-weight:800;margin:.4rem 0;font-variant-numeric:tabular-nums}
.account-card ul{list-style:none;margin:.8rem 0;display:flex;flex-direction:column;gap:.5rem}
.account-card li{padding-left:1.4rem;position:relative;color:var(--text-muted)}
.account-card li::before{content:'\2713';position:absolute;left:0;color:var(--bull);font-weight:800}
.account-card .btn{margin-top:auto}

/* PLATFORM MOCK FRAMES */
.mock-frame{border:2px solid var(--text);border-radius:14px;overflow:hidden;box-shadow:6px 6px 0 var(--shadow-brut);background:var(--bg-elevated)}
.mock-bar{display:flex;gap:.4rem;align-items:center;padding:.6rem .9rem;background:var(--bg-panel-2);border-bottom:2px solid var(--text)}
.mock-bar i{width:11px;height:11px;border-radius:50%;background:var(--border);display:inline-block;border:1px solid var(--text)}
.mock-body{padding:1.2rem;min-height:200px;background:repeating-linear-gradient(0deg,var(--bg-panel),var(--bg-panel) 23px,var(--bg-elevated) 23px,var(--bg-elevated) 24px)}
.mock-body .mock-row{display:flex;justify-content:space-between;padding:.35rem 0;font-variant-numeric:tabular-nums;font-size:.9rem}

/* INFO / VALUE / BENEFIT CARDS */
.card-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.info-card,.card{background:var(--bg-elevated);border:2px solid var(--text);border-radius:14px;padding:1.4rem;box-shadow:4px 4px 0 var(--shadow-brut)}
.info-card h3,.card h3{margin-bottom:.5rem}
.info-card .ic-num{font-size:1.5rem;font-weight:800;color:var(--system)}
.card-icon{width:44px;height:44px;border-radius:10px;background:var(--bg-panel-2);border:2px solid var(--text);display:grid;place-items:center;font-weight:800;color:var(--system);margin-bottom:.7rem}

/* STEPS */
.steps-list{display:grid;gap:1.1rem;grid-template-columns:1fr;counter-reset:none}
@media(min-width:780px){.steps-list{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--bg-elevated);border:2px solid var(--text);border-radius:14px;padding:1.3rem;box-shadow:4px 4px 0 var(--shadow-brut)}
.step .step-num{width:38px;height:38px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font-weight:800;margin-bottom:.7rem;border:2px solid var(--text)}
.step h3{margin-bottom:.4rem;font-size:1.05rem}

/* TIMELINE */
.timeline{position:relative;display:flex;flex-direction:column;gap:1.2rem;padding-left:1.4rem}
.timeline::before{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;background:var(--text)}
.timeline-item{position:relative;background:var(--bg-elevated);border:2px solid var(--text);border-radius:12px;padding:1.1rem;box-shadow:3px 3px 0 var(--shadow-brut)}
.timeline-item::before{content:'';position:absolute;left:-1.4rem;top:1.3rem;width:13px;height:13px;border-radius:50%;background:var(--brand);border:2px solid var(--text)}
.timeline-item .year{font-weight:800;color:var(--system)}

/* CTA BAND */
.cta-band{background:var(--bg-panel-2);border-block:2px solid var(--text)}
.cta-band .container{text-align:center}
.cta-band .cta-inner{max-width:680px;margin-inline:auto}
.cta-band h2{margin-bottom:.7rem}
.cta-band p{margin-bottom:1.2rem;color:var(--text-muted)}

/* CONTACT CARDS */
.contact-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:640px){.contact-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.contact-grid{grid-template-columns:repeat(3,1fr)}}

/* CHIPS */
.chip,.filter-chip{font:inherit;font-weight:700;cursor:pointer;padding:.55rem 1rem;border:2px solid var(--text);border-radius:999px;background:var(--bg-elevated);color:var(--text);transition:background .15s}
.chip.is-active,.filter-chip.is-active{background:var(--brand);color:var(--brand-ink)}
.chip-row{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1.4rem}
.is-hidden{display:none !important}

/* FAQ / ACCORDION */
.accordion-item,.faq-item,.checklist-item{border:2px solid var(--text);border-radius:12px;background:var(--bg-elevated);margin-bottom:.8rem;overflow:hidden;box-shadow:3px 3px 0 var(--shadow-brut)}
.accordion-trigger{width:100%;text-align:left;font:inherit;font-weight:700;cursor:pointer;padding:1rem 1.2rem;background:transparent;border:none;color:var(--text);display:flex;justify-content:space-between;align-items:center;gap:1rem}
.accordion-trigger::after{content:'+';font-size:1.4rem;font-weight:800;color:var(--system);transition:transform .2s}
.accordion-item.open .accordion-trigger::after,.faq-item.open .faq-trigger::after,.checklist-item.open .checklist-trigger::after{transform:rotate(45deg)}
.accordion-body,.faq-body,.checklist-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.accordion-body>div,.faq-body>div,.checklist-body>div,.accordion-inner{padding:0 1.2rem 1.1rem;color:var(--text-muted)}

/* EXPAND CARDS */
.expand-card{border:2px solid var(--text);border-radius:12px;background:var(--bg-elevated);margin-bottom:.8rem;box-shadow:3px 3px 0 var(--shadow-brut)}
.expand-trigger{width:100%;text-align:left;font:inherit;font-weight:700;cursor:pointer;padding:1rem 1.2rem;background:transparent;border:none;color:var(--text)}
.expand-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 1.2rem}
.expand-card.open .expand-body{max-height:500px;padding-bottom:1.1rem}

/* CHECKLIST list */
.checklist-item .checklist-trigger::before{content:'\2713';color:var(--bull);font-weight:800;margin-right:.6rem}

/* RELATED LINKS */
.link-grid{display:grid;gap:.8rem;grid-template-columns:1fr}
@media(min-width:640px){.link-grid{grid-template-columns:repeat(2,1fr)}}
.link-grid a{display:block;padding:.9rem 1.1rem;border:2px solid var(--text);border-radius:10px;background:var(--bg-elevated);color:var(--text);font-weight:600;text-decoration:none;box-shadow:3px 3px 0 var(--shadow-brut)}
.link-grid a:hover{background:var(--bg-panel-2)}

/* DUAL CTA */
.dual-cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.2rem}
@media(max-width:520px){.dual-cta .btn{width:100%}}

/* PROMO CODE BOX */
.promo-box{display:inline-flex;align-items:center;gap:.8rem;border:2px dashed var(--text);border-radius:12px;padding:1rem 1.4rem;background:var(--bg-panel-2);font-weight:800;font-size:1.2rem;letter-spacing:.05em}

/* TERMS TOC */
.toc-list{list-style:none;display:grid;gap:.5rem;grid-template-columns:1fr}
@media(min-width:640px){.toc-list{grid-template-columns:repeat(2,1fr)}}
.toc-list a{color:var(--system);text-decoration:none;font-weight:600}
.toc-list a:hover{text-decoration:underline}
.legal-body h2{margin-top:2rem;margin-bottom:.6rem;scroll-margin-top:90px}
.legal-body p{margin-bottom:1rem;color:var(--text-muted)}

/* GENERIC GRID 2/4 */
.grid-2{display:grid;gap:1.2rem;grid-template-columns:1fr}
@media(min-width:780px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-4{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:780px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* REVEAL */
.js-ready .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s ease}
.js-ready .reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js-ready .reveal{opacity:1;transform:none;transition:none}.ticker-track{animation:none}}