/* ===== Trading Bridge Components ===== */

/* RISK BANNER */
.risk-banner{background:var(--bg-panel-2);border-bottom:1px solid var(--border);font-size:.8rem;color:var(--text-muted);text-align:center;padding:.6rem 1rem;line-height:1.5}
.risk-banner strong{color:var(--bear)}

/* HERO BENTO */
.hero{position:relative;overflow:hidden;padding-top:clamp(3rem,7vw,5rem)}
.hero::before{content:"";position:absolute;top:-30%;left:-10%;width:60%;height:120%;background:radial-gradient(circle,rgba(59,130,246,.18),transparent 65%);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-30%;right:-10%;width:55%;height:120%;background:radial-gradient(circle,rgba(0,197,130,.14),transparent 65%);pointer-events:none}
.hero .container{position:relative;z-index:1}
.bento{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
.bento-main{grid-column:1/-1}
.bento-cell{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.8rem;backdrop-filter:blur(14px);box-shadow:var(--shadow-md)}
.bento-main{padding:clamp(1.8rem,4vw,3rem)}
.bento-main h1{margin-bottom:1rem}
.bento-main .lead{max-width:560px}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.stat-big{font-size:2.2rem;font-weight:800;font-family:var(--font-display);color:var(--bull)}
.stat-big.system{color:var(--system)}
.stat-label{font-size:.82rem;color:var(--text-muted);margin-top:.2rem}
@media (min-width:780px){.bento{grid-template-columns:repeat(3,1fr)}.bento-main{grid-column:span 2;grid-row:span 2}}

/* TICKER MARQUEE */
.ticker-section{padding:1.2rem 0;background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ticker-viewport{overflow:hidden;width:100%}
.ticker-marquee{display:flex;width:max-content}
.ticker-track{display:flex;align-items:center;gap:2.4rem;padding-right:2.4rem;animation:ticker 32s linear infinite;white-space:nowrap}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track{animation-play-state:paused}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
.ticker-item{display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-variant-numeric:tabular-nums}
.ticker-sym{font-weight:700;color:var(--text)}
.ticker-px{color:var(--text-muted)}
.ticker-chg{font-weight:700}
.ticker-chg.up{color:var(--bull)}
.ticker-chg.down{color:var(--bear)}

/* PANEL GRID / CARDS */
.panel-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:640px){.panel-grid.cols-2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:780px){.panel-grid.cols-3{grid-template-columns:repeat(3,1fr)}.panel-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.7rem;transition:transform .2s ease,border-color .2s ease}
.panel:hover{transform:translateY(-4px);border-color:var(--system)}
.panel .icon{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--glass);border:1px solid var(--glass-border);margin-bottom:1rem;font-size:1.4rem}
.panel h3{margin-bottom:.55rem}
.panel p{font-size:.92rem}
@media (prefers-reduced-motion:reduce){.panel{transition:none}}

/* TABS */
.tab-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.8rem}
.tab-btn{padding:.7rem 1.3rem;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--text-muted);background:var(--bg-panel);border:1px solid var(--border);transition:.2s}
.tab-btn:hover{color:var(--text)}
.tab-btn.is-active{background:var(--system);color:#fff;border-color:var(--system)}
.tab-panel{display:none;animation:fade .3s ease}
.tab-panel.is-active{display:block}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}

/* SEG CONTROL */
.seg-control{display:inline-flex;background:var(--bg-panel);border:1px solid var(--border);border-radius:999px;padding:.3rem;gap:.3rem;margin-bottom:1.6rem}
.seg-btn{padding:.55rem 1.2rem;border-radius:999px;font-weight:600;font-size:.88rem;color:var(--text-muted);transition:.2s}
.seg-btn.is-active{background:var(--cta);color:var(--cta-ink)}
.seg-panel{display:none}
.seg-panel.is-active{display:block}

/* COMPARISON / DENSE TABLES */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel)}
.matrix{min-width:560px;font-size:.9rem}
.matrix th,.matrix td{padding:.95rem 1.1rem;text-align:left;border-bottom:1px solid var(--border-soft)}
.matrix thead th{background:var(--bg-panel-2);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-weight:700}
.matrix tbody tr:hover{background:var(--bg-panel-2)}
.matrix td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}
.matrix td.yes{color:var(--bull);font-weight:700}
.matrix td.no{color:var(--bear);font-weight:700}
.matrix tr:last-child td{border-bottom:none}
.matrix .row-label{font-weight:600;color:var(--text)}

/* STEPS */
.steps{display:grid;grid-template-columns:1fr;gap:1.2rem;counter-reset:step}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:780px){.steps.four{grid-template-columns:repeat(4,1fr)}.steps.three{grid-template-columns:repeat(3,1fr)}}
.step{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.8rem 1.5rem 1.5rem;counter-increment:step}
.step::before{content:counter(step);position:absolute;top:-16px;left:1.5rem;width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--cta),var(--bull));color:var(--cta-ink);display:grid;place-items:center;font-weight:800;font-family:var(--font-display)}
.step h3{margin:.6rem 0 .5rem;font-size:1.1rem}
.step p{font-size:.9rem}

/* ACCORDIONS (FAQ / generic / checklist) */
.accordion,.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.accordion-item,.faq-item,.checklist-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}
.accordion-trigger{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;text-align:left;padding:1.15rem 1.3rem;font-weight:600;font-size:1rem;color:var(--text)}
.accordion-trigger::after{content:"+";font-size:1.4rem;color:var(--cta);transition:transform .25s ease;line-height:1}
.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 1.2rem}
@media (prefers-reduced-motion:reduce){.accordion-body,.faq-body,.checklist-body{transition:none}}
.checklist-trigger::before{content:"\2713";color:var(--bull);font-weight:800;margin-right:.6rem}

/* EXPAND CARDS */
.expand-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.expand-trigger{width:100%;text-align:left;padding:1.4rem;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.expand-trigger::after{content:"\203A";font-size:1.5rem;color:var(--cta);transition:transform .25s}
.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:600px}
.expand-body>*{padding:0 1.4rem 1.4rem}
@media (prefers-reduced-motion:reduce){.expand-body{transition:none}}

/* PLATFORM MOCK FRAME */
.mock-frame{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.mock-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem 1rem;background:var(--bg-panel-2);border-bottom:1px solid var(--border)}
.mock-dot{width:11px;height:11px;border-radius:50%;background:var(--border)}
.mock-dot:nth-child(1){background:var(--bear)}
.mock-dot:nth-child(2){background:var(--cta)}
.mock-dot:nth-child(3){background:var(--bull)}
.mock-body{padding:1.5rem;display:grid;gap:.8rem}
.mock-row{display:flex;justify-content:space-between;font-size:.85rem;font-variant-numeric:tabular-nums;padding:.5rem .7rem;border-radius:6px;background:var(--bg-base)}
.mock-row .up{color:var(--bull)}
.mock-row .down{color:var(--bear)}

/* CTA BANDS (dark) */
.cta-band{background:var(--dark);color:#f4f6f9;border-radius:var(--radius-lg);padding:clamp(2.2rem,5vw,3.6rem);text-align:center;position:relative;overflow:hidden;border:1px solid var(--border)}
.cta-band *{color:inherit}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(245,166,35,.18),transparent 60%),radial-gradient(circle at 80% 80%,rgba(59,130,246,.18),transparent 60%);pointer-events:none}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{margin-bottom:.8rem}
.cta-band p{color:#c5cbd6;max-width:560px;margin:0 auto 1.6rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}
.cta-band .btn-secondary{color:#f4f6f9}

/* EDITORIAL HERO */
.editorial-hero{padding-top:clamp(3rem,7vw,5rem)}
.editorial-hero .eyebrow{color:var(--cta)}
.editorial-hero .lead{max-width:680px}

/* TIMELINE */
.timeline{max-width:760px;margin:0 auto;position:relative;padding-left:2rem}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:2rem}
.timeline-item::before{content:"";position:absolute;left:-2rem;top:5px;width:16px;height:16px;border-radius:50%;background:var(--cta);border:3px solid var(--bg-base)}
.timeline-year{font-family:var(--font-display);font-weight:800;color:var(--bull);font-size:1.1rem}
.timeline-item h3{margin:.3rem 0 .4rem;font-size:1.15rem}

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

/* CONTACT */
.contact-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:2rem;backdrop-filter:blur(12px)}
.contact-card .row{display:flex;gap:.8rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--border-soft)}
.contact-card .row:last-child{border-bottom:none}
.contact-card .row strong{display:block}
.hours-table th,.hours-table td{padding:.8rem 1rem;border-bottom:1px solid var(--border-soft);text-align:left;font-size:.92rem}
.hours-table td.num{text-align:right;font-variant-numeric:tabular-nums}

/* SELECTION GUIDE */
.guide-grid{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media (min-width:780px){.guide-grid{grid-template-columns:repeat(3,1fr)}}
.guide-card{background:var(--bg-panel);border:1px solid var(--border);border-left:3px solid var(--cta);border-radius:var(--radius);padding:1.6rem}
.guide-card h3{margin-bottom:.5rem}

/* FAQ SEARCH + CATEGORIES */
.faq-search{max-width:620px;margin:0 auto 1.6rem}
.faq-search input{width:100%;padding:1rem 1.2rem;border-radius:var(--radius-sm);background:var(--bg-panel);border:1px solid var(--border);color:var(--text);font-size:1rem}
.faq-search input:focus{outline:none;border-color:var(--system)}
.faq-cats{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.8rem}
.faq-cat{padding:.5rem 1.1rem;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border);font-size:.85rem;color:var(--text-muted)}
.faq-cat:hover{color:var(--text);border-color:var(--system)}
.faq-item.is-hidden{display:none}

/* TOC */
.toc{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.6rem 1.8rem;max-width:820px;margin:0 auto 2rem}
.toc h3{margin-bottom:.8rem;font-size:1rem}
.toc ol{padding-left:1.2rem;color:var(--text-muted)}
.toc ol li{margin-bottom:.4rem}
.toc ol li a:hover{color:var(--cta)}

/* LEGAL BODY */
.legal-body{max-width:820px;margin:0 auto}
.legal-body h3{margin:2rem 0 .7rem}
.legal-body p{margin-bottom:1rem}
.legal-body ul{padding-left:1.3rem;margin-bottom:1rem;list-style:disc;color:var(--text-muted)}
.legal-body ul li{margin-bottom:.4rem}

/* RISK SECTION (dark callout) */
.risk-callout{background:var(--dark);color:#f4f6f9;border:1px solid var(--bear);border-radius:var(--radius);padding:1.8rem;max-width:820px;margin:0 auto}
.risk-callout *{color:inherit}
.risk-callout h3{color:var(--bear)}
.risk-callout p{color:#c5cbd6;margin-top:.6rem}

/* SECURITY / TIPS LIST */
.tip-list{max-width:760px;margin:0 auto;display:grid;gap:.8rem}
.tip-list li{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1rem 1.2rem;display:flex;gap:.8rem;align-items:flex-start;font-size:.92rem;color:var(--text-muted)}
.tip-list li::before{content:"\2713";color:var(--bull);font-weight:800;flex-shrink:0}

/* DUAL CTA */
.dual-cta{display:grid;grid-template-columns:1fr;gap:1.2rem;max-width:900px;margin:0 auto}
@media (min-width:640px){.dual-cta{grid-template-columns:repeat(2,1fr)}}
.dual-cta .cta-band{text-align:left}

/* CROSS LINKS */
.cross-links{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.cross-links{grid-template-columns:repeat(2,1fr)}}
.cross-link{display:flex;justify-content:space-between;align-items:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;font-weight:600;transition:.2s}
.cross-link:hover{border-color:var(--cta);color:var(--cta)}
.cross-link::after{content:"\2192";color:var(--cta)}

/* TIER TABLE highlight */
.matrix tr.highlight{background:rgba(245,166,35,.08)}
.matrix tr.highlight .row-label{color:var(--cta)}

/* INTRO / WINNER HERO */
.winner-intro{padding-top:clamp(2.6rem,6vw,4.5rem)}
.winner-intro .container{max-width:840px;text-align:center}
.winner-intro .lead{max-width:640px;margin:1rem auto 1.6rem}
.intro-actions{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

/* PILL TAGS */
.pill{display:inline-block;padding:.25rem .7rem;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em}
.pill.bull{background:rgba(0,197,130,.14);color:var(--bull)}
.pill.system{background:rgba(59,130,246,.14);color:var(--system)}
.pill.cta{background:rgba(245,166,35,.14);color:var(--cta)}

/* notice */
.notice{background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.2rem 1.4rem;font-size:.9rem;color:var(--text-muted);max-width:820px;margin:1.4rem auto 0}