@font-face{font-family:Font;font-style:normal;font-weight:300;font-display:swap;src:url(../fonts/f_300.woff2) format("woff2")}
@font-face{font-family:Font;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/f_400.woff2) format("woff2")}
@font-face{font-family:Font;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/f_500.woff2) format("woff2")}
:root{--color-primary:#4f46e5;--color-primary-dark:#4338ca;--color-primary-light:#818cf8;--color-surface-dark:#0f172a;--color-surface-card:#1e293b;--color-bg-light:#f8fafc;--color-bg-white:#fff;--color-text-main:#1e293b;--color-text-muted:#64748b;--color-text-light:#f1f5f9;--color-border:#e2e8f0;--color-star:#fbbf24;--font-display:Font,sans-serif;--font-body:Font,sans-serif;--spacing-container:75rem;--spacing-sm:1rem;--spacing-md:2rem;--spacing-lg:4rem;--spacing-xl:6.25rem;--border-thin:.0625rem;--border-radius-sm:.35rem;--border-radius-lg:1rem;--border-radius-pill:6.25rem}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:100%}
@keyframes fadeIn {
from{opacity:0}
to{opacity:1}
}
body{font-family:var(--font-body);font-weight:300;color:var(--color-text-main);background-color:var(--color-bg-light);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:500;line-height:1.2;color:var(--color-text-main)}
a{text-decoration:none;color:inherit;transition:color .2s ease}
img{max-width:100%;display:block}
.container{max-width:var(--spacing-container);margin:0 auto;padding:0 1.5rem}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-md)}
.text-center{text-align:center}
.text-primary{color:var(--color-primary)}
.text-white{color:#fff}
.text-muted{color:var(--color-text-muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:var(--border-radius-sm);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;font-family:var(--font-body);gap:.5rem}
.btn-primary{background-color:var(--color-primary);color:#fff;border:var(--border-thin) solid var(--color-primary)}
.btn-primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark);transform:translateY(-0.125rem)}
.btn-outline{background-color:transparent;color:var(--color-text-main);border:var(--border-thin) solid var(--color-border)}
.btn-outline:hover{border-color:var(--color-text-main);background-color:#fff}
.btn-outline-white{background-color:transparent;color:#fff;border:var(--border-thin) solid #ffffff4d}
.btn-outline-white:hover{background-color:#ffffff1a;border-color:#fff}
.btn-sm{padding:.5rem 1rem;font-size:.875rem}
.btn-block{display:flex;width:100%}
header{position:fixed;top:0;width:100%;background:#fffffff2;backdrop-filter:blur(0.625rem);border-bottom:var(--border-thin) solid var(--color-border);z-index:1000;height:4rem}
.header-inner{height:4rem;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.5rem;font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--color-text-main)}
.logo-icon{color:var(--color-primary);font-size:2rem}
.nav-group{display:flex;align-items:center;gap:2rem}
.nav-links{display:flex;gap:2rem}
.nav-links a{font-weight:500;font-size:.95rem;color:var(--color-text-muted);position:relative}
.nav-links a:hover{color:var(--color-primary)}
.nav-controls{display:flex;align-items:center;gap:1rem;border-left:var(--border-thin) solid var(--color-border);padding-left:1.5rem}
.lang-dropdown{position:relative;cursor:pointer;padding:.5rem}
.lang-trigger{display:flex;align-items:center;gap:.25rem;font-size:.875rem;font-weight:500;color:var(--color-text-main)}
.lang-menu{position:absolute;top:135%;right:0;background:#fff;border:var(--border-thin) solid var(--color-border);border-radius:var(--border-radius-sm);box-shadow:0 .625rem 2rem #0000001a;width:18rem;display:none;grid-template-columns:1fr 1fr;padding:.5rem;z-index:100}
.lang-menu::before{content:'';position:absolute;top:-35%;left:0;right:0;height:35%;background:transparent}
.lang-dropdown:hover .lang-menu{display:grid}
.lang-item{padding:.5rem 1rem;font-size:.875rem;color:var(--color-text-muted);border-radius:.25rem;cursor:pointer}
.lang-item:hover{background:var(--color-bg-light);color:var(--color-primary)}
.theme-toggle{background:none;border:none;cursor:pointer;color:var(--color-text-muted);display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:50%;transition:background .2s}
.theme-toggle:hover{background:var(--color-bg-light);color:var(--color-text-main)}
@media (max-width: 62rem) {
.nav-links{display:none}
.nav-controls{border-left:none}
}
.hero{padding:8rem 0 4.25rem;background-color:var(--color-bg-white);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:#e0e7ff;color:var(--color-primary);padding:.25rem .75rem;border-radius:var(--border-radius-pill);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.5rem}
.hero-badge .icon{animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.1)}}
.hero h1{font-size:4rem;line-height:1.1;margin-bottom:1.5rem;letter-spacing:-.03em}
.hero p{font-size:1.25rem;color:var(--color-text-muted);margin-bottom:2.5rem;max-width:90%}
.hero-actions{display:flex;gap:1rem}
.hero-image-wrapper{position:relative;display:flex;justify-content:center;align-items:center}
.hero-image-wrapper img{max-height:31.25rem;object-fit:contain;filter:drop-shadow(0 1.25rem 2.5rem #4f46e526);animation:float 6s ease-in-out infinite}
.floating-stat{position:absolute;background:#fff;padding:.5rem 1rem;border-radius:.35rem;box-shadow:0 .625rem 1.875rem #0000001a;display:flex;align-items:center;gap:1rem;border:var(--border-thin) solid var(--color-border)}
.stat-1{top:10%;right:0}
.stat-2{bottom:15%;left:0}
.stat-label{font-size:.75rem;color:#64748b}
.stat-value{font-weight:500;color:#4f46e5;line-height:1}
html[data-theme="dark"] .floating-stat{background:#1e293b;border-color:#334155;box-shadow:0 .625rem 1.875rem #0000004d}
html[data-theme="dark"] .stat-label{color:#94a3b8}
html[data-theme="dark"] .stat-value{color:#818cf8}
@keyframes float {
0%{transform:translateY(0)}
50%{transform:translateY(-1.25rem)}
100%{transform:translateY(0)}
}
@media (max-width: 62rem) {
.hero-grid{grid-template-columns:1fr;text-align:center}
.hero h1{font-size:3rem}
.hero p{margin:0 auto 2.5rem}
.hero-actions{justify-content:center}
.hero-image-wrapper{margin-top:3rem}
}
.benefits{padding:6.25rem 0;background-color:var(--color-bg-light)}
.section-header{text-align:center;max-width:43.75rem;margin:0 auto 4rem}
.section-header h2{font-size:2.5rem;margin-bottom:1rem}
.section-header p{color:var(--color-text-muted);font-size:1.1rem}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(15.625rem,1fr));gap:2rem}
.benefit-card{background:#fff;padding:2rem;border-radius:var(--border-radius-sm);border:var(--border-thin) solid var(--color-border);transition:transform .3s ease,box-shadow .3s ease}
.benefit-card:hover{transition:.6s;border-color:var(--color-primary-light)}
.benefit-icon{width:3rem;height:3rem;background:#e0e7ff;color:var(--color-primary);border-radius:.625rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}
.benefit-card h3{margin-bottom:.75rem;font-size:1.25rem}
.benefit-card p{color:var(--color-text-muted);font-size:.95rem;line-height:1.5}
.best-tests{padding:6.25rem 0;background-color:var(--color-surface-dark);color:#fff}
.best-tests h2{color:#fff}
.test-controls{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;flex-wrap:wrap;gap:1rem}
.filter-bar{display:flex;gap:.75rem;background:#ffffff0d;padding:.5rem;border-radius:.5rem;border:var(--border-thin) solid #ffffff1a}
.tests-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media (max-width: 48rem) {
.tests-grid{grid-template-columns:1fr}
}
.test-card{background:var(--color-surface-card);border:var(--border-thin) solid #ffffff1a;border-radius:var(--border-radius-sm);overflow:hidden;transition:all .3s ease;position:relative;display:flex;flex-direction:column}
.test-card:hover{border-color:var(--color-primary);transform:translateY(-0.3125rem);box-shadow:0 0 1.25rem #4f46e533}
.rank-badge{position:absolute;top:1rem;left:1rem;width:2rem;height:2rem;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.875rem;z-index:10;box-shadow:0 .25rem .5rem #0003}
.test-image{height:20rem;width:100%;object-fit:cover;opacity:.8;transition:opacity .3s}
.test-card:hover .test-image{opacity:1}
.test-content{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column}
.test-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}
.test-header h3{color:#fff;font-size:1.25rem}
.rating{display:flex;align-items:center;gap:.125rem;color:var(--color-star);font-size:.875rem;margin-bottom:.75rem}
.rating .material-symbols-outlined{font-size:1.125rem}
.rating span{color:#94a3b8;margin-left:.25rem;font-weight:500}
.test-desc{color:#cbd5e1;margin-bottom:1.5rem;line-height:1.5;flex-grow:1}
.test-meta{display:flex;gap:1rem;font-size:.8rem;color:#64748b;margin-bottom:1.5rem;padding-top:1rem;border-top:var(--border-thin) solid #ffffff1a}
.quote-section{padding:6.25rem 0;background:linear-gradient(135deg,var(--color-primary-light) 0%,#a5b4fc 100%);text-align:center;overflow:hidden}
.quote-wrapper{max-width:50rem;margin:0 auto;background:#ffffffe6;padding:3rem;border-radius:.35rem;box-shadow:0 1.25rem 2.5rem #0000001a;position:relative}
.quote-icon{font-size:3rem;opacity:.3;color:var(--color-primary);margin-bottom:1rem}
.carousel-viewport{overflow:hidden;width:100%}
.carousel-track{display:flex;width:300%;animation:slideQuotes 18s cubic-bezier(0.4,0,0.2,1) infinite}
.quote-slide{width:33.333%;flex-shrink:0;padding:0 1rem;opacity:0;animation:fadeText 18s infinite}
.quote-text{font-family:var(--font-display);font-size:1.5rem;font-weight:400;margin-bottom:2rem;color:var(--color-text-main);min-height:6rem;display:flex;align-items:center;justify-content:center}
.quote-author{display:flex;align-items:center;justify-content:center;gap:1rem}
.quote-author img{width:3.125rem;height:3.125rem;border-radius:50%;object-fit:cover}
@keyframes slideQuotes {
0%,30%{transform:translateX(0)}
33%,63%{transform:translateX(-33.333%)}
66%,96%{transform:translateX(-66.666%)}
100%{transform:translateX(0)}
}
@keyframes fadeText {
0%,5%{opacity:0}
10%,25%{opacity:1}
30%,35%{opacity:0}
43%,58%{opacity:1}
63%,68%{opacity:0}
76%,91%{opacity:1}
96%,100%{opacity:0}
}
.quote-slide{opacity:1;animation:none}
.how-to{padding:6.25rem 0;background-color:#fff}
.steps-container{display:flex;flex-direction:column;gap:3rem;max-width:50rem;margin:0 auto;position:relative}
.steps-container::before{content:"";position:absolute;left:1.5rem;top:0;bottom:0;width:.125rem;background:var(--color-border)}
.step-item{display:flex;gap:2rem;position:relative}
.step-number{width:3.125rem;height:3.125rem;background:#fff;border:.125rem solid var(--color-primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--color-primary);font-size:1.25rem;flex-shrink:0;z-index:2}
.step-content h3{font-size:1.5rem;margin-bottom:.5rem}
.step-content p{color:var(--color-text-muted)}
.what-is{padding:6.25rem 0;background-color:var(--color-bg-light)}
.info-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:4rem}
.text-block p{margin-bottom:1.5rem;font-size:1.1rem;color:var(--color-text-muted)}
.did-you-know{background:#fff;border-left:.25rem solid var(--color-primary);padding:1.5rem;border-radius:0 .5rem .5rem 0;margin-top:2rem;box-shadow:0 .25rem .375rem -.0625rem #0000000d}
.did-you-know div{margin-bottom:.5rem;font-size:1.1rem}
.did-you-know p{margin-bottom:0;font-size:.95rem}
.score-table-wrapper{background:#fff;border-radius:.75rem;box-shadow:0 .25rem 1.25rem #0000000d;overflow:hidden;border:var(--border-thin) solid var(--color-border)}
.score-header{background:var(--color-bg-light);padding:1rem 1.5rem;border-bottom:var(--border-thin) solid var(--color-border);font-weight:700}
table{width:100%;border-collapse:collapse}
td{padding:1rem 1.5rem;border-bottom:var(--border-thin) solid var(--color-border);font-size:.9rem}
tr:last-child td{border-bottom:none}
.score-val{font-weight:700;color:var(--color-primary)}
.score-pct{text-align:right;color:var(--color-text-muted)}
@media (max-width: 62rem) {
.info-grid{grid-template-columns:1fr}
}
.cta-section{background:var(--color-primary);padding:5rem 0;text-align:center;color:#fff}
.cta-section h2{color:#fff;margin-bottom:1rem;font-size:2.5rem}
.cta-section p{color:#fffc;max-width:37.5rem;margin:0 auto 2.5rem;font-size:1.1rem}
.cta-buttons{display:flex;gap:1rem;justify-content:center}
footer{background:var(--color-surface-dark);color:#94a3b8;padding:5rem 0 2.5rem;border-top:var(--border-thin) solid #334155}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;margin-bottom:4rem}
.footer-brand h4{color:#fff;font-size:1.5rem;margin-bottom:1rem}
.footer-links ul{list-style:none}
.footer-links li{margin-bottom:.75rem}
.footer-links a:hover{color:var(--color-primary-light)}
.footer-bottom{padding-top:2rem;border-top:var(--border-thin) solid #334155;font-size:.875rem;text-align:center}
@media (max-width: 48rem) {
.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
.footer-bottom{flex-direction:column;gap:1rem}
}
@media (max-width: 30rem) {
.footer-grid{grid-template-columns:1fr;gap:2rem}
}
.ml-sm{margin-left:.5rem}
.icon-sm{font-size:1rem}
.icon-xs{font-size:.875rem;vertical-align:middle}
.btn-borderless{border:none}
.btn-flex{display:flex;align-items:center;gap:.25rem}
.filter-btn{color:#94a3b8}
.filter-divider{width:1px;background:#fff3;margin:0 .5rem}
.test-section-header{max-width:30rem}
.rank-badge-secondary{background:#334155}
.rankings-footer{margin-top:4rem;text-align:center}
.quote-author-info{text-align:left}
.quote-author-name{display:block;font-weight:700;font-style:normal}
.quote-author-title{font-size:.875rem;color:var(--color-text-muted)}
.quote-author-avatar{width:3.125rem;height:3.125rem;background:#e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--color-text-muted)}
.score-row-highlight{background-color:var(--color-bg-light)}
.score-val-main{color:var(--color-text-main)}
.score-val-muted{color:var(--color-text-muted)}
.btn-cta{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.5rem;border-radius:var(--border-radius-sm);font-weight:600;font-size:1rem;cursor:pointer;transition:all .2s ease;font-family:var(--font-body);gap:.5rem;text-decoration:none}
.btn-light{background:#fff;color:var(--color-primary)}
.btn-outline-secondary{background:transparent;color:#fff;border:var(--border-thin) solid #fff6}
.logo-footer{color:#fff;margin-bottom:1rem;display:inline-flex}
.star-empty{color:#475569}
.btn-primary.active,.filter-btn.active{background-color:var(--color-primary)!important;color:#fff!important;border-color:var(--color-primary)!important}
.methodology{padding:5rem 0;background:linear-gradient(135deg,#f8fafc 0%,#e0e7ff 100%)}
.methodology-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.methodology-card{background:#fff;padding:2rem;border-radius:var(--border-radius-sm);border:var(--border-thin) solid var(--color-border);transition:transform .3s ease,box-shadow .3s ease;text-align:center}
.methodology-card:hover{transition:.6s;border-color:var(--color-primary-light)}
.methodology-icon{font-size:2.5rem;color:var(--color-primary);margin-bottom:1rem}
.methodology-card h3{font-size:1.1rem;margin-bottom:.75rem;color:var(--color-text-main)}
.methodology-card p{font-size:.9rem;color:var(--color-text-muted);line-height:1.6}
@media (max-width: 62rem) {
.methodology-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 36rem) {
.methodology-grid{grid-template-columns:1fr}
}
html[data-theme="dark"] .methodology{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%)}
html[data-theme="dark"] .methodology-card{background:#1e293b;border-color:#334155}
html[data-theme="dark"] .methodology-card:hover{border-color:var(--color-primary-light)}
.test-card{opacity:1;animation:fadeIn .3s ease-in}
.test-card.show{animation:fadeIn .3s ease-in}
html[data-theme="dark"]{--color-bg-light:#0f172a;--color-bg-white:#1e293b;--color-text-main:#f1f5f9;--color-text-muted:#94a3b8;--color-border:#334155}
html[data-theme="dark"] header{background:#0f172a98}
html[data-theme="dark"] .lang-menu{background:#1e293b}
html[data-theme="dark"] .lang-item:hover{background:#334155}
html[data-theme="dark"] .benefit-card{background:#1e293b}
html[data-theme="dark"] .btn-outline{background-color:transparent;color:#f1f5f9;border:var(--border-thin) solid #334155}
html[data-theme="dark"] .btn-outline:hover{border-color:#f1f5f9;background-color:#334155}
html[data-theme="dark"] .quote-wrapper{background:#1e293b}
html[data-theme="dark"] .quote-text{color:#f1f5f9}
html[data-theme="dark"] .score-table-wrapper{background:#1e293b}
html[data-theme="dark"] .score-header{background:#334155}
html[data-theme="dark"] td{border-bottom-color:#334155}
html[data-theme="dark"] .did-you-know{background:#334155}
html[data-theme="dark"] .steps-container::before{background:#334155}
html[data-theme="dark"] .how-to{background:#0f172a}
html[data-theme="dark"] .step-number{background:#1e293b;border-color:#818cf8;color:#818cf8}
html[data-theme="dark"] .step-content h3{color:#f1f5f9}
.about-section{padding:5rem 0;background-color:var(--color-bg-white)}
.about-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:4rem;align-items:start}
.about-content .section-header{text-align:left;margin:0 0 2rem}
.about-content p{color:var(--color-text-muted);margin-bottom:1.5rem;font-size:1.05rem;line-height:1.7}
.trust-badges{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
.trust-badge{display:flex;align-items:center;gap:.5rem;background:#e0e7ff;color:var(--color-primary);padding:.5rem 1rem;border-radius:var(--border-radius-pill);font-size:.875rem;font-weight:500}
.trust-badge .material-symbols-outlined{font-size:1.25rem}
.editorial-team{background:var(--color-bg-light);padding:2rem;border-radius:var(--border-radius-sm);border:var(--border-thin) solid var(--color-border)}
.editorial-team h3{margin-bottom:1.5rem;font-size:1.25rem;color:var(--color-text-main)}
.author-card{display:flex;gap:1rem;padding:1rem 0;border-bottom:var(--border-thin) solid var(--color-border)}
.author-card:last-child{border-bottom:none;padding-bottom:0}
.author-avatar{width:3.5rem;height:3.5rem;background:var(--color-primary);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.author-avatar .material-symbols-outlined{font-size:1.75rem}
.author-info h4{font-size:1rem;margin-bottom:.25rem;color:var(--color-text-main)}
.author-title{font-size:.8rem;color:var(--color-primary);font-weight:500;margin-bottom:.5rem;display:block}
.author-bio{font-size:.85rem;color:var(--color-text-muted);line-height:1.5;margin:0}
@media (max-width: 62rem) {
.about-grid{grid-template-columns:1fr}
}
html[data-theme="dark"] .editorial-team{background:#1e293b;border-color:#334155}
html[data-theme="dark"] .trust-badge{background:#334155;color:var(--color-primary-light)}
.references-section{padding:5rem 0;background-color:var(--color-bg-light)}
.references-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}
.reference-card{background:#fff;padding:1.5rem;border-radius:var(--border-radius-sm);border:var(--border-thin) solid var(--color-border)}
.reference-icon{font-size:2rem;color:var(--color-primary);margin-bottom:1rem}
.reference-card h3{font-size:1rem;margin-bottom:1rem;color:var(--color-text-main)}
.reference-list{list-style:none;padding:0;margin:0}
.reference-list li{font-size:.85rem;color:var(--color-text-muted);margin-bottom:.75rem;line-height:1.5}
.reference-list li:last-child{margin-bottom:0}
.reference-list a{color:var(--color-primary);text-decoration:underline}
.reference-list a:hover{color:var(--color-primary-dark)}
.affiliate-disclosure{background:#fef3c7;border:var(--border-thin) solid #fbbf24;border-radius:var(--border-radius-sm);padding:1.5rem;display:flex;gap:1rem;align-items:flex-start}
.affiliate-disclosure .material-symbols-outlined{color:#d97706;font-size:1.5rem;flex-shrink:0}
.affiliate-disclosure p{font-size:.9rem;color:#92400e;margin:0;line-height:1.6}
@media (max-width: 62rem) {
.references-grid{grid-template-columns:1fr}
}
html[data-theme="dark"] .reference-card{background:#1e293b;border-color:#334155}
html[data-theme="dark"] .affiliate-disclosure{background:#422006;border-color:#92400e}
html[data-theme="dark"] .affiliate-disclosure p{color:#fef3c7}
html[data-theme="dark"] .affiliate-disclosure .material-symbols-outlined{color:#fbbf24}
.icon{width:1.5rem;height:1.5rem;display:inline-block;vertical-align:middle;fill:currentColor;flex-shrink:0}
.icon.logo-icon{width:2rem;height:2rem;color:var(--color-primary)}
.icon.icon-sm{width:1rem;height:1rem}
.icon.icon-xs{width:.875rem;height:.875rem}
.icon.methodology-icon{width:2.5rem;height:2.5rem;color:var(--color-primary);margin-bottom:1rem;display:block;margin-left:auto;margin-right:auto}
.icon.quote-icon{width:3rem;height:3rem;opacity:.3;color:var(--color-primary);margin-bottom:1rem}
.icon.reference-icon{width:2rem;height:2rem;color:var(--color-primary);margin-bottom:1rem;display:block;margin-left:auto;margin-right:auto}
.benefit-icon .icon{width:1.5rem;height:1.5rem}
.rating .icon{width:1.125rem;height:1.125rem}
.trust-badge .icon{width:1.25rem;height:1.25rem}
.author-avatar .icon{width:1.75rem;height:1.75rem}
.affiliate-disclosure .icon{width:1.5rem;height:1.5rem;color:#d97706;flex-shrink:0}
html[data-theme="dark"] .affiliate-disclosure .icon{color:#fbbf24}

/* Flag Icons */
.flag-icon{width:1.25rem;height:1.25rem;border-radius:50%;overflow:hidden;flex-shrink:0;display:inline-block;vertical-align:middle;object-fit:cover}
.lang-trigger .flag-icon{width:1.5rem;height:1.5rem}
.lang-item{display:flex;align-items:center;gap:.5rem}
.lang-item .flag-icon{width:1.25rem;height:1.25rem}

.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:inline-block}
html[data-theme="dark"] .theme-toggle .icon-sun{display:inline-block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.faq-section{padding:5rem 0;background:var(--color-bg-surface)}
.faq-grid{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{background:#fff;border-radius:var(--border-radius-sm);border:var(--border-thin) solid var(--color-border);overflow:hidden;transition:border-color .3s ease}
.faq-item:hover{border-color:var(--color-primary-light)}
.faq-item.active{border-color:var(--color-primary)}
.faq-question{width:100%;padding:1.25rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;background:none;border:none;cursor:pointer;text-align:left;font-family:inherit;font-size:1.05rem;font-weight:400;color:var(--color-text-main);transition:color .3s ease}
.faq-question:hover{color:var(--color-primary)}
.faq-question span{flex:1}
.faq-icon{width:1.5rem;height:1.5rem;color:var(--color-text-muted);transition:transform .3s ease,color .3s ease;flex-shrink:0}
.faq-item.active .faq-icon{transform:rotate(180deg);color:var(--color-primary)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease,padding .3s ease}
.faq-item.active .faq-answer{max-height:500px}
.faq-answer p{padding:0 1.5rem 1.5rem;margin:0;color:var(--color-text-muted);line-height:1.7}
html[data-theme="dark"] .faq-item{background:#1e293b;border-color:#334155}
html[data-theme="dark"] .faq-item:hover{border-color:var(--color-primary-light)}
html[data-theme="dark"] .faq-item.active{border-color:var(--color-primary)}
html[data-theme="dark"] .faq-question{color:#f1f5f9}
html[data-theme="dark"] .faq-answer p{color:#94a3b8}
.mobile-menu-toggle{display:none;background:none;border:none;padding:.5rem;cursor:pointer;color:var(--color-text-main);z-index:1002}
.mobile-menu-toggle .icon{width:1.5rem;height:1.5rem}
.mobile-menu-toggle .icon-close{display:none}
.mobile-menu-toggle[aria-expanded="true"] .icon-menu{display:none}
.mobile-menu-toggle[aria-expanded="true"] .icon-close{display:inline-block}
.mobile-close-btn{display:none;position:absolute;top:1rem;right:1rem;background:none;border:none;padding:.5rem;cursor:pointer;color:var(--color-text-main)}
.mobile-close-btn .icon{width:1.5rem;height:1.5rem}
.mobile-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1001;display:none}
.mobile-overlay.active{opacity:1;visibility:visible}
@media (max-width: 992px) {
.mobile-menu-toggle{display:flex;align-items:center;justify-content:center}
.mobile-close-btn{display:block}
.mobile-overlay{display:block}
.nav-group{position:fixed;top:0;right:-100%;width:80%;max-width:320px;height:100vh;height:100dvh;background:#fff;flex-direction:column;padding:1.5rem;padding-top:3.5rem;gap:1.5rem;box-shadow:-4px 0 20px #00000026;transition:right .3s ease;z-index:1002;overflow-y:auto;display:flex}
.nav-group.active{right:0}
.nav-links{flex-direction:column;gap:0;order:2;display:flex!important}
.nav-links a{padding:1rem 0;border-bottom:1px solid var(--color-border);font-size:1.05rem;display:block}
.nav-links a:last-child{border-bottom:none}
.nav-controls{flex-direction:column;align-items:stretch;gap:1rem;width:100%;padding-top:0;border-top:none;order:1;padding-bottom:1rem;border-bottom:1px solid var(--color-border);margin-bottom:.5rem;padding-left:0;border-left:none}
.nav-controls .btn{width:100%;text-align:center;justify-content:center}
.nav-controls .ml-sm{margin-left:0}
.lang-dropdown{width:100%}
.lang-trigger{justify-content:center}
.theme-toggle{align-self:center}
html[data-theme="dark"] .nav-group{background:#0f172a;box-shadow:-4px 0 20px #0006}
}
@media (max-width: 576px) {
.nav-group{width:100%;max-width:none}
}
.back-to-top{position:fixed;bottom:2rem;right:2rem;width:46px;height:46px;border:none;background:var(--color-bg-card);border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .3s ease;box-shadow:0 4px 15px rgba(0,0,0,.15);z-index:999;display:flex;align-items:center;justify-content:center}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.back-to-top-icon{width:20px;height:20px;color:var(--color-primary);position:absolute}
.progress-ring{width:46px;height:46px;transform:rotate(-90deg);position:absolute}
.progress-ring-bg{fill:none;stroke:var(--color-border);stroke-width:3}
.progress-ring-circle{fill:none;stroke:var(--color-primary);stroke-width:3;stroke-linecap:round;stroke-dasharray:125.6;stroke-dashoffset:125.6;transition:stroke-dashoffset 0.1s ease}
html[data-theme="dark"] .back-to-top{background:#1e293b;box-shadow:0 4px 15px rgba(0,0,0,.4)}
html[data-theme="dark"] .back-to-top:hover{box-shadow:0 6px 20px rgba(0,0,0,.5)}
@media (max-width: 48rem){
.back-to-top{bottom:1.5rem;right:1.5rem;width:42px;height:42px}
.progress-ring{width:42px;height:42px}
.back-to-top-icon{width:18px;height:18px}
}