@font-face{font-family:B2B;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/b2b_300.woff2) format("woff2")}
@font-face{font-family:B2B;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/b2b_400.woff2) format("woff2")}
@font-face{font-family:B2B;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/b2b_500.woff2) format("woff2")}
:root{--bg:#e4ebec;--box-bg:#fff;--text:#1f2937;--text-secondary:#6b7280;--accent:#3b82f6;--accent-hover:#2563eb;--border:#e5e7eb;--icon-bg:#eff6ff;--shadow:0 .0625rem .1875rem #00000014;--shadow-lg:0 .25rem 1.5rem #00000014;--radius:.25rem;--success:#48bb78;--error:#e53e3e}
[data-theme="dark"]{--bg:#1a1a2e;--box-bg:#1e293b;--text:#f1f5f9;--text-secondary:#94a3b8;--accent:#60a5fa;--accent-hover:#3b82f6;--border:#334155;--icon-bg:#3b82f626}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:'B2B',Roboto,sans-serif;font-weight:300;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit;transition:color .2s}
img{max-width:100%;height:auto}
input,button,select,textarea{font-family:inherit;font-weight:300}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
b,strong{font-weight:400}
/* Layout */
.main-box{max-width:79rem;margin:0 auto;background:var(--box-bg);box-shadow:var(--shadow-lg);overflow:visible;min-height:100vh}
.page{padding:2.5rem}

/* Header */
header{position:sticky;top:0;z-index:100;background:var(--box-bg);border-bottom:.0625rem solid var(--border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.75rem 2rem;gap:1rem}
.logo{display:flex;align-items:center;gap:.25rem;font-weight:500;font-size:1.125rem;color:var(--text);flex-shrink:0}
.logo svg{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:.25rem}
.nav-links a{padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;color:var(--text-secondary);transition:all .2s}
.nav-links a:hover{color:var(--text);background:var(--icon-bg)}
.header-right{display:flex;align-items:center;gap:.75rem}
.theme-toggle{width:2.25rem;height:2.25rem;border-radius:var(--radius);border:.0625rem solid var(--border);background:var(--box-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .2s}
.theme-toggle:hover{background:var(--icon-bg);color:var(--text)}
.theme-toggle .icon-sun{display:none}
.theme-toggle .icon-moon{display:block}
[data-theme="dark"] .theme-toggle .icon-sun{display:block}
[data-theme="dark"] .theme-toggle .icon-moon{display:none}
.lang-select{height:2.25rem;padding:0 .75rem;border-radius:var(--radius);border:.0625rem solid var(--border);background:var(--box-bg);color:var(--text);font-size:.875rem;cursor:pointer}
.burger-btn{display:none;flex-direction:column;gap:.3125rem;padding:.5rem;background:none;border:none;cursor:pointer}
.burger-btn span{width:1.5rem;height:.125rem;background:var(--text);border-radius:var(--radius);transition:all .3s}

/* Buttons */
.cta-btn{background:var(--accent);color:#fff;height:2.25rem;padding:0 1.25rem;display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;transition:all .2s;border:none;cursor:pointer}
.cta-btn:hover{background:var(--accent-hover)}
.cta-btn-outline{background:transparent;color:var(--accent);border:.0625rem solid var(--accent);height:2.25rem;padding:0 1.25rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;display:inline-flex;align-items:center;transition:all .2s}
.cta-btn-outline:hover{background:var(--accent);color:#fff}

/* Hero */
.hero{text-align:center;padding:4rem 2.5rem 3rem}
.hero h1{font-size:2.5rem;line-height:1.2;margin-bottom:1rem;color:var(--text)}
.hero h1 .highlight{color:var(--accent)}
.hero>p{font-size:1.0625rem;color:var(--text-secondary);max-width:37.5rem;margin:0 auto 2rem}
.search-box{display:flex;align-items:center;max-width:37.5rem;margin:0 auto 1.5rem;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:.375rem .375rem .375rem 1.5rem;transition:all .2s;box-shadow:var(--shadow)}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 .25rem #3b82f61a}
.search-box svg{display:none}
.search-box input{flex:1;border:none;background:none;padding:.875rem 0;font-size:.9375rem;color:var(--text);outline:none}
.search-box input::placeholder{color:var(--text-secondary)}
.search-box button{background:var(--accent);color:#fff;border:none;padding:.875rem 1.75rem;border-radius:var(--radius);font-weight:500;font-size:.9375rem;cursor:pointer;transition:all .2s}
.search-box button:hover{background:var(--accent-hover)}
.hero-tags{display:flex;align-items:center;justify-content:center;gap:.75rem;flex-wrap:wrap;margin-top:1rem}
.hero-tags span{color:var(--text-secondary);font-size:.875rem}
.hero-tags a{padding:.375rem .875rem;background:var(--icon-bg);border-radius:var(--radius);font-size:.8125rem;color:var(--accent);transition:all .2s}
.hero-tags a:hover{background:var(--accent);color:#fff}
.hero-example{color:var(--text-secondary);font-size:.875rem;margin-top:.5rem}

/* Section */
.section{padding:3rem 2.5rem;border-top:.0625rem solid var(--border)}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem}
.section-header h2{font-size:1.375rem;color:var(--text)}
.view-all{display:flex;align-items:center;gap:.375rem;color:var(--accent);font-weight:500;font-size:.875rem;transition:all .2s}
.view-all:hover{gap:.625rem}

/* Features */
.features{padding:3rem 2.5rem}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feature-card{text-align:center;padding:2rem 1.5rem;background:var(--box-bg);border-radius:var(--radius);border:.0625rem solid var(--border);transition:all .3s}
.feature-card:hover{box-shadow:var(--shadow)}
.feature-icon{width:3.5rem;height:3.5rem;margin:0 auto 1.25rem;background:var(--icon-bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.feature-card h3{font-size:1rem;margin-bottom:.5rem;color:var(--text)}
.feature-card p{font-size:.875rem;color:var(--text-secondary);line-height:1.5}

/* Categories */
.categories-section{padding:3rem 2.5rem;border-top:.0625rem solid var(--border)}
.categories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.category-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--box-bg);border-radius:var(--radius);border:.0625rem solid var(--border);transition:all .2s}
.category-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.category-icon{width:3.25rem;height:3.25rem;background:var(--icon-bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.category-info h3{font-size:.9375rem;margin-bottom:.25rem;color:var(--text)}
.category-info span{font-size:.8125rem;color:var(--text-secondary)}

/* Tools Grid */
.tools-section{padding:3rem 2.5rem;border-top:.0625rem solid var(--border)}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr));gap:1.5rem}
.tool-card{background:var(--box-bg);border-radius:var(--radius);border:.0625rem solid var(--border);overflow:hidden;transition:all .3s}
.tool-card:hover{box-shadow:var(--shadow-lg);border-color:var(--accent)}
.tool-image{aspect-ratio:16/9;background:linear-gradient(135deg,var(--accent) 0%,#2563eb 100%);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.tool-image .tool-screenshot{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:0.6}
.tool-logo-overlay{position:relative;z-index:2;width:4rem;height:4rem;background:var(--box-bg);border-radius:.25rem;display:flex;align-items:center;justify-content:center;box-shadow:0 .25rem 1rem rgba(0,0,0,.15)}
.tool-logo-overlay .tool-logo{width:3rem;height:3rem;object-fit:contain;border-radius:.25rem}
.tool-logo-overlay .tool-initials{color:var(--accent);font-weight:500;font-size:1rem;letter-spacing:.05rem}
.tool-image span{color:#fff;font-weight:500;font-size:1.5rem;letter-spacing:.1rem}
.tool-content{padding:1.25rem}
.tool-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.tool-header h3{font-size:1rem;color:var(--text)}
.rating{display:flex;align-items:center;gap:.25rem;color:#f59e0b;font-weight:500;font-size:.875rem}
.tool-desc{font-size:.875rem;color:var(--text-secondary);margin-bottom:1rem;line-height:1.5}
.tool-tags{display:flex;gap:.5rem}
.tool-tag{padding:.25rem .625rem;border-radius:var(--radius);font-size:.75rem;font-weight:500;background:var(--icon-bg);color:var(--text-secondary)}
.tool-tag-primary{background:rgba(59,130,246,.1);color:var(--accent)}
.tool-rating{display:flex;align-items:center;gap:.25rem;color:#f59e0b;font-weight:500;font-size:.875rem}
.tool-category,.tool-pricing{padding:.25rem .625rem;border-radius:var(--radius);font-size:.75rem;font-weight:500;background:var(--icon-bg);color:var(--text-secondary)}
.tool-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent) 0%,#2563eb 100%);color:#fff;font-weight:500;font-size:1.5rem}

/* FAQ */
.faqs{padding:3rem 2.5rem;border-top:.0625rem solid var(--border)}
.faqs h2{text-align:center;margin-bottom:1rem}
.faq-list{max-width:50rem;margin:0 auto;display:flex;flex-direction:column;gap:.75rem}
.faq-item{background:var(--box-bg);border-radius:var(--radius);border:.0625rem solid var(--border);overflow:hidden;transition:all .2s}
.faq-item:hover{border-color:var(--accent)}
.faq-question{width:100%;padding:1.25rem 1.5rem;background:none;border:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;text-align:left}
.faq-question span{font-size:.9375rem;font-weight:500;color:var(--text)}
.faq-question svg{color:var(--text-secondary);transition:transform .3s;flex-shrink:0}
.faq-item.open .faq-question svg{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-item.open .faq-answer{max-height:18.75rem}
.faq-answer p{padding:0 1.5rem 1.25rem;font-size:.9375rem;color:var(--text-secondary);line-height:1.7}

/* Footer */
footer{padding:3rem 2.5rem 2rem;border-top:.0625rem solid var(--border)}
.footer-top{display:flex;gap:3.75rem;margin-bottom:2.5rem}
.footer-brand{flex:1;max-width:18.75rem}
.footer-logo{display:flex;align-items:center;gap:.25rem;font-weight:500;font-size:1.125rem;color:var(--text);margin-bottom:.75rem}
.footer-logo svg{color:var(--accent)}
.footer-brand p{font-size:.875rem;color:var(--text-secondary);line-height:1.6}
.footer-links{display:flex;gap:3rem;flex:2;justify-content:flex-end}
.footer-col a{display:block;font-size:.875rem;color:var(--text-secondary);margin-bottom:.625rem;transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:1.5rem;border-top:.0625rem solid var(--border)}
.footer-bottom p{font-size:.8125rem;color:var(--text-secondary)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-size:.8125rem;color:var(--text-secondary);transition:color .2s}
.footer-legal a:hover{color:var(--accent)}

/* Page Header (reusable) */
.page-header{display:flex;align-items:flex-start;gap:1.5rem;padding-bottom:2rem;border-bottom:.0625rem solid var(--border);margin-bottom:2rem}
.page-header-icon{width:4rem;height:4rem;border-radius:var(--radius);background:var(--icon-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.page-header-icon img{width:100%;height:100%;object-fit:cover}
.page-header-icon.gradient{background:linear-gradient(135deg,var(--accent) 0%,#2563eb 100%);color:#fff}
.page-header h1{font-size:1.75rem;color:var(--text);margin-bottom:.5rem}
.page-header p{color:var(--text-secondary);font-size:.9375rem;line-height:1.6}

/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--text-secondary);margin-bottom:.75rem}
.breadcrumb a{color:var(--text-secondary);transition:color .2s}
.breadcrumb a:hover{color:var(--accent)}
.breadcrumb svg{opacity:.5}

/* Detail Card (reusable) */
.card{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.5rem}
.card h2,.card h3{font-size:1.125rem;color:var(--text);margin-bottom:1rem}
.card p{color:var(--text-secondary);line-height:1.7;font-size:.9375rem}
.card.highlight{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,rgba(59,130,246,.02) 100%)}

/* Info List */
.info-list{list-style:none}
.info-list li{display:flex;justify-content:space-between;padding:.75rem 0;border-bottom:.0625rem solid var(--border);font-size:.875rem}
.info-list li:last-child{border-bottom:none}
.info-list li span:first-child{color:var(--text-secondary)}
.info-list li span:last-child{font-weight:500;color:var(--text)}
.info-list .category-link{font-weight:500;color:var(--primary);text-decoration:none;transition:color .2s}
.info-list .category-link:hover{color:var(--primary-dark);text-decoration:underline}

/* External Ratings Box */
.external-ratings-title{font-size:.8125rem;font-weight:500;color:var(--text-secondary);margin:1rem 0 .75rem;padding-top:1rem;border-top:.0625rem solid var(--border)}
.external-ratings-list{display:flex;flex-direction:column;gap:.5rem}
.external-rating-item{display:flex;align-items:center;justify-content:space-between;padding:.5rem .7rem;background:var(--bg);border-radius:.25rem;text-decoration:none;color:inherit;transition:background .2s}
.external-rating-item:hover{background:var(--border)}
.external-rating-source{display:flex;align-items:center;gap:.5rem;font-weight:500}
.external-rating-score{display:flex;align-items:center;gap:.25rem}
.external-rating-score .rating-value{font-weight:500}
.external-rating-score .rating-value.g2{color:#ff492c}
.external-rating-score .rating-value.capterra{color:#044d80}
.external-rating-score .rating-value.trustpilot{color:#00b67a}
.external-rating-score .rating-count{color:var(--text-secondary);font-size:.75rem}

/* Feature List */
.feature-list{list-style:none}
.feature-list li{display:flex;align-items:center;gap:.75rem;padding:.75rem 0;border-bottom:.0625rem solid var(--border);color:var(--text-secondary);font-size:.9375rem}
.feature-list li:last-child{border-bottom:none}

/* Pros/Cons */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.pros strong,.cons strong{font-weight:500;display:flex;align-items:center;gap:.5rem;font-size:1rem;margin-bottom:.75rem}
.pros strong{color:var(--success)}
.cons strong{color:var(--error)}
.pros ul,.cons ul{list-style:none}
.pros li,.cons li{padding:.375rem 0;color:var(--text-secondary);font-size:.9375rem;border-bottom:.0625rem solid var(--border)}
.pros li:last-child,.cons li:last-child{border-bottom:none}

/* Pricing Tiers */
.pricing-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.pricing-tier{padding:1.25rem;border:.0625rem solid var(--border);border-radius:var(--radius);text-align:center}
.pricing-tier.featured{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.05) 0%,rgba(59,130,246,.02) 100%)}
.pricing-tier h4{font-size:.875rem;color:var(--text);margin-bottom:.5rem}
.pricing-tier .price{font-size:1.25rem;font-weight:500;color:var(--accent);margin-bottom:.25rem}
.pricing-tier .tier-desc{font-size:.75rem;color:var(--text-secondary)}

/* Two Column Layout */
.two-col{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.two-col>div{display:flex;flex-direction:column;gap:1.5rem}

/* Empty State */
.empty-state{text-align:center;padding:4rem 2rem;background:var(--box-bg);border-radius:var(--radius);border:.0625rem solid var(--border)}
.empty-state h3{font-size:1.25rem;color:var(--text);margin-bottom:.5rem}
.empty-state p{color:var(--text-secondary);font-size:.9375rem}

/* Error Page */
.error-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center}
.error-content{max-width:25rem}
.error-code{font-size:6rem;font-weight:500;background:linear-gradient(135deg,var(--accent) 0%,#2563eb 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1;margin-bottom:1rem}
.error-page h1{font-size:1.5rem;color:var(--text);margin-bottom:.5rem}
.error-page p{color:var(--text-secondary);margin-bottom:1.5rem}

/* CTA Box */
.cta-box{text-align:center;padding:2.5rem;background:var(--icon-bg);border-radius:var(--radius);margin-top:2rem}
.cta-box h3{font-size:1.25rem;color:var(--text);margin-bottom:.5rem}
.cta-box p{color:var(--text-secondary);font-size:.9375rem;margin-bottom:1.25rem}

/* Tool Detail Page */
.tool-detail{padding:2.5rem}
.tool-detail-header{display:flex;align-items:flex-start;gap:1.5rem;padding-bottom:1.5rem;border-bottom:.0625rem solid var(--border);margin-bottom:2rem}
.tool-detail-logo{width:6rem;height:6rem;border-radius:var(--radius);background:var(--icon-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden}
.tool-detail-logo img{width:100%;height:100%;object-fit:cover}
.tool-detail-logo .logo-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.tool-detail-info{flex:1}
.tool-detail-info h1{font-size:1.75rem;line-height:1;color:var(--text);margin-bottom:.375rem}
.tool-tagline{color:var(--text-secondary);font-size:.9375rem;margin-bottom:.75rem}
.tool-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.review-count{color:var(--text-secondary);font-weight:400}
.tool-detail-actions{flex-shrink:0}
.tool-detail-body{display:grid;grid-template-columns:2fr 1fr;gap:2rem}
.tool-detail-main{display:flex;flex-direction:column;gap:1.5rem}
.tool-detail-sidebar{display:flex;flex-direction:column;gap:1.5rem}
.detail-card{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.5rem}
.detail-card h2,.detail-card h3,.detail-card .h3{font-size:1.125rem;font-weight:500;color:var(--text);margin-bottom:1rem}
.detail-card p{color:var(--text-secondary);line-height:1.7;font-size:.9375rem}
.pricing-info{margin-bottom:1rem}
.alternatives-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1rem}
.alternative-item{display:flex;align-items:center;gap:.75rem;padding:.625rem;border-radius:var(--radius);border:.0625rem solid var(--border);transition:all .2s}
.alternative-item:hover{border-color:var(--accent);background:var(--icon-bg)}
.alternative-item img{width:2rem;height:2rem;border-radius:var(--radius);object-fit:cover}
.alt-icon{width:2rem;height:2rem;background:var(--icon-bg);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.view-all-link{display:block;text-align:center;color:var(--accent);font-size:.875rem;font-weight:500}

/* Category Detail & Search Results */
.category-detail,.search-page{padding:2.5rem}
.category-header{display:flex;align-items:flex-start;gap:1.5rem;padding-bottom:2rem;border-bottom:.0625rem solid var(--border);margin-bottom:2rem}
.category-header-icon{width:4rem;height:4rem;border-radius:var(--radius);background:var(--icon-bg);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--accent)}
.category-header-info h1{font-size:1.75rem;line-height:1;color:var(--text);margin-bottom:.5rem}
.category-header-info p{color:var(--text-secondary);font-size:.9375rem}
.category-content{margin-top:3rem;padding-top:2rem;border-top:.0625rem solid var(--border)}
.category-description{max-width:50rem;margin:0 auto}
.category-description h2{font-size:1.5rem;color:var(--text);margin:2rem 0 1rem}
.category-description h3{font-size:1.25rem;color:var(--text);margin:1.5rem 0 .75rem}
.category-description p{color:var(--text-secondary);margin-bottom:1rem;line-height:1.7}
.category-description ul,.category-description ol{color:var(--text-secondary);margin:1rem 0 1rem 1.5rem}
.category-description li{margin-bottom:.5rem}
.category-description a{color:var(--accent)}
.category-description a:hover{text-decoration:underline}

/* Compare Page */
.compare-page{padding:2.5rem}
.compare-header{text-align:center;margin-bottom:2rem}
.compare-header h1{font-size:2rem;color:var(--text);margin:.75rem 0 .5rem}
.compare-header p{color:var(--text-secondary);font-size:.9375rem}
.compare-header .breadcrumb{justify-content:center}
.compare-tools{display:grid;grid-template-columns:1fr auto 1fr;gap:1.5rem;align-items:center;margin-bottom:2.5rem}
.compare-tool-card{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:2rem;text-align:center}
.compare-tool-logo{width:5rem;height:5rem;margin:0 auto 1rem;border-radius:var(--radius);background:linear-gradient(135deg,var(--accent) 0%,#2563eb 100%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.compare-tool-logo img{width:100%;height:100%;object-fit:cover}
.compare-tool-logo span{color:#fff;font-weight:500;font-size:1.5rem}
.compare-tool-card h2{font-size:1.25rem;color:var(--text);margin-bottom:.375rem}
.compare-tool-card>p{color:var(--text-secondary);font-size:.875rem;margin-bottom:1rem}
.compare-tool-meta{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-bottom:1rem}
.compare-vs{font-size:1.5rem;font-weight:500;color:var(--accent);background:var(--icon-bg);width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;justify-content:center}
.compare-section{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.compare-section h3{font-size:1.125rem;color:var(--text);margin-bottom:1.25rem}
.compare-table{border:.0625rem solid var(--border);border-radius:var(--radius);overflow:hidden}
.compare-row{display:grid;grid-template-columns:1fr 1fr 1fr;border-bottom:.0625rem solid var(--border)}
.compare-row:last-child{border-bottom:none}
.compare-row-header{background:var(--icon-bg);font-weight:500}
.compare-cell{padding:1rem;font-size:.875rem;color:var(--text);border-right:.0625rem solid var(--border)}
.compare-cell:last-child{border-right:none}
.compare-cell:first-child{color:var(--text-secondary)}
.compare-features,.compare-pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.compare-feature-col h4,.compare-pc-col h4{font-size:1rem;color:var(--text);margin-bottom:1rem;padding-bottom:.5rem;border-bottom:.0625rem solid var(--border)}
.compare-feature-col ul,.compare-pc-col ul{list-style:none}
.compare-feature-col li{display:flex;align-items:center;gap:.5rem;padding:.5rem 0;color:var(--text-secondary);font-size:.875rem}
.compare-pc-col .pros-cons{grid-template-columns:1fr}
.compare-pc-col .pros h5,.compare-pc-col .cons h5{font-size:.875rem}
.text-success{color:var(--success)}
.text-error{color:var(--error)}
.text-muted{color:var(--text-secondary);font-style:italic}

/* Comparisons Page */
.compare-form{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.compare-form select{flex:1;min-width:10rem;height:2.75rem;padding:0 1rem;border:.0625rem solid var(--border);border-radius:var(--radius);background:var(--box-bg);color:var(--text);font-size:.9375rem}
.compare-form-vs{font-weight:500;color:var(--accent);font-size:1rem}
.comparisons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.comparison-card{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);transition:all .2s}
.comparison-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.comparison-tools{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.comparison-tool{font-weight:500;color:var(--text)}
.comparison-logo{width:24px;height:24px;border-radius:4px;object-fit:contain}
.comparison-vs{color:var(--text-secondary);font-size:.875rem}
.comparison-arrow{color:var(--accent);opacity:0;transition:all .2s}
.comparison-card:hover .comparison-arrow{opacity:1}

/* Submit Form */
.submit-form-container{display:grid;grid-template-columns:1fr 20rem;gap:2rem}
.submit-form{display:flex;flex-direction:column;gap:1.5rem}
.form-section{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.5rem}
.form-section h3{font-size:1rem;color:var(--text);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:.0625rem solid var(--border)}
.form-group{margin-bottom:1rem}
.form-group:last-child{margin-bottom:0}
.form-group label{display:block;font-size:.875rem;font-weight:500;color:var(--text);margin-bottom:.5rem}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem 1rem;border:.0625rem solid var(--border);border-radius:var(--radius);background:var(--box-bg);color:var(--text);font-size:.9375rem;transition:all .2s}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 .25rem rgba(59,130,246,.1)}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--text-secondary)}
.form-group small{display:block;margin-top:.375rem;font-size:.75rem;color:var(--text-secondary)}
.form-group textarea{resize:vertical;min-height:6rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.required{color:var(--error)}
.checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9375rem;color:var(--text)}
.checkbox-label input{width:1.125rem;height:1.125rem;accent-color:var(--accent)}
.form-actions{text-align:center}
.form-note{margin-top:.75rem;font-size:.8125rem;color:var(--text-secondary)}
.submit-sidebar{display:flex;flex-direction:column;gap:1rem}
.benefit-list{list-style:none}
.benefit-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.625rem 0;font-size:.875rem;color:var(--text-secondary)}
.benefit-list svg{flex-shrink:0;margin-top:.125rem}

/* Use Cases List */
.use-case-list{list-style:none}
.use-case-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 0;border-bottom:.0625rem solid var(--border);color:var(--text-secondary);font-size:.9375rem;line-height:1.5}
.use-case-list li:last-child{border-bottom:none}
.use-case-list li svg{flex-shrink:0;margin-top:.25rem}

/* Screenshots Gallery */
.screenshots-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.screenshot-img{width:100%;border-radius:var(--radius);border:.0625rem solid var(--border);transition:all .3s}
.screenshot-img:hover{transform:scale(1.02);box-shadow:var(--shadow-lg)}

/* Integrations Grid */
.integrations-grid{display:flex;flex-wrap:wrap;gap:.5rem}
.integration-badge{padding:.375rem .75rem;background:var(--icon-bg);border-radius:var(--radius);font-size:.8125rem;color:var(--text-secondary);border:.0625rem solid var(--border)}

/* Pricing Section */
.pricing-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.pricing-type-badge{padding:.375rem .875rem;border-radius:var(--radius);font-size:.875rem;font-weight:500}
.pricing-free{background:rgba(72,187,120,.15);color:var(--success)}
.pricing-freemium{background:rgba(59,130,246,.15);color:var(--accent)}
.pricing-paid{background:rgba(245,158,11,.15);color:#f59e0b}
.pricing-enterprise{background:rgba(139,92,246,.15);color:#8b5cf6}
.pricing-range{color:var(--text-secondary);font-size:.9375rem}
.free-trial-info{display:flex;align-items:center;gap:.5rem;color:var(--success);font-size:.9375rem;margin-top:.5rem}

/* AI Review Card */
.ai-review-card{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.03) 0%,rgba(59,130,246,.01) 100%)}
.ai-review-card h2{display:flex;align-items:center;gap:.5rem}
.ai-review-content{color:var(--text-secondary);line-height:1.7;font-size:.9375rem}
.ai-review-date{margin-top:1rem;font-size:.75rem;color:var(--text-secondary);opacity:.7}

/* FAQ Card (Tool Detail Page - uses .active class) */
.faq-card{border-color:var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.02) 0%,transparent 100%)}
.faq-card h2{display:flex;align-items:center;gap:.5rem}
.faq-arrow{transition:transform .2s;color:var(--text-secondary)}
.faq-item.active .faq-arrow{transform:rotate(180deg)}
.faq-item.active .faq-answer{max-height:500px}

/* Platform & Language Badges */
.platform-badges,.language-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.platform-badge,.language-badge{padding:.375rem .75rem;background:var(--icon-bg);border-radius:var(--radius);font-size:.8125rem;color:var(--text-secondary);border:.0625rem solid var(--border)}

/* Company Info & Social Links */
.target-audience-text{color:var(--text-secondary);font-size:.9375rem;line-height:1.6}
.social-links{display:flex;flex-direction:column;gap:.5rem}
.social-link{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:var(--radius);border:.0625rem solid var(--border);color:var(--text-secondary);font-size:.875rem;transition:all .2s}
.social-link:hover{border-color:var(--accent);color:var(--accent);background:var(--icon-bg)}

/* Tool Content (HTML from DB) */
.tool-detail-main .tool-content{padding:0}
.tool-content{color:var(--text-secondary);line-height:1.7;font-size:.9375rem}
.tool-content h2,.tool-content h3{font-size:1rem;color:var(--text);margin:1rem 0 .4rem}
.tool-content h2:first-child,.tool-content h3:first-child{margin-top:0}
.tool-content p{margin-bottom:1rem}
.tool-content p:last-child{margin-bottom:0}
.tool-content ul,.tool-content ol{margin:1rem 0;padding-left:1.5rem}
.tool-content li{margin-bottom:.5rem}

/* Review Card */
.review-card{border-left:.25rem solid var(--accent);background:linear-gradient(135deg,rgba(59,130,246,.02) 0%,transparent 100%)}

/* Alerts */
.alert{padding:1rem 1.25rem;border-radius:var(--radius);margin-bottom:1.5rem;font-size:.9375rem}
.alert-error{background:rgba(229,62,62,.1);border:.0625rem solid var(--error);color:var(--error)}
.alert-success{background:rgba(72,187,120,.1);border:.0625rem solid var(--success);color:var(--success)}

/* Responsive */
@media(max-width:64rem){
.features-grid{grid-template-columns:repeat(2,1fr)}
.two-col,.tool-detail-body{grid-template-columns:1fr}
.tool-detail-header,.category-header{flex-direction:column;align-items:center;text-align:center}
.tool-meta{justify-content:center}
.page-header{flex-direction:column;text-align:center;align-items:center}
.pricing-tiers,.pros-cons{grid-template-columns:1fr}
.compare-tools{grid-template-columns:1fr;gap:1rem}
.compare-vs{margin:0 auto}
.compare-features,.compare-pros-cons{grid-template-columns:1fr}
.submit-form-container{grid-template-columns:1fr}
.submit-sidebar{order:-1}
.footer-top{flex-direction:column;gap:2.5rem}
.footer-brand{max-width:100%}
.footer-links{justify-content:flex-start;flex-wrap:wrap;gap:2rem}
}
@media(max-width:48rem){
.header-inner{padding:.75rem 1rem}
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--box-bg);padding:1rem;flex-direction:column;box-shadow:var(--shadow-lg);border-bottom:.0625rem solid var(--border);z-index:100}
.nav-links.active{display:flex}
.nav-links a{width:100%;padding:.75rem 1rem}
.burger-btn{display:flex}
.cta-btn{display:none}
.hero{padding:2.5rem 1.5rem 2rem}
.hero h1{font-size:1.75rem}
.hero>p{font-size:1rem}
.search-box{flex-direction:column;padding:.75rem;gap:.75rem;border-radius:var(--radius)}
.search-box input{padding:.75rem;text-align:center}
.search-box button{width:100%;border-radius:var(--radius)}
.features,.categories-section,.tools-section,.faqs,.section,.page,.tool-detail,.category-detail,.search-page,.compare-page{padding:2rem 1.25rem}
.features-grid,.categories-grid,.tools-grid,.comparisons-grid{grid-template-columns:1fr}
.compare-form{flex-direction:column}
.compare-form select{width:100%}
.form-row{grid-template-columns:1fr}
footer{padding:2rem 1.25rem 1.5rem}
.footer-links{flex-direction:column;gap:1.5rem}
.footer-bottom{flex-direction:column;gap:1rem;text-align:center}
}
@media(max-width:30rem){
.hero h1{font-size:1.5rem}
.hero-tags{flex-direction:column;gap:.5rem}
.hero-tags span{display:none}
.section-header{flex-direction:column;gap:.75rem;align-items:flex-start}
}

/* User Reviews Section */
.reviews-section h2{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}
.review-summary-box{background:var(--icon-bg);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}
.review-sources{display:flex;flex-wrap:wrap;gap:1.5rem;margin-bottom:1rem}
.review-source{text-align:center;padding:.75rem 1.25rem;background:var(--box-bg);border-radius:var(--radius);box-shadow:var(--shadow)}
.review-source .source-name{display:block;font-size:.75rem;font-weight:500;text-transform:uppercase;color:var(--text-secondary);margin-bottom:.25rem}
.review-source .source-rating{display:flex;align-items:center;justify-content:center;gap:.25rem;font-size:1.25rem;font-weight:500;color:var(--text)}
.review-source .source-count{display:block;font-size:.75rem;color:var(--text-secondary);margin-top:.25rem}
.review-source.overall{background:var(--accent);color:#fff}
.review-source.overall .source-name,.review-source.overall .source-count{color:rgba(255,255,255,.8)}
.review-source.overall .source-rating{color:#fff}
.review-source.overall .overall-score{font-size:1.5rem}
.review-highlights{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:1rem}
.highlight-section{background:var(--box-bg);border-radius:var(--radius);padding:1rem}
.highlight-section h4{font-size:.875rem;margin-bottom:.5rem;display:flex;align-items:center;gap:.5rem}
.highlight-section.positive h4{color:var(--success)}
.highlight-section.negative h4{color:var(--error)}
.highlight-section ul{list-style:none;font-size:.875rem;color:var(--text-secondary)}
.highlight-section li{padding:.25rem 0;padding-left:.75rem;position:relative}
.highlight-section.positive li::before{content:"✓";position:absolute;left:0;color:var(--success)}
.highlight-section.negative li::before{content:"✗";position:absolute;left:0;color:var(--error)}
.user-reviews-list{display:flex;flex-direction:column;gap:1rem}
.user-review-item{background:var(--icon-bg);border-radius:var(--radius);padding:1.25rem}
.review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;flex-wrap:wrap;gap:.5rem}
.reviewer-info{display:flex;flex-direction:column}
.reviewer-name{font-weight:400;color:var(--text)}
.reviewer-title{font-size:.8125rem;color:var(--text-secondary)}
.review-meta{display:flex;align-items:center;gap:.75rem}
.review-source-badge{font-size:.625rem;font-weight:500;padding:.25rem .5rem;border-radius:var(--radius);text-transform:uppercase}
.review-source-badge.g2{background:#ff492c;color:#fff}
.review-source-badge.capterra{background:#ff9d28;color:#fff}
.review-source-badge.producthunt{background:#da552f;color:#fff}
.review-source-badge.trustpilot{background:#00b67a;color:#fff}
.review-rating{display:flex;gap:.125rem}
.review-footer{display:flex;align-items:center;gap:.75rem;margin-top:.75rem}
.review-title{font-size:1rem;font-weight:500;margin-bottom:.5rem;color:var(--text)}
.review-content{font-size:.9375rem;color:var(--text-secondary);line-height:1.6}
.review-footer .review-date{display:inline;margin-top:0;font-size:.75rem;color:var(--text-secondary)}
@media(max-width:48rem){
.review-highlights{grid-template-columns:1fr}
.review-sources{justify-content:center}
}

/* External Review Rating Badges */
.external-ratings{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.external-rating-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;color:var(--text);text-decoration:none;transition:all .2s ease}
.external-rating-badge:hover{border-color:var(--accent);transform:translateY(-1px)}
.external-rating-badge img{flex-shrink:0}
.external-rating-badge .rating-value{font-weight:500;color:var(--text)}
.external-rating-badge .rating-stars{color:#fbbf24}
.external-rating-badge .rating-count{font-size:.75rem;color:var(--text-secondary)}
.external-rating-badge.g2:hover{border-color:#ff492c}
.external-rating-badge.capterra:hover{border-color:#ff9d28}
.external-rating-badge.trustpilot:hover{border-color:#00b67a}
@media(max-width:48rem){.external-ratings{justify-content:center}}

/* Filters Bar */
.filters-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.5rem;padding:1rem;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);flex-wrap:wrap}
.filters-left{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.filters-right{display:flex;align-items:center;gap:.75rem}
.filter-dropdown{position:relative}
.filter-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-weight:500;color:var(--text);cursor:pointer;transition:all .2s}
.filter-btn:hover{border-color:var(--accent);background:var(--icon-bg)}
.filter-btn.active{border-color:var(--accent);background:var(--icon-bg);color:var(--accent)}
.filter-btn svg{color:var(--text-secondary)}
.filter-btn.active svg{color:var(--accent)}
.filter-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:12rem;max-height:20rem;overflow-y:auto;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:50;opacity:0;visibility:hidden;transform:translateY(-.5rem);transition:all .2s}
.filter-menu-right{left:auto;right:0}
.filter-dropdown:hover .filter-menu{opacity:1;visibility:visible;transform:translateY(0)}
.filter-option{display:block;padding:.625rem 1rem;font-size:.875rem;color:var(--text-secondary);transition:all .15s}
.filter-option:hover{background:var(--icon-bg);color:var(--text)}
.filter-option.active{background:var(--icon-bg);color:var(--accent);font-weight:500}
.clear-filters{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem .75rem;font-size:.8125rem;color:var(--text-secondary);border-radius:var(--radius);transition:all .2s}
.clear-filters:hover{color:var(--error);background:rgba(229,62,62,0.1)}

/* Pagination */
.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border)}
.pagination-btn{display:inline-flex;align-items:center;gap:.375rem;padding:.625rem 1.25rem;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);font-size:.875rem;font-weight:500;color:var(--text);transition:all .2s}
.pagination-btn:hover{border-color:var(--accent);background:var(--icon-bg);color:var(--accent)}
.pagination-info{font-size:.875rem;color:var(--text-secondary)}

/* Empty State */
.empty-state{text-align:center;padding:4rem 2rem}
.empty-state svg{color:var(--text-secondary);margin-bottom:1rem}
.empty-state h3{font-size:1.25rem;margin-bottom:.5rem}
.empty-state p{color:var(--text-secondary);font-size:.9375rem}
.empty-state a{color:var(--accent)}

@media(max-width:48rem){
.filters-bar{flex-direction:column;align-items:stretch}
.filters-left,.filters-right{justify-content:center}
.filter-menu{position:fixed;top:auto;bottom:0;left:0;right:0;max-height:50vh;border-radius:var(--radius) var(--radius) 0 0}
}

/* Toast Notification */
.toast-notification{position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(100%);display:flex;align-items:center;gap:.625rem;padding:.875rem 1.25rem;background:var(--box-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);font-size:.875rem;font-weight:500;color:var(--text);z-index:9999;opacity:0;transition:all .3s ease}
.toast-notification.show{transform:translateX(-50%) translateY(0);opacity:1}
.toast-notification svg{flex-shrink:0}
.toast-success svg{color:var(--success)}
.toast-error svg{color:var(--error)}

/* Editor's Choice Section */
.editors-choice-section{background:linear-gradient(135deg,rgba(99,102,241,0.05),rgba(139,92,246,0.05))}
.editors-choice-section .section-header{flex-direction:column;align-items:flex-start;gap:.5rem;margin-bottom:2rem}
.section-title-badge{display:flex;align-items:center;gap:.75rem}
.section-title-badge h2{margin:0}
.editors-icon{color:#8b5cf6}
.section-subtitle{color:var(--text-secondary);font-size:.9375rem;margin:0}

/* Tool Badges */
.tool-badges{position:absolute;top:8px;left:8px;display:flex;flex-wrap:wrap;gap:4px;z-index:10}
.tool-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;backdrop-filter:blur(4px)}
.badge-featured{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 2px 8px rgba(245,158,11,0.4)}
.badge-verified{background:rgba(16,185,129,0.9);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,0.4)}
.badge-editor{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,0.4)}
.tool-card{position:relative}

@media(max-width:48rem){
.editors-choice-section{margin:0 -1.5rem 2rem;padding:2rem 1.5rem;border-radius:0}
}

/* New/Trending/Top Rated Badges */
.card-badge{position:absolute;top:8px;right:8px;padding:4px 10px;font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.5px;border-radius:4px;z-index:10}
.badge-new{background:#10b981;color:#fff}
.badge-trending{background:#ef4444;color:#fff}
.badge-top{background:#f59e0b;color:#fff}
.badge-popular{background:#6366f1;color:#fff}

/* Stats Banner */
.stats-banner{display:flex;justify-content:center;gap:4rem;background:linear-gradient(135deg,var(--accent),#4f46e5);color:#fff;border-radius:var(--radius);padding:2.5rem 2rem;margin:2rem 0}
.stats-banner .stat-item{text-align:center}
.stats-banner .stat-number{display:block;font-size:2.5rem;font-weight:500;margin-bottom:.25rem}
.stats-banner .stat-label{font-size:.875rem;opacity:.85}
@media(max-width:48rem){.stats-banner{flex-wrap:wrap;gap:2rem}.stats-banner .stat-item{flex:1 1 40%}}

/* Tool Title Row with Inline Badges */
.tool-title-row{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.tool-inline-badges{display:flex;align-items:center;gap:.4rem}
.inline-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;transition:transform .2s ease}
.inline-badge:hover{transform:scale(1.15)}
.inline-badge.badge-editor{background:linear-gradient(135deg,#ffd700,#ffb800);color:#7a5c00;box-shadow:0 2px 4px rgba(255,184,0,.3)}
.inline-badge.badge-featured{background:linear-gradient(135deg,#a855f7,#9333ea);color:#fff;box-shadow:0 2px 4px rgba(168,85,247,.3)}
.inline-badge.badge-verified{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 2px 4px rgba(34,197,94,.3)}

/* Screenshot Card */
.screenshot-card{padding:0;overflow:hidden}
.screenshot-card .screenshot-link{display:block;position:relative}
.screenshot-card img{width:100%;height:auto;display:block;border-radius:var(--radius);transition:transform .3s ease}
.screenshot-card:hover img{transform:scale(1.02)}
.screenshot-card .screenshot-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease;border-radius:var(--radius);color:#fff}
.screenshot-card .screenshot-link:hover .screenshot-overlay{opacity:1}

/* Lightbox */
.lightbox{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;align-items:center;justify-content:center;padding:1.25rem;box-sizing:border-box}
.lightbox.active{display:flex}
.lightbox-content{position:relative;max-width:95%;max-height:95%}
.lightbox-content img{max-width:100%;max-height:calc(100vh - 6.25rem);border-radius:.75rem;box-shadow:0 1.25rem 3.75rem rgba(0,0,0,0.5);object-fit:contain}
.lightbox-close{position:absolute;top:-2.5rem;right:0;background:none;border:none;color:#fff;font-size:2rem;cursor:pointer;padding:.3125rem .625rem;line-height:1;opacity:.7;transition:opacity .2s}
.lightbox-close:hover{opacity:1}
.lightbox-caption{text-align:center;color:rgba(255,255,255,0.8);margin-top:.9375rem;font-size:.875rem}

/* Share Buttons */
.share-buttons{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}
.share-label{font-size:.8125rem;color:var(--text-secondary)}
.share-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:.375rem;border:.0625rem solid var(--border);background:var(--box-bg);color:var(--text-secondary);cursor:pointer;transition:all .2s}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(59,130,246,0.1)}
.share-twitter:hover{color:#1DA1F2;border-color:#1DA1F2;background:rgba(29,161,242,0.1)}
.share-linkedin:hover{color:#0A66C2;border-color:#0A66C2;background:rgba(10,102,194,0.1)}
.share-copy:hover,.share-copy.copied{color:var(--success);border-color:var(--success);background:rgba(72,187,120,0.1)}

/* Last Updated Badge */
.last-updated-badge{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;border-radius:.25rem;font-size:.8125rem;margin-bottom:1rem;border:.0625rem solid}
.last-updated-badge svg{flex-shrink:0}
.freshness-new{background:rgba(99,102,241,0.1);border-color:rgba(99,102,241,0.3);color:#6366f1}
.freshness-recent{background:rgba(72,187,120,0.1);border-color:rgba(72,187,120,0.3);color:#48bb78}
.freshness-moderate{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);color:#f59e0b}
.freshness-old{background:rgba(107,114,128,0.1);border-color:rgba(107,114,128,0.3);color:var(--text-secondary)}

/* Tool Detail Badges */
.tool-detail-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.75rem}
.detail-badge{display:inline-flex;align-items:center;gap:.3125rem;padding:.375rem .75rem;font-size:.75rem;font-weight:500;border-radius:.375rem}
.detail-badge.badge-editor{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 .125rem .5rem rgba(99,102,241,0.3)}
.detail-badge.badge-featured{background:linear-gradient(135deg,#f59e0b,#f97316);color:#fff;box-shadow:0 .125rem .5rem rgba(245,158,11,0.3)}
.detail-badge.badge-verified{background:rgba(72,187,120,0.15);color:#48bb78;border:.0625rem solid rgba(72,187,120,0.3)}

@media(max-width:48rem){
.share-buttons{width:100%;justify-content:center}
.tool-detail-actions{flex-direction:column;align-items:stretch}
}

/* Coming Soon / Error Page */
.coming-soon-page{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}
.coming-soon-content{text-align:center;max-width:33.75rem}
.coming-soon-icon{display:inline-flex;align-items:center;justify-content:center;width:7.5rem;height:7.5rem;background:var(--icon-bg);border-radius:50%;color:var(--accent);margin-bottom:2rem}
.coming-soon-content h1{font-size:2rem;margin-bottom:1rem;color:var(--text)}
.coming-soon-desc{color:var(--text-secondary);font-size:1.0625rem;line-height:1.6;margin-bottom:2rem}
.coming-soon-features{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem;text-align:left;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.5rem}
.feature-item{display:flex;align-items:center;gap:.75rem;color:var(--text);font-size:.9375rem}
.feature-item svg{color:var(--accent);flex-shrink:0}
.coming-soon-content .cta-btn{display:inline-flex;align-items:center;gap:.5rem}
.contact-info{margin-bottom:2rem}
.contact-link{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.9375rem;transition:all .2s}
.contact-link:hover{border-color:var(--accent);color:var(--accent)}
.contact-link svg{color:var(--accent)}
.error-page{display:flex;align-items:center;justify-content:center;min-height:60vh;padding:2rem}
.error-content{text-align:center;max-width:31.25rem}
.error-code{font-size:8rem;font-weight:500;color:var(--accent);line-height:1;margin-bottom:1rem}
.error-content h1{font-size:1.75rem;margin-bottom:1rem;color:var(--text)}
.error-content p{color:var(--text-secondary);margin-bottom:2rem}
.error-content .cta-btn{display:inline-flex;align-items:center;gap:.5rem}

/* Page Content (Static Pages) */
.page-content{padding:2rem;max-width:50rem;margin:0 auto}
.page-content .page-header{margin-bottom:2rem;padding-bottom:1rem;border-bottom:.0625rem solid var(--border)}
.page-content .page-header h1{font-size:2rem;color:var(--text)}
.page-body{color:var(--text);line-height:1.8}
.page-body h2{font-size:1.5rem;margin-top:2rem;margin-bottom:1rem;color:var(--text)}
.page-body h3{font-size:1.25rem;margin-top:1.5rem;margin-bottom:.75rem;color:var(--text)}
.page-body p{margin-bottom:1rem;color:var(--text-secondary)}
.page-body ul,.page-body ol{margin-bottom:1rem;padding-left:1.5rem}
.page-body li{margin-bottom:.5rem;color:var(--text-secondary)}
.page-body a{color:var(--accent);text-decoration:underline}
.page-body a:hover{text-decoration:none}
.page-body strong{color:var(--text)}
.page-body em{color:var(--text-secondary);font-style:italic}
.page-body blockquote{margin:1.5rem 0;padding:1rem 1.5rem;background:var(--box-bg);border-left:.25rem solid var(--accent);border-radius:var(--radius)}
.page-body blockquote p{margin:0}
.page-body code{background:var(--icon-bg);padding:.125rem .375rem;border-radius:.25rem;font-family:monospace;font-size:.875em}
.page-body pre{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1rem;overflow-x:auto;margin-bottom:1rem}
.page-body pre code{background:none;padding:0}
.page-body img{max-width:100%;height:auto;border-radius:var(--radius);margin:1rem 0}
.page-body table{width:100%;border-collapse:collapse;margin-bottom:1rem}
.page-body th,.page-body td{padding:.75rem;text-align:left;border-bottom:.0625rem solid var(--border)}
.page-body th{background:var(--box-bg);font-weight:400;color:var(--text)}
.page-body td{color:var(--text-secondary)}

/* Browse Section (Countries, Cities, Platforms) */
.browse-section{padding:2rem}
.section-header h1{display:flex;align-items:center;gap:.75rem}
.header-icon{display:inline-flex;color:var(--accent)}
.section-desc{color:var(--text-secondary);font-size:.9375rem;margin-top:.5rem}
.breadcrumb-nav{display:flex;align-items:center;gap:.5rem;font-size:.875rem;margin-bottom:1.5rem;flex-wrap:wrap}
.breadcrumb-nav a{color:var(--text-secondary);transition:color .2s}
.breadcrumb-nav a:hover{color:var(--accent)}
.breadcrumb-nav .separator{color:var(--border)}
.breadcrumb-nav .current{color:var(--text);font-weight:500}
.quick-nav{display:flex;gap:1rem;margin-bottom:2rem;flex-wrap:wrap}
.quick-nav-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);color:var(--text);font-size:.875rem;font-weight:500;transition:all .2s}
.quick-nav-btn svg{flex-shrink:0}
.quick-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.browse-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);transition:all .2s}
.browse-card:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.browse-icon{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;background:var(--icon-bg);border-radius:var(--radius);color:var(--accent);flex-shrink:0}
.browse-content h3{font-size:1rem;color:var(--text);margin-bottom:.25rem}
.browse-subtitle{font-size:.8125rem;color:var(--text-secondary);margin-bottom:.375rem}
.browse-count{display:inline-block;padding:.125rem .5rem;background:var(--accent);color:#fff;border-radius:1rem;font-size:.75rem;font-weight:500}
.stats-summary{margin-top:2.5rem;padding-top:1.5rem;border-top:.0625rem solid var(--border);text-align:center;color:var(--text-secondary);font-size:.875rem}

/* Filter Tags (Filtered Tools) */
.filter-tags-section{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.25rem 1.5rem;margin-bottom:2rem}
.filter-tags-section h4{font-size:.9375rem;color:var(--text);margin-bottom:1rem}
.filter-tags{display:flex;flex-wrap:wrap;gap:.5rem}
.filter-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .875rem;background:var(--icon-bg);border:.0625rem solid var(--border);border-radius:2rem;font-size:.8125rem;color:var(--text);transition:all .2s}
.filter-tag:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.filter-tag:hover .tag-count{background:rgba(255,255,255,0.2);color:#fff}
.tag-count{background:var(--accent);color:#fff;padding:.125rem .5rem;border-radius:1rem;font-size:.75rem;font-weight:500}
.location-tag{display:inline-flex;align-items:center;gap:.25rem}
.location-tag svg{width:.75rem;height:.75rem}

/* Comparisons Page */
.compare-search-form{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.compare-search-form .cta-btn{height:2.75rem;display:flex;align-items:center;padding:0 1.5rem}
.search-box-wrapper{flex:1;min-width:12.5rem;position:relative}
.search-input{width:100%;height:2.75rem;padding:0 1rem;border:.0625rem solid var(--border);border-radius:var(--radius);background:var(--box-bg);color:var(--text);font-size:.9375rem}
.search-input:focus{outline:none;border-color:var(--accent)}
.search-results{position:absolute;top:100%;left:0;right:0;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);margin-top:.25rem;max-height:18.75rem;overflow-y:auto;z-index:100;display:none;box-shadow:var(--shadow)}
.search-results.active{display:block}
.search-result-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;cursor:pointer;transition:background .15s}
.search-result-item:hover{background:var(--border)}
.search-result-item img{width:2rem;height:2rem;border-radius:.375rem;object-fit:contain}
.search-result-item .result-info{flex:1;min-width:0}
.search-result-item .result-name{font-weight:500;color:var(--text)}
.search-result-item .result-tagline{font-size:.75rem;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.selected-tool{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:var(--accent);color:#fff;border-radius:var(--radius);margin-top:.5rem}
.selected-tool .selected-logo{width:1.5rem;height:1.5rem;border-radius:.25rem;object-fit:contain;background:#fff}
.selected-tool .selected-name{flex:1;font-weight:500}
.selected-tool .clear-btn{background:none;border:none;color:#fff;font-size:1.25rem;cursor:pointer;padding:0;line-height:1;opacity:.8}
.selected-tool .clear-btn:hover{opacity:1}
.compare-search-form .compare-form-vs{align-self:center;margin-top:.75rem}
.no-results{padding:1rem;text-align:center;color:var(--text-secondary);font-size:.875rem}
.category-comparisons{display:grid;grid-template-columns:repeat(auto-fit,minmax(18.75rem,1fr));gap:1.5rem}
.category-comparison-section{background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);padding:1.25rem}
.category-comparison-title{display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:500;color:var(--text);margin-bottom:1rem;padding-bottom:.75rem;border-bottom:.0625rem solid var(--border)}
.category-comparison-title svg{color:var(--accent)}
.category-comparison-list{display:flex;flex-direction:column;gap:.75rem}
.comparison-card.compact{padding:.875rem 1rem}
.comparison-card.compact .comparison-tools{gap:.5rem}
.comparison-card.compact .comparison-tool{font-size:.875rem}
.comparison-card.compact .comparison-logo{width:1.25rem;height:1.25rem}

/* Blog Posts Grid - Homepage */
.posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.post-card{display:flex;flex-direction:column;background:var(--box-bg);border:.0625rem solid var(--border);border-radius:var(--radius);overflow:hidden;transition:all .2s}
.post-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-.125rem)}
.post-image{height:10rem;background:var(--icon-bg);background-size:cover;background-position:center}
.post-image.post-placeholder{display:flex;align-items:center;justify-content:center;color:var(--text-secondary)}
.post-content{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-category{font-size:.75rem;font-weight:500;color:var(--accent);text-transform:uppercase}
.post-content h3{font-size:1rem;color:var(--text);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-content p{font-size:.875rem;color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-meta{display:flex;align-items:center;gap:.5rem;font-size:.75rem;color:var(--text-secondary);margin-top:auto}
@media(max-width:64rem){.posts-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:40rem){.posts-grid{grid-template-columns:1fr}}

/* FAQ Answer Lists */
.faq-answer ul,.faq-answer ol{margin:1rem 0;padding-left:0;list-style:none}
.faq-answer li{position:relative;padding:.75rem 1rem .75rem 2.5rem;margin-bottom:.5rem;background:var(--icon-bg);border-radius:var(--radius);color:var(--text);line-height:1.5}
.faq-answer ul li::before{content:"";position:absolute;left:1rem;top:1.1rem;width:.5rem;height:.5rem;background:var(--accent);border-radius:50%}
.faq-answer ol{counter-reset:faq-counter}
.faq-answer ol li{counter-increment:faq-counter}
.faq-answer ol li::before{content:counter(faq-counter);position:absolute;left:.75rem;top:.65rem;width:1.25rem;height:1.25rem;background:var(--accent);color:#fff;border-radius:50%;font-size:.75rem;font-weight:500;display:flex;align-items:center;justify-content:center}
.faq-answer li strong{color:var(--accent)}
.faq-answer p+p,.faq-answer p+ul,.faq-answer p+ol,.faq-answer ul+p,.faq-answer ol+p{margin-top:1rem}
.faq-answer a{color:var(--accent);font-weight:500}
.faq-answer a:hover{text-decoration:underline}