*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--red:#ed1010;--red-dark:#c80808;--text:#111;--muted:#666;--border:#e8e8e8;--surface:#f8f8f8;--teal:#00C2A8;--teal-dark:#00a68f}
html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:#fff;color:var(--text);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-weight:800;line-height:1.15;letter-spacing:-0.03em}
a{color:var(--red);text-decoration:none}
img{max-width:100%;height:auto}
button,input,textarea,select{font-family:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* HEADER */
.header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.93);backdrop-filter:blur(12px);border-bottom:1px solid #f0f0f0}
.header-inner{max-width:1100px;margin:0 auto;padding:0 1.25rem;height:60px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-size:1.125rem;font-weight:800;color:#111;letter-spacing:-0.02em;flex-shrink:0}
.logo svg{flex-shrink:0}
.logo-accent{color:var(--red)}
.nav{display:flex;align-items:center;gap:.25rem}
.nav a{font-size:.875rem;font-weight:500;color:#555;padding:.4rem .75rem;border-radius:6px;transition:color .15s,background .15s}
.nav a:hover{color:#111;background:#f0f0f0}
.nav a.active{color:#111;font-weight:600}
.nav-cta{background:var(--red)!important;color:#fff!important;border-radius:7px!important;font-weight:700!important;margin-left:.5rem}
.nav-cta:hover{background:var(--red-dark)!important}

/* HERO */
.hero{padding:3rem 1.25rem 2rem;text-align:center;background:linear-gradient(180deg,#fff 0%,#fafafa 100%);border-bottom:1px solid #f0f0f0}
.hero-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:1.25rem}
.social-proof{display:inline-flex;align-items:center;gap:.6rem;background:#fff;border:1.5px solid #e8e8e8;border-radius:100px;padding:.35rem .875rem .35rem .5rem;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.avatars{display:flex}
.avatar{width:22px;height:22px;border-radius:50%;border:2px solid #fff;margin-left:-6px;display:inline-block}
.avatar:first-child{margin-left:0}
.social-text{font-size:.78rem;color:#555}
.social-text strong{color:#111}
.hero-title{font-size:clamp(2rem,5.5vw,3.25rem);font-weight:900;color:#0a0a0a;letter-spacing:-0.045em;line-height:1.08}
.hero-title .highlight{color:var(--red)}
.hero-desc{font-size:1.0625rem;color:#666;line-height:1.6;max-width:480px}
.badges{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}
.badge{display:flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:600;color:#444;background:#f4f4f4;padding:.3rem .7rem;border-radius:100px;border:1px solid #e8e8e8}

/* TOOL CARD */
.tool-section{padding:0 1.25rem}
.tool-card{background:#fff;border:1.5px solid #e8e8e8;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.04);max-width:920px;margin:-1.5rem auto 0;overflow:hidden}
.mode-tabs{display:flex;border-bottom:1.5px solid #f0f0f0;background:#fafafa}
.mode-tab{display:flex;align-items:center;gap:.4rem;padding:.875rem 1.25rem;font-size:.875rem;font-weight:600;color:#888;background:none;border:none;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s;font-family:inherit}
.mode-tab:hover{color:#333}
.mode-tab.active{color:var(--red);border-bottom-color:var(--red);background:#fff}
.new-badge{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--teal);color:#fff;padding:.1rem .35rem;border-radius:4px}
.input-area{padding:1.75rem 1.75rem 1.25rem;display:flex;flex-direction:column;gap:.75rem}
.input-label{font-size:.8125rem;font-weight:600;color:#444}
.input-row{display:flex;gap:.6rem;align-items:stretch}
.input-wrapper{position:relative;flex:1;min-width:0}
.input-icon{position:absolute;left:.875rem;top:50%;transform:translateY(-50%);color:#bbb;pointer-events:none;display:flex;align-items:center}
.url-input{width:100%;height:48px;padding:0 2.5rem 0 2.75rem;border:1.5px solid #e0e0e0;border-radius:10px;font-size:.9375rem;color:#111;background:#fafafa;transition:border-color .15s,box-shadow .15s;outline:none}
.url-input::placeholder{color:#bbb}
.url-input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(237,16,16,.08)}
.url-input.error{border-color:var(--red);background:#fff8f8}
.submit-btn{display:flex;align-items:center;gap:.5rem;height:48px;padding:0 1.25rem;background:var(--red);color:#fff;border:none;border-radius:10px;font-size:.9375rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s,box-shadow .15s,transform .1s;flex-shrink:0}
.submit-btn:hover{background:var(--red-dark);box-shadow:0 4px 14px rgba(237,16,16,.35)}
.submit-btn:active{transform:scale(.98)}
.submit-btn svg{flex-shrink:0}
.input-hint{font-size:.78rem;color:#bbb}
.error-msg{display:flex;align-items:center;gap:.4rem;color:#c80808;font-size:.8rem;font-weight:500;display:none}
.error-msg.show{display:flex}

/* BULK */
.bulk-area{display:flex;flex-direction:column;gap:.75rem}
.bulk-input{width:100%;padding:.875rem 1rem;border:1.5px solid #e0e0e0;border-radius:10px;font-size:.875rem;color:#111;background:#fafafa;resize:vertical;min-height:120px;transition:border-color .15s;outline:none;font-family:monospace;line-height:1.7}
.bulk-input:focus{border-color:var(--red);background:#fff;box-shadow:0 0 0 3px rgba(237,16,16,.08)}
.bulk-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.quality-label{font-size:.8rem;font-weight:600;color:#666;white-space:nowrap}
.quality-select{height:38px;padding:0 .75rem;border:1.5px solid #e0e0e0;border-radius:8px;font-size:.875rem;color:#111;background:#fafafa;outline:none;cursor:pointer;font-family:inherit}
.quality-select:focus{border-color:var(--red)}

/* RESULTS */
.results-area{padding:1.5rem 1.75rem 1.75rem;border-top:1px solid #f4f4f4;display:none}
.results-area.show{display:block;animation:fadeUp .35s ease-out}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem;flex-wrap:wrap;gap:.75rem}
.results-title{font-size:1rem;font-weight:800;color:#111;display:flex;align-items:center;gap:.5rem}
.results-badge{font-size:.72rem;font-weight:700;background:#fff1f1;color:var(--red);padding:.15rem .5rem;border-radius:20px;border:1px solid #ffd0d0}
.download-all-btn{display:flex;align-items:center;gap:.4rem;background:#111;color:#fff;border:none;padding:.5rem 1rem;border-radius:8px;font-size:.8125rem;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.download-all-btn:hover{background:#333}
.thumbs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem}

/* THUMB CARD */
.thumb-card{background:#fff;border:1.5px solid #e8e8e8;border-radius:11px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,border-color .18s,transform .18s}
.thumb-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.09);border-color:#d4d4d4;transform:translateY(-1px)}
.thumb-card.hd{border-color:#fecaca}
.thumb-card.hd:hover{border-color:var(--red);box-shadow:0 4px 16px rgba(237,16,16,.13)}
.thumb-img-wrap{position:relative;aspect-ratio:16/9;background:#f8f8f8;overflow:hidden}
.thumb-img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-unavail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:#ccc;font-size:.7rem}
.hd-pill{position:absolute;top:7px;right:7px;background:var(--red);color:#fff;font-size:.6rem;font-weight:800;padding:.12rem .38rem;border-radius:4px;letter-spacing:.06em}
.thumb-body{padding:.75rem .875rem;display:flex;flex-direction:column;gap:.5rem}
.thumb-meta{display:flex;align-items:baseline;justify-content:space-between;gap:.25rem}
.thumb-label{font-size:.8125rem;font-weight:700;color:#111}
.thumb-dim{font-size:.7rem;color:#aaa}
.thumb-actions{display:flex;gap:.35rem}
.btn-dl,.btn-copy{flex:1;display:flex;align-items:center;justify-content:center;gap:.3rem;height:31px;border-radius:6px;font-size:.775rem;font-weight:700;cursor:pointer;border:none;transition:background .13s,transform .1s;font-family:inherit}
.btn-dl:active,.btn-copy:active{transform:scale(.96)}
.btn-dl:disabled,.btn-copy:disabled{opacity:.35;cursor:not-allowed}
.btn-dl{background:var(--red);color:#fff}
.btn-dl:hover:not(:disabled){background:var(--red-dark)}
.btn-copy{background:#f0f0f0;color:#444}
.btn-copy:hover:not(:disabled){background:#e4e4e4;color:#111}
.btn-copy.copied{background:#ecfdf5!important;color:#16a34a!important}

/* SKELETON */
.skeleton-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;padding:0 1.75rem 1.75rem;display:none}
.skeleton-grid.show{display:grid}
.skeleton-card{border-radius:10px;border:1px solid #f0f0f0;padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.skeleton-img{width:100%;aspect-ratio:16/9;border-radius:6px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}
.skeleton-line{height:11px;border-radius:4px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s ease-in-out infinite}
.skeleton-line.short{width:55%}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* HOW IT WORKS */
.section{padding:4rem 1.25rem;scroll-margin-top:80px}
.section-inner{max-width:900px;margin:0 auto}
.section-header{text-align:center;margin-bottom:2.5rem}
.section-title{font-size:clamp(1.4rem,3vw,1.875rem);font-weight:800;color:#111;letter-spacing:-0.03em;margin:0 0 .4rem}
.section-subtitle{font-size:1rem;color:#888}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.step{background:#fff;border:1.5px solid #e8e8e8;border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;transition:box-shadow .2s}
.step:hover{box-shadow:0 4px 16px rgba(0,0,0,.07)}
.step-icon-wrap{position:relative;width:fit-content}
.step-icon{width:48px;height:48px;background:#fff1f1;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--red)}
.step-num{position:absolute;top:-6px;right:-6px;width:18px;height:18px;background:var(--red);color:#fff;font-size:.65rem;font-weight:800;border-radius:50%;display:flex;align-items:center;justify-content:center}
.step-title{font-size:.9375rem;font-weight:700;color:#111;margin:0 0 .35rem;letter-spacing:-.02em}
.step-desc{font-size:.875rem;color:#666;line-height:1.55;margin:0}

/* FEATURES */
.section.bg-gray{background:#fafafa;border-top:1px solid #f0f0f0;border-bottom:1px solid #f0f0f0}
.features-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.feature{background:#fff;border:1.5px solid #e8e8e8;border-radius:12px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;transition:box-shadow .2s}
.feature:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.feature-icon{width:40px;height:40px;background:#fff1f1;border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0}
.feature-title{font-size:.9375rem;font-weight:700;color:#111;margin:0 0 .3rem;letter-spacing:-.02em}
.feature-desc{font-size:.8375rem;color:#666;line-height:1.55;margin:0}

/* TOOLS DARK */
.tools-dark{padding:4rem 1.25rem;background:#0a0a0a;border-top:1px solid #1a1a1a}
.tools-dark-inner{max-width:960px;margin:0 auto}
.tools-dark-head{text-align:center;margin-bottom:2.5rem;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.label-pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);background:rgba(237,16,16,.12);border:1px solid rgba(237,16,16,.25);padding:.3rem .75rem;border-radius:100px}
.tools-dark .section-title{color:#fff}
.tools-dark .section-subtitle{color:#555}
.tools-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.tool-card-dark{background:#141414;border:1.5px solid #222;border-radius:14px;padding:1.25rem;display:flex;flex-direction:column;gap:.75rem;height:100%;transition:border-color .2s,box-shadow .2s,transform .2s}
.tool-card-dark.live{border-color:rgba(237,16,16,.35);background:linear-gradient(145deg,#1a0a0a 0%,#141414 100%)}
.tool-card-dark.live:hover{border-color:var(--red);box-shadow:0 0 24px rgba(237,16,16,.15);transform:translateY(-2px)}
.tool-card-dark.soon{opacity:.55}
.tool-card-top{display:flex;align-items:center;justify-content:space-between}
.tool-emoji{font-size:1.5rem;line-height:1}
.tool-badge{font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .5rem;border-radius:20px}
.tool-badge.live{background:rgba(22,163,74,.15);color:#4ade80;border:1px solid rgba(22,163,74,.25)}
.tool-badge.soon{background:#1e1e1e;color:#555;border:1px solid #2a2a2a}
.tool-title-dark{font-size:.9375rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin:0}
.tool-desc-dark{font-size:.8125rem;color:#666;line-height:1.55;flex:1}
.tool-feats{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.tool-feat{font-size:.68rem;color:#555;font-weight:600;background:#1e1e1e;padding:.18rem .5rem;border-radius:20px;border:1px solid #2a2a2a}
.tool-card-dark.live .tool-feat{color:#888;background:rgba(237,16,16,.06);border-color:rgba(237,16,16,.12)}
.tool-cta-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:700;padding:.5rem 1rem;border-radius:7px;text-decoration:none;transition:background .15s,box-shadow .15s;background:var(--red);color:#fff}
.tool-cta-btn:hover{background:var(--red-dark);box-shadow:0 4px 14px rgba(237,16,16,.4)}
.tool-cta-soon{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:700;padding:.5rem 1rem;border-radius:7px;background:#1e1e1e;color:#444;border:1px solid #2a2a2a}
.see-all{margin-top:1.75rem;text-align:center}
.see-all a{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:600;color:#555;padding:.4rem .75rem;border-radius:7px;transition:color .15s}
.see-all a:hover{color:#fff}

/* SEO CONTENT */
.content-section{padding:4rem 1.25rem;background:#f8f8f8;border-top:1px solid #f0f0f0}
.content-inner{max-width:900px;margin:0 auto}
.content-inner h2{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:800;color:#111;letter-spacing:-.03em;margin:0 0 2rem}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.content-inner h3{font-size:1rem;font-weight:700;color:#111;margin:0 0 .75rem;letter-spacing:-.02em}
.content-inner p{font-size:.9rem;color:#555;line-height:1.65;margin:0 0 .75rem}
.content-inner ul{font-size:.9rem;color:#555;line-height:1.65;margin:0 0 .75rem;padding-left:1.25rem}
.content-inner li{margin-bottom:.3rem}

/* FAQ */
.faq-list{background:#fff;border:1.5px solid #e8e8e8;border-radius:14px;padding:0 1.5rem}
.faq-item{border-bottom:1px solid #f0f0f0}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.125rem 0;background:none;border:none;cursor:pointer;text-align:left;font-size:.9375rem;font-weight:600;color:#111;font-family:inherit;transition:color .15s}
.faq-q:hover{color:var(--red)}
.faq-chevron{flex-shrink:0;color:#aaa;transition:transform .25s ease,color .15s}
.faq-item.open .faq-chevron{transform:rotate(180deg);color:var(--red)}
.faq-a{padding-bottom:1.125rem;font-size:.9rem;color:#555;line-height:1.6;display:none}
.faq-item.open .faq-a{display:block}

/* BLOG SECTION */
.blog-section{padding:4rem 1.25rem;border-top:1px solid #f0f0f0}
.blog-section-inner{max-width:900px;margin:0 auto}
.blog-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1.75rem;flex-wrap:wrap}
.blog-title{font-size:clamp(1.3rem,2.5vw,1.6rem);font-weight:800;color:#111;letter-spacing:-.03em;margin:0 0 .25rem}
.blog-subtitle{font-size:.9rem;color:#888;margin:0}
.blog-see-all{display:flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:700;color:var(--red);padding:.35rem .6rem;border-radius:6px;transition:background .15s}
.blog-see-all:hover{background:#fff1f1}
.blog-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.post-card{background:#fff;border:1.5px solid #e8e8e8;border-radius:14px;overflow:hidden;transition:box-shadow .2s,border-color .2s,transform .2s}
.post-card:hover{box-shadow:0 4px 20px rgba(0,0,0,.08);border-color:#ddd;transform:translateY(-2px)}
.post-card.featured{border-color:#ffd0d0}
.post-card.featured:hover{border-color:var(--red);box-shadow:0 4px 20px rgba(237,16,16,.1)}
.post-card-inner{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.post-meta{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.post-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--red);background:#fff1f1;padding:.15rem .5rem;border-radius:20px}
.post-dot{color:#ccc;font-size:.75rem}
.post-date,.post-read{font-size:.78rem;color:#aaa}
.post-title{font-size:1.0625rem;font-weight:700;color:#111;letter-spacing:-.02em;line-height:1.35}
.post-title a{color:inherit;text-decoration:none;transition:color .15s}
.post-title a:hover{color:var(--red)}
.post-desc{font-size:.875rem;color:#666;line-height:1.6;flex:1}
.post-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.25rem}
.post-tags{display:flex;gap:.3rem;flex-wrap:wrap}
.post-tag{font-size:.72rem;color:#aaa;font-weight:500}
.post-cta{display:flex;align-items:center;gap:.3rem;font-size:.8125rem;font-weight:700;color:var(--red);padding:.3rem .6rem;border-radius:6px;transition:background .15s}
.post-cta:hover{background:#fff1f1}

/* FOOTER */
.footer{background:#f8f8f8;border-top:1px solid #ebebeb;padding:3rem 1.25rem 0;margin-top:4rem}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr auto;gap:3rem;padding-bottom:2.5rem;border-bottom:1px solid #e8e8e8}
.footer-brand{display:flex;flex-direction:column;gap:.75rem;max-width:240px}
.footer-logo{display:flex;align-items:center;gap:.4rem;font-size:1rem;font-weight:700;color:#111;text-decoration:none}
.footer-tagline{font-size:.8125rem;color:#999;line-height:1.55}
.footer-nav{display:flex;gap:3rem}
.footer-col{display:flex;flex-direction:column;gap:.75rem}
.footer-col-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#888}
.footer-col-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.45rem}
.footer-col-links a{font-size:.8375rem;color:#666;transition:color .15s}
.footer-col-links a:hover{color:var(--red)}
.footer-bottom{max-width:1100px;margin:0 auto;padding:1.25rem 0 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-copy,.footer-note{font-size:.75rem;color:#bbb}

/* BREADCRUMB */
.breadcrumb{padding:.75rem 0}
.breadcrumb ol{list-style:none;padding:0;margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:.1rem}
.breadcrumb li{display:flex;align-items:center;gap:.1rem}
.breadcrumb a{font-size:.8125rem;color:#888;padding:.15rem .25rem;border-radius:4px;transition:color .15s}
.breadcrumb a:hover{color:var(--red)}
.breadcrumb span{font-size:.8125rem;color:#555;font-weight:500;padding:.15rem .25rem}
.breadcrumb svg{color:#ccc}

/* TOOLS PAGE */
.tools-page-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.tool-page-card{background:#fff;border:1.5px solid #e8e8e8;border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:1rem;height:100%;transition:box-shadow .2s,border-color .2s,transform .2s}
.tool-page-card.live:hover{box-shadow:0 4px 20px rgba(237,16,16,.1);border-color:var(--red);transform:translateY(-2px)}
.tool-page-card.soon{opacity:.7;background:#fafafa}
.tool-page-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.tool-page-icon{width:48px;height:48px;background:#fff1f1;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--red);flex-shrink:0;font-size:1.375rem}
.tool-page-card.soon .tool-page-icon{background:#f4f4f4;color:#bbb}
.page-badge{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.2rem .55rem;border-radius:20px}
.page-badge.live{background:#e8f8f0;color:#16a34a;border:1px solid #bbf7d0}
.page-badge.soon{background:#f4f4f4;color:#aaa;border:1px solid #e8e8e8}
.tool-page-title{font-size:1rem;font-weight:700;color:#111;letter-spacing:-.02em}
.tool-page-desc{font-size:.875rem;color:#666;line-height:1.6;flex:1}
.tool-page-feats{list-style:none;padding:0;margin:.25rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.tool-page-feat{display:flex;align-items:center;gap:.3rem;font-size:.75rem;color:#888;font-weight:500;background:#f8f8f8;padding:.2rem .55rem;border-radius:20px;border:1px solid #f0f0f0}
.tool-page-feat svg{color:#16a34a;flex-shrink:0}
.tool-page-card.soon .tool-page-feat svg{color:#ccc}
.tool-page-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.875rem;font-weight:700;padding:.6rem 1.1rem;border-radius:8px;transition:background .15s,box-shadow .15s}
.tool-page-btn.live{background:var(--red);color:#fff}
.tool-page-btn.live:hover{background:var(--red-dark);box-shadow:0 4px 12px rgba(237,16,16,.3)}
.tool-page-btn.soon{background:#f0f0f0;color:#bbb;cursor:default}

/* BLOG INDEX */
.blog-index-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}

/* ARTICLE */
.article-header{padding:2rem 0 2.5rem;border-bottom:1px solid #f0f0f0;margin-bottom:2.5rem}
.article-category{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--red);background:#fff1f1;padding:.15rem .5rem;border-radius:20px}
.article-title{font-size:clamp(1.6rem,4vw,2.125rem);font-weight:800;color:#111;letter-spacing:-.04em;line-height:1.18;margin:.75rem 0 1rem}
.article-desc{font-size:1.0625rem;color:#666;line-height:1.6}
.article-body h2{font-size:1.375rem;font-weight:800;color:#111;letter-spacing:-.03em;margin:2.25rem 0 .875rem;padding-top:.5rem;border-top:1px solid #f0f0f0}
.article-body h3{font-size:1.0625rem;font-weight:700;color:#111;margin:1.75rem 0 .625rem}
.article-body p{font-size:.9875rem;color:#444;line-height:1.75;margin:0 0 1.125rem}
.article-body ul,.article-body ol{padding-left:1.375rem;margin:0 0 1.125rem}
.article-body li{font-size:.9875rem;color:#444;line-height:1.75;margin-bottom:.4rem}
.article-body strong{font-weight:700;color:#222}
.article-body code{font-family:monospace;font-size:.85em;background:#f4f4f4;color:#c80808;padding:.15em .4em;border-radius:4px;border:1px solid #ebebeb}
.article-body pre{background:#1a1a1a;border-radius:10px;padding:1.25rem 1.5rem;overflow-x:auto;margin:0 0 1.5rem}
.article-body pre code{background:none;color:#e8e8e8;border:none;padding:0;font-size:.875rem;line-height:1.7}
.article-body a{color:var(--red);text-decoration:underline;text-underline-offset:2px}
.table-wrapper{overflow-x:auto;margin:0 0 1.5rem;border-radius:10px;border:1px solid #e8e8e8}
.article-body table{width:100%;border-collapse:collapse;font-size:.875rem}
.article-body th{background:#f8f8f8;padding:.625rem 1rem;text-align:left;font-weight:700;color:#333;border-bottom:1px solid #e8e8e8}
.article-body td{padding:.625rem 1rem;color:#555;border-bottom:1px solid #f4f4f4}
.article-body tr:last-child td{border-bottom:none}
.article-body tr:hover td{background:#fafafa}
.article-footer{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #f0f0f0}
.article-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.article-tag{font-size:.78rem;color:#aaa;font-weight:500}
.inline-cta{margin:2.5rem 0;background:linear-gradient(135deg,#fff1f1 0%,#fff8f8 100%);border:1.5px solid #ffd0d0;border-radius:14px;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.inline-cta-body{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:200px}
.inline-cta-body strong{font-size:.9375rem;font-weight:700;color:#111}
.inline-cta-body span{font-size:.8375rem;color:#888}
.inline-cta-btn{display:flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;text-decoration:none;padding:.6rem 1.1rem;border-radius:8px;font-size:.875rem;font-weight:700;white-space:nowrap;transition:background .15s,box-shadow .15s}
.inline-cta-btn:hover{background:var(--red-dark);box-shadow:0 4px 12px rgba(237,16,16,.3)}
.related{margin-top:3rem;padding-top:2.5rem;border-top:1px solid #f0f0f0}
.related-title{font-size:1.125rem;font-weight:800;color:#111;letter-spacing:-.03em;margin:0 0 1.25rem}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.back-link{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #f0f0f0}
.back-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.875rem;font-weight:600;color:#888;padding:.4rem .6rem;border-radius:7px;transition:color .15s,background .15s}
.back-btn:hover{color:#111;background:#f0f0f0}
.tool-blog-cta{margin-top:3rem;padding:2.5rem;background:#f8f8f8;border:1.5px solid #e8e8e8;border-radius:16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem}
.tool-blog-cta .label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--red)}
.tool-blog-cta h2{font-size:1.25rem;font-weight:800;color:#111;letter-spacing:-.03em}
.tool-blog-cta p{font-size:.9rem;color:#777;max-width:400px}
.tool-blog-cta a{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;background:#111;color:#fff;text-decoration:none;padding:.65rem 1.25rem;border-radius:9px;font-size:.9rem;font-weight:700;transition:background .15s}
.tool-blog-cta a:hover{background:#333}

/* SKIP LINK */
.skip-link{position:absolute;top:-100px;left:1rem;background:var(--red);color:#fff;padding:.5rem 1rem;border-radius:0 0 8px 8px;font-size:.875rem;font-weight:600;text-decoration:none;z-index:9999;transition:top .15s}
.skip-link:focus{top:0}

/* PAGE LAYOUT */
.page-header{padding:2rem 0 2.5rem;border-bottom:1px solid #f0f0f0;margin-bottom:2.5rem}
.page-title{font-size:clamp(1.6rem,4vw,2.25rem);font-weight:800;color:#111;letter-spacing:-.04em;margin:0 0 .5rem}
.page-subtitle{font-size:1rem;color:#777}
.container{max-width:900px;margin:0 auto;padding:0 1.25rem}
.container-wide{max-width:960px;margin:0 auto;padding:0 1.25rem}

/* RESPONSIVE */
@media(max-width:900px){
  .tools-grid{grid-template-columns:repeat(2,1fr)}
  .footer-inner{grid-template-columns:1fr;gap:2rem}
  .footer-nav{gap:2rem;flex-wrap:wrap}
  .footer-brand{max-width:100%}
  .footer-bottom{flex-direction:column;align-items:flex-start}
}
@media(max-width:768px){
  .features-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .steps{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .tools-grid{grid-template-columns:1fr}
  .blog-grid,.blog-index-grid,.related-grid,.tools-page-grid{grid-template-columns:1fr}
  .input-row{flex-direction:column}
  .submit-btn{width:100%;justify-content:center;height:44px}
  .thumbs-grid{grid-template-columns:1fr}
  .content-grid{grid-template-columns:1fr;gap:1.5rem}
  .tool-card{border-radius:12px;margin-top:-1rem}
  .input-area{padding:1.25rem 1.25rem 1rem}
  .results-area{padding:1.25rem}
  .faq-list{padding:0 1rem}
  .hero{padding:2rem 1.25rem 1.5rem}
  .inline-cta{flex-direction:column;align-items:flex-start}
  .nav-desktop{display:none}
}

/* ── DARK MODE ── */
:root {
  --bg: #fff;
  --bg2: #f8f8f8;
  --text: #111;
  --text2: #555;
  --text3: #888;
  --border: #e8e8e8;
  --card-bg: #fff;
  --input-bg: #fafafa;
  --header-bg: rgba(255,255,255,0.93);
}
html.dark {
  --bg: #0f0f0f;
  --bg2: #171717;
  --text: #f0f0f0;
  --text2: #aaa;
  --text3: #666;
  --border: #2a2a2a;
  --card-bg: #1a1a1a;
  --input-bg: #111;
  --header-bg: rgba(15,15,15,0.93);
}
html.dark body { background: var(--bg); color: var(--text); }
html.dark .header { background: var(--header-bg); border-color: #1e1e1e; }
html.dark .logo-text, html.dark .logo { color: var(--text); }
html.dark .nav a { color: #888; }
html.dark .nav a:hover { color: #f0f0f0; background: #222; }
html.dark .hero { background: linear-gradient(180deg,#0f0f0f 0%,#141414 100%); border-color: #1e1e1e; }
html.dark .hero-title { color: #f0f0f0; }
html.dark .hero-desc { color: #888; }
html.dark .social-proof { background: #1a1a1a; border-color: #2a2a2a; }
html.dark .social-text { color: #888; }
html.dark .social-text strong { color: #f0f0f0; }
html.dark .badge { background: #1e1e1e; border-color: #2a2a2a; color: #aaa; }
html.dark .tool-card { background: #141414; border-color: #252525; }
html.dark .mode-tabs { background: #111; border-color: #222; }
html.dark .mode-tab { color: #666; }
html.dark .mode-tab:hover { color: #ccc; }
html.dark .mode-tab.active { color: #ed1010; background: #1a1a1a; }
html.dark .url-input { background: #111; border-color: #2a2a2a; color: #f0f0f0; }
html.dark .url-input:focus { background: #1a1a1a; }
html.dark .url-input::placeholder { color: #444; }
html.dark .bulk-input { background: #111; border-color: #2a2a2a; color: #f0f0f0; }
html.dark .bulk-input::placeholder { color: #444; }
html.dark .quality-select { background: #111; border-color: #2a2a2a; color: #f0f0f0; }
html.dark .input-hint { color: #444; }
html.dark .input-label { color: #888; }
html.dark .skeleton-card { border-color: #222; }
html.dark .skeleton-img, html.dark .skeleton-line {
  background: linear-gradient(90deg,#1e1e1e 25%,#252525 50%,#1e1e1e 75%);
  background-size: 200% 100%;
}
html.dark .results-area { border-color: #1e1e1e; }
html.dark .results-title { color: #f0f0f0; }
html.dark .thumb-card { background: #1a1a1a; border-color: #2a2a2a; }
html.dark .thumb-card:hover { border-color: #3a3a3a; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
html.dark .thumb-card.hd { border-color: #4a1a1a; }
html.dark .thumb-card.hd:hover { border-color: #ed1010; }
html.dark .thumb-img-wrap { background: #111; }
html.dark .thumb-label { color: #e0e0e0; }
html.dark .thumb-dim { color: #555; }
html.dark .btn-copy { background: #252525; color: #aaa; }
html.dark .btn-copy:hover:not(:disabled) { background: #2f2f2f; color: #f0f0f0; }
html.dark .section { background: var(--bg); }
html.dark .section.bg-gray { background: #141414; border-color: #1e1e1e; }
html.dark .section-title { color: #f0f0f0; }
html.dark .section-subtitle { color: #666; }
html.dark .step { background: #1a1a1a; border-color: #252525; }
html.dark .step-title { color: #f0f0f0; }
html.dark .step-desc { color: #777; }
html.dark .feature { background: #1a1a1a; border-color: #252525; }
html.dark .feature-title { color: #f0f0f0; }
html.dark .feature-desc { color: #777; }
html.dark .content-section { background: #141414; border-color: #1e1e1e; }
html.dark .content-inner h2, html.dark .content-inner h3 { color: #f0f0f0; }
html.dark .content-inner p, html.dark .content-inner ul, html.dark .content-inner li { color: #888; }
html.dark .faq-list { background: #1a1a1a; border-color: #252525; }
html.dark .faq-item { border-color: #252525; }
html.dark .faq-q { color: #e0e0e0; }
html.dark .faq-a { color: #888; }
html.dark .blog-section { background: var(--bg); border-color: #1e1e1e; }
html.dark .blog-title { color: #f0f0f0; }
html.dark .blog-subtitle { color: #666; }
html.dark .post-card { background: #1a1a1a; border-color: #252525; }
html.dark .post-card:hover { border-color: #3a3a3a; }
html.dark .post-card.featured { border-color: #3a1a1a; }
html.dark .post-card.featured:hover { border-color: #ed1010; }
html.dark .post-title a { color: #e0e0e0; }
html.dark .post-desc { color: #777; }
html.dark .footer { background: #0a0a0a; border-color: #1a1a1a; }
html.dark .footer-inner { border-color: #1e1e1e; }
html.dark .footer-logo, html.dark .footer-logo span { color: #e0e0e0; }
html.dark .footer-tagline { color: #555; }
html.dark .footer-col-title { color: #555; }
html.dark .footer-col-links a { color: #555; }
html.dark .footer-col-links a:hover { color: #ed1010; }
html.dark .footer-copy, html.dark .footer-note { color: #333; }
html.dark .page-title { color: #f0f0f0; }
html.dark .page-subtitle { color: #666; }
html.dark .tool-page-card { background: #1a1a1a; border-color: #252525; }
html.dark .tool-page-title { color: #f0f0f0; }
html.dark .tool-page-desc { color: #777; }
html.dark .tool-page-feat { background: #222; border-color: #2a2a2a; color: #777; }
html.dark .blog-index-grid .post-card { background: #1a1a1a; border-color: #252525; }
html.dark .article-header { border-color: #252525; }
html.dark .article-title { color: #f0f0f0; }
html.dark .article-desc { color: #888; }
html.dark .article-body h2 { color: #f0f0f0; border-color: #252525; }
html.dark .article-body h3 { color: #e0e0e0; }
html.dark .article-body p, html.dark .article-body li { color: #999; }
html.dark .article-body strong { color: #e0e0e0; }
html.dark .article-body code { background: #252525; color: #ff6b6b; border-color: #333; }
html.dark .article-body pre { background: #0a0a0a; }
html.dark .table-wrapper { border-color: #252525; }
html.dark .article-body th { background: #1e1e1e; color: #e0e0e0; border-color: #252525; }
html.dark .article-body td { color: #888; border-color: #1e1e1e; }
html.dark .article-body tr:hover td { background: #1e1e1e; }
html.dark .article-footer { border-color: #252525; }
html.dark .article-tag { color: #555; }
html.dark .inline-cta { background: linear-gradient(135deg,#1a0a0a 0%,#1a1a1a 100%); border-color: #3a1a1a; }
html.dark .inline-cta-body strong { color: #f0f0f0; }
html.dark .inline-cta-body span { color: #666; }
html.dark .related { border-color: #252525; }
html.dark .related-title { color: #f0f0f0; }
html.dark .back-btn { color: #666; }
html.dark .back-btn:hover { color: #f0f0f0; background: #1e1e1e; }
html.dark .breadcrumb a { color: #555; }
html.dark .breadcrumb span { color: #888; }
html.dark .download-all-btn { background: #e0e0e0; color: #111; }
html.dark .download-all-btn:hover { background: #fff; }
html.dark .bulk-video-label { color: #555; }
html.dark .bulk-video-label code { color: #888; }

/* ── DARK TOGGLE BUTTON ── */
.dark-toggle {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #888;
  transition: border-color .15s, color .15s, background .15s;
  flex-shrink: 0;
  margin-left: .25rem;
}
.dark-toggle:hover { border-color: #ed1010; color: #ed1010; }
.dark-toggle:focus-visible { outline: 2px solid #ed1010; outline-offset: 2px; }
.dark-toggle .icon-sun { display: none; }
.dark-toggle .icon-moon { display: block; }
html.dark .dark-toggle .icon-sun { display: block; }
html.dark .dark-toggle .icon-moon { display: none; }

/* ── THUMB PLACEHOLDER ── */
.thumb-placeholder {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
html.dark .thumb-placeholder {
  background: linear-gradient(90deg,#1e1e1e 25%,#252525 50%,#1e1e1e 75%);
  background-size: 200% 100%;
}
.thumb-img { opacity: 0; transition: opacity .22s; }
.thumb-img.loaded { opacity: 1; }

/* ── BULK ROW ── */
.bulk-video-row { margin-bottom: 2rem; }
.bulk-video-label {
  display: flex; align-items: center; gap: .5rem;
  color: #888; font-size: .8rem; margin-bottom: .75rem;
}
.bulk-video-label code { font-family: monospace; font-size: .8rem; color: #555; }
.bulk-thumb-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
}
.thumb-card.compact .thumb-body { padding: .6rem .75rem; }
.thumb-card.compact .thumb-label { font-size: .75rem; }
.thumb-card.compact .btn-dl, .thumb-card.compact .btn-copy { font-size: 0; padding: 0; width: 32px; flex: 0 0 32px; }

/* ── SPINNER ── */
.spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: middle;
  margin-right: .25rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ CONTENT HUB COMPONENTS ═══ */
.spec-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.5rem 0 2rem;
}
.spec-item {
  background: var(--card-bg);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.spec-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #999;
}
.spec-value {
  font-size: 1rem;
  font-weight: 800;
  color: #ed1010;
  letter-spacing: -0.01em;
}
html.dark .spec-label { color: #555; }

.related-tools {
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--border);
}
.related-tools h2 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1.25rem;
  letter-spacing: -0.02em;
}
.related-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.related-tool-card {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  position: relative;
}
.related-tool-card:hover {
  border-color: #ed1010;
  box-shadow: 0 4px 16px rgba(237,16,16,0.1);
  transform: translateY(-2px);
}
.related-tool-card h3 {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.related-tool-card p {
  font-size: .78rem;
  color: var(--text3);
  margin: 0;
  line-height: 1.5;
}
.related-tool-arrow {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  color: #ed1010;
  font-weight: 700;
  opacity: 0;
  transition: opacity .15s, transform .15s;
}
.related-tool-card:hover .related-tool-arrow { opacity: 1; transform: translateX(3px); }

@media (max-width: 640px) {
  .spec-box { grid-template-columns: 1fr 1fr; }
  .related-tools-grid { grid-template-columns: 1fr; }
}

/* ═══ TOOLS HUB EXTRAS ═══ */
.hub-section-title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}
.spec-guides-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}
.spec-guide-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.spec-guide-card:hover {
  border-color: #ed1010;
  box-shadow: 0 4px 18px rgba(237,16,16,0.1);
  transform: translateY(-2px);
}
.spec-guide-icon {
  font-size: 1.5rem;
  width: 42px;
  height: 42px;
  background: #fff1f1;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
html.dark .spec-guide-icon { background: #2a1414; }
.spec-guide-card h3 {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.01em;
}
.spec-guide-card p {
  font-size: .8125rem;
  color: var(--text3);
  margin: 0;
  line-height: 1.5;
  flex: 1;
}
.spec-guide-tag {
  font-size: .72rem;
  font-weight: 700;
  color: #ed1010;
  background: #fff1f1;
  padding: .2rem .55rem;
  border-radius: 20px;
  width: fit-content;
}
html.dark .spec-guide-tag { background: #2a1414; }

@media (max-width: 768px) {
  .spec-guides-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .spec-guides-grid { grid-template-columns: 1fr !important; }
}

/* ═══ SPEC LINKS STRIP ═══ */
.spec-links-strip {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.spec-links-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--text3);
  margin-right: .25rem;
}
.spec-links-strip a {
  font-size: .8rem;
  font-weight: 600;
  color: #ed1010;
  text-decoration: none;
  background: #fff1f1;
  padding: .3rem .7rem;
  border-radius: 20px;
  transition: background .15s;
}
.spec-links-strip a:hover { background: #ffd0d0; }
html.dark .spec-links-strip a { background: #2a1414; }
html.dark .spec-links-strip a:hover { background: #3a1818; }

/* ═══ RELATED POSTS SECTION (semantic cross-linking) ═══ */
.related-posts-section {
  margin: 2.5rem 0;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.related-posts-section h2 {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 1.1rem;
  letter-spacing: -0.02em;
}
.related-posts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .75rem;
}
.related-post-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  background: var(--card-bg);
  border: 1.5px solid var(--border);
  border-radius: 11px;
  padding: 1rem;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.related-post-card:hover {
  border-color: #ed1010;
  box-shadow: 0 4px 14px rgba(237,16,16,0.1);
  transform: translateY(-2px);
}
.related-post-cat {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #ed1010;
  width: fit-content;
}
.related-post-card h3 {
  font-size: .8375rem;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.related-spec-strip {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.related-spec-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text3);
}
.related-spec-strip a {
  font-size: .78rem;
  font-weight: 600;
  color: #ed1010;
  text-decoration: none;
  background: #fff1f1;
  padding: .25rem .65rem;
  border-radius: 20px;
  transition: background .15s;
}
.related-spec-strip a:hover { background: #ffd0d0; }
html.dark .related-spec-strip a { background: #2a1414; }
html.dark .related-spec-strip a:hover { background: #3a1818; }

@media (max-width: 560px) {
  .related-posts-grid { grid-template-columns: 1fr; }
}

/* ═══ TRUST PAGES ═══ */
.trust-page { max-width: 780px; margin: 0 auto; }

.trust-header {
  text-align: center;
  padding: 2.5rem 0 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2.5rem;
}
.trust-icon-wrap {
  width: 64px; height: 64px;
  background: #fff1f1;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.75rem;
  margin: 0 auto 1rem;
}
html.dark .trust-icon-wrap { background: #2a1414; }
.trust-header h1 {
  font-size: clamp(1.6rem, 4vw, 2.125rem);
  font-weight: 900;
  color: var(--text);
  letter-spacing: -0.04em;
  margin: 0 0 .5rem;
}
.trust-lead {
  font-size: 1rem;
  color: var(--text3);
  margin: 0;
}
.trust-body { display: flex; flex-direction: column; gap: 0; }
.trust-section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
.trust-section:last-child { border-bottom: none; }
.trust-section h2 {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 .875rem;
}
.trust-section p {
  font-size: .9375rem;
  color: var(--text2);
  line-height: 1.7;
  margin: 0 0 .875rem;
}
.trust-section p:last-child { margin-bottom: 0; }
.trust-section ul {
  font-size: .9375rem;
  color: var(--text2);
  line-height: 1.7;
  padding-left: 1.375rem;
  margin: 0 0 .875rem;
}
.trust-section li { margin-bottom: .35rem; }
.trust-section a { color: #ed1010; text-decoration: underline; text-underline-offset: 2px; }
.trust-section a:hover { color: #c80808; }
.trust-section code {
  font-family: monospace;
  font-size: .85em;
  background: #f4f4f4;
  color: #c80808;
  padding: .15em .4em;
  border-radius: 4px;
  border: 1px solid #ebebeb;
}
html.dark .trust-section code { background: #252525; color: #ff6b6b; border-color: #333; }

.trust-callout {
  background: #fff8f0;
  border: 1.5px solid #fed7aa;
  border-radius: 12px;
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  color: #7c2d12;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
html.dark .trust-callout { background: #1a1200; border-color: #78350f; color: #fed7aa; }

.trust-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: 1.5rem;
  background: #fafafa;
  border-radius: 12px;
  border: 1.5px solid var(--border);
}
html.dark .trust-values { background: #141414; }
.trust-value {
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: .35rem;
}
.trust-value span { font-size: 1.5rem; }
.trust-value strong { font-size: .875rem; font-weight: 700; color: var(--text); }
.trust-value p { font-size: .78rem; color: var(--text3); margin: 0; line-height: 1.4; }

.trust-loop {
  margin-top: 2.5rem;
  padding: 1rem 1.25rem;
  background: #f8f8f8;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
html.dark .trust-loop { background: #141414; }
.trust-loop span {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text3);
  margin-right: .25rem;
}
.trust-loop a {
  font-size: .78rem;
  font-weight: 600;
  color: #ed1010;
  text-decoration: none;
  background: #fff1f1;
  padding: .25rem .65rem;
  border-radius: 20px;
  transition: background .15s;
}
.trust-loop a:hover { background: #ffd0d0; }
html.dark .trust-loop a { background: #2a1414; }

/* ═══ CONTACT FORM ═══ */
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-label { font-size: .875rem; font-weight: 600; color: var(--text); }
.form-required { color: #ed1010; }
.form-input {
  width: 100%;
  padding: .75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 9px;
  font-size: .9375rem;
  color: var(--text);
  background: var(--input-bg);
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: #ed1010; box-shadow: 0 0 0 3px rgba(237,16,16,.08); }
.form-select { cursor: pointer; }
.form-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-submit {
  width: fit-content;
  height: auto;
  padding: .75rem 1.75rem;
  font-size: 1rem;
}
.form-success {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #ecfdf5;
  border: 1.5px solid #bbf7d0;
  border-radius: 9px;
  padding: .875rem 1.125rem;
  font-size: .9rem;
  font-weight: 600;
  color: #15803d;
}
.form-error {
  background: #fff1f1;
  border: 1.5px solid #fecaca;
  border-radius: 9px;
  padding: .875rem 1.125rem;
  font-size: .9rem;
  color: #c80808;
}

/* ═══ SOCIAL BUTTONS ═══ */
.social-links {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.social-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .35rem .75rem;
  border-radius: 7px;
  text-decoration: none;
  transition: opacity .15s, transform .1s;
  background: #1a1a1a;
  color: #fff;
  white-space: nowrap;
}
.social-btn:hover { opacity: .85; transform: translateY(-1px); }
.social-btn--yt { background: #ed1010; }
.social-btn--tk { background: #010101; }
.social-btn--fb { background: #1877f2; }
.social-btn--pin { background: #e60023; }
.social-btn--ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-btn--li { background: #0a66c2; }
html.dark .social-btn { background: #2a2a2a; }
html.dark .social-btn--yt { background: #ed1010; }
html.dark .social-btn--tk { background: #2a2a2a; }
html.dark .social-btn--fb { background: #1877f2; }
html.dark .social-btn--pin { background: #e60023; }
html.dark .social-btn--ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
html.dark .social-btn--li { background: #0a66c2; }

/* ═══ DARK MODE MOBILE FIX ═══ */
@media (max-width: 560px) {
  /* Dark toggle always visible on mobile — was hidden with nav */
  .dark-toggle-mobile {
    display: flex !important;
  }
  /* Trust values responsive */
  .trust-values { grid-template-columns: repeat(2, 1fr); }
}

/* ═══ QUICK ANSWER BLOCK (AI-friendly) ═══ */
.quick-answer{background:linear-gradient(135deg,#fff8f0 0%,#fff1f1 100%);border:1.5px solid #fed7aa;border-left:4px solid #ed1010;border-radius:10px;padding:1rem 1.25rem;margin:0 0 2rem;font-size:.9375rem;color:#111;line-height:1.6}
html.dark .quick-answer{background:linear-gradient(135deg,#1a0f00 0%,#1a0808 100%);border-color:#78350f;border-left-color:#ed1010;color:#fed7aa}
.qa-label{display:block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:#ed1010;margin-bottom:.4rem}

/* ═══ VERIFIED BADGE ═══ */
.verified-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;color:#16a34a;background:#ecfdf5;padding:.3rem .7rem;border-radius:20px;border:1px solid #bbf7d0;margin-top:.75rem}
html.dark .verified-badge{background:#052e16;border-color:#166534;color:#4ade80}
.verified-badge svg{color:#16a34a;flex-shrink:0}

/* ═══ CROSS-LINK TIP ═══ */
.cross-link-tip{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:.75rem 1rem;font-size:.875rem;color:#0c4a6e;margin:1rem 0 !important}
html.dark .cross-link-tip{background:#0c1a2e;border-color:#1e40af;color:#93c5fd}
.cross-link-tip a{color:#0369a1;font-weight:600}
html.dark .cross-link-tip a{color:#60a5fa}

/* ═══ DARK MODE MOBILE TOGGLE ═══ */
@media(max-width:560px){
  #dark-toggle-mobile{display:flex !important}
}

/* ── TRUST BAR ── */
.trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;padding:.75rem 1.25rem;margin:0 auto 1rem;max-width:640px}
.trust-item{display:flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--text2,var(--muted))}
.trust-item .trust-icon{color:var(--teal);font-size:1rem;line-height:1}
@media (max-width:520px){.trust-bar{gap:.9rem 1rem;padding:.5rem 1rem}.trust-item{font-size:.75rem}}

/* ── FLOATING SOCIAL WIDGET ── */
.tf-social-float{position:fixed;right:14px;bottom:14px;z-index:999;display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.tf-social-toggle{width:46px;height:46px;border-radius:50%;background:var(--red);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:transform .15s,background .15s}
.tf-social-toggle:hover{background:var(--red-dark);transform:scale(1.06)}
.tf-social-panel{display:none;flex-direction:column;gap:.4rem;background:var(--card-bg,#fff);border:1px solid var(--border);border-radius:12px;padding:.5rem;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.tf-social-panel.open{display:flex}
.tf-social-panel a,.tf-social-panel button{display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:600;color:var(--text);background:none;border:none;padding:.45rem .6rem;border-radius:8px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .15s}
.tf-social-panel a:hover,.tf-social-panel button:hover{background:var(--surface,var(--bg2))}
.tf-social-panel svg{flex-shrink:0}
.tf-social-panel .tf-icon-x{color:var(--text)}
.tf-social-panel .tf-icon-yt{color:#ed1010}
.tf-social-panel .tf-icon-share{color:var(--teal)}
.tf-social-divider{height:1px;background:var(--border);margin:.15rem .3rem}
html.dark .tf-social-toggle{box-shadow:0 4px 16px rgba(0,0,0,.5)}
@media (max-width:480px){.tf-social-float{right:10px;bottom:10px}}

/* ── SOCIAL TOP BAR (header) ── */
.social-topbar{display:flex;justify-content:center;align-items:center;gap:.6rem;padding:.55rem 1rem;background:#fff;border-bottom:1px solid var(--border,#e8e8e8)}
.social-topbar a{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:#000;color:#fff;transition:transform .15s,opacity .15s;flex-shrink:0}
.social-topbar a:hover{transform:translateY(-2px);opacity:.85}
html.dark .social-topbar{background:var(--bg,#0f0f0f);border-color:#1e1e1e}
html.dark .social-topbar a{background:#232323}
@media (max-width:380px){.social-topbar{gap:.45rem;padding:.45rem .75rem}.social-topbar a{width:30px;height:30px}}

/* ── ARTICLE COVER IMAGE ── */
.article-cover{width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:14px;margin:1.25rem 0 1.5rem;border:1px solid var(--border);display:block}