/* ===== NEXUS Components v1.0 ===== */
/* Depends on tokens.css */

/* ===== HERO ===== */
.hero{padding:clamp(40px,8vh,80px) 0;text-align:center}
.hero h1{font-size:var(--font-size-display);font-weight:900;margin-bottom:var(--space-3)}
.hero .subtitle{font-size:var(--font-size-lg);color:var(--color-muted);max-width:600px;margin:0 auto var(--space-6)}
.hero .hero-actions{display:flex;gap:var(--space-3);justify-content:center;flex-wrap:wrap}

/* ===== COMPARISON TABLE ===== */
.comp-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--font-size-sm)}
.comp-table th{background:var(--color-surface);color:var(--color-muted);font-weight:600;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;padding:var(--space-3);text-align:left;position:sticky;top:54px;z-index:10}
.comp-table td{padding:var(--space-3);border-bottom:1px solid var(--color-border);vertical-align:middle;min-height:var(--table-row-height)}
.comp-table tr:hover td{background:rgba(59,125,237,.04)}
.comp-table .brand-cell{display:flex;align-items:center;gap:var(--space-2);font-weight:600}
.comp-table .score-cell{text-align:center}
@media(max-width:768px){
  .comp-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .comp-table{min-width:640px}
}

/* ===== MOBILE COMPARISON CARD ===== */
.comp-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);display:none}
.comp-card .card-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}
.comp-card .card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.comp-card .card-ctas{display:flex;gap:var(--space-2);margin-top:var(--space-3)}
@media(max-width:768px){
  .comp-card{display:block}
  .comp-table-desktop{display:none}
}

/* ===== BRAND REVIEW CARD ===== */
.review-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);position:relative;overflow:hidden}
.review-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--color-primary);opacity:0;transition:opacity .2s}
.review-card:hover::before{opacity:1}
.review-card .rc-head{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4)}
.review-card .rc-score{flex-shrink:0}
.review-card .rc-name{font-size:var(--font-size-lg);font-weight:800}
.review-card .rc-tagline{color:var(--color-muted);font-size:var(--font-size-sm)}
.review-card .rc-badges{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-3)}
.review-card .rc-suit{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);margin-bottom:var(--space-4);font-size:var(--font-size-sm)}
.review-card .rc-suit-yes{color:var(--color-success)}
.review-card .rc-suit-no{color:var(--color-danger)}
.review-card .rc-ctas{display:flex;gap:var(--space-2);flex-wrap:wrap}

/* ===== TRUST BADGES ===== */
.trust-badges{display:flex;gap:var(--space-4);flex-wrap:wrap;font-size:var(--font-size-xs);color:var(--color-muted);align-items:center}
.trust-badge{display:flex;align-items:center;gap:4px}

/* ===== FAQ ACCORDION ===== */
.faq-section{max-width:720px}
.faq-item{border-bottom:1px solid var(--color-border);padding:var(--space-4) 0}
.faq-item summary{font-weight:600;font-size:var(--font-size-base);display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.faq-item summary::after{content:'+';color:var(--color-muted);font-size:1.2rem;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{content:'−';transform:rotate(180deg)}
.faq-item .faq-body{color:var(--color-muted);font-size:var(--font-size-sm);margin-top:var(--space-3);line-height:1.8;padding-bottom:var(--space-2)}

/* ===== DISCLOSURE ===== */
.disclosure{background:var(--color-bg2,var(--color-bg));border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);font-size:var(--font-size-xs);color:var(--color-muted);line-height:1.6}
.disclosure a{color:var(--color-primary)}

/* ===== RISK WARNING ===== */
.risk-bar{background:var(--color-bg2,#111328);border-bottom:1px solid var(--color-border);padding:5px 0;font-size:var(--font-size-xs);color:var(--color-muted);text-align:center}

/* ===== INTERNAL LINK CARD ===== */
.link-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);text-decoration:none!important;color:var(--color-text);transition:border-color .2s,background .15s}
.link-card:hover{border-color:var(--color-primary);background:rgba(59,125,237,.03)}
.link-card .lc-icon{font-size:1.1rem;flex-shrink:0}
.link-card .lc-text{flex:1;font-size:var(--font-size-sm);font-weight:500}
.link-card .lc-arrow{color:var(--color-primary);margin-left:auto;flex-shrink:0}

/* ===== RELATED ARTICLES ===== */
.related-block{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.related-block h3{font-size:var(--font-size-md);font-weight:700;margin-bottom:var(--space-3)}
.related-list{display:flex;flex-direction:column;gap:var(--space-2)}

/* ===== SECTION HEADING ===== */
.sec-head{margin-bottom:var(--space-6)}
.sec-head h2{font-size:var(--font-size-xl);font-weight:800;margin-bottom:var(--space-1)}
.sec-head p{color:var(--color-muted);font-size:var(--font-size-base)}

/* ===== TOOL RESULT PANEL ===== */
.tool-panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5)}
.tool-panel .tp-result{font-size:var(--font-size-2xl);font-weight:900;color:var(--color-primary);margin-bottom:var(--space-2)}
.tool-panel .tp-label{color:var(--color-muted);font-size:var(--font-size-sm)}

/* ===== HEADER ===== */
.site-header{position:sticky;top:0;z-index:100;background:rgba(11,13,25,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.site-header .hdr-inner{display:flex;align-items:center;justify-content:space-between;height:54px;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-5)}
.site-header .logo{display:flex;align-items:center;gap:8px;text-decoration:none}
.site-header .logo-icon{background:var(--color-primary);color:#fff;width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem}
.site-header .logo-text{color:var(--color-text);font-weight:800}
.site-header nav{display:flex;gap:20px;font-size:var(--font-size-sm);font-weight:500}
.site-header nav a{color:var(--color-muted);text-decoration:none;transition:color .15s}
.site-header nav a:hover,.site-header nav a.active{color:var(--color-text)}

/* ===== FOOTER ===== */
.site-footer{border-top:1px solid var(--color-border);padding:var(--space-8) 0;font-size:var(--font-size-xs);color:var(--color-muted)}
.site-footer a{color:var(--color-muted);transition:color .15s}
.site-footer a:hover{color:var(--color-primary)}

/* ===== CONCLUSION CARD ===== */
.conclusion-card{background:linear-gradient(135deg,var(--color-surface),var(--color-surface2,#1C1F3A));border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);margin-bottom:var(--space-6)}
.conclusion-card .cc-head{display:flex;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4)}
.conclusion-card h2{font-size:var(--font-size-lg);font-weight:800}
.conclusion-card .cc-body{color:var(--color-muted);font-size:var(--font-size-sm);line-height:1.8}

/* ===== STATE MANAGEMENT ===== */
.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.btn:active{transform:scale(.98)}
.btn.disabled,.btn:disabled{opacity:.5;pointer-events:none}
.btn.loading{position:relative;color:transparent}
.btn.loading::after{content:'';position:absolute;width:16px;height:16px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
details[open]>summary{color:var(--color-text)}
a:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}