/* ===== HUB & COMPONENT STYLES ===== */

/* PAGE HEADER */
.page-header{background:linear-gradient(160deg,#141820,#0B0E11);border-bottom:1px solid var(--border);padding:clamp(2.5rem,6vw,4.5rem) 0;color:#f4f6f9}
.page-header *{color:inherit}
.page-header h1{margin-bottom:.6rem}
.page-header p{color:var(--text-muted);max-width:60ch}
.breadcrumb{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:1rem}
.breadcrumb a:hover{color:var(--cta)}

/* HERO BENTO */
.hero{background:radial-gradient(circle at 80% -10%,rgba(0,197,130,.12),transparent 55%),linear-gradient(170deg,#141820,#0B0E11);border-bottom:1px solid var(--border);padding:clamp(2.5rem,6vw,5rem) 0;color:#f4f6f9}
.hero *{color:inherit}
.bento{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:780px){.bento{grid-template-columns:1.4fr 1fr;grid-auto-rows:1fr}}
.bento-main{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.5rem)}
.bento-main h1{margin-bottom:1rem}
.bento-main p{color:var(--text-muted);margin-bottom:1.5rem;font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.75rem}
.bento-side{display:grid;gap:1rem;grid-template-columns:1fr}
.bento-cell{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.25rem}
.bento-cell .stat-num{font-family:var(--font-mono);font-size:1.6rem;font-weight:700;color:var(--bull);font-variant-numeric:tabular-nums}
.bento-cell .stat-label{font-size:.82rem;color:var(--text-dim);margin-top:.25rem}

/* TICKER */
.ticker-viewport{overflow:hidden;background:var(--bg-panel);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.ticker-marquee{display:flex;width:max-content}
.ticker-track{display:flex;align-items:center;animation:ticker 38s linear infinite;flex-shrink:0}
.ticker-viewport:hover .ticker-track,.ticker-viewport:focus-within .ticker-track{animation-play-state:paused}
.ticker-item{display:flex;align-items:center;gap:.5rem;padding:.7rem 1.3rem;border-right:1px solid var(--border-soft);font-size:.85rem;white-space:nowrap}
.ticker-sym{font-weight:700;color:var(--text)}
.ticker-price{font-family:var(--font-mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
.ticker-chg{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:.8rem}
.ticker-chg.up{color:var(--bull)}
.ticker-chg.down{color:var(--bear)}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* WATCHLIST RAIL */
.watchlist-rail{display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.watchlist-rail{grid-template-columns:repeat(3,1fr)}}
@media(min-width:780px){.watchlist-rail{grid-template-columns:repeat(6,1fr)}}
.watch-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:.9rem}
.watch-card .sym{font-weight:700;font-size:.85rem}
.watch-card .price{font-family:var(--font-mono);font-size:1.05rem;margin:.3rem 0;font-variant-numeric:tabular-nums}
.watch-card .chg{font-family:var(--font-mono);font-size:.78rem;font-variant-numeric:tabular-nums}
.watch-card .chg.up{color:var(--bull)}
.watch-card .chg.down{color:var(--bear)}

/* PANELS / CARDS */
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--cta);transform:translateY(-3px)}
.card h3{margin-bottom:.6rem}
.card .card-icon{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--bg-elev);display:flex;align-items:center;justify-content:center;color:var(--cta);font-size:1.2rem;margin-bottom:1rem;font-weight:700}
.card p{font-size:.95rem}

/* TABS */
.tab-list{display:flex;flex-wrap:wrap;gap:.4rem;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tab-btn{padding:.7rem 1.1rem;font-weight:600;font-size:.92rem;color:var(--text-muted);border-bottom:2px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.tab-btn:hover{color:var(--text)}
.tab-btn.is-active{color:var(--cta);border-bottom-color:var(--cta);background:var(--bg-panel)}
.tab-panel{display:none}
.tab-panel.is-active{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}

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

/* COMPARISON MATRIX / TABLES */
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg-panel)}
.data-table{min-width:560px;font-size:.92rem}
.data-table th,.data-table td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--border-soft)}
.data-table thead th{background:var(--bg-panel-2);font-family:var(--font-display);font-size:.85rem;color:var(--text);position:sticky;top:0}
.data-table tbody tr:hover{background:var(--bg-elev)}
.data-table td.num,.data-table th.num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.data-table .highlight-col{color:var(--cta);font-weight:600}
.badge{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;font-family:var(--font-mono)}
.badge.bull{background:rgba(0,197,130,.15);color:var(--bull)}
.badge.bear{background:rgba(255,74,90,.15);color:var(--bear)}
.badge.sys{background:rgba(59,130,246,.15);color:var(--system)}
.badge.cta{background:rgba(240,185,11,.15);color:var(--cta)}
.tick{color:var(--bull);font-weight:700}
.cross{color:var(--bear);font-weight:700}

/* STEPS */
.steps{display:grid;gap:1rem;counter-reset:step}
@media(min-width:780px){.steps.steps-row{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.step{position:relative;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1.5rem 1.5rem 3.75rem;counter-increment:step}
.step::before{content:counter(step);position:absolute;left:1.25rem;top:1.5rem;width:34px;height:34px;border-radius:50%;background:var(--cta);color:var(--cta-ink);display:flex;align-items:center;justify-content:center;font-weight:700;font-family:var(--font-mono)}
.step h3{font-size:1.1rem;margin-bottom:.4rem}
.step p{font-size:.92rem}

/* TIMELINE */
.timeline{position:relative;padding-left:1.75rem;margin-top:1rem}
.timeline::before{content:'';position:absolute;left:6px;top:.4rem;bottom:.4rem;width:2px;background:var(--border)}
.timeline-item{position:relative;padding-bottom:1.8rem}
.timeline-item::before{content:'';position:absolute;left:-1.75rem;top:.35rem;width:14px;height:14px;border-radius:50%;background:var(--cta);border:3px solid var(--bg-base)}
.timeline-item .yr{font-family:var(--font-mono);color:var(--cta);font-weight:700;font-size:.85rem}
.timeline-item h4{margin:.2rem 0 .35rem}
.timeline-item p{font-size:.92rem}

/* MOCK FRAMES */
.mock-frame{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.mock-bar{display:flex;align-items:center;gap:.5rem;padding:.6rem .9rem;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.r{background:var(--bear)}.mock-dot.y{background:var(--cta)}.mock-dot.g{background:var(--bull)}
.mock-url{flex:1;background:var(--bg-base);border-radius:999px;padding:.3rem .8rem;font-family:var(--font-mono);font-size:.75rem;color:var(--text-dim)}
.mock-body{padding:1.5rem;min-height:220px;display:grid;gap:.75rem;background:repeating-linear-gradient(0deg,transparent,transparent 28px,var(--border-soft) 28px,var(--border-soft) 29px)}
.mock-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.85rem;font-variant-numeric:tabular-nums}
.mock-row .up{color:var(--bull)}.mock-row .down{color:var(--bear)}
.mock-chart{height:90px;background:linear-gradient(180deg,rgba(0,197,130,.18),transparent);border-bottom:2px solid var(--bull);border-radius:var(--radius-sm)}

/* FILTER CHIPS */
.chip-row{display:flex;flex-wrap:wrap;gap:.6rem}
.chip{padding:.5rem 1rem;border-radius:999px;background:var(--bg-panel);border:1px solid var(--border);font-size:.85rem;font-weight:600;color:var(--text-muted);transition:border-color .2s,color .2s}
.chip:hover,.chip.is-active{border-color:var(--cta);color:var(--cta)}

/* TRUST PANEL */
.trust-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:780px){.trust-grid{grid-template-columns:repeat(4,1fr)}}
.trust-item{text-align:center;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem}
.trust-item .num{font-family:var(--font-mono);font-size:1.8rem;font-weight:700;color:var(--cta);font-variant-numeric:tabular-nums}
.trust-item .lbl{font-size:.82rem;color:var(--text-dim);margin-top:.3rem}

/* CTA BAND */
.cta-band{background:linear-gradient(135deg,#141820,#1F222A);border:1px solid var(--border);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.5rem);text-align:center;color:#f4f6f9}
.cta-band *{color:inherit}
.cta-band h2{margin-bottom:.75rem}
.cta-band p{color:var(--text-muted);max-width:54ch;margin:0 auto 1.75rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center}
.dual-cta{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.dual-cta{grid-template-columns:repeat(2,1fr)}}
.dual-cta .cta-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center}
.dual-cta .cta-card h3{margin-bottom:.6rem}
.dual-cta .cta-card p{margin-bottom:1.25rem;font-size:.95rem}

/* ACCORDION */
.accordion-item,.faq-item,.checklist-item{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:.75rem;overflow:hidden}
.accordion-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:1.1rem 1.25rem;font-weight:600;font-size:1rem;color:var(--text);gap:1rem}
.accordion-trigger::after{content:'+';font-family:var(--font-mono);font-size:1.4rem;color:var(--cta);flex-shrink:0;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>div,.faq-body>div,.checklist-body>div{padding:0 1.25rem 1.25rem}
.accordion-body p,.faq-body p,.checklist-body p{font-size:.95rem}

/* EXPAND CARDS */
.expand-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:.75rem}
.expand-trigger{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;padding:1.1rem 1.25rem;font-weight:600;color:var(--text)}
.expand-trigger::after{content:'\25BE';color:var(--cta);transition:transform .2s}
.expand-card.open .expand-trigger::after{transform:rotate(180deg)}
.expand-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.expand-card.open .expand-body{max-height:600px}
.expand-body>div{padding:0 1.25rem 1.25rem}

/* CHECKLIST */
.checklist-trigger{align-items:flex-start}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;padding:.4rem 0;font-size:.95rem;color:var(--text-muted)}
.check-list li::before{content:'\2713';color:var(--bull);font-weight:700;flex-shrink:0}

/* TOC */
.toc{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem}
.toc h4{margin-bottom:1rem}
.toc ol{list-style:decimal;padding-left:1.25rem}
.toc ol li{margin-bottom:.5rem}
.toc ol li a{color:var(--text-muted);font-size:.92rem}
.toc ol li a:hover{color:var(--cta)}

/* LEGAL BODY */
.legal-body{max-width:760px}
.legal-body h2{margin:2rem 0 .75rem;scroll-margin-top:80px}
.legal-body h3{margin:1.5rem 0 .5rem}
.legal-body p,.legal-body li{color:var(--text-muted);font-size:.96rem;margin-bottom:.85rem}
.legal-body ul{list-style:disc;padding-left:1.5rem;margin-bottom:1rem}

/* COMPLIANCE CALLOUT */
.callout{background:var(--bg-panel-2);border-left:3px solid var(--cta);border-radius:var(--radius-sm);padding:1.25rem 1.5rem}
.callout.warn{border-left-color:var(--bear)}
.callout p{font-size:.9rem;color:var(--text-muted)}
.callout h4{margin-bottom:.5rem}

/* INFO CARD */
.info-card{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);padding:1.75rem}
.info-row{display:flex;gap:.85rem;align-items:flex-start;padding:.9rem 0;border-bottom:1px solid var(--border-soft)}
.info-row:last-child{border-bottom:0}
.info-row .ico{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--bg-elev);display:flex;align-items:center;justify-content:center;color:var(--cta);flex-shrink:0}
.info-row .label{font-size:.78rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.08em}
.info-row .value{font-weight:600;color:var(--text)}

/* SEARCH BAR */
.search-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.search-bar input[type=search]{flex:1;min-width:200px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;color:var(--text)}
.search-bar input::placeholder{color:var(--text-dim)}
.search-bar input:focus{outline:none;border-color:var(--cta)}

/* DARK SECTION */
.dark-section{background:#141820;color:#f4f6f9;border-radius:var(--radius-lg);padding:clamp(1.75rem,4vw,2.75rem)}
.dark-section *{color:inherit}
.dark-section p{color:var(--text-muted)}

/* VALUES / FEATURE GRID generic */
.feature-list{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:640px){.feature-list{grid-template-columns:repeat(2,1fr)}}

/* PROMO CODE BOX */
.promo-box{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--bg-panel);border:1px dashed var(--cta);border-radius:var(--radius);padding:1.25rem 1.5rem;flex-wrap:wrap}
.promo-code{font-family:var(--font-mono);font-size:1.4rem;font-weight:700;color:var(--cta);letter-spacing:.12em}